From c582a67e36b35574daafa975f9f8b99f7f7cf28d Mon Sep 17 00:00:00 2001
From: kodai3 <k3dai.su3@gmail.com>
Date: Tue, 28 Jul 2020 22:41:11 +0900
Subject: [PATCH 1/6] [Snackbar] change default position on desktop

---
 docs/pages/api-docs/snackbar.md                 | 2 +-
 packages/material-ui/src/Snackbar/Snackbar.d.ts | 1 +
 packages/material-ui/src/Snackbar/Snackbar.js   | 9 ++++++++-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/docs/pages/api-docs/snackbar.md b/docs/pages/api-docs/snackbar.md
index 9be38de8619a06..04629b3b5858ac 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 |
 |:-----|:-----|:--------|:------------|
 | <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> |  | The anchor of the `Snackbar`. The `Snackbar` is placed by default bottom center on Mobile and bottom left on Desktop |
 | <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. |
diff --git a/packages/material-ui/src/Snackbar/Snackbar.d.ts b/packages/material-ui/src/Snackbar/Snackbar.d.ts
index 6d14b4727782f3..6b5ee40b8bff15 100644
--- a/packages/material-ui/src/Snackbar/Snackbar.d.ts
+++ b/packages/material-ui/src/Snackbar/Snackbar.d.ts
@@ -22,6 +22,7 @@ export interface SnackbarProps
   action?: SnackbarContentProps['action'];
   /**
    * The anchor of the `Snackbar`.
+   * The `Snackbar` is placed by default bottom center on Mobile and bottom left on Desktop
    */
   anchorOrigin?: SnackbarOrigin;
   /**
diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js
index 51e93c0e5ad30f..94d3d977c7587a 100644
--- a/packages/material-ui/src/Snackbar/Snackbar.js
+++ b/packages/material-ui/src/Snackbar/Snackbar.js
@@ -9,6 +9,8 @@ import capitalize from '../utils/capitalize';
 import createChainedFunction from '../utils/createChainedFunction';
 import Grow from '../Grow';
 import SnackbarContent from '../SnackbarContent';
+import useTheme from '../styles/useTheme';
+import useMediaQuery from '../useMediaQuery';
 
 export const styles = (theme) => {
   const top1 = { top: 8 };
@@ -98,7 +100,7 @@ export const styles = (theme) => {
 const Snackbar = React.forwardRef(function Snackbar(props, ref) {
   const {
     action,
-    anchorOrigin: { vertical, horizontal } = { vertical: 'bottom', horizontal: 'center' },
+    anchorOrigin: anchorOriginProp,
     autoHideDuration = null,
     children,
     classes,
@@ -127,9 +129,13 @@ const Snackbar = React.forwardRef(function Snackbar(props, ref) {
     ...other
   } = props;
 
+  const theme = useTheme();
   const timerAutoHide = React.useRef();
   const [exited, setExited] = React.useState(true);
 
+  const desktop = useMediaQuery(theme.breakpoints.up('sm'));
+  const { vertical = 'bottom', horizontal = desktop ? 'left' : 'center' } = anchorOriginProp;
+
   const handleClose = useEventCallback((...args) => {
     if (onClose) {
       onClose(...args);
@@ -262,6 +268,7 @@ Snackbar.propTypes = {
   action: PropTypes.node,
   /**
    * The anchor of the `Snackbar`.
+   * The `Snackbar` is placed by default bottom center on Mobile and bottom left on Desktop
    */
   anchorOrigin: PropTypes.shape({
     horizontal: PropTypes.oneOf(['center', 'left', 'right']).isRequired,

From 691b96e1d3af54fa942394c53d3e47f6e7cb6e5e Mon Sep 17 00:00:00 2001
From: kodai3 <k3dai.su3@gmail.com>
Date: Tue, 28 Jul 2020 23:02:32 +0900
Subject: [PATCH 2/6] [doc] add Snackbar migration guide

---
 docs/src/pages/guides/migration-v4/migration-v4.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
index da9a714324b48d..146d575eb59429 100644
--- a/docs/src/pages/guides/migration-v4/migration-v4.md
+++ b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -118,6 +118,14 @@ This change affects almost all components where you're using the `component` pro
   +<Slider onChange={(event: React.SyntheticEvent, value: unknown) => {}} />
   ```
 
+### Snackbar
+
+- The default value of `anchorOrigin` on Desktop is changed from `bottom center` to `bottom left`
+  ```diff
+  -<Snackbar anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} />
+  +<Snackbar anchorOrigin={{ vertical: 'bottom', horizontal: desktop ? 'left' : '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.

From bb9c2d5e7874d63b5d8eb47ebd56e6777dc14360 Mon Sep 17 00:00:00 2001
From: kodai3 <k3dai.su3@gmail.com>
Date: Fri, 31 Jul 2020 08:32:25 +0900
Subject: [PATCH 3/6] use css media query over js

---
 packages/material-ui/src/Snackbar/Snackbar.js | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js
index 94d3d977c7587a..3eb50f1ba96427 100644
--- a/packages/material-ui/src/Snackbar/Snackbar.js
+++ b/packages/material-ui/src/Snackbar/Snackbar.js
@@ -9,8 +9,6 @@ import capitalize from '../utils/capitalize';
 import createChainedFunction from '../utils/createChainedFunction';
 import Grow from '../Grow';
 import SnackbarContent from '../SnackbarContent';
-import useTheme from '../styles/useTheme';
-import useMediaQuery from '../useMediaQuery';
 
 export const styles = (theme) => {
   const top1 = { top: 8 };
@@ -37,6 +35,12 @@ export const styles = (theme) => {
       right: 8,
       justifyContent: 'center',
       alignItems: 'center',
+      /* default ancohrOrigin */
+      ...bottom1,
+      [theme.breakpoints.up('sm')]: {
+        ...bottom3,
+        ...left3,
+      },
     },
     /* Styles applied to the root element if `anchorOrigin={{ 'top', 'center' }}`. */
     anchorOriginTopCenter: {
@@ -100,7 +104,7 @@ export const styles = (theme) => {
 const Snackbar = React.forwardRef(function Snackbar(props, ref) {
   const {
     action,
-    anchorOrigin: anchorOriginProp,
+    anchorOrigin: { vertical, horizontal } = { vertical: 'bottom', horizontal: 'default' },
     autoHideDuration = null,
     children,
     classes,
@@ -129,13 +133,9 @@ const Snackbar = React.forwardRef(function Snackbar(props, ref) {
     ...other
   } = props;
 
-  const theme = useTheme();
   const timerAutoHide = React.useRef();
   const [exited, setExited] = React.useState(true);
 
-  const desktop = useMediaQuery(theme.breakpoints.up('sm'));
-  const { vertical = 'bottom', horizontal = desktop ? 'left' : 'center' } = anchorOriginProp;
-
   const handleClose = useEventCallback((...args) => {
     if (onClose) {
       onClose(...args);
@@ -229,7 +229,10 @@ const Snackbar = React.forwardRef(function Snackbar(props, ref) {
       <div
         className={clsx(
           classes.root,
-          classes[`anchorOrigin${capitalize(vertical)}${capitalize(horizontal)}`],
+          {
+            [classes[`anchorOrigin${capitalize(vertical)}${capitalize(horizontal)}`]]:
+              horizontal !== 'default',
+          },
           className,
         )}
         onMouseEnter={handleMouseEnter}
@@ -271,7 +274,7 @@ Snackbar.propTypes = {
    * The `Snackbar` is placed by default bottom center on Mobile and bottom left on Desktop
    */
   anchorOrigin: PropTypes.shape({
-    horizontal: PropTypes.oneOf(['center', 'left', 'right']).isRequired,
+    horizontal: PropTypes.oneOf(['center', 'left', 'right', 'default']).isRequired,
     vertical: PropTypes.oneOf(['bottom', 'top']).isRequired,
   }),
   /**

From 24e3bbfc0b2072ae3ec7116ffdafb849802c4c12 Mon Sep 17 00:00:00 2001
From: kodai3 <k3dai.su3@gmail.com>
Date: Fri, 31 Jul 2020 08:54:48 +0900
Subject: [PATCH 4/6] fix

---
 docs/pages/api-docs/snackbar.md                 | 2 +-
 packages/material-ui/src/Snackbar/Snackbar.d.ts | 2 +-
 packages/material-ui/src/Snackbar/Snackbar.js   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/pages/api-docs/snackbar.md b/docs/pages/api-docs/snackbar.md
index 04629b3b5858ac..983eca17eabff4 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 |
 |:-----|:-----|:--------|:------------|
 | <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> |  | The anchor of the `Snackbar`. The `Snackbar` is placed by default bottom center on Mobile and bottom left on Desktop |
+| <span class="prop-name">anchorOrigin</span> | <span class="prop-type">{ horizontal: 'center'<br>&#124;&nbsp;'default'<br>&#124;&nbsp;'left'<br>&#124;&nbsp;'right', vertical: 'bottom'<br>&#124;&nbsp;'top' }</span> | <span class="prop-default">{ vertical: 'bottom', horizontal: 'default' }</span> | The anchor of the `Snackbar`. The `Snackbar` is placed by default bottom center on Mobile and bottom left on Desktop |
 | <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. |
diff --git a/packages/material-ui/src/Snackbar/Snackbar.d.ts b/packages/material-ui/src/Snackbar/Snackbar.d.ts
index 6b5ee40b8bff15..b213a2a898262a 100644
--- a/packages/material-ui/src/Snackbar/Snackbar.d.ts
+++ b/packages/material-ui/src/Snackbar/Snackbar.d.ts
@@ -6,7 +6,7 @@ import { ClickAwayListenerProps } from '../ClickAwayListener';
 
 export interface SnackbarOrigin {
   vertical: 'top' | 'bottom';
-  horizontal: 'left' | 'center' | 'right';
+  horizontal: 'left' | 'center' | 'right' | 'default';
 }
 
 export type SnackbarCloseReason = 'timeout' | 'clickaway';
diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js
index 3eb50f1ba96427..891ef4778e6e32 100644
--- a/packages/material-ui/src/Snackbar/Snackbar.js
+++ b/packages/material-ui/src/Snackbar/Snackbar.js
@@ -274,7 +274,7 @@ Snackbar.propTypes = {
    * The `Snackbar` is placed by default bottom center on Mobile and bottom left on Desktop
    */
   anchorOrigin: PropTypes.shape({
-    horizontal: PropTypes.oneOf(['center', 'left', 'right', 'default']).isRequired,
+    horizontal: PropTypes.oneOf(['center', 'default', 'left', 'right']).isRequired,
     vertical: PropTypes.oneOf(['bottom', 'top']).isRequired,
   }),
   /**

From 1b2e2c96ed6676014cf6c8a51408bf906c4abd39 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Fri, 31 Jul 2020 15:05:02 +0200
Subject: [PATCH 5/6] polish

---
 docs/pages/api-docs/snackbar.md               |  2 +-
 .../snackbars/ConsecutiveSnackbars.js         |  4 ---
 .../snackbars/ConsecutiveSnackbars.tsx        |  4 ---
 .../components/snackbars/SimpleSnackbar.js    | 36 +++++++++----------
 .../components/snackbars/SimpleSnackbar.tsx   | 36 +++++++++----------
 .../pages/guides/migration-v4/migration-v4.md |  9 +++--
 .../material-ui/src/Snackbar/Snackbar.d.ts    |  3 +-
 packages/material-ui/src/Snackbar/Snackbar.js | 16 ++-------
 8 files changed, 45 insertions(+), 65 deletions(-)

diff --git a/docs/pages/api-docs/snackbar.md b/docs/pages/api-docs/snackbar.md
index 983eca17eabff4..cf845370f2453e 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 |
 |:-----|:-----|:--------|:------------|
 | <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;'default'<br>&#124;&nbsp;'left'<br>&#124;&nbsp;'right', vertical: 'bottom'<br>&#124;&nbsp;'top' }</span> | <span class="prop-default">{ vertical: 'bottom', horizontal: 'default' }</span> | The anchor of the `Snackbar`. The `Snackbar` is placed by default bottom center on Mobile and bottom left on Desktop |
+| <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`. |
 | <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. |
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() {
       <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}
diff --git a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx
index af3a0929e29538..316017bad86ef9 100644
--- a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx
+++ b/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}
diff --git a/docs/src/pages/components/snackbars/SimpleSnackbar.js b/docs/src/pages/components/snackbars/SimpleSnackbar.js
index d2d067ef47ed8c..4ad82376a59e4e 100644
--- a/docs/src/pages/components/snackbars/SimpleSnackbar.js
+++ b/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>
   );
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 = (
+    <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>
   );
diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
index 146d575eb59429..164f32ee3b370d 100644
--- a/docs/src/pages/guides/migration-v4/migration-v4.md
+++ b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -120,10 +120,13 @@ This change affects almost all components where you're using the `component` pro
 
 ### Snackbar
 
-- The default value of `anchorOrigin` on Desktop is changed from `bottom center` to `bottom left`
+- 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 anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} />
-  +<Snackbar anchorOrigin={{ vertical: 'bottom', horizontal: desktop ? 'left' : 'center' }} />
+  -<Snackbar />
+  +<Snackbar anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} />
   ```
 
 ### TablePagination
diff --git a/packages/material-ui/src/Snackbar/Snackbar.d.ts b/packages/material-ui/src/Snackbar/Snackbar.d.ts
index b213a2a898262a..6d14b4727782f3 100644
--- a/packages/material-ui/src/Snackbar/Snackbar.d.ts
+++ b/packages/material-ui/src/Snackbar/Snackbar.d.ts
@@ -6,7 +6,7 @@ import { ClickAwayListenerProps } from '../ClickAwayListener';
 
 export interface SnackbarOrigin {
   vertical: 'top' | 'bottom';
-  horizontal: 'left' | 'center' | 'right' | 'default';
+  horizontal: 'left' | 'center' | 'right';
 }
 
 export type SnackbarCloseReason = 'timeout' | 'clickaway';
@@ -22,7 +22,6 @@ export interface SnackbarProps
   action?: SnackbarContentProps['action'];
   /**
    * The anchor of the `Snackbar`.
-   * The `Snackbar` is placed by default bottom center on Mobile and bottom left on Desktop
    */
   anchorOrigin?: SnackbarOrigin;
   /**
diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js
index 891ef4778e6e32..4b4501027b5b67 100644
--- a/packages/material-ui/src/Snackbar/Snackbar.js
+++ b/packages/material-ui/src/Snackbar/Snackbar.js
@@ -35,12 +35,6 @@ export const styles = (theme) => {
       right: 8,
       justifyContent: 'center',
       alignItems: 'center',
-      /* default ancohrOrigin */
-      ...bottom1,
-      [theme.breakpoints.up('sm')]: {
-        ...bottom3,
-        ...left3,
-      },
     },
     /* Styles applied to the root element if `anchorOrigin={{ 'top', 'center' }}`. */
     anchorOriginTopCenter: {
@@ -104,7 +98,7 @@ export const styles = (theme) => {
 const Snackbar = React.forwardRef(function Snackbar(props, ref) {
   const {
     action,
-    anchorOrigin: { vertical, horizontal } = { vertical: 'bottom', horizontal: 'default' },
+    anchorOrigin: { vertical, horizontal } = { vertical: 'bottom', horizontal: 'left' },
     autoHideDuration = null,
     children,
     classes,
@@ -229,10 +223,7 @@ const Snackbar = React.forwardRef(function Snackbar(props, ref) {
       <div
         className={clsx(
           classes.root,
-          {
-            [classes[`anchorOrigin${capitalize(vertical)}${capitalize(horizontal)}`]]:
-              horizontal !== 'default',
-          },
+          classes[`anchorOrigin${capitalize(vertical)}${capitalize(horizontal)}`],
           className,
         )}
         onMouseEnter={handleMouseEnter}
@@ -271,10 +262,9 @@ Snackbar.propTypes = {
   action: PropTypes.node,
   /**
    * The anchor of the `Snackbar`.
-   * The `Snackbar` is placed by default bottom center on Mobile and bottom left on Desktop
    */
   anchorOrigin: PropTypes.shape({
-    horizontal: PropTypes.oneOf(['center', 'default', 'left', 'right']).isRequired,
+    horizontal: PropTypes.oneOf(['center', 'left', 'right']).isRequired,
     vertical: PropTypes.oneOf(['bottom', 'top']).isRequired,
   }),
   /**

From 6c4aece32d84631bd347ee8827f5782552331fc7 Mon Sep 17 00:00:00 2001
From: kodai3 <k3dai.su3@gmail.com>
Date: Sun, 2 Aug 2020 09:23:53 +0900
Subject: [PATCH 6/6] update Snackbar prop description

---
 docs/pages/api-docs/snackbar.md                 | 2 +-
 packages/material-ui/src/Snackbar/Snackbar.d.ts | 2 ++
 packages/material-ui/src/Snackbar/Snackbar.js   | 2 ++
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/pages/api-docs/snackbar.md b/docs/pages/api-docs/snackbar.md
index cf845370f2453e..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 |
 |:-----|:-----|:--------|:------------|
 | <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: 'left' }</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. |
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 4b4501027b5b67..fab21c1d2eb9e8 100644
--- a/packages/material-ui/src/Snackbar/Snackbar.js
+++ b/packages/material-ui/src/Snackbar/Snackbar.js
@@ -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,