[Slider] Misc fixes towards standard MUI patterns (#11605)

mui · May 27, 2018 · 0103173 · 0103173
1 parent b34a1d7
commit 0103173
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 11 deletions.
diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js
@@ -29,8 +29,8 @@ export const style = theme => {
   };
 
   return {
-    /* Styles for wrapper container */
-    container: {
+    // /* Styles for root node */
+    root: {
       position: 'relative',
       width: '100%',
       margin: '10px 0',
@@ -382,13 +382,14 @@ class Slider extends React.Component {
     const {
       component: Component,
       classes,
+      className: classNameProp,
       value,
       min,
       max,
       vertical,
       reverse,
       disabled,
-      ...otherProps
+      ...other
     } = this.props;
 
     const percent = clamp((value - min) * 100 / (max - min));
@@ -400,10 +401,11 @@ class Slider extends React.Component {
       [classes.activated]: !disabled && currentState === 'activated',
     };
 
-    const containerClasses = classNames(classes.container, {
+    const rootClasses = classNames(classes.root, {
       [classes.vertical]: vertical,
       [classes.reverse]: reverse,
       [classes.disabled]: disabled,
+      classNameProp,
     });
 
     const trackBeforeClasses = classNames(classes.track, classes.trackBefore, commonClasses, {
@@ -427,7 +429,7 @@ class Slider extends React.Component {
     return (
       <Component
         role="slider"
-        className={containerClasses}
+        className={rootClasses}
         aria-valuenow={value}
         aria-valuemin={min}
         aria-valuemax={max}
@@ -436,7 +438,7 @@ class Slider extends React.Component {
         ref={node => {
           this.container = findDOMNode(node);
         }}
-        {...otherProps}
+        {...other}
       >
         <div className={trackBeforeClasses} style={inlineTrackBeforeStyles} />
         <ButtonBase
@@ -458,12 +460,18 @@ class Slider extends React.Component {
 
 Slider.propTypes = {
   /**
-   * Useful to extend the style applied to components.
+   * Override or extend the styles applied to the component.
+   * See [CSS API](#css-api) below for more details.
    */
   classes: PropTypes.object.isRequired,
   /**
    * @ignore
    */
+  className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   */
   component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   /**
    * If `true`, the slider will be disabled.
@@ -506,7 +514,7 @@ Slider.propTypes = {
   /**
    * The value of the slider.
    */
-  value: PropTypes.number,
+  value: PropTypes.number.isRequired,
   /**
    * If `true`, the slider will be vertical.
    */
@@ -516,7 +524,6 @@ Slider.propTypes = {
 Slider.defaultProps = {
   min: 0,
   max: 100,
-  value: 50,
   component: 'div',
 };
 

diff --git a/pages/lab/api/slider.md b/pages/lab/api/slider.md
@@ -12,7 +12,8 @@ filename: /packages/material-ui-lab/src/Slider/Slider.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'div'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool |  | If `true`, the slider will be disabled. |
 | <span class="prop-name">max</span> | <span class="prop-type">number | <span class="prop-default">100</span> | The maximum allowed value of the slider. Should not be equal to min. |
 | <span class="prop-name">min</span> | <span class="prop-type">number | <span class="prop-default">0</span> | The minimum allowed value of the slider. Should not be equal to max. |
@@ -21,7 +22,7 @@ filename: /packages/material-ui-lab/src/Slider/Slider.js
 | <span class="prop-name">onDragStart</span> | <span class="prop-type">func |  | Callback function that is fired when the slider has begun to move. |
 | <span class="prop-name">reverse</span> | <span class="prop-type">bool |  | If `true`, the slider will be reversed. |
 | <span class="prop-name">step</span> | <span class="prop-type">number |  | The granularity the slider can step through values. |
-| <span class="prop-name">value</span> | <span class="prop-type">number | <span class="prop-default">50</span> | The value of the slider. |
+| <span class="prop-name required">value *</span> | <span class="prop-type">number |  | The value of the slider. |
 | <span class="prop-name">vertical</span> | <span class="prop-type">bool |  | If `true`, the slider will be vertical. |
 
 Any other properties supplied will be spread to the root element (native element).