ProgressIndicator: Finish conversion to mergeStyles (#4595)

* Scaffold styles file

* Split to base file.

* Scaffold types file.

* Export base

* Add `animation` to `IRawStyleBase`

* Convert sass to js. Add barHeight prop.

* Use classNames instead of scss in base

* Delete sass file

* let styles default barHeight

* Fix RTL keyframes

* changes

* Update snapshots

* Fix more conflicts

* Switch to private _classNames set in constructor to prevent tag spam

* Remove smoothTransition style prop

* Remove unused variables

* Update snapshot

* simplify

* Fix classNames being called with keyframes.

* update snapshot

common/changes/@uifabric/merge-styles/mergeStyles-ProgressIndicator-part2_2018-04-18-01-05.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/merge-styles",
+      "comment": "Add `animation` to `IRawStyleBase` for use in style sets.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/merge-styles",
+  "email": "v-jojanz@microsoft.com"
+}

common/changes/office-ui-fabric-react/mergeStyles-ProgressIndicator-part2_2018-04-18-01-05.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Complete ProgressIndicator conversion to mergeStyles. Add `barHeight` to enable changing height of progress bar.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "v-jojanz@microsoft.com"
+}

packages/merge-styles/src/IRawStyleBase.ts

@@ -213,6 +213,14 @@ export interface IRawStyleBase extends IRawFontStyle {
    */
   alignmentBaseline?: ICSSRule | string;
 
+  /**
+   * The animation CSS property is a shorthand property for the various animation properties:
+   * `animation-name`, `animation-duration`, `animation-timing-function`, `animation-delay`,
+   * `animation-iteration-count`, `animation-direction`, `animation-fill-mode`, and
+   * `animation-play-state`.
+   */
+  animation?: ICSSRule | string;
+
   /**
    * Defines a length of time to elapse before an animation starts, allowing an animation to begin execution some time after it is applied.
    */

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

@@ -1,16 +1,26 @@
 import * as React from 'react';
 import {
   BaseComponent,
-  css
+  classNamesFunction,
+  customizable,
 } from '../../Utilities';
-import { IProgressIndicatorProps } from './ProgressIndicator.types';
-import * as stylesImport from './ProgressIndicator.scss';
-const styles: any = stylesImport;
+import {
+  IProgressIndicatorProps,
+  IProgressIndicatorStyleProps,
+  IProgressIndicatorStyles,
+} from './ProgressIndicator.types';
+
+const getClassNames = classNamesFunction<IProgressIndicatorStyleProps, IProgressIndicatorStyles>();
 
 // if the percentComplete is near 0, don't animate it.
 // This prevents animations on reset to 0 scenarios
 const ZERO_THRESHOLD = 0.01;
 
+/**
+* ProgressIndicator with no default styles.
+* [Use the `getStyles` API to add your own styles.](https://github.com/OfficeDev/office-ui-fabric-react/wiki/Styling)
+*/
+@customizable('ProgressIndicator', ['theme'])
 export class ProgressIndicatorBase extends BaseComponent<IProgressIndicatorProps, {}> {
   public static defaultProps = {
     label: '',
@@ -24,13 +34,28 @@ export class ProgressIndicatorBase extends BaseComponent<IProgressIndicatorProps
     this._warnDeprecations({
       title: 'label'
     });
-
   }
 
   public render() {
-    const { title, description, className, ariaValueText } = this.props;
+    const {
+      ariaValueText,
+      barHeight,
+      className,
+      description,
+      getStyles,
+      theme,
+      title,
+    } = this.props;
+
     let { label, percentComplete } = this.props;
 
+    const classNames = getClassNames(getStyles, {
+      theme: theme!,
+      className,
+      barHeight,
+      indeterminate: percentComplete === undefined ? true : false,
+    });
+
     // Handle deprecated value.
     if (title) {
       label = title;
@@ -40,27 +65,27 @@ export class ProgressIndicatorBase extends BaseComponent<IProgressIndicatorProps
       percentComplete = Math.min(100, Math.max(0, percentComplete! * 100));
     }
 
+    const progressBarStyles = {
+      width: percentComplete !== undefined ? percentComplete + '%' : undefined,
+      transition: (percentComplete !== undefined && percentComplete < ZERO_THRESHOLD) ? 'none' : undefined,
+    };
+
     return (
-      <div className={ css('ms-ProgressIndicator', styles.root, className) }>
-        <div className={ css('ms-ProgressIndicator-itemName', styles.itemName) }>{ label }</div>
-        <div className={ css('ms-ProgressIndicator-itemProgress', styles.itemProgress) }>
-          <div className={ css('ms-ProgressIndicator-progressTrack', styles.progressTrack) } />
+      <div className={ classNames.root }>
+        <div className={ classNames.itemName }>{ label }</div>
+        <div className={ classNames.itemProgress }>
+          <div className={ classNames.progressTrack } />
           <div
-            className={ css(
-              'ms-ProgressIndicator-progressBar',
-              styles.progressBar,
-              percentComplete && percentComplete > ZERO_THRESHOLD && 'smoothTransition',
-              percentComplete === undefined && styles.indeterminate
-            ) }
-            style={ percentComplete !== undefined ? { width: percentComplete + '%' } : undefined }
+            className={ classNames.progressBar }
+            style={ progressBarStyles }
             role='progressbar'
             aria-valuemin={ 0 }
             aria-valuemax={ 100 }
-            aria-valuenow={ percentComplete }
+            aria-valuenow={ Math.floor(percentComplete!) }
             aria-valuetext={ ariaValueText }
           />
         </div>
-        <div className={ css('ms-ProgressIndicator-itemDescription', styles.itemDescription) }>{ description }</div>
+        <div className={ classNames.itemDescription }>{ description }</div>
       </div>
     );
   }

packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts

@@ -1,40 +1,131 @@
-import { IProgressIndicatorStyleProps, IProgressIndicatorStyles } from './ProgressIndicator.types';
+import {
+  FontSizes,
+  FontWeights,
+  HighContrastSelector,
+  keyframes,
+  noWrap,
+} from '../../Styling';
+import { getRTL } from '../../Utilities';
+import {
+  IProgressIndicatorStyleProps,
+  IProgressIndicatorStyles,
+} from './ProgressIndicator.types';
+
+const IndeterminateProgress = keyframes({
+  '0%': {
+    left: '-30%',
+  },
+  '100%': {
+    left: '100%',
+  }
+});
+const IndeterminateProgressRTL = keyframes({
+  '100%': {
+    right: '-30%',
+  },
+  '0%': {
+    right: '100%',
+  }
+});
 
 export const getStyles = (
   props: IProgressIndicatorStyleProps
 ): IProgressIndicatorStyles => {
-  const { className } = props;
+  const isRTL = getRTL();
+  const {
+    className,
+    indeterminate,
+    theme,
+    barHeight = 2,
+  } = props;
+
+  const { palette, semanticColors } = theme;
+
+  const marginBetweenText = 8;
+  const textHeight = 18;
 
   return ({
     root: [
       'ms-ProgressIndicator',
-      {},
+      {
+        fontWeight: FontWeights.regular,
+      },
       className
     ],
 
     itemName: [
       'ms-ProgressIndicator-itemName',
-      {}
+      noWrap,
+      {
+        color: semanticColors.bodyText,
+        fontSize: FontSizes.medium,
+        paddingTop: marginBetweenText / 2,
+        lineHeight: textHeight + 2,
+      }
     ],
 
     itemDescription: [
       'ms-ProgressIndicator-itemDescription',
-      {}
+      {
+        color: semanticColors.bodySubtext,
+        fontSize: FontSizes.xSmall,
+        lineHeight: textHeight,
+      }
     ],
 
     itemProgress: [
       'ms-ProgressIndicator-itemProgress',
-      {}
+      {
+        position: 'relative',
+        overflow: 'hidden',
+        height: barHeight,
+        padding: `${marginBetweenText}px 0`,
+      }
     ],
 
     progressTrack: [
       'ms-ProgressIndicator-progressTrack',
-      {}
+      {
+        position: 'absolute',
+        width: '100%',
+        height: barHeight,
+        backgroundColor: palette.neutralLight,
+
+        selectors: {
+          [HighContrastSelector]: {
+            borderBottom: '1px solid WindowText',
+          }
+        }
+      }
     ],
 
     progressBar: [
       'ms-ProgressIndicator-progressBar',
-      {},
+      {
+        backgroundColor: palette.themePrimary,
+        height: barHeight,
+        position: 'absolute',
+        transition: 'width .3s ease',
+        width: 0,
+
+        selectors: {
+          [HighContrastSelector]: {
+            backgroundColor: 'WindowText',
+          }
+        }
+      },
+      !indeterminate && {
+        transition: 'width .15s linear'
+      },
+      indeterminate && [
+        {
+          position: 'absolute',
+          minWidth: '33%',
+          background: `linear-gradient(to right, transparent 0%, ${palette.themePrimary} 50%, transparent 100%)`,
+          animation: `${IndeterminateProgress} 3s infinite`,
+        },
+        isRTL && { animation: `${IndeterminateProgressRTL} 3s infinite` },
+      ],
     ],
   });
 };

packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts

@@ -54,6 +54,12 @@ export interface IProgressIndicatorProps extends React.Props<ProgressIndicatorBa
    * @deprecated
    */
   title?: string;
+
+  /**
+   * Height of the ProgressIndicator
+   * @default 2
+   */
+  barHeight?: number;
 }
 
 export interface IProgressIndicatorStyleProps {
@@ -67,7 +73,7 @@ export interface IProgressIndicatorStyleProps {
    */
   className?: string;
   indeterminate?: boolean;
-  smoothTransition?: boolean;
+  barHeight?: number;
 }
 
 export interface IProgressIndicatorStyles {