feat(toast): add close icon

Signed-off-by: Machiko Yasuda <machiko@reactioncommerce.com>
reactioncommerce · Sep 26, 2019 · c1aa950 · c1aa950
1 parent 5f5a732
commit c1aa950
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 45 deletions.
diff --git a/package/src/components/Toast/Toast.js b/package/src/components/Toast/Toast.js
@@ -1,25 +1,57 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Snackbar } from "@material-ui/core";
+import { Snackbar, IconButton } from "@material-ui/core";
+import CloseIcon from "mdi-material-ui/Close";
+import { makeStyles } from "@material-ui/core/styles";
 import { ToastWrapper } from "./helpers";
 
+const useStyles = makeStyles((theme) => ({
+  close: {
+    padding: 4,
+    marginRight: -8
+  }
+}));
+
 /**
  * @name Toast
  * @param {Object} props Component props
  * @returns {React.Component} returns a React component
  */
 const Toast = React.forwardRef(function Toast(props, ref) {
+  const classes = useStyles();
   const { className, message, variant, title, ...otherProps } = props;
+  const [open, setOpen] = React.useState(false);
+
+  const handleClose = (event, reason) => {
+    if (reason === "clickaway") {
+      return;
+    }
+
+    setOpen(false);
+  };
+
   return (
     <Snackbar
       ref={ref}
+      open={open}
       {...otherProps}
     >
       <ToastWrapper
         props={otherProps}
         variant={variant}
         title={title}
         message={message}
+        onClose={handleClose}
+        action={
+          <IconButton
+            key="close"
+            aria-label="close"
+            color="inherit"
+            className={classes.close}
+            onClick={handleClose}
+          >
+            <CloseIcon />
+          </IconButton>}
       />
     </Snackbar>
   );
@@ -34,9 +66,12 @@ Toast.propTypes = {
     */
   className: PropTypes.string,
   /**
-   * Message
+   * Message: Node
+   */
+  message: PropTypes.node,
+  /**
+   * Title: Optional
    */
-  message: PropTypes.string,
   title: PropTypes.string,
   /**
    * Variant: Info, Success, Warning, Error

diff --git a/package/src/components/Toast/Toast.md b/package/src/components/Toast/Toast.md
@@ -1,36 +1,34 @@
 ### Overview
 
-<!-- Get this short paragraph from design. -->
+Toasts are used to give action-based feedback messages and convey critical or informational account-related messages. Use Toasts when a user needs more detailed information for an action.
 
-The X component inherits from the Material-UI [X component](https://material-ui.com/components/X/). Refer to the Material-UI [X docs](https://material-ui.com/api/X/) for more information.
+The Toast component inherits from the Material-UI [Snackbar component](https://material-ui.com/components/snackbars/). Refer to the Material-UI [Snackbar docs](https://material-ui.com/api/snackbar/) for more information.
 
 ### Usage
 
-<!-- Show all the variants/combos we use in Reaction Admin, without the code box > -->
-
 ```jsx
 <Toast
-  anchorOrigin={{
-    vertical: 'bottom',
-    horizontal: 'left',
-  }}
   open
-  autoHideDuration={6000}
-  ContentProps={{
-    'aria-describedby': 'message-id',
-  }}
+  autoHideDuration={300}
   message={"Note archived"}
   title={"Title"}
 />
 ```
 
+Toasts are most often used when the user has taken an action. Messages appear in context and communicate when that action is successful, unsuccessful, or that it otherwise needs attention and further context.
+
+Language should be polite, clear and concise. Optionally, a title can be added to a Toast to give clarity, or when there are 2 or more lines of information to display.
+
+Toasts should guide the user into taking corrective action if necessary.
+
+Users should be able to dismiss Toasts when appropriate. Information and success alerts can close automatically after 10 seconds. Error alerts should be persistent, and close only when action is resolved.
+
 #### Types
 
 ##### Information
 
-<!-- Explain when to use this type of the component, and give a real life Reaction Admin example. If needed, add instruction for developers on how to set up the component. -->
-
-Use a X component to allow a user to XX, such as XYXY.
+- Used when there is information or tips that users can benefit from
+- Can close automatically after 10 seconds
 
 ```jsx
 import Button from "../Button";
@@ -73,14 +71,15 @@ function OpenToast(props) {
   );
 }
 
-<OpenToast message="Information toast" title="Info" variant="info" />
+<OpenToast message={<span>Information toast</span>} title="Info" variant="info" />
 ```
 
 ##### Success
 
 <!-- Explain when to use this type of the component, and give a real life Reaction Admin example. If needed, add instruction for developers on how to set up the component. -->
 
-Use a X component to allow a user to XX, such as XYXY.
+- Used when an action has been completed successfully
+- Can close automatically after 10 seconds
 
 ```jsx
 import Button from "../Button";
@@ -122,14 +121,13 @@ function OpenToast(props) {
   );
 }
 
-<OpenToast message="Success toast" variant="success" />
+<OpenToast message={<span>Success toast</span>} variant="success" />
 ```
 
 ##### Warning
 
-<!-- Explain when to use this type of the component, and give a real life Reaction Admin example. If needed, add instruction for developers on how to set up the component. -->
-
-Use a X component to allow a user to XX, such as XYXY.
+- Used when an action or item needs attention
+- Should not close automatically, unless the action has been resolved
 
 ```jsx
 import Button from "../Button";
@@ -171,14 +169,13 @@ function OpenToast(props) {
   );
 }
 
-<OpenToast message="Warning toast" variant="warning" />
+<OpenToast message={<span>Warning toast</span>} variant="warning" />
 ```
 
 ##### Error
 
-<!-- Explain when to use this type of the component, and give a real life Reaction Admin example. If needed, add instruction for developers on how to set up the component. -->
-
-Use a X component to allow a user to XX, such as XYXY.
+- Used when the system has failed to complete an action, or the user has made an error
+- Should not close automatically, unless the action has been resolved
 
 ```jsx
 import Button from "../Button";
@@ -220,5 +217,5 @@ function OpenToast(props) {
   );
 }
 
-<OpenToast message="Error toast" variant="error" />
+<OpenToast message={<span>Error toast</span>} variant="error" />
 ```
diff --git a/package/src/components/Toast/helpers/ToastWrapper.js b/package/src/components/Toast/helpers/ToastWrapper.js
@@ -5,19 +5,15 @@ import { Paper, Typography } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 
 const useStyles = makeStyles((theme) => ({
-  message: {
-    padding: "8px 0"
+  messageWrapper: {
+    // padding: "8px 0"
   },
   title: {
-    padding: "8px 0 0 0",
+    padding: "4px 0 8px 0",
     fontWeight: theme.typography.fontWeightSemiBold
   },
   action: {
-    display: "flex",
-    alignItems: "center",
-    marginLeft: "auto",
-    paddingLeft: 16,
-    marginRight: -8
+    marginLeft: "auto"
   },
   success: {
     fontSize: theme.typography.fontSize,
@@ -27,7 +23,7 @@ const useStyles = makeStyles((theme) => ({
     padding: "8px 16px",
     borderRadius: theme.shape.borderRadius,
     display: "flex",
-    flexDirection: "column",
+    flexDirection: "row",
     minWidth: 288
   },
   error: {
@@ -38,7 +34,7 @@ const useStyles = makeStyles((theme) => ({
     padding: "8px 16px",
     borderRadius: theme.shape.borderRadius,
     display: "flex",
-    flexDirection: "column",
+    flexDirection: "row",
     minWidth: 288
   },
   info: {
@@ -49,7 +45,7 @@ const useStyles = makeStyles((theme) => ({
     padding: "8px 16px",
     borderRadius: theme.shape.borderRadius,
     display: "flex",
-    flexDirection: "column",
+    flexDirection: "row",
     minWidth: 288
   },
   warning: {
@@ -60,7 +56,7 @@ const useStyles = makeStyles((theme) => ({
     padding: "8px 16px",
     borderRadius: theme.shape.borderRadius,
     display: "flex",
-    flexDirection: "column",
+    flexDirection: "row",
     minWidth: 288
   }
 }));
@@ -76,7 +72,7 @@ export default function ToastWrapper(props) {
 
   return (
     <Paper
-      component={Typography}
+      component={"div"}
       role="alertdialog"
       square
       elevation={6}
@@ -85,8 +81,10 @@ export default function ToastWrapper(props) {
       title={title}
       {...otherProps}
     >
-      { title ? <Typography variant="h4" component="div" className={classes.title}>{title}</Typography> : null }
-      <div className={classes.message}>{message}</div>
+      <div className={classes.messageWrapper}>
+        { title ? <Typography variant="h4" component="div" className={classes.title}>{title}</Typography> : null }
+        {message}
+      </div>
       {action ? <div className={classes.action}>{action}</div> : null }
     </Paper>
   );
@@ -95,7 +93,7 @@ export default function ToastWrapper(props) {
 ToastWrapper.propTypes = {
   action: PropTypes.node,
   className: PropTypes.string,
-  message: PropTypes.string,
+  message: PropTypes.node,
   title: PropTypes.string,
   variant: PropTypes.oneOf(["error", "info", "success", "warning"]).isRequired
 };