[ToggleButton] Remove unnecessary span #27111
Conversation
siriwatknp
added
breaking change
component: toggle button
|
Details of bundle changes (experimental) @material-ui/core: parsed: -0.14% 😍, gzip: -0.05% 😍 |
|
@eps1lon @oliviertassinari @mnajdova My bad, I found that |
Sure, will split the PR. |
| })(({ theme, styleProps }) => { | ||
| const selectedColor = | ||
| styleProps.color === 'standard' | ||
| ? theme.palette.text.primary | ||
| : theme.palette[styleProps.color].main; | ||
| return { | ||
| ...theme.typography.button, | ||
| borderRadius: theme.shape.borderRadius, | ||
| padding: 11, | ||
| border: `1px solid ${theme.palette.divider}`, | ||
| color: theme.palette.action.active, | ||
| /* Styles applied to the root element if `fullWidth={true}`. */ | ||
| ...(styleProps.fullWidth && { | ||
| width: '100%', | ||
| }), | ||
| [`&.${toggleButtonClasses.disabled}`]: { | ||
| color: theme.palette.action.disabled, | ||
| border: `1px solid ${theme.palette.action.disabledBackground}`, |
There was a problem hiding this comment.
This change looks hard to review, may be this explanation helps.
The change is to remove the duplicate code and combine
- ...(styleProps.color === 'standard' &&
- ...(styleProps.color !== 'standard' &&
into one scope with variable selectedColor (line 39) and that's all.
There was a problem hiding this comment.
Hiding whitespace changes helped me a lot here.
siriwatknp
changed the title
Breaking changes
[ToggleButton] Remove no longer necessary span wrapper
button > span > childrenexists as a workaround for flex container bug on button but not anymore, so this PR remove the span.https://github.com/philipwalton/flexbugs#flexbug-9