[Snackbar] Change the default position on desktop

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 |
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">action</span> | <span class="prop-type">node</span> |  | The action to display. It renders after the message, at the end of the snackbar. |
-| <span class="prop-name">anchorOrigin</span> | <span class="prop-type">{ horizontal: 'center'<br>&#124;&nbsp;'left'<br>&#124;&nbsp;'right', vertical: 'bottom'<br>&#124;&nbsp;'top' }</span> | <span class="prop-default">{ vertical: 'bottom', horizontal: 'center' }</span> | The anchor of the `Snackbar`. |
+| <span class="prop-name">anchorOrigin</span> | <span class="prop-type">{ horizontal: 'center'<br>&#124;&nbsp;'left'<br>&#124;&nbsp;'right', vertical: 'bottom'<br>&#124;&nbsp;'top' }</span> | <span class="prop-default">{ vertical: 'bottom', horizontal: 'left' }</span> | The anchor of the `Snackbar`. On smaller screens, the component grows to occupy all the available width, the horizontal alignment is ignored. |
 | <span class="prop-name">autoHideDuration</span> | <span class="prop-type">number</span> | <span class="prop-default">null</span> | 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. |
 | <span class="prop-name">children</span> | <span class="prop-type">element</span> |  | Replace the `SnackbarContent` component. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |

docs/src/pages/components/snackbars/ConsecutiveSnackbars.js

@@ -50,10 +50,6 @@ export default function ConsecutiveSnackbars() {
       <Button onClick={handleClick('Message B')}>Show message B</Button>
       <Snackbar
         key={messageInfo ? messageInfo.key : undefined}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'left',
-        }}
         open={open}
         autoHideDuration={6000}
         onClose={handleClose}

docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx

@@ -68,10 +68,6 @@ export default function ConsecutiveSnackbars() {
       <Button onClick={handleClick('Message B')}>Show message B</Button>
       <Snackbar
         key={messageInfo ? messageInfo.key : undefined}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'left',
-        }}
         open={open}
         autoHideDuration={6000}
         onClose={handleClose}

docs/src/pages/components/snackbars/SimpleSnackbar.js

@@ -19,33 +19,31 @@ export default function SimpleSnackbar() {
     setOpen(false);
   };
 
+  const action = (
+    <React.Fragment>
+      <Button color="secondary" size="small" onClick={handleClose}>
+        UNDO
+      </Button>
+      <IconButton
+        size="small"
+        aria-label="close"
+        color="inherit"
+        onClick={handleClose}
+      >
+        <CloseIcon fontSize="small" />
+      </IconButton>
+    </React.Fragment>
+  );
+
   return (
     <div>
       <Button onClick={handleClick}>Open simple snackbar</Button>
       <Snackbar
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'left',
-        }}
         open={open}
         autoHideDuration={6000}
         onClose={handleClose}
         message="Note archived"
-        action={
-          <React.Fragment>
-            <Button color="secondary" size="small" onClick={handleClose}>
-              UNDO
-            </Button>
-            <IconButton
-              size="small"
-              aria-label="close"
-              color="inherit"
-              onClick={handleClose}
-            >
-              <CloseIcon fontSize="small" />
-            </IconButton>
-          </React.Fragment>
-        }
+        action={action}
       />
     </div>
   );

docs/src/pages/components/snackbars/SimpleSnackbar.tsx

@@ -22,33 +22,31 @@ export default function SimpleSnackbar() {
     setOpen(false);
   };
 
+  const action = (
+    <React.Fragment>
+      <Button color="secondary" size="small" onClick={handleClose}>
+        UNDO
+      </Button>
+      <IconButton
+        size="small"
+        aria-label="close"
+        color="inherit"
+        onClick={handleClose}
+      >
+        <CloseIcon fontSize="small" />
+      </IconButton>
+    </React.Fragment>
+  );
+
   return (
     <div>
       <Button onClick={handleClick}>Open simple snackbar</Button>
       <Snackbar
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'left',
-        }}
         open={open}
         autoHideDuration={6000}
         onClose={handleClose}
         message="Note archived"
-        action={
-          <React.Fragment>
-            <Button color="secondary" size="small" onClick={handleClose}>
-              UNDO
-            </Button>
-            <IconButton
-              size="small"
-              aria-label="close"
-              color="inherit"
-              onClick={handleClose}
-            >
-              <CloseIcon fontSize="small" />
-            </IconButton>
-          </React.Fragment>
-        }
+        action={action}
       />
     </div>
   );

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
   +<Slider onChange={(event: React.SyntheticEvent, value: unknown) => {}} />
   ```
 
+### 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
+  -<Snackbar />
+  +<Snackbar anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} />
+  ```
+
 ### TablePagination
 
 - The customization of the table pagination's actions labels must be done with the `getItemAriaLabel` prop. This increases consistency with the `Pagination` component.

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;
   /**

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,