Skip to content

Commit

Permalink
[material-ui][Slider] Deprecate composed classes (@sai6855) (#45223)
Browse files Browse the repository at this point in the history
  • Loading branch information
github-actions[bot] authored Feb 5, 2025
1 parent c5afca2 commit a8a6432
Show file tree
Hide file tree
Showing 16 changed files with 549 additions and 21 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -1775,6 +1775,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
Expand Down
21 changes: 14 additions & 7 deletions docs/pages/material-ui/api/slider.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
21 changes: 14 additions & 7 deletions docs/translations/api-docs/slider/slider.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
72 changes: 72 additions & 0 deletions packages/mui-codemod/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -1612,6 +1612,78 @@ npx @mui/codemod@latest deprecations/select-classes <path>
npx @mui/codemod@latest deprecations/slider-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
Expand Down
2 changes: 2 additions & 0 deletions packages/mui-codemod/src/deprecations/all/deprecations-all.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import transformToggleButtonGroupClasses from '../toggle-button-group-classes';
import transformTooltipProps from '../tooltip-props';
import transformTablePaginationProps from '../table-pagination-props';
import transformCardHeaderProps from '../card-header-props';
import transformSliderClasses from '../slider-classes';

/**
* @param {import('jscodeshift').FileInfo} file
Expand Down Expand Up @@ -74,6 +75,7 @@ export default function deprecationsAll(file, api, options) {
file.source = transformTooltipProps(file, api, options);
file.source = transformTablePaginationProps(file, api, options);
file.source = transformCardHeaderProps(file, api, options);
file.source = transformSliderClasses(file, api, options);

return file.source;
}
2 changes: 2 additions & 0 deletions packages/mui-codemod/src/deprecations/all/postcss.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand All @@ -41,5 +42,6 @@ module.exports = {
tabClassesPlugin,
tableSortLabelClassesPlugin,
selectClassesPlugin,
sliderClassesPlugin,
],
};
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './slider-classes';
Original file line number Diff line number Diff line change
@@ -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,
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const { plugin } = require('./postcss-plugin');

module.exports = {
plugins: [plugin],
};
Loading

0 comments on commit a8a6432

Please sign in to comment.