From 3e08129810fc3d336ad7c333e4b4b1df133316e8 Mon Sep 17 00:00:00 2001
From: Lee Chase <lee.chase@uk.ibm.com>
Date: Mon, 19 Feb 2024 14:06:00 +0000
Subject: [PATCH] fix: modal body className

---
 .../ComposedModal/ComposedModal-test.js           | 10 ++++++++++
 .../components/ComposedModal/ComposedModal.tsx    | 15 +++++++++------
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/components/ComposedModal/ComposedModal-test.js b/packages/react/src/components/ComposedModal/ComposedModal-test.js
index 2b195941084b..b4a58a80c16c 100644
--- a/packages/react/src/components/ComposedModal/ComposedModal-test.js
+++ b/packages/react/src/components/ComposedModal/ComposedModal-test.js
@@ -33,6 +33,16 @@ describe('ComposedModal', () => {
       );
     });
 
+    it('supports a custom class on the modal body', () => {
+      render(
+        <ComposedModal>
+          <ModalBody className="custom-class" data-testid="modal-body" />
+        </ComposedModal>
+      );
+
+      expect(screen.getByTestId('modal-body')).toHaveClass('custom-class');
+    });
+
     it('should spread props onto the outermost div', () => {
       render(<ComposedModal data-testid="modal" />);
 
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.tsx b/packages/react/src/components/ComposedModal/ComposedModal.tsx
index a5295638ceae..9587badedea3 100644
--- a/packages/react/src/components/ComposedModal/ComposedModal.tsx
+++ b/packages/react/src/components/ComposedModal/ComposedModal.tsx
@@ -53,12 +53,15 @@ export const ModalBody = React.forwardRef<HTMLDivElement, ModalBodyProps>(
     const prefix = usePrefix();
     const contentRef = useRef<HTMLDivElement>(null);
     const [isScrollable, setIsScrollable] = useState(false);
-    const contentClass = cx({
-      [`${prefix}--modal-content`]: true,
-      [`${prefix}--modal-content--with-form`]: hasForm,
-      [`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable,
-      customClassName,
-    });
+    const contentClass = cx(
+      {
+        [`${prefix}--modal-content`]: true,
+        [`${prefix}--modal-content--with-form`]: hasForm,
+        [`${prefix}--modal-scroll-content`]:
+          hasScrollingContent || isScrollable,
+      },
+      customClassName
+    );
 
     useIsomorphicEffect(() => {
       if (contentRef.current) {