[IconButton] Add size large and update styles#26748
Conversation
mnajdova
left a comment
There was a problem hiding this comment.
The argo's diffs look expected. I would just simplify the ButtonSizes example.
large and update styleslarge and update styles
oliviertassinari
left a comment
There was a problem hiding this comment.
The change definitely yields a different UX when browsing the page. It feels different but it seems OK
This might be off. It doesn't feel vertically aligned:
Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
…l-ui into fix/icon-button-sizes
I adjust those IconButton to have |
|
Overall argos looks fine to me, only
|
@siriwatknp Actually, I believe the icon button on the app bar should be size="large". It seems to be what Google uses on its products. How about we change it?
It feels different, I would personally vote for saying it's OK. But these screenshots, x2 the size on GitHub's comment are disturbing 😁 You increased the size of the padding, but it doesn't feel aligned:
I think that it was more visible with the size="medium" but this wasn't the root cause. |
Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
updated the docs AppBar and also some demos in AppBar that make sense to use |
updated the docs AppBar and also some demos in AppBar that make sense to use
It is aligned now. |
|
|
||
| ### IconButton | ||
|
|
||
| - The default size's padding is reduced to `8px` which makes the default IconButton size of `40px`. To get the old default size (`48px`), use `size="large"`. The change was done to better match Google's products when Material Design stopped documenting the icon button pattern. |
There was a problem hiding this comment.
nit: the font size is a bit different for the size: 'large' too, but not sure if it is worth mentioning.
There was a problem hiding this comment.
Can you point to me what is the different?
There was a problem hiding this comment.
Ah, I see. I think it is fine not to mention.
BREAKING CHANGE
The default size's padding is reduced to
8pxwhich makes the default IconButton size of40px. To get the old default size (48px), usesize="large". The change was done to better match Google's products when Material Design stopped documenting the icon button pattern.close #24045
🔗 https://deploy-preview-26748--material-ui.netlify.app/
largesmallandmediumsizeButtonSizesdemo to include<IconButton size="large">migration-v4.mdabout breaking changeOne thing I notice, should
labelbe removed fromIconButtonsame as #26666