From 7a3c0343a95c854b13002353d233aef642d347ef Mon Sep 17 00:00:00 2001 From: Lucas Hilgert Date: Wed, 24 Jan 2024 17:29:07 +0100 Subject: [PATCH 1/6] add deprecation warning to components and componentProps --- docs/pages/material-ui/api/slider.json | 8 ++++++-- docs/translations/api-docs/slider/slider.json | 6 ++---- packages/mui-material/src/Slider/Slider.d.ts | 6 ++---- packages/mui-material/src/Slider/Slider.js | 6 ++---- 4 files changed, 12 insertions(+), 14 deletions(-) diff --git a/docs/pages/material-ui/api/slider.json b/docs/pages/material-ui/api/slider.json index 4039796eed612d..95ac3e8f0f9c7e 100644 --- a/docs/pages/material-ui/api/slider.json +++ b/docs/pages/material-ui/api/slider.json @@ -16,14 +16,18 @@ "name": "shape", "description": "{ Input?: elementType, Mark?: elementType, MarkLabel?: elementType, Rail?: elementType, Root?: elementType, Thumb?: elementType, Track?: elementType, ValueLabel?: elementType }" }, - "default": "{}" + "default": "{}", + "deprecated": true, + "deprecationInfo": "use the slots prop instead. This prop will be removed in v7." }, "componentsProps": { "type": { "name": "shape", "description": "{ input?: func
| object, mark?: func
| object, markLabel?: func
| object, rail?: func
| object, root?: func
| object, thumb?: func
| object, track?: func
| object, valueLabel?: func
| { children?: element, className?: string, open?: bool, style?: object, value?: number, valueLabelDisplay?: 'auto'
| 'off'
| 'on' } }" }, - "default": "{}" + "default": "{}", + "deprecated": true, + "deprecationInfo": "use the slotProps prop instead. This prop will be removed in v7." }, "defaultValue": { "type": { "name": "union", "description": "Array<number>
| number" } diff --git a/docs/translations/api-docs/slider/slider.json b/docs/translations/api-docs/slider/slider.json index 7da8d565d19b37..a0075bd00d1801 100644 --- a/docs/translations/api-docs/slider/slider.json +++ b/docs/translations/api-docs/slider/slider.json @@ -12,11 +12,9 @@ "color": { "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide." }, - "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." }, "defaultValue": { "description": "The default value. Use when the component is not controlled." diff --git a/packages/mui-material/src/Slider/Slider.d.ts b/packages/mui-material/src/Slider/Slider.d.ts index fd237e52008051..e5b3775c26c441 100644 --- a/packages/mui-material/src/Slider/Slider.d.ts +++ b/packages/mui-material/src/Slider/Slider.d.ts @@ -46,8 +46,7 @@ export interface SliderOwnProps { /** * 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. * * @default {} */ @@ -65,8 +64,7 @@ export interface SliderOwnProps { * 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. * * @default {} */ diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js index 527d90cdedf4c3..ac5154bfa5f1ac 100644 --- a/packages/mui-material/src/Slider/Slider.js +++ b/packages/mui-material/src/Slider/Slider.js @@ -763,8 +763,7 @@ Slider.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. * * @default {} */ @@ -782,8 +781,7 @@ Slider.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. * * @default {} */ From f59094ed6996a17f6a10ed2db0e34861fd56d0d4 Mon Sep 17 00:00:00 2001 From: Lucas Hilgert Date: Wed, 21 Feb 2024 18:00:39 +0100 Subject: [PATCH 2/6] add deprecation codemod --- .../migrating-from-deprecated-apis.md | 30 +++++++++++ packages/mui-codemod/README.md | 26 +++++++++ .../src/deprecations/slider-props/index.js | 1 + .../deprecations/slider-props/slider-props.js | 15 ++++++ .../slider-props/slider-props.test.js | 53 +++++++++++++++++++ .../slider-props/test-cases/actual.js | 18 +++++++ .../slider-props/test-cases/expected.js | 20 +++++++ .../slider-props/test-cases/theme.actual.js | 30 +++++++++++ .../slider-props/test-cases/theme.expected.js | 45 ++++++++++++++++ packages/mui-material/src/Slider/Slider.d.ts | 4 +- 10 files changed, 240 insertions(+), 2 deletions(-) create mode 100644 packages/mui-codemod/src/deprecations/slider-props/index.js create mode 100644 packages/mui-codemod/src/deprecations/slider-props/slider-props.js create mode 100644 packages/mui-codemod/src/deprecations/slider-props/slider-props.test.js create mode 100644 packages/mui-codemod/src/deprecations/slider-props/test-cases/actual.js create mode 100644 packages/mui-codemod/src/deprecations/slider-props/test-cases/expected.js create mode 100644 packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.actual.js create mode 100644 packages/mui-codemod/src/deprecations/slider-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 8a74845a47060f..e0eb697fc4f4dd 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 @@ -216,3 +216,33 @@ Here's how to migrate: }, }, ``` + +## Slider + +Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#slider-props) below to migrate the code as described in the following sections: + +```bash +npx @mui/codemod@latest deprecations/slider-props +``` + +### components + +The Slider's `components` was deprecated in favor of `slots`: + +```diff + +``` + +### componentsProps + +The Slider's `componentsProps` was deprecated in favor of `slotProps`: + +```diff + +``` diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 83ac6f13e1dcc2..e6426db0d37f30 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -256,6 +256,32 @@ CSS transforms: 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` diff --git a/packages/mui-codemod/src/deprecations/slider-props/index.js b/packages/mui-codemod/src/deprecations/slider-props/index.js new file mode 100644 index 00000000000000..e49c11aa151c65 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/slider-props/index.js @@ -0,0 +1 @@ +export { default } from './slider-props'; diff --git a/packages/mui-codemod/src/deprecations/slider-props/slider-props.js b/packages/mui-codemod/src/deprecations/slider-props/slider-props.js new file mode 100644 index 00000000000000..056962a8b4c82a --- /dev/null +++ b/packages/mui-codemod/src/deprecations/slider-props/slider-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: 'Slider' }); + + return root.toSource(printOptions); +} diff --git a/packages/mui-codemod/src/deprecations/slider-props/slider-props.test.js b/packages/mui-codemod/src/deprecations/slider-props/slider-props.test.js new file mode 100644 index 00000000000000..b6d5682eb2a76a --- /dev/null +++ b/packages/mui-codemod/src/deprecations/slider-props/slider-props.test.js @@ -0,0 +1,53 @@ +import path from 'path'; +import { expect } from 'chai'; +import { jscodeshift } from '../../../testUtils'; +import transform from './slider-props'; +import readFile from '../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +describe('@mui/codemod', () => { + describe('deprecations', () => { + describe('slider-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] slider-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/theme.actual.js') }, + { jscodeshift }, + { printOptions: { trailingComma: true } }, + ); + + 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/slider-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/slider-props/test-cases/actual.js new file mode 100644 index 00000000000000..c73ad39187900b --- /dev/null +++ b/packages/mui-codemod/src/deprecations/slider-props/test-cases/actual.js @@ -0,0 +1,18 @@ +import Slider from '@mui/material/Slider'; + +; +; +; diff --git a/packages/mui-codemod/src/deprecations/slider-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/slider-props/test-cases/expected.js new file mode 100644 index 00000000000000..c1809d70cfa6eb --- /dev/null +++ b/packages/mui-codemod/src/deprecations/slider-props/test-cases/expected.js @@ -0,0 +1,20 @@ +import Slider from '@mui/material/Slider'; + +; +; +; diff --git a/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.actual.js new file mode 100644 index 00000000000000..5b68897f2ddc97 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.actual.js @@ -0,0 +1,30 @@ +fn({ + MuiSlider: { + defaultProps: { + components: { Track: ComponentsTrack }, + componentsProps: { track: componentsTrackProps }, + }, + }, +}); + +fn({ + MuiSlider: { + defaultProps: { + components: { Track: ComponentsTrack }, + slots: { rail: SlotsRail }, + componentsProps: { track: componentsTrackProps }, + slotProps: { rail: slotsRailProps }, + }, + }, +}); + +fn({ + MuiSlider: { + defaultProps: { + components: { Track: ComponentsTrack }, + slots: { rail: SlotsRail, track: SlotsTrack }, + componentsProps: { track: componentsTrackProps }, + slotProps: { rail: slotsRailProps, track: slotsTrackProps }, + }, + }, +}); diff --git a/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.expected.js new file mode 100644 index 00000000000000..272439a0fb3839 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.expected.js @@ -0,0 +1,45 @@ +fn({ + MuiSlider: { + defaultProps: { + slots: { + track: ComponentsTrack + }, + + slotProps: { + track: componentsTrackProps + } + }, + }, +}); + +fn({ + MuiSlider: { + defaultProps: { + slots: { + track: ComponentsTrack, + rail: SlotsRail + }, + + slotProps: { + track: componentsTrackProps, + rail: slotsRailProps + } + }, + }, +}); + +fn({ + MuiSlider: { + defaultProps: { + slots: { + track: SlotsTrack, + rail: SlotsRail + }, + + slotProps: { + track: slotsTrackProps, + rail: slotsRailProps + } + }, + }, +}); diff --git a/packages/mui-material/src/Slider/Slider.d.ts b/packages/mui-material/src/Slider/Slider.d.ts index 8869b4524fbcb5..78fef8b1e3eeda 100644 --- a/packages/mui-material/src/Slider/Slider.d.ts +++ b/packages/mui-material/src/Slider/Slider.d.ts @@ -46,7 +46,7 @@ export interface SliderOwnProps { /** * The components used for each slot inside. * - @deprecated use the `slots` prop instead. This prop will be removed in v7. + * @deprecated use the `slots` prop instead. This prop will be removed in v7. * * @default {} */ @@ -64,7 +64,7 @@ export interface SliderOwnProps { * The extra props for the slot components. * You can override the existing props or add new ones. * - @deprecated use the `slotProps` prop instead. This prop will be removed in v7. + * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. * * @default {} */ From 5e50b6c2fa134ad7053e3e856ca5bd9f3473f07a Mon Sep 17 00:00:00 2001 From: Lucas Hilgert Date: Wed, 21 Feb 2024 18:49:55 +0100 Subject: [PATCH 3/6] fix unit test --- .../slider-props/test-cases/theme.expected.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.expected.js index 272439a0fb3839..74c5dab30c7553 100644 --- a/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.expected.js +++ b/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.expected.js @@ -2,12 +2,12 @@ fn({ MuiSlider: { defaultProps: { slots: { - track: ComponentsTrack + track: ComponentsTrack, }, slotProps: { - track: componentsTrackProps - } + track: componentsTrackProps, + }, }, }, }); @@ -17,13 +17,13 @@ fn({ defaultProps: { slots: { track: ComponentsTrack, - rail: SlotsRail + rail: SlotsRail, }, slotProps: { track: componentsTrackProps, - rail: slotsRailProps - } + rail: slotsRailProps, + }, }, }, }); @@ -33,13 +33,13 @@ fn({ defaultProps: { slots: { track: SlotsTrack, - rail: SlotsRail + rail: SlotsRail, }, slotProps: { track: slotsTrackProps, - rail: slotsRailProps - } + rail: slotsRailProps, + }, }, }, }); From 66a2ff7f1a9a7fac7ff1192b673a87ed85ea68fa Mon Sep 17 00:00:00 2001 From: Lucas Hilgert Date: Thu, 22 Feb 2024 12:27:47 +0100 Subject: [PATCH 4/6] add migration link to deprecations --- packages/mui-material/src/Slider/Slider.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/Slider/Slider.d.ts b/packages/mui-material/src/Slider/Slider.d.ts index 78fef8b1e3eeda..e6ac5223f9302b 100644 --- a/packages/mui-material/src/Slider/Slider.d.ts +++ b/packages/mui-material/src/Slider/Slider.d.ts @@ -46,7 +46,7 @@ export interface SliderOwnProps { /** * The components used for each slot inside. * - * @deprecated use the `slots` prop instead. This prop will be removed in v7. + * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). * * @default {} */ @@ -64,7 +64,7 @@ export interface SliderOwnProps { * The extra props for the slot components. * You can override the existing props or add new ones. * - * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. + * @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 76276f717b9cc605e18076b0b46e8602f645ef45 Mon Sep 17 00:00:00 2001 From: Lucas Hilgert Date: Thu, 22 Feb 2024 12:44:29 +0100 Subject: [PATCH 5/6] proptypes --- packages/mui-material/src/Slider/Slider.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js index 8ff4b1146ed808..42b1c83a4757cf 100644 --- a/packages/mui-material/src/Slider/Slider.js +++ b/packages/mui-material/src/Slider/Slider.js @@ -762,7 +762,7 @@ Slider.propTypes /* remove-proptypes */ = { /** * The components used for each slot inside. * - * @deprecated use the `slots` prop instead. This prop will be removed in v7. + * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). * * @default {} */ @@ -780,7 +780,7 @@ Slider.propTypes /* remove-proptypes */ = { * The extra props for the slot components. * You can override the existing props or add new ones. * - * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. + * @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 c6fec4b1ab5c1f501b265e3cfddb56928c448010 Mon Sep 17 00:00:00 2001 From: Lucas Hilgert Date: Thu, 22 Feb 2024 14:26:01 +0100 Subject: [PATCH 6/6] docs:api --- docs/pages/material-ui/api/slider.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pages/material-ui/api/slider.json b/docs/pages/material-ui/api/slider.json index 9107ba3c8cd02e..8ff7c7438a13e0 100644 --- a/docs/pages/material-ui/api/slider.json +++ b/docs/pages/material-ui/api/slider.json @@ -18,7 +18,7 @@ }, "default": "{}", "deprecated": true, - "deprecationInfo": "use the slots prop instead. This prop will be removed in v7." + "deprecationInfo": "use the slots prop instead. This prop will be removed in v7. How to migrate." }, "componentsProps": { "type": { @@ -27,7 +27,7 @@ }, "default": "{}", "deprecated": true, - "deprecationInfo": "use the slotProps prop instead. This prop will be removed in v7." + "deprecationInfo": "use the slotProps prop instead. This prop will be removed in v7. How to migrate." }, "defaultValue": { "type": { "name": "union", "description": "Array<number>
| number" }