[Slider] Remove visual zero state from thumb (#12242)

* [Slider]: Remove visual zero state from thumb

The spec does not show any visual difference between thumbs at zero and
non-zero values. Zero values now allow different thumb colors depending
on state (i.e. enabled sliders appeared to be disabled).

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

@@ -28,7 +28,6 @@ export type SliderClassKey =
   | 'focused'
   | 'activated'
   | 'disabled'
-  | 'zero'
   | 'vertical'
   | 'reverse'
   | 'jumped';

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

@@ -114,18 +114,6 @@ export const styles = theme => {
         height: 9,
         backgroundColor: colors.disabled,
       },
-      '&$zero': {
-        border: `2px solid ${colors.disabled}`,
-        backgroundColor: 'transparent',
-      },
-      '&$focused$zero': {
-        border: `2px solid ${colors.primary}`,
-        backgroundColor: fade(colors.primary, 0.34),
-        boxShadow: `0px 0px 0px 9px ${fade(colors.primary, 0.34)}`,
-      },
-      '&$activated$zero': {
-        border: `2px solid ${colors.primary}`,
-      },
       '&$jumped': {
         width: 17,
         height: 17,
@@ -143,8 +131,6 @@ export const styles = theme => {
     activated: {},
     /* Class applied to the root, track and container to trigger JSS nested styles if `vertical`. */
     vertical: {},
-    /* Class applied to the thumb to trigger nested styles if `value` = `min` . */
-    zero: {},
   };
 };
 
@@ -440,9 +426,7 @@ class Slider extends React.Component {
       [classes.vertical]: vertical,
     });
 
-    const thumbClasses = classNames(classes.thumb, commonClasses, {
-      [classes.zero]: percent === 0,
-    });
+    const thumbClasses = classNames(classes.thumb, commonClasses);
 
     const trackProperty = vertical ? 'height' : 'width';
     const thumbProperty = vertical ? 'top' : 'left';

pages/lab/api/slider.md

@@ -50,7 +50,6 @@ This property accepts the following keys:
 | <span class="prop-name">focused</span> | Class applied to the track and thumb elements to trigger JSS nested styles if `focused`.
 | <span class="prop-name">activated</span> | Class applied to the track and thumb elements to trigger JSS nested styles if `activated`.
 | <span class="prop-name">vertical</span> | Class applied to the root, track and container to trigger JSS nested styles if `vertical`.
-| <span class="prop-name">zero</span> | Class applied to the thumb to trigger nested styles if `value` = `min` .
 
 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-lab/src/Slider/Slider.js)