diff --git a/docs/pages/api-docs/snackbar.md b/docs/pages/api-docs/snackbar.md index 9be38de8619a06..14e43189bbd0f7 100644 --- a/docs/pages/api-docs/snackbar.md +++ b/docs/pages/api-docs/snackbar.md @@ -29,7 +29,7 @@ The `MuiSnackbar` name can be used for providing [default props](/customization/ | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | action | node | | The action to display. It renders after the message, at the end of the snackbar. | -| anchorOrigin | { horizontal: 'center'
| 'left'
| 'right', vertical: 'bottom'
| 'top' }
| { vertical: 'bottom', horizontal: 'center' } | The anchor of the `Snackbar`. | +| anchorOrigin | { horizontal: 'center'
| 'left'
| 'right', vertical: 'bottom'
| 'top' }
| { vertical: 'bottom', horizontal: 'left' } | The anchor of the `Snackbar`. On smaller screens, the component grows to occupy all the available width, the horizontal alignment is ignored. | | 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. | diff --git a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js index a666ab6f4f34fe..7b080a97b0ab5f 100644 --- a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js +++ b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js @@ -50,10 +50,6 @@ export default function ConsecutiveSnackbars() { Show message B + + + + + + ); + return (
- - - - - - } + action={action} />
); diff --git a/docs/src/pages/components/snackbars/SimpleSnackbar.tsx b/docs/src/pages/components/snackbars/SimpleSnackbar.tsx index d8ecff32e8d9aa..715be59c320c29 100644 --- a/docs/src/pages/components/snackbars/SimpleSnackbar.tsx +++ b/docs/src/pages/components/snackbars/SimpleSnackbar.tsx @@ -22,33 +22,31 @@ export default function SimpleSnackbar() { setOpen(false); }; + const action = ( + + + + + + + ); + return (
- - - - - - } + action={action} />
); diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index da9a714324b48d..164f32ee3b370d 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -118,6 +118,17 @@ This change affects almost all components where you're using the `component` pro + {}} /> ``` +### Snackbar + +- The notification now displays at the bottom left on large screens. + It better matches the behavior of Gmail, Google Keep, material.io, etc. + You can restore the previous behavior with: + + ```diff + - + + + ``` + ### TablePagination - The customization of the table pagination's actions labels must be done with the `getItemAriaLabel` prop. This increases consistency with the `Pagination` component. diff --git a/packages/material-ui/src/Snackbar/Snackbar.d.ts b/packages/material-ui/src/Snackbar/Snackbar.d.ts index 6d14b4727782f3..3b130180f89e81 100644 --- a/packages/material-ui/src/Snackbar/Snackbar.d.ts +++ b/packages/material-ui/src/Snackbar/Snackbar.d.ts @@ -22,6 +22,8 @@ export interface SnackbarProps action?: SnackbarContentProps['action']; /** * The anchor of the `Snackbar`. + * On smaller screens, the component grows to occupy all the available width, + * the horizontal alignment is ignored. */ anchorOrigin?: SnackbarOrigin; /** diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js index 51e93c0e5ad30f..fab21c1d2eb9e8 100644 --- a/packages/material-ui/src/Snackbar/Snackbar.js +++ b/packages/material-ui/src/Snackbar/Snackbar.js @@ -98,7 +98,7 @@ export const styles = (theme) => { const Snackbar = React.forwardRef(function Snackbar(props, ref) { const { action, - anchorOrigin: { vertical, horizontal } = { vertical: 'bottom', horizontal: 'center' }, + anchorOrigin: { vertical, horizontal } = { vertical: 'bottom', horizontal: 'left' }, autoHideDuration = null, children, classes, @@ -262,6 +262,8 @@ Snackbar.propTypes = { action: PropTypes.node, /** * The anchor of the `Snackbar`. + * On smaller screens, the component grows to occupy all the available width, + * the horizontal alignment is ignored. */ anchorOrigin: PropTypes.shape({ horizontal: PropTypes.oneOf(['center', 'left', 'right']).isRequired,