[material-ui][ButtonGroup] Disabled styles should be improved

[vmilan]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

Expected Behavior

The border color in outlined ButtonGroup should remain the original color when a button is disabled. Example:

Current Behavior

The actual styles for ButtonGroup when a button is disabled, look like this:

The border color doesn't seem correct, it doesn't feel like a group of buttons.

Steps to Reproduce

Link: https://codesandbox.io/s/buttongroup-disabled-oj1ufn

• Create an outlined button group
• Disable one of the buttons

Enviroment

• mui: 5.10.10
• react: 17.0.1

Examples 🌈

Motivation 🔦

The border color doesn't seem correct, it doesn't feel like a group of buttons.

[mnajdova]

I am tagging @danilo-leal to get perspective on the matter from a design point of view. @vmilan did you find some specification around this so far?

[vmilan]

@mnajdova There is a reference in material docs: https://m3.material.io/components/segmented-buttons/specs#7bcc5619-f77a-4d34-a202-b6b686eed1cb

Our design team have done some exploratory work with two proposals for implementation:

v1

v2

[mnajdova]

Thanks! The link you've shared is for md3, which we are definitely going to adopt in the new components. For the changes you are proposing, I would maybe add them in the v6 milestone, as changing the styles at this moment, may break the UI, especially if some style overrides are used. I am adding this to the v6 milestone, so that we have it in mind when starting the work on v6.