diff --git a/docs/pages/api/snackbar.md b/docs/pages/api/snackbar.md index 095602ee0399e6..872413236b8062 100644 --- a/docs/pages/api/snackbar.md +++ b/docs/pages/api/snackbar.md @@ -26,7 +26,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. | | 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. | +| autoHideDuration | number | null | 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. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | ClickAwayListenerProps | object | | Props applied to the `ClickAwayListener` element. | diff --git a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js index 637aa8e099a932..02493c6e2954d8 100644 --- a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js +++ b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js @@ -64,10 +64,7 @@ export default function ConsecutiveSnackbars() { autoHideDuration={6000} onClose={handleClose} onExited={handleExited} - ContentProps={{ - 'aria-describedby': 'message-id', - }} - message={{messageInfo ? messageInfo.message : undefined}} + message={messageInfo ? messageInfo.message : undefined} action={ - } -/> -``` +- By default, the snackbar won't auto-hide. However, if you decide to use the `autoHideDuration` prop, it's recommended to give the user [sufficient time](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits.html) to respond. diff --git a/docs/src/pages/premium-themes/onepirate/modules/components/Snackbar.js b/docs/src/pages/premium-themes/onepirate/modules/components/Snackbar.js index c2a20ec476137c..2b27d57d774089 100644 --- a/docs/src/pages/premium-themes/onepirate/modules/components/Snackbar.js +++ b/docs/src/pages/premium-themes/onepirate/modules/components/Snackbar.js @@ -46,10 +46,9 @@ function Snackbar(props) { return ( - {message} + {message} } action={[ diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js index a5608e1cef252f..275be180eaa94e 100644 --- a/packages/material-ui/src/Snackbar/Snackbar.js +++ b/packages/material-ui/src/Snackbar/Snackbar.js @@ -99,7 +99,7 @@ const Snackbar = React.forwardRef(function Snackbar(props, ref) { const { action, anchorOrigin: { vertical, horizontal } = { vertical: 'bottom', horizontal: 'center' }, - autoHideDuration, + autoHideDuration = null, children, classes, className, diff --git a/packages/material-ui/test/typescript/components.spec.tsx b/packages/material-ui/test/typescript/components.spec.tsx index 5b8bd0bc522d45..91f6b2ee98f2dc 100644 --- a/packages/material-ui/test/typescript/components.spec.tsx +++ b/packages/material-ui/test/typescript/components.spec.tsx @@ -716,7 +716,7 @@ const SnackbarTest = () => ( horizontal: 'left', }} open={true} - autoHideDuration={6e3} + autoHideDuration={6000} onClose={e => log(e)} ContentProps={ {