From 4a2913923168cfeb10a8a66574f593fca71109b5 Mon Sep 17 00:00:00 2001 From: Manoj sk Date: Tue, 20 Feb 2024 17:12:36 +0530 Subject: [PATCH 1/9] badge.json --- docs/pages/material-ui/api/badge.json | 22 +++++++++++++++++++-- docs/translations/api-docs/badge/badge.json | 12 +++++++---- 2 files changed, 28 insertions(+), 6 deletions(-) diff --git a/docs/pages/material-ui/api/badge.json b/docs/pages/material-ui/api/badge.json index 8a4b1b694ac28f..4d595eb5daa2d3 100644 --- a/docs/pages/material-ui/api/badge.json +++ b/docs/pages/material-ui/api/badge.json @@ -20,14 +20,18 @@ "component": { "type": { "name": "elementType" } }, "components": { "type": { "name": "shape", "description": "{ Badge?: elementType, Root?: elementType }" }, - "default": "{}" + "default": "{}", + "deprecated": true, + "deprecationInfo": "use the slotProps prop instead. This prop will be removed in v7. How to migrate." }, "componentsProps": { "type": { "name": "shape", "description": "{ badge?: func
| object, root?: func
| object }" }, - "default": "{}" + "default": "{}", + "deprecated": true, + "deprecationInfo": "use the slotProps prop instead. This prop will be removed in v7. How to migrate." }, "invisible": { "type": { "name": "bool" }, "default": "false" }, "max": { "type": { "name": "number" }, "default": "99" }, @@ -64,6 +68,20 @@ }, "name": "Badge", "imports": ["import Badge from '@mui/material/Badge';", "import { Badge } from '@mui/material';"], + "slots": [ + { + "name": "badge", + "description": "", + "default": "", + "class": null + }, + { + "name": "root", + "description": "", + "default": "", + "class": null + } + ], "classes": [ { "key": "anchorOriginBottomLeft", diff --git a/docs/translations/api-docs/badge/badge.json b/docs/translations/api-docs/badge/badge.json index 8b765118a3a5f6..f5f22625daf8cf 100644 --- a/docs/translations/api-docs/badge/badge.json +++ b/docs/translations/api-docs/badge/badge.json @@ -12,10 +12,10 @@ "description": "The component used for the root node. Either a string to use a HTML element or a component." }, "components": { - "description": "The components used for each slot inside.
This prop is an alias for the slots prop. It's recommended to use the slots prop instead." + "description": "The components used for each slot inside." }, "componentsProps": { - "description": "The extra props for the slot components. You can override the existing props or add new ones.
This prop is an alias for the slotProps prop. It's recommended to use the slotProps prop instead, as componentsProps will be deprecated in the future." + "description": "The extra props for the slot components. You can override the existing props or add new ones." }, "invisible": { "description": "If true, the badge is invisible." }, "max": { "description": "Max count to show." }, @@ -23,9 +23,9 @@ "showZero": { "description": "Controls whether the badge is hidden when badgeContent is zero." }, - "slotProps": { "description": "The props used for each slot inside the Badge." }, + "slotProps": { "description": "The props used for each slot inside." }, "slots": { - "description": "The components used for each slot inside the Badge. Either a string to use a HTML element or a component." + "description": "The components used for each slot inside." }, "sx": { "description": "The system prop that allows defining system overrides as well as additional CSS styles." @@ -153,5 +153,9 @@ "nodeName": "the badge span element", "conditions": "variant=\"standard\"" } + }, + "slotDescriptions": { + "badge": "", + "root": "" } } From d3cee36fcdbc1f64134438342f5f1fe9ebb868d4 Mon Sep 17 00:00:00 2001 From: Manoj sk Date: Tue, 20 Feb 2024 19:18:45 +0530 Subject: [PATCH 2/9] badge test where added --- packages/mui-material/src/Badge/Badge.d.ts | 54 ++++++------------- packages/mui-material/src/Badge/Badge.js | 45 ++++++++-------- packages/mui-material/src/Badge/Badge.test.js | 45 ++-------------- 3 files changed, 41 insertions(+), 103 deletions(-) diff --git a/packages/mui-material/src/Badge/Badge.d.ts b/packages/mui-material/src/Badge/Badge.d.ts index 5ca85710f17459..fd3e3ad4ec311b 100644 --- a/packages/mui-material/src/Badge/Badge.d.ts +++ b/packages/mui-material/src/Badge/Badge.d.ts @@ -1,10 +1,10 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion, Simplify } from '@mui/types'; -import { SlotComponentProps } from '@mui/base/utils'; import { Theme } from '../styles'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { BadgeClasses } from './badgeClasses'; +import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export interface BadgePropsVariantOverrides {} export interface BadgePropsColorOverrides {} @@ -27,7 +27,6 @@ export type BadgeOwnerState = Simplify< variant: OverridableStringUnion<'standard' | 'dot', BadgePropsVariantOverrides>; } >; - export interface BadgeOrigin { vertical: 'top' | 'bottom'; horizontal: 'left' | 'right'; @@ -77,19 +76,7 @@ export interface BadgeOwnProps { * * @default {} */ - componentsProps?: BadgeOwnProps['slotProps']; - /** - * The components used for each slot inside. - * - * This prop is an alias for the `slots` prop. - * It's recommended to use the `slots` prop instead. - * - * @default {} - */ - components?: { - Root?: React.ElementType; - Badge?: React.ElementType; - }; + /** * If `true`, the badge is invisible. * @default false @@ -109,27 +96,7 @@ export interface BadgeOwnProps { * The props used for each slot inside the Badge. * @default {} */ - slotProps?: { - root?: SlotComponentProps<'span', BadgeRootSlotPropsOverrides, BadgeOwnerState>; - badge?: SlotComponentProps<'span', BadgeBadgeSlotPropsOverrides, BadgeOwnerState>; - }; - /** - * The components used for each slot inside the Badge. - * Either a string to use a HTML element or a component. - * @default {} - */ - slots?: { - /** - * The component that renders the root. - * @default 'span' - */ - root?: React.ElementType; - /** - * The component that renders the badge. - * @default 'span' - */ - badge?: React.ElementType; - }; + /** * Controls whether the badge is hidden when `badgeContent` is zero. * @default false @@ -146,11 +113,24 @@ export interface BadgeOwnProps { variant?: OverridableStringUnion<'standard' | 'dot', BadgePropsVariantOverrides>; } +export interface BadgeSlots { + root?: React.ElementType; + badge?: React.ElementType; +} + +export type BadgeSlotsAndBadgeProps = CreateSlotsAndSlotProps< + BadgeSlots, + { + root: SlotProps; + badge: SlotProps; + } +>; + export interface BadgeTypeMap< RootComponent extends React.ElementType = 'span', AdditionalProps = {}, > { - props: AdditionalProps & BadgeOwnProps; + props: AdditionalProps & BadgeOwnProps & BadgeSlotsAndBadgeProps; defaultComponent: RootComponent; } diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js index f38326e038e5a9..e18d39a227683e 100644 --- a/packages/mui-material/src/Badge/Badge.js +++ b/packages/mui-material/src/Badge/Badge.js @@ -1,14 +1,15 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import clsx from 'clsx'; +// import clsx from 'clsx'; import usePreviousProps from '@mui/utils/usePreviousProps'; import composeClasses from '@mui/utils/composeClasses'; import { useBadge } from '@mui/base/useBadge'; -import { useSlotProps } from '@mui/base/utils'; +// import { useSlotProps } from '@mui/base/utils'; import { styled, createUseThemeProps } from '../zero-styled'; import capitalize from '../utils/capitalize'; import badgeClasses, { getBadgeUtilityClass } from './badgeClasses'; +import useSlot from '../utils/useSlot'; const RADIUS_STANDARD = 10; const RADIUS_DOT = 4; @@ -314,30 +315,27 @@ 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 BadgeSlot = slots?.badge ?? components.Badge ?? BadgeBadge; - - const rootSlotProps = slotProps?.root ?? componentsProps.root; - const badgeSlotProps = slotProps?.badge ?? componentsProps.badge; - - const rootProps = useSlotProps({ - elementType: RootSlot, - externalSlotProps: rootSlotProps, - externalForwardedProps: other, - additionalProps: { - ref, - as: component, + const externalForwardedProps = { + slots: { + root: components.root, + badge: components.badge, + ...slots, + }, + slotProps: { + ...componentsProps, + ...slotProps, }, + }; + const [RootSlot, rootProps] = useSlot('root', { + elementType: React.ElementType, + externalForwardedProps, ownerState, - className: clsx(rootSlotProps?.className, classes.root, className), }); - const badgeProps = useSlotProps({ - elementType: BadgeSlot, - externalSlotProps: badgeSlotProps, + const [BadgeSlot, badgeProps] = useSlot('badge', { + elementType: React.ElementType, + externalForwardedProps, ownerState, - className: clsx(classes.badge, badgeSlotProps?.className), }); return ( @@ -400,7 +398,7 @@ Badge.propTypes /* remove-proptypes */ = { * * This prop is an alias for the `slots` prop. * It's recommended to use the `slots` prop instead. - * + * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). * @default {} */ components: PropTypes.shape({ @@ -412,8 +410,7 @@ Badge.propTypes /* remove-proptypes */ = { * You can override the existing props or add new ones. * * This prop is an alias for the `slotProps` prop. - * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future. - * + * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). * @default {} */ componentsProps: PropTypes.shape({ diff --git a/packages/mui-material/src/Badge/Badge.test.js b/packages/mui-material/src/Badge/Badge.test.js index 0a40111d95d5f9..80489561679d0a 100644 --- a/packages/mui-material/src/Badge/Badge.test.js +++ b/packages/mui-material/src/Badge/Badge.test.js @@ -283,31 +283,8 @@ describe('', () => { }); }); - describe('prop: components / slots', () => { - it('allows overriding the slots using the components prop', () => { - const CustomRoot = React.forwardRef((props, ref) => { - const { ownerState, ...other } = props; - return ; - }); - - const CustomBadge = React.forwardRef((props, ref) => { - const { ownerState, ...other } = props; - return ; - }); - - const { getByTestId } = render( - , - ); - - getByTestId('custom-root'); - getByTestId('custom-badge'); - }); - - it('allows overriding the slots using the slots prop', () => { + describe('prop: slots', () => { + it('allows using the slots prop', () => { const CustomRoot = React.forwardRef((props, ref) => { const { ownerState, ...other } = props; return ; @@ -331,23 +308,7 @@ describe('', () => { }); }); - describe('prop: componentsProps / slotProps', () => { - it('allows modifying slots props using the componentsProps prop', () => { - const { getByTestId } = render( - , - ); - - getByTestId('custom-root'); - getByTestId('custom-badge'); - }); - + describe('prop:slotProps', () => { it('allows modifying slots props using the slotProps prop', () => { const { getByTestId } = render( Date: Thu, 22 Feb 2024 16:33:08 +0530 Subject: [PATCH 3/9] modified - badge folder --- packages/mui-material/src/Badge/Badge.js | 247 +---------------------- 1 file changed, 5 insertions(+), 242 deletions(-) diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js index e18d39a227683e..8d92a027b50d18 100644 --- a/packages/mui-material/src/Badge/Badge.js +++ b/packages/mui-material/src/Badge/Badge.js @@ -3,257 +3,23 @@ import * as React from 'react'; import PropTypes from 'prop-types'; // import clsx from 'clsx'; import usePreviousProps from '@mui/utils/usePreviousProps'; -import composeClasses from '@mui/utils/composeClasses'; + import { useBadge } from '@mui/base/useBadge'; // import { useSlotProps } from '@mui/base/utils'; -import { styled, createUseThemeProps } from '../zero-styled'; -import capitalize from '../utils/capitalize'; -import badgeClasses, { getBadgeUtilityClass } from './badgeClasses'; -import useSlot from '../utils/useSlot'; +import { createUseThemeProps } from '../zero-styled'; -const RADIUS_STANDARD = 10; -const RADIUS_DOT = 4; +import useSlot from '../utils/useSlot'; const useThemeProps = createUseThemeProps('MuiBadge'); -const useUtilityClasses = (ownerState) => { - const { color, anchorOrigin, invisible, overlap, variant, classes = {} } = ownerState; - - const slots = { - root: ['root'], - badge: [ - 'badge', - variant, - invisible && 'invisible', - `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`, - `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize( - anchorOrigin.horizontal, - )}${capitalize(overlap)}`, - `overlap${capitalize(overlap)}`, - color !== 'default' && `color${capitalize(color)}`, - ], - }; - - return composeClasses(slots, getBadgeUtilityClass, classes); -}; - -const BadgeRoot = styled('span', { - name: 'MuiBadge', - slot: 'Root', - overridesResolver: (props, styles) => styles.root, -})({ - position: 'relative', - display: 'inline-flex', - // For correct alignment with the text. - verticalAlign: 'middle', - flexShrink: 0, -}); - -const BadgeBadge = styled('span', { - name: 'MuiBadge', - slot: 'Badge', - overridesResolver: (props, styles) => { - const { ownerState } = props; - - return [ - styles.badge, - styles[ownerState.variant], - styles[ - `anchorOrigin${capitalize(ownerState.anchorOrigin.vertical)}${capitalize( - ownerState.anchorOrigin.horizontal, - )}${capitalize(ownerState.overlap)}` - ], - ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], - ownerState.invisible && styles.invisible, - ]; - }, -})(({ theme }) => ({ - display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', - justifyContent: 'center', - alignContent: 'center', - alignItems: 'center', - position: 'absolute', - boxSizing: 'border-box', - fontFamily: theme.typography.fontFamily, - fontWeight: theme.typography.fontWeightMedium, - fontSize: theme.typography.pxToRem(12), - minWidth: RADIUS_STANDARD * 2, - lineHeight: 1, - padding: '0 6px', - height: RADIUS_STANDARD * 2, - borderRadius: RADIUS_STANDARD, - zIndex: 1, // Render the badge on top of potential ripples. - transition: theme.transitions.create('transform', { - easing: theme.transitions.easing.easeInOut, - duration: theme.transitions.duration.enteringScreen, - }), - variants: [ - ...Object.keys((theme.vars ?? theme).palette) - .filter( - (key) => - (theme.vars ?? theme).palette[key].main && - (theme.vars ?? theme).palette[key].contrastText, - ) - .map((color) => ({ - props: { color }, - style: { - backgroundColor: (theme.vars || theme).palette[color].main, - color: (theme.vars || theme).palette[color].contrastText, - }, - })), - { - props: { variant: 'dot' }, - style: { - borderRadius: RADIUS_DOT, - height: RADIUS_DOT * 2, - minWidth: RADIUS_DOT * 2, - padding: 0, - }, - }, - { - props: ({ ownerState }) => - ownerState.anchorOrigin.vertical === 'top' && - ownerState.anchorOrigin.horizontal === 'right' && - ownerState.overlap === 'rectangular', - style: { - top: 0, - right: 0, - transform: 'scale(1) translate(50%, -50%)', - transformOrigin: '100% 0%', - [`&.${badgeClasses.invisible}`]: { - transform: 'scale(0) translate(50%, -50%)', - }, - }, - }, - { - props: ({ ownerState }) => - ownerState.anchorOrigin.vertical === 'bottom' && - ownerState.anchorOrigin.horizontal === 'right' && - ownerState.overlap === 'rectangular', - style: { - bottom: 0, - right: 0, - transform: 'scale(1) translate(50%, 50%)', - transformOrigin: '100% 100%', - [`&.${badgeClasses.invisible}`]: { - transform: 'scale(0) translate(50%, 50%)', - }, - }, - }, - { - props: ({ ownerState }) => - ownerState.anchorOrigin.vertical === 'top' && - ownerState.anchorOrigin.horizontal === 'left' && - ownerState.overlap === 'rectangular', - style: { - top: 0, - left: 0, - transform: 'scale(1) translate(-50%, -50%)', - transformOrigin: '0% 0%', - [`&.${badgeClasses.invisible}`]: { - transform: 'scale(0) translate(-50%, -50%)', - }, - }, - }, - { - props: ({ ownerState }) => - ownerState.anchorOrigin.vertical === 'bottom' && - ownerState.anchorOrigin.horizontal === 'left' && - ownerState.overlap === 'rectangular', - style: { - bottom: 0, - left: 0, - transform: 'scale(1) translate(-50%, 50%)', - transformOrigin: '0% 100%', - [`&.${badgeClasses.invisible}`]: { - transform: 'scale(0) translate(-50%, 50%)', - }, - }, - }, - { - props: ({ ownerState }) => - ownerState.anchorOrigin.vertical === 'top' && - ownerState.anchorOrigin.horizontal === 'right' && - ownerState.overlap === 'circular', - style: { - top: '14%', - right: '14%', - transform: 'scale(1) translate(50%, -50%)', - transformOrigin: '100% 0%', - [`&.${badgeClasses.invisible}`]: { - transform: 'scale(0) translate(50%, -50%)', - }, - }, - }, - { - props: ({ ownerState }) => - ownerState.anchorOrigin.vertical === 'bottom' && - ownerState.anchorOrigin.horizontal === 'right' && - ownerState.overlap === 'circular', - style: { - bottom: '14%', - right: '14%', - transform: 'scale(1) translate(50%, 50%)', - transformOrigin: '100% 100%', - [`&.${badgeClasses.invisible}`]: { - transform: 'scale(0) translate(50%, 50%)', - }, - }, - }, - { - props: ({ ownerState }) => - ownerState.anchorOrigin.vertical === 'top' && - ownerState.anchorOrigin.horizontal === 'left' && - ownerState.overlap === 'circular', - style: { - top: '14%', - left: '14%', - transform: 'scale(1) translate(-50%, -50%)', - transformOrigin: '0% 0%', - [`&.${badgeClasses.invisible}`]: { - transform: 'scale(0) translate(-50%, -50%)', - }, - }, - }, - { - props: ({ ownerState }) => - ownerState.anchorOrigin.vertical === 'bottom' && - ownerState.anchorOrigin.horizontal === 'left' && - ownerState.overlap === 'circular', - style: { - bottom: '14%', - left: '14%', - transform: 'scale(1) translate(-50%, 50%)', - transformOrigin: '0% 100%', - [`&.${badgeClasses.invisible}`]: { - transform: 'scale(0) translate(-50%, 50%)', - }, - }, - }, - { - props: { invisible: true }, - style: { - transition: theme.transitions.create('transform', { - easing: theme.transitions.easing.easeInOut, - duration: theme.transitions.duration.leavingScreen, - }), - }, - }, - ], -})); - -const Badge = React.forwardRef(function Badge(inProps, ref) { +const Badge = React.forwardRef(function Badge(inProps) { const props = useThemeProps({ props: inProps, name: 'MuiBadge' }); const { anchorOrigin: anchorOriginProp = { vertical: 'top', horizontal: 'right', }, - className, - classes: classesProp, - component, + components = {}, componentsProps = {}, children, @@ -266,7 +32,6 @@ const Badge = React.forwardRef(function Badge(inProps, ref) { slotProps, showZero = false, variant: variantProp = 'standard', - ...other } = props; const { @@ -313,8 +78,6 @@ const Badge = React.forwardRef(function Badge(inProps, ref) { variant, }; - const classes = useUtilityClasses(ownerState); - const externalForwardedProps = { slots: { root: components.root, From a637de524731f386675f32bd1f98d4ef795d4581 Mon Sep 17 00:00:00 2001 From: Manoj sk Date: Fri, 23 Feb 2024 18:10:05 +0530 Subject: [PATCH 4/9] codemod update --- packages/mui-material/src/Badge/Badge.d.ts | 16 +++++++++++++++- packages/mui-material/src/Badge/Badge.js | 4 ++-- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/packages/mui-material/src/Badge/Badge.d.ts b/packages/mui-material/src/Badge/Badge.d.ts index fd3e3ad4ec311b..becb4b6d674ddb 100644 --- a/packages/mui-material/src/Badge/Badge.d.ts +++ b/packages/mui-material/src/Badge/Badge.d.ts @@ -73,10 +73,24 @@ export interface BadgeOwnProps { * * This prop is an alias for the `slotProps` prop. * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future. + * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). * * @default {} + * */ - + componentsProps?: {}; + /** + * The components used for each slot inside. + * This prop is an alias for the `slots` prop. + * It's recommended to use the `slots` prop instead. + * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + * + * @default {} + */ + components?: { + Root?: React.ElementType; + Badge?: React.ElementType; + }; /** * If `true`, the badge is invisible. * @default false diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js index 8d92a027b50d18..43ea76a725e6ed 100644 --- a/packages/mui-material/src/Badge/Badge.js +++ b/packages/mui-material/src/Badge/Badge.js @@ -159,11 +159,11 @@ Badge.propTypes /* remove-proptypes */ = { /** * The components used for each slot inside. * - * This prop is an alias for the `slots` prop. - * It's recommended to use the `slots` prop instead. * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + * * @default {} */ + components: PropTypes.shape({ Badge: PropTypes.elementType, Root: PropTypes.elementType, From e2c5f0606b8c073968f97595480119258aa81383 Mon Sep 17 00:00:00 2001 From: Manoj sk Date: Fri, 23 Feb 2024 18:39:03 +0530 Subject: [PATCH 5/9] codemod changes --- .../migrating-from-deprecated-apis.md | 30 ++++ packages/mui-codemod/README.md | 158 ++++++++++++------ .../deprecations/badge-props/badge-props.js | 14 ++ .../badge-props/badge-props.test.js | 26 +++ .../src/deprecations/badge-props/index.js | 1 + .../badge-props/test-cases/actual.js | 17 ++ .../badge-props/test-cases/excepted.js | 24 +++ .../badge-props/test-cases/theme.actual.js | 30 ++++ .../badge-props/test-cases/theme.expected.js | 44 +++++ 9 files changed, 295 insertions(+), 49 deletions(-) create mode 100644 packages/mui-codemod/src/deprecations/badge-props/badge-props.js create mode 100644 packages/mui-codemod/src/deprecations/badge-props/badge-props.test.js create mode 100644 packages/mui-codemod/src/deprecations/badge-props/index.js create mode 100644 packages/mui-codemod/src/deprecations/badge-props/test-cases/actual.js create mode 100644 packages/mui-codemod/src/deprecations/badge-props/test-cases/excepted.js create mode 100644 packages/mui-codemod/src/deprecations/badge-props/test-cases/theme.actual.js create mode 100644 packages/mui-codemod/src/deprecations/badge-props/test-cases/theme.expected.js diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md index 903eb619001eac..5a75c5107f5ddf 100644 --- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md +++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md @@ -164,3 +164,33 @@ The Divider's `light` prop was deprecated, Use `sx={{ opacity : "0.6" }}` (or an + sx={{ opacity : "0.6" }} /> ``` + +## Badge + +Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#badge-props) below to migrate the code as described in the following sections: + +```bash +npx @mui/codemod@latest deprecations/badge-props +``` + +### components + +The Badge's `components` was deprecated in favor of `slots`: + +```diff + +``` + +### componentsProps + +The Badge's `componentsProps` was deprecated in favor of `slotProps`: + +```diff + +``` diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 5951cf346d63c2..6ded36be49fe3c 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -178,6 +178,21 @@ npx @mui/codemod@latest deprecations/alert-props />; ``` +### `badge-props` + +```diff + +``` + +```bash +npx @mui/codemod@latest deprecations/badge-props +``` + #### `divider-props` ```diff @@ -421,55 +436,100 @@ npx @mui/codemod@latest v5.0.0/preset-safe The list includes these transformers -- [`adapter-v4`](#adapter-v4) -- [`autocomplete-rename-closeicon`](#autocomplete-rename-closeicon) -- [`autocomplete-rename-option`](#autocomplete-rename-option) -- [`avatar-circle-circular`](#avatar-circle-circular) -- [`badge-overlap-value`](#badge-overlap-value) -- [`box-borderradius-values`](#box-borderradius-values) -- [`box-rename-css`](#box-rename-css) -- [`box-rename-gap`](#box-rename-gap) -- [`button-color-prop`](#button-color-prop) -- [`chip-variant-prop`](#chip-variant-prop) -- [`circularprogress-variant`](#circularprogress-variant) -- [`collapse-rename-collapsedheight`](#collapse-rename-collapsedheight) -- [`core-styles-import`](#core-styles-import) -- [`create-theme`](#create-theme) -- [`dialog-props`](#dialog-props) -- [`dialog-title-props`](#dialog-title-props) -- [`emotion-prepend-cache`](#emotion-prepend-cache) -- [`expansion-panel-component`](#expansion-panel-component) -- [`fab-variant`](#fab-variant) -- [`fade-rename-alpha`](#fade-rename-alpha) -- [`grid-justify-justifycontent`](#grid-justify-justifycontent) -- [`grid-list-component`](#grid-list-component) -- [`icon-button-size`](#icon-button-size) -- [`material-ui-styles`](#material-ui-styles) -- [`material-ui-types`](#material-ui-types) -- [`modal-props`](#modal-props) -- [`moved-lab-modules`](#moved-lab-modules) -- [`pagination-round-circular`](#pagination-round-circular) -- [`optimal-imports`](#optimal-imports) -- [`root-ref`](#root-ref) -- [`skeleton-variant`](#skeleton-variant) -- [`styled-engine-provider`](#styled-engine-provider) -- [`table-props`](#table-props) -- [`tabs-scroll-buttons`](#tabs-scroll-buttons) -- [`textarea-minmax-rows`](#textarea-minmax-rows) -- [`theme-augment`](#theme-augment) -- [`theme-breakpoints`](#theme-breakpoints) -- [`theme-breakpoints-width`](#theme-breakpoints-width) -- [`theme-options`](#theme-options) -- [`theme-palette-mode`](#theme-palette-mode) -- [`theme-provider`](#theme-provider) -- [`theme-spacing`](#theme-spacing) -- [`theme-typography-round`](#theme-typography-round) -- [`transitions`](#transitions) -- [`use-autocomplete`](#use-autocomplete) -- [`use-transitionprops`](#use-transitionprops) -- [`with-mobile-dialog`](#with-mobile-dialog) -- [`with-width`](#with-width) -- [`mui-replace`](#mui-replace) +- [@mui/codemod](#muicodemod) + - [Setup \& run](#setup--run) + - [jscodeshift options](#jscodeshift-options) + - [Recast Options](#recast-options) + - [Included scripts](#included-scripts) + - [Deprecations](#deprecations) + - [`all`](#all) + - [`accordion-props`](#accordion-props) + - [`accordion-summary-classes`](#accordion-summary-classes) + - [`alert-props`](#alert-props) + - [`avatar-props`](#avatar-props) + - [`badge-props`](#badge-props) + - [`divider-props`](#divider-props) + - [v5.0.0](#v500) + - [`base-use-named-exports`](#base-use-named-exports) + - [`base-remove-unstyled-suffix`](#base-remove-unstyled-suffix) + - [`base-remove-component-prop`](#base-remove-component-prop) + - [`rename-css-variables`](#rename-css-variables) + - [`base-hook-imports`](#base-hook-imports) + - [`joy-rename-classname-prefix`](#joy-rename-classname-prefix) + - [`joy-rename-row-prop`](#joy-rename-row-prop) + - [`joy-avatar-remove-imgProps`](#joy-avatar-remove-imgprops) + - [`joy-text-field-to-input`](#joy-text-field-to-input) + - [`joy-rename-components-to-slots`](#joy-rename-components-to-slots) + - [`date-pickers-moved-to-x`](#date-pickers-moved-to-x) + - [`tree-view-moved-to-x`](#tree-view-moved-to-x) + - [πŸš€ `preset-safe`](#-preset-safe) + - [`adapter-v4`](#adapter-v4) + - [`autocomplete-rename-closeicon`](#autocomplete-rename-closeicon) + - [`autocomplete-rename-option`](#autocomplete-rename-option) + - [`avatar-circle-circular`](#avatar-circle-circular) + - [`badge-overlap-value`](#badge-overlap-value) + - [`base-rename-components-to-slots`](#base-rename-components-to-slots) + - [`box-borderradius-values`](#box-borderradius-values) + - [`box-rename-css`](#box-rename-css) + - [`box-rename-gap`](#box-rename-gap) + - [`button-color-prop`](#button-color-prop) + - [`chip-variant-prop`](#chip-variant-prop) + - [`circularprogress-variant`](#circularprogress-variant) + - [`collapse-rename-collapsedheight`](#collapse-rename-collapsedheight) + - [`component-rename-prop`](#component-rename-prop) + - [`core-styles-import`](#core-styles-import) + - [`create-theme`](#create-theme) + - [`dialog-props`](#dialog-props) + - [`dialog-title-props`](#dialog-title-props) + - [`emotion-prepend-cache`](#emotion-prepend-cache) + - [`expansion-panel-component`](#expansion-panel-component) + - [`fab-variant`](#fab-variant) + - [`fade-rename-alpha`](#fade-rename-alpha) + - [`grid-justify-justifycontent`](#grid-justify-justifycontent) + - [`grid-list-component`](#grid-list-component) + - [`icon-button-size`](#icon-button-size) + - [`jss-to-styled`](#jss-to-styled) + - [`jss-to-tss-react`](#jss-to-tss-react) + - [`link-underline-hover`](#link-underline-hover) + - [`material-ui-styles`](#material-ui-styles) + - [`material-ui-types`](#material-ui-types) + - [`modal-props`](#modal-props) + - [`moved-lab-modules`](#moved-lab-modules) + - [`pagination-round-circular`](#pagination-round-circular) + - [`optimal-imports`](#optimal-imports) + - [`root-ref`](#root-ref) + - [`skeleton-variant`](#skeleton-variant) + - [`styled-engine-provider`](#styled-engine-provider) + - [`table-props`](#table-props) + - [`tabs-scroll-buttons`](#tabs-scroll-buttons) + - [`textarea-minmax-rows`](#textarea-minmax-rows) + - [`theme-augment`](#theme-augment) + - [`theme-breakpoints`](#theme-breakpoints) + - [`theme-breakpoints-width`](#theme-breakpoints-width) + - [`theme-options`](#theme-options) + - [`theme-palette-mode`](#theme-palette-mode) + - [`theme-provider`](#theme-provider) + - [`theme-spacing`](#theme-spacing) + - [`theme-typography-round`](#theme-typography-round) + - [`top-level-imports`](#top-level-imports) + - [`transitions`](#transitions) + - [`use-autocomplete`](#use-autocomplete) + - [`use-transitionprops`](#use-transitionprops) + - [`variant-prop`](#variant-prop) + - [`with-mobile-dialog`](#with-mobile-dialog) + - [`with-width`](#with-width) + - [`mui-replace`](#mui-replace) + - [v4.0.0](#v400) + - [`theme-spacing-api`](#theme-spacing-api) + - [`optimal-imports`](#optimal-imports-1) + - [`top-level-imports`](#top-level-imports-1) + - [v1.0.0](#v100) + - [`import-path`](#import-path) + - [`color-imports`](#color-imports) + - [`svg-icon-imports`](#svg-icon-imports) + - [`menu-item-primary-text`](#menu-item-primary-text) + - [v0.15.0](#v0150) + - [`import-path`](#import-path-1) #### `adapter-v4` diff --git a/packages/mui-codemod/src/deprecations/badge-props/badge-props.js b/packages/mui-codemod/src/deprecations/badge-props/badge-props.js new file mode 100644 index 00000000000000..1fe262a58875c6 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/badge-props/badge-props.js @@ -0,0 +1,14 @@ +import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots'; + +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function transformer(file, api, options) { + const j = api.jscodeshift; + const root = j(file.source); + const printOptions = options.printOptions; + + replaceComponentsWithSlots(j, { root, componentName: 'Badge' }); + return root.toSource(printOptions); +} diff --git a/packages/mui-codemod/src/deprecations/badge-props/badge-props.test.js b/packages/mui-codemod/src/deprecations/badge-props/badge-props.test.js new file mode 100644 index 00000000000000..abf92630601686 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/badge-props/badge-props.test.js @@ -0,0 +1,26 @@ +import path from 'path'; +import { expect } from 'chai'; +import transformer from './badge-props'; +import { jscodeshift } from '../../../testUtils'; +import readFile from '../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +describe('@mui/codemod', () => { + describe('deprecations', () => { + describe('badge-props', () => { + it('transforms props as needed', () => { + const actual = transformer({ source: read('./test-cases/actual.js') }, { jscodeshift }, {}); + const expected = read('./test-cases/excepted.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + it('should be idempotent', () => { + const actual = transformer({ source: read('./test-cases/actual.js') }, { jscodeshift }, {}); + const excepted = read('./test-cases/excepted.js'); + expect(actual).to.equal(excepted, 'The transformed version should be correct'); + }); + }); + }); +}); diff --git a/packages/mui-codemod/src/deprecations/badge-props/index.js b/packages/mui-codemod/src/deprecations/badge-props/index.js new file mode 100644 index 00000000000000..e14cf61291d62e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/badge-props/index.js @@ -0,0 +1 @@ +export { default } from './badge-props'; diff --git a/packages/mui-codemod/src/deprecations/badge-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/badge-props/test-cases/actual.js new file mode 100644 index 00000000000000..f89c54a876e9ff --- /dev/null +++ b/packages/mui-codemod/src/deprecations/badge-props/test-cases/actual.js @@ -0,0 +1,17 @@ +import { Badge } from '@mui/material'; + +; + +; + +; diff --git a/packages/mui-codemod/src/deprecations/badge-props/test-cases/excepted.js b/packages/mui-codemod/src/deprecations/badge-props/test-cases/excepted.js new file mode 100644 index 00000000000000..8048110aedb648 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/badge-props/test-cases/excepted.js @@ -0,0 +1,24 @@ +import { Badge } from '@mui/material'; + +; + +; + +; diff --git a/packages/mui-codemod/src/deprecations/badge-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/badge-props/test-cases/theme.actual.js new file mode 100644 index 00000000000000..7743c85238f269 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/badge-props/test-cases/theme.actual.js @@ -0,0 +1,30 @@ +fn({ + MuiBadge: { + defaultProps: { + components: { root: ComponentsRoot }, + componentsProps: { root: componentsRootProps }, + }, + }, +}); + +fn({ + MuiBadge: { + defaultProps: { + components: { root: ComponentsRoot }, + slots: { badge: SlotsBadge }, + componentsProps: { root: componentsRootProps }, + slotProps: { badge: slotsBadgeProps }, + }, + }, +}); + +fn({ + MuiBadge: { + defaultProps: { + components: { root: ComponentsRoot }, + slots: { badge: SlotsBadge, root: SlotsRoot }, + componentsProps: { root: componentsRootProps }, + slotProps: { root: slotsRootProps, badge: slotsBadgeProps }, + }, + }, +}); diff --git a/packages/mui-codemod/src/deprecations/badge-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/badge-props/test-cases/theme.expected.js new file mode 100644 index 00000000000000..c791ff78f0ef33 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/badge-props/test-cases/theme.expected.js @@ -0,0 +1,44 @@ +fn({ + MuiBadge: { + defaultProps: { + slots: { + root: ComponentsRoot, + }, + slotProps: { + root: componentsRootProps, + }, + }, + }, +}); + +fn({ + MuiBadge: { + defaultProps: { + slots: { + root: ComponentsRoot, + badge: SlotsBadge, + }, + + slotProps: { + root: componentsRootProps, + badge: slotsBadgeProps, + }, + }, + }, +}); + +fn({ + Muibadge: { + defaultProps: { + slots: { + root: SlotsRoot, + badge: SlotsBadge, + }, + + slotProps: { + root: slotsRootProps, + badge: slotsbadgeProps, + }, + }, + }, +}); From 763a2d939aaf3cb7a6ba22efe7b6bec6cee700b8 Mon Sep 17 00:00:00 2001 From: Manoj sk Date: Mon, 4 Mar 2024 11:26:17 +0530 Subject: [PATCH 6/9] minnor changes --- packages/mui-material/src/Badge/Badge.d.ts | 3 ++- packages/mui-material/src/Badge/Badge.js | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/mui-material/src/Badge/Badge.d.ts b/packages/mui-material/src/Badge/Badge.d.ts index becb4b6d674ddb..910b2c6e86529b 100644 --- a/packages/mui-material/src/Badge/Badge.d.ts +++ b/packages/mui-material/src/Badge/Badge.d.ts @@ -35,7 +35,8 @@ export interface BadgeOrigin { export interface BadgeOwnProps { /** * The anchor of the badge. - * @default { + * @default + * { * vertical: 'top', * horizontal: 'right', * } diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js index 43ea76a725e6ed..458060518c43c7 100644 --- a/packages/mui-material/src/Badge/Badge.js +++ b/packages/mui-material/src/Badge/Badge.js @@ -100,7 +100,6 @@ const Badge = React.forwardRef(function Badge(inProps) { externalForwardedProps, ownerState, }); - return ( {children} @@ -116,7 +115,8 @@ Badge.propTypes /* remove-proptypes */ = { // β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ /** * The anchor of the badge. - * @default { + * @default + * { * vertical: 'top', * horizontal: 'right', * } From f81691905456fecc2e0bd614366c20a229c50575 Mon Sep 17 00:00:00 2001 From: Manoj sk Date: Mon, 4 Mar 2024 23:16:01 +0530 Subject: [PATCH 7/9] final-commit-1115 --- .../migrating-from-deprecated-apis.md | 4 +- packages/mui-codemod/README.md | 4 +- packages/mui-material/src/Badge/Badge.d.ts | 50 +-- packages/mui-material/src/Badge/Badge.js | 295 ++++++++++++++++-- 4 files changed, 300 insertions(+), 53 deletions(-) diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md index 5a75c5107f5ddf..81d52201aeb502 100644 --- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md +++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md @@ -179,8 +179,8 @@ The Badge's `components` was deprecated in favor of `slots`: ```diff ``` diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 6ded36be49fe3c..f6acec269cbfb2 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -182,9 +182,9 @@ npx @mui/codemod@latest deprecations/alert-props ```diff ``` diff --git a/packages/mui-material/src/Badge/Badge.d.ts b/packages/mui-material/src/Badge/Badge.d.ts index 910b2c6e86529b..94990a6c17c817 100644 --- a/packages/mui-material/src/Badge/Badge.d.ts +++ b/packages/mui-material/src/Badge/Badge.d.ts @@ -1,10 +1,10 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion, Simplify } from '@mui/types'; +import { SlotComponentProps } from '@mui/base/utils'; import { Theme } from '../styles'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { BadgeClasses } from './badgeClasses'; -import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export interface BadgePropsVariantOverrides {} export interface BadgePropsColorOverrides {} @@ -27,6 +27,7 @@ export type BadgeOwnerState = Simplify< variant: OverridableStringUnion<'standard' | 'dot', BadgePropsVariantOverrides>; } >; + export interface BadgeOrigin { vertical: 'top' | 'bottom'; horizontal: 'left' | 'right'; @@ -35,8 +36,7 @@ export interface BadgeOrigin { export interface BadgeOwnProps { /** * The anchor of the badge. - * @default - * { + * @default { * vertical: 'top', * horizontal: 'right', * } @@ -74,18 +74,17 @@ export interface BadgeOwnProps { * * This prop is an alias for the `slotProps` prop. * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future. - * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). * + * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). * @default {} - * */ - componentsProps?: {}; + componentsProps?: BadgeOwnProps['slotProps']; /** * The components used for each slot inside. + * * This prop is an alias for the `slots` prop. * It's recommended to use the `slots` prop instead. * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). - * * @default {} */ components?: { @@ -111,7 +110,27 @@ export interface BadgeOwnProps { * The props used for each slot inside the Badge. * @default {} */ - + slotProps?: { + root?: SlotComponentProps<'span', BadgeRootSlotPropsOverrides, BadgeOwnerState>; + badge?: SlotComponentProps<'span', BadgeBadgeSlotPropsOverrides, BadgeOwnerState>; + }; + /** + * The components used for each slot inside the Badge. + * Either a string to use a HTML element or a component. + * @default {} + */ + slots?: { + /** + * The component that renders the root. + * @default 'span' + */ + root?: React.ElementType; + /** + * The component that renders the badge. + * @default 'span' + */ + badge?: React.ElementType; + }; /** * Controls whether the badge is hidden when `badgeContent` is zero. * @default false @@ -128,24 +147,11 @@ export interface BadgeOwnProps { variant?: OverridableStringUnion<'standard' | 'dot', BadgePropsVariantOverrides>; } -export interface BadgeSlots { - root?: React.ElementType; - badge?: React.ElementType; -} - -export type BadgeSlotsAndBadgeProps = CreateSlotsAndSlotProps< - BadgeSlots, - { - root: SlotProps; - badge: SlotProps; - } ->; - export interface BadgeTypeMap< RootComponent extends React.ElementType = 'span', AdditionalProps = {}, > { - props: AdditionalProps & BadgeOwnProps & BadgeSlotsAndBadgeProps; + props: AdditionalProps & BadgeOwnProps; defaultComponent: RootComponent; } diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js index 458060518c43c7..eb540347d337ab 100644 --- a/packages/mui-material/src/Badge/Badge.js +++ b/packages/mui-material/src/Badge/Badge.js @@ -1,25 +1,258 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -// import clsx from 'clsx'; +import clsx from 'clsx'; import usePreviousProps from '@mui/utils/usePreviousProps'; - +import composeClasses from '@mui/utils/composeClasses'; import { useBadge } from '@mui/base/useBadge'; -// import { useSlotProps } from '@mui/base/utils'; -import { createUseThemeProps } from '../zero-styled'; +import { useSlotProps } from '@mui/base/utils'; +import { styled, createUseThemeProps } from '../zero-styled'; +import capitalize from '../utils/capitalize'; +import badgeClasses, { getBadgeUtilityClass } from './badgeClasses'; -import useSlot from '../utils/useSlot'; +const RADIUS_STANDARD = 10; +const RADIUS_DOT = 4; const useThemeProps = createUseThemeProps('MuiBadge'); -const Badge = React.forwardRef(function Badge(inProps) { +const useUtilityClasses = (ownerState) => { + const { color, anchorOrigin, invisible, overlap, variant, classes = {} } = ownerState; + + const slots = { + root: ['root'], + badge: [ + 'badge', + variant, + invisible && 'invisible', + `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`, + `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize( + anchorOrigin.horizontal, + )}${capitalize(overlap)}`, + `overlap${capitalize(overlap)}`, + color !== 'default' && `color${capitalize(color)}`, + ], + }; + + return composeClasses(slots, getBadgeUtilityClass, classes); +}; + +const BadgeRoot = styled('span', { + name: 'MuiBadge', + slot: 'Root', + overridesResolver: (props, styles) => styles.root, +})({ + position: 'relative', + display: 'inline-flex', + // For correct alignment with the text. + verticalAlign: 'middle', + flexShrink: 0, +}); + +const BadgeBadge = styled('span', { + name: 'MuiBadge', + slot: 'Badge', + overridesResolver: (props, styles) => { + const { ownerState } = props; + + return [ + styles.badge, + styles[ownerState.variant], + styles[ + `anchorOrigin${capitalize(ownerState.anchorOrigin.vertical)}${capitalize( + ownerState.anchorOrigin.horizontal, + )}${capitalize(ownerState.overlap)}` + ], + ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], + ownerState.invisible && styles.invisible, + ]; + }, +})(({ theme }) => ({ + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + justifyContent: 'center', + alignContent: 'center', + alignItems: 'center', + position: 'absolute', + boxSizing: 'border-box', + fontFamily: theme.typography.fontFamily, + fontWeight: theme.typography.fontWeightMedium, + fontSize: theme.typography.pxToRem(12), + minWidth: RADIUS_STANDARD * 2, + lineHeight: 1, + padding: '0 6px', + height: RADIUS_STANDARD * 2, + borderRadius: RADIUS_STANDARD, + zIndex: 1, // Render the badge on top of potential ripples. + transition: theme.transitions.create('transform', { + easing: theme.transitions.easing.easeInOut, + duration: theme.transitions.duration.enteringScreen, + }), + variants: [ + ...Object.keys((theme.vars ?? theme).palette) + .filter( + (key) => + (theme.vars ?? theme).palette[key].main && + (theme.vars ?? theme).palette[key].contrastText, + ) + .map((color) => ({ + props: { color }, + style: { + backgroundColor: (theme.vars || theme).palette[color].main, + color: (theme.vars || theme).palette[color].contrastText, + }, + })), + { + props: { variant: 'dot' }, + style: { + borderRadius: RADIUS_DOT, + height: RADIUS_DOT * 2, + minWidth: RADIUS_DOT * 2, + padding: 0, + }, + }, + { + props: ({ ownerState }) => + ownerState.anchorOrigin.vertical === 'top' && + ownerState.anchorOrigin.horizontal === 'right' && + ownerState.overlap === 'rectangular', + style: { + top: 0, + right: 0, + transform: 'scale(1) translate(50%, -50%)', + transformOrigin: '100% 0%', + [`&.${badgeClasses.invisible}`]: { + transform: 'scale(0) translate(50%, -50%)', + }, + }, + }, + { + props: ({ ownerState }) => + ownerState.anchorOrigin.vertical === 'bottom' && + ownerState.anchorOrigin.horizontal === 'right' && + ownerState.overlap === 'rectangular', + style: { + bottom: 0, + right: 0, + transform: 'scale(1) translate(50%, 50%)', + transformOrigin: '100% 100%', + [`&.${badgeClasses.invisible}`]: { + transform: 'scale(0) translate(50%, 50%)', + }, + }, + }, + { + props: ({ ownerState }) => + ownerState.anchorOrigin.vertical === 'top' && + ownerState.anchorOrigin.horizontal === 'left' && + ownerState.overlap === 'rectangular', + style: { + top: 0, + left: 0, + transform: 'scale(1) translate(-50%, -50%)', + transformOrigin: '0% 0%', + [`&.${badgeClasses.invisible}`]: { + transform: 'scale(0) translate(-50%, -50%)', + }, + }, + }, + { + props: ({ ownerState }) => + ownerState.anchorOrigin.vertical === 'bottom' && + ownerState.anchorOrigin.horizontal === 'left' && + ownerState.overlap === 'rectangular', + style: { + bottom: 0, + left: 0, + transform: 'scale(1) translate(-50%, 50%)', + transformOrigin: '0% 100%', + [`&.${badgeClasses.invisible}`]: { + transform: 'scale(0) translate(-50%, 50%)', + }, + }, + }, + { + props: ({ ownerState }) => + ownerState.anchorOrigin.vertical === 'top' && + ownerState.anchorOrigin.horizontal === 'right' && + ownerState.overlap === 'circular', + style: { + top: '14%', + right: '14%', + transform: 'scale(1) translate(50%, -50%)', + transformOrigin: '100% 0%', + [`&.${badgeClasses.invisible}`]: { + transform: 'scale(0) translate(50%, -50%)', + }, + }, + }, + { + props: ({ ownerState }) => + ownerState.anchorOrigin.vertical === 'bottom' && + ownerState.anchorOrigin.horizontal === 'right' && + ownerState.overlap === 'circular', + style: { + bottom: '14%', + right: '14%', + transform: 'scale(1) translate(50%, 50%)', + transformOrigin: '100% 100%', + [`&.${badgeClasses.invisible}`]: { + transform: 'scale(0) translate(50%, 50%)', + }, + }, + }, + { + props: ({ ownerState }) => + ownerState.anchorOrigin.vertical === 'top' && + ownerState.anchorOrigin.horizontal === 'left' && + ownerState.overlap === 'circular', + style: { + top: '14%', + left: '14%', + transform: 'scale(1) translate(-50%, -50%)', + transformOrigin: '0% 0%', + [`&.${badgeClasses.invisible}`]: { + transform: 'scale(0) translate(-50%, -50%)', + }, + }, + }, + { + props: ({ ownerState }) => + ownerState.anchorOrigin.vertical === 'bottom' && + ownerState.anchorOrigin.horizontal === 'left' && + ownerState.overlap === 'circular', + style: { + bottom: '14%', + left: '14%', + transform: 'scale(1) translate(-50%, 50%)', + transformOrigin: '0% 100%', + [`&.${badgeClasses.invisible}`]: { + transform: 'scale(0) translate(-50%, 50%)', + }, + }, + }, + { + props: { invisible: true }, + style: { + transition: theme.transitions.create('transform', { + easing: theme.transitions.easing.easeInOut, + duration: theme.transitions.duration.leavingScreen, + }), + }, + }, + ], +})); + +const Badge = React.forwardRef(function Badge(inProps, ref) { const props = useThemeProps({ props: inProps, name: 'MuiBadge' }); const { anchorOrigin: anchorOriginProp = { vertical: 'top', horizontal: 'right', }, - + className, + classes: classesProp, + component, components = {}, componentsProps = {}, children, @@ -32,6 +265,7 @@ const Badge = React.forwardRef(function Badge(inProps) { slotProps, showZero = false, variant: variantProp = 'standard', + ...other } = props; const { @@ -78,28 +312,34 @@ const Badge = React.forwardRef(function Badge(inProps) { variant, }; - const externalForwardedProps = { - slots: { - root: components.root, - badge: components.badge, - ...slots, - }, - slotProps: { - ...componentsProps, - ...slotProps, + const classes = useUtilityClasses(ownerState); + + // support both `slots` and `components` for backward compatibility + const RootSlot = slots?.root ?? components.Root ?? BadgeRoot; + const BadgeSlot = slots?.badge ?? components.Badge ?? BadgeBadge; + + const rootSlotProps = slotProps?.root ?? componentsProps.root; + const badgeSlotProps = slotProps?.badge ?? componentsProps.badge; + + const rootProps = useSlotProps({ + elementType: RootSlot, + externalSlotProps: rootSlotProps, + externalForwardedProps: other, + additionalProps: { + ref, + as: component, }, - }; - const [RootSlot, rootProps] = useSlot('root', { - elementType: React.ElementType, - externalForwardedProps, ownerState, + className: clsx(rootSlotProps?.className, classes.root, className), }); - const [BadgeSlot, badgeProps] = useSlot('badge', { - elementType: React.ElementType, - externalForwardedProps, + const badgeProps = useSlotProps({ + elementType: BadgeSlot, + externalSlotProps: badgeSlotProps, ownerState, + className: clsx(classes.badge, badgeSlotProps?.className), }); + return ( {children} @@ -115,8 +355,7 @@ Badge.propTypes /* remove-proptypes */ = { // β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ /** * The anchor of the badge. - * @default - * { + * @default { * vertical: 'top', * horizontal: 'right', * } @@ -159,11 +398,12 @@ Badge.propTypes /* remove-proptypes */ = { /** * The components used for each slot inside. * - * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + * This prop is an alias for the `slots` prop. + * It's recommended to use the `slots` prop instead. * + * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). * @default {} */ - components: PropTypes.shape({ Badge: PropTypes.elementType, Root: PropTypes.elementType, @@ -173,6 +413,7 @@ Badge.propTypes /* remove-proptypes */ = { * You can override the existing props or add new ones. * * This prop is an alias for the `slotProps` prop. + * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future. * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). * @default {} */ From 1959307e7eaeab3432c56db7f3d0122d64973dca Mon Sep 17 00:00:00 2001 From: Manoj sk Date: Tue, 5 Mar 2024 01:53:06 +0530 Subject: [PATCH 8/9] codemod-changes --- packages/mui-codemod/README.md | 613 ++++++++++++++++++++++++++++++++- 1 file changed, 605 insertions(+), 8 deletions(-) diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index f6acec269cbfb2..6fefa5c853a565 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -1,6 +1,6 @@ # @mui/codemod -> Codemod scripts for MaterialΒ UI, BaseΒ UI, MUIΒ System, Joy UI. +> Codemod scripts for MaterialΒ UI, BaseΒ UI, MUIΒ System, JoyΒ UI. [![npm version](https://img.shields.io/npm/v/@mui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@mui/codemod) [![npm downloads](https://img.shields.io/npm/dm/@mui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@mui/codemod) @@ -136,6 +136,102 @@ CSS transforms: npx @mui/codemod@latest deprecations/accordion-summary-classes ``` +#### `alert-classes` + +JS transforms: + +```diff + import { alertClasses } from '@mui/material/PaginationItem'; + + MuiPaginationItem: { + styleOverrides: { + root: { +- [`&.${alertClasses.standardSuccess}`]: { ++ [`&.${alertClasses.standard}.${alertClasses.colorSuccess}`]: { + color: 'red', + }, +- [`&.${alertClasses.standardInfo}`]: { ++ [`&.${alertClasses.standard}.${alertClasses.colorInfo}`]: { + color: 'red', + }, +- [`&.${alertClasses.standardWarning}`]: { ++ [`&.${alertClasses.standard}.${alertClasses.colorWarning}`]: { + color: 'red', + }, +- [`&.${alertClasses.standardError}`]: { ++ [`&.${alertClasses.standard}.${alertClasses.colorError}`]: { + color: 'red', + }, +- [`&.${alertClasses.outlinedSuccess}`]: { ++ [`&.${alertClasses.outlined}.${alertClasses.colorSuccess}`]: { + color: 'red', + }, +- [`&.${alertClasses.outlinedInfo}`]: { ++ [`&.${alertClasses.outlined}.${alertClasses.colorInfo}`]: { + color: 'red', + }, +- [`&.${alertClasses.outlinedWarning}`]: { ++ [`&.${alertClasses.outlined}.${alertClasses.colorWarning}`]: { + color: 'red', + }, +- [`&.${alertClasses.outlinedError}`]: { ++ [`&.${alertClasses.outlined}.${alertClasses.colorError}`]: { + color: 'red', + }, +- [`&.${alertClasses.filledSuccess}`]: { ++ [`&.${alertClasses.filled}.${alertClasses.colorSuccess}`]: { + color: 'red', + }, +- [`&.${alertClasses.filledInfo}`]: { ++ [`&.${alertClasses.filled}.${alertClasses.colorInfo}`]: { + color: 'red', + }, +- [`&.${alertClasses.filledWarning}`]: { ++ [`&.${alertClasses.filled}.${alertClasses.colorWarning}`]: { + color: 'red', + }, +- [`&.${alertClasses.filledError}`]: { ++ [`&.${alertClasses.filled}.${alertClasses.colorError}`]: { + color: 'red', + }, + }, + }, + }, +``` + +CSS transforms: + +```diff +-.MuiAlert-standardSuccess ++.MuiAlert-standard.MuiAlert-colorSuccess +-.MuiAlert-standardInfo ++.MuiAlert-standard.MuiAlert-colorInfo +-.MuiAlert-standardWarning ++.MuiAlert-standard.MuiAlert-colorWarning +-.MuiAlert-standardError ++.MuiAlert-standard.MuiAlert-colorError +-.MuiAlert-outlinedSuccess ++.MuiAlert-outlined.MuiAlert-colorSuccess +-.MuiAlert-outlinedInfo ++.MuiAlert-outlined.MuiAlert-colorInfo +-.MuiAlert-outlinedWarning ++.MuiAlert-outlined.MuiAlert-colorWarning +-.MuiAlert-outlinedError ++.MuiAlert-outlined.MuiAlert-colorError +-.MuiAlert-filledSuccess ++.MuiAlert-filled.MuiAlert-colorSuccess +-.MuiAlert-filledInfo ++.MuiAlert-filled.MuiAlert-colorInfo +-.MuiAlert-filledWarning ++.MuiAlert-filled.MuiAlert-colorWarning +-.MuiAlert-filledError ++.MuiAlert-filled.MuiAlert-colorError +``` + +```bash +npx @mui/codemod@latest deprecations/alert-classes +``` + #### `alert-props` ```diff @@ -178,7 +274,230 @@ npx @mui/codemod@latest deprecations/alert-props />; ``` -### `badge-props` +#### `button-classes` + +JS transforms: + +```diff + import { buttonClasses } from '@mui/material/Button'; + + MuiButton: { + styleOverrides: { + root: { +- [`&.${buttonClasses.textInherit}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.colorInherit}`]: { + color: 'red', + }, +- [`&.${buttonClasses.textPrimary}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${buttonClasses.textSecondary}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${buttonClasses.textSuccess}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.colorSuccess}`]: { + color: 'red', + }, +- [`&.${buttonClasses.textError}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.colorError}`]: { + color: 'red', + }, +- [`&.${buttonClasses.textInfo}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.colorInfo}`]: { + color: 'red', + }, +- [`&.${buttonClasses.textWarning}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.colorWarning}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedInherit}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.colorInherit}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedPrimary}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedSecondary}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedSuccess}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.colorSuccess}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedError}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.colorError}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedInfo}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.colorInfo}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedWarning}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.colorWarning}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedInherit}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.colorInherit}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedPrimary}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedSecondary}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedSuccess}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.colorSuccess}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedError}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.colorError}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedInfo}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.colorInfo}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedWarning}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.colorWarning}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedSizeSmall}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.sizeSmall}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedSizeMedium}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.sizeMedium}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedSizeLarge}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.sizeLarge}`]: { + color: 'red', + }, +- [`&.${buttonClasses.textSizeSmall}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.sizeSmall}`]: { + color: 'red', + }, +- [`&.${buttonClasses.textSizeMedium}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.sizeMedium}`]: { + color: 'red', + }, +- [`&.${buttonClasses.textSizeLarge}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.sizeLarge}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedSizeSmall}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.sizeSmall}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedSizeMedium}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.sizeMedium}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedSizeLarge}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.sizeLarge}`]: { + color: 'red', + }, +- [`& .${buttonClasses.iconSizeSmall}`]: { ++ [`&.${buttonClasses.sizeSmall} > .${buttonClasses.icon}`]: { + color: 'red', + }, +- [`& .${buttonClasses.iconSizeMedium}`]: { ++ [`&.${buttonClasses.sizeMedium} > .${buttonClasses.icon}`]: { + color: 'red', + }, +- [`& .${buttonClasses.iconSizeLarge}`]: { ++ [`&.${buttonClasses.sizeLarge} > .${buttonClasses.icon}`]: { + color: 'red', + }, + }, + }, + }, +``` + +CSS transforms: + +```diff +-.MuiButton-textInherit ++.MuiButton-text.MuiButton-colorInherit +-.MuiButton-textPrimary ++.MuiButton-text.MuiButton-colorPrimary +-.MuiButton-textSecondary ++.MuiButton-text.MuiButton-colorSecondary +-.MuiButton-textSuccess ++.MuiButton-text.MuiButton-colorSuccess +-.MuiButton-textError ++.MuiButton-text.MuiButton-colorError +-.MuiButton-textInfo ++.MuiButton-text.MuiButton-colorInfo +-.MuiButton-textWarning ++.MuiButton-text.MuiButton-colorWarning +-.MuiButton-outlinedInherit ++.MuiButton-outlined.MuiButton-colorInherit +-.MuiButton-outlinedPrimary ++.MuiButton-outlined.MuiButton-colorPrimary +-.MuiButton-outlinedSecondary ++.MuiButton-outlined.MuiButton-colorSecondary +-.MuiButton-outlinedSuccess ++.MuiButton-outlined.MuiButton-colorSuccess +-.MuiButton-outlinedError ++.MuiButton-outlined.MuiButton-colorError +-.MuiButton-outlinedInfo ++.MuiButton-outlined.MuiButton-colorInfo +-.MuiButton-outlinedWarning ++.MuiButton-outlined.MuiButton-colorWarning +-.MuiButton-containedInherit ++.MuiButton-contained.MuiButton-colorInherit +-.MuiButton-containedPrimary ++.MuiButton-contained.MuiButton-colorPrimary +-.MuiButton-containedSecondary ++.MuiButton-contained.MuiButton-colorSecondary +-.MuiButton-containedSuccess ++.MuiButton-contained.MuiButton-colorSuccess +-.MuiButton-containedError ++.MuiButton-contained.MuiButton-colorError +-.MuiButton-containedInfo ++.MuiButton-contained.MuiButton-colorInfo +-.MuiButton-containedWarning ++.MuiButton-contained.MuiButton-colorWarning +-.MuiButton-textSizeSmall ++.MuiButton-text.MuiButton-sizeSmall +-.MuiButton-textSizeMedium ++.MuiButton-text.MuiButton-sizeMedium +-.MuiButton-textSizeLarge ++.MuiButton-text.MuiButton-sizeLarge +-.MuiButton-outlinedSizeSmall ++.MuiButton-outlined.MuiButton-sizeSmall +-.MuiButton-outlinedSizeMedium ++.MuiButton-outlined.MuiButton-sizeMedium +-.MuiButton-outlinedSizeLarge ++.MuiButton-outlined.MuiButton-sizeLarge +-.MuiButton-containedSizeSmall ++.MuiButton-contained.MuiButton-sizeSmall +-.MuiButton-containedSizeMedium ++.MuiButton-contained.MuiButton-sizeMedium +-.MuiButton-containedSizeLarge ++.MuiButton-contained.MuiButton-sizeLarge +-.MuiButton-root .MuiButton-iconSizeSmall ++.MuiButton-root.MuiButton-sizeSmall > .MuiButton-icon +-.MuiButton-root .MuiButton-iconSizeMedium ++.MuiButton-root.MuiButton-sizeMedium > .MuiButton-icon +-.MuiButton-root .MuiButton-iconSizeLarge ++.MuiButton-root.MuiButton-sizeLarge > .MuiButton-icon + /> +``` + +```bash +npx @mui/codemod@latest deprecations/button-classes +``` + +#### `badge-props` ```diff npx @mui/codemod@latest deprecations/badge-props ``` +#### `chip-classes` + +JS transforms: + +```diff + + import { chipClasses } from '@mui/material/Chip'; + + MuiChip: { + styleOverrides: { + root: { +- [`&.${chipClasses.clickableColorPrimary}`]: { ++ [`&.${chipClasses.clickable}.${chipClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${chipClasses.clickableColorSecondary}`]: { ++ [`&.${chipClasses.clickable}.${chipClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${chipClasses.deletableColorPrimary}`]: { ++ [`&.${chipClasses.deletable}.${chipClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${chipClasses.deletableColorSecondary}`]: { ++ [`&.${chipClasses.deletable}.${chipClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${chipClasses.outlinedPrimary}`]: { ++ [`&.${chipClasses.outlined}.${chipClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${chipClasses.outlinedSecondary}`]: { ++ [`&.${chipClasses.outlined}.${chipClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${chipClasses.filledPrimary}`]: { ++ [`&.${chipClasses.filled}.${chipClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${chipClasses.filledSecondary}`]: { ++ [`&.${chipClasses.filled}.${chipClasses.colorSecondary}`]: { + color: 'red', + }, +- [`& .${chipClasses.avatarSmall}`]: { ++ [`&.${chipClasses.sizeSmall} > .${chipClasses.avatar}`]: { + color: 'red', + }, +- [`& .${chipClasses.avatarMedium}`]: { ++ [`&.${chipClasses.sizeMedium} > .${chipClasses.avatar}`]: { + color: 'red', + }, +- [`& .${chipClasses.avatarColorPrimary}`]: { ++ [`&.${chipClasses.colorPrimary} > .${chipClasses.avatar}`]: { + color: 'red', + }, +- [`& .${chipClasses.avatarColorSecondary}`]: { ++ [`&.${chipClasses.colorSecondary} > .${chipClasses.avatar}`]: { + color: 'red', + }, +- [`& .${chipClasses.iconSmall}`]: { ++ [`&.${chipClasses.sizeSmall} > .${chipClasses.icon}`]: { + color: 'red', + }, +- [`& .${chipClasses.iconMedium}`]: { ++ [`&.${chipClasses.sizeMedium} > .${chipClasses.icon}`]: { + color: 'red', + }, +- [`& .${chipClasses.iconColorPrimary}`]: { ++ [`&.${chipClasses.colorPrimary} > .${chipClasses.icon}`]: { + color: 'red', + }, +- [`& .${chipClasses.iconColorSecondary}`]: { ++ [`&.${chipClasses.colorSecondary} > .${chipClasses.icon}`]: { + color: 'red', + }, +- [`& .${chipClasses.labelSmall}`]: { ++ [`&.${chipClasses.sizeSmall} > .${chipClasses.label}`]: { + color: 'red', + }, +- [`& .${chipClasses.labelMedium}`]: { ++ [`&.${chipClasses.sizeMedium} > .${chipClasses.label}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconSmall}`]: { ++ [`&.${chipClasses.sizeSmall} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconMedium}`]: { ++ [`&.${chipClasses.sizeMedium} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconColorPrimary}`]: { ++ [`&.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconColorSecondary}`]: { ++ [`&.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconOutlinedColorPrimary}`]: { ++ [`&.${chipClasses.outlined}.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconOutlinedColorSecondary}`]: { ++ [`&.${chipClasses.outlined}.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconFilledColorPrimary}`]: { ++ [`&.${chipClasses.filled}.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconFilledColorSecondary}`]: { ++ [`&.${chipClasses.filled}.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, + }, + }, + }, + +``` + +CSS transforms: + +```diff +-.MuiChip-clickableColorPrimary ++.MuiChip-clickable.MuiChip-colorPrimary +-.MuiChip-clickableColorSecondary ++.MuiChip-clickable.MuiChip-colorSecondary +-.MuiChip-deletableColorPrimary ++.MuiChip-deletable.MuiChip-colorPrimary +-.MuiChip-deletableColorSecondary ++.MuiChip-deletable.MuiChip-colorSecondary +-.MuiChip-outlinedPrimary ++.MuiChip-outlined.MuiChip-colorPrimary +-.MuiChip-outlinedSecondary ++.MuiChip-outlined.MuiChip-colorSecondary +-.MuiChip-filledPrimary ++.MuiChip-filled.MuiChip-colorPrimary +-.MuiChip-filledSecondary ++.MuiChip-filled.MuiChip-colorSecondary +-.MuiChip-root .MuiChip-avatarSmall ++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-avatar +-.MuiChip-root .MuiChip-avatarMedium ++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-avatar +-.MuiChip-root .MuiChip-avatarColorPrimary ++.MuiChip-root.MuiChip-colorPrimary > .MuiChip-avatar +-.MuiChip-root .MuiChip-avatarColorSecondary ++.MuiChip-root.MuiChip-colorSecondary > .MuiChip-avatar +-.MuiChip-root .MuiChip-iconSmall ++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-icon +-.MuiChip-root .MuiChip-iconMedium ++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-icon +-.MuiChip-root .MuiChip-iconColorPrimary ++.MuiChip-root.MuiChip-colorPrimary > .MuiChip-icon +-.MuiChip-root .MuiChip-iconColorSecondary ++.MuiChip-root.MuiChip-colorSecondary > .MuiChip-icon +-.MuiChip-root .MuiChip-labelSmall ++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-label +-.MuiChip-root .MuiChip-labelMedium ++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-label +-.MuiChip-root .MuiChip-deleteIconSmall ++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconMedium ++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconColorPrimary ++.MuiChip-root.MuiChip-colorPrimary > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconColorSecondary ++.MuiChip-root.MuiChip-colorSecondary > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconOutlinedColorPrimary ++.MuiChip-root.MuiChip-outlined.MuiChip-colorPrimary > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconOutlinedColorSecondary ++.MuiChip-root.MuiChip-outlined.MuiChip-colorSecondary > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconFilledColorPrimary ++.MuiChip-root.MuiChip-filled.MuiChip-colorPrimary > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconFilledColorSecondary ++.MuiChip-root.MuiChip-filled.MuiChip-colorSecondary > .MuiChip-deleteIcon +``` + +```bash +npx @mui/codemod@latest deprecations/chip-classes +``` + #### `divider-props` ```diff @@ -206,6 +707,97 @@ npx @mui/codemod@latest deprecations/badge-props npx @mui/codemod@latest deprecations/divider-props ``` +#### `pagination-item-classes` + +JS transforms: + +```diff + import { paginationItemClasses } from '@mui/material/PaginationItem'; + + MuiPaginationItem: { + styleOverrides: { + root: { +- [`&.${paginationItemClasses.textPrimary}`]: { ++ [`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${paginationItemClasses.textSecondary}`]: { ++ [`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${paginationItemClasses.outlinedPrimary}`]: { ++ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${paginationItemClasses.outlinedSecondary}`]: { ++ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: { + color: 'red', + }, +- '&.MuiPaginationItem-textPrimary': { ++ '&.MuiPaginationItem-text.MuiPaginationItem-colorPrimary': { + color: 'red', + }, +- '&.MuiPaginationItem-textSecondary': { ++ '&.MuiPaginationItem-text.MuiPaginationItem-colorSecondary': { + color: 'red', + }, +- '&.MuiPaginationItem-outlinedPrimary': { ++ '&.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary': { + color: 'red', + }, +- '&.MuiPaginationItem-outlinedSecondary': { ++ '&.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary': { + color: 'red', + }, + }, + }, + }, +``` + +CSS transforms: + +```diff +-.MuiPaginationItem-textPrimary ++.MuiPaginationItem-text.MuiPaginationItem-primary +-.MuiPaginationItem-textSecondary ++.MuiPaginationItem-text.MuiPaginationItem-secondary +-.MuiPaginationItem-outlinedPrimary ++.MuiPaginationItem-outlined.MuiPaginationItem-primary +-.MuiPaginationItem-outlinedSecondary ++.MuiPaginationItem-outlined.MuiPaginationItem-secondary + /> +``` + +```bash +npx @mui/codemod@latest deprecations/pagination-item-classes +``` + +#### `slider-props` + +```diff + +``` + +```diff + MuiSlider: { + defaultProps: { +- components: { Track: CustomTrack } ++ slots: { track: CustomTrack }, +- componentsProps: { track: { testid: 'test-id' }} ++ slotProps: { track: { testid: 'test-id' } }, + }, + }, +``` + +```bash +npx @mui/codemod@latest deprecations/slider-props +``` + ### v5.0.0 #### `base-use-named-exports` @@ -257,7 +849,7 @@ npx @mui/codemod@latest v5.0.0/base-remove-component-prop #### `rename-css-variables` -Updates the names of the CSS variables of the Joy UI components to adapt to the new naming standards of the CSS variables for components. +Updates the names of the CSS variables of the JoyΒ UI components to adapt to the new naming standards of the CSS variables for components. ```diff - @@ -285,7 +877,7 @@ npx @mui/codemod@latest v5.0.0/base-hook-imports #### `joy-rename-classname-prefix` -Renames the classname prefix from `'Joy'` to `'Mui'` for Joy UI components. +Renames the classname prefix from `'Joy'` to `'Mui'` for JoyΒ UI components. ```diff