Slider - mergestyle conversion

common/changes/office-ui-fabric-react/slider_2018-06-28-22-22.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Convert Slider to merge-styles",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "kchau@microsoft.com"
+}

packages/office-ui-fabric-react/src/components/Slider/Slider.base.tsx

@@ -1,9 +1,17 @@
 import * as React from 'react';
-import { BaseComponent, KeyCodes, css, getId, getRTL, getRTLSafeKeyCode, createRef } from '../../Utilities';
-import { ISliderProps, ISlider } from './Slider.types';
+import {
+  BaseComponent,
+  KeyCodes,
+  css,
+  getId,
+  getRTL,
+  getRTLSafeKeyCode,
+  createRef,
+  customizable
+} from '../../Utilities';
+import { ISliderProps, ISlider, ISliderStyleProps, ISliderStyles } from './Slider.types';
+import { classNamesFunction } from '../../Utilities';
 import { Label } from '../../Label';
-import * as stylesImport from './Slider.scss';
-const styles: any = stylesImport;
 
 export interface ISliderState {
   value?: number;
@@ -18,6 +26,8 @@ export enum ValuePosition {
   Next = 1
 }
 
+const getClassNames = classNamesFunction<ISliderStyleProps, ISliderStyles>();
+@customizable('Label', ['theme', 'styles'])
 export class SliderBase extends BaseComponent<ISliderProps, ISliderState> implements ISlider {
   public static defaultProps: ISliderProps = {
     step: 1,
@@ -65,29 +75,44 @@ export class SliderBase extends BaseComponent<ISliderProps, ISliderState> implem
   }
 
   public render(): React.ReactElement<{}> {
-    const { ariaLabel, className, disabled, label, max, min, showValue, buttonProps, vertical } = this.props;
+    const {
+      ariaLabel,
+      className,
+      disabled,
+      label,
+      max,
+      min,
+      showValue,
+      buttonProps,
+      vertical,
+      styles,
+      theme
+    } = this.props;
     const { value, renderedValue } = this.state;
     const thumbOffsetPercent: number = ((renderedValue! - min!) / (max! - min!)) * 100;
     const lengthString = vertical ? 'height' : 'width';
     const onMouseDownProp: {} = disabled ? {} : { onMouseDown: this._onMouseDownOrTouchStart };
     const onTouchStartProp: {} = disabled ? {} : { onTouchStart: this._onMouseDownOrTouchStart };
     const onKeyDownProp: {} = disabled ? {} : { onKeyDown: this._onKeyDown };
+    const classNames = getClassNames(styles, {
+      className,
+      rootIsDisabled: disabled,
+      rootIsEnabled: !disabled,
+      rootIsVertical: vertical,
+      rootIsHorizontal: !vertical,
+      showTransitions: renderedValue === value,
+      showValue,
+      theme: theme!
+    });
 
     return (
-      <div
-        className={css('ms-Slider', styles.root, className, {
-          ['ms-Slider-enabled ' + styles.rootIsEnabled]: !disabled,
-          ['ms-Slider-disabled ' + styles.rootIsDisabled]: disabled,
-          ['ms-Slider-row ' + styles.rootIsHorizontal]: !vertical,
-          ['ms-Slider-column ' + styles.rootIsVertical]: vertical
-        })}
-      >
+      <div className={classNames.root}>
         {label && (
-          <Label className={styles.titleLabel} {...(ariaLabel ? {} : { htmlFor: this._id })}>
+          <Label className={classNames.titleLabel} {...(ariaLabel ? {} : { htmlFor: this._id })}>
             {label}
           </Label>
         )}
-        <div className={css('ms-Slider-container', styles.container)}>
+        <div className={classNames.container}>
           <button
             aria-valuenow={value}
             aria-valuemin={min}
@@ -98,35 +123,29 @@ export class SliderBase extends BaseComponent<ISliderProps, ISliderState> implem
             {...onTouchStartProp}
             {...onKeyDownProp}
             {...buttonProps}
-            className={css(
-              'ms-Slider-slideBox',
-              styles.slideBox,
-              buttonProps!.className,
-              !!showValue && 'ms-Slider-showValue',
-              renderedValue === value && 'ms-Slider-showTransitions ' + styles.showTransitions
-            )}
+            className={css(classNames.slideBox, buttonProps!.className)}
             id={this._id}
             disabled={disabled}
             type="button"
             role="slider"
           >
-            <div ref={this._sliderLine} className={css('ms-Slider-line', styles.line)}>
+            <div ref={this._sliderLine} className={classNames.line}>
               <span
                 ref={this._thumb}
-                className={css('ms-Slider-thumb', styles.thumb)}
+                className={classNames.thumb}
                 style={this._getThumbStyle(vertical, thumbOffsetPercent)}
               />
               <span
-                className={css('ms-Slider-active', styles.lineContainer, styles.activeSection)}
+                className={css(classNames.lineContainer, classNames.activeSection)}
                 style={{ [lengthString]: thumbOffsetPercent + '%' }}
               />
               <span
-                className={css('ms-Slider-inactive', styles.lineContainer, styles.inactiveSection)}
+                className={css(classNames.lineContainer, classNames.inactiveSection)}
                 style={{ [lengthString]: 100 - thumbOffsetPercent + '%' }}
               />
             </div>
           </button>
-          {showValue && <Label className={css('ms-Slider-value', styles.valueLabel)}>{value}</Label>}
+          {showValue && <Label className={classNames.valueLabel}>{value}</Label>}
         </div>
       </div>
     ) as React.ReactElement<{}>;