[material-ui][Slider] Deprecate components and componentProps props f…

…or v6 (#40777)

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 <path>
+```
+
+### components
+
+The Slider's `components` was deprecated in favor of `slots`:
+
+```diff
+ <Slider
+-  components={{ Track: CustomTrack }}
++  slots={{ track: CustomTrack }}
+ />
+```
+
+### componentsProps
+
+The Slider's `componentsProps` was deprecated in favor of `slotProps`:
+
+```diff
+ <Slider
+-  componentsProps={{ track: { testid: 'test-id' } }}
++  slotProps={{ track: { testid: 'test-id' } }}
+ />
+```

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 <code>slots</code> prop instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "componentsProps": {
       "type": {
         "name": "shape",
         "description": "{ input?: func<br>&#124;&nbsp;object, mark?: func<br>&#124;&nbsp;object, markLabel?: func<br>&#124;&nbsp;object, rail?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, thumb?: func<br>&#124;&nbsp;object, track?: func<br>&#124;&nbsp;object, valueLabel?: func<br>&#124;&nbsp;{ children?: element, className?: string, open?: bool, style?: object, value?: number, valueLabelDisplay?: 'auto'<br>&#124;&nbsp;'off'<br>&#124;&nbsp;'on' } }"
       },
-      "default": "{}"
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slotProps</code> prop instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "defaultValue": {
       "type": { "name": "union", "description": "Array&lt;number&gt;<br>&#124;&nbsp;number" }

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 <a href=\"https://mui.com/material-ui/customization/palette/#custom-colors\">palette customization guide</a>."
     },
-    "components": {
-      "description": "The components used for each slot inside.<br>This prop is an alias for the <code>slots</code> prop. It&#39;s recommended to use the <code>slots</code> 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.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> 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."

packages/mui-codemod/README.md

@@ -256,6 +256,32 @@ CSS transforms:
 npx @mui/codemod@latest deprecations/pagination-item-classes <path>
 ```
 
+#### `slider-props`
+
+```diff
+ <Slider
+-  components={{ Track: CustomTrack }}
++  slots={{ track: CustomTrack }}
+-  componentsProps={{ track: { testid: 'test-id' } }}
++  slotProps={{ track: { testid: 'test-id' } }}
+ />
+```
+
+```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 <path>
+```
+
 ### v5.0.0
 
 #### `base-use-named-exports`

packages/mui-codemod/src/deprecations/slider-props/index.js

@@ -0,0 +1 @@
+export { default } from './slider-props';

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);
+}

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');
+      });
+    });
+  });
+});

packages/mui-codemod/src/deprecations/slider-props/test-cases/actual.js

@@ -0,0 +1,18 @@
+import Slider from '@mui/material/Slider';
+
+<Slider
+  components={{ Track: ComponentsTrack }}
+  componentsProps={{ track: componentsTrackProps }}
+/>;
+<Slider
+  slots={{ rail: SlotsRail }}
+  components={{ Track: ComponentsTrack }}
+  slotProps={{ rail: slotsRailProps }}
+  componentsProps={{ track: componentsTrackProps }}
+/>;
+<Slider
+  slots={{ rail: SlotsRail, track: SlotsTrack }}
+  components={{ Track: ComponentsTrack }}
+  slotProps={{ rail: slotsRailProps, track: slotsTrackProps }}
+  componentsProps={{ track: componentsTrackProps }}
+/>;

packages/mui-codemod/src/deprecations/slider-props/test-cases/expected.js

@@ -0,0 +1,20 @@
+import Slider from '@mui/material/Slider';
+
+<Slider
+  slots={{
+    track: ComponentsTrack
+  }}
+  slotProps={{ track: componentsTrackProps }}
+/>;
+<Slider
+  slots={{
+    rail: SlotsRail,
+    track: ComponentsTrack
+  }}
+  slotProps={{
+    rail: slotsRailProps,
+    track: componentsTrackProps
+  }} />;
+<Slider
+  slots={{ rail: SlotsRail, track: SlotsTrack }}
+  slotProps={{ rail: slotsRailProps, track: slotsTrackProps }} />;

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 },
+    },
+  },
+});

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,
+      },
+    },
+  },
+});

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 {}
    */

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 {}
    */