[material-ui][ToggleButtonGroup] Support different elements under it

[Methuselah96]

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

Uses context for passing props from ToggleButtonGroup to ToggleButtons in the vein of #28645.

Fixes #36270
Fixes #12921

---

UI Regression test component image:

[mui-bot]

Netlify deploy preview

https://deploy-preview-40220--material-ui.netlify.app/

@material-ui/core: parsed: +0.19% , gzip: +0.17%
@material-ui/lab: parsed: +0.40% , gzip: +0.35%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against fe00b4f

[ZeeshanTamboli]

After quickly reviewing the implementation, it seems satisfactory. However, could you include tests to confirm that the changes are functional? Specifically, test scenarios involving Toggle buttons wrapped with tooltips, ensuring that a toggle button is selected, and that styles are maintained when tooltips are wrapped around disabled buttons with span.

Also, I believe it closes both #12921 and #36270, so can you update the description to automatically close it when merged?

[Methuselah96]

I wasn't sure if #12921 was just about ToggleButtonGroup or if it's about replacing usages of cloneElement more broadly, do you still want me to mark this PR as closing that issue?

[Methuselah96]

I added the changes similar to #38520 and #38989 to fix the styling for varying children and added some tests as well.

The current issue is that sometimes the CSS gets overridden, by either ToggleButton or by custom styles. Any ideas on how to make sure that the CSS defined in ToggleButtonGroup takes precedence in certain cases? The main offending example is that ToggleButton defines a border color for disabled buttons that is overriding the transparent border color defined by ToggleButtonGroup for overlapping buttons.

[Methuselah96]

Alright, I overcame that issue by using a more specific selector to make sure the toggle button border styling is preserved even when the button is disabled.

Everything should be ready to go, let me know if there's anything else you need!

[ZeeshanTamboli]

I wasn't sure if #12921 was just about ToggleButtonGroup or if it's about replacing usages of cloneElement more broadly, do you still want me to mark this PR as closing that issue?

After reviewing the issue thread, I can confirm it is related to the toggle button group. We can mark the PR as resolving that issue.

[ZeeshanTamboli]

We can combine this:

Suggested change

	'& .MuiToggleButtonGroup-middleButton': {
	marginLeft: -1,
	borderLeft: '1px solid transparent',
	},
	'& .MuiToggleButtonGroup-lastButton': {
	marginLeft: -1,
	borderLeft: '1px solid transparent',
	'& .MuiToggleButtonGroup-middleButton,& .MuiToggleButtonGroup-lastButton': {
	marginLeft: -1,
	borderLeft: '1px solid transparent',
	},

Now, would this be seen as a breaking change for developers who use the pseudo-classes (:first-of-type, :last-of-type) for custom styling?

[Methuselah96]

Yes, I believe it is a slight breaking change, because the pseudo-classes were more specific than the new classes, and therefore took higher precedence. I think #38520 was also a slight breaking change in that sense, since this PR borrows this strategy from that PR?

[ZeeshanTamboli]

I believe merging this PR is worthwhile for resolving the associated issue/s (considering the upvotes in #12921), even if it involves a minor risk of breaking change. Given our successful inclusion of #38520 in a previous patch release without any issues, I think we can do the same with this one.

My only concern is that developers who have copied this demo directly into their projects may be affected by the changes in this PR.

Let's keep this conversation thread open even after the PR gets merged.

[Methuselah96]

PR review comments addressed.

[ZeeshanTamboli]

Looks good! Thanks for the contribution!