[ButtonGroup][joy] Add ButtonGroup component

[siriwatknp]

Preview: https://deploy-preview-37407--material-ui.netlify.app/joy-ui/react-button-group/

Improvements from Material UI

• Support IconButton as children
• Able to stretch the buttons
• Work with arbitrary elements that wrap the buttons
• Customizable separator color using a CSS variable
• Able to detach the buttons

---

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

• docs/data/joy/components/button-group/button-group.md

@mui/joy: parsed: +1.15% , gzip: +0.84%

Bundle size report

Details of bundle changes

Generated by 🚫 dangerJS against 53f6922

[zanivan]

Hey @siriwatknp and @danilo-leal, I started iterating this component with some styles from the default theme, and it'd be cool to have your inputs on the Figma file. What do you think?

[mnajdova]

While reviewing I noticed that the disabled solid buttons don't have enough contrast:

Navigating with keyboard and pressing enter is not opening the options:

Not related specifically for this PR, but should we make the focus indicator follow the color of the element it wraps? For e.g. using green color in this use-case:

[mnajdova]

Do we have some kind of concensus on when we use the prop name as a prefix before the value? For e.g. why using sizeLg, but not orientationHorizontal?

[siriwatknp]

My only argument is that orientationHorizontal is too long. It bloats the class name in the devtool, harder to debug.

However, no strong objection if we want to make it consistent.

[mnajdova]

We can decide on it regardless of this PR. I would vote for consistency, so that they are predictable.

[zanivan]

While reviewing I noticed that the disabled solid buttons don't have enough contrast

@mnajdova I made a few changes to this component, but is still on Figma, please tell me what you think 😊

Not related specifically for this PR, but should we make the focus indicator follow the color of the element it wraps? For e.g. using green color in this use-case

In WCAG 2.2 there are many instructions on how to improve the focus accessibility, so I believe we definitely have room for improvement. However, I don't think changing the color would help. I'm afraid this would be confusing during the keyboard navigation in a page with many components of different colors, making it slightly harder to follow.

[mnajdova]

In WCAG 2.2 there are many instructions on how to improve the focus accessibility, so I believe we definitely have room for improvement. However, I don't think changing the color would help. I'm afraid this would be confusing during the keyboard navigation in a page with many components of different colors, making it slightly harder to follow.

Makes sense 👍 maybe we can consider using a grey color that would work nicely with all colors. It's just a thought, not tight to this PR in any way :)

[mnajdova]

@mnajdova I made a few changes to this component, but is still on Figma, please tell me what you think 😊

Looks great 👍

[siriwatknp]

While reviewing I noticed that the disabled solid buttons don't have enough contrast:

I think this should be fixed in another PR. It is related directly to the global variants, not specific to components.

[siriwatknp]

@zanivan just pushed the updated version according to the figma file. I notice that the divider of the plain variant is too bright, do you think it should have the same value as the soft variant?

[zanivan]

@zanivan just pushed the updated version according to the figma file. I notice that the divider of the plain variant is too bright, do you think it should have the same value as the soft variant?

Yep, definitely. I'll update it on the Figma file

[zanivan]

It looks good, definitely improved the contrast!
I think It'll be even better when we finish polishing out the default theme 👀

[mnajdova]

Looks great! Let's tackle the rest of the comments in a follow ups.