[IconButton] Add size large and update styles#26748
Conversation
siriwatknp
added
breaking change
mnajdova
left a comment
mnajdova
left a comment
There was a problem hiding this comment.
The argo's diffs look expected. I would just simplify the ButtonSizes example.
oliviertassinari
changed the title
large and update styleslarge and update styles
oliviertassinari
left a comment
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 <[email protected]>
…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 <[email protected]>
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.
4 participants
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