[Slider] Replace reversed with rtl support on horizontal sliders (mui#12972)

* [Slider] Replace reversed with rtl support on horizontal sliders

This follows WAI-ARIA slider authoring practices as well as the
material design specs. The vertical slider is kept regardless.

* [docs] Remove obsolete reverse slider section

Author: eps1lon

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

@@ -26,7 +26,6 @@ class VerticalSlider extends React.Component {
     return (
       <div className={classes.root}>
         <Slider value={value} onChange={this.handleChange} vertical />
-        <Slider value={value} onChange={this.handleChange} vertical reverse />
       </div>
     );
   }

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

@@ -35,10 +35,6 @@ Sliders reflect the current state of the settings they control.
 
 {{"demo": "pages/lab/slider/VerticalSlider.js"}}
 
-## Reverse slider
-
-{{"demo": "pages/lab/slider/ReverseSlider.js"}}
-
 ## Custom thumb
 
 {{"demo": "pages/lab/slider/CustomIconSlider.js"}}

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

@@ -7,7 +7,6 @@ import { TransitionHandlerProps } from '@material-ui/core/transitions/transition
 export interface SliderProps
   extends StandardProps<React.HTMLAttributes<HTMLDivElement>, SliderClassKey, 'onChange'> {
   disabled?: boolean;
-  reverse?: boolean;
   vertical?: boolean;
   max?: number;
   min?: number;
@@ -29,7 +28,6 @@ export type SliderClassKey =
   | 'activated'
   | 'disabled'
   | 'vertical'
-  | 'reverse'
   | 'jumped';
 
 declare const Slider: React.ComponentType<SliderProps>;

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

@@ -15,7 +15,7 @@ export const styles = theme => {
   };
 
   const commonTransitions = theme.transitions.create(
-    ['width', 'height', 'left', 'top', 'box-shadow'],
+    ['width', 'height', 'left', 'right', 'top', 'box-shadow'],
     commonTransitionsOptions,
   );
   // no transition on the position
@@ -44,12 +44,6 @@ export const styles = theme => {
         height: '100%',
         padding: '8px 16px',
       },
-      '&$reverse': {
-        transform: 'scaleX(-1)',
-      },
-      '&$vertical$reverse': {
-        transform: 'scaleY(-1)',
-      },
     },
     /* Styles applied to the container element. */
     container: {
@@ -130,8 +124,6 @@ export const styles = theme => {
       height: 'inherit',
       width: 'inherit',
     },
-    /* 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: {},
     /* Class applied to the track and thumb elements to trigger JSS nested styles if `jumped`. */
@@ -177,15 +169,15 @@ function getMousePosition(event) {
   };
 }
 
-function calculatePercent(node, event, isVertical, isReverted) {
+function calculatePercent(node, event, isVertical, isRtl) {
   const { width, height } = node.getBoundingClientRect();
   const { top, left } = getOffset(node);
   const { x, y } = getMousePosition(event);
 
   const value = isVertical ? y - top : x - left;
   const onePercent = (isVertical ? height : width) / 100;
 
-  return isReverted ? 100 - clamp(value / onePercent) : clamp(value / onePercent);
+  return isRtl && !isVertical ? 100 - clamp(value / onePercent) : clamp(value / onePercent);
 }
 
 function preventPageScrolling(event) {
@@ -275,8 +267,8 @@ class Slider extends React.Component {
   };
 
   handleClick = event => {
-    const { min, max, vertical, reverse } = this.props;
-    const percent = calculatePercent(this.containerRef, event, vertical, reverse);
+    const { min, max, vertical } = this.props;
+    const percent = calculatePercent(this.containerRef, event, vertical, this.isReverted());
     const value = percentToValue(percent, min, max);
 
     this.emitChange(event, value, () => {
@@ -320,8 +312,8 @@ class Slider extends React.Component {
   };
 
   handleMouseMove = event => {
-    const { min, max, vertical, reverse } = this.props;
-    const percent = calculatePercent(this.containerRef, event, vertical, reverse);
+    const { min, max, vertical } = this.props;
+    const percent = calculatePercent(this.containerRef, event, vertical, this.isReverted());
     const value = percentToValue(percent, min, max);
 
     this.emitChange(event, value);
@@ -383,6 +375,10 @@ class Slider extends React.Component {
     });
   }
 
+  isReverted() {
+    return this.props.theme.direction === 'rtl';
+  }
+
   render() {
     const { currentState } = this.state;
     const {
@@ -396,7 +392,6 @@ class Slider extends React.Component {
       onChange,
       onDragEnd,
       onDragStart,
-      reverse,
       step,
       theme,
       value,
@@ -417,7 +412,6 @@ class Slider extends React.Component {
       classes.root,
       {
         [classes.vertical]: vertical,
-        [classes.reverse]: reverse,
         [classes.disabled]: disabled,
       },
       classNameProp,
@@ -436,7 +430,8 @@ class Slider extends React.Component {
     });
 
     const trackProperty = vertical ? 'height' : 'width';
-    const thumbProperty = vertical ? 'top' : 'left';
+    const horizontalMinimumPosition = theme.direction === 'ltr' ? 'left' : 'right';
+    const thumbProperty = vertical ? 'top' : horizontalMinimumPosition;
     const inlineTrackBeforeStyles = { [trackProperty]: this.calculateTrackBeforeStyles(percent) };
     const inlineTrackAfterStyles = { [trackProperty]: this.calculateTrackAfterStyles(percent) };
     const inlineThumbStyles = { [thumbProperty]: `${percent}%` };
@@ -537,10 +532,6 @@ Slider.propTypes = {
    * Callback function that is fired when the slider has begun to move.
    */
   onDragStart: PropTypes.func,
-  /**
-   * If `true`, the slider will be reversed.
-   */
-  reverse: PropTypes.bool,
   /**
    * The granularity the slider can step through values.
    */

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

@@ -93,23 +93,6 @@ describe('<Slider />', () => {
     });
   });
 
-  describe('prop: reverse', () => {
-    it('should render with the default and reverse classes', () => {
-      const wrapper = shallow(<Slider reverse value={0} />);
-      assert.strictEqual(wrapper.hasClass(classes.root), true);
-      assert.strictEqual(wrapper.hasClass(classes.reverse), true);
-    });
-  });
-
-  describe('props: vertical & reverse', () => {
-    it('should render with the default, reverse and vertical classes', () => {
-      const wrapper = shallow(<Slider reverse vertical value={0} />);
-      assert.strictEqual(wrapper.hasClass(classes.root), true);
-      assert.strictEqual(wrapper.hasClass(classes.reverse), true);
-      assert.strictEqual(wrapper.hasClass(classes.vertical), true);
-    });
-  });
-
   describe('prop: disabled', () => {
     const handleChange = spy();
     let wrapper;

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

@@ -27,7 +27,6 @@ import Slider from '@material-ui/lab/Slider';
 | <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback function that is fired when the slider's value changed. |
 | <span class="prop-name">onDragEnd</span> | <span class="prop-type">func |   | Callback function that is fired when the slide has stopped moving. |
 | <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. |
@@ -51,7 +50,6 @@ This property accepts the following keys:
 | <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">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`.
 | <span class="prop-name">focused</span> | Class applied to the track and thumb elements to trigger JSS nested styles if `focused`.

pages/lab/api/slider.md

@@ -34,13 +34,6 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/lab/slider/VerticalSlider'), 'utf8')
-`,
-        },
-        'pages/lab/slider/ReverseSlider.js': {
-          js: require('docs/src/pages/lab/slider/ReverseSlider').default,
-          raw: preval`
-module.exports = require('fs')
-  .readFileSync(require.resolve('docs/src/pages/lab/slider/ReverseSlider'), 'utf8')
 `,
         },
         'pages/lab/slider/CustomIconSlider.js': {