search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
94.02k stars 32.3k forks source link

[material-ui] Improve density for components #41579

Open nameer opened 8 months ago

nameer commented 8 months ago

Summary

Feature to globally set size for component variants. This would enable setting the size of each variant, which would then be applied to all components.

This is a related question on Stack Overflow. People have attempted this but have not yet found a proper solution.

Examples

MD3 Shapes

Motivation

I would like to scale all the components and font sizes from a single place, preferably with MUI breakpoints. This can ensure a consistent appearance of the page regardless of the display size.

On some displays, the default component size is too large and occupies the entire screen. I cannot set the "small" variant for all components since I would like to keep the default variant on bigger screens.

Search keywords: global scale factor, shape MD3

oliviertassinari commented 4 months ago

Problem space

I very much support the introduction of a native support for density. What we have today feels not really usable: https://mui.com/material-ui/customization/density/. I have built this as a quick win, but it needs to be a constraint from the start in how the theming system works.

An example of why we need this. It's just too hard for developers to do, it's not really working on the PR: https://github.com/mui/mui-toolpad/pull/2393.

Another example of why is the Chinese end-users, their default font size is 14px (vs. 16px for the occident) and their alphabet is denser. So these people are trained to look at way smaller details, to be closer to their screen, to have more granular mouse sensibility, etc.

The last selling argument to me is that MD3 default tokens values feels way too large, I don't see how it would be possible for Material UI to ship the same default tokens values. However, we should make it easy (have an opt-in preset) for people who wants to see default spec tokens values).

In the same way, I don't think MD3 shape is great either: https://developer.android.com/jetpack/compose/designsystems/material3#define_shapes or https://m2.material.io/design/layout/applying-density.html.

Solution space

One example of what I would see as the right solution: the scaling factor https://www.radix-ui.com/themes/docs/theme/spacing that I imagine @vladmoroz designed.