[Snackbar] Match the new specification (#15122)

* [Snackbar] Match the new specification * sebastian review * Josh & Matt reviews * matt review * more matt feedback * more feedback * rebase
mui · Apr 3, 2019 · 25ea3bf · 25ea3bf
1 parent 03e01e3
commit 25ea3bf
Show file tree

Hide file tree

Showing 23 changed files with 219 additions and 239 deletions.
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -50,6 +50,7 @@ const styles = theme => ({
     },
   },
   demo: {
+    margin: 'auto',
     borderRadius: theme.shape.borderRadius,
     backgroundColor:
       theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900],
@@ -349,6 +350,9 @@ class Demo extends React.Component {
           })}
           onMouseEnter={this.handleDemoHover}
           onMouseLeave={this.handleDemoHover}
+          style={{
+            maxWidth: demoOptions.maxWidth,
+          }}
         >
           <Frame>
             <DemoComponent />

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}}
+{{"demo": "pages/demos/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 500}}
diff --git a/docs/src/pages/demos/snackbars/ConsecutiveSnackbars.js b/docs/src/pages/demos/snackbars/ConsecutiveSnackbars.js
@@ -60,8 +60,8 @@ class ConsecutiveSnackbars extends React.Component {
 
     return (
       <div>
-        <Button onClick={this.handleClick('message a')}>Show message A</Button>
-        <Button onClick={this.handleClick('message b')}>Show message B</Button>
+        <Button onClick={this.handleClick('Message A')}>Show message A</Button>
+        <Button onClick={this.handleClick('Message B')}>Show message B</Button>
         <Snackbar
           key={messageInfo.key}
           anchorOrigin={{

diff --git a/docs/src/pages/demos/snackbars/ConsecutiveSnackbars.tsx b/docs/src/pages/demos/snackbars/ConsecutiveSnackbars.tsx
@@ -74,8 +74,8 @@ class ConsecutiveSnackbars extends React.Component<Props, State> {
 
     return (
       <div>
-        <Button onClick={this.handleClick('message a')}>Show message A</Button>
-        <Button onClick={this.handleClick('message b')}>Show message B</Button>
+        <Button onClick={this.handleClick('Message A')}>Show message A</Button>
+        <Button onClick={this.handleClick('Message B')}>Show message B</Button>
         <Snackbar
           key={messageInfo.key}
           anchorOrigin={{

diff --git a/docs/src/pages/demos/snackbars/CustomizedSnackbars.js b/docs/src/pages/demos/snackbars/CustomizedSnackbars.js
@@ -64,7 +64,6 @@ function MySnackbarContentWrapper(props) {
       }
       action={[
         <IconButton
-          edge="end"
           key="close"
           aria-label="Close"
           color="inherit"
@@ -110,7 +109,7 @@ function CustomizedSnackbars() {
 
   return (
     <div>
-      <Button className={classes.margin} onClick={handleClick}>
+      <Button variant="outlined" className={classes.margin} onClick={handleClick}>
         Open success snackbar
       </Button>
       <Snackbar

diff --git a/docs/src/pages/demos/snackbars/CustomizedSnackbars.tsx b/docs/src/pages/demos/snackbars/CustomizedSnackbars.tsx
@@ -71,7 +71,6 @@ function MySnackbarContentWrapper(props: Props) {
       }
       action={[
         <IconButton
-          edge="end"
           key="close"
           aria-label="Close"
           color="inherit"
@@ -117,7 +116,7 @@ function CustomizedSnackbars() {
 
   return (
     <div>
-      <Button className={classes.margin} onClick={handleClick}>
+      <Button variant="outlined" className={classes.margin} onClick={handleClick}>
         Open success snackbar
       </Button>
       <Snackbar

diff --git a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import clsx from 'clsx';
 import { makeStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
+import CssBaseline from '@material-ui/core/CssBaseline';
 import Toolbar from '@material-ui/core/Toolbar';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
@@ -12,67 +12,32 @@ import AddIcon from '@material-ui/icons/Add';
 import Snackbar from '@material-ui/core/Snackbar';
 
 const useStyles = makeStyles(theme => ({
-  root: {
-    position: 'relative',
-    overflow: 'hidden',
-  },
-  appFrame: {
-    width: 360,
-    height: 360,
-    backgroundColor: theme.palette.background.paper,
+  '@global': {
+    body: {
+      backgroundColor: theme.palette.background.paper,
+    },
   },
   menuButton: {
-    marginRight: 20,
-  },
-  button: {
-    marginBottom: theme.spacing(1),
+    marginRight: theme.spacing(2),
   },
   fab: {
     position: 'absolute',
     bottom: theme.spacing(2),
     right: theme.spacing(2),
   },
-  fabMoveUp: {
-    transform: 'translate3d(0, -46px, 0)',
-    transition: theme.transitions.create('transform', {
-      duration: theme.transitions.duration.enteringScreen,
-      easing: theme.transitions.easing.easeOut,
-    }),
-  },
-  fabMoveDown: {
-    transform: 'translate3d(0, 0, 0)',
-    transition: theme.transitions.create('transform', {
-      duration: theme.transitions.duration.leavingScreen,
-      easing: theme.transitions.easing.sharp,
-    }),
-  },
   snackbar: {
-    position: 'absolute',
-  },
-  snackbarContent: {
-    width: 360,
+    [theme.breakpoints.down('xs')]: {
+      bottom: 90,
+    },
   },
 }));
 
 function FabIntegrationSnackbar() {
   const classes = useStyles();
-  const [open, setOpen] = React.useState(false);
-
-  function handleClick() {
-    setOpen(true);
-  }
-
-  function handleClose() {
-    setOpen(false);
-  }
-
-  const fabClassName = clsx(classes.fab, open ? classes.fabMoveUp : classes.fabMoveDown);
 
   return (
-    <div className={classes.root}>
-      <Button className={classes.button} onClick={handleClick}>
-        Open snackbar
-      </Button>
+    <React.Fragment>
+      <CssBaseline />
       <div className={classes.appFrame}>
         <AppBar position="static" color="primary">
           <Toolbar>
@@ -85,31 +50,29 @@ function FabIntegrationSnackbar() {
               <MenuIcon />
             </IconButton>
             <Typography variant="h6" color="inherit">
-              Out of my way!
+              App Bar
             </Typography>
           </Toolbar>
         </AppBar>
-        <Fab color="secondary" className={fabClassName}>
+        <Fab color="secondary" className={classes.fab}>
           <AddIcon />
         </Fab>
         <Snackbar
-          open={open}
+          open
           autoHideDuration={4000}
-          onClose={handleClose}
           ContentProps={{
             'aria-describedby': 'snackbar-fab-message-id',
-            className: classes.snackbarContent,
           }}
           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
@@ -1,7 +1,7 @@
 import React from 'react';
-import clsx from 'clsx';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
+import CssBaseline from '@material-ui/core/CssBaseline';
 import Toolbar from '@material-ui/core/Toolbar';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
@@ -12,67 +12,32 @@ 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: {
-    width: 360,
-    height: 360,
-    backgroundColor: theme.palette.background.paper,
+  '@global': {
+    body: {
+      backgroundColor: theme.palette.background.paper,
+    },
   },
   menuButton: {
-    marginRight: 20,
-  },
-  button: {
-    marginBottom: theme.spacing(1),
+    marginRight: theme.spacing(2),
   },
   fab: {
     position: 'absolute',
     bottom: theme.spacing(2),
     right: theme.spacing(2),
   },
-  fabMoveUp: {
-    transform: 'translate3d(0, -46px, 0)',
-    transition: theme.transitions.create('transform', {
-      duration: theme.transitions.duration.enteringScreen,
-      easing: theme.transitions.easing.easeOut,
-    }),
-  },
-  fabMoveDown: {
-    transform: 'translate3d(0, 0, 0)',
-    transition: theme.transitions.create('transform', {
-      duration: theme.transitions.duration.leavingScreen,
-      easing: theme.transitions.easing.sharp,
-    }),
-  },
   snackbar: {
-    position: 'absolute',
-  },
-  snackbarContent: {
-    width: 360,
+    [theme.breakpoints.down('xs')]: {
+      bottom: 90,
+    },
   },
 }));
 
 function FabIntegrationSnackbar() {
   const classes = useStyles();
-  const [open, setOpen] = React.useState(false);
-
-  function handleClick() {
-    setOpen(true);
-  }
-
-  function handleClose() {
-    setOpen(false);
-  }
-
-  const fabClassName = clsx(classes.fab, open ? classes.fabMoveUp : classes.fabMoveDown);
 
   return (
-    <div className={classes.root}>
-      <Button className={classes.button} onClick={handleClick}>
-        Open snackbar
-      </Button>
+    <React.Fragment>
+      <CssBaseline />
       <div className={classes.appFrame}>
         <AppBar position="static" color="primary">
           <Toolbar>
@@ -85,31 +50,29 @@ function FabIntegrationSnackbar() {
               <MenuIcon />
             </IconButton>
             <Typography variant="h6" color="inherit">
-              Out of my way!
+              App Bar
             </Typography>
           </Toolbar>
         </AppBar>
-        <Fab color="secondary" className={fabClassName}>
+        <Fab color="secondary" className={classes.fab}>
           <AddIcon />
         </Fab>
         <Snackbar
-          open={open}
+          open
           autoHideDuration={4000}
-          onClose={handleClose}
           ContentProps={{
             'aria-describedby': 'snackbar-fab-message-id',
-            className: classes.snackbarContent,
           }}
           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/FadeSnackbar.js b/docs/src/pages/demos/snackbars/FadeSnackbar.js
diff --git a/docs/src/pages/demos/snackbars/FadeSnackbar.tsx b/docs/src/pages/demos/snackbars/FadeSnackbar.tsx
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}}
		{{"demo": "pages/demos/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 500}}