From 429769d2f7ace5de9754d4b39b9b9e83a5a80d66 Mon Sep 17 00:00:00 2001
From: builtbyedgar <ebermejo@cartodb.com>
Date: Wed, 12 Jan 2022 09:57:03 +0100
Subject: [PATCH 1/4] dialog component wip

---
 packages/react-ui/src/theme/carto-theme.js    |  6 ++
 .../stories/common/Dialog.stories.js          | 63 +++++++++++++++++--
 2 files changed, 64 insertions(+), 5 deletions(-)

diff --git a/packages/react-ui/src/theme/carto-theme.js b/packages/react-ui/src/theme/carto-theme.js
index fda65f200..86e4dfaef 100644
--- a/packages/react-ui/src/theme/carto-theme.js
+++ b/packages/react-ui/src/theme/carto-theme.js
@@ -1327,6 +1327,12 @@ export const cartoThemeOptions = {
     MuiSlider: {
       color: 'primary',
       marks: false
+    },
+    MuiDialog: {
+      disableEscapeKeyDown: false,
+      fullScreen: false,
+      fullWidth: false,
+      maxWidth: 'sm'
     }
   }
 };
diff --git a/packages/react-ui/storybook/stories/common/Dialog.stories.js b/packages/react-ui/storybook/stories/common/Dialog.stories.js
index b99f59c67..517c81b42 100644
--- a/packages/react-ui/storybook/stories/common/Dialog.stories.js
+++ b/packages/react-ui/storybook/stories/common/Dialog.stories.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Meta } from '@storybook/react';
 import {
   Button,
   Dialog,
@@ -8,12 +9,46 @@ 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;
 
@@ -31,16 +66,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'>
@@ -86,3 +121,21 @@ Default.args = { content: <TextContent /> };
 
 export const Form = Template.bind({});
 Form.args = { content: <FormContent /> };
+
+export const DisableEscapeKeyDown = Template.bind({});
+DisableEscapeKeyDown.args = { content: <TextContent />, disableEscapeKeyDown: true };
+
+export const SlideTransition = Template.bind({});
+SlideTransition.args = {
+  content: <TextContent />,
+  TransitionComponent: Slide,
+  TransitionProps: { direction: 'up', timeout: 300 }
+};
+
+export const FullScren = Template.bind({});
+FullScren.args = {
+  content: <TextContent />,
+  fullScreen: true,
+  TransitionComponent: Slide,
+  TransitionProps: { direction: 'up', timeout: 300 }
+};

From 68748d00dade49fe811b4b69eeadf894f9a4e289 Mon Sep 17 00:00:00 2001
From: builtbyedgar <ebermejo@cartodb.com>
Date: Wed, 12 Jan 2022 09:58:21 +0100
Subject: [PATCH 2/4] refactor

---
 packages/react-ui/src/theme/carto-theme.js                   | 5 +----
 packages/react-ui/storybook/stories/common/Dialog.stories.js | 1 -
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/react-ui/src/theme/carto-theme.js b/packages/react-ui/src/theme/carto-theme.js
index 86e4dfaef..8ef6dee5f 100644
--- a/packages/react-ui/src/theme/carto-theme.js
+++ b/packages/react-ui/src/theme/carto-theme.js
@@ -1329,10 +1329,7 @@ export const cartoThemeOptions = {
       marks: false
     },
     MuiDialog: {
-      disableEscapeKeyDown: false,
-      fullScreen: false,
-      fullWidth: false,
-      maxWidth: 'sm'
+      maxWidth: 'md'
     }
   }
 };
diff --git a/packages/react-ui/storybook/stories/common/Dialog.stories.js b/packages/react-ui/storybook/stories/common/Dialog.stories.js
index 517c81b42..3f6b0031d 100644
--- a/packages/react-ui/storybook/stories/common/Dialog.stories.js
+++ b/packages/react-ui/storybook/stories/common/Dialog.stories.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Meta } from '@storybook/react';
 import {
   Button,
   Dialog,

From 6515d791a4f7f990148d34839bb1c80b22e8df99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Velarde?= <victor.velarde@gmail.com>
Date: Tue, 18 Jan 2022 19:10:00 +0100
Subject: [PATCH 3/4] Add changelog entry

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2900c9d47..d148ab3ac 100644
--- a/CHANGELOG.md
+++ b/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)

From 7766f2df2d1278c822df7c1513698c94e5177060 Mon Sep 17 00:00:00 2001
From: Ivan <imoreno@carto.com>
Date: Fri, 21 Jan 2022 11:28:19 +0100
Subject: [PATCH 4/4] fix stories

---
 .../react-ui/storybook/stories/common/Dialog.stories.js    | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/react-ui/storybook/stories/common/Dialog.stories.js b/packages/react-ui/storybook/stories/common/Dialog.stories.js
index 3f6b0031d..6fe6481c7 100644
--- a/packages/react-ui/storybook/stories/common/Dialog.stories.js
+++ b/packages/react-ui/storybook/stories/common/Dialog.stories.js
@@ -51,7 +51,7 @@ const options = {
 };
 export default options;
 
-const Template = ({ content, ...args }) => {
+const Template = ({ content = <TextContent />, ...args }) => {
   const [open, setOpen] = React.useState(false);
 
   const handleClickOpen = () => {
@@ -116,24 +116,21 @@ 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 = { content: <TextContent />, disableEscapeKeyDown: true };
+DisableEscapeKeyDown.args = { disableEscapeKeyDown: true };
 
 export const SlideTransition = Template.bind({});
 SlideTransition.args = {
-  content: <TextContent />,
   TransitionComponent: Slide,
   TransitionProps: { direction: 'up', timeout: 300 }
 };
 
 export const FullScren = Template.bind({});
 FullScren.args = {
-  content: <TextContent />,
   fullScreen: true,
   TransitionComponent: Slide,
   TransitionProps: { direction: 'up', timeout: 300 }