[Slider] Export components from lab and renamed to fit file names (#2…

…2723)

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

@@ -29,9 +29,10 @@ 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. |
 | <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. |
+| <span class="prop-name">componentsProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | The props used for each slot inside the Slider. |
 | <span class="prop-name">defaultValue</span> | <span class="prop-type">Array&lt;number&gt;<br>&#124;&nbsp;number</span> |  | The default element value. Use when the component is not controlled. |
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the slider will be disabled. |
 | <span class="prop-name">getAriaLabel</span> | <span class="prop-type">func</span> |  | Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.<br><br>**Signature:**<br>`function(index: number) => string`<br>*index:* The thumb label's index to format. |
@@ -46,7 +47,6 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">orientation</span> | <span class="prop-type">'horizontal'<br>&#124;&nbsp;'vertical'</span> | <span class="prop-default">'horizontal'</span> | The slider orientation. |
 | <span class="prop-name">scale</span> | <span class="prop-type">func</span> | <span class="prop-default">(x) => x</span> | A transformation function, to change the scale of the slider. |
 | <span class="prop-name">step</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | The granularity with which the slider can step through values. (A "discrete" slider.) The `min` prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.<br>When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. |
-| <span class="prop-name">ThumbComponent</span> | <span class="prop-type">elementType</span> |  | The component used to display the value label. |
 | <span class="prop-name">track</span> | <span class="prop-type">'inverted'<br>&#124;&nbsp;'normal'<br>&#124;&nbsp;false</span> | <span class="prop-default">'normal'</span> | The track presentation:<br>- `normal` the track will render a bar representing the slider value. - `inverted` the track will render a bar representing the remaining slider value. - `false` the track will render without a bar. |
 | <span class="prop-name">value</span> | <span class="prop-type">Array&lt;number&gt;<br>&#124;&nbsp;number</span> |  | The value of the slider. For ranged sliders, provide an array with two values. |
 | <span class="prop-name">valueLabelDisplay</span> | <span class="prop-type">'auto'<br>&#124;&nbsp;'off'<br>&#124;&nbsp;'on'</span> | <span class="prop-default">'off'</span> | Controls when the value label is displayed:<br>- `auto` the value label will display when the thumb is hovered or focused. - `on` will display persistently. - `off` will never display. |

packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts

@@ -2,16 +2,6 @@ import * as React from 'react';
 import { OverridableComponent, OverrideProps } from '@material-ui/core/OverridableComponent';
 import { SliderTypeMap } from '../SliderUnstyled';
 
-/**
- *
- * API:
- *
- * - [SliderStyled API](https://material-ui.com/api/slider-styled/)
- */
-declare const Slider: OverridableComponent<SliderTypeMap>;
-
-export type SliderClassKey = keyof NonNullable<SliderTypeMap['props']['classes']>;
-
 export type SliderProps<
   D extends React.ElementType = SliderTypeMap['defaultComponent'],
   P = {}
@@ -33,4 +23,12 @@ export const SliderTrack: React.FC<SliderTrackProps>;
 export const SliderThumb: React.FC<SliderThumbProps>;
 export const SliderValueLabel: React.FC<SliderValueLabel>;
 
+/**
+ *
+ * API:
+ *
+ * - [SliderStyled API](https://material-ui.com/api/slider-styled/)
+ */
+declare const Slider: OverridableComponent<SliderTypeMap>;
+
 export default Slider;

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

@@ -26,10 +26,6 @@ export interface SliderTypeMap<P = {}, D extends React.ElementType = 'span'> {
      * 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?: {};
     /**
      * The color of the component. It supports those theme colors that make sense for this component.
      * @default 'primary'
@@ -38,6 +34,7 @@ export interface SliderTypeMap<P = {}, D extends React.ElementType = 'span'> {
     /**
      * The components used for each slot inside the Slider.
      * Either a string to use a HTML element or a component.
+     * @default {}
      */
     components?: {
       Root?: React.ElementType;
@@ -50,6 +47,7 @@ export interface SliderTypeMap<P = {}, D extends React.ElementType = 'span'> {
     };
     /**
      * The props used for each slot inside the Slider.
+     * @default {}
      */
     componentsProps?: {
       root?: {
@@ -101,6 +99,7 @@ export interface SliderTypeMap<P = {}, D extends React.ElementType = 'span'> {
     getAriaValueText?: (value: number, index: number) => string;
     /**
      * Indicates whether the theme context has rtl direction. It is set automatically.
+     * @default false
      */
     isRtl?: boolean;
     /**
@@ -202,6 +201,6 @@ export interface SliderTypeMap<P = {}, D extends React.ElementType = 'span'> {
  *
  * - [SliderUnstyled API](https://material-ui.com/api/slider-unstyled/)
  */
-declare const SliderBase: OverridableComponent<SliderTypeMap>;
+declare const SliderUnstyled: OverridableComponent<SliderTypeMap>;
 
-export default SliderBase;
+export default SliderUnstyled;

packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js

@@ -174,7 +174,7 @@ const useSliderClasses = (props) => {
 
 const isComponent = (element) => typeof element !== 'string';
 
-const Slider = React.forwardRef(function Slider(props, ref) {
+const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
   const {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby,
@@ -201,10 +201,7 @@ const Slider = React.forwardRef(function Slider(props, ref) {
     valueLabelDisplay = 'off',
     valueLabelFormat = Identity,
     isRtl = false,
-    // TODO: these proptypes were not generated
-    /* eslint-disable react/prop-types */
     components = {},
-    /* eslint-disable react/prop-types */
     componentsProps = {},
     /* eslint-disable react/prop-types */
     theme,
@@ -737,7 +734,7 @@ const Slider = React.forwardRef(function Slider(props, ref) {
   );
 });
 
-Slider.propTypes = {
+SliderUnstyled.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
@@ -778,11 +775,6 @@ Slider.propTypes = {
    * @ignore
    */
   children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   * @default {}
-   */
-  classes: PropTypes.object,
   /**
    * @ignore
    */
@@ -797,6 +789,25 @@ Slider.propTypes = {
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
+  /**
+   * The components used for each slot inside the Slider.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  components: PropTypes.shape({
+    Mark: PropTypes.elementType,
+    MarkLabel: PropTypes.elementType,
+    Rail: PropTypes.elementType,
+    Root: PropTypes.elementType,
+    Thumb: PropTypes.elementType,
+    Track: PropTypes.elementType,
+    ValueLabel: PropTypes.elementType,
+  }),
+  /**
+   * The props used for each slot inside the Slider.
+   * @default {}
+   */
+  componentsProps: PropTypes.object,
   /**
    * The default element value. Use when the component is not controlled.
    */
@@ -894,11 +905,6 @@ Slider.propTypes = {
    * @default 1
    */
   step: PropTypes.number,
-  /**
-   * The component used to display the value label.
-   * @default 'span'
-   */
-  ThumbComponent: PropTypes.elementType,
   /**
    * The track presentation:
    *
@@ -934,4 +940,4 @@ Slider.propTypes = {
   valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 };
 
-export default Slider;
+export default SliderUnstyled;

packages/material-ui-lab/src/index.d.ts

@@ -19,6 +19,12 @@ export * from './Rating';
 export { default as Skeleton } from './Skeleton';
 export * from './Skeleton';
 
+export { default as SliderStyled } from './SliderStyled';
+export * from './SliderStyled';
+
+export { default as SliderUnstyled } from './SliderUnstyled';
+export * from './SliderUnstyled';
+
 export { default as SpeedDial } from './SpeedDial';
 export * from './SpeedDial';
 

packages/material-ui-lab/src/index.js

@@ -26,6 +26,12 @@ export * from './Rating';
 export { default as Skeleton } from './Skeleton';
 export * from './Skeleton';
 
+export { default as SliderStyled } from './SliderStyled';
+export * from './SliderStyled';
+
+export { default as SliderUnstyled } from './SliderUnstyled';
+export * from './SliderUnstyled';
+
 export { default as SpeedDial } from './SpeedDial';
 export * from './SpeedDial';