Improve styles for MaterialUI - Dialog component (#272)

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Not released
 
+- Improve styles for MaterialUI Dialog component [#272](https://github.com/CartoDB/carto-react/pull/272)
+
 ## 1.2
 
 ### 1.2.1-alpha.5 (2022-01-20)

packages/react-ui/src/theme/carto-theme.js

@@ -1327,6 +1327,9 @@ export const cartoThemeOptions = {
     MuiSlider: {
       color: 'primary',
       marks: false
+    },
+    MuiDialog: {
+      maxWidth: 'md'
     }
   }
 };

packages/react-ui/storybook/stories/common/Dialog.stories.js

@@ -8,16 +8,50 @@ import {
   DialogActions,
   FormGroup,
   Grid,
+  Slide,
   TextField
 } from '@material-ui/core';
 
 const options = {
   title: 'Common/Dialog',
-  component: Dialog
+  component: Dialog,
+  argTypes: {
+    disableEscapeKeyDown: {
+      description: 'If `true`, hitting escape will not fire the `onClose` callback.',
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
+    },
+    fullScreen: {
+      description: 'If `true`, the dialog will be full-screen',
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
+    },
+    fullWidth: {
+      description:
+        'If `true`, the dialog stretches to `maxWidth`. Notice that the dialog width grow is limited by the default margin.',
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
+    },
+    maxWidth: {
+      description:
+        'Determine the max-width of the dialog. The dialog width grows with the size of the screen. Set to `false` to disable `maxWidth`.',
+      defaultValue: 'md',
+      control: {
+        type: 'select',
+        options: ['lg', 'md', 'sm', 'xl', 'xs', false]
+      }
+    }
+  }
 };
 export default options;
 
-const Template = ({ content, ...args }) => {
+const Template = ({ content = <TextContent />, ...args }) => {
   const [open, setOpen] = React.useState(false);
 
   const handleClickOpen = () => {
@@ -31,16 +65,16 @@ const Template = ({ content, ...args }) => {
   return (
     <div>
       <Button variant='outlined' color='primary' onClick={handleClickOpen}>
-        Open alert dialog
+        Open dialog
       </Button>
       <Dialog
         open={open}
         onClose={handleClose}
-        aria-labelledby='alert-dialog-title'
-        aria-describedby='alert-dialog-description'
+        aria-labelledby='dialog-title'
+        aria-describedby='dialog-description'
         {...args}
       >
-        <DialogTitle id='alert-dialog-title'>Dialog title</DialogTitle>
+        <DialogTitle id='dialog-title'>Dialog title</DialogTitle>
         <DialogContent>{content}</DialogContent>
         <DialogActions>
           <Button onClick={handleClose} color='primary'>
@@ -82,7 +116,22 @@ const FormContent = () => (
 );
 
 export const Default = Template.bind({});
-Default.args = { content: <TextContent /> };
 
 export const Form = Template.bind({});
 Form.args = { content: <FormContent /> };
+
+export const DisableEscapeKeyDown = Template.bind({});
+DisableEscapeKeyDown.args = { disableEscapeKeyDown: true };
+
+export const SlideTransition = Template.bind({});
+SlideTransition.args = {
+  TransitionComponent: Slide,
+  TransitionProps: { direction: 'up', timeout: 300 }
+};
+
+export const FullScren = Template.bind({});
+FullScren.args = {
+  fullScreen: true,
+  TransitionComponent: Slide,
+  TransitionProps: { direction: 'up', timeout: 300 }
+};