Skip to content
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

[BadgeUnstyled] Add useBadge hook #30246

Merged
merged 7 commits into from
Dec 22, 2021
Merged

Conversation

mnajdova
Copy link
Member

@mnajdova mnajdova commented Dec 17, 2021

BREAKING CHANGE

BadgeUnstyled does no longer support the overlap prop, it is now a prop only on the Badge component inside @mui/material/Badge.

As the prop is not available, some of the classnames have been renamed:

-"MuiBadge-anchorOriginTopRightRectangular",
-"MuiBadge-anchorOriginBottomRightRectangular",
-"MuiBadge-anchorOriginTopLeftRectangular",
-"MuiBadge-anchorOriginBottomLeftRectangular",
-"MuiBadge-anchorOriginTopRightCircular",
-"MuiBadge-anchorOriginBottomRightCircular",
-"MuiBadge-anchorOriginTopLeftCircular",
-"MuiBadge-anchorOriginBottomLeftCircular",
+"MuiBadge-anchorOriginTopRight",
+"MuiBadge-anchorOriginBottomRight",
+"MuiBadge-anchorOriginTopLeft",
+"MuiBadge-anchorOriginBottomLeft",

In order to avoid breaking changes in the @mui/material package, the old classes are added in addition to the new ones. Also the overlapCircular and overlapRectangular classes keys are added, which can be used in combination with the new classes.


The PR adds useBadge hook, that is used inside BadgeUnstyled. It also updates the generateProps script to consider *Props.ts files when generating props.

@mui-pr-bot
Copy link

mui-pr-bot commented Dec 17, 2021

Details of bundle changes

@material-ui/core: parsed: +0.15% , gzip: +0.11%

Generated by 🚫 dangerJS against cc441f3


export interface BadgeUnstyledComponentsPropsOverrides {}

export interface BadgeUnstyledTypeMap<P = {}, D extends React.ElementType = 'span'> {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These are moved to BadgeUnstyledProps.ts

@@ -258,7 +259,8 @@ async function generateProptypes(

prop.filenames.forEach((filename) => {
const isExternal = filename !== tsFile;
const implementedByUnstyledVariant = filename === unstyledFile;
const implementedByUnstyledVariant =
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Needed for extracting the default values from the BadgeUnstyledProps.ts file.

@mnajdova mnajdova marked this pull request as ready for review December 20, 2021 09:02
@oliviertassinari oliviertassinari added package: base-ui Specific to @mui/base component: badge This is the name of the generic UI component, not the React module! labels Dec 20, 2021
@@ -42,36 +43,17 @@ const BadgeUnstyled = React.forwardRef(function BadgeUnstyled(props, ref) {
overlap: overlapProp = 'rectangular',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm wondering if it makes sense to include this prop as it's not used in the unstyled component.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch, looks like we can move it to the styled component’s props.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done with 7674166

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
breaking change component: badge This is the name of the generic UI component, not the React module! package: base-ui Specific to @mui/base
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

4 participants