[SwitchBase] Replace IconButton with ButtonBase

[siriwatknp]

closes #21503, #23945

the changes affect these components

• Switch
• Checkbox
• Radio

The final UI looks the same but I consider this as breaking change because of html change.

Before

• Switch => SwitchBase => IconButton => ButtonBase
• Checkbox => SwitchBase => IconButton => ButtonBase
• Radio => SwitchBase => IconButton => ButtonBase

SwitchBase is internal component, can not be theme.

<IconButton root>
  <IconButton label>
    <SwitchBase>

New

• Switch => SwitchBase => ButtonBase
• Checkbox => SwitchBase => ButtonBase
• Radio => SwitchBase => ButtonBase

<ButtonBase>
  <SwitchBase>

There is no label from IconButton anymore, so 1 level of DOM reduced.

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

Preview: https://deploy-preview-26460--material-ui.netlify.app/components/switches/

[mui-pr-bot]

Details of bundle changes (experimental)

@material-ui/core: parsed: +0.12% , gzip: +0.09%

Generated by 🚫 dangerJS against 916f702

[oliviertassinari]

Note that #26303 works on a close problem.

[DanielBretzigheimer]

Looks like a more simple solution with less breaking changes compared to #26303. But as you said, the structure has one theoretically unnecessary DOM element (ButtonBase).

One thing that's missing in this PR is the focus indicator.

[siriwatknp]

Looks like a more simple solution with less breaking changes compared to #26303. But as you said, the structure has one theoretically unnecessary DOM element (ButtonBase).

One thing that's missing in this PR is the focus indicator.

Are you saying that the span.ButtonBase-root should be removed?

Should it be

<span class="Switch-root">
  <span class="Switch-input">
  <span class="Switch-thumb">
  <span class="Switch-track">
</span>

[DanielBretzigheimer]

Are you saying that the span.ButtonBase-root should be removed?
When only looking for the DOM structure → Yes, I think this would be the ideal solution.

But as I have seen in the PR #26303 this causes many other problems and redundant code. So my conclusion is to stick with the ButtonBase to improve maintainability and keep the changes as few as possible. All the Issues should be solved with this solution.

But keep in mind, that currently the focus indicator is not working. If you want I will look into it :)

[siriwatknp]

But as I have seen in the PR #26303 this causes many other problems and redundant code. So my conclusion is to stick with the ButtonBase to improve maintainability and keep the changes as few as possible. All the Issues should be solved with this solution.

But keep in mind, that currently the focus indicator is not working. If you want I will look into it :)

Sounds good!

[mnajdova]

Would propose showing a diff with the changes.

[mnajdova]

It's funny that this was the only thing required from the IconButton :)

[mnajdova]

I would propose going with this set of changes at the start. It's clear improvement, and it is much easier to follow what is changed. We can then on top of these changes try to apply the changes from #26303

[mnajdova]

I've pushed minor changes on the migration-v4.md, looks good otherwise.

[oliviertassinari]

closes #21503, #23945

@siriwatknp Didn't you mean to close the second issue too? You needed to add the magic keyword for each issue.