[Badge] Simplify unstyled API #31974
Conversation
|
@material-ui/unstyled: parsed: -0.67% 😍, gzip: -0.62% 😍 |
michaldudak
added
component: badge
| /** State class applied to the badge `span` element if `invisible={true}`. */ | ||
| invisible: string; | ||
| } | ||
|
|
||
| export type BadgeUnstyledClassKey = keyof BadgeUnstyledClasses; | ||
|
|
||
| export function getBadgeUtilityClass(slot: string): string { | ||
| return generateUtilityClass('MuiBadge', slot); | ||
| return generateUtilityClass('MuiBadgeUnstyled', slot); |
There was a problem hiding this comment.
Make sure to add a BREAKING CHANGE section in the PR description and the label on the PR, so that we don't forget to list it in the changelog.
There was a problem hiding this comment.
I remember we had discussion around what should the classnames look like, but I don't remember why and how we got to the decision. I wouldn't use Unstyled in the name of the classes, as the classes are using for styling, once you add styles for the classname is not unstyled anymore :) We should maybe re-think the names of the classes.
There was a problem hiding this comment.
I remember we agreed it's necessary for the styled and unstyled components to have different classnames, so their styles can be overridden independently. Perhaps using Mui* for Material UI and Base* for Base components would work better? Also, when we have the means to modify/disable these classes, I would not include Base classes in Material UI components.
There was a problem hiding this comment.
Using the Base as a prefix sounds great.
There was a problem hiding this comment.
Let's not forget to change the prefix using Base instead of Unstyled
| let displayValue; | ||
|
|
||
| if (variant !== 'dot') { | ||
| displayValue = |
There was a problem hiding this comment.
This is duplicated with the logic inside useBadge. Should we maybe just propagate null/undefined in the badgeContent if the variant is dot? I don't think there is need to process the displayValue here.
There was a problem hiding this comment.
I removed this logic from useBadge - it doesn't know about the variant anymore as it's a purely visual prop.
github-actions
bot
added
the
PR: out-of-date
| /** State class applied to the badge `span` element if `invisible={true}`. */ | ||
| invisible: string; | ||
| } | ||
|
|
||
| export type BadgeUnstyledClassKey = keyof BadgeUnstyledClasses; | ||
|
|
||
| export function getBadgeUtilityClass(slot: string): string { | ||
| return generateUtilityClass('MuiBadge', slot); | ||
| return generateUtilityClass('MuiBadgeUnstyled', slot); |
There was a problem hiding this comment.
Let's not forget to change the prefix using Base instead of Unstyled
github-actions
bot
removed
the
PR: out-of-date
Remove appearance-related props from BadgeUnstyled.
@mui/material's Badge should not have any observable changes, other than addition of
BaseBadge-CSS classes.Closes #31868