[material-ui][Button] Deprecate composed classes for v6#40675
[material-ui][Button] Deprecate composed classes for v6#40675DiegoAndai merged 27 commits intomui:masterfrom
Conversation
Netlify deploy previewBundle size reportDetails of bundle changes (Toolpad) |
| 'colorPrimary', | ||
| 'colorSecondary', | ||
| 'colorSuccess', | ||
| 'colorError', | ||
| 'colorInfo', | ||
| 'colorWarning', |
| 'fullWidth', | ||
| 'startIcon', | ||
| 'endIcon', | ||
| 'icon', |
|
Got it!! thanks for the update |
|
@DiegoAndai since option 1 is choosen for above RFC, I'm assuming no change is required in this PR |
|
@sai6855 correct! No change is required. We'll keep this PR on hold for a little longer as per this comment: #40417 (comment) |
|
Hey @sai6855, we're now unblocked: #40417 (comment) |
| replacementSelector: '.MuiButton-icon.MuiButton-sizeMedium', | ||
| replacementSelectorPrefix: '& .', |
There was a problem hiding this comment.
Shouldn't the replacement be &.MuiButton-sizeMedium .MuiButton-icon?
There was a problem hiding this comment.
from my understanding, iconSizeMedium is split into icon and sizeMedium, both these classes are applied to icon slot and not root slot. But your suggestion seems to add sizeMedium class to root slot. Am i right or did i misunderstood your question?
There was a problem hiding this comment.
The size classes are applied to the root: https://mui.com/material-ui/api/button/#button-classes-sizeLarge
So to replace the .MuiButton-iconSizeMedium class, we need to select .MuiButton-sizeMedium .MuiButton-icon: An element with class MuiButton-icon within an element with class MuiButton-sizeMedium. We might want to use the direct child selector .MuiButton-sizeMedium > .MuiButton-icon.
| [`&.${buttonClasses.sizeMedium}${" > "}.${buttonClasses.icon}`]: { | ||
| color: 'red', | ||
| }, | ||
| [`&.${buttonClasses.sizeLarge}${" > "}.${buttonClasses.icon}`]: { |
There was a problem hiding this comment.
tried transforming to &.${buttonClasses.sizeLarge} > .${buttonClasses.icon} but couldn't succeed. Does this tranformtion works or shall try again?
There was a problem hiding this comment.
It should work if you add ' > ' to the quasis (here) instead of the expressions when modifying the template literal. The quasis are the chunks of the template string that are not within ${}.
There was a problem hiding this comment.
Done, PR is ready for review
DiegoAndai
left a comment
There was a problem hiding this comment.
Looks good @sai6855!
Only have two comments left
part of #40417
preview: https://deploy-preview-40675--material-ui.netlify.app/material-ui/api/button/#classes
migration guide: https://deploy-preview-40675--material-ui.netlify.app/material-ui/migration/migrating-from-deprecated-apis/#button