[Dialog] Fix broken styles if maxWidth is set to false (#32987)

* Remove broken styles from MuiDialog-maxWidthFalse class * Fix prettier formatting of Dialog component * Add test that paperWidthFalse class is applied in Dialog when maxWidth is false * Test Dialog paper styles when maxWidth={false} * Fix prettier errors in Dialog tests * improve tests * test can be run in jsdom * Yarn prettier changes to Dialog.test.js Co-authored-by: ZeeshanTamboli <[email protected]>
mui · Jun 16, 2022 · de420be · de420be
1 parent 67186bf
commit de420be
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 7 deletions.
diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js
@@ -132,14 +132,15 @@ const DialogPaper = styled(Paper, {
       },
     },
   }),
-  ...(ownerState.maxWidth !== 'xs' && {
-    maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`,
-    [`&.${dialogClasses.paperScrollBody}`]: {
-      [theme.breakpoints.down(theme.breakpoints.values[ownerState.maxWidth] + 32 * 2)]: {
-        maxWidth: 'calc(100% - 64px)',
+  ...(ownerState.maxWidth &&
+    ownerState.maxWidth !== 'xs' && {
+      maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`,
+      [`&.${dialogClasses.paperScrollBody}`]: {
+        [theme.breakpoints.down(theme.breakpoints.values[ownerState.maxWidth] + 32 * 2)]: {
+          maxWidth: 'calc(100% - 64px)',
+        },
       },
-    },
-  }),
+    }),
   ...(ownerState.fullWidth && {
     width: 'calc(100% - 64px)',
   }),

diff --git a/packages/mui-material/src/Dialog/Dialog.test.js b/packages/mui-material/src/Dialog/Dialog.test.js
@@ -207,6 +207,27 @@ describe('<Dialog />', () => {
       );
       expect(getByTestId('paper')).to.have.class(classes.paperWidthXs);
     });
+
+    it('should use the right className when maxWidth={false}', () => {
+      render(
+        <Dialog open maxWidth={false} PaperProps={{ 'data-testid': 'paper' }}>
+          foo
+        </Dialog>,
+      );
+      expect(screen.getByTestId('paper')).to.have.class(classes.paperWidthFalse);
+    });
+
+    it('should apply the correct max-width styles when maxWidth={false}', () => {
+      render(
+        <Dialog open maxWidth={false} PaperProps={{ 'data-testid': 'paper' }}>
+          foo
+        </Dialog>,
+      );
+
+      expect(screen.getByTestId('paper')).toHaveComputedStyle({
+        maxWidth: 'calc(100% - 64px)',
+      });
+    });
   });
 
   describe('prop: fullWidth', () => {