ProgressIndicator: convert to mergeStyles - part 1

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

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import {
+  BaseComponent,
+  css
+} from '../../Utilities';
+import { IProgressIndicatorProps } from './ProgressIndicator.types';
+import * as stylesImport from './ProgressIndicator.scss';
+const styles: any = stylesImport;
+
+// if the percentComplete is near 0, don't animate it.
+// This prevents animations on reset to 0 scenarios
+const ZERO_THRESHOLD = 0.01;
+
+export class ProgressIndicatorBase extends BaseComponent<IProgressIndicatorProps, {}> {
+  public static defaultProps = {
+    label: '',
+    description: '',
+    width: 180
+  };
+
+  constructor(props: IProgressIndicatorProps) {
+    super(props);
+
+    this._warnDeprecations({
+      title: 'label'
+    });
+
+  }
+
+  public render() {
+    const { title, description, className, ariaValueText } = this.props;
+    let { label, percentComplete } = this.props;
+
+    // Handle deprecated value.
+    if (title) {
+      label = title;
+    }
+
+    if (this.props.percentComplete !== undefined) {
+      percentComplete = Math.min(100, Math.max(0, percentComplete! * 100));
+    }
+
+    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={ css(
+              'ms-ProgressIndicator-progressBar',
+              styles.progressBar,
+              percentComplete && percentComplete > ZERO_THRESHOLD && 'smoothTransition',
+              percentComplete === undefined && styles.indeterminate
+            ) }
+            style={ percentComplete !== undefined ? { width: percentComplete + '%' } : undefined }
+            role='progressbar'
+            aria-valuemin={ 0 }
+            aria-valuemax={ 100 }
+            aria-valuenow={ percentComplete }
+            aria-valuetext={ ariaValueText }
+          />
+        </div>
+        <div className={ css('ms-ProgressIndicator-itemDescription', styles.itemDescription) }>{ description }</div>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,48 @@
+import { IStyle, keyframes } from '../../Styling';
+import { IProgressIndicatorStyleProps, IProgressIndicatorStyles } from './ProgressIndicator.types';
+
+export const getStyles = (
+  props: IProgressIndicatorStyleProps
+): IProgressIndicatorStyles => {
+  const {
+    className,
+    theme,
+    indeterminate,
+    smoothTransition,
+  } = props;
+
+  const { palette, semanticColors } = theme;
+
+  return ({
+    root: [
+      'ms-ProgressIndicator',
+      {},
+      className
+    ],
+
+    itemName: [
+      'ms-ProgressIndicator-itemName',
+      {}
+    ],
+
+    itemDescription: [
+      'ms-ProgressIndicator-itemDescription',
+      {}
+    ],
+
+    itemProgress: [
+      'ms-ProgressIndicator-itemProgress',
+      {}
+    ],
+
+    progressTrack: [
+      'ms-ProgressIndicator-progressTrack',
+      {}
+    ],
+
+    progressBar: [
+      'ms-ProgressIndicator-progressBar',
+      {},
+    ],
+  });
+};

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

@@ -1,70 +1,16 @@
-/* tslint:disable:no-unused-variable */
-import * as React from 'react';
-/* tslint:enable:no-unused-variable */
-
+import { styled } from '../../Utilities';
 import {
-  BaseComponent,
-  css
-} from '../../Utilities';
-import { IProgressIndicatorProps } from './ProgressIndicator.types';
-import * as stylesImport from './ProgressIndicator.scss';
-const styles: any = stylesImport;
-
-// if the percentComplete is near 0, don't animate it.
-// This prevents animations on reset to 0 scenarios
-const ZERO_THRESHOLD = 0.01;
-
-export class ProgressIndicator extends BaseComponent<IProgressIndicatorProps, {}> {
-  public static defaultProps = {
-    label: '',
-    description: '',
-    width: 180
-  };
-
-  constructor(props: IProgressIndicatorProps) {
-    super(props);
-
-    this._warnDeprecations({
-      title: 'label'
-    });
-
-  }
-
-  public render() {
-    const { title, description, className, ariaValueText } = this.props;
-    let { label, percentComplete } = this.props;
-
-    // Handle deprecated value.
-    if (title) {
-      label = title;
-    }
-
-    if (this.props.percentComplete !== undefined) {
-      percentComplete = Math.min(100, Math.max(0, percentComplete! * 100));
-    }
-
-    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={ css(
-              'ms-ProgressIndicator-progressBar',
-              styles.progressBar,
-              percentComplete && percentComplete > ZERO_THRESHOLD && 'smoothTransition',
-              percentComplete === undefined && styles.indeterminate
-            ) }
-            style={ percentComplete !== undefined ? { width: percentComplete + '%' } : undefined }
-            role='progressbar'
-            aria-valuemin={ 0 }
-            aria-valuemax={ 100 }
-            aria-valuenow={ percentComplete }
-            aria-valuetext={ ariaValueText }
-          />
-        </div>
-        <div className={ css('ms-ProgressIndicator-itemDescription', styles.itemDescription) }>{ description }</div>
-      </div>
-    );
-  }
-}
+  IProgressIndicatorProps,
+  IProgressIndicatorStyleProps,
+  IProgressIndicatorStyles
+} from './ProgressIndicator.types';
+import { ProgressIndicatorBase } from './ProgressIndicator.base';
+import { getStyles } from './ProgressIndicator.styles';
+
+/**
+* ProgressIndicator description
+*/
+export const ProgressIndicator = styled<IProgressIndicatorProps, IProgressIndicatorStyleProps, IProgressIndicatorStyles>(
+  ProgressIndicatorBase,
+  getStyles
+);

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

@@ -1,16 +1,31 @@
-export interface IProgressIndicator {
+import * as React from 'react';
+import { ProgressIndicatorBase } from './ProgressIndicator.base';
+import { IStyle, ITheme } from '../../Styling';
+import { IStyleFunction } from '../../Utilities';
 
+export interface IProgressIndicator {
+  focus: () => void;
 }
 
-export interface IProgressIndicatorProps {
+export interface IProgressIndicatorProps extends React.Props<ProgressIndicatorBase> {
+  /**
+   * Gets the component ref.
+   */
+  componentRef?: (component: IProgressIndicatorProps | null) => void;
+
   /**
-   * Optional callback to access the IProgressIndicator interface. Use this instead of ref for accessing
-   * the public methods and properties of the component.
+   * Call to provide customized styling that will layer on top of the variant rules.
    */
-  componentRef?: (component: IProgressIndicator | null) => void;
+  getStyles?: IStyleFunction<IProgressIndicatorStyleProps, IProgressIndicatorStyles>;
 
   /**
-   * Class name to apply to the root in addition to ms-ProgressIndicator.
+   * Theme provided by High-Order Component.
+   */
+  theme?: ITheme;
+
+  /**
+   * Additional css class to apply to the ProgressIndicator
+   * @defaultvalue undefined
    */
   className?: string;
 
@@ -40,3 +55,29 @@ export interface IProgressIndicatorProps {
    */
   title?: string;
 }
+
+export interface IProgressIndicatorStyleProps {
+  /**
+   * Theme provided by High-Order Component.
+   */
+  theme: ITheme;
+
+  /**
+   * Accept custom classNames
+   */
+  className?: string;
+  indeterminate?: boolean;
+  smoothTransition?: boolean;
+}
+
+export interface IProgressIndicatorStyles {
+  /**
+   * Style for the root element.
+   */
+  root: IStyle;
+  itemName: IStyle;
+  itemDescription: IStyle;
+  itemProgress: IStyle;
+  progressTrack: IStyle;
+  progressBar: IStyle;
+}

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

@@ -1,2 +1,3 @@
 export * from './ProgressIndicator';
+export * from './ProgressIndicator.base';
 export * from './ProgressIndicator.types';