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 f62b3a53a63dd9..0d3b149465b83c 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 @@ -271,6 +271,36 @@ The Backdrop's `TransitionComponent` prop was deprecated in favor of `slots.tran + slots={{ transition: CustomTransition }} ``` +## 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@next 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 + +``` + ## Button Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#button-classes) below to migrate the code as described in the following sections: diff --git a/docs/pages/material-ui/api/badge.json b/docs/pages/material-ui/api/badge.json index 8a4b1b694ac28f..9f3612604ff53f 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 slots 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" }, diff --git a/docs/translations/api-docs/badge/badge.json b/docs/translations/api-docs/badge/badge.json index 8b765118a3a5f6..cd14dae0e8c1b1 100644 --- a/docs/translations/api-docs/badge/badge.json +++ b/docs/translations/api-docs/badge/badge.json @@ -11,11 +11,9 @@ "component": { "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." - }, + "components": { "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." }, diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 62b01c7883c995..cef0b73316e682 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -287,6 +287,32 @@ npx @mui/codemod@next deprecations/alert-props npx @mui/codemod@next deprecations/backdrop-props ``` +#### `badge-props` + +```diff + +``` + +```diff + MuiBadge: { + defaultProps: { +- components: { Root: CustomRoot } ++ slots: { root: CustomRoot }, +- componentsProps: { root: { testid: 'test-id' }} ++ slotProps: { root: { testid: 'test-id' } }, + }, + }, +``` + +```bash +npx @mui/codemod@next deprecations/badge-props +``` + #### `button-classes` JS transforms: 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..9564f50a60c087 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/badge-props/badge-props.js @@ -0,0 +1,15 @@ +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..5da03e1b1e20c5 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/badge-props/badge-props.test.js @@ -0,0 +1,53 @@ +import path from 'path'; +import { expect } from 'chai'; +import { jscodeshift } from '../../../testUtils'; +import transform from './badge-props'; +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 = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {}); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {}); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('[theme] badge-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/theme.actual.js') }, + { jscodeshift }, + { printOptions: { trailingComma: false } }, + ); + + const expected = read('./test-cases/theme.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/theme.expected.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/theme.expected.js'); + expect(actual).to.equal(expected, '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..7075b1d041785d --- /dev/null +++ b/packages/mui-codemod/src/deprecations/badge-props/test-cases/actual.js @@ -0,0 +1,24 @@ +import { Badge } from '@mui/material'; + +; + +; + +; + +; diff --git a/packages/mui-codemod/src/deprecations/badge-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/badge-props/test-cases/expected.js new file mode 100644 index 00000000000000..532e2720d4b094 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/badge-props/test-cases/expected.js @@ -0,0 +1,32 @@ +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..2517a8a9a2ca08 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/badge-props/test-cases/theme.actual.js @@ -0,0 +1,42 @@ +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 }, + }, + }, +}); + +fn({ + MuiBadge: { + defaultProps: { + components: { root: ComponentsRoot }, + slots: { badge: SlotsBadge, root: SlotsRoot }, + componentsProps: { root: componentsRootProps, badge: componentsBadgeProps }, + slotProps: { badge: slotsBadgeProps, root: slotsRootProps }, + }, + }, +}); + 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..e3c05284951fdc --- /dev/null +++ b/packages/mui-codemod/src/deprecations/badge-props/test-cases/theme.expected.js @@ -0,0 +1,73 @@ +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: { + ...componentsRootProps, + ...slotsRootProps + }, + + badge: slotsBadgeProps + } + }, + }, +}); + +fn({ + MuiBadge: { + defaultProps: { + slots: { + root: SlotsRoot, + badge: SlotsBadge + }, + + slotProps: { + root: { + ...componentsRootProps, + ...slotsRootProps + }, + + badge: { + ...componentsBadgeProps, + ...slotsBadgeProps + } + } + }, + }, +}); + diff --git a/packages/mui-material/src/Badge/Badge.d.ts b/packages/mui-material/src/Badge/Badge.d.ts index 5ca85710f17459..af36329aab4029 100644 --- a/packages/mui-material/src/Badge/Badge.d.ts +++ b/packages/mui-material/src/Badge/Badge.d.ts @@ -72,8 +72,7 @@ export interface BadgeOwnProps { * 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. + * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). * * @default {} */ @@ -81,8 +80,7 @@ export interface BadgeOwnProps { /** * 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 {} */ diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js index f38326e038e5a9..04dbe38d85d041 100644 --- a/packages/mui-material/src/Badge/Badge.js +++ b/packages/mui-material/src/Badge/Badge.js @@ -398,8 +398,7 @@ 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 {} */ @@ -411,8 +410,7 @@ Badge.propTypes /* remove-proptypes */ = { * 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. + * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). * * @default {} */