[Slider] Introduce slots as components in core

docs/data/slider-unstyled.json

@@ -0,0 +1,84 @@
+{
+  "css": {
+    "root": {
+      "class": ".MuiSlider-root",
+      "description": "Class name applied to the root element."
+    },
+    "colorPrimary": {
+      "class": ".MuiSlider-colorPrimary",
+      "description": "Class name applied to the root element if `color=\"primary\"`."
+    },
+    "colorSecondary": {
+      "class": ".MuiSlider-colorSecondary",
+      "description": "Class name applied to the root element if `color=\"secondary\"`."
+    },
+    "marked": {
+      "class": ".MuiSlider-marked",
+      "description": "Class name applied to the root element if `marks` is provided with at least one label."
+    },
+    "vertical": {
+      "class": ".MuiSlider-vertical",
+      "description": "Class name applied to the root element if `orientation=\"vertical\"`."
+    },
+    "disabled": {
+      "class": ".Mui-disabled",
+      "description": "Pseudo-class applied to the root and thumb element if `disabled={true}`."
+    },
+    "rail": {
+      "class": ".MuiSlider-rail",
+      "description": "Class name applied to the rail element."
+    },
+    "track": {
+      "class": ".MuiSlider-track",
+      "description": "Class name applied to the track element."
+    },
+    "trackFalse": {
+      "class": ".MuiSlider-trackFalse",
+      "description": "Class name applied to the track element if `track={false}`."
+    },
+    "trackInverted": {
+      "class": ".MuiSlider-trackInverted",
+      "description": "Class name applied to the track element if `track=\"inverted\"`."
+    },
+    "thumb": {
+      "class": ".MuiSlider-thumb",
+      "description": "Class name applied to the thumb element."
+    },
+    "thumbColorPrimary": {
+      "class": ".MuiSlider-thumbColorPrimary",
+      "description": "Class name applied to the thumb element if `color=\"primary\"`."
+    },
+    "thumbColorSecondary": {
+      "class": ".MuiSlider-thumbColorSecondary",
+      "description": "Class name applied to the thumb element if `color=\"secondary\"`."
+    },
+    "active": {
+      "class": ".MuiSlider-active",
+      "description": "Pseudo-class applied to the thumb element if it's active."
+    },
+    "focusVisible": {
+      "class": ".Mui-focusVisible",
+      "description": "Pseudo-class applied to the thumb element if keyboard focused."
+    },
+    "valueLabel": {
+      "class": ".MuiSlider-valueLabel",
+      "description": "Class name applied to the thumb label element."
+    },
+    "mark": {
+      "class": ".MuiSlider-mark",
+      "description": "Class name applied to the mark element."
+    },
+    "markActive": {
+      "class": ".MuiSlider-markActive",
+      "description": "Class name applied to the mark element if active (depending on the value)."
+    },
+    "markLabel": {
+      "class": ".MuiSlider-markLabel",
+      "description": "Class name applied to the mark label element."
+    },
+    "markLabelActive": {
+      "class": ".MuiSlider-markLabelActive",
+      "description": "Class name applied to the mark label element if active (depending on the value)."
+    }
+  }
+}

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

@@ -29,6 +29,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">aria-label</span> | <span class="prop-type">string</span> |  | The label of the slider. |
 | <span class="prop-name">aria-labelledby</span> | <span class="prop-type">string</span> |  | The id of the element containing a label for the slider. |
 | <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. |
+| <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. |
 | <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. |
 | <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. |
 | <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.
 
 Any other props supplied will be provided to the root element (native element).
 
+## CSS
+
+| Rule name | Global class | Description |
+|:-----|:-------------|:------------|
+| <span class="prop-name">root</span> | <span class="prop-name">.root-1</span> | Class name applied to the root element.
+| <span class="prop-name">colorPrimary</span> | <span class="prop-name">.colorPrimary-2</span> | Class name applied to the root element if `color="primary"`.
+| <span class="prop-name">colorSecondary</span> | <span class="prop-name">.colorSecondary-3</span> | Class name applied to the root element if `color="secondary"`.
+| <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.
+| <span class="prop-name">vertical</span> | <span class="prop-name">.vertical-5</span> | Class name applied to the root element if `orientation="vertical"`.
+| <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}`.
+| <span class="prop-name">rail</span> | <span class="prop-name">.rail-7</span> | Class name applied to the rail element.
+| <span class="prop-name">track</span> | <span class="prop-name">.track-8</span> | Class name applied to the track element.
+| <span class="prop-name">trackFalse</span> | <span class="prop-name">.trackFalse-9</span> | Class name applied to the track element if `track={false}`.
+| <span class="prop-name">trackInverted</span> | <span class="prop-name">.trackInverted-10</span> | Class name applied to the track element if `track="inverted"`.
+| <span class="prop-name">thumb</span> | <span class="prop-name">.thumb-11</span> | Class name applied to the thumb element.
+| <span class="prop-name">thumbColorPrimary</span> | <span class="prop-name">.thumbColorPrimary-12</span> | Class name applied to the thumb element if `color="primary"`.
+| <span class="prop-name">thumbColorSecondary</span> | <span class="prop-name">.thumbColorSecondary-13</span> | Class name applied to the thumb element if `color="secondary"`.
+| <span class="prop-name">active</span> | <span class="prop-name">.active-14</span> | Pseudo-class applied to the thumb element if it's active.
+| <span class="prop-name">focusVisible</span> | <span class="prop-name">.focusVisible-15</span> | Pseudo-class applied to the thumb element if keyboard focused.
+| <span class="prop-name">valueLabel</span> | <span class="prop-name">.valueLabel-16</span> | Class name applied to the thumb label element.
+| <span class="prop-name">mark</span> | <span class="prop-name">.mark-17</span> | Class name applied to the mark element.
+| <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).
+| <span class="prop-name">markLabel</span> | <span class="prop-name">.markLabel-19</span> | Class name applied to the mark label element.
+| <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).
+
+You can override the style of the component thanks to one of these customization points:
+
+- With a [global class name](/guides/interoperability/#global-css).
+- With a rule name as part of the component's [`styleOverrides` property](/customization/components/#global-theme-override) in a custom theme.
+
 ## Demos
 
 - [Slider](/components/slider/)

docs/pages/api-docs/slider.md

@@ -31,6 +31,7 @@ The `MuiSlider` name can be used for providing [default props](/customization/gl
 | <span class="prop-name">aria-label</span> | <span class="prop-type">string</span> |  | The label of the slider. |
 | <span class="prop-name">aria-labelledby</span> | <span class="prop-type">string</span> |  | The id of the element containing a label for the slider. |
 | <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. |
+| <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. |
 | <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. |
 | <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. |
 | <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

@@ -287,7 +287,11 @@ function generatePropType(type: PropTypeDescriptor): string | undefined {
 }
 
 function generateName(reactAPI: ReactApi) {
-  if (reactAPI.styles.classes.length && !reactAPI.styles.name) {
+  if (
+    reactAPI.styles.classes.length &&
+    !reactAPI.styles.name &&
+    reactAPI.name.indexOf('Unstyled') === -1
+  ) {
     throw new Error(`Missing styles name on ${reactAPI.name} component`);
   }
 
@@ -445,7 +449,7 @@ function generateClasses(reactAPI: ReactApi, styledComponent: boolean) {
     return '';
   }
 
-  if (!reactAPI.styles.name) {
+  if (!reactAPI.styles.name && reactAPI.name.indexOf('Unstyled') === -1) {
     throw new Error(`Missing styles name on ${reactAPI.name} component`);
   }
 

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import Slider, { SliderThumb } from '@material-ui/core/Slider';
 import { experimentalStyled as styled } from '@material-ui/core/styles';
-import Slider from '@material-ui/core/Slider';
 import Typography from '@material-ui/core/Typography';
 import Tooltip from '@material-ui/core/Tooltip';
 
@@ -162,11 +162,11 @@ const AirbnbSlider = styled(Slider)({
 
 function AirbnbThumbComponent(props) {
   return (
-    <span {...props}>
+    <SliderThumb {...props}>
       <span className="bar" />
       <span className="bar" />
       <span className="bar" />
-    </span>
+    </SliderThumb>
   );
 }
 

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
+import Slider, { SliderThumb } from '@material-ui/core/Slider';
 import { experimentalStyled as styled } from '@material-ui/core/styles';
-import Slider from '@material-ui/core/Slider';
 import Typography from '@material-ui/core/Typography';
 import Tooltip from '@material-ui/core/Tooltip';
 
@@ -161,11 +161,11 @@ const AirbnbSlider = styled(Slider)({
 
 function AirbnbThumbComponent(props: any) {
   return (
-    <span {...props}>
+    <SliderThumb {...props}>
       <span className="bar" />
       <span className="bar" />
       <span className="bar" />
-    </span>
+    </SliderThumb>
   );
 }
 

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { experimentalStyled as styled } from '@material-ui/core/styles';
+import { experimentalStyled as styled, alpha } from '@material-ui/core/styles';
 import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled';
 import Box from '@material-ui/core/Box';
 
@@ -56,6 +56,15 @@ const StyledSlider = styled(SliderUnstyled)`
       right: -15px;
       bottom: -15px;
     }
+
+    :hover,
+    &.Mui-focusVisible {
+      box-shadow: 0 0 0 8px ${alpha('#000', 0.16)};
+    }
+
+    &.Mui-active {
+      box-shadow: 0 0 0 14px ${alpha('#000', 0.16)};
+    }
   }
 `;
 

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { experimentalStyled as styled } from '@material-ui/core/styles';
+import { experimentalStyled as styled, alpha } from '@material-ui/core/styles';
 import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled';
 import Box from '@material-ui/core/Box';
 
@@ -56,6 +56,15 @@ const StyledSlider = styled(SliderUnstyled)`
       right: -15px;
       bottom: -15px;
     }
+
+    :hover,
+    &.Mui-focusVisible {
+      box-shadow: 0 0 0 8px ${alpha('#000', 0.16)};
+    }
+
+    &.Mui-active {
+      box-shadow: 0 0 0 14px ${alpha('#000', 0.16)};
+    }
   }
 `;
 

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

@@ -751,44 +751,6 @@ const classes = makeStyles(theme => ({
   +<Slider components={{ Thumb: CustomThumb }} />
   ```
 
-- The `classes` prop is no longer available for styling the component. You can fix this by one of these options:
-
-  1. Move these overrides to the theme's components overrides section
-
-  ```diff
-  -  const useStyles = makeStyles({
-  -    root: {
-  -      margin: '10px',
-  -    },
-  -    colorPrimary: {
-  -      backgroundColor: '#232323',
-  -    }
-  -  });
-  +  const theme = createMuiTheme({
-  +    components: {
-  +      MuiSlider: {
-  +        styleOverrides: {
-  +          root: {
-  +            margin: '10px',
-  +          },
-  +          colorPrimary: {
-  +            backgroundColor: '#232323',
-  +          },
-  +        },
-  +      },
-  +    },
-  +  });
-    // ...
-  -  const classes = useStyles();
-    // ...
-  + <ThemeProvider theme={theme}>
-  // ...
-  -  <Slider classes={classes}>
-  +  <Slider />
-  ```
-
-  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).
-
 ### Snackbar
 
 - The notification now displays at the bottom left on large screens.

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

@@ -1,4 +1,4 @@
-import { OverridableComponent, OverridableTypeMap } from '../OverridableComponent';
+import { OverridableComponent, OverridableTypeMap, OverrideProps } from '../OverridableComponent';
 
 export interface Mark {
   value: number;
@@ -26,6 +26,51 @@ export interface SliderUnstyledTypeMap<P = {}, D extends React.ElementType = 'sp
      * A string value that provides a user-friendly name for the current value of the slider.
      */
     'aria-valuetext'?: string;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: {
+      /** Class name applied to the root element. */
+      root?: string;
+      /** Class name applied to the root element if `color="primary"`. */
+      colorPrimary?: string;
+      /** Class name applied to the root element if `color="secondary"`. */
+      colorSecondary?: string;
+      /** Class name applied to the root element if `marks` is provided with at least one label. */
+      marked?: string;
+      /** Class name applied to the root element if `orientation="vertical"`. */
+      vertical?: string;
+      /** Pseudo-class applied to the root and thumb element if `disabled={true}`. */
+      disabled?: string;
+      /** Class name applied to the rail element. */
+      rail?: string;
+      /** Class name applied to the track element. */
+      track?: string;
+      /** Class name applied to the track element if `track={false}`. */
+      trackFalse?: string;
+      /** Class name applied to the track element if `track="inverted"`. */
+      trackInverted?: string;
+      /** Class name applied to the thumb element. */
+      thumb?: string;
+      /** Class name applied to the thumb element if `color="primary"`. */
+      thumbColorPrimary?: string;
+      /** Class name applied to the thumb element if `color="secondary"`. */
+      thumbColorSecondary?: string;
+      /** Pseudo-class applied to the thumb element if it's active. */
+      active?: string;
+      /** Pseudo-class applied to the thumb element if keyboard focused. */
+      focusVisible?: string;
+      /** Class name applied to the thumb label element. */
+      valueLabel?: string;
+      /** Class name applied to the mark element. */
+      mark?: string;
+      /** Class name applied to the mark element if active (depending on the value). */
+      markActive?: string;
+      /** Class name applied to the mark label element. */
+      markLabel?: string;
+      /** Class name applied to the mark label element if active (depending on the value). */
+      markLabelActive?: string;
+    };
     /**
      * The color of the component. It supports those theme colors that make sense for this component.
      * @default 'primary'
@@ -51,26 +96,32 @@ export interface SliderUnstyledTypeMap<P = {}, D extends React.ElementType = 'sp
      */
     componentsProps?: {
       root?: {
-        styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
         as: React.ElementType;
+        styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
       };
       track?: {
         as?: React.ElementType;
+        styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
       };
       rail?: {
         as?: React.ElementType;
+        styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
       };
       thumb?: {
         as?: React.ElementType;
+        styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
       };
       mark?: {
         as?: React.ElementType;
+        styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
       };
       markLabel?: {
         as?: React.ElementType;
+        styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
       };
       valueLabel?: {
         as?: React.ElementType;
+        styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
       };
     };
     /**
@@ -219,4 +270,11 @@ export type ExtendSliderUnstyled<M extends OverridableTypeMap> = OverridableComp
  */
 declare const SliderUnstyled: OverridableComponent<SliderUnstyledTypeMap>;
 
+export type SliderUnstyledProps<
+  D extends React.ElementType = SliderUnstyledTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<SliderUnstyledTypeMap<P, D>, D>;
+
+export type SliderUnstyledClassKey = keyof NonNullable<SliderUnstyledTypeMap['props']['classes']>;
+
 export default SliderUnstyled;