Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Alert] Introduce new component #18702

Merged
merged 12 commits into from
Jan 3, 2020
+1,501 −343
Merged

[Alert] Introduce new component #18702

Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
f77ae3a
[Alert] implements Alert component
dimitropoulos Dec 21, 2019
715ec5c
Fixing issues from code review
r3dm1ke Dec 23, 2019
7df7ce9
push one step further
oliviertassinari Dec 24, 2019
3e703ce
help with api docs
merceyz Dec 25, 2019
ec66e59
Add onClose prop back
oliviertassinari Dec 25, 2019
1a1dee0
changes error icon to `ErrorOutline` from `ErrorOutlined`
dimitropoulos Dec 26, 2019
fc6eaff
updates description for `action` prop
dimitropoulos Dec 26, 2019
a5fd7e9
Update packages/material-ui-lab/src/internal/svg-icons/ErrorOutline.js
dimitropoulos Dec 26, 2019
6def062
Update packages/material-ui/src/SnackbarContent/SnackbarContent.js
dimitropoulos Dec 26, 2019
8bbebeb
Matt review
oliviertassinari Dec 31, 2019
088cf5d
[Alert] Fix demo message dash spacing
mbrookes Dec 31, 2019
5795edc
review
mbrookes Jan 1, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Matt review
@oliviertassinari
oliviertassinari committed Dec 31, 2019
commit 8bbebeb6ab2bae41f5c9a2fb8ba1c53fbf85864c
7 changes: 4 additions & 3 deletions docs/pages/api/alert.md
View file
Original file line number Diff line number Diff line change
@@ -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.

2 changes: 1 addition & 1 deletion docs/pages/api/snackbar-content.md
View file
Original file line number Diff line number Diff line change
@@ -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. |
24 changes: 24 additions & 0 deletions docs/src/pages/components/alert/ColorAlerts.js
View file
Original file line number Diff line number Diff line change
@@ -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>
);
}
26 changes: 26 additions & 0 deletions docs/src/pages/components/alert/ColorAlerts.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
}
8 changes: 4 additions & 4 deletions docs/src/pages/components/alert/DescriptionAlerts.js
View file
Original file line number Diff line number Diff line change
@@ -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>
8 changes: 4 additions & 4 deletions docs/src/pages/components/alert/DescriptionAlerts.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
8 changes: 4 additions & 4 deletions docs/src/pages/components/alert/FilledAlerts.js
View file
Original file line number Diff line number Diff line change
@@ -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>
8 changes: 4 additions & 4 deletions docs/src/pages/components/alert/FilledAlerts.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
4 changes: 2 additions & 2 deletions docs/src/pages/components/alert/IconAlerts.js
View file
Original file line number Diff line number Diff line change
@@ -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>
4 changes: 2 additions & 2 deletions docs/src/pages/components/alert/IconAlerts.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
8 changes: 4 additions & 4 deletions docs/src/pages/components/alert/OutlinedAlerts.js
View file
Original file line number Diff line number Diff line change
@@ -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>
8 changes: 4 additions & 4 deletions docs/src/pages/components/alert/OutlinedAlerts.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
8 changes: 4 additions & 4 deletions docs/src/pages/components/alert/SimpleAlerts.js
View file
Original file line number Diff line number Diff line change
@@ -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>
);
}
8 changes: 4 additions & 4 deletions docs/src/pages/components/alert/SimpleAlerts.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
}
6 changes: 6 additions & 0 deletions docs/src/pages/components/alert/alert.md
View file
Original file line number Diff line number Diff line change
@@ -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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be helpful to distinguish between an alert, a snackbar and a toast. The linked demo refers to it as a customized snackbar.

The MD guidelines use a different hierarchy and naming convention:

image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As far as I know, a toast === a snackbar in the standard language.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In that case the description is tautological.

That table reminds me though - shouldn't this component support the Banner use case, possibly as the default?


## 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)
8 changes: 6 additions & 2 deletions packages/material-ui-lab/src/Alert/Alert.d.ts
View file
Original file line number Diff line number Diff line change
@@ -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';
}
19 changes: 14 additions & 5 deletions packages/material-ui-lab/src/Alert/Alert.js
View file
Original file line number Diff line number Diff line change
@@ -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']),
};