From 021c1f4ee1454baa752cdbdd6a9f5ffc067dddcc Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Mon, 13 Feb 2023 00:43:47 +0000 Subject: [PATCH 1/7] [Badge] Replace BadgeUnstyled with useBadge hook --- packages/mui-material/src/Badge/Badge.js | 119 +++++++++--------- packages/mui-material/src/Badge/Badge.test.js | 5 +- 2 files changed, 62 insertions(+), 62 deletions(-) diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js index d53bb351686169..2d3a3a5270dbe2 100644 --- a/packages/mui-material/src/Badge/Badge.js +++ b/packages/mui-material/src/Badge/Badge.js @@ -3,7 +3,8 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import { usePreviousProps } from '@mui/utils'; import composeClasses from '@mui/base/composeClasses'; -import BadgeUnstyled from '@mui/base/BadgeUnstyled'; +import { useBadge } from '@mui/base/BadgeUnstyled'; +import { useSlotProps } from '@mui/base'; import styled from '../styles/styled'; import useThemeProps from '../styles/useThemeProps'; import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps'; @@ -200,13 +201,15 @@ const Badge = React.forwardRef(function Badge(inProps, ref) { horizontal: 'right', }, className, - component = 'span', + classes: classesProp, + component, components = {}, componentsProps = {}, + children, overlap: overlapProp = 'rectangular', color: colorProp = 'default', invisible: invisibleProp = false, - max, + max: maxProp = 99, badgeContent: badgeContentProp, slots, slotProps, @@ -215,21 +218,27 @@ const Badge = React.forwardRef(function Badge(inProps, ref) { ...other } = props; + const { + badgeContent, + invisible: invisibleFromHook, + max, + displayValue: displayValueFromHook, + } = useBadge({ + max: maxProp, + invisible: invisibleProp, + badgeContent: badgeContentProp, + showZero, + }); + const prevProps = usePreviousProps({ anchorOrigin: anchorOriginProp, color: colorProp, overlap: overlapProp, variant: variantProp, + badgeContent: badgeContentProp, }); - let invisible = invisibleProp; - - if ( - invisibleProp === false && - ((badgeContentProp === 0 && !showZero) || (badgeContentProp == null && variantProp !== 'dot')) - ) { - invisible = true; - } + const invisible = invisibleFromHook || (badgeContent == null && variantProp !== 'dot'); const { color = colorProp, @@ -238,15 +247,22 @@ const Badge = React.forwardRef(function Badge(inProps, ref) { variant = variantProp, } = invisible ? prevProps : props; - const ownerState = { ...props, anchorOrigin, invisible, color, overlap, variant }; - const classes = useUtilityClasses(ownerState); + const displayValue = variant !== 'dot' ? displayValueFromHook : undefined; - let displayValue; + const ownerState = { + ...props, + badgeContent, + invisible, + max, + displayValue, + showZero, + anchorOrigin, + color, + overlap, + variant, + }; - if (variant !== 'dot') { - displayValue = - badgeContentProp && Number(badgeContentProp) > max ? `${max}+` : badgeContentProp; - } + const classes = useUtilityClasses(ownerState); // support both `slots` and `components` for backward compatibility const RootSlot = slots?.root ?? components.Root ?? BadgeRoot; @@ -255,48 +271,33 @@ const Badge = React.forwardRef(function Badge(inProps, ref) { const rootSlotProps = slotProps?.root ?? componentsProps.root; const badgeSlotProps = slotProps?.badge ?? componentsProps.badge; + const rootProps = useSlotProps({ + elementType: RootSlot, + externalSlotProps: rootSlotProps, + externalForwardedProps: other, + additionalProps: { + ...(shouldSpreadAdditionalProps(RootSlot) && { + as: component, + ref, + }), + }, + ownerState, + className: clsx(rootSlotProps?.className, classes.root, className), + }); + + const badgeProps = useSlotProps({ + elementType: BadgeSlot, + externalSlotProps: badgeSlotProps, + externalForwardedProps: other, + ownerState, + className: clsx(classes.badge, badgeSlotProps?.className), + }); + return ( - + + {children} + {displayValue} + ); }); diff --git a/packages/mui-material/src/Badge/Badge.test.js b/packages/mui-material/src/Badge/Badge.test.js index 2e2709ff6ae7a7..21223d692249f6 100644 --- a/packages/mui-material/src/Badge/Badge.test.js +++ b/packages/mui-material/src/Badge/Badge.test.js @@ -1,6 +1,5 @@ import * as React from 'react'; import { expect } from 'chai'; -import { BadgeUnstyled } from '@mui/base'; import { createRenderer, describeConformance } from 'test/utils'; import Badge, { badgeClasses as classes } from '@mui/material/Badge'; @@ -30,7 +29,7 @@ describe('', () => { , () => ({ classes, - inheritComponent: BadgeUnstyled, + inheritComponent: 'span', render, refInstanceof: window.HTMLSpanElement, muiName: 'MuiBadge', @@ -38,7 +37,7 @@ describe('', () => { }), ); - it('renders children and badgeContent', () => { + it('renderapps children and badgeContent', () => { const children =
; const badge =
; const { container, getByTestId } = render({children}); From f63982aedfd8b060838965b328d68944eb49fc5a Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Mon, 13 Feb 2023 00:53:31 +0000 Subject: [PATCH 2/7] update api docs --- docs/pages/material-ui/api/badge.json | 2 +- packages/mui-material/src/Badge/Badge.d.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/pages/material-ui/api/badge.json b/docs/pages/material-ui/api/badge.json index 69423b5f2e5692..ff2d16b0ff75cd 100644 --- a/docs/pages/material-ui/api/badge.json +++ b/docs/pages/material-ui/api/badge.json @@ -96,7 +96,7 @@ "spread": true, "forwardsRefTo": "HTMLSpanElement", "filename": "/packages/mui-material/src/Badge/Badge.js", - "inheritance": { "component": "BadgeUnstyled", "pathname": "/base/api/badge-unstyled/" }, + "inheritance": null, "demos": "", "cssComponent": false } diff --git a/packages/mui-material/src/Badge/Badge.d.ts b/packages/mui-material/src/Badge/Badge.d.ts index 51753304d6faa5..7e710e02187f54 100644 --- a/packages/mui-material/src/Badge/Badge.d.ts +++ b/packages/mui-material/src/Badge/Badge.d.ts @@ -102,7 +102,6 @@ export declare const BadgeMark: React.FC; * API: * * - [Badge API](https://mui.com/material-ui/api/badge/) - * - inherits [BadgeUnstyled API](https://mui.com/base/api/badge-unstyled/) */ declare const Badge: OverridableComponent; From ff68ce6b9dd76882cf81d2e54a42adec08763890 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Mon, 13 Feb 2023 00:55:51 +0000 Subject: [PATCH 3/7] revert typo --- packages/mui-material/src/Badge/Badge.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/Badge/Badge.test.js b/packages/mui-material/src/Badge/Badge.test.js index 21223d692249f6..2206c1a8661a38 100644 --- a/packages/mui-material/src/Badge/Badge.test.js +++ b/packages/mui-material/src/Badge/Badge.test.js @@ -37,7 +37,7 @@ describe('', () => { }), ); - it('renderapps children and badgeContent', () => { + it('renders children and badgeContent', () => { const children =
; const badge =
; const { container, getByTestId } = render({children}); From 568b333de5f9bee3d010797a21b4786611d491e9 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Mon, 13 Feb 2023 01:10:48 +0000 Subject: [PATCH 4/7] refactor --- packages/mui-material/src/Badge/Badge.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js index 2d3a3a5270dbe2..d76cedb85e52ea 100644 --- a/packages/mui-material/src/Badge/Badge.js +++ b/packages/mui-material/src/Badge/Badge.js @@ -265,7 +265,7 @@ const Badge = React.forwardRef(function Badge(inProps, ref) { const classes = useUtilityClasses(ownerState); // support both `slots` and `components` for backward compatibility - const RootSlot = slots?.root ?? components.Root ?? BadgeRoot; + const RootSlot = component ?? slots?.root ?? components.Root ?? BadgeRoot; const BadgeSlot = slots?.badge ?? components.Badge ?? BadgeBadge; const rootSlotProps = slotProps?.root ?? componentsProps.root; @@ -276,10 +276,7 @@ const Badge = React.forwardRef(function Badge(inProps, ref) { externalSlotProps: rootSlotProps, externalForwardedProps: other, additionalProps: { - ...(shouldSpreadAdditionalProps(RootSlot) && { - as: component, - ref, - }), + ref, }, ownerState, className: clsx(rootSlotProps?.className, classes.root, className), From dbacdd1e8753e9a090c6a4260074cbf8cf43ade2 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Mon, 13 Feb 2023 01:11:18 +0000 Subject: [PATCH 5/7] remove import --- packages/mui-material/src/Badge/Badge.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js index d76cedb85e52ea..d5a9eb3124a4ac 100644 --- a/packages/mui-material/src/Badge/Badge.js +++ b/packages/mui-material/src/Badge/Badge.js @@ -7,7 +7,6 @@ import { useBadge } from '@mui/base/BadgeUnstyled'; import { useSlotProps } from '@mui/base'; import styled from '../styles/styled'; import useThemeProps from '../styles/useThemeProps'; -import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps'; import capitalize from '../utils/capitalize'; import badgeClasses, { getBadgeUtilityClass } from './badgeClasses'; From d94a6b4a43aa0df2f2baa73766c37e94ec81e17d Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Mon, 13 Feb 2023 11:49:16 +0000 Subject: [PATCH 6/7] address comment --- packages/mui-material/src/Badge/Badge.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js index d5a9eb3124a4ac..6db8272b836a10 100644 --- a/packages/mui-material/src/Badge/Badge.js +++ b/packages/mui-material/src/Badge/Badge.js @@ -264,7 +264,7 @@ const Badge = React.forwardRef(function Badge(inProps, ref) { const classes = useUtilityClasses(ownerState); // support both `slots` and `components` for backward compatibility - const RootSlot = component ?? slots?.root ?? components.Root ?? BadgeRoot; + const RootSlot = slots?.root ?? components.Root ?? BadgeRoot; const BadgeSlot = slots?.badge ?? components.Badge ?? BadgeBadge; const rootSlotProps = slotProps?.root ?? componentsProps.root; @@ -276,6 +276,7 @@ const Badge = React.forwardRef(function Badge(inProps, ref) { externalForwardedProps: other, additionalProps: { ref, + as: component, }, ownerState, className: clsx(rootSlotProps?.className, classes.root, className), From 5648bcefbd6855c1814d0a544aa7ec1bff1a9839 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 15 Feb 2023 10:14:40 +0100 Subject: [PATCH 7/7] Fix failing test --- packages/mui-material/src/Badge/Badge.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js index 6db8272b836a10..f6107e4fef2518 100644 --- a/packages/mui-material/src/Badge/Badge.js +++ b/packages/mui-material/src/Badge/Badge.js @@ -285,7 +285,6 @@ const Badge = React.forwardRef(function Badge(inProps, ref) { const badgeProps = useSlotProps({ elementType: BadgeSlot, externalSlotProps: badgeSlotProps, - externalForwardedProps: other, ownerState, className: clsx(classes.badge, badgeSlotProps?.className), });