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
93.94k stars 32.27k forks source link

[RFC][joy-ui] variant:outlined should not mutate the box-model #39543

Open pixelass opened 1 year ago

pixelass commented 1 year ago

What's the problem? 🤔

When switching a variant from plain|solid|soft to outlined the box-model of the component is changing due to the use of border. This is a common issues in many UI libraries

https://github.com/mui/material-ui/assets/1148334/c13727d8-0b24-4081-b9c3-ff58ca8c4930

What are the requirements? ❓

As a Developer, I want to switch variant without changes in the box-model, So that I can use them all in the same way.

Given the component uses variant "soft" When I hover the component Then the component should use variant "outlined" And the component should keep its box-model And the page flow should persist

What are our options? 💡

The only solution to this problem is to manually overwrite every component and therefore causing a potentially unmaintaiable problem (not future-safe, will not affect newly added components)

Proposed solution 🟢

  1. Personally I've been using box-shadow for decorative outlines such as "Ghost buttons" for a decade.
  2. If box-shadow does not satisfy the methodology of this library you could use a transparent border or use the background-color (this should be easy to implement due to the use of css-variables/custom-properties). It would then be applied to all variant, therefore ensuring a stable and consistent box-model.

Resources and benchmarks 🔗

Sadly I am not aware of any libraries that solve this problem efficiently.

mui/material and mui/joy both have this problem, while I'm only proposing this for the new standard JOY.

siriwatknp commented 1 year ago

I see your point. I experience it as well when switching between variants for changing styles.

Let me try to add border-color: transparent to see if there is any downside to it.

AkshitSinghal224 commented 1 year ago

Hey, Team can i work on this issue. I will try to take siriwatknp advice to fix it.