[material-next][ButtonGroup] Add ButtonGroup component with Material You design

[lhilgert9]

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

ButtonGroup issue: #39686
Material You umbrella issue: #29345

Changes

Preview: https://deploy-preview-39699--material-ui.netlify.app/material-ui/react-button-group/#material-you-version

Add Slider component implementing Material You style specifications:

• Copy ButtonGroup from material v5
• Migrate ButtonGroup files to typescript
• Implement Material You specifications: https://m3.material.io/components/segmented-buttons/specs
• Implement the ButtonGroupContext logic in [Button][material-next]

Known Issues

• when variant is set to "filledTonal" or "elevated" the color is changing to "primary", but this is a bug in the Button component

[mui-bot]

Netlify deploy preview

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

@mui/material-next: parsed: +1.39% , gzip: +0.95%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 98f9485

[mj12albert]

@lhilgert9 I would suggest you separate the first 3 commits here into a separate PR that we can merge first, so that the diffs in this one (with the actual code changes) are not all green and easier to review 🙏

Example: #39635

[lhilgert9]

@lhilgert9 I would suggest you separate the first 3 commits here into a separate PR that we can merge first, so that the diffs in this one (with the actual code changes) are not all green and easier to review 🙏

Example: #39635

@mj12albert I split the PR as you suggested. The copying of the files, as well as fixing the import errors are now in PR #39716.

[lhilgert9]

@mj12albert @DiegoAndai I have fixed the most issues, but there are still two tests not working.

1. I have no idea why argos is failing, because the screenshot that is displayed as faulty was not edited by me and has nothing to do with the commits.
2. The test unit fail looks like there is an error inside the CssVarProvider which is caused by jsdom, so I would recommend implementing

if (/jsdom/.test(window.navigator.userAgent)) {
    this.skip();
}

for the test that fails. Alternatively, we could implement something like mentioned here: https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom.

What are your thougts on this?

Since all other errors have been corrected, I would suggest continuing to work in this PR and closing the PR #39716.

[mj12albert]

but there are still two tests not working.

Don't worry about the argos one for now, sometimes it's quite flaky!

[mj12albert]

To fix the unit test, you need to kind of mock window.matchMedia like this

And as part of this, the test should be converted to TS as well ~

[lhilgert9]

@mj12albert Okay that helped. I have fixed all the error and I think now its done.
My suggestion would be to think about how best to split this PR into several small PRs so that they can better reviewed and iterated, as we tried to do with #39716. However, I would suggest closing #39716 and starting from scratch with splitting it up.

[mj12albert]

However, I would suggest closing #39716 and starting from scratch with splitting it up.

@lhilgert9 That works too ~ it may be easier to ensure that the changes from #38520 are incorporated from the beginning!

[lhilgert9]

@lhilgert9 That works too ~ it may be easier to ensure that the changes from #38520 are incorporated from the beginning!

@mj12albert the changes in #38520 are included in both #39716 and this one. I just thought it would be easier to create new PRs now, because I now know what changes I have to make one after the other so that no errors occur in the individual PRs.

[lhilgert9]

@mj12albert @DiegoAndai
I would suggest the following split PRs:

• Copy files to next-material and implement ButtonGroupContext in material-nextButton
• Change all files to TS
• Implement MD3 style
• Add playground to the docs

Let me know if you have any other suggestions. Otherwise, please give me the go ahead to close #39716 and start with these PRs I suggested.

[DiegoAndai]

@lhilgert9 that sounds good 🙌🏼 go ahead and close #39716

[lhilgert9]

Close this PR in favor of

• Copy files to next-material and implement ButtonGroupContext in material-nextButton
• Change all files to TS
• Implement MD3 style
• Add playground to the docs