From 840975c9662f7d5e6ebf1ff16a3b26f219344cf8 Mon Sep 17 00:00:00 2001
From: Jannis Hell <Primajin@users.noreply.github.com>
Date: Tue, 20 Jun 2023 15:08:50 +0200
Subject: [PATCH] [docs] Switch order of snackbar buttons in demos (#37389)

Signed-off-by: Jannis Hell <Primajin@users.noreply.github.com>
Co-authored-by: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Co-authored-by: zanivan <victorzanivan@gmail.com>
---
 .../components/snackbars/DirectionSnackbar.js | 24 ++++-
 .../snackbars/DirectionSnackbar.tsx           | 24 ++++-
 .../snackbars/DirectionSnackbar.tsx.preview   | 11 ---
 .../snackbars/PositionedSnackbar.js           | 95 +++++++++----------
 .../snackbars/PositionedSnackbar.tsx          | 95 +++++++++----------
 .../snackbars/PositionedSnackbar.tsx.preview  |  3 +-
 6 files changed, 134 insertions(+), 118 deletions(-)
 delete mode 100644 docs/data/material/components/snackbars/DirectionSnackbar.tsx.preview

diff --git a/docs/data/material/components/snackbars/DirectionSnackbar.js b/docs/data/material/components/snackbars/DirectionSnackbar.js
index fb0aff35dcf1e2..ddcdfb8068bda6 100644
--- a/docs/data/material/components/snackbars/DirectionSnackbar.js
+++ b/docs/data/material/components/snackbars/DirectionSnackbar.js
@@ -1,4 +1,6 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
 import Snackbar from '@mui/material/Snackbar';
 import Slide from '@mui/material/Slide';
@@ -34,10 +36,24 @@ export default function DirectionSnackbar() {
 
   return (
     <div>
-      <Button onClick={handleClick(TransitionLeft)}>Right</Button>
-      <Button onClick={handleClick(TransitionUp)}>Up</Button>
-      <Button onClick={handleClick(TransitionRight)}>Left</Button>
-      <Button onClick={handleClick(TransitionDown)}>Down</Button>
+      <Box sx={{ width: 300 }}>
+        <Grid container justifyContent="center">
+          <Grid item>
+            <Button onClick={handleClick(TransitionUp)}>Up</Button>
+          </Grid>
+        </Grid>
+        <Grid container justifyContent="center">
+          <Grid item xs={6}>
+            <Button onClick={handleClick(TransitionRight)}>Left</Button>
+          </Grid>
+          <Grid item xs={6} textAlign="right">
+            <Button onClick={handleClick(TransitionLeft)}>Right</Button>
+          </Grid>
+        </Grid>
+        <Grid container justifyContent="center">
+          <Button onClick={handleClick(TransitionDown)}>Down</Button>
+        </Grid>
+      </Box>
       <Snackbar
         open={open}
         onClose={handleClose}
diff --git a/docs/data/material/components/snackbars/DirectionSnackbar.tsx b/docs/data/material/components/snackbars/DirectionSnackbar.tsx
index 870530d4cad255..db6bdc27541d84 100644
--- a/docs/data/material/components/snackbars/DirectionSnackbar.tsx
+++ b/docs/data/material/components/snackbars/DirectionSnackbar.tsx
@@ -1,4 +1,6 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
 import Snackbar from '@mui/material/Snackbar';
 import Slide, { SlideProps } from '@mui/material/Slide';
@@ -38,10 +40,24 @@ export default function DirectionSnackbar() {
 
   return (
     <div>
-      <Button onClick={handleClick(TransitionLeft)}>Right</Button>
-      <Button onClick={handleClick(TransitionUp)}>Up</Button>
-      <Button onClick={handleClick(TransitionRight)}>Left</Button>
-      <Button onClick={handleClick(TransitionDown)}>Down</Button>
+      <Box sx={{ width: 300 }}>
+        <Grid container justifyContent="center">
+          <Grid item>
+            <Button onClick={handleClick(TransitionUp)}>Up</Button>
+          </Grid>
+        </Grid>
+        <Grid container justifyContent="center">
+          <Grid item xs={6}>
+            <Button onClick={handleClick(TransitionRight)}>Left</Button>
+          </Grid>
+          <Grid item xs={6} textAlign="right">
+            <Button onClick={handleClick(TransitionLeft)}>Right</Button>
+          </Grid>
+        </Grid>
+        <Grid container justifyContent="center">
+          <Button onClick={handleClick(TransitionDown)}>Down</Button>
+        </Grid>
+      </Box>
       <Snackbar
         open={open}
         onClose={handleClose}
diff --git a/docs/data/material/components/snackbars/DirectionSnackbar.tsx.preview b/docs/data/material/components/snackbars/DirectionSnackbar.tsx.preview
deleted file mode 100644
index 08383982cacbcc..00000000000000
--- a/docs/data/material/components/snackbars/DirectionSnackbar.tsx.preview
+++ /dev/null
@@ -1,11 +0,0 @@
-<Button onClick={handleClick(TransitionLeft)}>Right</Button>
-<Button onClick={handleClick(TransitionUp)}>Up</Button>
-<Button onClick={handleClick(TransitionRight)}>Left</Button>
-<Button onClick={handleClick(TransitionDown)}>Down</Button>
-<Snackbar
-  open={open}
-  onClose={handleClose}
-  TransitionComponent={transition}
-  message="I love snacks"
-  key={transition ? transition.name : ''}
-/>
\ No newline at end of file
diff --git a/docs/data/material/components/snackbars/PositionedSnackbar.js b/docs/data/material/components/snackbars/PositionedSnackbar.js
index ad9ee42a3392ac..32eb132c936afb 100644
--- a/docs/data/material/components/snackbars/PositionedSnackbar.js
+++ b/docs/data/material/components/snackbars/PositionedSnackbar.js
@@ -1,6 +1,8 @@
 import * as React from 'react';
+import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
 import Snackbar from '@mui/material/Snackbar';
+import Box from '@mui/material/Box';
 
 export default function PositionedSnackbar() {
   const [state, setState] = React.useState({
@@ -20,60 +22,55 @@ export default function PositionedSnackbar() {
 
   const buttons = (
     <React.Fragment>
-      <Button
-        onClick={handleClick({
-          vertical: 'top',
-          horizontal: 'center',
-        })}
-      >
-        Top-Center
-      </Button>
-      <Button
-        onClick={handleClick({
-          vertical: 'top',
-          horizontal: 'right',
-        })}
-      >
-        Top-Right
-      </Button>
-      <Button
-        onClick={handleClick({
-          vertical: 'bottom',
-          horizontal: 'right',
-        })}
-      >
-        Bottom-Right
-      </Button>
-      <Button
-        onClick={handleClick({
-          vertical: 'bottom',
-          horizontal: 'center',
-        })}
-      >
-        Bottom-Center
-      </Button>
-      <Button
-        onClick={handleClick({
-          vertical: 'bottom',
-          horizontal: 'left',
-        })}
-      >
-        Bottom-Left
-      </Button>
-      <Button
-        onClick={handleClick({
-          vertical: 'top',
-          horizontal: 'left',
-        })}
-      >
-        Top-Left
-      </Button>
+      <Grid container justifyContent="center">
+        <Grid item>
+          <Button onClick={handleClick({ vertical: 'top', horizontal: 'center' })}>
+            Top-Center
+          </Button>
+        </Grid>
+      </Grid>
+
+      <Grid container justifyContent="center">
+        <Grid item xs={6}>
+          <Button onClick={handleClick({ vertical: 'top', horizontal: 'left' })}>
+            Top-Left
+          </Button>
+        </Grid>
+        <Grid item xs={6} textAlign="right">
+          <Button onClick={handleClick({ vertical: 'top', horizontal: 'right' })}>
+            Top-Right
+          </Button>
+        </Grid>
+      </Grid>
+
+      <Grid container justifyContent="center">
+        <Grid item xs={6}>
+          <Button onClick={handleClick({ vertical: 'bottom', horizontal: 'left' })}>
+            Bottom-Left
+          </Button>
+        </Grid>
+        <Grid item xs={6} textAlign="right">
+          <Button onClick={handleClick({ vertical: 'bottom', horizontal: 'right' })}>
+            Bottom-Right
+          </Button>
+        </Grid>
+      </Grid>
+      <Grid container justifyContent="center">
+        <Grid item>
+          <Button
+            onClick={handleClick({ vertical: 'bottom', horizontal: 'center' })}
+          >
+            Bottom-Center
+          </Button>
+        </Grid>
+      </Grid>
     </React.Fragment>
   );
 
   return (
     <div>
-      {buttons}
+      <Box sx={{ width: 500 }}>{buttons}</Box>
+
       <Snackbar
         anchorOrigin={{ vertical, horizontal }}
         open={open}
diff --git a/docs/data/material/components/snackbars/PositionedSnackbar.tsx b/docs/data/material/components/snackbars/PositionedSnackbar.tsx
index b4b8a26169ad7c..6e82890cbcbfcb 100644
--- a/docs/data/material/components/snackbars/PositionedSnackbar.tsx
+++ b/docs/data/material/components/snackbars/PositionedSnackbar.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
+import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
 import Snackbar, { SnackbarOrigin } from '@mui/material/Snackbar';
+import Box from '@mui/material/Box';
 
 export interface State extends SnackbarOrigin {
   open: boolean;
@@ -24,60 +26,55 @@ export default function PositionedSnackbar() {
 
   const buttons = (
     <React.Fragment>
-      <Button
-        onClick={handleClick({
-          vertical: 'top',
-          horizontal: 'center',
-        })}
-      >
-        Top-Center
-      </Button>
-      <Button
-        onClick={handleClick({
-          vertical: 'top',
-          horizontal: 'right',
-        })}
-      >
-        Top-Right
-      </Button>
-      <Button
-        onClick={handleClick({
-          vertical: 'bottom',
-          horizontal: 'right',
-        })}
-      >
-        Bottom-Right
-      </Button>
-      <Button
-        onClick={handleClick({
-          vertical: 'bottom',
-          horizontal: 'center',
-        })}
-      >
-        Bottom-Center
-      </Button>
-      <Button
-        onClick={handleClick({
-          vertical: 'bottom',
-          horizontal: 'left',
-        })}
-      >
-        Bottom-Left
-      </Button>
-      <Button
-        onClick={handleClick({
-          vertical: 'top',
-          horizontal: 'left',
-        })}
-      >
-        Top-Left
-      </Button>
+      <Grid container justifyContent="center">
+        <Grid item>
+          <Button onClick={handleClick({ vertical: 'top', horizontal: 'center' })}>
+            Top-Center
+          </Button>
+        </Grid>
+      </Grid>
+
+      <Grid container justifyContent="center">
+        <Grid item xs={6}>
+          <Button onClick={handleClick({ vertical: 'top', horizontal: 'left' })}>
+            Top-Left
+          </Button>
+        </Grid>
+        <Grid item xs={6} textAlign="right">
+          <Button onClick={handleClick({ vertical: 'top', horizontal: 'right' })}>
+            Top-Right
+          </Button>
+        </Grid>
+      </Grid>
+
+      <Grid container justifyContent="center">
+        <Grid item xs={6}>
+          <Button onClick={handleClick({ vertical: 'bottom', horizontal: 'left' })}>
+            Bottom-Left
+          </Button>
+        </Grid>
+        <Grid item xs={6} textAlign="right">
+          <Button onClick={handleClick({ vertical: 'bottom', horizontal: 'right' })}>
+            Bottom-Right
+          </Button>
+        </Grid>
+      </Grid>
+      <Grid container justifyContent="center">
+        <Grid item>
+          <Button
+            onClick={handleClick({ vertical: 'bottom', horizontal: 'center' })}
+          >
+            Bottom-Center
+          </Button>
+        </Grid>
+      </Grid>
     </React.Fragment>
   );
 
   return (
     <div>
-      {buttons}
+      <Box sx={{ width: 500 }}>{buttons}</Box>
+
       <Snackbar
         anchorOrigin={{ vertical, horizontal }}
         open={open}
diff --git a/docs/data/material/components/snackbars/PositionedSnackbar.tsx.preview b/docs/data/material/components/snackbars/PositionedSnackbar.tsx.preview
index 3d15bac005fa10..326bec3f91ec0d 100644
--- a/docs/data/material/components/snackbars/PositionedSnackbar.tsx.preview
+++ b/docs/data/material/components/snackbars/PositionedSnackbar.tsx.preview
@@ -1,4 +1,5 @@
-{buttons}
+<Box sx={{ width: 500 }}>{buttons}</Box>
+
 <Snackbar
   anchorOrigin={{ vertical, horizontal }}
   open={open}