Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Snackbar] Change the default position on desktop #21980

Merged
merged 6 commits into from
Aug 3, 2020
+51 −48
Merged

[Snackbar] Change the default position on desktop #21980

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c582a67
[Snackbar] change default position on desktop
kodai3 Jul 28, 2020
691b96e
[doc] add Snackbar migration guide
kodai3 Jul 28, 2020
bb9c2d5
use css media query over js
kodai3 Jul 30, 2020
24e3bbf
fix
kodai3 Jul 30, 2020
1b2e2c9
polish
oliviertassinari Jul 31, 2020
6c4aece
update Snackbar prop description
kodai3 Aug 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/pages/api-docs/snackbar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
Expand Down
8 changes: 8 additions & 0 deletions docs/src/pages/guides/migration-v4/migration-v4.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
1 change: 1 addition & 0 deletions packages/material-ui/src/Snackbar/Snackbar.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
/**
Expand Down
9 changes: 8 additions & 1 deletion packages/material-ui/src/Snackbar/Snackbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 };
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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'));
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
const { vertical = 'bottom', horizontal = desktop ? 'left' : 'center' } = anchorOriginProp;

const handleClose = useEventCallback((...args) => {
if (onClose) {
onClose(...args);
Expand Down Expand Up @@ -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,
Expand Down