fix: modal body className

carbon-design-system · Feb 19, 2024 · 3e08129 · 3e08129
1 parent a7aaab1
commit 3e08129
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git 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
@@ -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) {