From 979c0cd17e7c2fee9316960c6de25bc7c60ac931 Mon Sep 17 00:00:00 2001
From: adeelibr <adeelimranr@gmail.com>
Date: Tue, 21 Aug 2018 02:57:34 +0500
Subject: [PATCH 01/22] feature slider icon

---
 docs/src/pages/lab/slider/CustomIconSlider.js | 54 +++++++++++++++++++
 docs/src/pages/lab/slider/slider.md           |  4 ++
 packages/material-ui-lab/src/Slider/Slider.js | 38 +++++++++++--
 pages/lab/slider.js                           |  7 +++
 4 files changed, 100 insertions(+), 3 deletions(-)
 create mode 100644 docs/src/pages/lab/slider/CustomIconSlider.js

diff --git a/docs/src/pages/lab/slider/CustomIconSlider.js b/docs/src/pages/lab/slider/CustomIconSlider.js
new file mode 100644
index 00000000000000..913f6393fc173f
--- /dev/null
+++ b/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);
diff --git a/docs/src/pages/lab/slider/slider.md b/docs/src/pages/lab/slider/slider.md
index 7252aabf469c52..685895b5c7889d 100644
--- a/docs/src/pages/lab/slider/slider.md
+++ b/docs/src/pages/lab/slider/slider.md
@@ -38,3 +38,7 @@ Sliders reflect the current state of the settings they control.
 ## Reverse slider
 
 {{"demo": "pages/lab/slider/ReverseSlider.js"}}
+
+If you want to have a custom thumb icon.
+
+{{"demo": "pages/lab/slider/CustomIconSlider.js"}}
\ No newline at end of file
diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js
index 6371a2f38bdc3b..cde92ca04ef06d 100644
--- a/packages/material-ui-lab/src/Slider/Slider.js
+++ b/packages/material-ui-lab/src/Slider/Slider.js
@@ -119,6 +119,16 @@ export const styles = theme => {
         height: 17,
       },
     },
+    /* Class applied to the thumb element if custom thumb icon provided` . */
+    thumbTransparent: {
+      backgroundColor: 'transparent',
+    },
+    thumbIcon: {
+      position: 'relative',
+      top: -6,
+      height: 26,
+      width: 'auto',
+    },
     /* Class applied to the root element to trigger JSS nested styles if `reverse={true}` . */
     reverse: {},
     /* Class applied to the track and thumb elements to trigger JSS nested styles if `disabled`. */
@@ -375,6 +385,7 @@ class Slider extends React.Component {
     const { currentState } = this.state;
     const {
       component: Component,
+      thumb: Thumb,
       classes,
       className: classNameProp,
       disabled,
@@ -418,14 +429,28 @@ 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}%` };
 
+    /** Start Thumbnail Icon Logic Here */
+    const withIcon = !!Thumb;
+    const Thumbnail = withIcon
+      ? React.cloneElement(Thumb, {
+          ...Thumb.props,
+          className: `${classes.thumbIcon} ${Thumb.props.className || ''}`,
+        })
+      : null;
+    /** End Thumbnail Icon Logic Here */
+
+    const thumbClasses = classNames(
+      classes.thumb,
+      commonClasses,
+      `${withIcon ? classes.thumbTransparent : ''}`,
+    );
+
     return (
       <Component
         role="slider"
@@ -454,7 +479,9 @@ class Slider extends React.Component {
             onTouchStartCapture={this.handleTouchStart}
             onTouchMove={this.handleMouseMove}
             onFocusVisible={this.handleFocus}
-          />
+          >
+            {Thumbnail}
+          </ButtonBase>
           <div className={trackAfterClasses} style={inlineTrackAfterStyles} />
         </div>
       </Component>
@@ -515,6 +542,11 @@ Slider.propTypes = {
    * @ignore
    */
   theme: PropTypes.object.isRequired,
+  /**
+   * 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.
    */
diff --git a/pages/lab/slider.js b/pages/lab/slider.js
index d482fb6a00c97a..8fc025c880cc49 100644
--- a/pages/lab/slider.js
+++ b/pages/lab/slider.js
@@ -41,6 +41,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/lab/slider/ReverseSlider'), 'utf8')
+`,
+        },
+        'pages/lab/slider/CustomIconSlider.js': {
+          js: require('docs/src/pages/lab/slider/CustomIconSlider').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/lab/slider/CustomIconSlider'), 'utf8')
 `,
         },
       }}

From cac07cd6a3940656644455a0a3fb6fb12c19bf28 Mon Sep 17 00:00:00 2001
From: Matthew Brookes <github@nospam.33m.co>
Date: Mon, 20 Aug 2018 23:21:33 +0100
Subject: [PATCH 02/22] [docs] Update Slider API docs

---
 pages/lab/api/slider.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/pages/lab/api/slider.md b/pages/lab/api/slider.md
index f82b4d2e41d9a9..91a6e9900408c9 100644
--- a/pages/lab/api/slider.md
+++ b/pages/lab/api/slider.md
@@ -25,6 +25,7 @@ title: Slider API
 | <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">thumb</span> | <span class="prop-type">element |   | The component used for the slider icon. This is optional, if provided should be a react element. |
 | <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. |
 
@@ -44,6 +45,8 @@ This property accepts the following keys:
 | <span class="prop-name">trackBefore</span> | Styles applied to the track element before the thumb.
 | <span class="prop-name">trackAfter</span> | Styles applied to the track element after the thumb.
 | <span class="prop-name">thumb</span> | Styles applied to the thumb element.
+| <span class="prop-name">thumbTransparent</span> | Class applied to the thumb element if custom thumb icon provided` .
+| <span class="prop-name">thumbIcon</span> | 
 | <span class="prop-name">reverse</span> | Class applied to the root element to trigger JSS nested styles if `reverse={true}` .
 | <span class="prop-name">disabled</span> | Class applied to the track and thumb elements to trigger JSS nested styles if `disabled`.
 | <span class="prop-name">jumped</span> | Class applied to the track and thumb elements to trigger JSS nested styles if `jumped`.

From 49b716fcc6eafafe95458399ac67d8f0a5f884d2 Mon Sep 17 00:00:00 2001
From: adeelibr <adeelimranr@gmail.com>
Date: Tue, 21 Aug 2018 03:44:24 +0500
Subject: [PATCH 03/22] updated demo

---
 docs/src/pages/lab/slider/CustomIconSlider.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/docs/src/pages/lab/slider/CustomIconSlider.js b/docs/src/pages/lab/slider/CustomIconSlider.js
index 913f6393fc173f..39f79186c543f0 100644
--- a/docs/src/pages/lab/slider/CustomIconSlider.js
+++ b/docs/src/pages/lab/slider/CustomIconSlider.js
@@ -3,12 +3,15 @@ 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';
+import StarsIcon from '@material-ui/icons/Gamepad';
 
 const styles = {
   root: {
     width: 300,
   },
+  thumbIcon: {
+    borderRadius: '50%',
+  },
 };
 
 class CustomIconSlider extends React.Component {
@@ -31,16 +34,18 @@ class CustomIconSlider extends React.Component {
           value={value}
           aria-labelledby="label"
           onChange={this.handleChange}
-          thumb={<img src="/static/images/cards/live-from-space.jpg" alt="" />}
+          thumb={(<img
+            alt="slider thumb icon"
+            src="/static/images/cards/live-from-space.jpg"
+            className={classes.thumbIcon}
+          />)}
         />
-        <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' }} />}
+          thumb={<StarsIcon style={{ color: '#2196f3' }} />}
         />
       </div>
     );

From 201177e384e4db79335091cecf1727c5227cbee2 Mon Sep 17 00:00:00 2001
From: adeelibr <adeelimranr@gmail.com>
Date: Tue, 21 Aug 2018 03:47:02 +0500
Subject: [PATCH 04/22] added custom description

---
 docs/src/pages/lab/slider/slider.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/lab/slider/slider.md b/docs/src/pages/lab/slider/slider.md
index 685895b5c7889d..f71372d808397a 100644
--- a/docs/src/pages/lab/slider/slider.md
+++ b/docs/src/pages/lab/slider/slider.md
@@ -39,6 +39,6 @@ Sliders reflect the current state of the settings they control.
 
 {{"demo": "pages/lab/slider/ReverseSlider.js"}}
 
-If you want to have a custom thumb icon.
+## Custom Icon slider
 
 {{"demo": "pages/lab/slider/CustomIconSlider.js"}}
\ No newline at end of file

From 1efcbf3a4542414582f1529e18b2e532f8280cc3 Mon Sep 17 00:00:00 2001
From: adeelibr <adeelimranr@gmail.com>
Date: Tue, 21 Aug 2018 03:48:48 +0500
Subject: [PATCH 05/22] corrected heading

---
 docs/src/pages/lab/slider/slider.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/lab/slider/slider.md b/docs/src/pages/lab/slider/slider.md
index f71372d808397a..6b739113a6da10 100644
--- a/docs/src/pages/lab/slider/slider.md
+++ b/docs/src/pages/lab/slider/slider.md
@@ -39,6 +39,6 @@ Sliders reflect the current state of the settings they control.
 
 {{"demo": "pages/lab/slider/ReverseSlider.js"}}
 
-## Custom Icon slider
+## Custom thumb
 
 {{"demo": "pages/lab/slider/CustomIconSlider.js"}}
\ No newline at end of file

From 59338386a46670d08a47d1444af4b61caf139796 Mon Sep 17 00:00:00 2001
From: adeelibr <adeelimranr@gmail.com>
Date: Tue, 21 Aug 2018 03:57:02 +0500
Subject: [PATCH 06/22] ran prettier to format code

---
 docs/src/pages/lab/slider/CustomIconSlider.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/docs/src/pages/lab/slider/CustomIconSlider.js b/docs/src/pages/lab/slider/CustomIconSlider.js
index 39f79186c543f0..c6900001202179 100644
--- a/docs/src/pages/lab/slider/CustomIconSlider.js
+++ b/docs/src/pages/lab/slider/CustomIconSlider.js
@@ -34,11 +34,13 @@ class CustomIconSlider extends React.Component {
           value={value}
           aria-labelledby="label"
           onChange={this.handleChange}
-          thumb={(<img
-            alt="slider thumb icon"
-            src="/static/images/cards/live-from-space.jpg"
-            className={classes.thumbIcon}
-          />)}
+          thumb={
+            <img
+              alt="slider thumb icon"
+              src="/static/images/cards/live-from-space.jpg"
+              className={classes.thumbIcon}
+            />
+          }
         />
         <Typography id="label">Slider Icon</Typography>
         <Slider

From b30e4b5fd67eb166bdbf2c7e5b1fbf114ccd29f1 Mon Sep 17 00:00:00 2001
From: adeelibr <adeelimranr@gmail.com>
Date: Tue, 21 Aug 2018 17:04:47 +0500
Subject: [PATCH 07/22] improvements on thumb icon while draggin it

---
 packages/material-ui-lab/src/Slider/Slider.js | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js
index cde92ca04ef06d..0a413c13788e05 100644
--- a/packages/material-ui-lab/src/Slider/Slider.js
+++ b/packages/material-ui-lab/src/Slider/Slider.js
@@ -120,14 +120,12 @@ export const styles = theme => {
       },
     },
     /* Class applied to the thumb element if custom thumb icon provided` . */
-    thumbTransparent: {
-      backgroundColor: 'transparent',
-    },
     thumbIcon: {
       position: 'relative',
-      top: -6,
+      top: 0,
       height: 26,
       width: 'auto',
+      backgroundColor: 'transparent',
     },
     /* Class applied to the root element to trigger JSS nested styles if `reverse={true}` . */
     reverse: {},
@@ -446,9 +444,8 @@ class Slider extends React.Component {
     /** End Thumbnail Icon Logic Here */
 
     const thumbClasses = classNames(
-      classes.thumb,
+      `${withIcon ? '' : classes.thumb}`,
       commonClasses,
-      `${withIcon ? classes.thumbTransparent : ''}`,
     );
 
     return (

From a3c4f779a152f5b0474034f5a6f01e2a9ece46a0 Mon Sep 17 00:00:00 2001
From: adeelibr <adeelimranr@gmail.com>
Date: Tue, 21 Aug 2018 17:25:34 +0500
Subject: [PATCH 08/22] improvement on active state for thumb

---
 packages/material-ui-lab/src/Slider/Slider.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js
index 0a413c13788e05..2ca55f29438b48 100644
--- a/packages/material-ui-lab/src/Slider/Slider.js
+++ b/packages/material-ui-lab/src/Slider/Slider.js
@@ -120,6 +120,8 @@ export const styles = theme => {
       },
     },
     /* Class applied to the thumb element if custom thumb icon provided` . */
+    thumbTransparent: {
+    },
     thumbIcon: {
       position: 'relative',
       top: 0,
@@ -446,6 +448,7 @@ class Slider extends React.Component {
     const thumbClasses = classNames(
       `${withIcon ? '' : classes.thumb}`,
       commonClasses,
+      `${withIcon ? classes.thumbTransparent : ''}`,
     );
 
     return (

From 4fa5ffaedf1c981de6104744c58732f3e2b72e88 Mon Sep 17 00:00:00 2001
From: adeelibr <adeelimranr@gmail.com>
Date: Tue, 21 Aug 2018 17:53:06 +0500
Subject: [PATCH 09/22] ran prettier

---
 packages/material-ui-lab/src/Slider/Slider.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js
index 2ca55f29438b48..a0207246cb7cd3 100644
--- a/packages/material-ui-lab/src/Slider/Slider.js
+++ b/packages/material-ui-lab/src/Slider/Slider.js
@@ -121,6 +121,7 @@ export const styles = theme => {
     },
     /* Class applied to the thumb element if custom thumb icon provided` . */
     thumbTransparent: {
+      backgroundColor: 'transparent',
     },
     thumbIcon: {
       position: 'relative',

From 6b91465d968331639b91c3bcd8ff4fff9723f62e Mon Sep 17 00:00:00 2001
From: adeelibr <adeelimranr@gmail.com>
Date: Tue, 21 Aug 2018 19:35:19 +0500
Subject: [PATCH 10/22] improvements

---
 packages/material-ui-lab/src/Slider/Slider.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js
index a0207246cb7cd3..3ccc0cc9595f2e 100644
--- a/packages/material-ui-lab/src/Slider/Slider.js
+++ b/packages/material-ui-lab/src/Slider/Slider.js
@@ -120,7 +120,7 @@ export const styles = theme => {
       },
     },
     /* Class applied to the thumb element if custom thumb icon provided` . */
-    thumbTransparent: {
+    thumbIconWrapper: {
       backgroundColor: 'transparent',
     },
     thumbIcon: {
@@ -128,7 +128,7 @@ export const styles = theme => {
       top: 0,
       height: 26,
       width: 'auto',
-      backgroundColor: 'transparent',
+      zIndex: 2,
     },
     /* Class applied to the root element to trigger JSS nested styles if `reverse={true}` . */
     reverse: {},
@@ -447,9 +447,11 @@ class Slider extends React.Component {
     /** End Thumbnail Icon Logic Here */
 
     const thumbClasses = classNames(
-      `${withIcon ? '' : classes.thumb}`,
+      {
+        [classes.thumb]: !withIcon,
+        [classes.thumbIconWrapper]: withIcon,
+      },
       commonClasses,
-      `${withIcon ? classes.thumbTransparent : ''}`,
     );
 
     return (

From fad04786825129cd46bc8ef5bc35b8398533b7c5 Mon Sep 17 00:00:00 2001
From: Matthew Brookes <github@nospam.33m.co>
Date: Tue, 21 Aug 2018 17:15:19 +0100
Subject: [PATCH 11/22] [docs] Update Slider API docs

---
 pages/lab/api/slider.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/lab/api/slider.md b/pages/lab/api/slider.md
index 91a6e9900408c9..6f6f2ded152fea 100644
--- a/pages/lab/api/slider.md
+++ b/pages/lab/api/slider.md
@@ -45,7 +45,7 @@ This property accepts the following keys:
 | <span class="prop-name">trackBefore</span> | Styles applied to the track element before the thumb.
 | <span class="prop-name">trackAfter</span> | Styles applied to the track element after the thumb.
 | <span class="prop-name">thumb</span> | Styles applied to the thumb element.
-| <span class="prop-name">thumbTransparent</span> | Class applied to the thumb element if custom thumb icon provided` .
+| <span class="prop-name">thumbIconWrapper</span> | Class applied to the thumb element if custom thumb icon provided` .
 | <span class="prop-name">thumbIcon</span> | 
 | <span class="prop-name">reverse</span> | Class applied to the root element to trigger JSS nested styles if `reverse={true}` .
 | <span class="prop-name">disabled</span> | Class applied to the track and thumb elements to trigger JSS nested styles if `disabled`.

From abe9c9c9d4a65595bc64a26e82952a1af2563bdd Mon Sep 17 00:00:00 2001
From: adeelibr <adeelimranr@gmail.com>
Date: Wed, 22 Aug 2018 00:46:04 +0500
Subject: [PATCH 12/22] updated documentation & improvements in thumb

---
 docs/src/pages/lab/slider/CustomIconSlider.js |  4 ++--
 packages/material-ui-lab/src/Slider/Slider.js | 13 +++++++++----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/docs/src/pages/lab/slider/CustomIconSlider.js b/docs/src/pages/lab/slider/CustomIconSlider.js
index c6900001202179..0fc26aa8d66990 100644
--- a/docs/src/pages/lab/slider/CustomIconSlider.js
+++ b/docs/src/pages/lab/slider/CustomIconSlider.js
@@ -29,7 +29,7 @@ class CustomIconSlider extends React.Component {
 
     return (
       <div className={classes.root}>
-        <Typography id="label">Slider Image</Typography>
+        <Typography id="label">Image thumb</Typography>
         <Slider
           value={value}
           aria-labelledby="label"
@@ -42,7 +42,7 @@ class CustomIconSlider extends React.Component {
             />
           }
         />
-        <Typography id="label">Slider Icon</Typography>
+        <Typography id="label">Icon thumb</Typography>
         <Slider
           value={value}
           aria-labelledby="label"
diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js
index 3ccc0cc9595f2e..1c1751877e38f4 100644
--- a/packages/material-ui-lab/src/Slider/Slider.js
+++ b/packages/material-ui-lab/src/Slider/Slider.js
@@ -122,10 +122,15 @@ export const styles = theme => {
     /* Class applied to the thumb element if custom thumb icon provided` . */
     thumbIconWrapper: {
       backgroundColor: 'transparent',
+      '&$activated': {
+        width: 12,
+        height: 12,
+        transition: 'none',
+      },
     },
     thumbIcon: {
       position: 'relative',
-      top: 0,
+      top: -7,
       height: 26,
       width: 'auto',
       zIndex: 2,
@@ -436,7 +441,7 @@ class Slider extends React.Component {
     const inlineTrackAfterStyles = { [trackProperty]: this.calculateTrackAfterStyles(percent) };
     const inlineThumbStyles = { [thumbProperty]: `${percent}%` };
 
-    /** Start Thumbnail Icon Logic Here */
+    /** Start Slider Icon Logic Here */
     const withIcon = !!Thumb;
     const Thumbnail = withIcon
       ? React.cloneElement(Thumb, {
@@ -444,11 +449,11 @@ class Slider extends React.Component {
           className: `${classes.thumbIcon} ${Thumb.props.className || ''}`,
         })
       : null;
-    /** End Thumbnail Icon Logic Here */
+    /** End Slider Icon Logic Here */
 
     const thumbClasses = classNames(
+      classes.thumb,
       {
-        [classes.thumb]: !withIcon,
         [classes.thumbIconWrapper]: withIcon,
       },
       commonClasses,

From 38891450fce779b9e64ad42d333dd4ea6f469e15 Mon Sep 17 00:00:00 2001
From: adeelibr <adeelimranr@gmail.com>
Date: Wed, 22 Aug 2018 02:58:08 +0500
Subject: [PATCH 13/22] improved custom icon demo & slider variable names
 better use

---
 docs/src/pages/lab/slider/CustomIconSlider.js |   2 +-
 packages/material-ui-lab/src/Slider/Slider.js |  22 +++++++++++-------
 static/images/misc/circle.png                 | Bin 0 -> 15727 bytes
 3 files changed, 14 insertions(+), 10 deletions(-)
 create mode 100644 static/images/misc/circle.png

diff --git a/docs/src/pages/lab/slider/CustomIconSlider.js b/docs/src/pages/lab/slider/CustomIconSlider.js
index 0fc26aa8d66990..3909b8d63f8ea9 100644
--- a/docs/src/pages/lab/slider/CustomIconSlider.js
+++ b/docs/src/pages/lab/slider/CustomIconSlider.js
@@ -37,7 +37,7 @@ class CustomIconSlider extends React.Component {
           thumb={
             <img
               alt="slider thumb icon"
-              src="/static/images/cards/live-from-space.jpg"
+              src="/static/images/misc/circle.png"
               className={classes.thumbIcon}
             />
           }
diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js
index 1c1751877e38f4..a862d30591dfa6 100644
--- a/packages/material-ui-lab/src/Slider/Slider.js
+++ b/packages/material-ui-lab/src/Slider/Slider.js
@@ -127,6 +127,10 @@ export const styles = theme => {
         height: 12,
         transition: 'none',
       },
+      '&$jumped': {
+        width: 12,
+        height: 12,
+      },
     },
     thumbIcon: {
       position: 'relative',
@@ -391,7 +395,7 @@ class Slider extends React.Component {
     const { currentState } = this.state;
     const {
       component: Component,
-      thumb: Thumb,
+      thumb: thumbIcon,
       classes,
       className: classNameProp,
       disabled,
@@ -441,15 +445,15 @@ class Slider extends React.Component {
     const inlineTrackAfterStyles = { [trackProperty]: this.calculateTrackAfterStyles(percent) };
     const inlineThumbStyles = { [thumbProperty]: `${percent}%` };
 
-    /** Start Slider Icon Logic Here */
-    const withIcon = !!Thumb;
-    const Thumbnail = withIcon
-      ? React.cloneElement(Thumb, {
-          ...Thumb.props,
-          className: `${classes.thumbIcon} ${Thumb.props.className || ''}`,
+    /** Start Thumb Icon Logic Here */
+    const withIcon = !!thumbIcon;
+    const ThumbIcon = withIcon
+      ? React.cloneElement(thumbIcon, {
+          ...thumbIcon.props,
+          className: `${classes.thumbIcon} ${thumbIcon.props.className || ''}`,
         })
       : null;
-    /** End Slider Icon Logic Here */
+    /** End Thumb Icon Logic Here */
 
     const thumbClasses = classNames(
       classes.thumb,
@@ -488,7 +492,7 @@ class Slider extends React.Component {
             onTouchMove={this.handleMouseMove}
             onFocusVisible={this.handleFocus}
           >
-            {Thumbnail}
+            {ThumbIcon}
           </ButtonBase>
           <div className={trackAfterClasses} style={inlineTrackAfterStyles} />
         </div>
diff --git a/static/images/misc/circle.png b/static/images/misc/circle.png
new file mode 100644
index 0000000000000000000000000000000000000000..c68b34beab85c68fd12f2eb479634f76cc211c2c
GIT binary patch
literal 15727
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

literal 0
HcmV?d00001


From 3a858e836d433cd3f555050d40b09a4d574a8261 Mon Sep 17 00:00:00 2001
From: adeelibr <adeelimranr@gmail.com>
Date: Wed, 22 Aug 2018 20:30:10 +0500
Subject: [PATCH 14/22] active, focus state working properly now

---
 packages/material-ui-lab/src/Slider/Slider.js | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js
index a862d30591dfa6..8c161a7a8def79 100644
--- a/packages/material-ui-lab/src/Slider/Slider.js
+++ b/packages/material-ui-lab/src/Slider/Slider.js
@@ -122,22 +122,21 @@ export const styles = theme => {
     /* Class applied to the thumb element if custom thumb icon provided` . */
     thumbIconWrapper: {
       backgroundColor: 'transparent',
+      width: 17,
+      height: 17,
       '&$activated': {
-        width: 12,
-        height: 12,
+        width: 22,
+        height: 22,
         transition: 'none',
       },
       '&$jumped': {
-        width: 12,
-        height: 12,
+        width: 22,
+        height: 22,
       },
     },
     thumbIcon: {
-      position: 'relative',
-      top: -7,
-      height: 26,
-      width: 'auto',
-      zIndex: 2,
+      height: 'inherit',
+      width: 'inherit',
     },
     /* Class applied to the root element to trigger JSS nested styles if `reverse={true}` . */
     reverse: {},
@@ -450,7 +449,7 @@ class Slider extends React.Component {
     const ThumbIcon = withIcon
       ? React.cloneElement(thumbIcon, {
           ...thumbIcon.props,
-          className: `${classes.thumbIcon} ${thumbIcon.props.className || ''}`,
+          className: classNames(thumbIcon.props.className, classes.thumbIcon),
         })
       : null;
     /** End Thumb Icon Logic Here */

From ba8c1e4a7e86da47110ce66588afbdbb6f92803e Mon Sep 17 00:00:00 2001
From: adeelibr <adeelimranr@gmail.com>
Date: Sun, 9 Sep 2018 17:08:56 +0500
Subject: [PATCH 15/22] removed extra space

---
 packages/material-ui-lab/src/Slider/Slider.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js
index 2cbff7f0c151ec..b83999246a275b 100644
--- a/packages/material-ui-lab/src/Slider/Slider.js
+++ b/packages/material-ui-lab/src/Slider/Slider.js
@@ -122,7 +122,7 @@ export const styles = theme => {
         height: 17,
       },
     },
-    /* Class applied to the thumb element if custom thumb icon provided` . */
+    /* Class applied to the thumb element if custom thumb icon provided. */
     thumbIconWrapper: {
       backgroundColor: 'transparent',
       width: 17,
@@ -141,7 +141,7 @@ export const styles = theme => {
       height: 'inherit',
       width: 'inherit',
     },
-    /* Class applied to the root element to trigger JSS nested styles if `reverse={true}` . */
+    /* Class applied to the root element to trigger JSS nested styles if `reverse={true}`. */
     reverse: {},
     /* Class applied to the track and thumb elements to trigger JSS nested styles if `disabled`. */
     disabled: {},

From 5f29eb39518b302041f1c1c313118cbfe3eab4d0 Mon Sep 17 00:00:00 2001
From: Matthew Brookes <github@nospam.33m.co>
Date: Sun, 9 Sep 2018 23:32:52 +0100
Subject: [PATCH 16/22] Update API docs

---
 pages/lab/api/slider.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/lab/api/slider.md b/pages/lab/api/slider.md
index 69ce318693866d..7d8d3d4f3f2a3b 100644
--- a/pages/lab/api/slider.md
+++ b/pages/lab/api/slider.md
@@ -49,9 +49,9 @@ This property accepts the following keys:
 | <span class="prop-name">trackBefore</span> | Styles applied to the track element before the thumb.
 | <span class="prop-name">trackAfter</span> | Styles applied to the track element after the thumb.
 | <span class="prop-name">thumb</span> | Styles applied to the thumb element.
-| <span class="prop-name">thumbIconWrapper</span> | Class applied to the thumb element if custom thumb icon provided` .
+| <span class="prop-name">thumbIconWrapper</span> | Class applied to the thumb element if custom thumb icon provided.
 | <span class="prop-name">thumbIcon</span> | 
-| <span class="prop-name">reverse</span> | Class applied to the root element to trigger JSS nested styles if `reverse={true}` .
+| <span class="prop-name">reverse</span> | Class applied to the root element to trigger JSS nested styles if `reverse={true}`.
 | <span class="prop-name">disabled</span> | Class applied to the track and thumb elements to trigger JSS nested styles if `disabled`.
 | <span class="prop-name">jumped</span> | Class applied to the track and thumb elements to trigger JSS nested styles if `jumped`.
 | <span class="prop-name">focused</span> | Class applied to the track and thumb elements to trigger JSS nested styles if `focused`.

From ab55c2996878940d4bc7e191936376deadd2bd89 Mon Sep 17 00:00:00 2001
From: adeelibr <adeelimranr@gmail.com>
Date: Tue, 11 Sep 2018 22:20:07 +0500
Subject: [PATCH 17/22] updated icon

---
 docs/src/pages/lab/slider/CustomIconSlider.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/lab/slider/CustomIconSlider.js b/docs/src/pages/lab/slider/CustomIconSlider.js
index 3909b8d63f8ea9..d629fdd056ada2 100644
--- a/docs/src/pages/lab/slider/CustomIconSlider.js
+++ b/docs/src/pages/lab/slider/CustomIconSlider.js
@@ -3,7 +3,7 @@ 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 StarsIcon from '@material-ui/icons/Gamepad';
+import LensIcon from '@material-ui/icons/Lens';
 
 const styles = {
   root: {
@@ -47,7 +47,7 @@ class CustomIconSlider extends React.Component {
           value={value}
           aria-labelledby="label"
           onChange={this.handleChange}
-          thumb={<StarsIcon style={{ color: '#2196f3' }} />}
+          thumb={<LensIcon style={{ color: '#2196f3' }} />}
         />
       </div>
     );

From 185aa2e71b943fdb4234f3de952ce6f3978efcbc Mon Sep 17 00:00:00 2001
From: adeelibr <adeelimranr@gmail.com>
Date: Tue, 11 Sep 2018 22:48:26 +0500
Subject: [PATCH 18/22] added different id's for different labels

---
 docs/src/pages/lab/slider/CustomIconSlider.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/src/pages/lab/slider/CustomIconSlider.js b/docs/src/pages/lab/slider/CustomIconSlider.js
index d629fdd056ada2..16700b9a670da8 100644
--- a/docs/src/pages/lab/slider/CustomIconSlider.js
+++ b/docs/src/pages/lab/slider/CustomIconSlider.js
@@ -29,10 +29,10 @@ class CustomIconSlider extends React.Component {
 
     return (
       <div className={classes.root}>
-        <Typography id="label">Image thumb</Typography>
+        <Typography id="slider-image">Image thumb</Typography>
         <Slider
           value={value}
-          aria-labelledby="label"
+          aria-labelledby="slider-image"
           onChange={this.handleChange}
           thumb={
             <img
@@ -42,10 +42,10 @@ class CustomIconSlider extends React.Component {
             />
           }
         />
-        <Typography id="label">Icon thumb</Typography>
+        <Typography id="slider-icon">Icon thumb</Typography>
         <Slider
           value={value}
-          aria-labelledby="label"
+          aria-labelledby="slider-icon"
           onChange={this.handleChange}
           thumb={<LensIcon style={{ color: '#2196f3' }} />}
         />

From d19e900bc369c9fa75a4070247e505bdd7eaad23 Mon Sep 17 00:00:00 2001
From: adeelibr <adeelimranr@gmail.com>
Date: Tue, 11 Sep 2018 22:55:52 +0500
Subject: [PATCH 19/22] removed bloated styling

---
 packages/material-ui-lab/src/Slider/Slider.js | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js
index 56768cda403711..b840b86aed72f7 100644
--- a/packages/material-ui-lab/src/Slider/Slider.js
+++ b/packages/material-ui-lab/src/Slider/Slider.js
@@ -125,17 +125,6 @@ export const styles = theme => {
     /* Class applied to the thumb element if custom thumb icon provided. */
     thumbIconWrapper: {
       backgroundColor: 'transparent',
-      width: 17,
-      height: 17,
-      '&$activated': {
-        width: 22,
-        height: 22,
-        transition: 'none',
-      },
-      '&$jumped': {
-        width: 22,
-        height: 22,
-      },
     },
     thumbIcon: {
       height: 'inherit',

From 8e503c42c063bb19eb4a39aefa5645eaf7f8093c Mon Sep 17 00:00:00 2001
From: adeelibr <adeelimranr@gmail.com>
Date: Tue, 11 Sep 2018 23:07:13 +0500
Subject: [PATCH 20/22] removed withIcon variable

---
 packages/material-ui-lab/src/Slider/Slider.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js
index b840b86aed72f7..af761a42787b63 100644
--- a/packages/material-ui-lab/src/Slider/Slider.js
+++ b/packages/material-ui-lab/src/Slider/Slider.js
@@ -437,8 +437,7 @@ class Slider extends React.Component {
     const inlineThumbStyles = { [thumbProperty]: `${percent}%` };
 
     /** Start Thumb Icon Logic Here */
-    const withIcon = !!thumbIcon;
-    const ThumbIcon = withIcon
+    const ThumbIcon = thumbIcon
       ? React.cloneElement(thumbIcon, {
           ...thumbIcon.props,
           className: classNames(thumbIcon.props.className, classes.thumbIcon),
@@ -449,7 +448,7 @@ class Slider extends React.Component {
     const thumbClasses = classNames(
       classes.thumb,
       {
-        [classes.thumbIconWrapper]: withIcon,
+        [classes.thumbIconWrapper]: !!thumbIcon,
       },
       commonClasses,
     );

From 7a92eaaa6821c1e5ffd4ef49433f1e596eb85ab0 Mon Sep 17 00:00:00 2001
From: adeelibr <adeelimranr@gmail.com>
Date: Tue, 11 Sep 2018 23:11:33 +0500
Subject: [PATCH 21/22] removed redundant git status

---
 packages/material-ui-lab/src/Slider/Slider.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js
index af761a42787b63..a9b3d76dc239d1 100644
--- a/packages/material-ui-lab/src/Slider/Slider.js
+++ b/packages/material-ui-lab/src/Slider/Slider.js
@@ -448,7 +448,7 @@ class Slider extends React.Component {
     const thumbClasses = classNames(
       classes.thumb,
       {
-        [classes.thumbIconWrapper]: !!thumbIcon,
+        [classes.thumbIconWrapper]: thumbIcon,
       },
       commonClasses,
     );

From 507e0e2f170799d6b3a20371bd367cc22a772150 Mon Sep 17 00:00:00 2001
From: adeelibr <adeelimranr@gmail.com>
Date: Wed, 12 Sep 2018 21:33:17 +0500
Subject: [PATCH 22/22] demo revamped

---
 docs/src/pages/lab/slider/CustomIconSlider.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/docs/src/pages/lab/slider/CustomIconSlider.js b/docs/src/pages/lab/slider/CustomIconSlider.js
index 16700b9a670da8..faff39e7e32d4b 100644
--- a/docs/src/pages/lab/slider/CustomIconSlider.js
+++ b/docs/src/pages/lab/slider/CustomIconSlider.js
@@ -3,7 +3,7 @@ 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 LensIcon from '@material-ui/icons/Lens';
+import LensIcon from '@material-ui/icons/LensOutlined';
 
 const styles = {
   root: {
@@ -12,6 +12,9 @@ const styles = {
   thumbIcon: {
     borderRadius: '50%',
   },
+  thumbIconWrapper: {
+    backgroundColor: '#fff',
+  },
 };
 
 class CustomIconSlider extends React.Component {
@@ -47,6 +50,9 @@ class CustomIconSlider extends React.Component {
           value={value}
           aria-labelledby="slider-icon"
           onChange={this.handleChange}
+          classes={{
+            thumbIconWrapper: classes.thumbIconWrapper,
+          }}
           thumb={<LensIcon style={{ color: '#2196f3' }} />}
         />
       </div>