Added Documentation, Added prop validation, improved the way on how t…

…o use classNames, class overirde issue resolved, changes Thumbnail assignment instead of call, added comments

docs/src/pages/lab/slider/CustomIconSlider.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/Slider';
+import DeleteIcon from '@material-ui/icons/Delete';
+
+const styles = {
+  root: {
+    width: 300,
+  },
+};
+
+class CustomIconSlider extends React.Component {
+  state = {
+    value: 50,
+  };
+
+  handleChange = (event, value) => {
+    this.setState({ value });
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { value } = this.state;
+
+    return (
+      <div className={classes.root}>
+        <Typography id="label">Slider Image</Typography>
+        <Slider
+          value={value}
+          aria-labelledby="label"
+          onChange={this.handleChange}
+          thumb={<img src="/static/images/cards/live-from-space.jpg" alt="" />}
+        />
+        <Typography id="label">Slider Simple</Typography>
+        <Slider value={value} aria-labelledby="label" onChange={this.handleChange} />
+        <Typography id="label">Slider Icon</Typography>
+        <Slider
+          value={value}
+          aria-labelledby="label"
+          onChange={this.handleChange}
+          thumb={<DeleteIcon style={{ color: 'green' }} />}
+        />
+      </div>
+    );
+  }
+}
+
+CustomIconSlider.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CustomIconSlider);

docs/src/pages/lab/slider/slider.md

@@ -38,3 +38,9 @@ Sliders reflect the current state of the settings they control.
 ## Reverse slider
 
 {{"demo": "pages/lab/slider/ReverseSlider.js"}}
+
+## Custom Icon slider
+
+If you want to have a custom thumb icon.
+
+{{"demo": "pages/lab/slider/CustomIconSlider.js"}}

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

@@ -119,6 +119,7 @@ export const styles = theme => {
         height: 17,
       },
     },
+    /* Class applied to the thumb element if custom thumb icon provided` . */
     thumbTransparent: {
       backgroundColor: 'transparent',
     },
@@ -428,23 +429,27 @@ class Slider extends React.Component {
       [classes.vertical]: vertical,
     });
 
-    const thumbClasses = classNames(classes.thumb, commonClasses);
-
     const trackProperty = vertical ? 'height' : 'width';
     const thumbProperty = vertical ? 'top' : 'left';
     const inlineTrackBeforeStyles = { [trackProperty]: this.calculateTrackBeforeStyles(percent) };
     const inlineTrackAfterStyles = { [trackProperty]: this.calculateTrackAfterStyles(percent) };
     const inlineThumbStyles = { [thumbProperty]: `${percent}%` };
 
-    const Thumbnail = () => {
-      if (React.isValidElement(Thumb)) {
-        return React.cloneElement(Thumb, {
+    /** Start Thumbnail Icon Logic Here */
+    const withIcon = !!Thumb;
+    const Thumbnail = withIcon
+      ? React.cloneElement(Thumb, {
           ...Thumb.props,
-          className: classes.thumbIcon,
-        });
-      }
-      return null;
-    };
+          className: `${classes.thumbIcon} ${Thumb.props.className || ''}`,
+        })
+      : null;
+    /** End Thumbnail Icon Logic Here */
+
+    const thumbClasses = classNames(
+      classes.thumb,
+      commonClasses,
+      `${withIcon ? classes.thumbTransparent : ''}`,
+    );
 
     return (
       <Component
@@ -466,9 +471,7 @@ class Slider extends React.Component {
         <div className={containerClasses}>
           <div className={trackBeforeClasses} style={inlineTrackBeforeStyles} />
           <ButtonBase
-            className={
-              Thumbnail() ? classNames(thumbClasses, classes.thumbTransparent) : thumbClasses
-            }
+            className={classNames(thumbClasses)}
             disableRipple
             style={inlineThumbStyles}
             onBlur={this.handleBlur}
@@ -477,7 +480,7 @@ class Slider extends React.Component {
             onTouchMove={this.handleMouseMove}
             onFocusVisible={this.handleFocus}
           >
-            {Thumbnail()}
+            {Thumbnail}
           </ButtonBase>
           <div className={trackAfterClasses} style={inlineTrackAfterStyles} />
         </div>
@@ -539,7 +542,11 @@ Slider.propTypes = {
    * @ignore
    */
   theme: PropTypes.object.isRequired,
-  thumb: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  /**
+   * The component used for the slider icon.
+   * This is optional, if provided should be a react element.
+   */
+  thumb: PropTypes.element,
   /**
    * The value of the slider.
    */

pages/api/app-bar.md

@@ -27,17 +27,14 @@ Any other properties supplied will be spread to the root element ([Paper](/api/p
 You can override all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 
-
-| Name | Description |
-|:-----|:------------|
-| <span class="prop-name">root</span> | Styles applied to the root element.
-| <span class="prop-name">positionFixed</span> | Styles applied to the root element if `position="fixed"`.
-| <span class="prop-name">positionAbsolute</span> | Styles applied to the root element if `position="absolute"`.
-| <span class="prop-name">positionSticky</span> | Styles applied to the root element if `position="sticky"`.
-| <span class="prop-name">positionStatic</span> | Styles applied to the root element if `position="static"`.
-| <span class="prop-name">colorDefault</span> | Styles applied to the root element if `color="default"`.
-| <span class="prop-name">colorPrimary</span> | Styles applied to the root element if `color="primary"`.
-| <span class="prop-name">colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
+- `root`
+- `positionFixed`
+- `positionAbsolute`
+- `positionSticky`
+- `positionStatic`
+- `colorDefault`
+- `colorPrimary`
+- `colorSecondary`
 
 Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/AppBar/AppBar.js)

pages/api/avatar.md

@@ -31,12 +31,9 @@ Any other properties supplied will be spread to the root element (native element
 You can override all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 
-
-| Name | Description |
-|:-----|:------------|
-| <span class="prop-name">root</span> | Styles applied to the root element.
-| <span class="prop-name">colorDefault</span> | Styles applied to the root element if `color="default"`.
-| <span class="prop-name">img</span> | Styles applied to the img element if either `src` or `srcSet` is defined.
+- `root`
+- `colorDefault`
+- `img`
 
 Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Avatar/Avatar.js)

pages/api/backdrop.md

@@ -27,11 +27,8 @@ Any other properties supplied will be spread to the root element (native element
 You can override all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 
-
-| Name | Description |
-|:-----|:------------|
-| <span class="prop-name">root</span> | Styles applied to the root element.
-| <span class="prop-name">invisible</span> | Styles applied to the root element if `invisible={true}`.
+- `root`
+- `invisible`
 
 Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Backdrop/Backdrop.js)

pages/api/badge.md

@@ -28,14 +28,11 @@ Any other properties supplied will be spread to the root element (native element
 You can override all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 
-
-| Name | Description |
-|:-----|:------------|
-| <span class="prop-name">root</span> | Styles applied to the root element.
-| <span class="prop-name">badge</span> | Styles applied to the badge `span` element.
-| <span class="prop-name">colorPrimary</span> | Styles applied to the root element if `color="primary"`.
-| <span class="prop-name">colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
-| <span class="prop-name">colorError</span> | Styles applied to the root element if `color="error"`.
+- `root`
+- `badge`
+- `colorPrimary`
+- `colorSecondary`
+- `colorError`
 
 Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Badge/Badge.js)

pages/api/bottom-navigation-action.md

@@ -29,14 +29,11 @@ Any other properties supplied will be spread to the root element ([ButtonBase](/
 You can override all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 
-
-| Name | Description |
-|:-----|:------------|
-| <span class="prop-name">root</span> | Styles applied to the root element.
-| <span class="prop-name">selected</span> | Styles applied to the root element if selected.
-| <span class="prop-name">iconOnly</span> | Styles applied to the root element if `showLabel={false}` and not selected.
-| <span class="prop-name">wrapper</span> | Styles applied to the span element that wraps the icon and label.
-| <span class="prop-name">label</span> | Styles applied to the label's span element.
+- `root`
+- `selected`
+- `iconOnly`
+- `wrapper`
+- `label`
 
 Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js)

pages/api/bottom-navigation.md

@@ -28,10 +28,7 @@ Any other properties supplied will be spread to the root element (native element
 You can override all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 
-
-| Name | Description |
-|:-----|:------------|
-| <span class="prop-name">root</span> | Styles applied to the root element.
+- `root`
 
 Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/BottomNavigation/BottomNavigation.js)

pages/api/button-base.md

@@ -9,15 +9,15 @@ title: ButtonBase API
 
 <p class="description">The API documentation of the ButtonBase React component.</p>
 
-`ButtonBase` contains as few styles as possible.
-It aims to be a simple building block for creating a button.
+`ButtonBase` contains as few styles as possible.
+It aims to be a simple building block for creating a button.
 It contains a load of style reset and some focus/ripple logic.
 
 ## Props
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name">action</span> | <span class="prop-type">func |   | Callback fired when the component mounts. This is useful when you want to trigger an action programmatically. It currently only supports `focusVisible()` action.<br><br>**Signature:**<br>`function(actions: object) => void`<br>*actions:* This object contains all possible actions that can be triggered programmatically. |
+| <span class="prop-name">action</span> | <span class="prop-type">func |   | Callback fired when the component mounts. This is useful when you want to trigger an action programmatically. It currently only supports `focusVisible()` action.<br><br>**Signature:**<br>`function(actions: object) => void`<br>*actions:* This object contains all possible actions that can be triggered programmatically. |
 | <span class="prop-name">buttonRef</span> | <span class="prop-type">union:&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> |   | Use that property to pass a ref callback to the native button component. |
 | <span class="prop-name">centerRipple</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the ripples will be centered. They won't start at the cursor interaction position. |
 | <span class="prop-name">children</span> | <span class="prop-type">node |   | The content of the component. |
@@ -39,12 +39,9 @@ Any other properties supplied will be spread to the root element (native element
 You can override all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 
-
-| Name | Description |
-|:-----|:------------|
-| <span class="prop-name">root</span> | Styles applied to the root element.
-| <span class="prop-name">disabled</span> | Styles applied to the root element if `disabled={true}`.
-| <span class="prop-name">focusVisible</span> | Styles applied to the root element if keyboard focused.
+- `root`
+- `disabled`
+- `focusVisible`
 
 Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ButtonBase/ButtonBase.js)

pages/api/button.md

@@ -35,35 +35,32 @@ Any other properties supplied will be spread to the root element ([ButtonBase](/
 You can override all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 
-
-| Name | Description |
-|:-----|:------------|
-| <span class="prop-name">root</span> | Styles applied to the root element.
-| <span class="prop-name">label</span> | Styles applied to the span element that wraps the children.
-| <span class="prop-name">text</span> | Styles applied to the root element if `variant="text"`.
-| <span class="prop-name">textPrimary</span> | Styles applied to the root element if `variant="text"` and `color="primary"`.
-| <span class="prop-name">textSecondary</span> | Styles applied to the root element if `variant="text"` and `color="secondary"`.
-| <span class="prop-name">flat</span> | Styles applied to the root element for backwards compatibility with legacy variant naming.
-| <span class="prop-name">flatPrimary</span> | Styles applied to the root element for backwards compatibility with legacy variant naming.
-| <span class="prop-name">flatSecondary</span> | Styles applied to the root element for backwards compatibility with legacy variant naming.
-| <span class="prop-name">outlined</span> | Styles applied to the root element if `variant="outlined"`.
-| <span class="prop-name">outlinedPrimary</span> | Styles applied to the root element if `variant="outlined"` and `color="primary"`.
-| <span class="prop-name">outlinedSecondary</span> | Styles applied to the root element if `variant="outlined"` and `color="secondary"`.
-| <span class="prop-name">contained</span> | Styles applied to the root element if `variant="[contained \| fab]"`.
-| <span class="prop-name">containedPrimary</span> | Styles applied to the root element if `variant="[contained \| fab]"` and `color="primary"`.
-| <span class="prop-name">containedSecondary</span> | Styles applied to the root element if `variant="[contained \| fab]"` and `color="secondary"`.
-| <span class="prop-name">raised</span> | Styles applied to the root element for backwards compatibility with legacy variant naming.
-| <span class="prop-name">raisedPrimary</span> | Styles applied to the root element for backwards compatibility with legacy variant naming.
-| <span class="prop-name">raisedSecondary</span> | Styles applied to the root element for backwards compatibility with legacy variant naming.
-| <span class="prop-name">fab</span> | Styles applied to the root element if `variant="[fab \| extendedFab]"`.
-| <span class="prop-name">extendedFab</span> | Styles applied to the root element if `variant="extendedFab"`.
-| <span class="prop-name">focusVisible</span> | Styles applied to the ButtonBase root element if the button is keyboard focused.
-| <span class="prop-name">disabled</span> | Styles applied to the root element if `disabled={true}`.
-| <span class="prop-name">colorInherit</span> | Styles applied to the root element if `color="inherit"`.
-| <span class="prop-name">mini</span> | Styles applied to the root element if `size="mini"` & `variant="[fab \| extendedFab]"`.
-| <span class="prop-name">sizeSmall</span> | Styles applied to the root element if `size="small"`.
-| <span class="prop-name">sizeLarge</span> | Styles applied to the root element if `size="large"`.
-| <span class="prop-name">fullWidth</span> | Styles applied to the root element if `fullWidth={true}`.
+- `root`
+- `label`
+- `text`
+- `textPrimary`
+- `textSecondary`
+- `flat`
+- `flatPrimary`
+- `flatSecondary`
+- `outlined`
+- `outlinedPrimary`
+- `outlinedSecondary`
+- `contained`
+- `containedPrimary`
+- `containedSecondary`
+- `raised`
+- `raisedPrimary`
+- `raisedSecondary`
+- `fab`
+- `extendedFab`
+- `focusVisible`
+- `disabled`
+- `colorInherit`
+- `mini`
+- `sizeSmall`
+- `sizeLarge`
+- `fullWidth`
 
 Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Button/Button.js)

pages/api/card-actions.md

@@ -26,11 +26,8 @@ Any other properties supplied will be spread to the root element (native element
 You can override all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 
-
-| Name | Description |
-|:-----|:------------|
-| <span class="prop-name">root</span> | Styles applied to the root element.
-| <span class="prop-name">action</span> | Styles applied to the children.
+- `root`
+- `action`
 
 Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/CardActions/CardActions.js)

pages/api/card-content.md

@@ -25,10 +25,7 @@ Any other properties supplied will be spread to the root element (native element
 You can override all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 
-
-| Name | Description |
-|:-----|:------------|
-| <span class="prop-name">root</span> | Styles applied to the root element.
+- `root`
 
 Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/CardContent/CardContent.js)

pages/api/card-header.md

@@ -32,15 +32,12 @@ Any other properties supplied will be spread to the root element (native element
 You can override all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 
-
-| Name | Description |
-|:-----|:------------|
-| <span class="prop-name">root</span> | Styles applied to the root element.
-| <span class="prop-name">avatar</span> | Styles applied to the avatar element.
-| <span class="prop-name">action</span> | Styles applied to the action element.
-| <span class="prop-name">content</span> | Styles applied to the content wrapper element.
-| <span class="prop-name">title</span> | Styles applied to the title Typography element.
-| <span class="prop-name">subheader</span> | Styles applied to the subheader Typography element.
+- `root`
+- `avatar`
+- `action`
+- `content`
+- `title`
+- `subheader`
 
 Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/CardHeader/CardHeader.js)