Skip to content

Commit 9badae1

Browse files
mnajdovamnajdova
authored
Merge pull request #17 from mnajdova/feat/move-slider-styled-to-core-with-slots
[Slider] Introduce slots as components in core
2 parents 5c3036a + 5ce5b30 commit 9badae1

File tree

14 files changed

+561
-211
lines changed

14 files changed

+561
-211
lines changed

‎docs/data/slider-unstyled.json‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
{
2+
"css": {
3+
"root": {
4+
"class": ".MuiSlider-root",
5+
"description": "Class name applied to the root element."
6+
},
7+
"colorPrimary": {
8+
"class": ".MuiSlider-colorPrimary",
9+
"description": "Class name applied to the root element if `color=\"primary\"`."
10+
},
11+
"colorSecondary": {
12+
"class": ".MuiSlider-colorSecondary",
13+
"description": "Class name applied to the root element if `color=\"secondary\"`."
14+
},
15+
"marked": {
16+
"class": ".MuiSlider-marked",
17+
"description": "Class name applied to the root element if `marks` is provided with at least one label."
18+
},
19+
"vertical": {
20+
"class": ".MuiSlider-vertical",
21+
"description": "Class name applied to the root element if `orientation=\"vertical\"`."
22+
},
23+
"disabled": {
24+
"class": ".Mui-disabled",
25+
"description": "Pseudo-class applied to the root and thumb element if `disabled={true}`."
26+
},
27+
"rail": {
28+
"class": ".MuiSlider-rail",
29+
"description": "Class name applied to the rail element."
30+
},
31+
"track": {
32+
"class": ".MuiSlider-track",
33+
"description": "Class name applied to the track element."
34+
},
35+
"trackFalse": {
36+
"class": ".MuiSlider-trackFalse",
37+
"description": "Class name applied to the track element if `track={false}`."
38+
},
39+
"trackInverted": {
40+
"class": ".MuiSlider-trackInverted",
41+
"description": "Class name applied to the track element if `track=\"inverted\"`."
42+
},
43+
"thumb": {
44+
"class": ".MuiSlider-thumb",
45+
"description": "Class name applied to the thumb element."
46+
},
47+
"thumbColorPrimary": {
48+
"class": ".MuiSlider-thumbColorPrimary",
49+
"description": "Class name applied to the thumb element if `color=\"primary\"`."
50+
},
51+
"thumbColorSecondary": {
52+
"class": ".MuiSlider-thumbColorSecondary",
53+
"description": "Class name applied to the thumb element if `color=\"secondary\"`."
54+
},
55+
"active": {
56+
"class": ".MuiSlider-active",
57+
"description": "Pseudo-class applied to the thumb element if it's active."
58+
},
59+
"focusVisible": {
60+
"class": ".Mui-focusVisible",
61+
"description": "Pseudo-class applied to the thumb element if keyboard focused."
62+
},
63+
"valueLabel": {
64+
"class": ".MuiSlider-valueLabel",
65+
"description": "Class name applied to the thumb label element."
66+
},
67+
"mark": {
68+
"class": ".MuiSlider-mark",
69+
"description": "Class name applied to the mark element."
70+
},
71+
"markActive": {
72+
"class": ".MuiSlider-markActive",
73+
"description": "Class name applied to the mark element if active (depending on the value)."
74+
},
75+
"markLabel": {
76+
"class": ".MuiSlider-markLabel",
77+
"description": "Class name applied to the mark label element."
78+
},
79+
"markLabelActive": {
80+
"class": ".MuiSlider-markLabelActive",
81+
"description": "Class name applied to the mark label element if active (depending on the value)."
82+
}
83+
}
84+
}

‎docs/pages/api-docs/slider-unstyled.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
2929
| <span class="prop-name">aria-label</span> | <span class="prop-type">string</span> | | The label of the slider. |
3030
| <span class="prop-name">aria-labelledby</span> | <span class="prop-type">string</span> | | The id of the element containing a label for the slider. |
3131
| <span class="prop-name">aria-valuetext</span> | <span class="prop-type">string</span> | | A string value that provides a user-friendly name for the current value of the slider. |
32+
| <span class="prop-name">classes</span> | <span class="prop-type">object</span> | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
3233
| <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'</span> | <span class="prop-default">'primary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
3334
| <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'span'</span> | The component used for the root node. Either a string to use a HTML element or a component. |
3435
| <span class="prop-name">components</span> | <span class="prop-type">{ Mark?: elementType, MarkLabel?: elementType, Rail?: elementType, Root?: elementType, Thumb?: elementType, Track?: elementType, ValueLabel?: elementType }</span> | <span class="prop-default">{}</span> | The components used for each slot inside the Slider. Either a string to use a HTML element or a component. |
@@ -56,6 +57,36 @@ The `ref` is forwarded to the root element.
5657

5758
Any other props supplied will be provided to the root element (native element).
5859

60+
## CSS
61+
62+
| Rule name | Global class | Description |
63+
|:-----|:-------------|:------------|
64+
| <span class="prop-name">root</span> | <span class="prop-name">.root-1</span> | Class name applied to the root element.
65+
| <span class="prop-name">colorPrimary</span> | <span class="prop-name">.colorPrimary-2</span> | Class name applied to the root element if `color="primary"`.
66+
| <span class="prop-name">colorSecondary</span> | <span class="prop-name">.colorSecondary-3</span> | Class name applied to the root element if `color="secondary"`.
67+
| <span class="prop-name">marked</span> | <span class="prop-name">.marked-4</span> | Class name applied to the root element if `marks` is provided with at least one label.
68+
| <span class="prop-name">vertical</span> | <span class="prop-name">.vertical-5</span> | Class name applied to the root element if `orientation="vertical"`.
69+
| <span class="prop-name">disabled</span> | <span class="prop-name">.disabled-6</span> | Pseudo-class applied to the root and thumb element if `disabled={true}`.
70+
| <span class="prop-name">rail</span> | <span class="prop-name">.rail-7</span> | Class name applied to the rail element.
71+
| <span class="prop-name">track</span> | <span class="prop-name">.track-8</span> | Class name applied to the track element.
72+
| <span class="prop-name">trackFalse</span> | <span class="prop-name">.trackFalse-9</span> | Class name applied to the track element if `track={false}`.
73+
| <span class="prop-name">trackInverted</span> | <span class="prop-name">.trackInverted-10</span> | Class name applied to the track element if `track="inverted"`.
74+
| <span class="prop-name">thumb</span> | <span class="prop-name">.thumb-11</span> | Class name applied to the thumb element.
75+
| <span class="prop-name">thumbColorPrimary</span> | <span class="prop-name">.thumbColorPrimary-12</span> | Class name applied to the thumb element if `color="primary"`.
76+
| <span class="prop-name">thumbColorSecondary</span> | <span class="prop-name">.thumbColorSecondary-13</span> | Class name applied to the thumb element if `color="secondary"`.
77+
| <span class="prop-name">active</span> | <span class="prop-name">.active-14</span> | Pseudo-class applied to the thumb element if it's active.
78+
| <span class="prop-name">focusVisible</span> | <span class="prop-name">.focusVisible-15</span> | Pseudo-class applied to the thumb element if keyboard focused.
79+
| <span class="prop-name">valueLabel</span> | <span class="prop-name">.valueLabel-16</span> | Class name applied to the thumb label element.
80+
| <span class="prop-name">mark</span> | <span class="prop-name">.mark-17</span> | Class name applied to the mark element.
81+
| <span class="prop-name">markActive</span> | <span class="prop-name">.markActive-18</span> | Class name applied to the mark element if active (depending on the value).
82+
| <span class="prop-name">markLabel</span> | <span class="prop-name">.markLabel-19</span> | Class name applied to the mark label element.
83+
| <span class="prop-name">markLabelActive</span> | <span class="prop-name">.markLabelActive-20</span> | Class name applied to the mark label element if active (depending on the value).
84+
85+
You can override the style of the component thanks to one of these customization points:
86+
87+
- With a [global class name](/guides/interoperability/#global-css).
88+
- With a rule name as part of the component's [`styleOverrides` property](/customization/components/#global-theme-override) in a custom theme.
89+
5990
## Demos
6091

6192
- [Slider](/components/slider/)

‎docs/pages/api-docs/slider.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ The `MuiSlider` name can be used for providing [default props](/customization/gl
3131
| <span class="prop-name">aria-label</span> | <span class="prop-type">string</span> | | The label of the slider. |
3232
| <span class="prop-name">aria-labelledby</span> | <span class="prop-type">string</span> | | The id of the element containing a label for the slider. |
3333
| <span class="prop-name">aria-valuetext</span> | <span class="prop-type">string</span> | | A string value that provides a user-friendly name for the current value of the slider. |
34+
| <span class="prop-name">classes</span> | <span class="prop-type">object</span> | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
3435
| <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'</span> | | The color of the component. It supports those theme colors that make sense for this component. |
3536
| <span class="prop-name">components</span> | <span class="prop-type">{ Mark?: elementType, MarkLabel?: elementType, Rail?: elementType, Root?: elementType, Thumb?: elementType, Track?: elementType, ValueLabel?: elementType }</span> | <span class="prop-default">{}</span> | The components used for each slot inside the Slider. Either a string to use a HTML element or a component. |
3637
| <span class="prop-name">componentsProps</span> | <span class="prop-type">object</span> | | The props used for each slot inside the Slider. |

‎docs/src/modules/utils/generateMarkdown.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -287,7 +287,11 @@ function generatePropType(type: PropTypeDescriptor): string | undefined {
287287
}
288288

289289
function generateName(reactAPI: ReactApi) {
290-
if (reactAPI.styles.classes.length && !reactAPI.styles.name) {
290+
if (
291+
reactAPI.styles.classes.length &&
292+
!reactAPI.styles.name &&
293+
reactAPI.name.indexOf('Unstyled') === -1
294+
) {
291295
throw new Error(`Missing styles name on ${reactAPI.name} component`);
292296
}
293297

@@ -445,7 +449,7 @@ function generateClasses(reactAPI: ReactApi, styledComponent: boolean) {
445449
return '';
446450
}
447451

448-
if (!reactAPI.styles.name) {
452+
if (!reactAPI.styles.name && reactAPI.name.indexOf('Unstyled') === -1) {
449453
throw new Error(`Missing styles name on ${reactAPI.name} component`);
450454
}
451455

‎docs/src/pages/components/slider/CustomizedSlider.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import PropTypes from 'prop-types';
3+
import Slider, { SliderThumb } from '@material-ui/core/Slider';
34
import { experimentalStyled as styled } from '@material-ui/core/styles';
4-
import Slider from '@material-ui/core/Slider';
55
import Typography from '@material-ui/core/Typography';
66
import Tooltip from '@material-ui/core/Tooltip';
77

@@ -162,11 +162,11 @@ const AirbnbSlider = styled(Slider)({
162162

163163
function AirbnbThumbComponent(props) {
164164
return (
165-
<span {...props}>
165+
<SliderThumb {...props}>
166166
<span className="bar" />
167167
<span className="bar" />
168168
<span className="bar" />
169-
</span>
169+
</SliderThumb>
170170
);
171171
}
172172

‎docs/src/pages/components/slider/CustomizedSlider.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
2+
import Slider, { SliderThumb } from '@material-ui/core/Slider';
23
import { experimentalStyled as styled } from '@material-ui/core/styles';
3-
import Slider from '@material-ui/core/Slider';
44
import Typography from '@material-ui/core/Typography';
55
import Tooltip from '@material-ui/core/Tooltip';
66

@@ -161,11 +161,11 @@ const AirbnbSlider = styled(Slider)({
161161

162162
function AirbnbThumbComponent(props: any) {
163163
return (
164-
<span {...props}>
164+
<SliderThumb {...props}>
165165
<span className="bar" />
166166
<span className="bar" />
167167
<span className="bar" />
168-
</span>
168+
</SliderThumb>
169169
);
170170
}
171171

‎docs/src/pages/components/slider/UnstyledSlider.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { experimentalStyled as styled } from '@material-ui/core/styles';
2+
import { experimentalStyled as styled, alpha } from '@material-ui/core/styles';
33
import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled';
44
import Box from '@material-ui/core/Box';
55

@@ -56,6 +56,15 @@ const StyledSlider = styled(SliderUnstyled)`
5656
right: -15px;
5757
bottom: -15px;
5858
}
59+
60+
:hover,
61+
&.Mui-focusVisible {
62+
box-shadow: 0 0 0 8px ${alpha('#000', 0.16)};
63+
}
64+
65+
&.Mui-active {
66+
box-shadow: 0 0 0 14px ${alpha('#000', 0.16)};
67+
}
5968
}
6069
`;
6170

‎docs/src/pages/components/slider/UnstyledSlider.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { experimentalStyled as styled } from '@material-ui/core/styles';
2+
import { experimentalStyled as styled, alpha } from '@material-ui/core/styles';
33
import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled';
44
import Box from '@material-ui/core/Box';
55

@@ -56,6 +56,15 @@ const StyledSlider = styled(SliderUnstyled)`
5656
right: -15px;
5757
bottom: -15px;
5858
}
59+
60+
:hover,
61+
&.Mui-focusVisible {
62+
box-shadow: 0 0 0 8px ${alpha('#000', 0.16)};
63+
}
64+
65+
&.Mui-active {
66+
box-shadow: 0 0 0 14px ${alpha('#000', 0.16)};
67+
}
5968
}
6069
`;
6170

‎docs/src/pages/guides/migration-v4/migration-v4.md‎

Lines changed: 0 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -751,44 +751,6 @@ const classes = makeStyles(theme => ({
751751
+<Slider components={{ Thumb: CustomThumb }} />
752752
```
753753

754-
- The `classes` prop is no longer available for styling the component. You can fix this by one of these options:
755-
756-
1. Move these overrides to the theme's components overrides section
757-
758-
```diff
759-
- const useStyles = makeStyles({
760-
- root: {
761-
- margin: '10px',
762-
- },
763-
- colorPrimary: {
764-
- backgroundColor: '#232323',
765-
- }
766-
- });
767-
+ const theme = createMuiTheme({
768-
+ components: {
769-
+ MuiSlider: {
770-
+ styleOverrides: {
771-
+ root: {
772-
+ margin: '10px',
773-
+ },
774-
+ colorPrimary: {
775-
+ backgroundColor: '#232323',
776-
+ },
777-
+ },
778-
+ },
779-
+ },
780-
+ });
781-
// ...
782-
- const classes = useStyles();
783-
// ...
784-
+ <ThemeProvider theme={theme}>
785-
// ...
786-
- <Slider classes={classes}>
787-
+ <Slider />
788-
```
789-
790-
or 2. you can follow one of the overrides approach described on the ([Style Library Interoperability](/guides/interoperability/)) page. The class names for the Slider component can be find on the [API page](/api/slider/#css).
791-
792754
### Snackbar
793755

794756
- The notification now displays at the bottom left on large screens.

‎packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts‎

Lines changed: 60 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { OverridableComponent, OverridableTypeMap } from '../OverridableComponent';
1+
import { OverridableComponent, OverridableTypeMap, OverrideProps } from '../OverridableComponent';
22

33
export interface Mark {
44
value: number;
@@ -26,6 +26,51 @@ export interface SliderUnstyledTypeMap<P = {}, D extends React.ElementType = 'sp
2626
* A string value that provides a user-friendly name for the current value of the slider.
2727
*/
2828
'aria-valuetext'?: string;
29+
/**
30+
* Override or extend the styles applied to the component.
31+
*/
32+
classes?: {
33+
/** Class name applied to the root element. */
34+
root?: string;
35+
/** Class name applied to the root element if `color="primary"`. */
36+
colorPrimary?: string;
37+
/** Class name applied to the root element if `color="secondary"`. */
38+
colorSecondary?: string;
39+
/** Class name applied to the root element if `marks` is provided with at least one label. */
40+
marked?: string;
41+
/** Class name applied to the root element if `orientation="vertical"`. */
42+
vertical?: string;
43+
/** Pseudo-class applied to the root and thumb element if `disabled={true}`. */
44+
disabled?: string;
45+
/** Class name applied to the rail element. */
46+
rail?: string;
47+
/** Class name applied to the track element. */
48+
track?: string;
49+
/** Class name applied to the track element if `track={false}`. */
50+
trackFalse?: string;
51+
/** Class name applied to the track element if `track="inverted"`. */
52+
trackInverted?: string;
53+
/** Class name applied to the thumb element. */
54+
thumb?: string;
55+
/** Class name applied to the thumb element if `color="primary"`. */
56+
thumbColorPrimary?: string;
57+
/** Class name applied to the thumb element if `color="secondary"`. */
58+
thumbColorSecondary?: string;
59+
/** Pseudo-class applied to the thumb element if it's active. */
60+
active?: string;
61+
/** Pseudo-class applied to the thumb element if keyboard focused. */
62+
focusVisible?: string;
63+
/** Class name applied to the thumb label element. */
64+
valueLabel?: string;
65+
/** Class name applied to the mark element. */
66+
mark?: string;
67+
/** Class name applied to the mark element if active (depending on the value). */
68+
markActive?: string;
69+
/** Class name applied to the mark label element. */
70+
markLabel?: string;
71+
/** Class name applied to the mark label element if active (depending on the value). */
72+
markLabelActive?: string;
73+
};
2974
/**
3075
* The color of the component. It supports those theme colors that make sense for this component.
3176
* @default 'primary'
@@ -51,26 +96,32 @@ export interface SliderUnstyledTypeMap<P = {}, D extends React.ElementType = 'sp
5196
*/
5297
componentsProps?: {
5398
root?: {
54-
styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
5599
as: React.ElementType;
100+
styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
56101
};
57102
track?: {
58103
as?: React.ElementType;
104+
styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
59105
};
60106
rail?: {
61107
as?: React.ElementType;
108+
styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
62109
};
63110
thumb?: {
64111
as?: React.ElementType;
112+
styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
65113
};
66114
mark?: {
67115
as?: React.ElementType;
116+
styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
68117
};
69118
markLabel?: {
70119
as?: React.ElementType;
120+
styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
71121
};
72122
valueLabel?: {
73123
as?: React.ElementType;
124+
styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
74125
};
75126
};
76127
/**
@@ -219,4 +270,11 @@ export type ExtendSliderUnstyled<M extends OverridableTypeMap> = OverridableComp
219270
*/
220271
declare const SliderUnstyled: OverridableComponent<SliderUnstyledTypeMap>;
221272

273+
export type SliderUnstyledProps<
274+
D extends React.ElementType = SliderUnstyledTypeMap['defaultComponent'],
275+
P = {}
276+
> = OverrideProps<SliderUnstyledTypeMap<P, D>, D>;
277+
278+
export type SliderUnstyledClassKey = keyof NonNullable<SliderUnstyledTypeMap['props']['classes']>;
279+
222280
export default SliderUnstyled;

0 commit comments

Comments
 (0)