From 6953f9574abb5c3d1810b1782730d7b9c2f8fb04 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Mon, 1 Apr 2019 21:19:07 +0200
Subject: [PATCH] matt review

---
 docs/src/pages/demos/app-bar/app-bar.md       |  2 +-
 .../demos/snackbars/FabIntegrationSnackbar.js | 37 +++++--------------
 .../snackbars/FabIntegrationSnackbar.tsx      | 37 +++++--------------
 docs/src/pages/demos/snackbars/snackbars.md   |  2 +-
 4 files changed, 20 insertions(+), 58 deletions(-)

diff --git a/docs/src/pages/demos/app-bar/app-bar.md b/docs/src/pages/demos/app-bar/app-bar.md
index fc93a2f8bb860e..d35331230c1c13 100644
--- a/docs/src/pages/demos/app-bar/app-bar.md
+++ b/docs/src/pages/demos/app-bar/app-bar.md
@@ -41,4 +41,4 @@ A side searchbar.
 
 ## Bottom App Bar
 
-{{"demo": "pages/demos/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 600}}
+{{"demo": "pages/demos/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 500}}
diff --git a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js
index a9dac96f675076..56cd962590dec6 100644
--- a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js
+++ b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js
@@ -12,20 +12,14 @@ import AddIcon from '@material-ui/icons/Add';
 import Snackbar from '@material-ui/core/Snackbar';
 
 const useStyles = makeStyles(theme => ({
-  root: {
-    position: 'relative',
-    overflow: 'hidden',
-  },
-  appFrame: {
-    height: 356,
-    background: theme.palette.background.paper,
+  '@global': {
+    body: {
+      backgroundColor: theme.palette.background.paper,
+    },
   },
   menuButton: {
     marginRight: theme.spacing(2),
   },
-  button: {
-    marginBottom: theme.spacing(1),
-  },
   fab: {
     position: 'absolute',
     bottom: theme.spacing(2),
@@ -40,22 +34,10 @@ const useStyles = makeStyles(theme => ({
 
 function FabIntegrationSnackbar() {
   const classes = useStyles();
-  const [open, setOpen] = React.useState(false);
-
-  function handleClick() {
-    setOpen(true);
-  }
-
-  function handleClose() {
-    setOpen(false);
-  }
 
   return (
-    <div className={classes.root}>
+    <React.Fragment>
       <CssBaseline />
-      <Button className={classes.button} onClick={handleClick}>
-        Open snackbar
-      </Button>
       <div className={classes.appFrame}>
         <AppBar position="static" color="primary">
           <Toolbar>
@@ -68,7 +50,7 @@ function FabIntegrationSnackbar() {
               <MenuIcon />
             </IconButton>
             <Typography variant="h6" color="inherit">
-              Out of my way!
+              App Bar
             </Typography>
           </Toolbar>
         </AppBar>
@@ -76,22 +58,21 @@ function FabIntegrationSnackbar() {
           <AddIcon />
         </Fab>
         <Snackbar
-          open={open}
+          open
           autoHideDuration={4000}
-          onClose={handleClose}
           ContentProps={{
             'aria-describedby': 'snackbar-fab-message-id',
           }}
           message={<span id="snackbar-fab-message-id">Archived</span>}
           action={
-            <Button color="inherit" size="small" onClick={handleClose}>
+            <Button color="inherit" size="small">
               Undo
             </Button>
           }
           className={classes.snackbar}
         />
       </div>
-    </div>
+    </React.Fragment>
   );
 }
 
diff --git a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.tsx b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.tsx
index 63bc8b1ab81f75..ed05c15ec0a56a 100644
--- a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.tsx
+++ b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.tsx
@@ -12,20 +12,14 @@ import AddIcon from '@material-ui/icons/Add';
 import Snackbar from '@material-ui/core/Snackbar';
 
 const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    position: 'relative',
-    overflow: 'hidden',
-  },
-  appFrame: {
-    height: 356,
-    background: theme.palette.background.paper,
+  '@global': {
+    body: {
+      backgroundColor: theme.palette.background.paper,
+    },
   },
   menuButton: {
     marginRight: theme.spacing(2),
   },
-  button: {
-    marginBottom: theme.spacing(1),
-  },
   fab: {
     position: 'absolute',
     bottom: theme.spacing(2),
@@ -40,22 +34,10 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 function FabIntegrationSnackbar() {
   const classes = useStyles();
-  const [open, setOpen] = React.useState(false);
-
-  function handleClick() {
-    setOpen(true);
-  }
-
-  function handleClose() {
-    setOpen(false);
-  }
 
   return (
-    <div className={classes.root}>
+    <React.Fragment>
       <CssBaseline />
-      <Button className={classes.button} onClick={handleClick}>
-        Open snackbar
-      </Button>
       <div className={classes.appFrame}>
         <AppBar position="static" color="primary">
           <Toolbar>
@@ -68,7 +50,7 @@ function FabIntegrationSnackbar() {
               <MenuIcon />
             </IconButton>
             <Typography variant="h6" color="inherit">
-              Out of my way!
+              App Bar
             </Typography>
           </Toolbar>
         </AppBar>
@@ -76,22 +58,21 @@ function FabIntegrationSnackbar() {
           <AddIcon />
         </Fab>
         <Snackbar
-          open={open}
+          open
           autoHideDuration={4000}
-          onClose={handleClose}
           ContentProps={{
             'aria-describedby': 'snackbar-fab-message-id',
           }}
           message={<span id="snackbar-fab-message-id">Archived</span>}
           action={
-            <Button color="inherit" size="small" onClick={handleClose}>
+            <Button color="inherit" size="small">
               Undo
             </Button>
           }
           className={classes.snackbar}
         />
       </div>
-    </div>
+    </React.Fragment>
   );
 }
 
diff --git a/docs/src/pages/demos/snackbars/snackbars.md b/docs/src/pages/demos/snackbars/snackbars.md
index d58dc0e6cff3b6..73bb70586c5a86 100644
--- a/docs/src/pages/demos/snackbars/snackbars.md
+++ b/docs/src/pages/demos/snackbars/snackbars.md
@@ -56,7 +56,7 @@ When multiple snackbar updates are necessary, they should appear one at a time.
 
 Snackbars should appear above FABs (on mobile).
 
-{{"demo": "pages/demos/snackbars/FabIntegrationSnackbar.js", "iframe": true, "maxWidth": 600}}
+{{"demo": "pages/demos/snackbars/FabIntegrationSnackbar.js", "iframe": true, "maxWidth": 500}}
 
 ### Control Direction