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
Components: Normalize dimensions and font sizes #8884
Comments
The sizes in the ToggleGroup were changed in #8676 and @henon suggested staking them to the Button sizes for consistency. I said we should explore changing both to a new standard to improve the quality. This issue was opened to let us discuss this idea in a wider context. We need to at least make a decision on the Button and ToggleGroup sizes before v7 is released. |
I am all for standardization of sizes. Currently the elements feel like a zoo if you align them next to each other ;). Off-Topic: Maybe in the process we could aslo finally center the button text vertically. Currently it is slightly off-center (due to the font underline??) which is funny as the button caption is all capitalized. And even if it weren't, it would still look better were it perfectly centered. |
Yes of course the component dimensions will have to shrink accordingly |
We need to consider font sizes as well. Button and ToggleGroup (for example) should have the same dimensions AND text size. What does it look like in Material Design 2? That's what we should aim for. |
Is your feature request related to a problem?
Dimensions are not always consistent between components and some use fractional pixels by default.
MudButton 100% scaling is not pixel perfect which can cause aliasing issues.
Describe the solution you'd like
We keep in mind our ultimate goal of using relative scaling units while defining integer pixel sizes at 100% scaling.
MudButton and ToggleGroup sizes should be staked together.
Current (px - small, medium, large):
New (px - small, medium, large):
These new sizes are 175%, 225%, and 275% of the default root font size of 16px.
A default M2 button is exactly 36px tall. We should compare all to Material Design.
Which other components should be taken care of in this pass? (sizes taken from measuring the docs):
Important things to consider:
Have you seen this feature anywhere else?
https://m2.material.io/components
https://m2.material.io/components/buttons#specs
https://m2.material.io/components/snackbars#specs
Describe alternatives you've considered
No response
Pull Request
Code of Conduct
The text was updated successfully, but these errors were encountered: