[Slider] Add color prop

It seems that color secondary is supposed to be the default: https://material.io/components/sliders/#theming. At least, people can easily switch.
mui · Sep 4, 2019 · bfaf3c3 · bfaf3c3
1 parent c5e45cd
commit bfaf3c3
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 3 deletions.
diff --git a/docs/pages/api/slider.md b/docs/pages/api/slider.md
@@ -28,6 +28,7 @@ You can learn more about the difference by [reading our guide](/guides/minimizin
 | <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. See [CSS API](#css) below for more details. |
+| <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 DOM element or a component. |
 | <span class="prop-name">defaultValue</span> | <span class="prop-type">number<br>&#124;&nbsp;Array<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. |
@@ -59,12 +60,16 @@ Any other props supplied will be provided to the root element (native element).
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">MuiSlider-root</span> | Styles applied to the root element.
+| <span class="prop-name">colorPrimary</span> | <span class="prop-name">MuiSlider-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
+| <span class="prop-name">colorSecondary</span> | <span class="prop-name">MuiSlider-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
 | <span class="prop-name">marked</span> | <span class="prop-name">MuiSlider-marked</span> | Styles applied to the root element if `marks` is provided with at least one label.
 | <span class="prop-name">vertical</span> | <span class="prop-name">MuiSlider-vertical</span> | Pseudo-class applied to the root element if `orientation="vertical"`.
 | <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
 | <span class="prop-name">rail</span> | <span class="prop-name">MuiSlider-rail</span> | Styles applied to the rail element.
 | <span class="prop-name">track</span> | <span class="prop-name">MuiSlider-track</span> | Styles applied to the track element.
 | <span class="prop-name">thumb</span> | <span class="prop-name">MuiSlider-thumb</span> | Styles applied to the thumb element.
+| <span class="prop-name">thumbColorPrimary</span> | <span class="prop-name">MuiSlider-thumbColorPrimary</span> | Styles applied to the thumb element if `color="primary"`.
+| <span class="prop-name">thumbColorSecondary</span> | <span class="prop-name">MuiSlider-thumbColorSecondary</span> | Styles applied to the thumb element if `color="secondary"`.
 | <span class="prop-name">active</span> | <span class="prop-name">MuiSlider-active</span> | Pseudo-class applied to the thumb element if it's active.
 | <span class="prop-name">focusVisible</span> | <span class="prop-name">Mui-focusVisible</span> | Pseudo-class applied to the thumb element if keyboard focused.
 | <span class="prop-name">valueLabel</span> | <span class="prop-name">MuiSlider-valueLabel</span> | Styles applied to the thumb label element.

diff --git a/packages/material-ui/src/Slider/Slider.d.ts b/packages/material-ui/src/Slider/Slider.d.ts
@@ -21,6 +21,7 @@ export interface SliderProps
   'aria-label'?: string;
   'aria-labelledby'?: string;
   'aria-valuetext'?: string;
+  color?: 'primary' | 'secondary';
   component?: React.ElementType<React.HTMLAttributes<HTMLSpanElement>>;
   defaultValue?: number | number[];
   disabled?: boolean;
@@ -43,13 +44,17 @@ export interface SliderProps
 
 export type SliderClassKey =
   | 'root'
+  | 'colorPrimary'
+  | 'colorSecondary'
   | 'marked'
   | 'vertical'
   | 'rtl'
   | 'disabled'
   | 'rail'
   | 'track'
   | 'thumb'
+  | 'thumbColorPrimary'
+  | 'thumbColorSecondary'
   | 'valueLabel'
   | 'mark'
   | 'markActive'

diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js
@@ -4,10 +4,11 @@ import clsx from 'clsx';
 import { chainPropTypes } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import useTheme from '../styles/useTheme';
-import { fade, lighten } from '../styles/colorManipulator';
+import { fade } from '../styles/colorManipulator';
 import { useIsFocusVisible } from '../utils/focusVisible';
 import useEventCallback from '../utils/useEventCallback';
 import { useForkRef } from '../utils/reactHelpers';
+import { capitalize } from '../utils/helpers';
 import ValueLabel from './ValueLabel';
 
 function asc(a, b) {
@@ -153,6 +154,14 @@ export const styles = theme => ({
       padding: '0 11px',
     },
   },
+  /* Styles applied to the root element if `color="primary"`. */
+  colorPrimary: {
+    // TODO v5, move the style here
+  },
+  /* Styles applied to the root element if `color="secondary"`. */
+  colorSecondary: {
+    color: theme.palette.secondary.main,
+  },
   /* Styles applied to the root element if `marks` is provided with at least one label. */
   marked: {
     marginBottom: 20,
@@ -235,6 +244,19 @@ export const styles = theme => ({
       marginBottom: -4,
     },
   },
+  /* Styles applied to the thumb element if `color="primary"`. */
+  thumbColorPrimary: {
+    // TODO v5, move the style here
+  },
+  /* Styles applied to the thumb element if `color="secondary"`. */
+  thumbColorSecondary: {
+    '&$focusVisible,&:hover': {
+      boxShadow: `0px 0px 0px 8px ${fade(theme.palette.secondary.main, 0.16)}`,
+    },
+    '&$active': {
+      boxShadow: `0px 0px 0px 14px ${fade(theme.palette.secondary.main, 0.16)}`,
+    },
+  },
   /* Pseudo-class applied to the thumb element if it's active. */
   active: {},
   /* Pseudo-class applied to the thumb element if keyboard focused. */
@@ -251,7 +273,8 @@ export const styles = theme => ({
   },
   /* Styles applied to the mark element if active (depending on the value). */
   markActive: {
-    backgroundColor: lighten(theme.palette.primary.main, 0.76),
+    backgroundColor: theme.palette.background.paper,
+    opacity: 0.8,
   },
   /* Styles applied to the mark label element. */
   markLabel: {
@@ -280,6 +303,7 @@ const Slider = React.forwardRef(function Slider(props, ref) {
     'aria-valuetext': ariaValuetext,
     classes,
     className,
+    color = 'primary',
     component: Component = 'span',
     defaultValue,
     disabled = false,
@@ -632,6 +656,7 @@ const Slider = React.forwardRef(function Slider(props, ref) {
       ref={handleRef}
       className={clsx(
         classes.root,
+        classes[`color${capitalize(color)}`],
         {
           [classes.disabled]: disabled,
           [classes.marked]: marks.length > 0 && marks.some(mark => mark.label),
@@ -688,7 +713,7 @@ const Slider = React.forwardRef(function Slider(props, ref) {
             disabled={disabled}
           >
             <ThumbComponent
-              className={clsx(classes.thumb, {
+              className={clsx(classes.thumb, classes[`thumbColor${capitalize(color)}`], {
                 [classes.active]: active === index,
                 [classes.focusVisible]: focusVisible === index,
               })}
@@ -758,6 +783,10 @@ Slider.propTypes = {
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color: PropTypes.oneOf(['primary', 'secondary']),
   /**
    * The component used for the root node.
    * Either a string to use a DOM element or a component.