polish

mui · Jul 31, 2020 · 1b2e2c9 · 1b2e2c9
1 parent 24e3bbf
commit 1b2e2c9
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 65 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,
   }),
   /**