From e4145e08a8d567600bd80eb34d965519ff43e8c0 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Fri, 31 May 2024 15:44:57 -0400 Subject: [PATCH 1/4] Deprecate components and componentsProps --- .../migrating-from-deprecated-apis.md | 22 ++++++++ docs/pages/material-ui/api/backdrop.json | 8 ++- .../api-docs/backdrop/backdrop.json | 6 +- packages/mui-codemod/README.md | 9 +++ .../backdrop-props/backdrop-props.js | 3 + .../backdrop-props/test-cases/actual.js | 16 +++++- .../backdrop-props/test-cases/expected.js | 20 ++++++- .../backdrop-props/test-cases/theme.actual.js | 38 +++++++++++++ .../test-cases/theme.expected.js | 55 +++++++++++++++++++ .../mui-material/src/Backdrop/Backdrop.d.ts | 6 +- .../mui-material/src/Backdrop/Backdrop.js | 6 +- 11 files changed, 173 insertions(+), 16 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 814f1a07349ab2..4ddef6c552d664 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 @@ -379,6 +379,28 @@ Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-code npx @mui/codemod@next deprecations/backdrop-props ``` +### components + +The Backdrop's `components` prop was deprecated in favor of `slots`: + +```diff + +``` + +### componentsProps + +The Backdrop's `componentsProps` prop was deprecated in favor of `slotProps`: + +```diff + +``` + ### TransitionComponent The Backdrop's `TransitionComponent` prop was deprecated in favor of `slots.transition`: diff --git a/docs/pages/material-ui/api/backdrop.json b/docs/pages/material-ui/api/backdrop.json index c201d45e204f74..4403600086204a 100644 --- a/docs/pages/material-ui/api/backdrop.json +++ b/docs/pages/material-ui/api/backdrop.json @@ -6,11 +6,15 @@ "component": { "type": { "name": "elementType" } }, "components": { "type": { "name": "shape", "description": "{ Root?: elementType }" }, - "default": "{}" + "default": "{}", + "deprecated": true, + "deprecationInfo": "Use the slots prop instead. This prop will be removed in v7. See Migrating from deprecated APIs for more details." }, "componentsProps": { "type": { "name": "shape", "description": "{ root?: object }" }, - "default": "{}" + "default": "{}", + "deprecated": true, + "deprecationInfo": "Use the slotProps prop instead. This prop will be removed in v7. See Migrating from deprecated APIs for more details." }, "invisible": { "type": { "name": "bool" }, "default": "false" }, "slotProps": { diff --git a/docs/translations/api-docs/backdrop/backdrop.json b/docs/translations/api-docs/backdrop/backdrop.json index b439692f008532..6f3b4c4102cc60 100644 --- a/docs/translations/api-docs/backdrop/backdrop.json +++ b/docs/translations/api-docs/backdrop/backdrop.json @@ -6,11 +6,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 backdrop is invisible. It can be used when rendering a popover or a custom select component." diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index f71396dcf265fe..1190069b909eb0 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -391,6 +391,15 @@ npx @mui/codemod@next deprecations/avatar-group-props #### `backdrop-props` +```diff + +``` + ```diff ; + // should skip non MUI components ; + +; +; +; +; + +// should skip non MUI components +; diff --git a/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/expected.js index 60b85e0d7b2556..a81133b9babe6d 100644 --- a/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/expected.js +++ b/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/expected.js @@ -20,7 +20,25 @@ import { Backdrop as MyBackdrop } from '@mui/material'; ; + // should skip non MUI components ; + +; +; +; +; + +// should skip non MUI components +; diff --git a/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/theme.actual.js index 8488ea0176baaa..bfb2da0b7c4393 100644 --- a/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/theme.actual.js +++ b/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/theme.actual.js @@ -28,3 +28,41 @@ fn({ }, }, }); + +fn({ + MuiBackdrop: { + defaultProps: { + components: { Root: ComponentsRoot }, + componentsProps: { root: componentsRootProps }, + }, + }, +}); + +fn({ + MuiBackdrop: { + defaultProps: { + components: { Root: ComponentsRoot }, + slotProps: { root: slotsRootProps }, + }, + }, +}); + +fn({ + MuiBackdrop: { + defaultProps: { + slots: { root: SlotsRoot }, + componentsProps: { root: componentsRootProps }, + }, + }, +}); + +fn({ + MuiBackdrop: { + defaultProps: { + slots: { root: SlotsRoot }, + components: { Root: ComponentsRoot }, + slotProps: { root: slotsRootProps }, + componentsProps: { root: componentsRootProps }, + }, + }, +}); diff --git a/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/theme.expected.js index 46e9175ad5fdab..fb75b1ec670c19 100644 --- a/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/theme.expected.js +++ b/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/theme.expected.js @@ -29,3 +29,58 @@ fn({ }, }, }); + +fn({ + MuiBackdrop: { + defaultProps: { + slots: { + root: ComponentsRoot + }, + + slotProps: { + root: componentsRootProps + } + }, + }, +}); + +fn({ + MuiBackdrop: { + defaultProps: { + slotProps: { root: slotsRootProps }, + + slots: { + root: ComponentsRoot + } + }, + }, +}); + +fn({ + MuiBackdrop: { + defaultProps: { + slots: { root: SlotsRoot }, + + slotProps: { + root: componentsRootProps + } + }, + }, +}); + +fn({ + MuiBackdrop: { + defaultProps: { + slots: { + root: SlotsRoot + }, + + slotProps: { + root: { + ...componentsRootProps, + ...slotsRootProps + } + } + }, + }, +}); diff --git a/packages/mui-material/src/Backdrop/Backdrop.d.ts b/packages/mui-material/src/Backdrop/Backdrop.d.ts index 610b0ec4e9eddc..8d81b139d01794 100644 --- a/packages/mui-material/src/Backdrop/Backdrop.d.ts +++ b/packages/mui-material/src/Backdrop/Backdrop.d.ts @@ -52,8 +52,7 @@ export interface BackdropOwnProps /** * 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. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. * * @default {} */ @@ -64,8 +63,7 @@ export interface BackdropOwnProps * 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. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. * * @default {} */ diff --git a/packages/mui-material/src/Backdrop/Backdrop.js b/packages/mui-material/src/Backdrop/Backdrop.js index fff194c3e036ef..36f8378bfd5ecc 100644 --- a/packages/mui-material/src/Backdrop/Backdrop.js +++ b/packages/mui-material/src/Backdrop/Backdrop.js @@ -134,8 +134,7 @@ Backdrop.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. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. * * @default {} */ @@ -146,8 +145,7 @@ Backdrop.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. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. * * @default {} */ From d355888cc169b28b5217ed6ba771d7a9340acbf5 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Fri, 31 May 2024 16:11:44 -0400 Subject: [PATCH 2/4] Refactor with describeJscodeshiftTransform --- .../backdrop-props/backdrop-props.test.js | 55 +++---------------- 1 file changed, 9 insertions(+), 46 deletions(-) diff --git a/packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.test.js b/packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.test.js index 13949c52396b08..4c8068737f5186 100644 --- a/packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.test.js +++ b/packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.test.js @@ -1,53 +1,16 @@ -import path from 'path'; -import { expect } from 'chai'; -import { jscodeshift } from '../../../testUtils'; +import { describeJscodeshiftTransform } from '../../../testUtils'; import transform from './backdrop-props'; -import readFile from '../../util/readFile'; - -function read(fileName) { - return readFile(path.join(__dirname, fileName)); -} describe('@mui/codemod', () => { describe('deprecations', () => { - describe('backdrop-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] backdrop-props', () => { - it('transforms props as needed', () => { - const actual = transform( - { source: read('./test-cases/theme.actual.js') }, - { jscodeshift }, - {}, - ); - - 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'); - }); + describeJscodeshiftTransform({ + transform, + transformName: 'backdrop-props', + dirname: __dirname, + testCases: [ + { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' }, + { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' }, + ], }); }); }); From b4578de990a61276c3f8782adeb480ae73f8465a Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Fri, 31 May 2024 17:31:14 -0400 Subject: [PATCH 3/4] trigger ci From 24514ea80c1b9d0928102d5ddba5deca72159fa3 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Mon, 3 Jun 2024 10:23:13 -0400 Subject: [PATCH 4/4] Add missing code block in codemod README --- packages/mui-codemod/README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 1190069b909eb0..673bc86c57f4e7 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -400,6 +400,17 @@ npx @mui/codemod@next deprecations/avatar-group-props /> ``` +```diff + MuiBackdrop: { + defaultProps: { +- components: { Root: CustomRoot } ++ slots: { root: CustomRoot }, +- componentsProps: { root: { testid: 'root-id' } } ++ slotProps: { root: { testid: 'root-id' } }, + }, + }, +``` + ```diff