From f77ae3a59203eeb3701c0a62111b7dcc31cec28e Mon Sep 17 00:00:00 2001 From: Dimitri Mitropoulos Date: Sat, 21 Dec 2019 18:53:33 -0500 Subject: [PATCH 01/12] [Alert] implements Alert component --- docs/pages/api/alert-actions.js | 7 + docs/pages/api/alert-actions.md | 49 ++++++ docs/pages/api/alert-content.js | 7 + docs/pages/api/alert-content.md | 48 ++++++ docs/pages/api/alert-title.js | 7 + docs/pages/api/alert-title.md | 48 ++++++ docs/pages/api/alert.js | 7 + docs/pages/api/alert.md | 63 ++++++++ docs/pages/components/alert.js | 14 ++ docs/src/pages.js | 1 + .../src/pages/components/alert/SimpleAlert.js | 69 ++++++++ .../pages/components/alert/SimpleAlert.tsx | 63 ++++++++ docs/src/pages/components/alert/alert.md | 14 ++ .../pages/discover-more/roadmap/roadmap.md | 2 +- packages/material-ui-lab/src/Alert/Alert.d.ts | 40 +++++ packages/material-ui-lab/src/Alert/Alert.js | 153 ++++++++++++++++++ .../material-ui-lab/src/Alert/Alert.test.js | 19 +++ packages/material-ui-lab/src/Alert/index.d.ts | 2 + packages/material-ui-lab/src/Alert/index.js | 1 + .../src/AlertActions/AlertActions.d.ts | 11 ++ .../src/AlertActions/AlertActions.js | 57 +++++++ .../src/AlertActions/AlertActions.test.js | 26 +++ .../src/AlertActions/index.d.ts | 2 + .../material-ui-lab/src/AlertActions/index.js | 1 + .../src/AlertContent/AlertContent.d.ts | 11 ++ .../src/AlertContent/AlertContent.js | 49 ++++++ .../src/AlertContent/AlertContent.test.js | 26 +++ .../src/AlertContent/index.d.ts | 2 + .../material-ui-lab/src/AlertContent/index.js | 1 + .../src/AlertTitle/AlertTitle.d.ts | 9 ++ .../src/AlertTitle/AlertTitle.js | 44 +++++ .../src/AlertTitle/AlertTitle.test.js | 26 +++ .../material-ui-lab/src/AlertTitle/index.d.ts | 2 + .../material-ui-lab/src/AlertTitle/index.js | 1 + packages/material-ui-lab/src/index.d.ts | 12 ++ packages/material-ui-lab/src/index.js | 12 ++ .../src/internal/svg-icons/CheckCircle.js | 9 ++ .../src/internal/svg-icons/Error.js | 9 ++ .../src/internal/svg-icons/Info.js | 9 ++ .../src/internal/svg-icons/Warning.js | 9 ++ .../src/internal/svg-icons/Close.js | 10 ++ 41 files changed, 951 insertions(+), 1 deletion(-) create mode 100644 docs/pages/api/alert-actions.js create mode 100644 docs/pages/api/alert-actions.md create mode 100644 docs/pages/api/alert-content.js create mode 100644 docs/pages/api/alert-content.md create mode 100644 docs/pages/api/alert-title.js create mode 100644 docs/pages/api/alert-title.md create mode 100644 docs/pages/api/alert.js create mode 100644 docs/pages/api/alert.md create mode 100644 docs/pages/components/alert.js create mode 100644 docs/src/pages/components/alert/SimpleAlert.js create mode 100644 docs/src/pages/components/alert/SimpleAlert.tsx create mode 100644 docs/src/pages/components/alert/alert.md create mode 100644 packages/material-ui-lab/src/Alert/Alert.d.ts create mode 100644 packages/material-ui-lab/src/Alert/Alert.js create mode 100644 packages/material-ui-lab/src/Alert/Alert.test.js create mode 100644 packages/material-ui-lab/src/Alert/index.d.ts create mode 100644 packages/material-ui-lab/src/Alert/index.js create mode 100644 packages/material-ui-lab/src/AlertActions/AlertActions.d.ts create mode 100644 packages/material-ui-lab/src/AlertActions/AlertActions.js create mode 100644 packages/material-ui-lab/src/AlertActions/AlertActions.test.js create mode 100644 packages/material-ui-lab/src/AlertActions/index.d.ts create mode 100644 packages/material-ui-lab/src/AlertActions/index.js create mode 100644 packages/material-ui-lab/src/AlertContent/AlertContent.d.ts create mode 100644 packages/material-ui-lab/src/AlertContent/AlertContent.js create mode 100644 packages/material-ui-lab/src/AlertContent/AlertContent.test.js create mode 100644 packages/material-ui-lab/src/AlertContent/index.d.ts create mode 100644 packages/material-ui-lab/src/AlertContent/index.js create mode 100644 packages/material-ui-lab/src/AlertTitle/AlertTitle.d.ts create mode 100644 packages/material-ui-lab/src/AlertTitle/AlertTitle.js create mode 100644 packages/material-ui-lab/src/AlertTitle/AlertTitle.test.js create mode 100644 packages/material-ui-lab/src/AlertTitle/index.d.ts create mode 100644 packages/material-ui-lab/src/AlertTitle/index.js create mode 100644 packages/material-ui-lab/src/internal/svg-icons/CheckCircle.js create mode 100644 packages/material-ui-lab/src/internal/svg-icons/Error.js create mode 100644 packages/material-ui-lab/src/internal/svg-icons/Info.js create mode 100644 packages/material-ui-lab/src/internal/svg-icons/Warning.js create mode 100644 packages/material-ui/src/internal/svg-icons/Close.js diff --git a/docs/pages/api/alert-actions.js b/docs/pages/api/alert-actions.js new file mode 100644 index 00000000000000..23c876ac384e7d --- /dev/null +++ b/docs/pages/api/alert-actions.js @@ -0,0 +1,7 @@ +import React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import markdown from './alert-actions.md'; + +export default function Page() { + return ; +} diff --git a/docs/pages/api/alert-actions.md b/docs/pages/api/alert-actions.md new file mode 100644 index 00000000000000..8c4dad4bb2bf8c --- /dev/null +++ b/docs/pages/api/alert-actions.md @@ -0,0 +1,49 @@ +--- +filename: /packages/material-ui-lab/src/AlertActions/AlertActions.js +--- + + + +# AlertActions API + +

The API documentation of the AlertActions React component. Learn more about the props and the CSS customization points.

+ +## Import + +```js +import AlertActions from '@material-ui/lab/AlertActions'; +// or +import { AlertActions } from '@material-ui/lab'; +``` + +You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). + + + +## Props + +| Name | Type | Default | Description | +|:-----|:-----|:--------|:------------| +| 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. | + +The `ref` is forwarded to the root element. + +Any other props supplied will be provided to the root element (native element). + +## CSS + +- Style sheet name: `MuiAlertActions`. +- Style sheet details: + +- `root` +- `spacing` + +You can override the style of the component thanks to one of these customization points: + +- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). +- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). +- With a theme and an [`overrides` property](/customization/globals/#css). + +If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/AlertActions/AlertActions.js) for more detail. + diff --git a/docs/pages/api/alert-content.js b/docs/pages/api/alert-content.js new file mode 100644 index 00000000000000..83d6486e419d4e --- /dev/null +++ b/docs/pages/api/alert-content.js @@ -0,0 +1,7 @@ +import React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import markdown from './alert-content.md'; + +export default function Page() { + return ; +} diff --git a/docs/pages/api/alert-content.md b/docs/pages/api/alert-content.md new file mode 100644 index 00000000000000..96279204634cda --- /dev/null +++ b/docs/pages/api/alert-content.md @@ -0,0 +1,48 @@ +--- +filename: /packages/material-ui-lab/src/AlertContent/AlertContent.js +--- + + + +# AlertContent API + +

The API documentation of the AlertContent React component. Learn more about the props and the CSS customization points.

+ +## Import + +```js +import AlertContent from '@material-ui/lab/AlertContent'; +// or +import { AlertContent } from '@material-ui/lab'; +``` + +You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). + + + +## Props + +| Name | Type | Default | Description | +|:-----|:-----|:--------|:------------| +| 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. | + +The `ref` is forwarded to the root element. + +Any other props supplied will be provided to the root element (native element). + +## CSS + +- Style sheet name: `MuiAlertContent`. +- Style sheet details: + +- `root` + +You can override the style of the component thanks to one of these customization points: + +- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). +- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). +- With a theme and an [`overrides` property](/customization/globals/#css). + +If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/AlertContent/AlertContent.js) for more detail. + diff --git a/docs/pages/api/alert-title.js b/docs/pages/api/alert-title.js new file mode 100644 index 00000000000000..0896cb155e02a6 --- /dev/null +++ b/docs/pages/api/alert-title.js @@ -0,0 +1,7 @@ +import React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import markdown from './alert-title.md'; + +export default function Page() { + return ; +} diff --git a/docs/pages/api/alert-title.md b/docs/pages/api/alert-title.md new file mode 100644 index 00000000000000..7e9fb91014c0e8 --- /dev/null +++ b/docs/pages/api/alert-title.md @@ -0,0 +1,48 @@ +--- +filename: /packages/material-ui-lab/src/AlertTitle/AlertTitle.js +--- + + + +# AlertTitle API + +

The API documentation of the AlertTitle React component. Learn more about the props and the CSS customization points.

+ +## Import + +```js +import AlertTitle from '@material-ui/lab/AlertTitle'; +// or +import { AlertTitle } from '@material-ui/lab'; +``` + +You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). + + + +## Props + +| Name | Type | Default | Description | +|:-----|:-----|:--------|:------------| +| 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. | + +The `ref` is forwarded to the root element. + +Any other props supplied will be provided to the root element (native element). + +## CSS + +- Style sheet name: `MuiAlertTitle`. +- Style sheet details: + +- `root` + +You can override the style of the component thanks to one of these customization points: + +- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). +- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). +- With a theme and an [`overrides` property](/customization/globals/#css). + +If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/AlertTitle/AlertTitle.js) for more detail. + diff --git a/docs/pages/api/alert.js b/docs/pages/api/alert.js new file mode 100644 index 00000000000000..fcdd8f0115652a --- /dev/null +++ b/docs/pages/api/alert.js @@ -0,0 +1,7 @@ +import React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import markdown from './alert.md'; + +export default function Page() { + return ; +} diff --git a/docs/pages/api/alert.md b/docs/pages/api/alert.md new file mode 100644 index 00000000000000..a72c5e83263a3a --- /dev/null +++ b/docs/pages/api/alert.md @@ -0,0 +1,63 @@ +--- +filename: /packages/material-ui-lab/src/Alert/Alert.js +--- + + + +# Alert API + +

The API documentation of the Alert React component. Learn more about the props and the CSS customization points.

+ +## Import + +```js +import Alert from '@material-ui/lab/Alert'; +// or +import { Alert } from '@material-ui/lab'; +``` + +You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). + + + +## Props + +| Name | Type | Default | Description | +|:-----|:-----|:--------|:------------| +| 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. | +| closeIcon | node | <Close /> | Element placed before the children. | +| onClose | func | | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | +| startIcon | node | | Element placed before the children. | +| type | 'success'
| 'info'
| 'warning'
| 'error' | 'info' | The type of Alert | + +The component cannot hold a ref. + +Any other props supplied will be provided to the root element (native element). + +## CSS + +- Style sheet name: `MuiAlert`. +- Style sheet details: + +- `root` +- `alertContent` +- `startIcon` +- `closeIcon` +- `success` +- `info` +- `warning` +- `error` + +You can override the style of the component thanks to one of these customization points: + +- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). +- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). +- With a theme and an [`overrides` property](/customization/globals/#css). + +If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/Alert/Alert.js) for more detail. + +## Demos + +- [Alert](/components/alert/) + diff --git a/docs/pages/components/alert.js b/docs/pages/components/alert.js new file mode 100644 index 00000000000000..1c1d3edeb687cf --- /dev/null +++ b/docs/pages/components/alert.js @@ -0,0 +1,14 @@ +import React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; + +const req = require.context('docs/src/pages/components/alert', false, /\.(md|js|tsx)$/); +const reqSource = require.context( + '!raw-loader!../../src/pages/components/alert', + false, + /\.(js|tsx)$/, +); +const reqPrefix = 'pages/components/alert'; + +export default function Page() { + return ; +} diff --git a/docs/src/pages.js b/docs/src/pages.js index 6fc2eb0c5fe8fd..1ffc153fd34999 100644 --- a/docs/src/pages.js +++ b/docs/src/pages.js @@ -114,6 +114,7 @@ const pages = [ subheader: '/components/lab', children: [ { pathname: '/components/about-the-lab' }, + { pathname: '/components/alert' }, { pathname: '/components/autocomplete' }, { pathname: '/components/rating' }, { pathname: '/components/skeleton' }, diff --git a/docs/src/pages/components/alert/SimpleAlert.js b/docs/src/pages/components/alert/SimpleAlert.js new file mode 100644 index 00000000000000..2b5518962a7936 --- /dev/null +++ b/docs/src/pages/components/alert/SimpleAlert.js @@ -0,0 +1,69 @@ +import React from 'react'; +import { Box } from '@material-ui/core'; +import { Alert as MuiAlert, AlertTitle, AlertContent } from '@material-ui/lab'; +import { withStyles } from '@material-ui/styles'; + +/* eslint-disable react/jsx-filename-extension */ + +const Wrapper = withStyles({ + root: { + display: 'flex', + flexDirection: 'column', + }, +})(Box); + +const Alert = withStyles({ + root: { + marginBottom: '1em', + }, +})(MuiAlert); + +/* + commented out while we figure out https://github.com/mui-org/material-ui/issues/13875 + + + + + + */ + +export default function SimpleAlert() { + const onClose = () => { + console.log('TEMP: clicking close'); + }; + + return ( + + + Error! + Your request for the ultimate cup of coffee has been denied! + + + + Warning! + + This is a warning that Captain Spectacular has set a course to the benevolent hive mine 9! + + + + + Informational Notes + + Modular forms and elliptic curves! Infinite fire revolving around infinite parallels. + Fractals of infinite reality, each cascading, gliding in an infinite wheel. + + + + + Success! + + You fetched the ultimate cup of coffee in less than five Earth minutes! + + + + ); +} diff --git a/docs/src/pages/components/alert/SimpleAlert.tsx b/docs/src/pages/components/alert/SimpleAlert.tsx new file mode 100644 index 00000000000000..1f86a61f8e552b --- /dev/null +++ b/docs/src/pages/components/alert/SimpleAlert.tsx @@ -0,0 +1,63 @@ +import React from 'react'; +import { Box } from '@material-ui/core'; +import { Alert as MuiAlert, AlertTitle, AlertContent } from '@material-ui/lab'; +import { withStyles } from '@material-ui/styles'; + +/* eslint-disable react/jsx-filename-extension */ + +const Wrapper = withStyles({ + root: { + display: 'flex', + flexDirection: 'column', + }, +})(Box); + +const Alert = withStyles({ + root: { + marginBottom: '1em', + } +})(MuiAlert); + +/* + commented out while we figure out https://github.com/mui-org/material-ui/issues/13875 + + + + + +*/ + +export default function SimpleAlert() { + const onClose = () => { + console.log('TEMP: clicking close'); + }; + + return ( + + + Error! + Your request for the ultimate cup of coffee has been denied! + + + + Warning! + This is a warning that Captain Spectacular has set a course to the benevolent hive mine 9! + + + + Informational Notes + Modular forms and elliptic curves! Infinite fire revolving around infinite parallels. Fractals of infinite reality, each cascading, gliding in an infinite wheel. + + + + Success! + You fetched the ultimate cup of coffee in less than five Earth minutes! + + + + ); +} diff --git a/docs/src/pages/components/alert/alert.md b/docs/src/pages/components/alert/alert.md new file mode 100644 index 00000000000000..d572e0348e5d0a --- /dev/null +++ b/docs/src/pages/components/alert/alert.md @@ -0,0 +1,14 @@ +--- +title: Alert React component +components: Alert +--- + +# Alert + +

An alert displays a prominent message and related optional actions.

+ +## Simple Alerts + +Examples of Alerts containing text, using primary and secondary colors. The Alert is applied to its children. + +{{"demo": "pages/components/alert/SimpleAlert.js"}} diff --git a/docs/src/pages/discover-more/roadmap/roadmap.md b/docs/src/pages/discover-more/roadmap/roadmap.md index 905a63c025f2ae..766b7aee6e5d40 100644 --- a/docs/src/pages/discover-more/roadmap/roadmap.md +++ b/docs/src/pages/discover-more/roadmap/roadmap.md @@ -68,9 +68,9 @@ Here are the components we will work on being supported in the Material-UI ecosy | Autocomplete | 🧪 | | Combo Box | 🧪 | | Multiselect | 🧪 | +| Alert | 🧪 | | Date Picker (& range) | 🛠 | | Data Table | 🛠⭐️ | -| Alert | ⏳ | | Carousel | ⏳ | | Dropdown | ⏳ | | Dropzone | ⏳ | diff --git a/packages/material-ui-lab/src/Alert/Alert.d.ts b/packages/material-ui-lab/src/Alert/Alert.d.ts new file mode 100644 index 00000000000000..113e6aefcaa0f7 --- /dev/null +++ b/packages/material-ui-lab/src/Alert/Alert.d.ts @@ -0,0 +1,40 @@ +import * as React from 'react'; +import { StandardProps } from '@material-ui/core'; + +export interface AlertProps + extends StandardProps, AlertClassKey> { + /** + * Element placed before the children. + */ + closeIcon?: React.ReactNode, + /* + * Main color for the Alert, picked from theme palette + */ + color?: 'primary' | 'secondary' | 'error'; + /* + * Elevation property that is passed to underlying Paper component + */ + elevation?: number; + /** + * Callback fired when the component requests to be closed. + * + * @param {object} event The event source of the callback. + */ + onClose?: (event: React.SyntheticEvent) => void, + /** + * Element placed before the children. + */ + startIcon?: React.ReactNode | false, + /** + * The type of Alert + */ + type?: 'success' | 'info' | 'warning' | 'error'; + /* + * The variant of the Alert + */ + variant?: 'text' | 'filled' | 'outline' | 'banner'; +} + +export type AlertClassKey = 'root'; + +export default function Alert(props: AlertProps): JSX.Element; diff --git a/packages/material-ui-lab/src/Alert/Alert.js b/packages/material-ui-lab/src/Alert/Alert.js new file mode 100644 index 00000000000000..ca42f8213a4e1b --- /dev/null +++ b/packages/material-ui-lab/src/Alert/Alert.js @@ -0,0 +1,153 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; +import { withStyles, lighten } from '@material-ui/core/styles'; +import Close from '../internal/svg-icons/Close'; +import { IconButton } from '@material-ui/core'; +import CheckCircle from '../internal/svg-icons/CheckCircle'; +import Warning from '../internal/svg-icons/Warning'; +import Error from '../internal/svg-icons/Error'; +import Info from '../internal/svg-icons/Info'; +import { green, orange, red } from '@material-ui/core/colors'; + +export const styles = theme => ({ + root: { + borderWidth: 1, + borderStyle: 'solid', + borderRadius: theme.shape.borderRadius, + position: 'relative', + display: 'flex', + alignItems: 'center', + padding: '1em 0', + maxWidth: 800, + }, + alertContent: { + display: 'flex', + flexGrow: 1, + flexDirection: 'column', + padding: '0 1em', + }, + startIcon: { + marginTop: '0.25em', + marginRight: '-1em', + padding: '0 1em', + alignSelf: 'flex-start', + }, + closeIcon: { + marginTop: '-0.5em', + alignSelf: 'flex-start', + }, + success: { + // THESE COLORS ARE STUBBED WHILE https://github.com/mui-org/material-ui/issues/13875 gets done + color: green[600], + borderColor: green[600], + backgroundColor: lighten(green[600], 0.95), + }, + info: { + // THESE COLORS ARE STUBBED WHILE https://github.com/mui-org/material-ui/issues/13875 gets done + color: theme.palette.primary.main, + borderColor: theme.palette.primary.main, + backgroundColor: lighten(theme.palette.primary.main, 0.95), + }, + warning: { + // THESE COLORS ARE STUBBED WHILE https://github.com/mui-org/material-ui/issues/13875 gets done + color: orange[600], + borderColor: orange[600], + backgroundColor: lighten(orange[600], 0.95), + }, + error: { + // THESE COLORS ARE STUBBED WHILE https://github.com/mui-org/material-ui/issues/13875 gets done + color: red[600], + borderColor: red[600], + backgroundColor: lighten(red[600], 0.95), + }, +}); + +const getDefaultIcon = (type) => { + switch (type) { + case 'success': + return ; + + case 'warning': + return ; + + case 'error': + return ; + + default: + case 'info': + return ; + } +} + +const Alert = React.forwardRef(function Alert(props, ref) { + const { + children, + className, + classes, + closeIcon: closeIconProp = , + onClose, + startIcon: startIconProp, + type = 'info', + } = props; + + const startIcon = startIconProp !== false && ( + + {startIconProp || getDefaultIcon(type)} + + ); + + const closeIcon = onClose && ( + + {closeIconProp} + + ); + + return ( +
+ {startIcon} +
{children}
+ {closeIcon} +
+ ); +}); + +Alert.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- + /** + * The content of the component. + */ + children: PropTypes.node, + /** + * Override or extend the styles applied to the component. + * See [CSS API](#css) below for more details. + */ + classes: PropTypes.object, + /** + * @ignore + */ + className: PropTypes.string, + /** + * Element placed before the children. + */ + closeIcon: PropTypes.node, + /** + * Callback fired when the component requests to be closed. + * + * @param {object} event The event source of the callback. + */ + onClose: PropTypes.func, + /** + * Element placed before the children. + */ + startIcon: PropTypes.node, + /** + * The type of Alert + */ + type: PropTypes.oneOf(['success', 'info', 'warning', 'error']), +}; + +export default withStyles(styles, { name: 'MuiAlert' })(Alert); diff --git a/packages/material-ui-lab/src/Alert/Alert.test.js b/packages/material-ui-lab/src/Alert/Alert.test.js new file mode 100644 index 00000000000000..5f1f50b0fadc6b --- /dev/null +++ b/packages/material-ui-lab/src/Alert/Alert.test.js @@ -0,0 +1,19 @@ +import React from 'react'; +import { expect } from 'chai'; +import { createClientRender } from 'test/utils/createClientRender'; +import Alert from './Alert'; + +describe('', () => { + const render = createClientRender({ strict: true }); + let classes; + const defaultProps = { + name: 'alert-test', + value: 2, + }; + + it('should render', () => { + const { container } = render(); + + expect(container.firstChild).to.not.have.class(classes.root); + }); +}); diff --git a/packages/material-ui-lab/src/Alert/index.d.ts b/packages/material-ui-lab/src/Alert/index.d.ts new file mode 100644 index 00000000000000..f8bf7e6b67860c --- /dev/null +++ b/packages/material-ui-lab/src/Alert/index.d.ts @@ -0,0 +1,2 @@ +export { default } from './Alert'; +export * from './Alert'; diff --git a/packages/material-ui-lab/src/Alert/index.js b/packages/material-ui-lab/src/Alert/index.js new file mode 100644 index 00000000000000..becaea750b71e9 --- /dev/null +++ b/packages/material-ui-lab/src/Alert/index.js @@ -0,0 +1 @@ +export { default } from './Alert'; diff --git a/packages/material-ui-lab/src/AlertActions/AlertActions.d.ts b/packages/material-ui-lab/src/AlertActions/AlertActions.d.ts new file mode 100644 index 00000000000000..1e4531e135a813 --- /dev/null +++ b/packages/material-ui-lab/src/AlertActions/AlertActions.d.ts @@ -0,0 +1,11 @@ +import * as React from 'react'; +import { StandardProps } from '@material-ui/core'; + +export interface AlertActionsProps + extends StandardProps, AlertActionsClassKey> { + disableSpacing?: boolean; +} + +export type AlertActionsClassKey = 'root'; + +export default function AlertActions(props: AlertActionsProps): JSX.Element; diff --git a/packages/material-ui-lab/src/AlertActions/AlertActions.js b/packages/material-ui-lab/src/AlertActions/AlertActions.js new file mode 100644 index 00000000000000..307e70f6c59f71 --- /dev/null +++ b/packages/material-ui-lab/src/AlertActions/AlertActions.js @@ -0,0 +1,57 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import clsx from 'clsx'; + +export const styles = () => ({ + root: { + paddingTop: '1em', + display: 'flex', + alignItems: 'center', + justifyContent: 'flex-start', + flex: '0 0 auto', + }, + /** Styles applied to the root element if `disableSpacing={false}`. */ + spacing: { + '& > :not(:first-child)': { + marginLeft: 8, + }, + }, +}); + +const AlertActions = React.forwardRef(function AlertActions(props, ref) { + const { classes, className, disableSpacing, ...other } = props; + return ( +
+ ); +}); + +AlertActions.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- + /** + * The content of the component. + */ + children: PropTypes.node, + /** + * Override or extend the styles applied to the component. + * See [CSS API](#css) below for more details. + */ + classes: PropTypes.object, + /** + * @ignore + */ + className: PropTypes.string, + /** + * @ignore + */ + disableSpacing: PropTypes.bool, +}; + +export default withStyles(styles, { name: 'MuiAlertActions' })(AlertActions); diff --git a/packages/material-ui-lab/src/AlertActions/AlertActions.test.js b/packages/material-ui-lab/src/AlertActions/AlertActions.test.js new file mode 100644 index 00000000000000..97ff561effe590 --- /dev/null +++ b/packages/material-ui-lab/src/AlertActions/AlertActions.test.js @@ -0,0 +1,26 @@ +import React from 'react'; +import { createMount, getClasses } from '@material-ui/core/test-utils'; +import describeConformance from '@material-ui/core/test-utils/describeConformance'; +import AlertActions from './AlertActions'; + +describe('', () => { + let mount; + let classes; + + before(() => { + mount = createMount({ strict: true }); + classes = getClasses(); + }); + + after(() => { + mount.cleanUp(); + }); + + describeConformance(, () => ({ + classes, + inheritComponent: 'div', + mount, + refInstanceof: window.HTMLDivElement, + skip: ['componentProp'], + })); +}); diff --git a/packages/material-ui-lab/src/AlertActions/index.d.ts b/packages/material-ui-lab/src/AlertActions/index.d.ts new file mode 100644 index 00000000000000..9550647bb1e407 --- /dev/null +++ b/packages/material-ui-lab/src/AlertActions/index.d.ts @@ -0,0 +1,2 @@ +export { default } from './AlertActions'; +export * from './AlertActions'; diff --git a/packages/material-ui-lab/src/AlertActions/index.js b/packages/material-ui-lab/src/AlertActions/index.js new file mode 100644 index 00000000000000..3a5677aa9df769 --- /dev/null +++ b/packages/material-ui-lab/src/AlertActions/index.js @@ -0,0 +1 @@ +export { default } from './AlertActions'; diff --git a/packages/material-ui-lab/src/AlertContent/AlertContent.d.ts b/packages/material-ui-lab/src/AlertContent/AlertContent.d.ts new file mode 100644 index 00000000000000..69cad433d6e147 --- /dev/null +++ b/packages/material-ui-lab/src/AlertContent/AlertContent.d.ts @@ -0,0 +1,11 @@ +import * as React from 'react'; +import { StandardProps } from '@material-ui/core'; + +export interface AlertContentProps + extends StandardProps, AlertContentClassKey> { + variant?: 'text' | 'container'; +} + +export type AlertContentClassKey = 'root'; + +export default function AlertContent(props: AlertContentProps): JSX.Element; diff --git a/packages/material-ui-lab/src/AlertContent/AlertContent.js b/packages/material-ui-lab/src/AlertContent/AlertContent.js new file mode 100644 index 00000000000000..40012187907944 --- /dev/null +++ b/packages/material-ui-lab/src/AlertContent/AlertContent.js @@ -0,0 +1,49 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Typography } from '@material-ui/core'; +import clsx from 'clsx'; + +export const styles = () => ({ + root: { + padding: 0, + }, +}); + +const AlertContent = React.forwardRef(function AlertContent(props, ref) { + const { classes, children, className, variant = 'text' } = props; + + const content = variant === 'text' ? {children} : children; + + return ( +
+ {content} +
+ ); +}); + +AlertContent.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- + /** + * The content of the component. + */ + children: PropTypes.node, + /** + * Override or extend the styles applied to the component. + * See [CSS API](#css) below for more details. + */ + classes: PropTypes.object, + /** + * @ignore + */ + className: PropTypes.string, + /** + * @ignore + */ + variant: PropTypes.oneOf(['container', 'text']), +}; + +export default withStyles(styles, { name: 'MuiAlertContent' })(AlertContent); diff --git a/packages/material-ui-lab/src/AlertContent/AlertContent.test.js b/packages/material-ui-lab/src/AlertContent/AlertContent.test.js new file mode 100644 index 00000000000000..bb6e6a2a96df1f --- /dev/null +++ b/packages/material-ui-lab/src/AlertContent/AlertContent.test.js @@ -0,0 +1,26 @@ +import React from 'react'; +import { createMount, getClasses } from '@material-ui/core/test-utils'; +import describeConformance from '@material-ui/core/test-utils/describeConformance'; +import AlertContent from './AlertContent'; + +describe('', () => { + let mount; + let classes; + + before(() => { + mount = createMount({ strict: true }); + classes = getClasses(); + }); + + after(() => { + mount.cleanUp(); + }); + + describeConformance(, () => ({ + classes, + inheritComponent: 'div', + mount, + refInstanceof: window.HTMLDivElement, + skip: ['componentProp'], + })); +}); diff --git a/packages/material-ui-lab/src/AlertContent/index.d.ts b/packages/material-ui-lab/src/AlertContent/index.d.ts new file mode 100644 index 00000000000000..722d9d0f4a0da8 --- /dev/null +++ b/packages/material-ui-lab/src/AlertContent/index.d.ts @@ -0,0 +1,2 @@ +export { default } from './AlertContent'; +export * from './AlertContent'; diff --git a/packages/material-ui-lab/src/AlertContent/index.js b/packages/material-ui-lab/src/AlertContent/index.js new file mode 100644 index 00000000000000..d43fa30432cdc7 --- /dev/null +++ b/packages/material-ui-lab/src/AlertContent/index.js @@ -0,0 +1 @@ +export { default } from './AlertContent'; diff --git a/packages/material-ui-lab/src/AlertTitle/AlertTitle.d.ts b/packages/material-ui-lab/src/AlertTitle/AlertTitle.d.ts new file mode 100644 index 00000000000000..f1c7c6a3e21043 --- /dev/null +++ b/packages/material-ui-lab/src/AlertTitle/AlertTitle.d.ts @@ -0,0 +1,9 @@ +import * as React from 'react'; +import { StandardProps } from '@material-ui/core'; + +export interface AlertTitleProps + extends StandardProps, AlertTitleClassKey> { } + +export type AlertTitleClassKey = 'root'; + +export default function AlertTitle(props: AlertTitleProps): JSX.Element; diff --git a/packages/material-ui-lab/src/AlertTitle/AlertTitle.js b/packages/material-ui-lab/src/AlertTitle/AlertTitle.js new file mode 100644 index 00000000000000..4b5878f3300e80 --- /dev/null +++ b/packages/material-ui-lab/src/AlertTitle/AlertTitle.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Typography } from '@material-ui/core'; +import clsx from 'clsx'; + +export const styles = () => ({ + root: { + padding: '0', + }, +}); + +const AlertTitle = React.forwardRef(function AlertTitle(props, ref) { + const { classes, children, className } = props; + return ( +
+ + {children} + +
+ ); +}); + +AlertTitle.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- + /** + * The content of the component. + */ + children: PropTypes.node, + /** + * Override or extend the styles applied to the component. + * See [CSS API](#css) below for more details. + */ + classes: PropTypes.object, + /** + * @ignore + */ + className: PropTypes.string, +}; + +export default withStyles(styles, { name: 'MuiAlertTitle' })(AlertTitle); diff --git a/packages/material-ui-lab/src/AlertTitle/AlertTitle.test.js b/packages/material-ui-lab/src/AlertTitle/AlertTitle.test.js new file mode 100644 index 00000000000000..69edaab9f9503f --- /dev/null +++ b/packages/material-ui-lab/src/AlertTitle/AlertTitle.test.js @@ -0,0 +1,26 @@ +import React from 'react'; +import { createMount, getClasses } from '@material-ui/core/test-utils'; +import describeConformance from '@material-ui/core/test-utils/describeConformance'; +import AlertTitle from './AlertTitle'; + +describe('', () => { + let mount; + let classes; + + before(() => { + mount = createMount({ strict: true }); + classes = getClasses(); + }); + + after(() => { + mount.cleanUp(); + }); + + describeConformance(, () => ({ + classes, + inheritComponent: 'div', + mount, + refInstanceof: window.HTMLDivElement, + skip: ['componentProp'], + })); +}); diff --git a/packages/material-ui-lab/src/AlertTitle/index.d.ts b/packages/material-ui-lab/src/AlertTitle/index.d.ts new file mode 100644 index 00000000000000..92625eccbf49a6 --- /dev/null +++ b/packages/material-ui-lab/src/AlertTitle/index.d.ts @@ -0,0 +1,2 @@ +export { default } from './AlertTitle'; +export * from './AlertTitle'; diff --git a/packages/material-ui-lab/src/AlertTitle/index.js b/packages/material-ui-lab/src/AlertTitle/index.js new file mode 100644 index 00000000000000..5277f016a42856 --- /dev/null +++ b/packages/material-ui-lab/src/AlertTitle/index.js @@ -0,0 +1 @@ +export { default } from './AlertTitle'; diff --git a/packages/material-ui-lab/src/index.d.ts b/packages/material-ui-lab/src/index.d.ts index c39dc2b6a1545b..eef53fcc516f8f 100644 --- a/packages/material-ui-lab/src/index.d.ts +++ b/packages/material-ui-lab/src/index.d.ts @@ -1,3 +1,15 @@ +export { default as Alert } from './Alert'; +export * from './Alert'; + +export { default as AlertActions } from './AlertActions'; +export * from './AlertActions'; + +export { default as AlertContent } from './AlertContent'; +export * from './AlertContent'; + +export { default as AlertTitle } from './AlertTitle'; +export * from './AlertTitle'; + export { default as Autocomplete } from './Autocomplete'; export * from './Autocomplete'; diff --git a/packages/material-ui-lab/src/index.js b/packages/material-ui-lab/src/index.js index 4014dcac7ca134..2a3f864d1ef5ee 100644 --- a/packages/material-ui-lab/src/index.js +++ b/packages/material-ui-lab/src/index.js @@ -1,4 +1,16 @@ /* eslint-disable import/export */ +export { default as Alert } from './Alert'; +export * from './Alert'; + +export { default as AlertActions } from './AlertActions'; +export * from './AlertActions'; + +export { default as AlertContent } from './AlertContent'; +export * from './AlertContent'; + +export { default as AlertTitle } from './AlertTitle'; +export * from './AlertTitle'; + export { default as Autocomplete } from './Autocomplete'; export * from './Autocomplete'; diff --git a/packages/material-ui-lab/src/internal/svg-icons/CheckCircle.js b/packages/material-ui-lab/src/internal/svg-icons/CheckCircle.js new file mode 100644 index 00000000000000..2b1ab6ebde5f94 --- /dev/null +++ b/packages/material-ui-lab/src/internal/svg-icons/CheckCircle.js @@ -0,0 +1,9 @@ +import React from 'react'; +import createSvgIcon from './createSvgIcon'; + +/** + * @ignore - internal component. + */ +export default createSvgIcon( + + , 'CheckCircle'); diff --git a/packages/material-ui-lab/src/internal/svg-icons/Error.js b/packages/material-ui-lab/src/internal/svg-icons/Error.js new file mode 100644 index 00000000000000..97bf2624168fa3 --- /dev/null +++ b/packages/material-ui-lab/src/internal/svg-icons/Error.js @@ -0,0 +1,9 @@ +import React from 'react'; +import createSvgIcon from './createSvgIcon'; + +/** + * @ignore - internal component. + */ +export default createSvgIcon( + + , 'Error'); diff --git a/packages/material-ui-lab/src/internal/svg-icons/Info.js b/packages/material-ui-lab/src/internal/svg-icons/Info.js new file mode 100644 index 00000000000000..6b2cc42dce051d --- /dev/null +++ b/packages/material-ui-lab/src/internal/svg-icons/Info.js @@ -0,0 +1,9 @@ +import React from 'react'; +import createSvgIcon from './createSvgIcon'; + +/** + * @ignore - internal component. + */ +export default createSvgIcon( + + , 'Info'); diff --git a/packages/material-ui-lab/src/internal/svg-icons/Warning.js b/packages/material-ui-lab/src/internal/svg-icons/Warning.js new file mode 100644 index 00000000000000..6b171962fd6352 --- /dev/null +++ b/packages/material-ui-lab/src/internal/svg-icons/Warning.js @@ -0,0 +1,9 @@ +import React from 'react'; +import createSvgIcon from './createSvgIcon'; + +/** + * @ignore - internal component. + */ +export default createSvgIcon( + + , 'Warning'); diff --git a/packages/material-ui/src/internal/svg-icons/Close.js b/packages/material-ui/src/internal/svg-icons/Close.js new file mode 100644 index 00000000000000..7aa69da41d2786 --- /dev/null +++ b/packages/material-ui/src/internal/svg-icons/Close.js @@ -0,0 +1,10 @@ +import React from 'react'; +import createSvgIcon from './createSvgIcon'; + +/** + * @ignore - internal component. + */ +export default createSvgIcon( + + , 'Close'); + From 715ec5c6ec12cbcd3eccd5be8feb5fb90284de30 Mon Sep 17 00:00:00 2001 From: Michael Krasnov Date: Mon, 23 Dec 2019 16:49:02 -0500 Subject: [PATCH 02/12] Fixing issues from code review Fixing prettier issues Changing units from em to px Picking up additional colors from palette Refactored default icon lookup Refactored AlertTitle into rendering 1 DOM node --- .../src/pages/components/alert/SimpleAlert.js | 47 +++++++------- .../pages/components/alert/SimpleAlert.tsx | 45 +++++++------ packages/material-ui-lab/src/Alert/Alert.d.ts | 6 +- packages/material-ui-lab/src/Alert/Alert.js | 64 ++++++++----------- .../src/AlertActions/AlertActions.js | 2 +- .../src/AlertTitle/AlertTitle.d.ts | 2 +- .../src/AlertTitle/AlertTitle.js | 8 +-- .../src/internal/svg-icons/CheckCircle.js | 5 +- .../src/internal/svg-icons/Error.js | 5 +- .../src/internal/svg-icons/Info.js | 5 +- .../src/internal/svg-icons/Warning.js | 5 +- .../src/internal/svg-icons/Close.js | 6 +- 12 files changed, 95 insertions(+), 105 deletions(-) diff --git a/docs/src/pages/components/alert/SimpleAlert.js b/docs/src/pages/components/alert/SimpleAlert.js index 2b5518962a7936..9fe0d65e09e63d 100644 --- a/docs/src/pages/components/alert/SimpleAlert.js +++ b/docs/src/pages/components/alert/SimpleAlert.js @@ -1,43 +1,40 @@ import React from 'react'; import { Box } from '@material-ui/core'; -import { Alert as MuiAlert, AlertTitle, AlertContent } from '@material-ui/lab'; -import { withStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; +import { Alert, AlertTitle, AlertContent } from '@material-ui/lab'; /* eslint-disable react/jsx-filename-extension */ -const Wrapper = withStyles({ +const useStyles = makeStyles(theme => ({ root: { - display: 'flex', - flexDirection: 'column', + '& > * + *': { + marginTop: theme.spacing(2), + }, }, -})(Box); - -const Alert = withStyles({ - root: { - marginBottom: '1em', - }, -})(MuiAlert); +})); /* - commented out while we figure out https://github.com/mui-org/material-ui/issues/13875 - - - - - - */ + commented out while we figure out https://github.com/mui-org/material-ui/issues/13875 + + + + + + */ export default function SimpleAlert() { const onClose = () => { console.log('TEMP: clicking close'); }; + const classes = useStyles(); + return ( - + Error! Your request for the ultimate cup of coffee has been denied! @@ -64,6 +61,6 @@ export default function SimpleAlert() { You fetched the ultimate cup of coffee in less than five Earth minutes! - + ); } diff --git a/docs/src/pages/components/alert/SimpleAlert.tsx b/docs/src/pages/components/alert/SimpleAlert.tsx index 1f86a61f8e552b..3e459a24c6f7d3 100644 --- a/docs/src/pages/components/alert/SimpleAlert.tsx +++ b/docs/src/pages/components/alert/SimpleAlert.tsx @@ -1,22 +1,19 @@ import React from 'react'; import { Box } from '@material-ui/core'; -import { Alert as MuiAlert, AlertTitle, AlertContent } from '@material-ui/lab'; -import { withStyles } from '@material-ui/styles'; +import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import { Alert, AlertTitle, AlertContent } from '@material-ui/lab'; /* eslint-disable react/jsx-filename-extension */ -const Wrapper = withStyles({ - root: { - display: 'flex', - flexDirection: 'column', - }, -})(Box); - -const Alert = withStyles({ - root: { - marginBottom: '1em', - } -})(MuiAlert); +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + '& > * + *': { + marginTop: theme.spacing(2), + }, + }, + }), +); /* commented out while we figure out https://github.com/mui-org/material-ui/issues/13875 @@ -36,8 +33,10 @@ export default function SimpleAlert() { console.log('TEMP: clicking close'); }; + const classes = useStyles(); + return ( - + Error! Your request for the ultimate cup of coffee has been denied! @@ -45,19 +44,25 @@ export default function SimpleAlert() { Warning! - This is a warning that Captain Spectacular has set a course to the benevolent hive mine 9! + + This is a warning that Captain Spectacular has set a course to the benevolent hive mine 9! + Informational Notes - Modular forms and elliptic curves! Infinite fire revolving around infinite parallels. Fractals of infinite reality, each cascading, gliding in an infinite wheel. + + Modular forms and elliptic curves! Infinite fire revolving around infinite parallels. + Fractals of infinite reality, each cascading, gliding in an infinite wheel. + Success! - You fetched the ultimate cup of coffee in less than five Earth minutes! + + You fetched the ultimate cup of coffee in less than five Earth minutes! + - - + ); } diff --git a/packages/material-ui-lab/src/Alert/Alert.d.ts b/packages/material-ui-lab/src/Alert/Alert.d.ts index 113e6aefcaa0f7..c2626ca84fafcc 100644 --- a/packages/material-ui-lab/src/Alert/Alert.d.ts +++ b/packages/material-ui-lab/src/Alert/Alert.d.ts @@ -6,7 +6,7 @@ export interface AlertProps /** * Element placed before the children. */ - closeIcon?: React.ReactNode, + closeIcon?: React.ReactNode; /* * Main color for the Alert, picked from theme palette */ @@ -20,11 +20,11 @@ export interface AlertProps * * @param {object} event The event source of the callback. */ - onClose?: (event: React.SyntheticEvent) => void, + onClose?: (event: React.SyntheticEvent) => void; /** * Element placed before the children. */ - startIcon?: React.ReactNode | false, + startIcon?: React.ReactNode | false; /** * The type of Alert */ diff --git a/packages/material-ui-lab/src/Alert/Alert.js b/packages/material-ui-lab/src/Alert/Alert.js index ca42f8213a4e1b..8380ac46909f24 100644 --- a/packages/material-ui-lab/src/Alert/Alert.js +++ b/packages/material-ui-lab/src/Alert/Alert.js @@ -18,67 +18,53 @@ export const styles = theme => ({ position: 'relative', display: 'flex', alignItems: 'center', - padding: '1em 0', + padding: '16px 0', maxWidth: 800, }, alertContent: { display: 'flex', flexGrow: 1, flexDirection: 'column', - padding: '0 1em', + padding: '0 16px', }, startIcon: { - marginTop: '0.25em', - marginRight: '-1em', - padding: '0 1em', + marginTop: '4px', + marginRight: '-16px', + padding: '0 16px', alignSelf: 'flex-start', }, closeIcon: { - marginTop: '-0.5em', + marginTop: '-8px', alignSelf: 'flex-start', }, success: { - // THESE COLORS ARE STUBBED WHILE https://github.com/mui-org/material-ui/issues/13875 gets done - color: green[600], - borderColor: green[600], - backgroundColor: lighten(green[600], 0.95), + color: theme.palette.success.main, + borderColor: theme.palette.success.main, + backgroundColor: lighten(theme.palette.success.main, 0.95), }, info: { - // THESE COLORS ARE STUBBED WHILE https://github.com/mui-org/material-ui/issues/13875 gets done - color: theme.palette.primary.main, - borderColor: theme.palette.primary.main, - backgroundColor: lighten(theme.palette.primary.main, 0.95), + color: theme.palette.info.main, + borderColor: theme.palette.info.main, + backgroundColor: lighten(theme.palette.info.main, 0.95), }, warning: { - // THESE COLORS ARE STUBBED WHILE https://github.com/mui-org/material-ui/issues/13875 gets done - color: orange[600], - borderColor: orange[600], - backgroundColor: lighten(orange[600], 0.95), + color: theme.palette.warning.main, + borderColor: theme.palette.warning.main, + backgroundColor: lighten(theme.palette.warning.main, 0.95), }, error: { - // THESE COLORS ARE STUBBED WHILE https://github.com/mui-org/material-ui/issues/13875 gets done - color: red[600], - borderColor: red[600], - backgroundColor: lighten(red[600], 0.95), + color: theme.palette.error.main, + borderColor: theme.palette.error.main, + backgroundColor: lighten(theme.palette.error.main, 0.95), }, }); -const getDefaultIcon = (type) => { - switch (type) { - case 'success': - return ; - - case 'warning': - return ; - - case 'error': - return ; - - default: - case 'info': - return ; - } -} +const DEFAULT_ICONS = { + success: , + warning: , + error: , + info: , +}; const Alert = React.forwardRef(function Alert(props, ref) { const { @@ -93,7 +79,7 @@ const Alert = React.forwardRef(function Alert(props, ref) { const startIcon = startIconProp !== false && ( - {startIconProp || getDefaultIcon(type)} + {startIconProp || DEFAULT_ICONS[type]} ); diff --git a/packages/material-ui-lab/src/AlertActions/AlertActions.js b/packages/material-ui-lab/src/AlertActions/AlertActions.js index 307e70f6c59f71..01e93a3994b5d2 100644 --- a/packages/material-ui-lab/src/AlertActions/AlertActions.js +++ b/packages/material-ui-lab/src/AlertActions/AlertActions.js @@ -11,7 +11,7 @@ export const styles = () => ({ justifyContent: 'flex-start', flex: '0 0 auto', }, - /** Styles applied to the root element if `disableSpacing={false}`. */ + /* Styles applied to the root element if `disableSpacing={false}`. */ spacing: { '& > :not(:first-child)': { marginLeft: 8, diff --git a/packages/material-ui-lab/src/AlertTitle/AlertTitle.d.ts b/packages/material-ui-lab/src/AlertTitle/AlertTitle.d.ts index f1c7c6a3e21043..7e840cb29e6be8 100644 --- a/packages/material-ui-lab/src/AlertTitle/AlertTitle.d.ts +++ b/packages/material-ui-lab/src/AlertTitle/AlertTitle.d.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { StandardProps } from '@material-ui/core'; export interface AlertTitleProps - extends StandardProps, AlertTitleClassKey> { } + extends StandardProps, AlertTitleClassKey> {} export type AlertTitleClassKey = 'root'; diff --git a/packages/material-ui-lab/src/AlertTitle/AlertTitle.js b/packages/material-ui-lab/src/AlertTitle/AlertTitle.js index 4b5878f3300e80..86edf65aa93eb7 100644 --- a/packages/material-ui-lab/src/AlertTitle/AlertTitle.js +++ b/packages/material-ui-lab/src/AlertTitle/AlertTitle.js @@ -13,11 +13,9 @@ export const styles = () => ({ const AlertTitle = React.forwardRef(function AlertTitle(props, ref) { const { classes, children, className } = props; return ( -
- - {children} - -
+ + {children} + ); }); diff --git a/packages/material-ui-lab/src/internal/svg-icons/CheckCircle.js b/packages/material-ui-lab/src/internal/svg-icons/CheckCircle.js index 2b1ab6ebde5f94..6ef523ff974a32 100644 --- a/packages/material-ui-lab/src/internal/svg-icons/CheckCircle.js +++ b/packages/material-ui-lab/src/internal/svg-icons/CheckCircle.js @@ -5,5 +5,6 @@ import createSvgIcon from './createSvgIcon'; * @ignore - internal component. */ export default createSvgIcon( - - , 'CheckCircle'); + , + 'CheckCircle', +); diff --git a/packages/material-ui-lab/src/internal/svg-icons/Error.js b/packages/material-ui-lab/src/internal/svg-icons/Error.js index 97bf2624168fa3..9ce40dd4e2f585 100644 --- a/packages/material-ui-lab/src/internal/svg-icons/Error.js +++ b/packages/material-ui-lab/src/internal/svg-icons/Error.js @@ -5,5 +5,6 @@ import createSvgIcon from './createSvgIcon'; * @ignore - internal component. */ export default createSvgIcon( - - , 'Error'); + , + 'Error', +); diff --git a/packages/material-ui-lab/src/internal/svg-icons/Info.js b/packages/material-ui-lab/src/internal/svg-icons/Info.js index 6b2cc42dce051d..d0ab386af74a83 100644 --- a/packages/material-ui-lab/src/internal/svg-icons/Info.js +++ b/packages/material-ui-lab/src/internal/svg-icons/Info.js @@ -5,5 +5,6 @@ import createSvgIcon from './createSvgIcon'; * @ignore - internal component. */ export default createSvgIcon( - - , 'Info'); + , + 'Info', +); diff --git a/packages/material-ui-lab/src/internal/svg-icons/Warning.js b/packages/material-ui-lab/src/internal/svg-icons/Warning.js index 6b171962fd6352..7cb591bfe26ce2 100644 --- a/packages/material-ui-lab/src/internal/svg-icons/Warning.js +++ b/packages/material-ui-lab/src/internal/svg-icons/Warning.js @@ -5,5 +5,6 @@ import createSvgIcon from './createSvgIcon'; * @ignore - internal component. */ export default createSvgIcon( - - , 'Warning'); + , + 'Warning', +); diff --git a/packages/material-ui/src/internal/svg-icons/Close.js b/packages/material-ui/src/internal/svg-icons/Close.js index 7aa69da41d2786..47b725313e25e4 100644 --- a/packages/material-ui/src/internal/svg-icons/Close.js +++ b/packages/material-ui/src/internal/svg-icons/Close.js @@ -5,6 +5,6 @@ import createSvgIcon from './createSvgIcon'; * @ignore - internal component. */ export default createSvgIcon( - - , 'Close'); - + , + 'Close', +); From 7df7ce9bf85c3e3e0da90a2287e7f02dbcd0f435 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 24 Dec 2019 12:26:07 +0100 Subject: [PATCH 03/12] push one step further --- docs/pages/api/alert-actions.js | 7 - docs/pages/api/alert-actions.md | 49 ---- docs/pages/api/alert-content.js | 7 - docs/pages/api/alert-content.md | 48 ---- docs/pages/api/alert.md | 43 ++- docs/pages/api/snackbar-content.md | 2 +- docs/pages/api/typography.md | 2 +- .../pages/components/alert/ActionAlerts.js | 42 +++ .../pages/components/alert/ActionAlerts.tsx | 44 +++ .../components/alert/DescriptionAlerts.js | 37 +++ .../components/alert/DescriptionAlerts.tsx | 39 +++ .../pages/components/alert/FilledAlerts.js | 33 +++ .../pages/components/alert/FilledAlerts.tsx | 35 +++ docs/src/pages/components/alert/IconAlerts.js | 32 +++ .../src/pages/components/alert/IconAlerts.tsx | 34 +++ .../pages/components/alert/OutlinedAlerts.js | 33 +++ .../pages/components/alert/OutlinedAlerts.tsx | 35 +++ .../src/pages/components/alert/SimpleAlert.js | 66 ----- .../pages/components/alert/SimpleAlert.tsx | 68 ----- .../pages/components/alert/SimpleAlerts.js | 25 ++ .../pages/components/alert/SimpleAlerts.tsx | 27 ++ .../components/alert/TransitionAlerts.js | 52 ++++ .../components/alert/TransitionAlerts.tsx | 54 ++++ docs/src/pages/components/alert/alert.md | 50 +++- .../snackbars/ConsecutiveSnackbars.js | 29 +- .../snackbars/ConsecutiveSnackbars.tsx | 29 +- .../snackbars/CustomizedSnackbars.js | 120 ++------ .../snackbars/CustomizedSnackbars.tsx | 120 ++------ .../components/snackbars/SimpleSnackbar.js | 32 +-- .../components/snackbars/SimpleSnackbar.tsx | 34 +-- packages/material-ui-lab/src/Alert/Alert.d.ts | 57 ++-- packages/material-ui-lab/src/Alert/Alert.js | 268 ++++++++++++------ .../material-ui-lab/src/Alert/Alert.test.js | 28 +- .../src/AlertActions/AlertActions.d.ts | 11 - .../src/AlertActions/AlertActions.js | 57 ---- .../src/AlertActions/AlertActions.test.js | 26 -- .../src/AlertActions/index.d.ts | 2 - .../material-ui-lab/src/AlertActions/index.js | 1 - .../src/AlertContent/AlertContent.d.ts | 11 - .../src/AlertContent/AlertContent.js | 49 ---- .../src/AlertContent/AlertContent.test.js | 26 -- .../src/AlertContent/index.d.ts | 2 - .../material-ui-lab/src/AlertContent/index.js | 1 - .../src/AlertTitle/AlertTitle.js | 18 +- packages/material-ui-lab/src/index.d.ts | 6 - packages/material-ui-lab/src/index.js | 6 - .../src/internal/svg-icons/CheckCircle.js | 10 - .../src/internal/svg-icons/Error.js | 10 - .../src/internal/svg-icons/ErrorOutlined.js | 10 + .../src/internal/svg-icons/InfoOutlined.js | 10 + .../{Info.js => ReportProblemOutlined.js} | 4 +- .../src/internal/svg-icons/SuccessOutlined.js | 10 + .../src/internal/svg-icons/Warning.js | 10 - .../src/SnackbarContent/SnackbarContent.js | 2 +- .../material-ui/src/Typography/Typography.js | 2 +- .../material-ui/src/styles/createPalette.js | 8 +- 56 files changed, 992 insertions(+), 881 deletions(-) delete mode 100644 docs/pages/api/alert-actions.js delete mode 100644 docs/pages/api/alert-actions.md delete mode 100644 docs/pages/api/alert-content.js delete mode 100644 docs/pages/api/alert-content.md create mode 100644 docs/src/pages/components/alert/ActionAlerts.js create mode 100644 docs/src/pages/components/alert/ActionAlerts.tsx create mode 100644 docs/src/pages/components/alert/DescriptionAlerts.js create mode 100644 docs/src/pages/components/alert/DescriptionAlerts.tsx create mode 100644 docs/src/pages/components/alert/FilledAlerts.js create mode 100644 docs/src/pages/components/alert/FilledAlerts.tsx create mode 100644 docs/src/pages/components/alert/IconAlerts.js create mode 100644 docs/src/pages/components/alert/IconAlerts.tsx create mode 100644 docs/src/pages/components/alert/OutlinedAlerts.js create mode 100644 docs/src/pages/components/alert/OutlinedAlerts.tsx delete mode 100644 docs/src/pages/components/alert/SimpleAlert.js delete mode 100644 docs/src/pages/components/alert/SimpleAlert.tsx create mode 100644 docs/src/pages/components/alert/SimpleAlerts.js create mode 100644 docs/src/pages/components/alert/SimpleAlerts.tsx create mode 100644 docs/src/pages/components/alert/TransitionAlerts.js create mode 100644 docs/src/pages/components/alert/TransitionAlerts.tsx delete mode 100644 packages/material-ui-lab/src/AlertActions/AlertActions.d.ts delete mode 100644 packages/material-ui-lab/src/AlertActions/AlertActions.js delete mode 100644 packages/material-ui-lab/src/AlertActions/AlertActions.test.js delete mode 100644 packages/material-ui-lab/src/AlertActions/index.d.ts delete mode 100644 packages/material-ui-lab/src/AlertActions/index.js delete mode 100644 packages/material-ui-lab/src/AlertContent/AlertContent.d.ts delete mode 100644 packages/material-ui-lab/src/AlertContent/AlertContent.js delete mode 100644 packages/material-ui-lab/src/AlertContent/AlertContent.test.js delete mode 100644 packages/material-ui-lab/src/AlertContent/index.d.ts delete mode 100644 packages/material-ui-lab/src/AlertContent/index.js delete mode 100644 packages/material-ui-lab/src/internal/svg-icons/CheckCircle.js delete mode 100644 packages/material-ui-lab/src/internal/svg-icons/Error.js create mode 100644 packages/material-ui-lab/src/internal/svg-icons/ErrorOutlined.js create mode 100644 packages/material-ui-lab/src/internal/svg-icons/InfoOutlined.js rename packages/material-ui-lab/src/internal/svg-icons/{Info.js => ReportProblemOutlined.js} (54%) create mode 100644 packages/material-ui-lab/src/internal/svg-icons/SuccessOutlined.js delete mode 100644 packages/material-ui-lab/src/internal/svg-icons/Warning.js diff --git a/docs/pages/api/alert-actions.js b/docs/pages/api/alert-actions.js deleted file mode 100644 index 23c876ac384e7d..00000000000000 --- a/docs/pages/api/alert-actions.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import markdown from './alert-actions.md'; - -export default function Page() { - return ; -} diff --git a/docs/pages/api/alert-actions.md b/docs/pages/api/alert-actions.md deleted file mode 100644 index 8c4dad4bb2bf8c..00000000000000 --- a/docs/pages/api/alert-actions.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -filename: /packages/material-ui-lab/src/AlertActions/AlertActions.js ---- - - - -# AlertActions API - -

The API documentation of the AlertActions React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import AlertActions from '@material-ui/lab/AlertActions'; -// or -import { AlertActions } from '@material-ui/lab'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| 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. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -- Style sheet name: `MuiAlertActions`. -- Style sheet details: - -- `root` -- `spacing` - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/AlertActions/AlertActions.js) for more detail. - diff --git a/docs/pages/api/alert-content.js b/docs/pages/api/alert-content.js deleted file mode 100644 index 83d6486e419d4e..00000000000000 --- a/docs/pages/api/alert-content.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import markdown from './alert-content.md'; - -export default function Page() { - return ; -} diff --git a/docs/pages/api/alert-content.md b/docs/pages/api/alert-content.md deleted file mode 100644 index 96279204634cda..00000000000000 --- a/docs/pages/api/alert-content.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -filename: /packages/material-ui-lab/src/AlertContent/AlertContent.js ---- - - - -# AlertContent API - -

The API documentation of the AlertContent React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import AlertContent from '@material-ui/lab/AlertContent'; -// or -import { AlertContent } from '@material-ui/lab'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| 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. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -- Style sheet name: `MuiAlertContent`. -- Style sheet details: - -- `root` - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/AlertContent/AlertContent.js) for more detail. - diff --git a/docs/pages/api/alert.md b/docs/pages/api/alert.md index a72c5e83263a3a..cce7ab485fb428 100644 --- a/docs/pages/api/alert.md +++ b/docs/pages/api/alert.md @@ -24,30 +24,40 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| +| action | node | | The action to display. | | 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. | -| closeIcon | node | <Close /> | Element placed before the children. | -| onClose | func | | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | -| startIcon | node | | Element placed before the children. | -| type | 'success'
| 'info'
| 'warning'
| 'error' | 'info' | The type of Alert | +| 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. | +| role | string | 'alert' | The role attribute of the element. | -The component cannot hold a ref. +The `ref` is forwarded to the root element. -Any other props supplied will be provided to the root element (native element). +Any other props supplied will be provided to the root element ([Paper](/api/paper/)). ## CSS - Style sheet name: `MuiAlert`. - Style sheet details: -- `root` -- `alertContent` -- `startIcon` -- `closeIcon` -- `success` -- `info` -- `warning` -- `error` +| Rule name | Global class | Description | +|:-----|:-------------|:------------| +| root | .MuiAlert-root | Styles applied to the root element. +| textSuccess | .MuiAlert-textSuccess | Styles applied to the root element if `variant="text"` and `color="success"`. +| textInfo | .MuiAlert-textInfo | Styles applied to the root element if `variant="text"` and `color="info"`. +| textWarning | .MuiAlert-textWarning | Styles applied to the root element if `variant="text"` and `color="warning"`. +| textError | .MuiAlert-textError | Styles applied to the root element if `variant="text"` and `color="error"`. +| outlinedSuccess | .MuiAlert-outlinedSuccess | Styles applied to the root element if `variant="outlined"` and `color="success"`. +| outlinedInfo | .MuiAlert-outlinedInfo | Styles applied to the root element if `variant="outlined"` and `color="info"`. +| outlinedWarning | .MuiAlert-outlinedWarning | Styles applied to the root element if `variant="outlined"` and `color="warning"`. +| outlinedError | .MuiAlert-outlinedError | Styles applied to the root element if `variant="outlined"` and `color="error"`. +| filledSuccess | .MuiAlert-filledSuccess | Styles applied to the root element if `variant="filled"` and `color="success"`. +| filledInfo | .MuiAlert-filledInfo | Styles applied to the root element if `variant="filled"` and `color="info"`. +| filledWarning | .MuiAlert-filledWarning | Styles applied to the root element if `variant="filled"` and `color="warning"`. +| filledError | .MuiAlert-filledError | Styles applied to the root element if `variant="filled"` and `color="error"`. +| icon | .MuiAlert-icon | Styles applied to the icon wrapper element. +| message | .MuiAlert-message | Styles applied to the message wrapper element. +| action | .MuiAlert-action | Styles applied to the action wrapper element if `action` is provided. You can override the style of the component thanks to one of these customization points: @@ -57,6 +67,11 @@ You can override the style of the component thanks to one of these customization If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/Alert/Alert.js) for more detail. +## Inheritance + +The props of the [Paper](/api/paper/) component are also available. +You can take advantage of this behavior to [target nested components](/guides/api/#spread). + ## Demos - [Alert](/components/alert/) diff --git a/docs/pages/api/snackbar-content.md b/docs/pages/api/snackbar-content.md index e3d55255564999..ae4e725e2c938d 100644 --- a/docs/pages/api/snackbar-content.md +++ b/docs/pages/api/snackbar-content.md @@ -27,7 +27,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | action | node | | The action to display. | | 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 of the SnackbarContent. If the Snackbar requires focus to be closed, the `alertdialog` role should be used instead. | +| 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. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api/typography.md b/docs/pages/api/typography.md index 9bb6bfd5bab877..62e430719bcfd3 100644 --- a/docs/pages/api/typography.md +++ b/docs/pages/api/typography.md @@ -34,7 +34,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | noWrap | bool | false | If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.
Note that text overflow can only happen with block or inline-block level elements (the element needs to have a width in order to overflow). | | paragraph | bool | false | If `true`, the text will have a bottom margin. | | variant | 'h1'
| 'h2'
| 'h3'
| 'h4'
| 'h5'
| 'h6'
| 'subtitle1'
| 'subtitle2'
| 'body1'
| 'body2'
| 'caption'
| 'button'
| 'overline'
| 'srOnly'
| 'inherit' | 'body1' | Applies the theme typography styles. | -| variantMapping | object | { h1: 'h1', h2: 'h2', h3: 'h3', h4: 'h4', h5: 'h5', h6: 'h6', subtitle1: 'h6', subtitle2: 'h6', body1: 'p', body2: 'p',} | We are empirically mapping the variant prop to a range of different DOM element types. For instance, subtitle1 to `
`. If you wish to change that mapping, you can provide your own. Alternatively, you can use the `component` prop. | +| variantMapping | object | { h1: 'h1', h2: 'h2', h3: 'h3', h4: 'h4', h5: 'h5', h6: 'h6', subtitle1: 'h6', subtitle2: 'h6', body1: 'p', body2: 'p',} | The component maps the variant prop to a range of different DOM element types. For instance, subtitle1 to `
`. If you wish to change that mapping, you can provide your own. Alternatively, you can use the `component` prop. | The `ref` is forwarded to the root element. diff --git a/docs/src/pages/components/alert/ActionAlerts.js b/docs/src/pages/components/alert/ActionAlerts.js new file mode 100644 index 00000000000000..2ac4344fa7a2fa --- /dev/null +++ b/docs/src/pages/components/alert/ActionAlerts.js @@ -0,0 +1,42 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { Alert } from '@material-ui/lab'; +import IconButton from '@material-ui/core/IconButton'; +import Button from '@material-ui/core/Button'; +import CloseIcon from '@material-ui/icons/Close'; + +const useStyles = makeStyles(theme => ({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, + }, +})); + +export default function ActionAlerts() { + const classes = useStyles(); + + return ( +
+ + + + } + > + This is a success alert—check it out! + + + UNDO + + } + > + This is a success alert—check it out! + +
+ ); +} diff --git a/docs/src/pages/components/alert/ActionAlerts.tsx b/docs/src/pages/components/alert/ActionAlerts.tsx new file mode 100644 index 00000000000000..1f4cd3947668f4 --- /dev/null +++ b/docs/src/pages/components/alert/ActionAlerts.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import { Alert } from '@material-ui/lab'; +import IconButton from '@material-ui/core/IconButton'; +import Button from '@material-ui/core/Button'; +import CloseIcon from '@material-ui/icons/Close'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, + }, + }), +); + +export default function ActionAlerts() { + const classes = useStyles(); + + return ( +
+ + + + } + > + This is a success alert—check it out! + + + UNDO + + } + > + 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 new file mode 100644 index 00000000000000..3a2c2b5eb75a21 --- /dev/null +++ b/docs/src/pages/components/alert/DescriptionAlerts.js @@ -0,0 +1,37 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { Alert, AlertTitle } from '@material-ui/lab'; + +const useStyles = makeStyles(theme => ({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, + }, +})); + +export default function DescriptionAlerts() { + const classes = useStyles(); + + 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 new file mode 100644 index 00000000000000..34420ab173adfb --- /dev/null +++ b/docs/src/pages/components/alert/DescriptionAlerts.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import { Alert, AlertTitle } from '@material-ui/lab'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, + }, + }), +); + +export default function DescriptionAlerts() { + const classes = useStyles(); + + 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 new file mode 100644 index 00000000000000..8c2918a8411b57 --- /dev/null +++ b/docs/src/pages/components/alert/FilledAlerts.js @@ -0,0 +1,33 @@ +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 SimpleAlerts() { + const classes = useStyles(); + + 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 new file mode 100644 index 00000000000000..7c986461a0bfe0 --- /dev/null +++ b/docs/src/pages/components/alert/FilledAlerts.tsx @@ -0,0 +1,35 @@ +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 SimpleAlerts() { + const classes = useStyles(); + + 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 new file mode 100644 index 00000000000000..b97af89259f0a6 --- /dev/null +++ b/docs/src/pages/components/alert/IconAlerts.js @@ -0,0 +1,32 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import Alert from '@material-ui/lab/Alert'; +import CheckIcon from '@material-ui/icons/Check'; +import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline'; + +const useStyles = makeStyles(theme => ({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, + }, +})); + +export default function IconAlerts() { + const classes = useStyles(); + + return ( +
+ } color="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 new file mode 100644 index 00000000000000..c42cc6849a634d --- /dev/null +++ b/docs/src/pages/components/alert/IconAlerts.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import Alert from '@material-ui/lab/Alert'; +import CheckIcon from '@material-ui/icons/Check'; +import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, + }, + }), +); + +export default function IconAlerts() { + const classes = useStyles(); + + return ( +
+ } color="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 new file mode 100644 index 00000000000000..f1f1f2b80515ca --- /dev/null +++ b/docs/src/pages/components/alert/OutlinedAlerts.js @@ -0,0 +1,33 @@ +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 SimpleAlerts() { + const classes = useStyles(); + + 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 new file mode 100644 index 00000000000000..b9c15ca5e11ead --- /dev/null +++ b/docs/src/pages/components/alert/OutlinedAlerts.tsx @@ -0,0 +1,35 @@ +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 SimpleAlerts() { + const classes = useStyles(); + + 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/SimpleAlert.js b/docs/src/pages/components/alert/SimpleAlert.js deleted file mode 100644 index 9fe0d65e09e63d..00000000000000 --- a/docs/src/pages/components/alert/SimpleAlert.js +++ /dev/null @@ -1,66 +0,0 @@ -import React from 'react'; -import { Box } from '@material-ui/core'; -import { makeStyles } from '@material-ui/core/styles'; -import { Alert, AlertTitle, AlertContent } from '@material-ui/lab'; - -/* eslint-disable react/jsx-filename-extension */ - -const useStyles = makeStyles(theme => ({ - root: { - '& > * + *': { - marginTop: theme.spacing(2), - }, - }, -})); - -/* - commented out while we figure out https://github.com/mui-org/material-ui/issues/13875 - - - - - - */ - -export default function SimpleAlert() { - const onClose = () => { - console.log('TEMP: clicking close'); - }; - - const classes = useStyles(); - - return ( - - - Error! - Your request for the ultimate cup of coffee has been denied! - - - - Warning! - - This is a warning that Captain Spectacular has set a course to the benevolent hive mine 9! - - - - - Informational Notes - - Modular forms and elliptic curves! Infinite fire revolving around infinite parallels. - Fractals of infinite reality, each cascading, gliding in an infinite wheel. - - - - - Success! - - You fetched the ultimate cup of coffee in less than five Earth minutes! - - - - ); -} diff --git a/docs/src/pages/components/alert/SimpleAlert.tsx b/docs/src/pages/components/alert/SimpleAlert.tsx deleted file mode 100644 index 3e459a24c6f7d3..00000000000000 --- a/docs/src/pages/components/alert/SimpleAlert.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import React from 'react'; -import { Box } from '@material-ui/core'; -import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; -import { Alert, AlertTitle, AlertContent } from '@material-ui/lab'; - -/* eslint-disable react/jsx-filename-extension */ - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - '& > * + *': { - marginTop: theme.spacing(2), - }, - }, - }), -); - -/* - commented out while we figure out https://github.com/mui-org/material-ui/issues/13875 - - - - - -*/ - -export default function SimpleAlert() { - const onClose = () => { - console.log('TEMP: clicking close'); - }; - - const classes = useStyles(); - - return ( - - - Error! - Your request for the ultimate cup of coffee has been denied! - - - - Warning! - - This is a warning that Captain Spectacular has set a course to the benevolent hive mine 9! - - - - - Informational Notes - - Modular forms and elliptic curves! Infinite fire revolving around infinite parallels. - Fractals of infinite reality, each cascading, gliding in an infinite wheel. - - - - - Success! - - You fetched the ultimate cup of coffee in less than five Earth minutes! - - - - ); -} diff --git a/docs/src/pages/components/alert/SimpleAlerts.js b/docs/src/pages/components/alert/SimpleAlerts.js new file mode 100644 index 00000000000000..3d89611e0c7ba0 --- /dev/null +++ b/docs/src/pages/components/alert/SimpleAlerts.js @@ -0,0 +1,25 @@ +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 SimpleAlerts() { + const classes = useStyles(); + + 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.tsx b/docs/src/pages/components/alert/SimpleAlerts.tsx new file mode 100644 index 00000000000000..87d1af3b94cc33 --- /dev/null +++ b/docs/src/pages/components/alert/SimpleAlerts.tsx @@ -0,0 +1,27 @@ +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 SimpleAlerts() { + const classes = useStyles(); + + 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/TransitionAlerts.js b/docs/src/pages/components/alert/TransitionAlerts.js new file mode 100644 index 00000000000000..ce6322836bd7ba --- /dev/null +++ b/docs/src/pages/components/alert/TransitionAlerts.js @@ -0,0 +1,52 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { Alert } from '@material-ui/lab'; +import IconButton from '@material-ui/core/IconButton'; +import Collapse from '@material-ui/core/Collapse'; +import Button from '@material-ui/core/Button'; +import CloseIcon from '@material-ui/icons/Close'; + +const useStyles = makeStyles(theme => ({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, + }, +})); + +export default function ActionAlerts() { + const classes = useStyles(); + const [open, setOpen] = React.useState(true); + + return ( +
+ + { + setOpen(false); + }} + > + + + } + > + Close me! + + + +
+ ); +} diff --git a/docs/src/pages/components/alert/TransitionAlerts.tsx b/docs/src/pages/components/alert/TransitionAlerts.tsx new file mode 100644 index 00000000000000..2ebb5c536ebe9c --- /dev/null +++ b/docs/src/pages/components/alert/TransitionAlerts.tsx @@ -0,0 +1,54 @@ +import React from 'react'; +import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import { Alert } from '@material-ui/lab'; +import IconButton from '@material-ui/core/IconButton'; +import Collapse from '@material-ui/core/Collapse'; +import Button from '@material-ui/core/Button'; +import CloseIcon from '@material-ui/icons/Close'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, + }, + }), +); + +export default function ActionAlerts() { + const classes = useStyles(); + const [open, setOpen] = React.useState(true); + + return ( +
+ + { + setOpen(false); + }} + > + + + } + > + Close me! + + + +
+ ); +} diff --git a/docs/src/pages/components/alert/alert.md b/docs/src/pages/components/alert/alert.md index d572e0348e5d0a..c9e941b3cc8096 100644 --- a/docs/src/pages/components/alert/alert.md +++ b/docs/src/pages/components/alert/alert.md @@ -7,8 +7,52 @@ components: Alert

An alert displays a prominent message and related optional actions.

-## Simple Alerts +## Simple alerts -Examples of Alerts containing text, using primary and secondary colors. The Alert is applied to its children. +{{"demo": "pages/components/alert/SimpleAlerts.js"}} -{{"demo": "pages/components/alert/SimpleAlert.js"}} +## Description + +You can use the `AlertTitle` component to display a title and a description. + +{{"demo": "pages/components/alert/DescriptionAlerts.js"}} + +## Actions + +{{"demo": "pages/components/alert/ActionAlerts.js"}} + +### Transition + +You can use the [transition components](/components/transitions/), like `Collapse` to transition the appearance of the alert. + +{{"demo": "pages/components/alert/TransitionAlerts.js"}} + +## Icons + +The `icon` prop allows you to add an icon to the beginning of the alert component. +This will override the default color icon. +You can change the default color icon mapping with the `iconMapping` prop. +Setting the icon prop to false will remove the icon altogether. + +{{"demo": "pages/components/alert/IconAlerts.js"}} + +## Variants + +### Outlined + +{{"demo": "pages/components/alert/OutlinedAlerts.js"}} + +### Filled + +{{"demo": "pages/components/alert/FilledAlerts.js"}} + +## Toast + +You can use the Snackbar to [display a toast](/components/snackbars/#customized-snackbars) with the Alert. + +## Accessibility + +(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#alert) + +The component sets `role="alert"` by default. +When the component is dynamically displayed, the assistive technology should read the content immediately. diff --git a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js index eee3ff37af5a6d..637aa8e099a932 100644 --- a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js +++ b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js @@ -68,20 +68,21 @@ export default function ConsecutiveSnackbars() { 'aria-describedby': 'message-id', }} message={{messageInfo ? messageInfo.message : undefined}} - action={[ - , - - - , - ]} + action={ + + + + + + + } />
); diff --git a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx index 97cf86b17577e8..cd426630a2ba39 100644 --- a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx +++ b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx @@ -80,20 +80,21 @@ export default function ConsecutiveSnackbars() { 'aria-describedby': 'message-id', }} message={{messageInfo ? messageInfo.message : undefined}} - action={[ - , - - - , - ]} + action={ + + + + + + + } /> ); diff --git a/docs/src/pages/components/snackbars/CustomizedSnackbars.js b/docs/src/pages/components/snackbars/CustomizedSnackbars.js index 59b663c9f2f6bc..c08bd986f5eaf3 100644 --- a/docs/src/pages/components/snackbars/CustomizedSnackbars.js +++ b/docs/src/pages/components/snackbars/CustomizedSnackbars.js @@ -1,91 +1,43 @@ import React from 'react'; import PropTypes from 'prop-types'; -import clsx from 'clsx'; import Button from '@material-ui/core/Button'; -import CheckCircleIcon from '@material-ui/icons/CheckCircle'; -import ErrorIcon from '@material-ui/icons/Error'; -import InfoIcon from '@material-ui/icons/Info'; import CloseIcon from '@material-ui/icons/Close'; -import { amber, green } from '@material-ui/core/colors'; import IconButton from '@material-ui/core/IconButton'; import Snackbar from '@material-ui/core/Snackbar'; -import SnackbarContent from '@material-ui/core/SnackbarContent'; -import WarningIcon from '@material-ui/icons/Warning'; +import MuiAlert from '@material-ui/lab/Alert'; import { makeStyles } from '@material-ui/core/styles'; -const variantIcon = { - success: CheckCircleIcon, - warning: WarningIcon, - error: ErrorIcon, - info: InfoIcon, -}; - -const useStyles1 = makeStyles(theme => ({ - success: { - backgroundColor: green[600], - }, - error: { - backgroundColor: theme.palette.error.dark, - }, - info: { - backgroundColor: theme.palette.primary.main, - }, - warning: { - backgroundColor: amber[700], - }, - icon: { - fontSize: 20, - }, - iconVariant: { - opacity: 0.9, - marginRight: theme.spacing(1), - }, - message: { - display: 'flex', - alignItems: 'center', - }, -})); - -function MySnackbarContentWrapper(props) { - const classes = useStyles1(); - const { className, message, onClose, variant, ...other } = props; - const Icon = variantIcon[variant]; - +function Alert(props) { + const { onClose, ...other } = props; return ( - - - {message} - + + + } - action={[ - - - , - ]} {...other} /> ); } -MySnackbarContentWrapper.propTypes = { - className: PropTypes.string, - message: PropTypes.string, +Alert.propTypes = { onClose: PropTypes.func, - variant: PropTypes.oneOf(['error', 'info', 'success', 'warning']).isRequired, }; -const useStyles2 = makeStyles(theme => ({ - margin: { - margin: theme.spacing(1), +const useStyles = makeStyles(theme => ({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, }, })); export default function CustomizedSnackbars() { - const classes = useStyles2(); + const classes = useStyles(); const [open, setOpen] = React.useState(false); const handleClick = () => { @@ -101,8 +53,8 @@ export default function CustomizedSnackbars() { }; return ( -
- - + + This is a success message! + - - - - + This is an error message! + This is a warning message! + This is an information message! + This is a success message!
); } diff --git a/docs/src/pages/components/snackbars/CustomizedSnackbars.tsx b/docs/src/pages/components/snackbars/CustomizedSnackbars.tsx index c108ec315022d0..c9ca0cb60763bd 100644 --- a/docs/src/pages/components/snackbars/CustomizedSnackbars.tsx +++ b/docs/src/pages/components/snackbars/CustomizedSnackbars.tsx @@ -1,90 +1,42 @@ import React, { SyntheticEvent } from 'react'; -import clsx from 'clsx'; import Button from '@material-ui/core/Button'; -import CheckCircleIcon from '@material-ui/icons/CheckCircle'; -import ErrorIcon from '@material-ui/icons/Error'; -import InfoIcon from '@material-ui/icons/Info'; import CloseIcon from '@material-ui/icons/Close'; -import { amber, green } from '@material-ui/core/colors'; import IconButton from '@material-ui/core/IconButton'; import Snackbar from '@material-ui/core/Snackbar'; -import SnackbarContent from '@material-ui/core/SnackbarContent'; -import WarningIcon from '@material-ui/icons/Warning'; +import MuiAlert, { AlertProps } from '@material-ui/lab/Alert'; import { makeStyles, Theme } from '@material-ui/core/styles'; -const variantIcon = { - success: CheckCircleIcon, - warning: WarningIcon, - error: ErrorIcon, - info: InfoIcon, -}; - -const useStyles1 = makeStyles((theme: Theme) => ({ - success: { - backgroundColor: green[600], - }, - error: { - backgroundColor: theme.palette.error.dark, - }, - info: { - backgroundColor: theme.palette.primary.main, - }, - warning: { - backgroundColor: amber[700], - }, - icon: { - fontSize: 20, - }, - iconVariant: { - opacity: 0.9, - marginRight: theme.spacing(1), - }, - message: { - display: 'flex', - alignItems: 'center', - }, -})); - -export interface Props { - className?: string; - message?: string; +export interface Props extends AlertProps { onClose?: () => void; - variant: keyof typeof variantIcon; } -function MySnackbarContentWrapper(props: Props) { - const classes = useStyles1(); - const { className, message, onClose, variant, ...other } = props; - const Icon = variantIcon[variant]; - +function Alert(props: Props) { + const { onClose, ...other } = props; return ( - - - {message} - + + + } - action={[ - - - , - ]} {...other} /> ); } -const useStyles2 = makeStyles((theme: Theme) => ({ - margin: { - margin: theme.spacing(1), +const useStyles = makeStyles((theme: Theme) => ({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, }, })); export default function CustomizedSnackbars() { - const classes = useStyles2(); + const classes = useStyles(); const [open, setOpen] = React.useState(false); const handleClick = () => { @@ -100,8 +52,8 @@ export default function CustomizedSnackbars() { }; return ( -
- - + + This is a success message! + - - - - + This is an error message! + This is a warning message! + This is an information message! + This is a success message!
); } diff --git a/docs/src/pages/components/snackbars/SimpleSnackbar.js b/docs/src/pages/components/snackbars/SimpleSnackbar.js index beb9c42ae9f1b0..a696edfb083fdd 100644 --- a/docs/src/pages/components/snackbars/SimpleSnackbar.js +++ b/docs/src/pages/components/snackbars/SimpleSnackbar.js @@ -1,18 +1,10 @@ import React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import Snackbar from '@material-ui/core/Snackbar'; import IconButton from '@material-ui/core/IconButton'; import CloseIcon from '@material-ui/icons/Close'; -const useStyles = makeStyles(theme => ({ - close: { - padding: theme.spacing(0.5), - }, -})); - export default function SimpleSnackbar() { - const classes = useStyles(); const [open, setOpen] = React.useState(false); const handleClick = () => { @@ -42,20 +34,16 @@ export default function SimpleSnackbar() { 'aria-describedby': 'message-id', }} message={Note archived} - action={[ - , - - - , - ]} + action={ + + + + + + + } /> ); diff --git a/docs/src/pages/components/snackbars/SimpleSnackbar.tsx b/docs/src/pages/components/snackbars/SimpleSnackbar.tsx index 292d8bc5606556..8af26e04d7e1e6 100644 --- a/docs/src/pages/components/snackbars/SimpleSnackbar.tsx +++ b/docs/src/pages/components/snackbars/SimpleSnackbar.tsx @@ -1,20 +1,10 @@ import React from 'react'; -import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import Snackbar from '@material-ui/core/Snackbar'; import IconButton from '@material-ui/core/IconButton'; import CloseIcon from '@material-ui/icons/Close'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - close: { - padding: theme.spacing(0.5), - }, - }), -); - export default function SimpleSnackbar() { - const classes = useStyles(); const [open, setOpen] = React.useState(false); const handleClick = () => { @@ -44,20 +34,16 @@ export default function SimpleSnackbar() { 'aria-describedby': 'message-id', }} message={Note archived} - action={[ - , - - - , - ]} + action={ + + + + + + + } /> ); diff --git a/packages/material-ui-lab/src/Alert/Alert.d.ts b/packages/material-ui-lab/src/Alert/Alert.d.ts index c2626ca84fafcc..b46a83d843bd8a 100644 --- a/packages/material-ui-lab/src/Alert/Alert.d.ts +++ b/packages/material-ui-lab/src/Alert/Alert.d.ts @@ -1,40 +1,55 @@ import * as React from 'react'; import { StandardProps } from '@material-ui/core'; +import { PaperProps } from '@material-ui/core/Paper'; -export interface AlertProps - extends StandardProps, AlertClassKey> { +export type Color = 'success' | 'info' | 'warning' | 'error'; + +export interface AlertProps extends StandardProps { /** - * Element placed before the children. - */ - closeIcon?: React.ReactNode; - /* - * Main color for the Alert, picked from theme palette + * The action to display. */ - color?: 'primary' | 'secondary' | 'error'; + action?: React.ReactNode; /* - * Elevation property that is passed to underlying Paper component + * Main color for the Alert, picked from theme palette. */ - elevation?: number; + color?: Color; /** - * Callback fired when the component requests to be closed. - * - * @param {object} event The event source of the callback. + * The icon element placed before the children. */ - onClose?: (event: React.SyntheticEvent) => void; + icon?: React.ReactNode | false; /** - * Element placed before the children. + * The role attribute of the element. */ - startIcon?: React.ReactNode | false; + role?: string; /** - * The type of Alert + * 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. */ - type?: 'success' | 'info' | 'warning' | 'error'; + iconMapping?: Partial>; /* - * The variant of the Alert + * The variant of the Alert. */ - variant?: 'text' | 'filled' | 'outline' | 'banner'; + variant?: 'text' | 'filled' | 'outlined'; } -export type AlertClassKey = 'root'; +export type AlertClassKey = + | 'root' + | 'textSuccess' + | 'textInfo' + | 'textWarning' + | 'textError' + | 'outlinedSuccess' + | 'outlinedInfo' + | 'outlinedWarning' + | 'outlinedError' + | 'filledSuccess' + | 'filledInfo' + | 'filledWarning' + | 'filledError' + | 'icon' + | 'message' + | 'action'; export default function Alert(props: AlertProps): JSX.Element; diff --git a/packages/material-ui-lab/src/Alert/Alert.js b/packages/material-ui-lab/src/Alert/Alert.js index 8380ac46909f24..a1ab0ca7259f09 100644 --- a/packages/material-ui-lab/src/Alert/Alert.js +++ b/packages/material-ui-lab/src/Alert/Alert.js @@ -1,100 +1,186 @@ import React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { withStyles, lighten } from '@material-ui/core/styles'; -import Close from '../internal/svg-icons/Close'; -import { IconButton } from '@material-ui/core'; -import CheckCircle from '../internal/svg-icons/CheckCircle'; -import Warning from '../internal/svg-icons/Warning'; -import Error from '../internal/svg-icons/Error'; -import Info from '../internal/svg-icons/Info'; -import { green, orange, red } from '@material-ui/core/colors'; +import { withStyles, lighten, darken } from '@material-ui/core/styles'; +import Paper from '@material-ui/core/Paper'; +import SuccessOutlinedIcon from '../internal/svg-icons/SuccessOutlined'; +import ReportProblemOutlinedIcon from '../internal/svg-icons/ReportProblemOutlined'; +import ErrorOutlinedIcon from '../internal/svg-icons/ErrorOutlined'; +import InfoOutlinedIcon from '../internal/svg-icons/InfoOutlined'; +import { capitalize } from '@material-ui/core/utils'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { - borderWidth: 1, - borderStyle: 'solid', + ...theme.typography.body2, borderRadius: theme.shape.borderRadius, - position: 'relative', + backgroundColor: 'transparent', display: 'flex', - alignItems: 'center', - padding: '16px 0', - maxWidth: 800, + padding: '6px 16px', + }, + /* Styles applied to the root element if `variant="text"` and `color="success"`. */ + textSuccess: { + color: darken(theme.palette.success.main, 0.6), + backgroundColor: lighten(theme.palette.success.main, 0.9), + '& $icon': { + color: theme.palette.success.main, + }, + }, + /* Styles applied to the root element if `variant="text"` and `color="info"`. */ + textInfo: { + color: darken(theme.palette.info.main, 0.6), + backgroundColor: lighten(theme.palette.info.main, 0.9), + '& $icon': { + color: theme.palette.info.main, + }, + }, + /* Styles applied to the root element if `variant="text"` and `color="warning"`. */ + textWarning: { + color: darken(theme.palette.warning.main, 0.6), + backgroundColor: lighten(theme.palette.warning.main, 0.9), + '& $icon': { + color: theme.palette.warning.main, + }, + }, + /* Styles applied to the root element if `variant="text"` and `color="error"`. */ + textError: { + color: darken(theme.palette.error.main, 0.6), + backgroundColor: lighten(theme.palette.error.main, 0.9), + '& $icon': { + color: theme.palette.error.main, + }, + }, + /* Styles applied to the root element if `variant="outlined"` and `color="success"`. */ + outlinedSuccess: { + color: + theme.palette.type === 'light' + ? darken(theme.palette.success.main, 0.6) + : lighten(theme.palette.success.main, 0.6), + border: `1px solid ${theme.palette.success.main}`, + '& $icon': { + color: theme.palette.success.main, + }, + }, + /* Styles applied to the root element if `variant="outlined"` and `color="info"`. */ + outlinedInfo: { + color: + theme.palette.type === 'light' + ? darken(theme.palette.info.main, 0.6) + : lighten(theme.palette.info.main, 0.6), + border: `1px solid ${theme.palette.info.main}`, + '& $icon': { + color: theme.palette.info.main, + }, + }, + /* Styles applied to the root element if `variant="outlined"` and `color="warning"`. */ + outlinedWarning: { + color: + theme.palette.type === 'light' + ? darken(theme.palette.warning.main, 0.6) + : lighten(theme.palette.warning.main, 0.6), + border: `1px solid ${theme.palette.warning.main}`, + '& $icon': { + color: theme.palette.warning.main, + }, + }, + /* Styles applied to the root element if `variant="outlined"` and `color="error"`. */ + outlinedError: { + color: + theme.palette.type === 'light' + ? darken(theme.palette.error.main, 0.6) + : lighten(theme.palette.error.main, 0.6), + border: `1px solid ${theme.palette.error.main}`, + '& $icon': { + color: theme.palette.error.main, + }, + }, + /* Styles applied to the root element if `variant="filled"` and `color="success"`. */ + filledSuccess: { + color: '#fff', + fontWeight: theme.typography.fontWeightMedium, + backgroundColor: theme.palette.success.main, + }, + /* Styles applied to the root element if `variant="filled"` and `color="info"`. */ + filledInfo: { + color: '#fff', + fontWeight: theme.typography.fontWeightMedium, + backgroundColor: theme.palette.info.main, + }, + /* Styles applied to the root element if `variant="filled"` and `color="warning"`. */ + filledWarning: { + color: '#fff', + fontWeight: theme.typography.fontWeightMedium, + backgroundColor: theme.palette.warning.main, + }, + /* Styles applied to the root element if `variant="filled"` and `color="error"`. */ + filledError: { + color: '#fff', + fontWeight: theme.typography.fontWeightMedium, + backgroundColor: theme.palette.error.main, + }, + /* Styles applied to the icon wrapper element. */ + icon: { + marginRight: 12, + padding: '7px 0', + display: 'flex', + fontSize: 22, + opacity: 0.9, }, - alertContent: { + /* Styles applied to the message wrapper element. */ + message: { + padding: '8px 0', display: 'flex', - flexGrow: 1, flexDirection: 'column', - padding: '0 16px', - }, - startIcon: { - marginTop: '4px', - marginRight: '-16px', - padding: '0 16px', - alignSelf: 'flex-start', - }, - closeIcon: { - marginTop: '-8px', - alignSelf: 'flex-start', - }, - success: { - color: theme.palette.success.main, - borderColor: theme.palette.success.main, - backgroundColor: lighten(theme.palette.success.main, 0.95), - }, - info: { - color: theme.palette.info.main, - borderColor: theme.palette.info.main, - backgroundColor: lighten(theme.palette.info.main, 0.95), - }, - warning: { - color: theme.palette.warning.main, - borderColor: theme.palette.warning.main, - backgroundColor: lighten(theme.palette.warning.main, 0.95), - }, - error: { - color: theme.palette.error.main, - borderColor: theme.palette.error.main, - backgroundColor: lighten(theme.palette.error.main, 0.95), + justifyContent: 'center', + }, + /* Styles applied to the action wrapper element if `action` is provided. */ + action: { + display: 'flex', + alignItems: 'center', + marginLeft: 'auto', + paddingLeft: 16, + marginRight: -8, }, }); -const DEFAULT_ICONS = { - success: , - warning: , - error: , - info: , +const defaultIconMapping = { + success: , + warning: , + error: , + info: , }; const Alert = React.forwardRef(function Alert(props, ref) { const { + action, children, - className, classes, - closeIcon: closeIconProp = , - onClose, - startIcon: startIconProp, - type = 'info', + className, + color = 'success', + icon, + iconMapping = defaultIconMapping, + role = 'alert', + variant = 'text', + ...other } = props; - const startIcon = startIconProp !== false && ( - - {startIconProp || DEFAULT_ICONS[type]} - - ); - - const closeIcon = onClose && ( - - {closeIconProp} - - ); - return ( -
- {startIcon} -
{children}
- {closeIcon} -
+ + {icon !== false ? ( +
+ {icon || iconMapping[color] || defaultIconMapping[color]} +
+ ) : null} +
{children}
+ {action != null ?
{action}
: null} + ); }); @@ -103,6 +189,10 @@ Alert.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the d.ts file and run "yarn proptypes" | // ---------------------------------------------------------------------- + /** + * The action to display. + */ + action: PropTypes.node, /** * The content of the component. */ @@ -117,23 +207,33 @@ Alert.propTypes = { */ className: PropTypes.string, /** - * Element placed before the children. + * @ignore */ - closeIcon: PropTypes.node, + color: PropTypes.oneOf(['error', 'info', 'success', 'warning']), /** - * Callback fired when the component requests to be closed. - * - * @param {object} event The event source of the callback. + * The icon element placed before the children. */ - onClose: PropTypes.func, + icon: PropTypes.node, /** - * Element placed before the children. + * 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. */ - startIcon: PropTypes.node, + iconMapping: PropTypes.shape({ + error: PropTypes.node, + info: PropTypes.node, + success: PropTypes.node, + warning: PropTypes.node, + }), /** - * The type of Alert + * The role attribute of the element. + */ + role: PropTypes.string, + /** + * @ignore */ - type: PropTypes.oneOf(['success', 'info', 'warning', 'error']), + variant: PropTypes.oneOf(['filled', 'outlined', 'text']), }; export default withStyles(styles, { name: 'MuiAlert' })(Alert); diff --git a/packages/material-ui-lab/src/Alert/Alert.test.js b/packages/material-ui-lab/src/Alert/Alert.test.js index 5f1f50b0fadc6b..27c9708b8c20b7 100644 --- a/packages/material-ui-lab/src/Alert/Alert.test.js +++ b/packages/material-ui-lab/src/Alert/Alert.test.js @@ -1,19 +1,27 @@ import React from 'react'; -import { expect } from 'chai'; -import { createClientRender } from 'test/utils/createClientRender'; +import { createMount, getClasses } from '@material-ui/core/test-utils'; +import describeConformance from '@material-ui/core/test-utils/describeConformance'; import Alert from './Alert'; +import Paper from '@material-ui/core/Paper'; describe('', () => { - const render = createClientRender({ strict: true }); + let mount; let classes; - const defaultProps = { - name: 'alert-test', - value: 2, - }; - it('should render', () => { - const { container } = render(); + before(() => { + mount = createMount({ strict: true }); + classes = getClasses(); + }); - expect(container.firstChild).to.not.have.class(classes.root); + after(() => { + mount.cleanUp(); }); + + describeConformance(, () => ({ + classes, + inheritComponent: Paper, + mount, + refInstanceof: window.HTMLDivElement, + skip: ['componentProp'], + })); }); diff --git a/packages/material-ui-lab/src/AlertActions/AlertActions.d.ts b/packages/material-ui-lab/src/AlertActions/AlertActions.d.ts deleted file mode 100644 index 1e4531e135a813..00000000000000 --- a/packages/material-ui-lab/src/AlertActions/AlertActions.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import { StandardProps } from '@material-ui/core'; - -export interface AlertActionsProps - extends StandardProps, AlertActionsClassKey> { - disableSpacing?: boolean; -} - -export type AlertActionsClassKey = 'root'; - -export default function AlertActions(props: AlertActionsProps): JSX.Element; diff --git a/packages/material-ui-lab/src/AlertActions/AlertActions.js b/packages/material-ui-lab/src/AlertActions/AlertActions.js deleted file mode 100644 index 01e93a3994b5d2..00000000000000 --- a/packages/material-ui-lab/src/AlertActions/AlertActions.js +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; -import clsx from 'clsx'; - -export const styles = () => ({ - root: { - paddingTop: '1em', - display: 'flex', - alignItems: 'center', - justifyContent: 'flex-start', - flex: '0 0 auto', - }, - /* Styles applied to the root element if `disableSpacing={false}`. */ - spacing: { - '& > :not(:first-child)': { - marginLeft: 8, - }, - }, -}); - -const AlertActions = React.forwardRef(function AlertActions(props, ref) { - const { classes, className, disableSpacing, ...other } = props; - return ( -
- ); -}); - -AlertActions.propTypes = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the d.ts file and run "yarn proptypes" | - // ---------------------------------------------------------------------- - /** - * The content of the component. - */ - children: PropTypes.node, - /** - * Override or extend the styles applied to the component. - * See [CSS API](#css) below for more details. - */ - classes: PropTypes.object, - /** - * @ignore - */ - className: PropTypes.string, - /** - * @ignore - */ - disableSpacing: PropTypes.bool, -}; - -export default withStyles(styles, { name: 'MuiAlertActions' })(AlertActions); diff --git a/packages/material-ui-lab/src/AlertActions/AlertActions.test.js b/packages/material-ui-lab/src/AlertActions/AlertActions.test.js deleted file mode 100644 index 97ff561effe590..00000000000000 --- a/packages/material-ui-lab/src/AlertActions/AlertActions.test.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import { createMount, getClasses } from '@material-ui/core/test-utils'; -import describeConformance from '@material-ui/core/test-utils/describeConformance'; -import AlertActions from './AlertActions'; - -describe('', () => { - let mount; - let classes; - - before(() => { - mount = createMount({ strict: true }); - classes = getClasses(); - }); - - after(() => { - mount.cleanUp(); - }); - - describeConformance(, () => ({ - classes, - inheritComponent: 'div', - mount, - refInstanceof: window.HTMLDivElement, - skip: ['componentProp'], - })); -}); diff --git a/packages/material-ui-lab/src/AlertActions/index.d.ts b/packages/material-ui-lab/src/AlertActions/index.d.ts deleted file mode 100644 index 9550647bb1e407..00000000000000 --- a/packages/material-ui-lab/src/AlertActions/index.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './AlertActions'; -export * from './AlertActions'; diff --git a/packages/material-ui-lab/src/AlertActions/index.js b/packages/material-ui-lab/src/AlertActions/index.js deleted file mode 100644 index 3a5677aa9df769..00000000000000 --- a/packages/material-ui-lab/src/AlertActions/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './AlertActions'; diff --git a/packages/material-ui-lab/src/AlertContent/AlertContent.d.ts b/packages/material-ui-lab/src/AlertContent/AlertContent.d.ts deleted file mode 100644 index 69cad433d6e147..00000000000000 --- a/packages/material-ui-lab/src/AlertContent/AlertContent.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import { StandardProps } from '@material-ui/core'; - -export interface AlertContentProps - extends StandardProps, AlertContentClassKey> { - variant?: 'text' | 'container'; -} - -export type AlertContentClassKey = 'root'; - -export default function AlertContent(props: AlertContentProps): JSX.Element; diff --git a/packages/material-ui-lab/src/AlertContent/AlertContent.js b/packages/material-ui-lab/src/AlertContent/AlertContent.js deleted file mode 100644 index 40012187907944..00000000000000 --- a/packages/material-ui-lab/src/AlertContent/AlertContent.js +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; -import { Typography } from '@material-ui/core'; -import clsx from 'clsx'; - -export const styles = () => ({ - root: { - padding: 0, - }, -}); - -const AlertContent = React.forwardRef(function AlertContent(props, ref) { - const { classes, children, className, variant = 'text' } = props; - - const content = variant === 'text' ? {children} : children; - - return ( -
- {content} -
- ); -}); - -AlertContent.propTypes = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the d.ts file and run "yarn proptypes" | - // ---------------------------------------------------------------------- - /** - * The content of the component. - */ - children: PropTypes.node, - /** - * Override or extend the styles applied to the component. - * See [CSS API](#css) below for more details. - */ - classes: PropTypes.object, - /** - * @ignore - */ - className: PropTypes.string, - /** - * @ignore - */ - variant: PropTypes.oneOf(['container', 'text']), -}; - -export default withStyles(styles, { name: 'MuiAlertContent' })(AlertContent); diff --git a/packages/material-ui-lab/src/AlertContent/AlertContent.test.js b/packages/material-ui-lab/src/AlertContent/AlertContent.test.js deleted file mode 100644 index bb6e6a2a96df1f..00000000000000 --- a/packages/material-ui-lab/src/AlertContent/AlertContent.test.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import { createMount, getClasses } from '@material-ui/core/test-utils'; -import describeConformance from '@material-ui/core/test-utils/describeConformance'; -import AlertContent from './AlertContent'; - -describe('', () => { - let mount; - let classes; - - before(() => { - mount = createMount({ strict: true }); - classes = getClasses(); - }); - - after(() => { - mount.cleanUp(); - }); - - describeConformance(, () => ({ - classes, - inheritComponent: 'div', - mount, - refInstanceof: window.HTMLDivElement, - skip: ['componentProp'], - })); -}); diff --git a/packages/material-ui-lab/src/AlertContent/index.d.ts b/packages/material-ui-lab/src/AlertContent/index.d.ts deleted file mode 100644 index 722d9d0f4a0da8..00000000000000 --- a/packages/material-ui-lab/src/AlertContent/index.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './AlertContent'; -export * from './AlertContent'; diff --git a/packages/material-ui-lab/src/AlertContent/index.js b/packages/material-ui-lab/src/AlertContent/index.js deleted file mode 100644 index d43fa30432cdc7..00000000000000 --- a/packages/material-ui-lab/src/AlertContent/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './AlertContent'; diff --git a/packages/material-ui-lab/src/AlertTitle/AlertTitle.js b/packages/material-ui-lab/src/AlertTitle/AlertTitle.js index 86edf65aa93eb7..8a9e6df7764935 100644 --- a/packages/material-ui-lab/src/AlertTitle/AlertTitle.js +++ b/packages/material-ui-lab/src/AlertTitle/AlertTitle.js @@ -4,18 +4,24 @@ import { withStyles } from '@material-ui/core/styles'; import { Typography } from '@material-ui/core'; import clsx from 'clsx'; -export const styles = () => ({ +export const styles = theme => ({ root: { - padding: '0', + fontWeight: theme.typography.fontWeightMedium, + marginTop: -2, }, }); const AlertTitle = React.forwardRef(function AlertTitle(props, ref) { - const { classes, children, className } = props; + const { classes, className, ...other } = props; + return ( - - {children} - + ); }); diff --git a/packages/material-ui-lab/src/index.d.ts b/packages/material-ui-lab/src/index.d.ts index eef53fcc516f8f..a85a26e2c624a3 100644 --- a/packages/material-ui-lab/src/index.d.ts +++ b/packages/material-ui-lab/src/index.d.ts @@ -1,12 +1,6 @@ export { default as Alert } from './Alert'; export * from './Alert'; -export { default as AlertActions } from './AlertActions'; -export * from './AlertActions'; - -export { default as AlertContent } from './AlertContent'; -export * from './AlertContent'; - export { default as AlertTitle } from './AlertTitle'; export * from './AlertTitle'; diff --git a/packages/material-ui-lab/src/index.js b/packages/material-ui-lab/src/index.js index 2a3f864d1ef5ee..0a1f15f1d9cc94 100644 --- a/packages/material-ui-lab/src/index.js +++ b/packages/material-ui-lab/src/index.js @@ -2,12 +2,6 @@ export { default as Alert } from './Alert'; export * from './Alert'; -export { default as AlertActions } from './AlertActions'; -export * from './AlertActions'; - -export { default as AlertContent } from './AlertContent'; -export * from './AlertContent'; - export { default as AlertTitle } from './AlertTitle'; export * from './AlertTitle'; diff --git a/packages/material-ui-lab/src/internal/svg-icons/CheckCircle.js b/packages/material-ui-lab/src/internal/svg-icons/CheckCircle.js deleted file mode 100644 index 6ef523ff974a32..00000000000000 --- a/packages/material-ui-lab/src/internal/svg-icons/CheckCircle.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import createSvgIcon from './createSvgIcon'; - -/** - * @ignore - internal component. - */ -export default createSvgIcon( - , - 'CheckCircle', -); diff --git a/packages/material-ui-lab/src/internal/svg-icons/Error.js b/packages/material-ui-lab/src/internal/svg-icons/Error.js deleted file mode 100644 index 9ce40dd4e2f585..00000000000000 --- a/packages/material-ui-lab/src/internal/svg-icons/Error.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import createSvgIcon from './createSvgIcon'; - -/** - * @ignore - internal component. - */ -export default createSvgIcon( - , - 'Error', -); diff --git a/packages/material-ui-lab/src/internal/svg-icons/ErrorOutlined.js b/packages/material-ui-lab/src/internal/svg-icons/ErrorOutlined.js new file mode 100644 index 00000000000000..574c23fcaba49e --- /dev/null +++ b/packages/material-ui-lab/src/internal/svg-icons/ErrorOutlined.js @@ -0,0 +1,10 @@ +import React from 'react'; +import createSvgIcon from './createSvgIcon'; + +/** + * @ignore - internal component. + */ +export default createSvgIcon( + , + 'ErrorOutlined', +); diff --git a/packages/material-ui-lab/src/internal/svg-icons/InfoOutlined.js b/packages/material-ui-lab/src/internal/svg-icons/InfoOutlined.js new file mode 100644 index 00000000000000..17a9878d733c98 --- /dev/null +++ b/packages/material-ui-lab/src/internal/svg-icons/InfoOutlined.js @@ -0,0 +1,10 @@ +import React from 'react'; +import createSvgIcon from './createSvgIcon'; + +/** + * @ignore - internal component. + */ +export default createSvgIcon( + , + 'InfoOutlined', +); diff --git a/packages/material-ui-lab/src/internal/svg-icons/Info.js b/packages/material-ui-lab/src/internal/svg-icons/ReportProblemOutlined.js similarity index 54% rename from packages/material-ui-lab/src/internal/svg-icons/Info.js rename to packages/material-ui-lab/src/internal/svg-icons/ReportProblemOutlined.js index d0ab386af74a83..da8354ff42a08a 100644 --- a/packages/material-ui-lab/src/internal/svg-icons/Info.js +++ b/packages/material-ui-lab/src/internal/svg-icons/ReportProblemOutlined.js @@ -5,6 +5,6 @@ import createSvgIcon from './createSvgIcon'; * @ignore - internal component. */ export default createSvgIcon( - , - 'Info', + , + 'ReportProblemOutlined', ); diff --git a/packages/material-ui-lab/src/internal/svg-icons/SuccessOutlined.js b/packages/material-ui-lab/src/internal/svg-icons/SuccessOutlined.js new file mode 100644 index 00000000000000..cf616d5163ce22 --- /dev/null +++ b/packages/material-ui-lab/src/internal/svg-icons/SuccessOutlined.js @@ -0,0 +1,10 @@ +import React from 'react'; +import createSvgIcon from './createSvgIcon'; + +/** + * @ignore - internal component. + */ +export default createSvgIcon( + , + 'SuccessOutlined', +); diff --git a/packages/material-ui-lab/src/internal/svg-icons/Warning.js b/packages/material-ui-lab/src/internal/svg-icons/Warning.js deleted file mode 100644 index 7cb591bfe26ce2..00000000000000 --- a/packages/material-ui-lab/src/internal/svg-icons/Warning.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import createSvgIcon from './createSvgIcon'; - -/** - * @ignore - internal component. - */ -export default createSvgIcon( - , - 'Warning', -); diff --git a/packages/material-ui/src/SnackbarContent/SnackbarContent.js b/packages/material-ui/src/SnackbarContent/SnackbarContent.js index 58a1bbfe60b401..ea799fb4543b4b 100644 --- a/packages/material-ui/src/SnackbarContent/SnackbarContent.js +++ b/packages/material-ui/src/SnackbarContent/SnackbarContent.js @@ -78,7 +78,7 @@ SnackbarContent.propTypes = { */ message: PropTypes.node, /** - * The role of the SnackbarContent. If the Snackbar requires focus + * The role attribute of the element. If the Snackbar requires focus * to be closed, the `alertdialog` role should be used instead. */ role: PropTypes.oneOf(['alert', 'alertdialog']), diff --git a/packages/material-ui/src/Typography/Typography.js b/packages/material-ui/src/Typography/Typography.js index a45630612c1c7a..052cf57fd927f3 100644 --- a/packages/material-ui/src/Typography/Typography.js +++ b/packages/material-ui/src/Typography/Typography.js @@ -237,7 +237,7 @@ Typography.propTypes = { 'inherit', ]), /** - * We are empirically mapping the variant prop to a range of different DOM element types. + * The component maps the variant prop to a range of different DOM element types. * For instance, subtitle1 to `
`. * If you wish to change that mapping, you can provide your own. * Alternatively, you can use the `component` prop. diff --git a/packages/material-ui/src/styles/createPalette.js b/packages/material-ui/src/styles/createPalette.js index bbcb4cfaeb41bd..32db973fe4c7b2 100644 --- a/packages/material-ui/src/styles/createPalette.js +++ b/packages/material-ui/src/styles/createPalette.js @@ -4,7 +4,7 @@ import grey from '../colors/grey'; import indigo from '../colors/indigo'; import pink from '../colors/pink'; import red from '../colors/red'; -import amber from '../colors/amber'; +import orange from '../colors/orange'; import blue from '../colors/blue'; import green from '../colors/green'; import { darken, getContrastRatio, lighten } from './colorManipulator'; @@ -98,9 +98,9 @@ export default function createPalette(palette) { dark: red[700], }, warning = { - light: amber[300], - main: amber[500], - dark: amber[700], + light: orange[300], + main: orange[500], + dark: orange[700], }, info = { light: blue[300], From 3e703ce3626967ffb9469335c8aeb81469ac8ef8 Mon Sep 17 00:00:00 2001 From: Chris Date: Wed, 25 Dec 2019 14:16:52 +0100 Subject: [PATCH 04/12] help with api docs --- docs/pages/api/alert.md | 2 ++ packages/material-ui-lab/src/Alert/Alert.d.ts | 4 ++-- packages/material-ui-lab/src/Alert/Alert.js | 4 ++-- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/docs/pages/api/alert.md b/docs/pages/api/alert.md index cce7ab485fb428..06d3700d343d25 100644 --- a/docs/pages/api/alert.md +++ b/docs/pages/api/alert.md @@ -27,9 +27,11 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | action | node | | The action to display. | | 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. | +| color | 'error'
| 'info'
| 'success'
| 'warning' | 'success' | Main color for the Alert, picked from theme palette. | | 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. | | role | string | 'alert' | The role attribute of the element. | +| variant | 'filled'
| 'outlined'
| 'text' | 'text' | The variant of the Alert. | The `ref` is forwarded to the root element. diff --git a/packages/material-ui-lab/src/Alert/Alert.d.ts b/packages/material-ui-lab/src/Alert/Alert.d.ts index b46a83d843bd8a..60e3b32de956a7 100644 --- a/packages/material-ui-lab/src/Alert/Alert.d.ts +++ b/packages/material-ui-lab/src/Alert/Alert.d.ts @@ -9,7 +9,7 @@ export interface AlertProps extends StandardProps>; - /* + /** * The variant of the Alert. */ 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 a1ab0ca7259f09..0ab5bf7dbb5d63 100644 --- a/packages/material-ui-lab/src/Alert/Alert.js +++ b/packages/material-ui-lab/src/Alert/Alert.js @@ -207,7 +207,7 @@ Alert.propTypes = { */ className: PropTypes.string, /** - * @ignore + * Main color for the Alert, picked from theme palette. */ color: PropTypes.oneOf(['error', 'info', 'success', 'warning']), /** @@ -231,7 +231,7 @@ Alert.propTypes = { */ role: PropTypes.string, /** - * @ignore + * The variant of the Alert. */ variant: PropTypes.oneOf(['filled', 'outlined', 'text']), }; From ec66e5993a285a08f9124cb4ec13093b3ba04a2c Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 25 Dec 2019 16:08:11 +0100 Subject: [PATCH 05/12] Add onClose prop back --- docs/pages/api/alert.md | 2 + .../pages/components/alert/ActionAlerts.js | 12 +--- .../pages/components/alert/ActionAlerts.tsx | 12 +--- .../snackbars/ConsecutiveSnackbars.tsx | 4 +- .../snackbars/CustomizedSnackbars.js | 31 +-------- .../snackbars/CustomizedSnackbars.tsx | 36 ++-------- .../components/snackbars/LongTextSnackbar.js | 16 ++--- .../components/snackbars/LongTextSnackbar.tsx | 16 ++--- packages/material-ui-lab/src/Alert/Alert.d.ts | 13 ++++ packages/material-ui-lab/src/Alert/Alert.js | 30 +++++++++ packages/material-ui/src/locale/index.js | 66 ++++++++++++++++++- 11 files changed, 129 insertions(+), 109 deletions(-) diff --git a/docs/pages/api/alert.md b/docs/pages/api/alert.md index 06d3700d343d25..99c8372354473b 100644 --- a/docs/pages/api/alert.md +++ b/docs/pages/api/alert.md @@ -27,9 +27,11 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | action | node | | The action to display. | | 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. | | 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. | +| 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. | diff --git a/docs/src/pages/components/alert/ActionAlerts.js b/docs/src/pages/components/alert/ActionAlerts.js index 2ac4344fa7a2fa..17b5b3273c21b1 100644 --- a/docs/src/pages/components/alert/ActionAlerts.js +++ b/docs/src/pages/components/alert/ActionAlerts.js @@ -1,9 +1,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { Alert } from '@material-ui/lab'; -import IconButton from '@material-ui/core/IconButton'; import Button from '@material-ui/core/Button'; -import CloseIcon from '@material-ui/icons/Close'; const useStyles = makeStyles(theme => ({ root: { @@ -19,15 +17,7 @@ export default function ActionAlerts() { return (
- - - - } - > - This is a success alert—check it out! - + {}}>This is a success alert—check it out! diff --git a/docs/src/pages/components/alert/ActionAlerts.tsx b/docs/src/pages/components/alert/ActionAlerts.tsx index 1f4cd3947668f4..36d6e183589eaf 100644 --- a/docs/src/pages/components/alert/ActionAlerts.tsx +++ b/docs/src/pages/components/alert/ActionAlerts.tsx @@ -1,9 +1,7 @@ import React from 'react'; import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; import { Alert } from '@material-ui/lab'; -import IconButton from '@material-ui/core/IconButton'; import Button from '@material-ui/core/Button'; -import CloseIcon from '@material-ui/icons/Close'; const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -21,15 +19,7 @@ export default function ActionAlerts() { return (
- - - - } - > - This is a success alert—check it out! - + {}}>This is a success alert—check it out! diff --git a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx index cd426630a2ba39..383f3e98a9cba5 100644 --- a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx +++ b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx @@ -1,4 +1,4 @@ -import React, { SyntheticEvent } from 'react'; +import React from 'react'; import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import Snackbar from '@material-ui/core/Snackbar'; @@ -50,7 +50,7 @@ export default function ConsecutiveSnackbars() { } }; - const handleClose = (event: SyntheticEvent | MouseEvent, reason?: string) => { + const handleClose = (event: React.SyntheticEvent | MouseEvent, reason?: string) => { if (reason === 'clickaway') { return; } diff --git a/docs/src/pages/components/snackbars/CustomizedSnackbars.js b/docs/src/pages/components/snackbars/CustomizedSnackbars.js index c08bd986f5eaf3..72e318c8110dec 100644 --- a/docs/src/pages/components/snackbars/CustomizedSnackbars.js +++ b/docs/src/pages/components/snackbars/CustomizedSnackbars.js @@ -1,32 +1,13 @@ import React from 'react'; -import PropTypes from 'prop-types'; import Button from '@material-ui/core/Button'; -import CloseIcon from '@material-ui/icons/Close'; -import IconButton from '@material-ui/core/IconButton'; import Snackbar from '@material-ui/core/Snackbar'; import MuiAlert from '@material-ui/lab/Alert'; import { makeStyles } from '@material-ui/core/styles'; function Alert(props) { - const { onClose, ...other } = props; - return ( - - - - } - {...other} - /> - ); + return ; } -Alert.propTypes = { - onClose: PropTypes.func, -}; - const useStyles = makeStyles(theme => ({ root: { width: '100%', @@ -57,15 +38,7 @@ export default function CustomizedSnackbars() { - + This is a success message! diff --git a/docs/src/pages/components/snackbars/CustomizedSnackbars.tsx b/docs/src/pages/components/snackbars/CustomizedSnackbars.tsx index c9ca0cb60763bd..b1acdca203d093 100644 --- a/docs/src/pages/components/snackbars/CustomizedSnackbars.tsx +++ b/docs/src/pages/components/snackbars/CustomizedSnackbars.tsx @@ -1,29 +1,11 @@ -import React, { SyntheticEvent } from 'react'; +import React from 'react'; import Button from '@material-ui/core/Button'; -import CloseIcon from '@material-ui/icons/Close'; -import IconButton from '@material-ui/core/IconButton'; import Snackbar from '@material-ui/core/Snackbar'; import MuiAlert, { AlertProps } from '@material-ui/lab/Alert'; import { makeStyles, Theme } from '@material-ui/core/styles'; -export interface Props extends AlertProps { - onClose?: () => void; -} - -function Alert(props: Props) { - const { onClose, ...other } = props; - return ( - - - - } - {...other} - /> - ); +function Alert(props: AlertProps) { + return ; } const useStyles = makeStyles((theme: Theme) => ({ @@ -43,7 +25,7 @@ export default function CustomizedSnackbars() { setOpen(true); }; - const handleClose = (event?: SyntheticEvent, reason?: string) => { + const handleClose = (event?: React.SyntheticEvent, reason?: string) => { if (reason === 'clickaway') { return; } @@ -56,15 +38,7 @@ export default function CustomizedSnackbars() { - + This is a success message! diff --git a/docs/src/pages/components/snackbars/LongTextSnackbar.js b/docs/src/pages/components/snackbars/LongTextSnackbar.js index dcb232c218ced7..685e5ee298900e 100644 --- a/docs/src/pages/components/snackbars/LongTextSnackbar.js +++ b/docs/src/pages/components/snackbars/LongTextSnackbar.js @@ -12,9 +12,9 @@ const action = ( const useStyles = makeStyles(theme => ({ root: { maxWidth: 600, - }, - snackbar: { - margin: theme.spacing(1), + '& > * + *': { + marginTop: theme.spacing(2), + }, }, })); @@ -23,21 +23,15 @@ export default function LongTextSnackbar() { return (
- + + - createStyles({ root: { maxWidth: 600, - }, - snackbar: { - margin: theme.spacing(1), + '& > * + *': { + marginTop: theme.spacing(2), + }, }, }), ); @@ -25,21 +25,15 @@ export default function LongTextSnackbar() { return (
- + + - >; + /** + * Callback fired when the component requests to be closed. + * When provided and no action prop is set, a close icon is displayed. + * + * @param {object} event The event source of the callback. + */ + onClose?: (event: React.SyntheticEvent) => void; /** * The variant of the Alert. */ diff --git a/packages/material-ui-lab/src/Alert/Alert.js b/packages/material-ui-lab/src/Alert/Alert.js index 0ab5bf7dbb5d63..22983fc2e2adde 100644 --- a/packages/material-ui-lab/src/Alert/Alert.js +++ b/packages/material-ui-lab/src/Alert/Alert.js @@ -7,6 +7,8 @@ import SuccessOutlinedIcon from '../internal/svg-icons/SuccessOutlined'; import ReportProblemOutlinedIcon from '../internal/svg-icons/ReportProblemOutlined'; import ErrorOutlinedIcon from '../internal/svg-icons/ErrorOutlined'; import InfoOutlinedIcon from '../internal/svg-icons/InfoOutlined'; +import CloseIcon from '../internal/svg-icons/Close'; +import IconButton from '@material-ui/core/IconButton'; import { capitalize } from '@material-ui/core/utils'; export const styles = theme => ({ @@ -156,9 +158,11 @@ const Alert = React.forwardRef(function Alert(props, ref) { children, classes, className, + closeText = 'Close', color = 'success', icon, iconMapping = defaultIconMapping, + onClose, role = 'alert', variant = 'text', ...other @@ -180,6 +184,19 @@ const Alert = React.forwardRef(function Alert(props, ref) { ) : null}
{children}
{action != null ?
{action}
: null} + {action == null && onClose ? ( +
+ + + +
+ ) : null} ); }); @@ -206,6 +223,12 @@ Alert.propTypes = { * @ignore */ className: PropTypes.string, + /** + * Override the default text for the *close popup* icon button. + * + * For localization purposes, you can use the provided [translations](/guides/localization/). + */ + closeText: PropTypes.string, /** * Main color for the Alert, picked from theme palette. */ @@ -226,6 +249,13 @@ Alert.propTypes = { success: PropTypes.node, warning: PropTypes.node, }), + /** + * Callback fired when the component requests to be closed. + * When provided and no action prop is set, a close icon is displayed. + * + * @param {object} event The event source of the callback. + */ + onClose: PropTypes.func, /** * The role attribute of the element. */ diff --git a/packages/material-ui/src/locale/index.js b/packages/material-ui/src/locale/index.js index 88186e8005b087..ff2e167148ddac 100644 --- a/packages/material-ui/src/locale/index.js +++ b/packages/material-ui/src/locale/index.js @@ -26,6 +26,9 @@ export const azAZ = { noOptionsText: 'Seçimlər mövcud deyil', openText: 'Открыть', }, + MuiAlert: { + closeText: 'Bağlamaq', + }, }, }; @@ -56,6 +59,9 @@ export const csCZ = { noOptionsText: 'Žádné možnosti', openText: 'Otevřít', }, + MuiAlert: { + closeText: 'Zavřít', + }, }, }; @@ -78,13 +84,15 @@ export const deDE = { noOptionsText: 'Keine Optionen', openText: 'Öffnen', }, + MuiAlert: { + closeText: 'Schließen', + }, }, }; // default -export const enUS = {}; - -/** +export const enUS = { + /** props: { MuiTablePagination: { backIconButtonText: 'Previous page', @@ -103,8 +111,12 @@ export const enUS = {}; noOptionsText: 'No options', openText: 'Open', }, + MuiAlert: { + closeText: 'Close', + }, }, */ +}; export const esES = { props: { @@ -125,6 +137,9 @@ export const esES = { noOptionsText: 'Sin opciones', openText: 'Abierto', }, + MuiAlert: { + closeText: 'Cerrar', + }, }, }; @@ -147,6 +162,9 @@ export const faIR = { noOptionsText: 'بی‌نتیجه', openText: 'بازکردن', }, + MuiAlert: { + closeText: 'بستن', + }, }, }; @@ -169,6 +187,9 @@ export const frFR = { noOptionsText: 'Pas de résultats', openText: 'Ouvrir', }, + MuiAlert: { + closeText: 'Fermer', + }, }, }; @@ -192,6 +213,9 @@ export const idID = { noOptionsText: 'Tidak ada opsi', openText: 'Buka', }, + MuiAlert: { + closeText: 'Tutup', + }, }, }; @@ -214,6 +238,9 @@ export const itIT = { noOptionsText: 'Nessuna opzione', openText: 'Apri', }, + MuiAlert: { + closeText: 'Chiudi', + }, }, }; @@ -236,6 +263,9 @@ export const jaJP = { noOptionsText: '結果がありません', openText: '開いた', }, + MuiAlert: { + closeText: '閉じる', + }, }, }; @@ -280,6 +310,9 @@ export const nlNL = { noOptionsText: 'Geen opties', openText: 'Openen', }, + MuiAlert: { + closeText: 'Sluiten', + }, }, }; @@ -313,6 +346,9 @@ export const plPL = { noOptionsText: 'Brak opcji', openText: 'Otwórz', }, + MuiAlert: { + closeText: 'Zamknij', + }, }, }; @@ -335,6 +371,9 @@ export const ptBR = { noOptionsText: 'Sem opções', openText: 'Abrir', }, + MuiAlert: { + closeText: 'Fechar', + }, }, }; @@ -379,6 +418,9 @@ export const roRO = { noOptionsText: 'Nicio opțiune', openText: 'Deschide', }, + MuiAlert: { + closeText: 'Închide', + }, }, }; @@ -412,6 +454,9 @@ export const ruRU = { noOptionsText: 'Нет доступных вариантов', openText: 'Открыть', }, + MuiAlert: { + closeText: 'Закрыть', + }, }, }; @@ -442,6 +487,9 @@ export const skSK = { noOptionsText: 'Žiadne možnosti', openText: 'Otvoriť', }, + MuiAlert: { + closeText: 'Zavrieť', + }, }, }; @@ -464,6 +512,9 @@ export const svSE = { noOptionsText: 'Inga alternativ', openText: 'Öppen', }, + MuiAlert: { + closeText: 'Stäng', + }, }, }; @@ -487,6 +538,9 @@ export const trTR = { noOptionsText: 'Seçenek yok', openText: 'Aç', }, + MuiAlert: { + closeText: 'Kapat', + }, }, }; @@ -520,6 +574,9 @@ export const ukUA = { noOptionsText: 'Немає варіантів', openText: 'Розгорнути', }, + MuiAlert: { + closeText: 'Згорнути', + }, }, }; @@ -542,5 +599,8 @@ export const zhCN = { noOptionsText: '没有选择', openText: '打开', }, + MuiAlert: { + closeText: '关', + }, }, }; From 1a1dee05d45416d24c92470e60a443017ccc608a Mon Sep 17 00:00:00 2001 From: Dimitri Mitropoulos Date: Thu, 26 Dec 2019 10:22:04 -0500 Subject: [PATCH 06/12] changes error icon to `ErrorOutline` from `ErrorOutlined` --- packages/material-ui-lab/src/Alert/Alert.js | 4 ++-- .../src/internal/svg-icons/ErrorOutline.js | 10 ++++++++++ .../src/internal/svg-icons/ErrorOutlined.js | 10 ---------- 3 files changed, 12 insertions(+), 12 deletions(-) create mode 100644 packages/material-ui-lab/src/internal/svg-icons/ErrorOutline.js delete mode 100644 packages/material-ui-lab/src/internal/svg-icons/ErrorOutlined.js diff --git a/packages/material-ui-lab/src/Alert/Alert.js b/packages/material-ui-lab/src/Alert/Alert.js index 22983fc2e2adde..ce272e809442ed 100644 --- a/packages/material-ui-lab/src/Alert/Alert.js +++ b/packages/material-ui-lab/src/Alert/Alert.js @@ -5,7 +5,7 @@ import { withStyles, lighten, darken } from '@material-ui/core/styles'; import Paper from '@material-ui/core/Paper'; import SuccessOutlinedIcon from '../internal/svg-icons/SuccessOutlined'; import ReportProblemOutlinedIcon from '../internal/svg-icons/ReportProblemOutlined'; -import ErrorOutlinedIcon from '../internal/svg-icons/ErrorOutlined'; +import ErrorOutlineIcon from '../internal/svg-icons/ErrorOutline'; import InfoOutlinedIcon from '../internal/svg-icons/InfoOutlined'; import CloseIcon from '../internal/svg-icons/Close'; import IconButton from '@material-ui/core/IconButton'; @@ -148,7 +148,7 @@ export const styles = theme => ({ const defaultIconMapping = { success: , warning: , - error: , + error: , info: , }; diff --git a/packages/material-ui-lab/src/internal/svg-icons/ErrorOutline.js b/packages/material-ui-lab/src/internal/svg-icons/ErrorOutline.js new file mode 100644 index 00000000000000..c01099ed83f464 --- /dev/null +++ b/packages/material-ui-lab/src/internal/svg-icons/ErrorOutline.js @@ -0,0 +1,10 @@ +import React from 'react'; +import createSvgIcon from './createSvgIcon'; + +/** + * @ignore - internal component. + */ +export default createSvgIcon( + , + 'ErrorOutlined', +); diff --git a/packages/material-ui-lab/src/internal/svg-icons/ErrorOutlined.js b/packages/material-ui-lab/src/internal/svg-icons/ErrorOutlined.js deleted file mode 100644 index 574c23fcaba49e..00000000000000 --- a/packages/material-ui-lab/src/internal/svg-icons/ErrorOutlined.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import createSvgIcon from './createSvgIcon'; - -/** - * @ignore - internal component. - */ -export default createSvgIcon( - , - 'ErrorOutlined', -); From fc6eaff2fc9044d9572c77be80e787796399a362 Mon Sep 17 00:00:00 2001 From: Dimitri Mitropoulos Date: Thu, 26 Dec 2019 10:27:26 -0500 Subject: [PATCH 07/12] updates description for `action` prop --- docs/pages/api/alert.md | 2 +- docs/pages/api/snackbar-content.md | 2 +- docs/pages/api/snackbar.md | 2 +- packages/material-ui-lab/src/Alert/Alert.d.ts | 2 +- packages/material-ui-lab/src/Alert/Alert.js | 2 +- packages/material-ui/src/Snackbar/Snackbar.js | 2 +- packages/material-ui/src/SnackbarContent/SnackbarContent.js | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/pages/api/alert.md b/docs/pages/api/alert.md index 99c8372354473b..85d57b46c4764c 100644 --- a/docs/pages/api/alert.md +++ b/docs/pages/api/alert.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. | +| action | node | | The action to display. It renders after the message, at the end of the alert. | | 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/). | diff --git a/docs/pages/api/snackbar-content.md b/docs/pages/api/snackbar-content.md index ae4e725e2c938d..cfcb48b3920b02 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. | +| action | node | | The action to display. It renders after the message, at the end of the alert. | | 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/pages/api/snackbar.md b/docs/pages/api/snackbar.md index 4384127502c3da..2e70a52937bd68 100644 --- a/docs/pages/api/snackbar.md +++ b/docs/pages/api/snackbar.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. | +| action | node | | The action to display. It renders after the message, at the end of the alert. | | anchorOrigin | { horizontal: 'left'
| 'center'
| 'right', vertical: 'top'
| 'bottom' } | { vertical: 'bottom', horizontal: 'center' } | The anchor of the `Snackbar`. | | autoHideDuration | number | | The number of milliseconds to wait before automatically calling the `onClose` function. `onClose` should then set the state of the `open` prop to hide the Snackbar. This behavior is disabled by default with the `null` value. | | children | element | | Replace the `SnackbarContent` component. | diff --git a/packages/material-ui-lab/src/Alert/Alert.d.ts b/packages/material-ui-lab/src/Alert/Alert.d.ts index 0fbc324f90e694..c9324f90961e27 100644 --- a/packages/material-ui-lab/src/Alert/Alert.d.ts +++ b/packages/material-ui-lab/src/Alert/Alert.d.ts @@ -6,7 +6,7 @@ export type Color = 'success' | 'info' | 'warning' | 'error'; export interface AlertProps extends StandardProps { /** - * The action to display. + * The action to display. It renders after the message, at the end of the alert. */ action?: React.ReactNode; /** diff --git a/packages/material-ui-lab/src/Alert/Alert.js b/packages/material-ui-lab/src/Alert/Alert.js index ce272e809442ed..5a3a39ff13ad70 100644 --- a/packages/material-ui-lab/src/Alert/Alert.js +++ b/packages/material-ui-lab/src/Alert/Alert.js @@ -207,7 +207,7 @@ Alert.propTypes = { // | To update them edit the d.ts file and run "yarn proptypes" | // ---------------------------------------------------------------------- /** - * The action to display. + * The action to display. It renders after the message, at the end of the alert. */ action: PropTypes.node, /** diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js index 100f8e62218e6a..631f21a846a436 100644 --- a/packages/material-ui/src/Snackbar/Snackbar.js +++ b/packages/material-ui/src/Snackbar/Snackbar.js @@ -253,7 +253,7 @@ const Snackbar = React.forwardRef(function Snackbar(props, ref) { Snackbar.propTypes = { /** - * The action to display. + * The action to display. It renders after the message, at the end of the alert. */ action: PropTypes.node, /** diff --git a/packages/material-ui/src/SnackbarContent/SnackbarContent.js b/packages/material-ui/src/SnackbarContent/SnackbarContent.js index ea799fb4543b4b..9969f4c69db053 100644 --- a/packages/material-ui/src/SnackbarContent/SnackbarContent.js +++ b/packages/material-ui/src/SnackbarContent/SnackbarContent.js @@ -61,7 +61,7 @@ const SnackbarContent = React.forwardRef(function SnackbarContent(props, ref) { SnackbarContent.propTypes = { /** - * The action to display. + * The action to display. It renders after the message, at the end of the alert. */ action: PropTypes.node, /** From a5fd7e9a1730e6fd41dad03f2427681690d655b4 Mon Sep 17 00:00:00 2001 From: Dimitri Mitropoulos Date: Thu, 26 Dec 2019 11:07:51 -0500 Subject: [PATCH 08/12] Update packages/material-ui-lab/src/internal/svg-icons/ErrorOutline.js Co-Authored-By: Olivier Tassinari --- packages/material-ui-lab/src/internal/svg-icons/ErrorOutline.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/internal/svg-icons/ErrorOutline.js b/packages/material-ui-lab/src/internal/svg-icons/ErrorOutline.js index c01099ed83f464..d4054b6d409fd2 100644 --- a/packages/material-ui-lab/src/internal/svg-icons/ErrorOutline.js +++ b/packages/material-ui-lab/src/internal/svg-icons/ErrorOutline.js @@ -6,5 +6,5 @@ import createSvgIcon from './createSvgIcon'; */ export default createSvgIcon( , - 'ErrorOutlined', + 'ErrorOutline', ); From 6def062a63b3f5e28083299ac67238ae5c0c59ec Mon Sep 17 00:00:00 2001 From: Dimitri Mitropoulos Date: Thu, 26 Dec 2019 11:14:44 -0500 Subject: [PATCH 09/12] Update packages/material-ui/src/SnackbarContent/SnackbarContent.js Co-Authored-By: Olivier Tassinari --- packages/material-ui/src/SnackbarContent/SnackbarContent.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/SnackbarContent/SnackbarContent.js b/packages/material-ui/src/SnackbarContent/SnackbarContent.js index 9969f4c69db053..1e73cd75931198 100644 --- a/packages/material-ui/src/SnackbarContent/SnackbarContent.js +++ b/packages/material-ui/src/SnackbarContent/SnackbarContent.js @@ -61,7 +61,7 @@ const SnackbarContent = React.forwardRef(function SnackbarContent(props, ref) { SnackbarContent.propTypes = { /** - * The action to display. It renders after the message, at the end of the alert. + * The action to display. It renders after the message, at the end of the snackbar. */ action: PropTypes.node, /** From 8bbebeb6ab2bae41f5c9a2fb8ba1c53fbf85864c Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 31 Dec 2019 13:29:28 +0100 Subject: [PATCH 10/12] 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']), }; From 088cf5d8390fcf194f8cdc14248224f625444e59 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Tue, 31 Dec 2019 17:48:09 +0000 Subject: [PATCH 11/12] [Alert] Fix demo message dash spacing --- docs/src/pages/components/alert/ActionAlerts.js | 4 ++-- docs/src/pages/components/alert/ActionAlerts.tsx | 4 ++-- docs/src/pages/components/alert/ColorAlerts.js | 2 +- docs/src/pages/components/alert/ColorAlerts.tsx | 2 +- docs/src/pages/components/alert/DescriptionAlerts.js | 8 ++++---- docs/src/pages/components/alert/DescriptionAlerts.tsx | 8 ++++---- docs/src/pages/components/alert/FilledAlerts.js | 8 ++++---- docs/src/pages/components/alert/FilledAlerts.tsx | 8 ++++---- docs/src/pages/components/alert/IconAlerts.js | 6 +++--- docs/src/pages/components/alert/IconAlerts.tsx | 6 +++--- docs/src/pages/components/alert/OutlinedAlerts.js | 8 ++++---- docs/src/pages/components/alert/OutlinedAlerts.tsx | 8 ++++---- docs/src/pages/components/alert/SimpleAlerts.js | 8 ++++---- docs/src/pages/components/alert/SimpleAlerts.tsx | 8 ++++---- 14 files changed, 44 insertions(+), 44 deletions(-) diff --git a/docs/src/pages/components/alert/ActionAlerts.js b/docs/src/pages/components/alert/ActionAlerts.js index 17b5b3273c21b1..71a615d6ba0fb7 100644 --- a/docs/src/pages/components/alert/ActionAlerts.js +++ b/docs/src/pages/components/alert/ActionAlerts.js @@ -17,7 +17,7 @@ export default function ActionAlerts() { return (
- {}}>This is a success alert—check it out! + {}}>This is a success alert — check it out! @@ -25,7 +25,7 @@ export default function ActionAlerts() { } > - This is a success alert—check it out! + This is a success alert — check it out!
); diff --git a/docs/src/pages/components/alert/ActionAlerts.tsx b/docs/src/pages/components/alert/ActionAlerts.tsx index 36d6e183589eaf..dcb953f72da608 100644 --- a/docs/src/pages/components/alert/ActionAlerts.tsx +++ b/docs/src/pages/components/alert/ActionAlerts.tsx @@ -19,7 +19,7 @@ export default function ActionAlerts() { return (
- {}}>This is a success alert—check it out! + {}}>This is a success alert — check it out! @@ -27,7 +27,7 @@ export default function ActionAlerts() { } > - This is a success alert—check it out! + This is a success alert — check it out!
); diff --git a/docs/src/pages/components/alert/ColorAlerts.js b/docs/src/pages/components/alert/ColorAlerts.js index c18d9f71afdab1..95a029e070f1e5 100644 --- a/docs/src/pages/components/alert/ColorAlerts.js +++ b/docs/src/pages/components/alert/ColorAlerts.js @@ -17,7 +17,7 @@ export default function ColorAlerts() { return (
- This is a success alert—check it out! + 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 index 02d3b5e04f5581..88b418d7a4273f 100644 --- a/docs/src/pages/components/alert/ColorAlerts.tsx +++ b/docs/src/pages/components/alert/ColorAlerts.tsx @@ -19,7 +19,7 @@ export default function ColorAlerts() { return (
- This is a success alert—check it out! + 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 ab91fff54a4bd8..f0b2a3bbcbb2b5 100644 --- a/docs/src/pages/components/alert/DescriptionAlerts.js +++ b/docs/src/pages/components/alert/DescriptionAlerts.js @@ -18,19 +18,19 @@ export default function DescriptionAlerts() {
Error - This is an error alert—check it out! + This is an error alert — check it out! Warning - This is a warning alert—check it out! + This is a warning alert — check it out! Info - This is an info alert—check it out! + This is an info alert — check it out! Success - This is a success alert—check it out! + 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 830983bdedd32b..f7a754d8e0f17d 100644 --- a/docs/src/pages/components/alert/DescriptionAlerts.tsx +++ b/docs/src/pages/components/alert/DescriptionAlerts.tsx @@ -20,19 +20,19 @@ export default function DescriptionAlerts() {
Error - This is an error alert—check it out! + This is an error alert — check it out! Warning - This is a warning alert—check it out! + This is a warning alert — check it out! Info - This is an info alert—check it out! + This is an info alert — check it out! Success - This is a success alert—check it out! + 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 c09e42d8f77253..a6d41c46cea7d6 100644 --- a/docs/src/pages/components/alert/FilledAlerts.js +++ b/docs/src/pages/components/alert/FilledAlerts.js @@ -17,16 +17,16 @@ export default function SimpleAlerts() { return (
- This is an error alert—check it out! + This is an error alert — check it out! - This is a warning alert—check it out! + This is a warning alert — check it out! - This is an info alert—check it out! + This is an info 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/FilledAlerts.tsx b/docs/src/pages/components/alert/FilledAlerts.tsx index 887c1ed944f801..c0e9acbe5ce3eb 100644 --- a/docs/src/pages/components/alert/FilledAlerts.tsx +++ b/docs/src/pages/components/alert/FilledAlerts.tsx @@ -19,16 +19,16 @@ export default function SimpleAlerts() { return (
- This is an error alert—check it out! + This is an error alert — check it out! - This is a warning alert—check it out! + This is a warning alert — check it out! - This is an info alert—check it out! + This is an info 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.js b/docs/src/pages/components/alert/IconAlerts.js index abdfd44a64a8fc..b64fb4486bd360 100644 --- a/docs/src/pages/components/alert/IconAlerts.js +++ b/docs/src/pages/components/alert/IconAlerts.js @@ -19,13 +19,13 @@ export default function IconAlerts() { return (
} 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! + 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 fd18fb9e77861e..bb7a1d4a56ee1d 100644 --- a/docs/src/pages/components/alert/IconAlerts.tsx +++ b/docs/src/pages/components/alert/IconAlerts.tsx @@ -21,13 +21,13 @@ export default function IconAlerts() { return (
} 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! + 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 e69b8191eaed79..17f40679bc19d9 100644 --- a/docs/src/pages/components/alert/OutlinedAlerts.js +++ b/docs/src/pages/components/alert/OutlinedAlerts.js @@ -17,16 +17,16 @@ export default function SimpleAlerts() { return (
- This is an error alert—check it out! + This is an error alert — check it out! - This is a warning alert—check it out! + This is a warning alert — check it out! - This is an info alert—check it out! + This is an info 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.tsx b/docs/src/pages/components/alert/OutlinedAlerts.tsx index 860b4215489486..88e89e05dee943 100644 --- a/docs/src/pages/components/alert/OutlinedAlerts.tsx +++ b/docs/src/pages/components/alert/OutlinedAlerts.tsx @@ -19,16 +19,16 @@ export default function SimpleAlerts() { return (
- This is an error alert—check it out! + This is an error alert — check it out! - This is a warning alert—check it out! + This is a warning alert — check it out! - This is an info alert—check it out! + This is an info 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/SimpleAlerts.js b/docs/src/pages/components/alert/SimpleAlerts.js index 9ff6a18e61f1f5..78cb2424668517 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 4b264f60eaa1e8..88a6c45579a5c4 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!
); } From 5795edc9fb8600daf37379e80a7578fe56bff135 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Wed, 1 Jan 2020 18:08:22 +0100 Subject: [PATCH 12/12] review --- docs/pages/api/alert.md | 22 +++++------ docs/pages/api/snackbar-content.md | 2 +- docs/pages/api/snackbar.md | 2 +- docs/src/pages/components/alert/alert.md | 30 ++++++++++---- packages/material-ui-lab/src/Alert/Alert.d.ts | 29 +++++++------- packages/material-ui-lab/src/Alert/Alert.js | 39 ++++++++++--------- packages/material-ui/src/Snackbar/Snackbar.js | 2 +- .../src/SnackbarContent/SnackbarContent.js | 5 +-- 8 files changed, 73 insertions(+), 58 deletions(-) diff --git a/docs/pages/api/alert.md b/docs/pages/api/alert.md index ec5796727a768c..9e75271b5427ae 100644 --- a/docs/pages/api/alert.md +++ b/docs/pages/api/alert.md @@ -27,14 +27,14 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | action | node | | The action to display. It renders after the message, at the end of the alert. | | 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/). | +| closeText | string | 'Close' | Override the default label for the *close popup* icon button.
For localization purposes, you can use the provided [translations](/guides/localization/). | | 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: <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. | -| severity | 'error'
| 'info'
| 'success'
| 'warning' | 'success' | The severity for the alert. | -| variant | 'filled'
| 'outlined'
| 'text' | 'text' | The variant to use. | +| icon | node | | Override the icon displayed before the children. Unless provided, the icon is mapped to the value of the `severity` 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 `severity` prop to a range of different icons, for instance success to ``. If you wish to change this mapping, you can provide your own. Alternatively, you can use the `icon` prop to override the icon displayed. | +| onClose | func | | Callback fired when the component requests to be closed. When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | +| role | string | 'alert' | The ARIA role attribute of the element. | +| severity | 'error'
| 'info'
| 'success'
| 'warning' | 'success' | The severity of the alert. This defines the color and icon used. | +| variant | 'filled'
| 'outlined'
| 'standard' | 'standard' | The variant to use. | The `ref` is forwarded to the root element. @@ -48,10 +48,10 @@ Any other props supplied will be provided to the root element ([Paper](/api/pape | Rule name | Global class | Description | |:-----|:-------------|:------------| | root | .MuiAlert-root | Styles applied to the root element. -| textSuccess | .MuiAlert-textSuccess | Styles applied to the root element if `variant="text"` and `color="success"`. -| textInfo | .MuiAlert-textInfo | Styles applied to the root element if `variant="text"` and `color="info"`. -| textWarning | .MuiAlert-textWarning | Styles applied to the root element if `variant="text"` and `color="warning"`. -| textError | .MuiAlert-textError | Styles applied to the root element if `variant="text"` and `color="error"`. +| standardSuccess | .MuiAlert-standardSuccess | Styles applied to the root element if `variant="standard"` and `color="success"`. +| standardInfo | .MuiAlert-standardInfo | Styles applied to the root element if `variant="standard"` and `color="info"`. +| standardWarning | .MuiAlert-standardWarning | Styles applied to the root element if `variant="standard"` and `color="warning"`. +| standardError | .MuiAlert-standardError | Styles applied to the root element if `variant="standard"` and `color="error"`. | outlinedSuccess | .MuiAlert-outlinedSuccess | Styles applied to the root element if `variant="outlined"` and `color="success"`. | outlinedInfo | .MuiAlert-outlinedInfo | Styles applied to the root element if `variant="outlined"` and `color="info"`. | outlinedWarning | .MuiAlert-outlinedWarning | Styles applied to the root element if `variant="outlined"` and `color="warning"`. diff --git a/docs/pages/api/snackbar-content.md b/docs/pages/api/snackbar-content.md index c3c2218cf15c5c..86b918e2469218 100644 --- a/docs/pages/api/snackbar-content.md +++ b/docs/pages/api/snackbar-content.md @@ -27,7 +27,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | 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. | +| role | string | 'alert' | The ARIA role attribute of the element. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api/snackbar.md b/docs/pages/api/snackbar.md index 2e70a52937bd68..095602ee0399e6 100644 --- a/docs/pages/api/snackbar.md +++ b/docs/pages/api/snackbar.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. | | anchorOrigin | { horizontal: 'left'
| 'center'
| 'right', vertical: 'top'
| 'bottom' } | { vertical: 'bottom', horizontal: 'center' } | The anchor of the `Snackbar`. | | autoHideDuration | number | | The number of milliseconds to wait before automatically calling the `onClose` function. `onClose` should then set the state of the `open` prop to hide the Snackbar. This behavior is disabled by default with the `null` value. | | children | element | | Replace the `SnackbarContent` component. | diff --git a/docs/src/pages/components/alert/alert.md b/docs/src/pages/components/alert/alert.md index 770418e9b19d1a..b71c0e3254c6ea 100644 --- a/docs/src/pages/components/alert/alert.md +++ b/docs/src/pages/components/alert/alert.md @@ -5,39 +5,50 @@ components: Alert # Alert -

An alert displays a prominent message and related optional actions.

+

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

## Simple alerts +The alert offers four severity levels that set a distinctive icon and color. + {{"demo": "pages/components/alert/SimpleAlerts.js"}} ## Description -You can use the `AlertTitle` component to display a title and a description. +You can use the `AlertTitle` component to display a formatted title above the content. {{"demo": "pages/components/alert/DescriptionAlerts.js"}} ## Actions +An alert can have an action, such as a close or undo button. +It is rendered after the message, at the end of the alert. + +If an `onClose` callback is provided and no `action` prop is set, a close icon is displayed. The `action` prop can be used to provide an alternative action, for example using a Button or IconButton. + {{"demo": "pages/components/alert/ActionAlerts.js"}} ### Transition -You can use the [transition components](/components/transitions/), like `Collapse` to transition the appearance of the alert. +You can use a [transition component](/components/transitions/) such as `Collapse` to transition the appearance of the alert. {{"demo": "pages/components/alert/TransitionAlerts.js"}} ## Icons The `icon` prop allows you to add an icon to the beginning of the alert component. -This will override the default color icon. -You can change the default color icon mapping with the `iconMapping` prop. +This will override the default icon for the specified severity. + +You can change the default severity to icon mapping with the `iconMapping` prop. This can be defined globally using [theme customization](/customization/globals/#default-props). + Setting the icon prop to false will remove the icon altogether. {{"demo": "pages/components/alert/IconAlerts.js"}} ## Variants +Two additional variants are available – outlined, and filled: + ### Outlined {{"demo": "pages/components/alert/OutlinedAlerts.js"}} @@ -52,7 +63,7 @@ You can use the Snackbar to [display a toast](/components/snackbars/#customized- ## Color -You can use a different severity and color value. +The `color` prop will override the default color for the specified severity. {{"demo": "pages/components/alert/ColorAlerts.js"}} @@ -60,5 +71,8 @@ You can use a different severity and color value. (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#alert) -The component sets `role="alert"` by default. -When the component is dynamically displayed, the assistive technology should read the content immediately. +When the component is dynamically displayed, the content is automatically announced by most screen readers. At this time, screen readers do not inform users of alerts that are present when the page loads. + +Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (for example the visible text), or is included through alternative means, such as additional hidden text. + +Actions must have a tab index of 0 so that they can be reached by keyboard-only users. diff --git a/packages/material-ui-lab/src/Alert/Alert.d.ts b/packages/material-ui-lab/src/Alert/Alert.d.ts index d08f233d15a6e2..c164d47df40f76 100644 --- a/packages/material-ui-lab/src/Alert/Alert.d.ts +++ b/packages/material-ui-lab/src/Alert/Alert.d.ts @@ -10,7 +10,7 @@ export interface AlertProps extends StandardProps`. - * If you wish to change that mapping, you can provide your own. - * Alternatively, you can use the `icon` prop. + * The component maps the `severity` prop to a range of different icons, + * for instance success to ``. + * If you wish to change this mapping, you can provide your own. + * Alternatively, you can use the `icon` prop to override the icon displayed. */ iconMapping?: Partial>; /** * Callback fired when the component requests to be closed. - * When provided and no action prop is set, a close icon is displayed. + * When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked. * * @param {object} event The event source of the callback. */ @@ -48,15 +49,15 @@ export interface AlertProps extends StandardProps ({ display: 'flex', padding: '6px 16px', }, - /* Styles applied to the root element if `variant="text"` and `color="success"`. */ - textSuccess: { + /* Styles applied to the root element if `variant="standard"` and `color="success"`. */ + standardSuccess: { color: darken(theme.palette.success.main, 0.6), backgroundColor: lighten(theme.palette.success.main, 0.9), '& $icon': { color: theme.palette.success.main, }, }, - /* Styles applied to the root element if `variant="text"` and `color="info"`. */ - textInfo: { + /* Styles applied to the root element if `variant="standard"` and `color="info"`. */ + standardInfo: { color: darken(theme.palette.info.main, 0.6), backgroundColor: lighten(theme.palette.info.main, 0.9), '& $icon': { color: theme.palette.info.main, }, }, - /* Styles applied to the root element if `variant="text"` and `color="warning"`. */ - textWarning: { + /* Styles applied to the root element if `variant="standard"` and `color="warning"`. */ + standardWarning: { color: darken(theme.palette.warning.main, 0.6), backgroundColor: lighten(theme.palette.warning.main, 0.9), '& $icon': { color: theme.palette.warning.main, }, }, - /* Styles applied to the root element if `variant="text"` and `color="error"`. */ - textError: { + /* Styles applied to the root element if `variant="standard"` and `color="error"`. */ + standardError: { color: darken(theme.palette.error.main, 0.6), backgroundColor: lighten(theme.palette.error.main, 0.9), '& $icon': { @@ -165,7 +165,7 @@ const Alert = React.forwardRef(function Alert(props, ref) { onClose, role = 'alert', severity = 'success', - variant = 'text', + variant = 'standard', ...other } = props; @@ -229,7 +229,7 @@ Alert.propTypes = { */ className: PropTypes.string, /** - * Override the default text for the *close popup* icon button. + * Override the default label for the *close popup* icon button. * * For localization purposes, you can use the provided [translations](/guides/localization/). */ @@ -239,14 +239,15 @@ Alert.propTypes = { */ color: PropTypes.oneOf(['error', 'info', 'success', 'warning']), /** - * The icon element placed before the children. + * Override the icon displayed before the children. + * Unless provided, the icon is mapped to the value of the `severity` prop. */ icon: PropTypes.node, /** - * 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. + * The component maps the `severity` prop to a range of different icons, + * for instance success to ``. + * If you wish to change this mapping, you can provide your own. + * Alternatively, you can use the `icon` prop to override the icon displayed. */ iconMapping: PropTypes.shape({ error: PropTypes.node, @@ -256,23 +257,23 @@ Alert.propTypes = { }), /** * Callback fired when the component requests to be closed. - * When provided and no action prop is set, a close icon is displayed. + * When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked. * * @param {object} event The event source of the callback. */ onClose: PropTypes.func, /** - * The role attribute of the element. + * The ARIA role attribute of the element. */ role: PropTypes.string, /** - * The severity for the alert. + * The severity of the alert. This defines the color and icon used. */ severity: PropTypes.oneOf(['error', 'info', 'success', 'warning']), /** * The variant to use. */ - variant: PropTypes.oneOf(['filled', 'outlined', 'text']), + variant: PropTypes.oneOf(['filled', 'outlined', 'standard']), }; export default withStyles(styles, { name: 'MuiAlert' })(Alert); diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js index 631f21a846a436..a5608e1cef252f 100644 --- a/packages/material-ui/src/Snackbar/Snackbar.js +++ b/packages/material-ui/src/Snackbar/Snackbar.js @@ -253,7 +253,7 @@ const Snackbar = React.forwardRef(function Snackbar(props, ref) { Snackbar.propTypes = { /** - * The action to display. It renders after the message, at the end of the alert. + * The action to display. It renders after the message, at the end of the snackbar. */ action: PropTypes.node, /** diff --git a/packages/material-ui/src/SnackbarContent/SnackbarContent.js b/packages/material-ui/src/SnackbarContent/SnackbarContent.js index 1e73cd75931198..5c118870fa9aa1 100644 --- a/packages/material-ui/src/SnackbarContent/SnackbarContent.js +++ b/packages/material-ui/src/SnackbarContent/SnackbarContent.js @@ -78,10 +78,9 @@ SnackbarContent.propTypes = { */ message: PropTypes.node, /** - * The role attribute of the element. If the Snackbar requires focus - * to be closed, the `alertdialog` role should be used instead. + * The ARIA role attribute of the element. */ - role: PropTypes.oneOf(['alert', 'alertdialog']), + role: PropTypes.string, }; export default withStyles(styles, { name: 'MuiSnackbarContent' })(SnackbarContent);