New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[SwitchBase] Replace IconButton with ButtonBase #26460
Conversation
Details of bundle changes (experimental) @material-ui/core: parsed: +0.12% , gzip: +0.09% |
0ad225a
to
eb2a388
Compare
Note that #26303 works on a close problem. |
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> |
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! |
@@ -606,6 +606,10 @@ You can use the [`moved-lab-modules` codemod](https://github.com/mui-org/materia | |||
|
|||
You can use the [`chip-variant-prop` codemod](https://github.com/mui-org/material-ui/tree/HEAD/packages/material-ui-codemod#chip-variant-prop) for automatic migration. | |||
|
|||
### Checkbox | |||
|
|||
- The className does not have `.MuiIconButton-root` and `.MuiIconButton-label` anymore, target `.MuiButtonBase-root` instead. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would propose showing a diff
with the changes.
/* Styles applied to the root element. */ | ||
padding: 9, | ||
}); | ||
borderRadius: '50%', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's funny that this was the only thing required from the IconButton
:)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've pushed minor changes on the migration-v4.md, looks good otherwise.
@siriwatknp Didn't you mean to close the second issue too? You needed to add the magic keyword for each issue. |
closes #21503, #23945
the changes affect these components
The final UI looks the same but I consider this as breaking change because of html change.
Before
New
There is no
label
from IconButton anymore, so 1 level of DOM reduced.Preview: https://deploy-preview-26460--material-ui.netlify.app/components/switches/