Components: Normalize sizing

danielchalmers commented 1 week ago

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

Button: 30.75, 36.5, 42.25
ToggleGroup: 28.88, 36.09, 43.31

New (px - small, medium, large):

Button: 28, 36, 44
ToggleGroup: 28, 36, 44

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

Many are 32px or 48px which is perfect already (200% or 300% default font size)
Switch is 38px
Slider is 22px
List item is 48px, Nav item is 40.5px 👎
Tooltip is 24.8px 👎
Snackbar is 50px 👎 (M2 = 48px single line)
Rating is 29.11px 👎 👎
Menu is 48px 👍 but Dense Menu is 36.02px 👎
4160
5306

Important things to consider:

The sizes could be measured in REM (225% = 2.25rem), but that would not necessarily scale the content and this is something we want to take care of all at once in the same release. Still possible for v7 but a big undertaking.
Borders will affect size and may need to be converted to outlines

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

[ ] I would like to do a Pull Request

Code of Conduct

[X] I agree to follow this project's Code of Conduct

danielchalmers commented 1 week ago

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.

cc @Garderoben @mckaragoz @ScarletKuro @Mr-Technician

henon commented 1 week ago

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.

danielchalmers commented 4 days ago

@henon Just to confirm, if the density changes then the dimensions will change with it? Ex: Button 36px, Button Low Margin 34px #8946

henon commented 4 days ago

Yes of course the component dimensions will have to shrink accordingly

MudBlazor / MudBlazor