matt review

mui · Apr 1, 2019 · 6953f95 · 6953f95
1 parent 0f8d5fd
commit 6953f95
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 58 deletions.
diff --git 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
@@ -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,30 +50,29 @@ function FabIntegrationSnackbar() {
               <MenuIcon />
             </IconButton>
             <Typography variant="h6" color="inherit">
-              Out of my way!
+              App Bar
             </Typography>
           </Toolbar>
         </AppBar>
         <Fab color="secondary" className={classes.fab}>
           <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
@@ -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,30 +50,29 @@ function FabIntegrationSnackbar() {
               <MenuIcon />
             </IconButton>
             <Typography variant="h6" color="inherit">
-              Out of my way!
+              App Bar
             </Typography>
           </Toolbar>
         </AppBar>
         <Fab color="secondary" className={classes.fab}>
           <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
@@ -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
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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}}