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

[pixelass]

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

Recording.2023-10-21.142031.mp4

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]

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]

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