fix(fix-dialog-size): [Dialog] change Dialog max-width to to follow…

… design when maxWidth=`xs`

BREAKING CHANGE: change Dialog `max-width` to 400px from 444px when maxWidth=`xs`

packages/juno-core/src/components/Dialog/styles/DialogStyle.tsx

@@ -1,12 +1,24 @@
-import { css, RcThemedStyled } from '../../../foundation';
+import { css, px, RcThemedStyled } from '../../../foundation';
 import { RcDialogProps } from '../Dialog';
 import { RcDialogClasses, RcDialogMaxWidths } from '../utils';
 
 export const DialogStyle: RcThemedStyled<RcDialogProps, any> = (props) => {
-  const { size } = props;
+  const { size, theme } = props;
   return css`
     .${RcDialogClasses.paper} {
       max-width: ${RcDialogMaxWidths[size!]};
     }
+
+    .${RcDialogClasses.paperWidthXs} {
+      max-width: ${px(Math.max(theme.breakpoints.values.xs, 400))};
+
+      &.${RcDialogClasses.paperScrollBody} {
+        ${theme.breakpoints.down(
+          Math.max(theme.breakpoints.values.xs, 400) + 32 * 2,
+        )} {
+          max-width: calc(100% - 64px);
+        }
+      }
+    }
   `;
 };

packages/juno-core/src/components/Dialog/utils/DialogUtils.ts

@@ -2,7 +2,7 @@ import { RcClasses, UnitMap } from '../../../foundation';
 import { RcDialogProps, RcDialogSize } from '../Dialog';
 
 export const RcDialogClasses = RcClasses<RcDialogProps>(
-  ['paper', 'root', 'paperFullScreen'],
+  ['paper', 'root', 'paperFullScreen', 'paperWidthXs', 'paperScrollBody'],
   'RcDialog',
 );
 

sync-github.json

@@ -1,3 +1,3 @@
 {
-  "latestCommitSHA": "b48d9bc513ec43ad3f702f1e34107a237e9c0443"
+  "latestCommitSHA": "fe71b4149c61b11b8f84aa77c5b7b08d1a6a64a9"
 }