[Dialog][Collapsible] Fix style prop merging (#641)

mui · Sep 24, 2024 · edf00c3 · edf00c3
1 parent 9197824
commit edf00c3
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 4 deletions.
diff --git a/packages/mui-base/src/AlertDialog/Popup/AlertDialogPopup.tsx b/packages/mui-base/src/AlertDialog/Popup/AlertDialogPopup.tsx
@@ -49,7 +49,7 @@ const AlertDialogPopup = React.forwardRef(function AlertDialogPopup(
     propGetter: getRootProps,
     extraProps: {
       ...other,
-      style: { '--nested-dialogs': nestedOpenDialogCount },
+      style: { ...other.style, '--nested-dialogs': nestedOpenDialogCount },
       role: 'alertdialog',
     },
     customStyleHookMapping: {
@@ -132,6 +132,10 @@ AlertDialogPopup.propTypes /* remove-proptypes */ = {
    * A function to customize rendering of the component.
    */
   render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
 } as any;
 
 export { AlertDialogPopup };
diff --git a/packages/mui-base/src/Collapsible/Content/CollapsibleContent.tsx b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.tsx
@@ -47,6 +47,7 @@ const CollapsibleContent = React.forwardRef(function CollapsibleContent(
     extraProps: {
       ...otherProps,
       style: {
+        ...otherProps.style,
         '--collapsible-content-height': height ? `${height}px` : undefined,
       },
     },
@@ -84,6 +85,10 @@ CollapsibleContent.propTypes /* remove-proptypes */ = {
    * A function to customize rendering of the component.
    */
   render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
 } as any;
 
 export { CollapsibleContent };
diff --git a/packages/mui-base/src/Dialog/Popup/DialogPopup.tsx b/packages/mui-base/src/Dialog/Popup/DialogPopup.tsx
@@ -47,7 +47,7 @@ const DialogPopup = React.forwardRef(function DialogPopup(
     propGetter: getRootProps,
     extraProps: {
       ...other,
-      style: { '--nested-dialogs': nestedOpenDialogCount },
+      style: { ...other.style, '--nested-dialogs': nestedOpenDialogCount },
     },
     customStyleHookMapping: {
       open: (value) => ({ 'data-state': value ? 'open' : 'closed' }),
@@ -113,6 +113,10 @@ DialogPopup.propTypes /* remove-proptypes */ = {
    * A function to customize rendering of the component.
    */
   render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
 } as any;
 
 export { DialogPopup };
diff --git a/packages/mui-base/test/conformanceTests/propForwarding.tsx b/packages/mui-base/test/conformanceTests/propForwarding.tsx
@@ -15,7 +15,7 @@ export function testPropForwarding(
   }
 
   describe('prop forwarding', () => {
-    it('forwards custom props to the default root element', async () => {
+    it('forwards custom props to the default element', async () => {
       const otherProps = {
         lang: 'fr',
         'data-foobar': randomStringValue(),
@@ -32,7 +32,7 @@ export function testPropForwarding(
       expect(customRoot).to.have.attribute('data-foobar', otherProps['data-foobar']);
     });
 
-    it('forwards custom props to the customized root element', async () => {
+    it('forwards custom props to the customized element defined with a function', async () => {
       const otherProps = {
         lang: 'fr',
         'data-foobar': randomStringValue(),
@@ -51,5 +51,70 @@ export function testPropForwarding(
       expect(customRoot).to.have.attribute('lang', otherProps.lang);
       expect(customRoot).to.have.attribute('data-foobar', otherProps['data-foobar']);
     });
+
+    it('forwards custom props to the customized element defined using JSX', async () => {
+      const otherProps = {
+        lang: 'fr',
+        'data-foobar': randomStringValue(),
+      };
+
+      const { getByTestId } = await render(
+        React.cloneElement(element, {
+          render: <Element data-testid="custom-root" />,
+          ...otherProps,
+        }),
+      );
+
+      await flushMicrotasks();
+
+      const customRoot = getByTestId('custom-root');
+      expect(customRoot).to.have.attribute('lang', otherProps.lang);
+      expect(customRoot).to.have.attribute('data-foobar', otherProps['data-foobar']);
+    });
+
+    it('forwards the custom `style` attribute defined on the component', async () => {
+      const { getByTestId } = await render(
+        React.cloneElement(element, {
+          style: { color: 'green' },
+          'data-testid': 'custom-root',
+        }),
+      );
+
+      await flushMicrotasks();
+
+      const customRoot = getByTestId('custom-root');
+      expect(customRoot).to.have.attribute('style');
+      expect(customRoot.getAttribute('style')).to.contain('color: green');
+    });
+
+    it('forwards the custom `style` attribute defined on the render function', async () => {
+      const { getByTestId } = await render(
+        React.cloneElement(element, {
+          render: (props: any) => (
+            <Element {...props} style={{ color: 'green' }} data-testid="custom-root" />
+          ),
+        }),
+      );
+
+      await flushMicrotasks();
+
+      const customRoot = getByTestId('custom-root');
+      expect(customRoot).to.have.attribute('style');
+      expect(customRoot.getAttribute('style')).to.contain('color: green');
+    });
+
+    it('forwards the custom `style` attribute defined on the render function', async () => {
+      const { getByTestId } = await render(
+        React.cloneElement(element, {
+          render: <Element style={{ color: 'green' }} data-testid="custom-root" />,
+        }),
+      );
+
+      await flushMicrotasks();
+
+      const customRoot = getByTestId('custom-root');
+      expect(customRoot).to.have.attribute('style');
+      expect(customRoot.getAttribute('style')).to.contain('color: green');
+    });
   });
 }