[Snackbar] Add customization example

docs/src/pages/demos/snackbars/CustomizedSnackbars.js

@@ -0,0 +1,164 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Button from '@material-ui/core/Button';
+import CheckIcon from '@material-ui/icons/Check';
+import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
+import InfoIcon from '@material-ui/icons/InfoOutline';
+import CloseIcon from '@material-ui/icons/Close';
+import green from '@material-ui/core/colors/green';
+import amber from '@material-ui/core/colors/amber';
+import IconButton from '@material-ui/core/IconButton';
+import Snackbar from '@material-ui/core/Snackbar';
+import SnackbarContent from '@material-ui/core/SnackbarContent';
+import WarningIcon from '@material-ui/icons/Warning';
+import { withStyles } from '@material-ui/core/styles';
+
+const variantIcon = {
+  success: CheckIcon,
+  warning: WarningIcon,
+  error: ErrorOutlineIcon,
+  info: InfoIcon,
+};
+
+const styles1 = theme => ({
+  success: {
+    backgroundColor: green[600],
+  },
+  error: {
+    backgroundColor: theme.palette.error.dark,
+  },
+  info: {
+    backgroundColor: theme.palette.primary.dark,
+  },
+  warning: {
+    backgroundColor: amber[700],
+  },
+  icon: {
+    fontSize: 20,
+  },
+  iconVariant: {
+    marginRight: theme.spacing.unit,
+  },
+  message: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+function MySnackbarContent(props) {
+  const { classes, className, message, onClose, variant, ...other } = props;
+  const Icon = variantIcon[variant];
+
+  return (
+    <SnackbarContent
+      className={classNames(classes[variant], className)}
+      aria-describedby="client-snackbar"
+      message={
+        <span id="client-snackbar" className={classes.message}>
+          <Icon className={classNames(classes.icon, classes.iconVariant)} />
+          {message}
+        </span>
+      }
+      action={[
+        <IconButton
+          key="close"
+          aria-label="Close"
+          color="inherit"
+          className={classes.close}
+          onClick={onClose}
+        >
+          <CloseIcon className={classes.icon} />
+        </IconButton>,
+      ]}
+      {...other}
+    />
+  );
+}
+
+MySnackbarContent.propTypes = {
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  message: PropTypes.node,
+  onClose: PropTypes.func,
+  variant: PropTypes.oneOf(['success', 'warning', 'error', 'info']).isRequired,
+};
+
+const MySnackbarContentWrapper = withStyles(styles1)(MySnackbarContent);
+
+const styles2 = theme => ({
+  margin: {
+    margin: theme.spacing.unit,
+  },
+});
+
+class CustomizedSnackbars extends React.Component {
+  state = {
+    open: false,
+  };
+
+  handleClick = () => {
+    this.setState({ open: true });
+  };
+
+  handleClose = (event, reason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    this.setState({ open: false });
+  };
+
+  render() {
+    const { classes } = this.props;
+
+    return (
+      <div>
+        <Button className={classes.margin} onClick={this.handleClick}>
+          Open success snackbar
+        </Button>
+        <Snackbar
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'left',
+          }}
+          open={this.state.open}
+          autoHideDuration={6000}
+          onClose={this.handleClose}
+        >
+          <MySnackbarContentWrapper
+            onClose={this.handleClose}
+            variant="success"
+            message="This is a success message!"
+          />
+        </Snackbar>
+        <MySnackbarContentWrapper
+          variant="error"
+          className={classes.margin}
+          message="This is an error message!"
+        />
+        <MySnackbarContentWrapper
+          variant="warning"
+          className={classes.margin}
+          message="This is a warning message!"
+        />
+        <MySnackbarContentWrapper
+          variant="info"
+          className={classes.margin}
+          message="This is an information message!"
+        />
+        <MySnackbarContentWrapper
+          variant="success"
+          className={classes.margin}
+          message="This is a success message!"
+        />
+      </div>
+    );
+  }
+}
+
+CustomizedSnackbars.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles2)(CustomizedSnackbars);

docs/src/pages/demos/snackbars/snackbars.md

@@ -54,3 +54,11 @@ Move the floating action button vertically to accommodate the snackbar height.
 Per [Google's guidelines](https://material.io/archive/guidelines/components/snackbars-toasts.html#snackbars-toasts-usage), when a second snackbar is triggered while the first is displayed, the first should start the contraction motion downwards before the second one animates upwards.
 
 {{"demo": "pages/demos/snackbars/ConsecutiveSnackbars.js"}}
+
+## Customized Snackbars
+
+If you have been reading the [overrides documentation page](/customization/overrides)
+but you are not confident jumping in,
+here are examples of how you can change the look of a Snackbar.
+
+{{"demo": "pages/demos/snackbars/CustomizedSnackbars.js"}}

docs/src/pages/demos/text-fields/text-fields.md

@@ -49,7 +49,6 @@ You have to provide a custom implementation of the `<input>` element with the `i
 
 The following demo uses the [react-text-mask](https://github.com/text-mask/text-mask) and [react-number-format](https://github.com/s-yadav/react-number-format) libraries.
 
-
 {{"demo": "pages/demos/text-fields/FormattedInputs.js"}}
 
 ## Customized inputs

pages/demos/snackbars.js

@@ -55,6 +55,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/demos/snackbars/ConsecutiveSnackbars'), 'utf8')
+`,
+        },
+        'pages/demos/snackbars/CustomizedSnackbars.js': {
+          js: require('docs/src/pages/demos/snackbars/CustomizedSnackbars').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/snackbars/CustomizedSnackbars'), 'utf8')
 `,
         },
       }}