Add more customization hooks to ProgressIndicator

common/changes/office-ui-fabric-react/progress-indicator_2018-04-16-14-56.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Add more customization hooks to ProgressIndicator",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

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

@@ -38,16 +38,19 @@ export class ProgressIndicatorBase extends BaseComponent<IProgressIndicatorProps
 
   public render() {
     const {
-      ariaValueText,
       barHeight,
       className,
+      label = this.props.title, // Fall back to deprecated value.
       description,
       getStyles,
       theme,
-      title,
+      progressHidden,
+      onRenderProgress = this._onRenderProgress
     } = this.props;
 
-    let { label, percentComplete } = this.props;
+    const percentComplete = typeof this.props.percentComplete === 'number' ?
+      Math.min(100, Math.max(0, this.props.percentComplete * 100)) :
+      undefined;
 
     const classNames = getClassNames(getStyles, {
       theme: theme!,
@@ -56,36 +59,65 @@ export class ProgressIndicatorBase extends BaseComponent<IProgressIndicatorProps
       indeterminate: percentComplete === undefined ? true : false,
     });
 
-    // Handle deprecated value.
-    if (title) {
-      label = title;
-    }
+    return (
+      <div className={ classNames.root }>
+        {
+          label ? (
+            <div className={ classNames.itemName }>{ label }</div>
+          ) : null
+        }
+        {
+          !progressHidden ? onRenderProgress({
+            ...(this.props as IProgressIndicatorProps),
+            percentComplete: percentComplete
+          }, this._onRenderProgress) : null
+        }
+        {
+          description ? (
+            <div className={ classNames.itemDescription }>{ description }</div>
+          ) : null
+        }
+      </div>
+    );
+  }
+
+  private _onRenderProgress = (props: IProgressIndicatorProps): JSX.Element => {
+    const {
+      ariaValueText,
+      barHeight,
+      className,
+      getStyles,
+      theme,
+    } = this.props;
+
+    const percentComplete = typeof this.props.percentComplete === 'number' ?
+      Math.min(100, Math.max(0, this.props.percentComplete * 100)) :
+      undefined;
 
-    if (this.props.percentComplete !== undefined) {
-      percentComplete = Math.min(100, Math.max(0, percentComplete! * 100));
-    }
+    const classNames = getClassNames(getStyles, {
+      theme: theme!,
+      className,
+      barHeight,
+      indeterminate: percentComplete === undefined ? true : false,
+    });
 
     const progressBarStyles = {
       width: percentComplete !== undefined ? percentComplete + '%' : undefined,
       transition: (percentComplete !== undefined && percentComplete < ZERO_THRESHOLD) ? 'none' : undefined,
     };
 
     return (
-      <div className={ classNames.root }>
-        <div className={ classNames.itemName }>{ label }</div>
-        <div className={ classNames.itemProgress }>
-          <div className={ classNames.progressTrack } />
-          <div
-            className={ classNames.progressBar }
-            style={ progressBarStyles }
-            role='progressbar'
-            aria-valuemin={ 0 }
-            aria-valuemax={ 100 }
-            aria-valuenow={ Math.floor(percentComplete!) }
-            aria-valuetext={ ariaValueText }
-          />
-        </div>
-        <div className={ classNames.itemDescription }>{ description }</div>
+      <div className={ classNames.itemProgress }>
+        <div className={ classNames.progressTrack } />
+        <div
+          className={ classNames.progressBar }
+          style={ progressBarStyles }
+          role='progressbar'
+          aria-valuemin={ 0 }
+          aria-valuemax={ 100 }
+          aria-valuenow={ Math.floor(percentComplete!) }
+          aria-valuetext={ ariaValueText }
+        />
       </div>
     );
   }

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

@@ -5,14 +5,32 @@ import { ProgressIndicator } from './ProgressIndicator';
 
 describe('ProgressIndicator', () => {
   it('renders ProgressIndicator correctly', () => {
-    const component = renderer.create(<ProgressIndicator percentComplete={ 0.75 } />);
+    const component = renderer.create(<ProgressIndicator label='Test' description='Test' percentComplete={ 0.75 } />);
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders indeterminate ProgressIndicator correctly', () => {
+    const component = renderer.create(<ProgressIndicator label='Test' description='Test' />);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders with no progress', () => {
+    const component = renderer.create(<ProgressIndicator label='Test' description='Test' progressHidden={ true } />);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders with no label or description', () => {
     const component = renderer.create(<ProgressIndicator />);
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
-});
+
+  it('renders React content', () => {
+    const component = renderer.create(<ProgressIndicator label={ <span>Test</span> } description={ <span>Test</span> } />);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ProgressIndicatorBase } from './ProgressIndicator.base';
 import { IStyle, ITheme } from '../../Styling';
-import { IStyleFunction } from '../../Utilities';
+import { IStyleFunction, IRenderFunction } from '../../Utilities';
 
 export interface IProgressIndicator {
   focus: () => void;
@@ -30,20 +30,30 @@ export interface IProgressIndicatorProps extends React.Props<ProgressIndicatorBa
   className?: string;
 
   /**
-   * Label to display above the control.
+   * Label to display above the control. May be a string or React virtual elements.
    */
-  label?: string;
+  label?: React.ReactNode;
 
   /**
-   * Text describing or supplementing the operation.
+   * Text describing or supplementing the operation. May be a string or React virtual elements.
    */
-  description?: string;
+  description?: React.ReactNode;
 
   /**
    * Percentage of the operation's completeness. If this is not set, the indeterminate progress animation will be shown instead.
    */
   percentComplete?: number;
 
+  /**
+   * Whether or not to hide the progress state.
+   */
+  progressHidden?: boolean;
+
+  /**
+   * A render override for the progress track.
+   */
+  onRenderProgress?: IRenderFunction<IProgressIndicatorProps>;
+
   /**
    * Text alternative of the progress status, used by screen readers for reading the value of the progress.
    */
@@ -86,4 +96,4 @@ export interface IProgressIndicatorStyles {
   itemProgress: IStyle;
   progressTrack: IStyle;
   progressBar: IStyle;
-}
+}