Material-ui: [ButtonGroup] Disabled button leaves border color

[ryanburr]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

The right border on buttons in the button group should be a disabled color when the buttons are disabled.

Current Behavior 😯

The right border on buttons in the button group remain the original color when the buttons are disabled.

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/material-demo-4v1iu

1. Create a contained button group
2. Set the color to primary or secondary
3. Disable all buttons

Context 🔦

Providing a consistent UI to our users. All other disabled buttons look fully disabled.

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v4.2.0 |
| React | 16.9.0 |
| Browser | Any |
| TypeScript | N/A |
| etc. | |

[ryanburr]

I'm currently working around this by overriding a class

groupedContained: {
  '&:not(:last-child)': {
    '&.Mui-disabled': {
      borderRight: `1px solid ${theme.palette.action.disabled}`
    }
  },
}

[mbrookes]

Seems like your workaround should also work as a permanent fix. Do you want to work on it?

[ryanburr]

Yeah I can work on it

On Wed, Jul 10, 2019 at 6:12 PM Matt [e-mail] wrote:

Seems like your workaround should also work as a permanent fix. Do you
want to work on it?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/mui-org/material-ui/issues/16558?email_source=notifications&email_token=AAZDH7NFJKXX6QNGMJ42LT3P6ZNFPA5CNFSM4H7VDAJ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZU4Y3Y#issuecomment-510250095,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAZDH7PPTDVOPTCJYDWEI6DP6ZNFPANCNFSM4H7VDAJQ
.