Matt review

mui · Dec 31, 2019 · 8bbebeb · 8bbebeb
1 parent 6def062
commit 8bbebeb
Show file tree

Hide file tree

Showing 17 changed files with 117 additions and 47 deletions.
diff --git a/docs/pages/api/alert.md b/docs/pages/api/alert.md
@@ -28,12 +28,13 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">closeText</span> | <span class="prop-type">string</span> | <span class="prop-default">'Close'</span> | Override the default text for the *close popup* icon button.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
-| <span class="prop-name">color</span> | <span class="prop-type">'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'</span> | <span class="prop-default">'success'</span> | Main color for the Alert, picked from theme palette. |
+| <span class="prop-name">color</span> | <span class="prop-type">'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'</span> |  | The main color for the alert. Unless provided, the value is taken from the `severity` prop. |
 | <span class="prop-name">icon</span> | <span class="prop-type">node</span> |  | The icon element placed before the children. |
-| <span class="prop-name">iconMapping</span> | <span class="prop-type">{ error?: node, info?: node, success?: node, warning?: node }</span> | <span class="prop-default">{  success: &lt;SuccessOutlinedIcon fontSize="inherit" />,  warning: &lt;ReportProblemOutlinedIcon fontSize="inherit" />,  error: &lt;ErrorOutlinedIcon fontSize="inherit" />,  info: &lt;InfoOutlinedIcon fontSize="inherit" />,}</span> | The component maps the color prop to a range of different icons. For instance, success to `<SuccessOutlined>`. If you wish to change that mapping, you can provide your own. Alternatively, you can use the `icon` prop. |
+| <span class="prop-name">iconMapping</span> | <span class="prop-type">{ error?: node, info?: node, success?: node, warning?: node }</span> | <span class="prop-default">{  success: &lt;SuccessOutlinedIcon fontSize="inherit" />,  warning: &lt;ReportProblemOutlinedIcon fontSize="inherit" />,  error: &lt;ErrorOutlineIcon fontSize="inherit" />,  info: &lt;InfoOutlinedIcon fontSize="inherit" />,}</span> | The component maps the color prop to a range of different icons. For instance, success to `<SuccessOutlined>`. If you wish to change that mapping, you can provide your own. Alternatively, you can use the `icon` prop. |
 | <span class="prop-name">onClose</span> | <span class="prop-type">func</span> |  | Callback fired when the component requests to be closed. When provided and no action prop is set, a close icon is displayed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
 | <span class="prop-name">role</span> | <span class="prop-type">string</span> | <span class="prop-default">'alert'</span> | The role attribute of the element. |
-| <span class="prop-name">variant</span> | <span class="prop-type">'filled'<br>&#124;&nbsp;'outlined'<br>&#124;&nbsp;'text'</span> | <span class="prop-default">'text'</span> | The variant of the Alert. |
+| <span class="prop-name">severity</span> | <span class="prop-type">'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'</span> | <span class="prop-default">'success'</span> | The severity for the alert. |
+| <span class="prop-name">variant</span> | <span class="prop-type">'filled'<br>&#124;&nbsp;'outlined'<br>&#124;&nbsp;'text'</span> | <span class="prop-default">'text'</span> | The variant to use. |
 
 The `ref` is forwarded to the root element.
 

diff --git a/docs/pages/api/snackbar-content.md b/docs/pages/api/snackbar-content.md
@@ -24,7 +24,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name">action</span> | <span class="prop-type">node</span> |  | The action to display. It renders after the message, at the end of the alert. |
+| <span class="prop-name">action</span> | <span class="prop-type">node</span> |  | The action to display. It renders after the message, at the end of the snackbar. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">message</span> | <span class="prop-type">node</span> |  | The message to display. |
 | <span class="prop-name">role</span> | <span class="prop-type">'alert'<br>&#124;&nbsp;'alertdialog'</span> | <span class="prop-default">'alert'</span> | The role attribute of the element. If the Snackbar requires focus to be closed, the `alertdialog` role should be used instead. |

diff --git a/docs/src/pages/components/alert/ColorAlerts.js b/docs/src/pages/components/alert/ColorAlerts.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { Alert } from '@material-ui/lab';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    width: '100%',
+    '& > * + *': {
+      marginTop: theme.spacing(2),
+    },
+  },
+}));
+
+export default function ColorAlerts() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Alert severity="success" color="info">
+        This is a success alert—check it out!
+      </Alert>
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/alert/ColorAlerts.tsx b/docs/src/pages/components/alert/ColorAlerts.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import { Alert } from '@material-ui/lab';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      '& > * + *': {
+        marginTop: theme.spacing(2),
+      },
+    },
+  }),
+);
+
+export default function ColorAlerts() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Alert severity="success" color="info">
+        This is a success alert—check it out!
+      </Alert>
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/alert/DescriptionAlerts.js b/docs/src/pages/components/alert/DescriptionAlerts.js
@@ -16,19 +16,19 @@ export default function DescriptionAlerts() {
 
   return (
     <div className={classes.root}>
-      <Alert color="error">
+      <Alert severity="error">
         <AlertTitle>Error</AlertTitle>
         This is an error alert—check it out!
       </Alert>
-      <Alert color="warning">
+      <Alert severity="warning">
         <AlertTitle>Warning</AlertTitle>
         This is a warning alert—check it out!
       </Alert>
-      <Alert color="info">
+      <Alert severity="info">
         <AlertTitle>Info</AlertTitle>
         This is an info alert—check it out!
       </Alert>
-      <Alert color="success">
+      <Alert severity="success">
         <AlertTitle>Success</AlertTitle>
         This is a success alert—check it out!
       </Alert>

diff --git a/docs/src/pages/components/alert/DescriptionAlerts.tsx b/docs/src/pages/components/alert/DescriptionAlerts.tsx
@@ -18,19 +18,19 @@ export default function DescriptionAlerts() {
 
   return (
     <div className={classes.root}>
-      <Alert color="error">
+      <Alert severity="error">
         <AlertTitle>Error</AlertTitle>
         This is an error alert—check it out!
       </Alert>
-      <Alert color="warning">
+      <Alert severity="warning">
         <AlertTitle>Warning</AlertTitle>
         This is a warning alert—check it out!
       </Alert>
-      <Alert color="info">
+      <Alert severity="info">
         <AlertTitle>Info</AlertTitle>
         This is an info alert—check it out!
       </Alert>
-      <Alert color="success">
+      <Alert severity="success">
         <AlertTitle>Success</AlertTitle>
         This is a success alert—check it out!
       </Alert>

diff --git a/docs/src/pages/components/alert/FilledAlerts.js b/docs/src/pages/components/alert/FilledAlerts.js
@@ -16,16 +16,16 @@ export default function SimpleAlerts() {
 
   return (
     <div className={classes.root}>
-      <Alert variant="filled" color="error">
+      <Alert variant="filled" severity="error">
         This is an error alert—check it out!
       </Alert>
-      <Alert variant="filled" color="warning">
+      <Alert variant="filled" severity="warning">
         This is a warning alert—check it out!
       </Alert>
-      <Alert variant="filled" color="info">
+      <Alert variant="filled" severity="info">
         This is an info alert—check it out!
       </Alert>
-      <Alert variant="filled" color="success">
+      <Alert variant="filled" severity="success">
         This is a success alert—check it out!
       </Alert>
     </div>

diff --git a/docs/src/pages/components/alert/FilledAlerts.tsx b/docs/src/pages/components/alert/FilledAlerts.tsx
@@ -18,16 +18,16 @@ export default function SimpleAlerts() {
 
   return (
     <div className={classes.root}>
-      <Alert variant="filled" color="error">
+      <Alert variant="filled" severity="error">
         This is an error alert—check it out!
       </Alert>
-      <Alert variant="filled" color="warning">
+      <Alert variant="filled" severity="warning">
         This is a warning alert—check it out!
       </Alert>
-      <Alert variant="filled" color="info">
+      <Alert variant="filled" severity="info">
         This is an info alert—check it out!
       </Alert>
-      <Alert variant="filled" color="success">
+      <Alert variant="filled" severity="success">
         This is a success alert—check it out!
       </Alert>
     </div>

diff --git a/docs/src/pages/components/alert/IconAlerts.js b/docs/src/pages/components/alert/IconAlerts.js
@@ -18,13 +18,13 @@ export default function IconAlerts() {
 
   return (
     <div className={classes.root}>
-      <Alert icon={<CheckIcon fontSize="inherit" />} color="success">
+      <Alert icon={<CheckIcon fontSize="inherit" />} severity="success">
         This is a success alert—check it out!
       </Alert>
       <Alert iconMapping={{ success: <CheckCircleOutlineIcon fontSize="inherit" /> }}>
         This is a success alert—check it out!
       </Alert>
-      <Alert icon={false} color="success">
+      <Alert icon={false} severity="success">
         This is a success alert—check it out!
       </Alert>
     </div>

diff --git a/docs/src/pages/components/alert/IconAlerts.tsx b/docs/src/pages/components/alert/IconAlerts.tsx
@@ -20,13 +20,13 @@ export default function IconAlerts() {
 
   return (
     <div className={classes.root}>
-      <Alert icon={<CheckIcon fontSize="inherit" />} color="success">
+      <Alert icon={<CheckIcon fontSize="inherit" />} severity="success">
         This is a success alert—check it out!
       </Alert>
       <Alert iconMapping={{ success: <CheckCircleOutlineIcon fontSize="inherit" /> }}>
         This is a success alert—check it out!
       </Alert>
-      <Alert icon={false} color="success">
+      <Alert icon={false} severity="success">
         This is a success alert—check it out!
       </Alert>
     </div>

diff --git a/docs/src/pages/components/alert/OutlinedAlerts.js b/docs/src/pages/components/alert/OutlinedAlerts.js
@@ -16,16 +16,16 @@ export default function SimpleAlerts() {
 
   return (
     <div className={classes.root}>
-      <Alert variant="outlined" color="error">
+      <Alert variant="outlined" severity="error">
         This is an error alert—check it out!
       </Alert>
-      <Alert variant="outlined" color="warning">
+      <Alert variant="outlined" severity="warning">
         This is a warning alert—check it out!
       </Alert>
-      <Alert variant="outlined" color="info">
+      <Alert variant="outlined" severity="info">
         This is an info alert—check it out!
       </Alert>
-      <Alert variant="outlined" color="success">
+      <Alert variant="outlined" severity="success">
         This is a success alert—check it out!
       </Alert>
     </div>

diff --git a/docs/src/pages/components/alert/OutlinedAlerts.tsx b/docs/src/pages/components/alert/OutlinedAlerts.tsx
@@ -18,16 +18,16 @@ export default function SimpleAlerts() {
 
   return (
     <div className={classes.root}>
-      <Alert variant="outlined" color="error">
+      <Alert variant="outlined" severity="error">
         This is an error alert—check it out!
       </Alert>
-      <Alert variant="outlined" color="warning">
+      <Alert variant="outlined" severity="warning">
         This is a warning alert—check it out!
       </Alert>
-      <Alert variant="outlined" color="info">
+      <Alert variant="outlined" severity="info">
         This is an info alert—check it out!
       </Alert>
-      <Alert variant="outlined" color="success">
+      <Alert variant="outlined" severity="success">
         This is a success alert—check it out!
       </Alert>
     </div>

diff --git a/docs/src/pages/components/alert/SimpleAlerts.js b/docs/src/pages/components/alert/SimpleAlerts.js
@@ -16,10 +16,10 @@ export default function SimpleAlerts() {
 
   return (
     <div className={classes.root}>
-      <Alert color="error">This is an error alert—check it out!</Alert>
-      <Alert color="warning">This is a warning alert—check it out!</Alert>
-      <Alert color="info">This is an info alert—check it out!</Alert>
-      <Alert color="success">This is a success alert—check it out!</Alert>
+      <Alert severity="error">This is an error alert—check it out!</Alert>
+      <Alert severity="warning">This is a warning alert—check it out!</Alert>
+      <Alert severity="info">This is an info alert—check it out!</Alert>
+      <Alert severity="success">This is a success alert—check it out!</Alert>
     </div>
   );
 }
diff --git a/docs/src/pages/components/alert/SimpleAlerts.tsx b/docs/src/pages/components/alert/SimpleAlerts.tsx
@@ -18,10 +18,10 @@ export default function SimpleAlerts() {
 
   return (
     <div className={classes.root}>
-      <Alert color="error">This is an error alert—check it out!</Alert>
-      <Alert color="warning">This is a warning alert—check it out!</Alert>
-      <Alert color="info">This is an info alert—check it out!</Alert>
-      <Alert color="success">This is a success alert—check it out!</Alert>
+      <Alert severity="error">This is an error alert—check it out!</Alert>
+      <Alert severity="warning">This is a warning alert—check it out!</Alert>
+      <Alert severity="info">This is an info alert—check it out!</Alert>
+      <Alert severity="success">This is a success alert—check it out!</Alert>
     </div>
   );
 }
diff --git a/docs/src/pages/components/alert/alert.md b/docs/src/pages/components/alert/alert.md
@@ -50,6 +50,12 @@ Setting the icon prop to false will remove the icon altogether.
 
 You can use the Snackbar to [display a toast](/components/snackbars/#customized-snackbars) with the Alert.
 
+## Color
+
+You can use a different severity and color value.
+
+{{"demo": "pages/components/alert/ColorAlerts.js"}}
+
 ## Accessibility
 
 (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#alert)

diff --git a/packages/material-ui-lab/src/Alert/Alert.d.ts b/packages/material-ui-lab/src/Alert/Alert.d.ts
@@ -16,9 +16,13 @@ export interface AlertProps extends StandardProps<PaperProps, AlertClassKey, 'va
    */
   closeText?: string;
   /**
-   * Main color for the Alert, picked from theme palette.
+   * The main color for the alert. Unless provided, the value is taken from the `severity` prop.
    */
   color?: Color;
+  /**
+   * The severity for the alert.
+   */
+  severity?: Color;
   /**
    * The icon element placed before the children.
    */
@@ -42,7 +46,7 @@ export interface AlertProps extends StandardProps<PaperProps, AlertClassKey, 'va
    */
   onClose?: (event: React.SyntheticEvent) => void;
   /**
-   * The variant of the Alert.
+   * The variant to use.
    */
   variant?: 'text' | 'filled' | 'outlined';
 }

diff --git a/packages/material-ui-lab/src/Alert/Alert.js b/packages/material-ui-lab/src/Alert/Alert.js
@@ -159,11 +159,12 @@ const Alert = React.forwardRef(function Alert(props, ref) {
     classes,
     className,
     closeText = 'Close',
-    color = 'success',
+    color,
     icon,
     iconMapping = defaultIconMapping,
     onClose,
     role = 'alert',
+    severity = 'success',
     variant = 'text',
     ...other
   } = props;
@@ -173,13 +174,17 @@ const Alert = React.forwardRef(function Alert(props, ref) {
       role={role}
       square
       elevation={0}
-      className={clsx(classes.root, classes[`${variant}${capitalize(color)}`], className)}
+      className={clsx(
+        classes.root,
+        classes[`${variant}${capitalize(color || severity)}`],
+        className,
+      )}
       ref={ref}
       {...other}
     >
       {icon !== false ? (
         <div className={classes.icon}>
-          {icon || iconMapping[color] || defaultIconMapping[color]}
+          {icon || iconMapping[severity] || defaultIconMapping[severity]}
         </div>
       ) : null}
       <div className={classes.message}>{children}</div>
@@ -230,7 +235,7 @@ Alert.propTypes = {
    */
   closeText: PropTypes.string,
   /**
-   * Main color for the Alert, picked from theme palette.
+   * The main color for the alert. Unless provided, the value is taken from the `severity` prop.
    */
   color: PropTypes.oneOf(['error', 'info', 'success', 'warning']),
   /**
@@ -261,7 +266,11 @@ Alert.propTypes = {
    */
   role: PropTypes.string,
   /**
-   * The variant of the Alert.
+   * The severity for the alert.
+   */
+  severity: PropTypes.oneOf(['error', 'info', 'success', 'warning']),
+  /**
+   * The variant to use.
    */
   variant: PropTypes.oneOf(['filled', 'outlined', 'text']),
 };