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

[Button] Increase elevation on hover when contained #17537

Merged
merged 3 commits into from
Sep 25, 2019

Conversation

eps1lon
Copy link
Member

@eps1lon eps1lon commented Sep 23, 2019

Partial fix of #17493

The color will be fixed once we figured out https://material.io/design/interaction/states.html. Previous work in #13134

I did some experiments a few weeks ago. I'll take a look how viable they are at the moment or if it makes more sense to fix the button states separately.

@eps1lon eps1lon added design: material This is about Material Design, please involve a visual or UX designer in the process component: button This is the name of the generic UI component, not the React module! labels Sep 23, 2019
@mui-pr-bot
Copy link

mui-pr-bot commented Sep 23, 2019

Details of bundle changes.

Comparing: cef3287...50cb921

bundle parsed diff gzip diff prev parsed current parsed prev gzip current gzip
@material-ui/core +0.01% 🔺 +0.01% 🔺 331,975 332,021 90,616 90,626
@material-ui/core/Paper 0.00% 0.00% 68,882 68,882 20,523 20,523
@material-ui/core/Paper.esm 0.00% 0.00% 62,319 62,319 19,261 19,261
@material-ui/core/Popper 0.00% 0.00% 28,397 28,397 10,159 10,159
@material-ui/core/Textarea 0.00% 0.00% 5,082 5,082 2,136 2,136
@material-ui/core/TrapFocus 0.00% 0.00% 3,766 3,766 1,596 1,596
@material-ui/core/styles/createMuiTheme 0.00% 0.00% 16,348 16,348 5,818 5,818
@material-ui/core/useMediaQuery 0.00% 0.00% 2,488 2,488 1,050 1,050
@material-ui/lab 0.00% 0.00% 143,344 143,344 43,790 43,790
@material-ui/styles 0.00% 0.00% 51,641 51,641 15,350 15,350
@material-ui/system 0.00% 0.00% 15,581 15,581 4,341 4,341
Button +0.06% 🔺 +0.02% 🔺 78,854 78,900 24,089 24,093
Modal 0.00% 0.00% 14,542 14,542 5,113 5,113
Portal 0.00% 0.00% 2,907 2,907 1,318 1,318
Rating 0.00% 0.00% 70,185 70,185 21,930 21,930
Slider 0.00% 0.00% 75,326 75,326 23,259 23,259
colorManipulator 0.00% 0.00% 3,835 3,835 1,519 1,519
docs.landing 0.00% 0.00% 54,267 54,267 14,344 14,344
docs.main +0.01% 🔺 0.00% 581,915 581,961 186,289 186,292
packages/material-ui/build/umd/material-ui.production.min.js +0.02% 🔺 +0.01% 🔺 302,823 302,869 87,122 87,127

Generated by 🚫 dangerJS against 50cb921

@oliviertassinari
Copy link
Member

My only concern with the related issue (#17493) is the customization story. I think that it's important to allow people to remove the elevation completely. I personny don't like this aspect of the Material Design guidelines. I find the Vuetify approach interesting, they allow to set elevation={0} to remove it: https://vuetifyjs.com/en/components/buttons#playground.

I think that we could support it too, right now, it causes an issue with the Bootstrap theme on hover:

Capture d’écran 2019-09-23 à 12 43 06

@oliviertassinari oliviertassinari added this to the v4.5.0 milestone Sep 23, 2019
@eps1lon
Copy link
Member Author

eps1lon commented Sep 23, 2019

Seems like it's unrelated to this issue but related to elevation in general. The contained button always had elevation. This change only brings :hover in line with the other possible states.

Disabling elevation is possible by overriding all the shadows in the theme.

@oliviertassinari
Copy link
Member

@eps1lon That's fair 👍 .

@eps1lon eps1lon force-pushed the fix/button/states-elevation branch from aa144b2 to 9a88905 Compare September 23, 2019 11:46
@eps1lon
Copy link
Member Author

eps1lon commented Sep 23, 2019

@eps1lon That's fair .

It's an issue like any other CSS addition. It's a breaking change for anybody using a custom theme. This should be solved by #16238

I've added a reset to the customization demo.

@oliviertassinari oliviertassinari changed the title Button] Increase elevation on hover when contained [Button] Increase elevation on hover when contained Sep 23, 2019
@oliviertassinari oliviertassinari merged commit d63c8e9 into mui:master Sep 25, 2019
@eps1lon eps1lon deleted the fix/button/states-elevation branch September 25, 2019 07:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: button 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.

3 participants