Skip to content

Commit 8bbebeb

Browse files
oliviertassinarioliviertassinari
committed
Matt review
1 parent 6def062 commit 8bbebeb

File tree

17 files changed

+117
-47
lines changed

17 files changed

+117
-47
lines changed

‎docs/pages/api/alert.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,13 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
2828
| <span class="prop-name">children</span> | <span class="prop-type">node</span> | | The content of the component. |
2929
| <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. |
3030
| <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/). |
31-
| <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. |
31+
| <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. |
3232
| <span class="prop-name">icon</span> | <span class="prop-type">node</span> | | The icon element placed before the children. |
33-
| <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. |
33+
| <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. |
3434
| <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. |
3535
| <span class="prop-name">role</span> | <span class="prop-type">string</span> | <span class="prop-default">'alert'</span> | The role attribute of the element. |
36-
| <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. |
36+
| <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. |
37+
| <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. |
3738

3839
The `ref` is forwarded to the root element.
3940

‎docs/pages/api/snackbar-content.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
2424

2525
| Name | Type | Default | Description |
2626
|:-----|:-----|:--------|:------------|
27-
| <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. |
27+
| <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. |
2828
| <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. |
2929
| <span class="prop-name">message</span> | <span class="prop-type">node</span> | | The message to display. |
3030
| <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. |

‎docs/src/pages/components/alert/ColorAlerts.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import { Alert } from '@material-ui/lab';
4+
5+
const useStyles = makeStyles(theme => ({
6+
root: {
7+
width: '100%',
8+
'& > * + *': {
9+
marginTop: theme.spacing(2),
10+
},
11+
},
12+
}));
13+
14+
export default function ColorAlerts() {
15+
const classes = useStyles();
16+
17+
return (
18+
<div className={classes.root}>
19+
<Alert severity="success" color="info">
20+
This is a success alert—check it out!
21+
</Alert>
22+
</div>
23+
);
24+
}

‎docs/src/pages/components/alert/ColorAlerts.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
3+
import { Alert } from '@material-ui/lab';
4+
5+
const useStyles = makeStyles((theme: Theme) =>
6+
createStyles({
7+
root: {
8+
width: '100%',
9+
'& > * + *': {
10+
marginTop: theme.spacing(2),
11+
},
12+
},
13+
}),
14+
);
15+
16+
export default function ColorAlerts() {
17+
const classes = useStyles();
18+
19+
return (
20+
<div className={classes.root}>
21+
<Alert severity="success" color="info">
22+
This is a success alert—check it out!
23+
</Alert>
24+
</div>
25+
);
26+
}

‎docs/src/pages/components/alert/DescriptionAlerts.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,19 @@ export default function DescriptionAlerts() {
1616

1717
return (
1818
<div className={classes.root}>
19-
<Alert color="error">
19+
<Alert severity="error">
2020
<AlertTitle>Error</AlertTitle>
2121
This is an error alert—check it out!
2222
</Alert>
23-
<Alert color="warning">
23+
<Alert severity="warning">
2424
<AlertTitle>Warning</AlertTitle>
2525
This is a warning alert—check it out!
2626
</Alert>
27-
<Alert color="info">
27+
<Alert severity="info">
2828
<AlertTitle>Info</AlertTitle>
2929
This is an info alert—check it out!
3030
</Alert>
31-
<Alert color="success">
31+
<Alert severity="success">
3232
<AlertTitle>Success</AlertTitle>
3333
This is a success alert—check it out!
3434
</Alert>

‎docs/src/pages/components/alert/DescriptionAlerts.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,19 @@ export default function DescriptionAlerts() {
1818

1919
return (
2020
<div className={classes.root}>
21-
<Alert color="error">
21+
<Alert severity="error">
2222
<AlertTitle>Error</AlertTitle>
2323
This is an error alert—check it out!
2424
</Alert>
25-
<Alert color="warning">
25+
<Alert severity="warning">
2626
<AlertTitle>Warning</AlertTitle>
2727
This is a warning alert—check it out!
2828
</Alert>
29-
<Alert color="info">
29+
<Alert severity="info">
3030
<AlertTitle>Info</AlertTitle>
3131
This is an info alert—check it out!
3232
</Alert>
33-
<Alert color="success">
33+
<Alert severity="success">
3434
<AlertTitle>Success</AlertTitle>
3535
This is a success alert—check it out!
3636
</Alert>

‎docs/src/pages/components/alert/FilledAlerts.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,16 @@ export default function SimpleAlerts() {
1616

1717
return (
1818
<div className={classes.root}>
19-
<Alert variant="filled" color="error">
19+
<Alert variant="filled" severity="error">
2020
This is an error alert—check it out!
2121
</Alert>
22-
<Alert variant="filled" color="warning">
22+
<Alert variant="filled" severity="warning">
2323
This is a warning alert—check it out!
2424
</Alert>
25-
<Alert variant="filled" color="info">
25+
<Alert variant="filled" severity="info">
2626
This is an info alert—check it out!
2727
</Alert>
28-
<Alert variant="filled" color="success">
28+
<Alert variant="filled" severity="success">
2929
This is a success alert—check it out!
3030
</Alert>
3131
</div>

‎docs/src/pages/components/alert/FilledAlerts.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,16 @@ export default function SimpleAlerts() {
1818

1919
return (
2020
<div className={classes.root}>
21-
<Alert variant="filled" color="error">
21+
<Alert variant="filled" severity="error">
2222
This is an error alert—check it out!
2323
</Alert>
24-
<Alert variant="filled" color="warning">
24+
<Alert variant="filled" severity="warning">
2525
This is a warning alert—check it out!
2626
</Alert>
27-
<Alert variant="filled" color="info">
27+
<Alert variant="filled" severity="info">
2828
This is an info alert—check it out!
2929
</Alert>
30-
<Alert variant="filled" color="success">
30+
<Alert variant="filled" severity="success">
3131
This is a success alert—check it out!
3232
</Alert>
3333
</div>

‎docs/src/pages/components/alert/IconAlerts.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,13 @@ export default function IconAlerts() {
1818

1919
return (
2020
<div className={classes.root}>
21-
<Alert icon={<CheckIcon fontSize="inherit" />} color="success">
21+
<Alert icon={<CheckIcon fontSize="inherit" />} severity="success">
2222
This is a success alert—check it out!
2323
</Alert>
2424
<Alert iconMapping={{ success: <CheckCircleOutlineIcon fontSize="inherit" /> }}>
2525
This is a success alert—check it out!
2626
</Alert>
27-
<Alert icon={false} color="success">
27+
<Alert icon={false} severity="success">
2828
This is a success alert—check it out!
2929
</Alert>
3030
</div>

‎docs/src/pages/components/alert/IconAlerts.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,13 @@ export default function IconAlerts() {
2020

2121
return (
2222
<div className={classes.root}>
23-
<Alert icon={<CheckIcon fontSize="inherit" />} color="success">
23+
<Alert icon={<CheckIcon fontSize="inherit" />} severity="success">
2424
This is a success alert—check it out!
2525
</Alert>
2626
<Alert iconMapping={{ success: <CheckCircleOutlineIcon fontSize="inherit" /> }}>
2727
This is a success alert—check it out!
2828
</Alert>
29-
<Alert icon={false} color="success">
29+
<Alert icon={false} severity="success">
3030
This is a success alert—check it out!
3131
</Alert>
3232
</div>

0 commit comments

Comments
 (0)