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