[docs] Switch order of snackbar buttons in demos (#37389)

Signed-off-by: Jannis Hell <[email protected]> Co-authored-by: ZeeshanTamboli <[email protected]> Co-authored-by: zanivan <[email protected]>
mui · Jun 20, 2023 · 840975c · 840975c
1 parent 6c93a3b
commit 840975c
Show file tree

Hide file tree

Showing 6 changed files with 134 additions and 118 deletions.
diff --git 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
@@ -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
diff --git 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
@@ -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
@@ -1,4 +1,5 @@
-{buttons}
+<Box sx={{ width: 500 }}>{buttons}</Box>
+
 <Snackbar
   anchorOrigin={{ vertical, horizontal }}
   open={open}