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/docs/pages/material-ui/api/slider.json b/docs/pages/material-ui/api/slider.json index e3dc8abbd37c96..8ff7c7438a13e0 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. How to migrate." }, "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. How to migrate." }, "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 12e4419e1cdec1..71c3e069bd729b 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-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..74c5dab30c7553 --- /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 bbc205f652527e..e6ac5223f9302b 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. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). * * @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. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). * * @default {} */ diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js index 5b4e386af1f6d8..42b1c83a4757cf 100644 --- a/packages/mui-material/src/Slider/Slider.js +++ b/packages/mui-material/src/Slider/Slider.js @@ -762,8 +762,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. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). * * @default {} */ @@ -781,8 +780,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. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). * * @default {} */