feat(Snackbar): Modify default behavior of Snackbar and add Alert expl

react/MuiCozyTheme/makeOverrides.js

@@ -914,6 +914,12 @@ const makeOverrides = theme => ({
       width: '100%',
       fontWeight: 'bold'
     }
+  },
+  MuiSnackbarContent: {
+    root: {
+      padding: '4px 12px',
+      backgroundColor: theme.palette.grey[600]
+    }
   }
 })
 
@@ -989,6 +995,13 @@ const makeInvertedOverrides = invertedTheme => {
           '&-info': makeAlertInvertedColor(invertedTheme, 'info')
         }
       }
+    },
+    MuiSnackbarContent: {
+      ...makeOverrides(invertedTheme).MuiSnackbarContent,
+      root: {
+        ...makeOverrides(invertedTheme).MuiSnackbarContent.root,
+        backgroundColor: invertedTheme.palette.grey[200]
+      }
     }
   }
 

react/Snackbar/Readme.md

@@ -1 +1,76 @@
-Re-export of @material-ui. See [the official API](https://v4.mui.com/api/snackbar/).
+```jsx
+import Snackbar from 'cozy-ui/transpiled/react/Snackbar'
+import Alert from 'cozy-ui/transpiled/react/Alert'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import CrossIcon from 'cozy-ui/transpiled/react/Icons/Cross'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import InfoIcon from 'cozy-ui/transpiled/react/Icons/Info'
+
+initialState = { open: isTesting() }
+
+const handleToggle = () => {setState(state => ({ open: !state.open }))}
+
+;
+
+<>
+  <Button
+    variant="ghost"
+    size="small"
+    label="Open snackbar"
+    onClick={handleToggle}
+  />
+  <Snackbar
+    open={state.open}
+    message="This is a simple snackbar."
+    action={
+      <>
+        <Button variant="text" color="error" size="small" label="UNDO" onClick={handleToggle} />
+        <IconButton aria-label="close" color="inherit" onClick={handleToggle}>
+          <Icon icon={CrossIcon} size={14} />
+        </IconButton>
+      </>
+    }
+    onClose={handleToggle}
+  />
+</>
+```
+
+### With `Alert` inside the `Snackbar`
+
+```jsx
+import Snackbar from 'cozy-ui/transpiled/react/Snackbar'
+import Alert from 'cozy-ui/transpiled/react/Alert'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Variants from 'cozy-ui/docs/components/Variants'
+
+initialState = { open: isTesting() }
+
+const handleToggle = () => {setState(state => ({ open: !state.open }))}
+
+const colors = ['primary', 'secondary', 'success', 'error', 'warning', 'info']
+const initialVariants = [{ primary: true, secondary: true, success: false, error: false, warning: false, info: false }]
+
+;
+
+<>
+  <Variants initialVariants={initialVariants} radio screenshotAllVariants>
+    {variant => (
+      <>
+        <Snackbar open={state.open} onClose={handleToggle}>
+          <Alert onClose={handleToggle} severity={Object.keys(variant).find(key => variant[key])}>
+            This is a {Object.keys(variant).find(key => variant[key])} message!
+          </Alert>
+        </Snackbar>
+      </>
+    )}
+  </Variants>
+  <Button
+    variant="ghost"
+    size="small"
+    label="Open snackbar"
+    onClick={handleToggle}
+  />
+</>
+```

react/Snackbar/index.js

@@ -1,3 +1,19 @@
+import React, { forwardRef } from 'react'
 import MuiSnackbar from '@material-ui/core/Snackbar'
 
-export default MuiSnackbar
+const Snackbar = forwardRef(({ children, ...props }, ref) => {
+  return (
+    <MuiSnackbar ref={ref} {...props}>
+      {children}
+    </MuiSnackbar>
+  )
+})
+
+Snackbar.defaultProps = {
+  anchorOrigin: {
+    vertical: 'top',
+    horizontal: 'center'
+  }
+}
+
+export default Snackbar