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.

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

[Snackbar] Change the default position on desktop #21980

Merged
merged 6 commits into from
Aug 3, 2020

Conversation

kodai3
Copy link
Contributor

@kodai3 kodai3 commented Jul 28, 2020

Breaking change

  • 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:

    -<Snackbar />
    +<Snackbar anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} />
  • I have followed (at least) the PR section of the contributing guide.

This is in the v5 breaking change scope

[Snackbar] Change default position. Change the default position of the snackbar on desktop to bottom left. This will better be aligned to the behavior of material.io, Gmail, Google Keep, notistack, etc.

creating PR as i'm in favor of this proposal

Copy link
Member

@eps1lon eps1lon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tests should reflect this change since they're now failing.

packages/material-ui/src/Snackbar/Snackbar.js Outdated Show resolved Hide resolved
@mui-pr-bot
Copy link

mui-pr-bot commented Jul 28, 2020

Details of bundle changes

Generated by 🚫 dangerJS against 6c4aece

Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are you deviating from the current tradeoff? Why using JavaScript when we can use the CSS media queries to change the position of the snackbar? Wouldn't we use CSS to better handle the initial paint?

@oliviertassinari oliviertassinari added component: snackbar This is the name of the generic UI component, not the React module! breaking change design: material This is about Material Design, please involve a visual or UX designer in the process labels Jul 30, 2020
@kodai3
Copy link
Contributor Author

kodai3 commented Jul 30, 2020

Why are you deviating from the current tradeoff? Why using JavaScript when we can use the CSS media queries to change the position of the snackbar? Wouldn't we use CSS to better handle the initial paint?

I had a short-sighted mind. I went for JS simply because I use them when working on our project often (which should be fixed).

changed like this for now (bb9c2d5) (i have to add like anchorOriginTopDefault)
but, maybe we should find better name for default for consistency.
(and how we should consider as desktop too)

@oliviertassinari oliviertassinari force-pushed the feat/desktop-snackbar-postion branch from f8f49c2 to 1b2e2c9 Compare July 31, 2020 13:07
@oliviertassinari
Copy link
Member

@kodai3 What do you think of the proposed changes?

@oliviertassinari oliviertassinari merged commit e9793db into mui:next Aug 3, 2020
@oliviertassinari
Copy link
Member

Well done

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
breaking change component: snackbar This is the name of the generic UI component, not the React module! design: material This is about Material Design, please involve a visual or UX designer in the process
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants