[Snackbar] Match the new specification

mui · Mar 30, 2019 · b89cf43 · b89cf43
1 parent 2c2075e
commit b89cf43
Show file tree

Hide file tree

Showing 11 changed files with 159 additions and 167 deletions.
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';
@@ -17,12 +17,10 @@ const useStyles = makeStyles(theme => ({
     overflow: 'hidden',
   },
   appFrame: {
-    width: 360,
-    height: 360,
-    backgroundColor: theme.palette.background.paper,
+    height: 356,
   },
   menuButton: {
-    marginRight: 20,
+    marginRight: theme.spacing(2),
   },
   button: {
     marginBottom: theme.spacing(1),
@@ -32,25 +30,10 @@ const useStyles = makeStyles(theme => ({
     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,
+    },
   },
 }));
 
@@ -66,10 +49,9 @@ function FabIntegrationSnackbar() {
     setOpen(false);
   }
 
-  const fabClassName = clsx(classes.fab, open ? classes.fabMoveUp : classes.fabMoveDown);
-
   return (
     <div className={classes.root}>
+      <CssBaseline />
       <Button className={classes.button} onClick={handleClick}>
         Open snackbar
       </Button>
@@ -89,7 +71,7 @@ function FabIntegrationSnackbar() {
             </Typography>
           </Toolbar>
         </AppBar>
-        <Fab color="secondary" className={fabClassName}>
+        <Fab color="secondary" className={classes.fab}>
           <AddIcon />
         </Fab>
         <Snackbar
@@ -98,7 +80,6 @@ function FabIntegrationSnackbar() {
           onClose={handleClose}
           ContentProps={{
             'aria-describedby': 'snackbar-fab-message-id',
-            className: classes.snackbarContent,
           }}
           message={<span id="snackbar-fab-message-id">Archived</span>}
           action={

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';
@@ -17,12 +17,10 @@ const useStyles = makeStyles((theme: Theme) => ({
     overflow: 'hidden',
   },
   appFrame: {
-    width: 360,
-    height: 360,
-    backgroundColor: theme.palette.background.paper,
+    height: 356,
   },
   menuButton: {
-    marginRight: 20,
+    marginRight: theme.spacing(2),
   },
   button: {
     marginBottom: theme.spacing(1),
@@ -32,25 +30,10 @@ const useStyles = makeStyles((theme: Theme) => ({
     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,
+    },
   },
 }));
 
@@ -66,10 +49,9 @@ function FabIntegrationSnackbar() {
     setOpen(false);
   }
 
-  const fabClassName = clsx(classes.fab, open ? classes.fabMoveUp : classes.fabMoveDown);
-
   return (
     <div className={classes.root}>
+      <CssBaseline />
       <Button className={classes.button} onClick={handleClick}>
         Open snackbar
       </Button>
@@ -89,7 +71,7 @@ function FabIntegrationSnackbar() {
             </Typography>
           </Toolbar>
         </AppBar>
-        <Fab color="secondary" className={fabClassName}>
+        <Fab color="secondary" className={classes.fab}>
           <AddIcon />
         </Fab>
         <Snackbar
@@ -98,7 +80,6 @@ function FabIntegrationSnackbar() {
           onClose={handleClose}
           ContentProps={{
             'aria-describedby': 'snackbar-fab-message-id',
-            className: classes.snackbarContent,
           }}
           message={<span id="snackbar-fab-message-id">Archived</span>}
           action={

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
diff --git a/docs/src/pages/demos/snackbars/TransitionsSnackbar.js b/docs/src/pages/demos/snackbars/TransitionsSnackbar.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Snackbar from '@material-ui/core/Snackbar';
+import Fade from '@material-ui/core/Fade';
+import Slide from '@material-ui/core/Slide';
+
+function TransitionSlide(props) {
+  return <Slide {...props} direction="up" />;
+}
+
+function TransitionsSnackbar() {
+  const [state, setState] = React.useState({
+    open: false,
+    Transition: Fade,
+  });
+
+  const handleClick = Transition => () => {
+    setState({
+      open: true,
+      Transition,
+    });
+  };
+
+  function handleClose() {
+    setState({
+      ...state,
+      open: false,
+    });
+  }
+
+  return (
+    <div>
+      <Button onClick={handleClick(Fade)}>Fade Transition</Button>
+      <Button onClick={handleClick(TransitionSlide)}>Slide Transition</Button>
+      <Snackbar
+        open={state.open}
+        onClose={handleClose}
+        TransitionComponent={state.Transition}
+        ContentProps={{
+          'aria-describedby': 'message-id',
+        }}
+        message={<span id="message-id">I love snacks</span>}
+      />
+    </div>
+  );
+}
+
+export default TransitionsSnackbar;
diff --git a/docs/src/pages/demos/snackbars/TransitionsSnackbar.tsx b/docs/src/pages/demos/snackbars/TransitionsSnackbar.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Snackbar from '@material-ui/core/Snackbar';
+import Fade from '@material-ui/core/Fade';
+import Slide from '@material-ui/core/Slide';
+import { TransitionProps } from '@material-ui/core/transitions/transition';
+
+function TransitionSlide(props: TransitionProps) {
+  return <Slide {...props} direction="up" />;
+}
+
+function TransitionsSnackbar() {
+  const [state, setState] = React.useState({
+    open: false,
+    Transition: Fade,
+  });
+
+  const handleClick = (Transition: React.ComponentType<TransitionProps>) => () => {
+    setState({
+      open: true,
+      Transition,
+    });
+  };
+
+  function handleClose() {
+    setState({
+      ...state,
+      open: false,
+    });
+  }
+
+  return (
+    <div>
+      <Button onClick={handleClick(Fade)}>Fade Transition</Button>
+      <Button onClick={handleClick(TransitionSlide)}>Slide Transition</Button>
+      <Snackbar
+        open={state.open}
+        onClose={handleClose}
+        TransitionComponent={state.Transition}
+        ContentProps={{
+          'aria-describedby': 'message-id',
+        }}
+        message={<span id="message-id">I love snacks</span>}
+      />
+    </div>
+  );
+}
+
+export default TransitionsSnackbar;
diff --git a/docs/src/pages/demos/snackbars/snackbars.md b/docs/src/pages/demos/snackbars/snackbars.md
@@ -52,11 +52,11 @@ Per [Google's guidelines](https://material.io/design/components/snackbars.html#s
 
 {{"demo": "pages/demos/snackbars/ConsecutiveSnackbars.js"}}
 
-### Don't block the floating action button
+### Snackbars and floating action buttons (FABs)
 
-Move the floating action button vertically to accommodate the snackbar height.
+Snackbars should appear above FABs (on mobile).
 
-{{"demo": "pages/demos/snackbars/FabIntegrationSnackbar.js"}}
+{{"demo": "pages/demos/snackbars/FabIntegrationSnackbar.js", "iframe": true}}
 
 ### Control Direction
 
@@ -68,7 +68,7 @@ Change the direction of the transition. Slide is the default transition.
 
 Use a different transition.
 
-{{"demo": "pages/demos/snackbars/FadeSnackbar.js"}}
+{{"demo": "pages/demos/snackbars/TransitionsSnackbar.js"}}
 
 ## Complementary projects