[material-ui][Slider] Deprecate composed classes

docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md

@@ -1838,6 +1838,75 @@ Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-code
 
 ```bash
 npx @mui/codemod@latest deprecations/slider-props <path>
+npx @mui/codemod@latest deprecations/slider-classes <path>
+```
+
+### Composed CSS classes
+
+The CSS classes composing the `color` prop values, as well as those composing the `size` prop values, have been removed.
+
+Here's how to migrate:
+
+```diff
+-.MuiSlider-root .MuiSlider-thumbSizeSmall
++.MuiSlider-root.MuiSlider-sizeSmall > .MuiSlider-thumb
+-.MuiSlider-root .MuiSlider-thumbSizeMedium
++.MuiSlider-root.MuiSlider-sizeMedium > .MuiSlider-thumb
+-.MuiSlider-root .MuiSlider-thumbColorPrimary
++.MuiSlider-root.MuiSlider-colorPrimary > .MuiSlider-thumb
+-.MuiSlider-root .MuiSlider-thumbColorSecondary
++.MuiSlider-root.MuiSlider-colorSecondary > .MuiSlider-thumb
+-.MuiSlider-root .MuiSlider-thumbColorError
++.MuiSlider-root.MuiSlider-colorError > .MuiSlider-thumb
+-.MuiSlider-root .MuiSlider-thumbColorInfo
++.MuiSlider-root.MuiSlider-colorInfo > .MuiSlider-thumb
+-.MuiSlider-root .MuiSlider-thumbColorSuccess
++.MuiSlider-root.MuiSlider-colorSuccess > .MuiSlider-thumb
+-.MuiSlider-root .MuiSlider-thumbColorWarning
++.MuiSlider-root.MuiSlider-colorWarning > .MuiSlider-thumb
+```
+
+```diff
+ import { sliderClasses } from '@mui/material/Slider';
+
+ MuiSlider: {
+   styleOverrides: {
+     root: {
+-      [`&.${sliderClasses.thumbSizeSmall}`]: {
++      [`&.${sliderClasses.sizeSmall} > .${sliderClasses.thumb}`]: {
+         color: 'red',
+       },
+-      [`&.${sliderClasses.thumbSizeMedium}`]: {
++      [`&.${sliderClasses.sizeMedium} > .${sliderClasses.thumb}`]: {
+         color: 'red',
+       },
+-      [`&.${sliderClasses.thumbColorPrimary}`]: {
++      [`&.${sliderClasses.colorPrimary} > .${sliderClasses.thumb}`]: {
+         color: 'red',
+       },
+-      [`&.${sliderClasses.thumbColorSecondary}`]: {
++      [`&.${sliderClasses.colorSecondary} > .${sliderClasses.thumb}`]: {
+         color: 'red',
+       },
+-      [`&.${sliderClasses.thumbColorError}`]: {
++      [`&.${sliderClasses.colorError} > .${sliderClasses.thumb}`]: {
+         color: 'red',
+       },
+-      [`&.${sliderClrsses.thumbColorInfo}`]: {
++      [`&.${soiderClasses.colorInfo} > .${sliderClasses.thumb}`]: {
+         color: 'red',
+       },
+-      [`&.${sliderClasses.thumbColorSuccess}`]: {
++      [`&.${sliderClasses.colorSuccess} > .${sliderClasses.thumb}`]: {
+         color: 'red',
+       },
+-      [`&.${sliderClasses.thumbColorWarning}`]: {
++      [`&.${sliderClasses.colorWarning} > .${sliderClasses.thumb}`]: {
+         color: 'red',
+       },
+     },
+   },
+ },
 ```
 
 ### components

docs/pages/material-ui/api/slider.json

@@ -252,43 +252,50 @@
       "key": "thumbColorError",
       "className": "MuiSlider-thumbColorError",
       "description": "Styles applied to the thumb element if `color=\"error\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "thumbColorInfo",
       "className": "MuiSlider-thumbColorInfo",
       "description": "Styles applied to the thumb element if `color=\"info\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "thumbColorPrimary",
       "className": "MuiSlider-thumbColorPrimary",
       "description": "Styles applied to the thumb element if `color=\"primary\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "thumbColorSecondary",
       "className": "MuiSlider-thumbColorSecondary",
       "description": "Styles applied to the thumb element if `color=\"secondary\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "thumbColorSuccess",
       "className": "MuiSlider-thumbColorSuccess",
       "description": "Styles applied to the thumb element if `color=\"success\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "thumbColorWarning",
       "className": "MuiSlider-thumbColorWarning",
       "description": "Styles applied to the thumb element if `color=\"warning\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "thumbSizeSmall",
       "className": "MuiSlider-thumbSizeSmall",
       "description": "Styles applied to the thumb element if `size=\"small\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "track",

docs/translations/api-docs/slider/slider.json

@@ -171,37 +171,44 @@
     "thumbColorError": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the thumb element",
-      "conditions": "<code>color=\"error\"</code>"
+      "conditions": "<code>color=\"error\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#slider-classes-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-colorError\">.MuiSlider-colorError</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "thumbColorInfo": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the thumb element",
-      "conditions": "<code>color=\"info\"</code>"
+      "conditions": "<code>color=\"info\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#slider-classes-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-colorInfo\">.MuiSlider-colorInfo</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "thumbColorPrimary": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the thumb element",
-      "conditions": "<code>color=\"primary\"</code>"
+      "conditions": "<code>color=\"primary\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#slider-classes-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-colorPrimary\">.MuiSlider-colorPrimary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "thumbColorSecondary": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the thumb element",
-      "conditions": "<code>color=\"secondary\"</code>"
+      "conditions": "<code>color=\"secondary\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#slider-classes-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-colorSecondary\">.MuiSlider-colorSecondary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "thumbColorSuccess": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the thumb element",
-      "conditions": "<code>color=\"success\"</code>"
+      "conditions": "<code>color=\"success\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#slider-classes-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-colorSuccess\">.MuiSlider-colorSuccess</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "thumbColorWarning": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the thumb element",
-      "conditions": "<code>color=\"warning\"</code>"
+      "conditions": "<code>color=\"warning\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#slider-classes-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-colorWarning\">.MuiSlider-colorWarning</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "thumbSizeSmall": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the thumb element",
-      "conditions": "<code>size=\"small\"</code>"
+      "conditions": "<code>size=\"small\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#slider-classes-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-sizeSmall\">.MuiSlider-sizeSmall</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "track": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the track element" },
     "trackFalse": {

packages/mui-codemod/README.md

@@ -1633,6 +1633,78 @@ npx @mui/codemod@latest deprecations/slider-props <path>
 npx @mui/codemod@next deprecations/snackbar-props <path>
 ```
 
+#### `slider-classes`
+
+JS transforms:
+
+```diff
+ import { sliderClasses } from '@mui/material/Slider';
+
+ MuiSlider: {
+   styleOverrides: {
+     root: {
+-      [`&.${sliderClasses.thumbSizeSmall}`]: {
++      [`&.${sliderClasses.sizeSmall} > .${sliderClasses.thumb}`]: {
+         color: 'red',
+       },
+-      [`&.${sliderClasses.thumbSizeMedium}`]: {
++      [`&.${sliderClasses.sizeMedium} > .${sliderClasses.thumb}`]: {
+         color: 'red',
+       },
+-      [`&.${sliderClasses.thumbColorPrimary}`]: {
++      [`&.${sliderClasses.colorPrimary} > .${sliderClasses.thumb}`]: {
+         color: 'red',
+       },
+-      [`&.${sliderClasses.thumbColorSecondary}`]: {
++      [`&.${sliderClasses.colorSecondary} > .${sliderClasses.thumb}`]: {
+         color: 'red',
+       },
+-      [`&.${sliderClasses.thumbColorError}`]: {
++      [`&.${sliderClasses.colorError} > .${sliderClasses.thumb}`]: {
+         color: 'red',
+       },
+-      [`&.${sliderClrsses.thumbColorInfo}`]: {
++      [`&.${soiderClasses.colorInfo} > .${sliderClasses.thumb}`]: {
+         color: 'red',
+       },
+-      [`&.${sliderClasses.thumbColorSuccess}`]: {
++      [`&.${sliderClasses.colorSuccess} > .${sliderClasses.thumb}`]: {
+         color: 'red',
+       },
+-      [`&.${sliderClasses.thumbColorWarning}`]: {
++      [`&.${sliderClasses.colorWarning} > .${sliderClasses.thumb}`]: {
+         color: 'red',
+       },
+     },
+   },
+ },
+```
+
+CSS transforms:
+
+```diff
+-.MuiSlider-root .MuiSlider-thumbSizeSmall
++.MuiSlider-root.MuiSlider-sizeSmall > .MuiSlider-thumb
+-.MuiSlider-root .MuiSlider-thumbSizeMedium
++.MuiSlider-root.MuiSlider-sizeMedium > .MuiSlider-thumb
+-.MuiSlider-root .MuiSlider-thumbColorPrimary
++.MuiSlider-root.MuiSlider-colorPrimary > .MuiSlider-thumb
+-.MuiSlider-root .MuiSlider-thumbColorSecondary
++.MuiSlider-root.MuiSlider-colorSecondary > .MuiSlider-thumb
+-.MuiSlider-root .MuiSlider-thumbColorError
++.MuiSlider-root.MuiSlider-colorError > .MuiSlider-thumb
+-.MuiSlider-root .MuiSlider-thumbColorInfo
++.MuiSlider-root.MuiSlider-colorInfo > .MuiSlider-thumb
+-.MuiSlider-root .MuiSlider-thumbColorSuccess
++.MuiSlider-root.MuiSlider-colorSuccess > .MuiSlider-thumb
+-.MuiSlider-root .MuiSlider-thumbColorWarning
++.MuiSlider-root.MuiSlider-colorWarning > .MuiSlider-thumb
+```
+
+```bash
+npx @mui/codemod@latest deprecations/button-classes <path>
+```
+
 #### `tooltip-props`
 
 ```diff

packages/mui-codemod/src/deprecations/all/deprecations-all.js

@@ -35,6 +35,7 @@ import transformTablePaginationProps from '../table-pagination-props';
 import transformCardHeaderProps from '../card-header-props';
 import transformPopoverProps from '../popover-props';
 import transformSnackbarProps from '../snackbar-props';
+import transformSliderClasses from '../slider-classes';
 import transformerTabsProps from '../tabs-props';
 import transformerTabsClasses from '../tabs-classes';
 
@@ -80,6 +81,7 @@ export default function deprecationsAll(file, api, options) {
   file.source = transformCardHeaderProps(file, api, options);
   file.source = transformPopoverProps(file, api, options);
   file.source = transformSnackbarProps(file, api, options);
+  file.source = transformSliderClasses(file, api, options);
   file.source = transformerTabsProps(file, api, options);
   file.source = transformerTabsClasses(file, api, options);
 

packages/mui-codemod/src/deprecations/all/postcss.config.js

@@ -24,6 +24,7 @@ const {
   plugin: tableSortLabelClassesPlugin,
 } = require('../table-sort-label-classes/postcss-plugin');
 const { plugin: selectClassesPlugin } = require('../select-classes/postcss-plugin');
+const { plugin: sliderClassesPlugin } = require('../slider-classes/postcss-plugin');
 
 module.exports = {
   plugins: [
@@ -41,5 +42,6 @@ module.exports = {
     tabClassesPlugin,
     tableSortLabelClassesPlugin,
     selectClassesPlugin,
+    sliderClassesPlugin,
   ],
 };

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

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

packages/mui-codemod/src/deprecations/slider-classes/postcss-plugin.js

@@ -0,0 +1,57 @@
+const classes = [
+  {
+    deprecatedClass: ' .MuiSlider-thumbSizeSmall',
+    replacementSelector: '.MuiSlider-sizeSmall > .MuiSlider-thumb',
+  },
+  {
+    deprecatedClass: ' .MuiSlider-thumbSizeMedium',
+    replacementSelector: '.MuiSlider-sizeMedium > .MuiSlider-thumb',
+  },
+  {
+    deprecatedClass: ' .MuiSlider-thumbColorPrimary',
+    replacementSelector: '.MuiSlider-colorPrimary > .MuiSlider-thumb',
+  },
+  {
+    deprecatedClass: ' .MuiSlider-thumbColorSecondary',
+    replacementSelector: '.MuiSlider-colorSecondary > .MuiSlider-thumb',
+  },
+  {
+    deprecatedClass: ' .MuiSlider-thumbColorError',
+    replacementSelector: '.MuiSlider-colorError > .MuiSlider-thumb',
+  },
+  {
+    deprecatedClass: ' .MuiSlider-thumbColorInfo',
+    replacementSelector: '.MuiSlider-colorInfo > .MuiSlider-thumb',
+  },
+  {
+    deprecatedClass: ' .MuiSlider-thumbColorSuccess',
+    replacementSelector: '.MuiSlider-colorSuccess > .MuiSlider-thumb',
+  },
+  {
+    deprecatedClass: ' .MuiSlider-thumbColorWarning',
+    replacementSelector: '.MuiSlider-colorWarning > .MuiSlider-thumb',
+  },
+];
+
+const plugin = () => {
+  return {
+    postcssPlugin: `Replace deprecated Slider classes with new classes`,
+    Rule(rule) {
+      const { selector } = rule;
+
+      classes.forEach(({ deprecatedClass, replacementSelector }) => {
+        const selectorRegex = new RegExp(`${deprecatedClass}`);
+
+        if (selector.match(selectorRegex)) {
+          rule.selector = selector.replace(selectorRegex, replacementSelector);
+        }
+      });
+    },
+  };
+};
+plugin.postcss = true;
+
+module.exports = {
+  plugin,
+  classes,
+};

packages/mui-codemod/src/deprecations/slider-classes/postcss.config.js

@@ -0,0 +1,5 @@
+const { plugin } = require('./postcss-plugin');
+
+module.exports = {
+  plugins: [plugin],
+};