From 4449b497f95a92eea6641111ecc9af7aaf54f3ef Mon Sep 17 00:00:00 2001
From: Mateus Marquezini <mateusmarquezini01@gmail.com>
Date: Tue, 23 Mar 2021 10:05:47 -0300
Subject: [PATCH 1/3] #3497 Created an example of how to use the Dialog
 component

Signed-off-by: Mateus Marquezini <mateusmarquezini01@gmail.com>
---
 .changeset/warm-hotels-happen.md              |   5 +
 .../src/components/Dialog/Dialog.stories.tsx  | 134 ++++++++++++++++++
 2 files changed, 139 insertions(+)
 create mode 100644 .changeset/warm-hotels-happen.md
 create mode 100644 packages/core/src/components/Dialog/Dialog.stories.tsx

diff --git a/.changeset/warm-hotels-happen.md b/.changeset/warm-hotels-happen.md
new file mode 100644
index 0000000000..89ff4ea432
--- /dev/null
+++ b/.changeset/warm-hotels-happen.md
@@ -0,0 +1,5 @@
+---
+'storybook': minor
+---
+
+Created a new example of how to use the Dialog component in Storybook
diff --git a/packages/core/src/components/Dialog/Dialog.stories.tsx b/packages/core/src/components/Dialog/Dialog.stories.tsx
new file mode 100644
index 0000000000..528b266e47
--- /dev/null
+++ b/packages/core/src/components/Dialog/Dialog.stories.tsx
@@ -0,0 +1,134 @@
+/*
+ * Copyright 2021 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Typography,
+} from '@material-ui/core';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import CloseIcon from '@material-ui/icons/Close';
+import React, { useState } from 'react';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    leftAlignButtonsDialog: {
+      justifyContent: 'flex-start',
+      paddingLeft: 24,
+    },
+    closeButton: {
+      position: 'absolute',
+      right: theme.spacing(1),
+      top: theme.spacing(1),
+      color: theme.palette.grey[500],
+    },
+  }),
+);
+
+export default {
+  title: 'Layout/Dialog',
+  component: Dialog,
+};
+
+export const Default = () => {
+  const [open, setOpen] = useState(false);
+  const classes = useStyles();
+
+  const openDialog = () => {
+    setOpen(true);
+  };
+
+  const closeDialog = () => {
+    setOpen(false);
+  };
+
+  const dialogContent = () => {
+    return (
+      <>
+        <Typography>
+          This is an example of how to use the Dialog component.
+        </Typography>
+        <Typography>
+          This component is used whenever confirmation of some sort is needed,
+          such as:
+        </Typography>
+        <ul>
+          <li>
+            <Typography>
+              Consent to sensitive matters like GDPR, access, etc;
+            </Typography>
+          </li>
+          <li>
+            <Typography>
+              Save, submit, cancel after a form is completed;
+            </Typography>
+          </li>
+          <li>
+            <Typography>Alert message;</Typography>
+          </li>
+          <li>
+            <Typography>Buttons are optional.</Typography>
+          </li>
+        </ul>
+        <Typography>
+          The color for the secondary button is the same as the primary. For the
+          primary action button, use:
+        </Typography>
+        <pre>variant="contained"</pre>
+        <Typography>For the secondary action button, use:</Typography>
+        <pre>variant="outlined"</pre>
+      </>
+    );
+  };
+
+  return (
+    <>
+      <Button color="primary" variant="contained" onClick={openDialog}>
+        Open Dialog
+      </Button>
+      <Dialog
+        open={open}
+        onClose={closeDialog}
+        aria-labelledby="dialog-title"
+        aria-describedby="dialog-description"
+      >
+        <DialogTitle id="dialog-title">
+          Dialog Box Title
+          <IconButton
+            aria-label="close"
+            className={classes.closeButton}
+            onClick={closeDialog}
+          >
+            <CloseIcon />
+          </IconButton>
+        </DialogTitle>
+        <DialogContent>{dialogContent()}</DialogContent>
+        <DialogActions classes={{ root: classes.leftAlignButtonsDialog }}>
+          <Button color="primary" variant="contained" onClick={closeDialog}>
+            Primary action
+          </Button>
+          <Button color="primary" variant="outlined" onClick={closeDialog}>
+            Secondary action
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};

From f1ded32d41eaa8e9d8ad811a974f9a22dc3d7e82 Mon Sep 17 00:00:00 2001
From: Mateus Marquezini <mateusmarquezini01@gmail.com>
Date: Tue, 23 Mar 2021 13:22:36 -0300
Subject: [PATCH 2/3] #3497 changeset file deleted

Signed-off-by: Mateus Marquezini <mateusmarquezini01@gmail.com>
---
 .changeset/warm-hotels-happen.md | 5 -----
 1 file changed, 5 deletions(-)
 delete mode 100644 .changeset/warm-hotels-happen.md

diff --git a/.changeset/warm-hotels-happen.md b/.changeset/warm-hotels-happen.md
deleted file mode 100644
index 89ff4ea432..0000000000
--- a/.changeset/warm-hotels-happen.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'storybook': minor
----
-
-Created a new example of how to use the Dialog component in Storybook

From a0e97966a51c6c288051f051be7d2adedf59dc87 Mon Sep 17 00:00:00 2001
From: Mateus Marquezini <mateusmarquezini01@gmail.com>
Date: Fri, 2 Apr 2021 08:00:02 -0300
Subject: [PATCH 3/3] #3497 improvement on Dialog component to follow MUI
 guidelines

Signed-off-by: Mateus Marquezini <mateusmarquezini01@gmail.com>
---
 .../src/components/Dialog/Dialog.stories.tsx  | 21 +++++++------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/packages/core/src/components/Dialog/Dialog.stories.tsx b/packages/core/src/components/Dialog/Dialog.stories.tsx
index 528b266e47..c9388dcbec 100644
--- a/packages/core/src/components/Dialog/Dialog.stories.tsx
+++ b/packages/core/src/components/Dialog/Dialog.stories.tsx
@@ -29,10 +29,6 @@ import React, { useState } from 'react';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
-    leftAlignButtonsDialog: {
-      justifyContent: 'flex-start',
-      paddingLeft: 24,
-    },
     closeButton: {
       position: 'absolute',
       right: theme.spacing(1),
@@ -88,12 +84,9 @@ export const Default = () => {
           </li>
         </ul>
         <Typography>
-          The color for the secondary button is the same as the primary. For the
-          primary action button, use:
+          The color for the secondary button is the same as the primary.
         </Typography>
-        <pre>variant="contained"</pre>
-        <Typography>For the secondary action button, use:</Typography>
-        <pre>variant="outlined"</pre>
+        <pre>color="primary"</pre>
       </>
     );
   };
@@ -120,13 +113,13 @@ export const Default = () => {
           </IconButton>
         </DialogTitle>
         <DialogContent>{dialogContent()}</DialogContent>
-        <DialogActions classes={{ root: classes.leftAlignButtonsDialog }}>
-          <Button color="primary" variant="contained" onClick={closeDialog}>
-            Primary action
-          </Button>
-          <Button color="primary" variant="outlined" onClick={closeDialog}>
+        <DialogActions>
+          <Button color="primary" onClick={closeDialog}>
             Secondary action
           </Button>
+          <Button color="primary" onClick={closeDialog}>
+            Primary action
+          </Button>
         </DialogActions>
       </Dialog>
     </>