From 9a1768375042de271b4b4441d2b4d6bb3eb0e345 Mon Sep 17 00:00:00 2001
From: Thomas Michon <tmichon@microsoft.com>
Date: Mon, 16 Apr 2018 07:33:54 -0700
Subject: [PATCH 1/6] Make ProgressIndicator accept arbitrary content

---
 .../components/ProgressIndicator/ProgressIndicator.types.ts   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts
index f2227ba3314123..30a411f376106d 100644
--- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts
@@ -32,12 +32,12 @@ export interface IProgressIndicatorProps extends React.Props<ProgressIndicatorBa
   /**
    * Label to display above the control.
    */
-  label?: string;
+  label?: React.ReactNode;
 
   /**
    * Text describing or supplementing the operation.
    */
-  description?: string;
+  description?: React.ReactNode;
 
   /**
    * Percentage of the operation's completeness. If this is not set, the indeterminate progress animation will be shown instead.

From 6693f8c1d8e2c6b5364bbdc5e94bfc1d088f2c6c Mon Sep 17 00:00:00 2001
From: Thomas Michon <tmichon@microsoft.com>
Date: Mon, 16 Apr 2018 07:56:00 -0700
Subject: [PATCH 2/6] Add ability to override progress renderer and visibility

---
 .../ProgressIndicator.base.tsx                | 82 +++++++++++++------
 .../ProgressIndicator.types.ts                | 14 +++-
 2 files changed, 69 insertions(+), 27 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx
index 7cec1918ea7c90..488a9bea385ba6 100644
--- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx
+++ b/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,14 +59,47 @@ 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,
@@ -71,21 +107,17 @@ export class ProgressIndicatorBase extends BaseComponent<IProgressIndicatorProps
     };
 
     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>
     );
   }
diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts
index 30a411f376106d..bc8d900772ab27 100644
--- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts
+++ b/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;
@@ -44,6 +44,16 @@ export interface IProgressIndicatorProps extends React.Props<ProgressIndicatorBa
    */
   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;
-}
\ No newline at end of file
+}

From 7ddb76e21515e31637ba955a7fb78111aed815bb Mon Sep 17 00:00:00 2001
From: Thomas Michon <tmichon@microsoft.com>
Date: Mon, 16 Apr 2018 07:56:26 -0700
Subject: [PATCH 3/6] Update change output

---
 .../progress-indicator_2018-04-16-14-56.json          | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/office-ui-fabric-react/progress-indicator_2018-04-16-14-56.json

diff --git a/common/changes/office-ui-fabric-react/progress-indicator_2018-04-16-14-56.json b/common/changes/office-ui-fabric-react/progress-indicator_2018-04-16-14-56.json
new file mode 100644
index 00000000000000..447ffb33ba791c
--- /dev/null
+++ b/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": "tmichon@microsoft.com"
+}
\ No newline at end of file

From 97b2b06b1fd9cf7d85914ab54b9f0d70423f759f Mon Sep 17 00:00:00 2001
From: Thomas Michon <tmichon@microsoft.com>
Date: Mon, 23 Apr 2018 14:33:10 -0700
Subject: [PATCH 4/6] Comment on progressIndicator types

---
 .../components/ProgressIndicator/ProgressIndicator.types.ts   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts
index bc8d900772ab27..9b9d3c6a093269 100644
--- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts
@@ -30,12 +30,12 @@ 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?: React.ReactNode;
 
   /**
-   * Text describing or supplementing the operation.
+   * Text describing or supplementing the operation. May be a string or React virtual elements.
    */
   description?: React.ReactNode;
 

From 7e4d13ca589fee5e11a1954050e1f0a1a0538dbc Mon Sep 17 00:00:00 2001
From: Thomas Michon <tmichon@microsoft.com>
Date: Fri, 27 Apr 2018 23:16:27 -0700
Subject: [PATCH 5/6] Add more unit tests for ProgressIndicator

---
 .../ProgressIndicator.test.tsx                | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.test.tsx b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.test.tsx
index 3b5ad5c04f39e2..d032e947532159 100644
--- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.test.tsx
+++ b/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();
   });
-});
\ No newline at end of file
+
+  it('renders React content', () => {
+    const component = renderer.create(<ProgressIndicator label={ <span>Test</span> } description={ <span>Test</span> } />);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

From 4d9e3ae700d576a1ca16889a60f21a6e444e37d7 Mon Sep 17 00:00:00 2001
From: Thomas Michon <tmichon@microsoft.com>
Date: Fri, 27 Apr 2018 23:17:06 -0700
Subject: [PATCH 6/6] Update snapshot output

---
 .../ProgressIndicator.test.tsx.snap           | 207 +++++++++++++++++-
 1 file changed, 203 insertions(+), 4 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap
index 8e71ec1d2f80d1..b2562b107eb616 100644
--- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`ProgressIndicator renders ProgressIndicator correctly 1`] = `
           white-space: nowrap;
         }
   >
-    
+    Test
   </div>
   <div
     className=
@@ -84,7 +84,103 @@ exports[`ProgressIndicator renders ProgressIndicator correctly 1`] = `
           line-height: 18px;
         }
   >
-    
+    Test
+  </div>
+</div>
+`;
+
+exports[`ProgressIndicator renders React content 1`] = `
+<div
+  className=
+      ms-ProgressIndicator
+      {
+        font-weight: 400;
+      }
+>
+  <div
+    className=
+        ms-ProgressIndicator-itemName
+        {
+          color: #333333;
+          font-size: 14px;
+          line-height: 20px;
+          overflow: hidden;
+          padding-top: 4px;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+  >
+    <span>
+      Test
+    </span>
+  </div>
+  <div
+    className=
+        ms-ProgressIndicator-itemProgress
+        {
+          height: 2px;
+          overflow: hidden;
+          padding-bottom: 8px;
+          padding-left: 0;
+          padding-right: 0;
+          padding-top: 8px;
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-ProgressIndicator-progressTrack
+          {
+            background-color: #eaeaea;
+            height: 2px;
+            position: absolute;
+            width: 100%;
+          }
+          @media screen and (-ms-high-contrast: active){& {
+            border-bottom: 1px solid WindowText;
+          }
+    />
+    <div
+      aria-valuemax={100}
+      aria-valuemin={0}
+      aria-valuenow={NaN}
+      aria-valuetext={undefined}
+      className=
+          ms-ProgressIndicator-progressBar
+          {
+            animation: keyframes 0%{left:-30%;}100%{left:100%;} 3s infinite;
+            background-color: #0078d4;
+            background: linear-gradient(to right, transparent 0%, #0078d4 50%, transparent 100%);
+            height: 2px;
+            min-width: 33%;
+            position: absolute;
+            transition: width .3s ease;
+            width: 0px;
+          }
+          @media screen and (-ms-high-contrast: active){& {
+            background-color: WindowText;
+          }
+      role="progressbar"
+      style={
+        Object {
+          "transition": undefined,
+          "width": undefined,
+        }
+      }
+    />
+  </div>
+  <div
+    className=
+        ms-ProgressIndicator-itemDescription
+        {
+          color: #666666;
+          font-size: 11px;
+          line-height: 18px;
+        }
+  >
+    <span>
+      Test
+    </span>
   </div>
 </div>
 `;
@@ -110,8 +206,85 @@ exports[`ProgressIndicator renders indeterminate ProgressIndicator correctly 1`]
           white-space: nowrap;
         }
   >
-    
+    Test
+  </div>
+  <div
+    className=
+        ms-ProgressIndicator-itemProgress
+        {
+          height: 2px;
+          overflow: hidden;
+          padding-bottom: 8px;
+          padding-left: 0;
+          padding-right: 0;
+          padding-top: 8px;
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-ProgressIndicator-progressTrack
+          {
+            background-color: #eaeaea;
+            height: 2px;
+            position: absolute;
+            width: 100%;
+          }
+          @media screen and (-ms-high-contrast: active){& {
+            border-bottom: 1px solid WindowText;
+          }
+    />
+    <div
+      aria-valuemax={100}
+      aria-valuemin={0}
+      aria-valuenow={NaN}
+      aria-valuetext={undefined}
+      className=
+          ms-ProgressIndicator-progressBar
+          {
+            animation: keyframes 0%{left:-30%;}100%{left:100%;} 3s infinite;
+            background-color: #0078d4;
+            background: linear-gradient(to right, transparent 0%, #0078d4 50%, transparent 100%);
+            height: 2px;
+            min-width: 33%;
+            position: absolute;
+            transition: width .3s ease;
+            width: 0px;
+          }
+          @media screen and (-ms-high-contrast: active){& {
+            background-color: WindowText;
+          }
+      role="progressbar"
+      style={
+        Object {
+          "transition": undefined,
+          "width": undefined,
+        }
+      }
+    />
+  </div>
+  <div
+    className=
+        ms-ProgressIndicator-itemDescription
+        {
+          color: #666666;
+          font-size: 11px;
+          line-height: 18px;
+        }
+  >
+    Test
   </div>
+</div>
+`;
+
+exports[`ProgressIndicator renders with no label or description 1`] = `
+<div
+  className=
+      ms-ProgressIndicator
+      {
+        font-weight: 400;
+      }
+>
   <div
     className=
         ms-ProgressIndicator-itemProgress
@@ -167,6 +340,32 @@ exports[`ProgressIndicator renders indeterminate ProgressIndicator correctly 1`]
       }
     />
   </div>
+</div>
+`;
+
+exports[`ProgressIndicator renders with no progress 1`] = `
+<div
+  className=
+      ms-ProgressIndicator
+      {
+        font-weight: 400;
+      }
+>
+  <div
+    className=
+        ms-ProgressIndicator-itemName
+        {
+          color: #333333;
+          font-size: 14px;
+          line-height: 20px;
+          overflow: hidden;
+          padding-top: 4px;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+  >
+    Test
+  </div>
   <div
     className=
         ms-ProgressIndicator-itemDescription
@@ -176,7 +375,7 @@ exports[`ProgressIndicator renders indeterminate ProgressIndicator correctly 1`]
           line-height: 18px;
         }
   >
-    
+    Test
   </div>
 </div>
 `;