[Button] Multiple variant styles being applied

[murtyjones]

• This is a v1.x issue (v0.x is no longer maintained).
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When a variant is chosen, e.g. outlined, other variants such as flat should not be applied as classes.

Current Behavior

The button element has multiple classes applied to it despite the variant applied.
E.g. for an outlined button i'm seeing flat, flatSecondary, etc:

<button tabindex="0" class="MuiButtonBase-root-123 MuiButton-root-101 MuiButton-textSecondary-104 MuiButton-flat-105 MuiButton-flatSecondary-107 MuiButton-outlined-108" type="button">
...
</button>

Steps to Reproduce (for bugs)

Open up this sandbox example, then right-click and inspect the button element. You'll see the outlined variant in the classes, but also the flat variant.
https://codesandbox.io/s/8103lzm9q9

Context

I noticed this when the outlined variant of the MUI button had some of the flat styling properties I applied at the theme level.

Your Environment

Tech	Version
Material-UI	v1.0.0
React	16.4.0
browser	Chrome

[mbrookes]

@murtyjones An outlined button is a flat button with a border, so this is an efficient reuse of styles, rather than duplicating them.

We could:

• Duplicate the styles
• Rename the flat style to reflect its dual purpose (breaking change)
• Leave it as is (I haven't gone hunting, but I'm pretty sure we have other components that share styles between variants).
• Something else?

(cc @leMaik )

[oliviertassinari]

I'm pretty sure we have other components that share styles between variants

@mbrookes Not I'm aware of. I think that we should aim for a simple class name application logic. Trading CSS duplication for variant isolation is a tradeoff Bootstrap has been taking. It can help in simplifying the class name combination logic.

[mbrookes]

That's a heck of a lot of styles to duplicate in the button - for example all the contained (raised) styles are used for the FAB.

[oliviertassinari]

@mbrookes I'm not saying we should duplicate. A tradeoff needs to be done. We can always keep the current one.

[oliviertassinari]

Alright, I'm keeping the current tradeoff and trying to simplify the rendering logic.

[murtyjones]

Are there implications from the linked PR to this issue? Sounds like I should create custom classes if I want the default styling of the outlined variant to differ from the default styling of the flat variant - is that right?

…

-- Marty Jones 812-629-5806

On Jun 22, 2018, at 2:13 PM, Matt Brookes ***@***.***> wrote: Closed #11932 via #11941. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[oliviertassinari]

I have tried to simplify the classname logic in the linked pull request. You should be able to use the outlined classe key.