Skip to content

Commit 6243f7c

Browse files
siriwatknpsiriwatknp
authored
[Slider] Remove deprecated CSS classes (#48074)
1 parent edc0a17 commit 6243f7c

7 files changed

Lines changed: 32 additions & 147 deletions

File tree

‎docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1372,6 +1372,35 @@ The following deprecated props have been removed from the `Slider` component:
13721372
/>
13731373
```
13741374

1375+
#### Slider deprecated classes removed
1376+
1377+
Use the [slider-classes codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#slider-classes) below to migrate the code as described in the following section:
1378+
1379+
```bash
1380+
npx @mui/codemod@latest deprecations/slider-classes <path>
1381+
```
1382+
1383+
The following deprecated classes have been removed:
1384+
1385+
- `thumbColorPrimary` — use `.MuiSlider-colorPrimary > .MuiSlider-thumb` instead
1386+
- `thumbColorSecondary` — use `.MuiSlider-colorSecondary > .MuiSlider-thumb` instead
1387+
- `thumbColorError` — use `.MuiSlider-colorError > .MuiSlider-thumb` instead
1388+
- `thumbColorInfo` — use `.MuiSlider-colorInfo > .MuiSlider-thumb` instead
1389+
- `thumbColorSuccess` — use `.MuiSlider-colorSuccess > .MuiSlider-thumb` instead
1390+
- `thumbColorWarning` — use `.MuiSlider-colorWarning > .MuiSlider-thumb` instead
1391+
- `thumbSizeSmall` — use `.MuiSlider-sizeSmall > .MuiSlider-thumb` instead
1392+
1393+
```diff
1394+
-.MuiSlider-thumbColorPrimary
1395+
+.MuiSlider-colorPrimary > .MuiSlider-thumb
1396+
1397+
-.MuiSlider-thumbColorSecondary
1398+
+.MuiSlider-colorSecondary > .MuiSlider-thumb
1399+
1400+
-.MuiSlider-thumbSizeSmall
1401+
+.MuiSlider-sizeSmall > .MuiSlider-thumb
1402+
```
1403+
13751404
#### Snackbar deprecated props removed
13761405

13771406
Use the [snackbar-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#snackbar-props) below to migrate the code as described in the following section:

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

Lines changed: 0 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -250,55 +250,6 @@
250250
"description": "Styles applied to the root element if `size=\"small\"`.",
251251
"isGlobal": false
252252
},
253-
{
254-
"key": "thumbColorError",
255-
"className": "MuiSlider-thumbColorError",
256-
"description": "Styles applied to the thumb element if `color=\"error\"`.",
257-
"isGlobal": false,
258-
"isDeprecated": true
259-
},
260-
{
261-
"key": "thumbColorInfo",
262-
"className": "MuiSlider-thumbColorInfo",
263-
"description": "Styles applied to the thumb element if `color=\"info\"`.",
264-
"isGlobal": false,
265-
"isDeprecated": true
266-
},
267-
{
268-
"key": "thumbColorPrimary",
269-
"className": "MuiSlider-thumbColorPrimary",
270-
"description": "Styles applied to the thumb element if `color=\"primary\"`.",
271-
"isGlobal": false,
272-
"isDeprecated": true
273-
},
274-
{
275-
"key": "thumbColorSecondary",
276-
"className": "MuiSlider-thumbColorSecondary",
277-
"description": "Styles applied to the thumb element if `color=\"secondary\"`.",
278-
"isGlobal": false,
279-
"isDeprecated": true
280-
},
281-
{
282-
"key": "thumbColorSuccess",
283-
"className": "MuiSlider-thumbColorSuccess",
284-
"description": "Styles applied to the thumb element if `color=\"success\"`.",
285-
"isGlobal": false,
286-
"isDeprecated": true
287-
},
288-
{
289-
"key": "thumbColorWarning",
290-
"className": "MuiSlider-thumbColorWarning",
291-
"description": "Styles applied to the thumb element if `color=\"warning\"`.",
292-
"isGlobal": false,
293-
"isDeprecated": true
294-
},
295-
{
296-
"key": "thumbSizeSmall",
297-
"className": "MuiSlider-thumbSizeSmall",
298-
"description": "Styles applied to the thumb element if `size=\"small\"`.",
299-
"isGlobal": false,
300-
"isDeprecated": true
301-
},
302253
{
303254
"key": "trackFalse",
304255
"className": "MuiSlider-trackFalse",

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

Lines changed: 0 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -165,48 +165,6 @@
165165
"nodeName": "the root element",
166166
"conditions": "<code>size=\"small\"</code>"
167167
},
168-
"thumbColorError": {
169-
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
170-
"nodeName": "the thumb element",
171-
"conditions": "<code>color=\"error\"</code>",
172-
"deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#Slider-css-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-colorError\">.MuiSlider-colorError</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
173-
},
174-
"thumbColorInfo": {
175-
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
176-
"nodeName": "the thumb element",
177-
"conditions": "<code>color=\"info\"</code>",
178-
"deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#Slider-css-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-colorInfo\">.MuiSlider-colorInfo</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
179-
},
180-
"thumbColorPrimary": {
181-
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
182-
"nodeName": "the thumb element",
183-
"conditions": "<code>color=\"primary\"</code>",
184-
"deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#Slider-css-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-colorPrimary\">.MuiSlider-colorPrimary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
185-
},
186-
"thumbColorSecondary": {
187-
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
188-
"nodeName": "the thumb element",
189-
"conditions": "<code>color=\"secondary\"</code>",
190-
"deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#Slider-css-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-colorSecondary\">.MuiSlider-colorSecondary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
191-
},
192-
"thumbColorSuccess": {
193-
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
194-
"nodeName": "the thumb element",
195-
"conditions": "<code>color=\"success\"</code>",
196-
"deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#Slider-css-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-colorSuccess\">.MuiSlider-colorSuccess</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
197-
},
198-
"thumbColorWarning": {
199-
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
200-
"nodeName": "the thumb element",
201-
"conditions": "<code>color=\"warning\"</code>",
202-
"deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#Slider-css-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-colorWarning\">.MuiSlider-colorWarning</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
203-
},
204-
"thumbSizeSmall": {
205-
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
206-
"nodeName": "the thumb element",
207-
"conditions": "<code>size=\"small\"</code>",
208-
"deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#Slider-css-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-sizeSmall\">.MuiSlider-sizeSmall</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
209-
},
210168
"trackFalse": {
211169
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
212170
"nodeName": "the root element",

‎packages/mui-material/src/Slider/Slider.d.ts‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -114,11 +114,6 @@ export type SliderSlotsAndSlotProps = CreateSlotsAndSlotProps<
114114
}
115115
>;
116116

117-
/**
118-
* @deprecated Use `SliderRootSlotPropsOverrides` instead.
119-
*/
120-
export interface SliderComponentsPropsOverrides {}
121-
122117
export interface SliderOwnerState extends SliderProps {
123118
dragging: boolean;
124119
marked: boolean;

‎packages/mui-material/src/Slider/Slider.js‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -232,14 +232,6 @@ export const SliderTrack = styled('span', {
232232
export const SliderThumb = styled('span', {
233233
name: 'MuiSlider',
234234
slot: 'Thumb',
235-
overridesResolver: (props, styles) => {
236-
const { ownerState } = props;
237-
return [
238-
styles.thumb,
239-
styles[`thumbColor${capitalize(ownerState.color)}`],
240-
ownerState.size !== 'medium' && styles[`thumbSize${capitalize(ownerState.size)}`],
241-
];
242-
},
243235
})(
244236
memoTheme(({ theme }) => ({
245237
position: 'absolute',
@@ -535,12 +527,7 @@ const useUtilityClasses = (ownerState) => {
535527
markLabel: ['markLabel'],
536528
markLabelActive: ['markLabelActive'],
537529
valueLabel: ['valueLabel'],
538-
thumb: [
539-
'thumb',
540-
disabled && 'disabled',
541-
size && `thumbSize${capitalize(size)}`,
542-
color && `thumbColor${capitalize(color)}`,
543-
],
530+
thumb: ['thumb', disabled && 'disabled'],
544531
active: ['active'],
545532
disabled: ['disabled'],
546533
focusVisible: ['focusVisible'],

‎packages/mui-material/src/Slider/Slider.test.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1593,7 +1593,7 @@ describe.skipIf(!supportsTouch())('<Slider />', () => {
15931593
const root = document.querySelector(`.${classes.root}`);
15941594
const thumb = document.querySelector(`.${classes.thumb}`);
15951595
expect(root).not.to.have.class(classes.sizeSmall);
1596-
expect(thumb).not.to.have.class(classes.thumbSizeSmall);
1596+
expect(thumb).not.to.equal(null);
15971597
});
15981598

15991599
it('should render small slider', () => {
@@ -1602,7 +1602,7 @@ describe.skipIf(!supportsTouch())('<Slider />', () => {
16021602
const root = document.querySelector(`.${classes.root}`);
16031603
const thumb = document.querySelector(`.${classes.thumb}`);
16041604
expect(root).to.have.class(classes.sizeSmall);
1605-
expect(thumb).to.have.class(classes.thumbSizeSmall);
1605+
expect(thumb).not.to.equal(null);
16061606
});
16071607
});
16081608

‎packages/mui-material/src/Slider/sliderClasses.ts‎

Lines changed: 0 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -48,34 +48,6 @@ export interface SliderClasses {
4848
markLabelActive: string;
4949
/** Styles applied to the root element if `size="small"`. */
5050
sizeSmall: string;
51-
/** Styles applied to the thumb element if `color="primary"`.
52-
* @deprecated Combine the [.MuiSlider-thumb](/material-ui/api/slider/#Slider-css-MuiSlider-thumb) and [.MuiSlider-colorPrimary](/material-ui/api/slider/#slider-classes-MuiSlider-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
53-
*/
54-
thumbColorPrimary: string;
55-
/** Styles applied to the thumb element if `color="secondary"`.
56-
* @deprecated Combine the [.MuiSlider-thumb](/material-ui/api/slider/#Slider-css-MuiSlider-thumb) and [.MuiSlider-colorSecondary](/material-ui/api/slider/#slider-classes-MuiSlider-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
57-
*/
58-
thumbColorSecondary: string;
59-
/** Styles applied to the thumb element if `color="error"`.
60-
* @deprecated Combine the [.MuiSlider-thumb](/material-ui/api/slider/#Slider-css-MuiSlider-thumb) and [.MuiSlider-colorError](/material-ui/api/slider/#slider-classes-MuiSlider-colorError) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
61-
*/
62-
thumbColorError: string;
63-
/** Styles applied to the thumb element if `color="info"`.
64-
* @deprecated Combine the [.MuiSlider-thumb](/material-ui/api/slider/#Slider-css-MuiSlider-thumb) and [.MuiSlider-colorInfo](/material-ui/api/slider/#slider-classes-MuiSlider-colorInfo) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
65-
*/
66-
thumbColorInfo: string;
67-
/** Styles applied to the thumb element if `color="success"`.
68-
* @deprecated Combine the [.MuiSlider-thumb](/material-ui/api/slider/#Slider-css-MuiSlider-thumb) and [.MuiSlider-colorSuccess](/material-ui/api/slider/#slider-classes-MuiSlider-colorSuccess) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
69-
*/
70-
thumbColorSuccess: string;
71-
/** Styles applied to the thumb element if `color="warning"`.
72-
* @deprecated Combine the [.MuiSlider-thumb](/material-ui/api/slider/#Slider-css-MuiSlider-thumb) and [.MuiSlider-colorWarning](/material-ui/api/slider/#slider-classes-MuiSlider-colorWarning) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
73-
*/
74-
thumbColorWarning: string;
75-
/** Styles applied to the thumb element if `size="small"`.
76-
* @deprecated Combine the [.MuiSlider-thumb](/material-ui/api/slider/#Slider-css-MuiSlider-thumb) and [.MuiSlider-sizeSmall](/material-ui/api/slider/#slider-classes-MuiSlider-sizeSmall) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
77-
*/
78-
thumbSizeSmall: string;
7951
/** Styles applied to the thumb label element. */
8052
valueLabel: string;
8153
/** Styles applied to the thumb label element if it's open. */
@@ -112,16 +84,9 @@ const sliderClasses: SliderClasses = generateUtilityClasses('MuiSlider', [
11284
'rail',
11385
'sizeSmall',
11486
'thumb',
115-
'thumbColorPrimary',
116-
'thumbColorSecondary',
117-
'thumbColorError',
118-
'thumbColorSuccess',
119-
'thumbColorInfo',
120-
'thumbColorWarning',
12187
'track',
12288
'trackInverted',
12389
'trackFalse',
124-
'thumbSizeSmall',
12590
'valueLabel',
12691
'valueLabelOpen',
12792
'valueLabelCircle',

0 commit comments

Comments
 (0)