[docs] Migrate Tabs, Table, Snackbar demos to emotion (#26175)

mui · May 7, 2021 · 346fd93 · 346fd93
1 parent 18dea79
commit 346fd93
Show file tree

Hide file tree

Showing 38 changed files with 203 additions and 627 deletions.
diff --git a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js
@@ -1,16 +1,9 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Snackbar from '@material-ui/core/Snackbar';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 
-const useStyles = makeStyles((theme) => ({
-  close: {
-    padding: theme.spacing(0.5),
-  },
-}));
-
 export default function ConsecutiveSnackbars() {
   const [snackPack, setSnackPack] = React.useState([]);
   const [open, setOpen] = React.useState(false);
@@ -43,7 +36,6 @@ export default function ConsecutiveSnackbars() {
     setMessageInfo(undefined);
   };
 
-  const classes = useStyles();
   return (
     <div>
       <Button onClick={handleClick('Message A')}>Show message A</Button>
@@ -63,7 +55,7 @@ export default function ConsecutiveSnackbars() {
             <IconButton
               aria-label="close"
               color="inherit"
-              className={classes.close}
+              sx={{ p: 0.5 }}
               onClick={handleClose}
             >
               <CloseIcon />

diff --git a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx
@@ -1,16 +1,9 @@
 import * as React from 'react';
-import { makeStyles, Theme } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Snackbar from '@material-ui/core/Snackbar';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  close: {
-    padding: theme.spacing(0.5),
-  },
-}));
-
 export interface SnackbarMessage {
   message: string;
   key: number;
@@ -59,7 +52,6 @@ export default function ConsecutiveSnackbars() {
     setMessageInfo(undefined);
   };
 
-  const classes = useStyles();
   return (
     <div>
       <Button onClick={handleClick('Message A')}>Show message A</Button>
@@ -79,7 +71,7 @@ export default function ConsecutiveSnackbars() {
             <IconButton
               aria-label="close"
               color="inherit"
-              className={classes.close}
+              sx={{ p: 0.5 }}
               onClick={handleClose}
             >
               <CloseIcon />

diff --git a/docs/src/pages/components/snackbars/CustomizedSnackbars.js b/docs/src/pages/components/snackbars/CustomizedSnackbars.js
@@ -1,27 +1,14 @@
 import * as React from 'react';
+import Stack from '@material-ui/core/Stack';
 import Button from '@material-ui/core/Button';
 import Snackbar from '@material-ui/core/Snackbar';
 import MuiAlert from '@material-ui/core/Alert';
-import { makeStyles } from '@material-ui/core/styles';
 
 const Alert = React.forwardRef(function Alert(props, ref) {
   return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
 });
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    '& > * + *': {
-      marginTop: theme.spacing(2),
-    },
-  },
-  alert: {
-    width: '100%',
-  },
-}));
-
 export default function CustomizedSnackbars() {
-  const classes = useStyles();
   const [open, setOpen] = React.useState(false);
 
   const handleClick = () => {
@@ -37,19 +24,19 @@ export default function CustomizedSnackbars() {
   };
 
   return (
-    <div className={classes.root}>
+    <Stack spacing={2} sx={{ width: '100%' }}>
       <Button variant="outlined" onClick={handleClick}>
         Open success snackbar
       </Button>
       <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
-        <Alert onClose={handleClose} severity="success" className={classes.alert}>
+        <Alert onClose={handleClose} severity="success" sx={{ width: '100%' }}>
           This is a success message!
         </Alert>
       </Snackbar>
       <Alert severity="error">This is an error message!</Alert>
       <Alert severity="warning">This is a warning message!</Alert>
       <Alert severity="info">This is an information message!</Alert>
       <Alert severity="success">This is a success message!</Alert>
-    </div>
+    </Stack>
   );
 }
diff --git a/docs/src/pages/components/snackbars/CustomizedSnackbars.tsx b/docs/src/pages/components/snackbars/CustomizedSnackbars.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
+import Stack from '@material-ui/core/Stack';
 import Button from '@material-ui/core/Button';
 import Snackbar from '@material-ui/core/Snackbar';
 import MuiAlert, { AlertProps } from '@material-ui/core/Alert';
-import { makeStyles, Theme } from '@material-ui/core/styles';
 
 const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
   props,
@@ -11,20 +11,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
   return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
 });
 
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    width: '100%',
-    '& > * + *': {
-      marginTop: theme.spacing(2),
-    },
-  },
-  alert: {
-    width: '100%',
-  },
-}));
-
 export default function CustomizedSnackbars() {
-  const classes = useStyles();
   const [open, setOpen] = React.useState(false);
 
   const handleClick = () => {
@@ -40,19 +27,19 @@ export default function CustomizedSnackbars() {
   };
 
   return (
-    <div className={classes.root}>
+    <Stack spacing={2} sx={{ width: '100%' }}>
       <Button variant="outlined" onClick={handleClick}>
         Open success snackbar
       </Button>
       <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
-        <Alert onClose={handleClose} severity="success" className={classes.alert}>
+        <Alert onClose={handleClose} severity="success" sx={{ width: '100%' }}>
           This is a success message!
         </Alert>
       </Snackbar>
       <Alert severity="error">This is an error message!</Alert>
       <Alert severity="warning">This is a warning message!</Alert>
       <Alert severity="info">This is an information message!</Alert>
       <Alert severity="success">This is a success message!</Alert>
-    </div>
+    </Stack>
   );
 }
diff --git a/docs/src/pages/components/snackbars/FabIntegrationSnackbar.js b/docs/src/pages/components/snackbars/FabIntegrationSnackbar.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import CssBaseline from '@material-ui/core/CssBaseline';
+import GlobalStyles from '@material-ui/core/GlobalStyles';
 import Toolbar from '@material-ui/core/Toolbar';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
@@ -11,39 +11,22 @@ import Fab from '@material-ui/core/Fab';
 import AddIcon from '@material-ui/icons/Add';
 import Snackbar from '@material-ui/core/Snackbar';
 
-const useStyles = makeStyles((theme) => ({
-  '@global': {
-    body: {
-      backgroundColor: theme.palette.background.paper,
-    },
-  },
-  menuButton: {
-    marginRight: theme.spacing(2),
-  },
-  fab: {
-    position: 'absolute',
-    bottom: theme.spacing(2),
-    right: theme.spacing(2),
-  },
-  snackbar: {
-    [theme.breakpoints.down('sm')]: {
-      bottom: 90,
-    },
-  },
-}));
-
 export default function FabIntegrationSnackbar() {
-  const classes = useStyles();
-
   return (
     <React.Fragment>
       <CssBaseline />
+      {/* TODO: Fix theme type in GlobalStyles */}
+      <GlobalStyles
+        styles={(theme) => ({
+          body: { backgroundColor: theme.palette.background.paper },
+        })}
+      />
       <div>
         <AppBar position="static" color="primary">
           <Toolbar>
             <IconButton
               edge="start"
-              className={classes.menuButton}
+              sx={{ mr: 2 }}
               color="inherit"
               aria-label="menu"
             >
@@ -54,7 +37,14 @@ export default function FabIntegrationSnackbar() {
             </Typography>
           </Toolbar>
         </AppBar>
-        <Fab color="secondary" className={classes.fab}>
+        <Fab
+          color="secondary"
+          sx={{
+            position: 'absolute',
+            bottom: (theme) => theme.spacing(2),
+            right: (theme) => theme.spacing(2),
+          }}
+        >
           <AddIcon />
         </Fab>
         <Snackbar
@@ -66,7 +56,7 @@ export default function FabIntegrationSnackbar() {
               Undo
             </Button>
           }
-          className={classes.snackbar}
+          sx={{ bottom: { xs: 90, sm: 0 } }}
         />
       </div>
     </React.Fragment>

diff --git a/docs/src/pages/components/snackbars/FabIntegrationSnackbar.tsx b/docs/src/pages/components/snackbars/FabIntegrationSnackbar.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { makeStyles, Theme } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import CssBaseline from '@material-ui/core/CssBaseline';
+import GlobalStyles from '@material-ui/core/GlobalStyles';
 import Toolbar from '@material-ui/core/Toolbar';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
@@ -10,40 +10,24 @@ import Button from '@material-ui/core/Button';
 import Fab from '@material-ui/core/Fab';
 import AddIcon from '@material-ui/icons/Add';
 import Snackbar from '@material-ui/core/Snackbar';
-
-const useStyles = makeStyles((theme: Theme) => ({
-  '@global': {
-    body: {
-      backgroundColor: theme.palette.background.paper,
-    },
-  },
-  menuButton: {
-    marginRight: theme.spacing(2),
-  },
-  fab: {
-    position: 'absolute',
-    bottom: theme.spacing(2),
-    right: theme.spacing(2),
-  },
-  snackbar: {
-    [theme.breakpoints.down('sm')]: {
-      bottom: 90,
-    },
-  },
-}));
+import { Theme } from '@material-ui/core/styles';
 
 export default function FabIntegrationSnackbar() {
-  const classes = useStyles();
-
   return (
     <React.Fragment>
       <CssBaseline />
+      {/* TODO: Fix theme type in GlobalStyles */}
+      <GlobalStyles
+        styles={(theme) => ({
+          body: { backgroundColor: (theme as Theme).palette.background.paper },
+        })}
+      />
       <div>
         <AppBar position="static" color="primary">
           <Toolbar>
             <IconButton
               edge="start"
-              className={classes.menuButton}
+              sx={{ mr: 2 }}
               color="inherit"
               aria-label="menu"
             >
@@ -54,7 +38,14 @@ export default function FabIntegrationSnackbar() {
             </Typography>
           </Toolbar>
         </AppBar>
-        <Fab color="secondary" className={classes.fab}>
+        <Fab
+          color="secondary"
+          sx={{
+            position: 'absolute',
+            bottom: (theme) => theme.spacing(2),
+            right: (theme) => theme.spacing(2),
+          }}
+        >
           <AddIcon />
         </Fab>
         <Snackbar
@@ -66,7 +57,7 @@ export default function FabIntegrationSnackbar() {
               Undo
             </Button>
           }
-          className={classes.snackbar}
+          sx={{ bottom: { xs: 90, sm: 0 } }}
         />
       </div>
     </React.Fragment>

diff --git a/docs/src/pages/components/snackbars/LongTextSnackbar.js b/docs/src/pages/components/snackbars/LongTextSnackbar.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Button from '@material-ui/core/Button';
-import { makeStyles } from '@material-ui/core/styles';
+import Stack from '@material-ui/core/Stack';
 import SnackbarContent from '@material-ui/core/SnackbarContent';
 
 const action = (
@@ -9,20 +9,9 @@ const action = (
   </Button>
 );
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    maxWidth: 600,
-    '& > * + *': {
-      marginTop: theme.spacing(2),
-    },
-  },
-}));
-
 export default function LongTextSnackbar() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Stack spacing={2} sx={{ maxWidth: 600 }}>
       <SnackbarContent message="I love snacks." action={action} />
       <SnackbarContent
         message={
@@ -41,6 +30,6 @@ export default function LongTextSnackbar() {
         }
         action={action}
       />
-    </div>
+    </Stack>
   );
 }