From 8bbebeb6ab2bae41f5c9a2fb8ba1c53fbf85864c Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 31 Dec 2019 13:29:28 +0100 Subject: [PATCH] Matt review --- docs/pages/api/alert.md | 7 ++--- docs/pages/api/snackbar-content.md | 2 +- .../src/pages/components/alert/ColorAlerts.js | 24 +++++++++++++++++ .../pages/components/alert/ColorAlerts.tsx | 26 +++++++++++++++++++ .../components/alert/DescriptionAlerts.js | 8 +++--- .../components/alert/DescriptionAlerts.tsx | 8 +++--- .../pages/components/alert/FilledAlerts.js | 8 +++--- .../pages/components/alert/FilledAlerts.tsx | 8 +++--- docs/src/pages/components/alert/IconAlerts.js | 4 +-- .../src/pages/components/alert/IconAlerts.tsx | 4 +-- .../pages/components/alert/OutlinedAlerts.js | 8 +++--- .../pages/components/alert/OutlinedAlerts.tsx | 8 +++--- .../pages/components/alert/SimpleAlerts.js | 8 +++--- .../pages/components/alert/SimpleAlerts.tsx | 8 +++--- docs/src/pages/components/alert/alert.md | 6 +++++ packages/material-ui-lab/src/Alert/Alert.d.ts | 8 ++++-- packages/material-ui-lab/src/Alert/Alert.js | 19 ++++++++++---- 17 files changed, 117 insertions(+), 47 deletions(-) create mode 100644 docs/src/pages/components/alert/ColorAlerts.js create mode 100644 docs/src/pages/components/alert/ColorAlerts.tsx diff --git a/docs/pages/api/alert.md b/docs/pages/api/alert.md index 85d57b46c4764c..ec5796727a768c 100644 --- 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 | children | node | | The content of the component. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | closeText | string | 'Close' | Override the default text for the *close popup* icon button.
For localization purposes, you can use the provided [translations](/guides/localization/). | -| color | 'error'
| 'info'
| 'success'
| 'warning' | 'success' | Main color for the Alert, picked from theme palette. | +| color | 'error'
| 'info'
| 'success'
| 'warning' | | The main color for the alert. Unless provided, the value is taken from the `severity` prop. | | icon | node | | The icon element placed before the children. | -| iconMapping | { error?: node, info?: node, success?: node, warning?: node } | { success: <SuccessOutlinedIcon fontSize="inherit" />, warning: <ReportProblemOutlinedIcon fontSize="inherit" />, error: <ErrorOutlinedIcon fontSize="inherit" />, info: <InfoOutlinedIcon fontSize="inherit" />,} | The component maps the color prop to a range of different icons. For instance, success to ``. If you wish to change that mapping, you can provide your own. Alternatively, you can use the `icon` prop. | +| iconMapping | { error?: node, info?: node, success?: node, warning?: node } | { success: <SuccessOutlinedIcon fontSize="inherit" />, warning: <ReportProblemOutlinedIcon fontSize="inherit" />, error: <ErrorOutlineIcon fontSize="inherit" />, info: <InfoOutlinedIcon fontSize="inherit" />,} | The component maps the color prop to a range of different icons. For instance, success to ``. If you wish to change that mapping, you can provide your own. Alternatively, you can use the `icon` prop. | | onClose | func | | Callback fired when the component requests to be closed. When provided and no action prop is set, a close icon is displayed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | | role | string | 'alert' | The role attribute of the element. | -| variant | 'filled'
| 'outlined'
| 'text' | 'text' | The variant of the Alert. | +| severity | 'error'
| 'info'
| 'success'
| 'warning' | 'success' | The severity for the alert. | +| variant | 'filled'
| 'outlined'
| 'text' | 'text' | 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 index cfcb48b3920b02..c3c2218cf15c5c 100644 --- 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 | |:-----|:-----|:--------|:------------| -| action | node | | The action to display. It renders after the message, at the end of the alert. | +| action | node | | The action to display. It renders after the message, at the end of the snackbar. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | message | node | | The message to display. | | role | 'alert'
| 'alertdialog' | 'alert' | 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 new file mode 100644 index 00000000000000..c18d9f71afdab1 --- /dev/null +++ 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 ( +
+ + This is a success alert—check it out! + +
+ ); +} diff --git a/docs/src/pages/components/alert/ColorAlerts.tsx b/docs/src/pages/components/alert/ColorAlerts.tsx new file mode 100644 index 00000000000000..02d3b5e04f5581 --- /dev/null +++ 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 ( +
+ + This is a success alert—check it out! + +
+ ); +} diff --git a/docs/src/pages/components/alert/DescriptionAlerts.js b/docs/src/pages/components/alert/DescriptionAlerts.js index 3a2c2b5eb75a21..ab91fff54a4bd8 100644 --- 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 (
- + Error This is an error alert—check it out! - + Warning This is a warning alert—check it out! - + Info This is an info alert—check it out! - + Success This is a success alert—check it out! diff --git a/docs/src/pages/components/alert/DescriptionAlerts.tsx b/docs/src/pages/components/alert/DescriptionAlerts.tsx index 34420ab173adfb..830983bdedd32b 100644 --- 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 (
- + Error This is an error alert—check it out! - + Warning This is a warning alert—check it out! - + Info This is an info alert—check it out! - + Success This is a success alert—check it out! diff --git a/docs/src/pages/components/alert/FilledAlerts.js b/docs/src/pages/components/alert/FilledAlerts.js index 8c2918a8411b57..c09e42d8f77253 100644 --- 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 (
- + This is an error alert—check it out! - + This is a warning alert—check it out! - + This is an info alert—check it out! - + This is a success alert—check it out!
diff --git a/docs/src/pages/components/alert/FilledAlerts.tsx b/docs/src/pages/components/alert/FilledAlerts.tsx index 7c986461a0bfe0..887c1ed944f801 100644 --- 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 (
- + This is an error alert—check it out! - + This is a warning alert—check it out! - + This is an info alert—check it out! - + This is a success alert—check it out!
diff --git a/docs/src/pages/components/alert/IconAlerts.js b/docs/src/pages/components/alert/IconAlerts.js index b97af89259f0a6..abdfd44a64a8fc 100644 --- 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 (
- } color="success"> + } severity="success"> This is a success alert—check it out! }}> This is a success alert—check it out! - + This is a success alert—check it out!
diff --git a/docs/src/pages/components/alert/IconAlerts.tsx b/docs/src/pages/components/alert/IconAlerts.tsx index c42cc6849a634d..fd18fb9e77861e 100644 --- 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 (
- } color="success"> + } severity="success"> This is a success alert—check it out! }}> This is a success alert—check it out! - + This is a success alert—check it out!
diff --git a/docs/src/pages/components/alert/OutlinedAlerts.js b/docs/src/pages/components/alert/OutlinedAlerts.js index f1f1f2b80515ca..e69b8191eaed79 100644 --- 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 (
- + This is an error alert—check it out! - + This is a warning alert—check it out! - + This is an info alert—check it out! - + This is a success alert—check it out!
diff --git a/docs/src/pages/components/alert/OutlinedAlerts.tsx b/docs/src/pages/components/alert/OutlinedAlerts.tsx index b9c15ca5e11ead..860b4215489486 100644 --- 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 (
- + This is an error alert—check it out! - + This is a warning alert—check it out! - + This is an info alert—check it out! - + This is a success alert—check it out!
diff --git a/docs/src/pages/components/alert/SimpleAlerts.js b/docs/src/pages/components/alert/SimpleAlerts.js index 3d89611e0c7ba0..9ff6a18e61f1f5 100644 --- 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 (
- This is an error alert—check it out! - This is a warning alert—check it out! - This is an info alert—check it out! - This is a success alert—check it out! + This is an error alert—check it out! + This is a warning alert—check it out! + This is an info alert—check it out! + This is a success alert—check it out!
); } diff --git a/docs/src/pages/components/alert/SimpleAlerts.tsx b/docs/src/pages/components/alert/SimpleAlerts.tsx index 87d1af3b94cc33..4b264f60eaa1e8 100644 --- 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 (
- This is an error alert—check it out! - This is a warning alert—check it out! - This is an info alert—check it out! - This is a success alert—check it out! + This is an error alert—check it out! + This is a warning alert—check it out! + This is an info alert—check it out! + This is a success alert—check it out!
); } diff --git a/docs/src/pages/components/alert/alert.md b/docs/src/pages/components/alert/alert.md index c9e941b3cc8096..770418e9b19d1a 100644 --- 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 index c9324f90961e27..d08f233d15a6e2 100644 --- 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 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 index 5a3a39ff13ad70..556c90f5c7198a 100644 --- 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 ? (
- {icon || iconMapping[color] || defaultIconMapping[color]} + {icon || iconMapping[severity] || defaultIconMapping[severity]}
) : null}
{children}
@@ -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']), };