From f1672648ad03e72820ed860b80a3d431bb4acd3d Mon Sep 17 00:00:00 2001
From: Stephen Morrissey <v-mostep@microsoft.com>
Date: Tue, 2 Aug 2016 17:47:28 -0700
Subject: [PATCH 1/6] #225536: added support for item count on link style
 pivots. Added Pivot.ItemCount.Example.

---
 src/components/Pivot/Pivot.tsx                | 10 ++++++-
 src/components/Pivot/PivotItem.Props.ts       |  8 ++++++
 src/demo/pages/PivotPage/PivotPage.tsx        |  5 ++++
 .../examples/Pivot.ItemCount.Example.tsx      | 28 +++++++++++++++++++
 4 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 src/demo/pages/PivotPage/examples/Pivot.ItemCount.Example.tsx

diff --git a/src/components/Pivot/Pivot.tsx b/src/components/Pivot/Pivot.tsx
index 75005fcb873a12..3e7e9331cd699c 100644
--- a/src/components/Pivot/Pivot.tsx
+++ b/src/components/Pivot/Pivot.tsx
@@ -102,7 +102,13 @@ export class Pivot extends React.Component<IPivotProps, IPivotState> {
    */
   private _renderLink(link: IPivotItemProps) {
     const itemKey = link.itemKey;
+    const itemCount = link.itemCount;
     let { id } = this.state;
+    let countText;
+    if (itemCount !== undefined && this.props.linkFormat !== PivotLinkFormat.tabs) {
+      countText = <span className={ css('ms-Pivot-count') }>({ itemCount })</span>;
+    }
+
     return (
       <a
         id={ id + '-tab' }
@@ -115,6 +121,7 @@ export class Pivot extends React.Component<IPivotProps, IPivotState> {
         aria-controls={ id + '-panel' }
         aria-selected={ this.state.selectedKey === itemKey }>
         { link.linkText }
+        { countText }
       </a>
     );
   }
@@ -153,7 +160,8 @@ export class Pivot extends React.Component<IPivotProps, IPivotState> {
         links.push({
           linkText: pivotItem.props.linkText,
           ariaLabel: pivotItem.props.ariaLabel,
-          itemKey: itemKey
+          itemKey: itemKey,
+          itemCount: pivotItem.props.itemCount
         });
         this._keyToIndexMapping[itemKey] = index;
       }
diff --git a/src/components/Pivot/PivotItem.Props.ts b/src/components/Pivot/PivotItem.Props.ts
index a06e500b1fcbf0..ecb184c12646f0 100644
--- a/src/components/Pivot/PivotItem.Props.ts
+++ b/src/components/Pivot/PivotItem.Props.ts
@@ -19,4 +19,12 @@ export interface IPivotItemProps extends React.HTMLProps<HTMLDivElement> {
    * Note that unless you have compelling requirements you should not override aria-label.
    */
   ariaLabel?: string;
+
+  /**
+   * An optional item count that gets displayed just after the linkText(itemCount)
+   *
+   * Example: completed(4)
+   */
+  itemCount?: number;
+
 }
\ No newline at end of file
diff --git a/src/demo/pages/PivotPage/PivotPage.tsx b/src/demo/pages/PivotPage/PivotPage.tsx
index ccb7b6de173218..4eeb6ba5f5242c 100644
--- a/src/demo/pages/PivotPage/PivotPage.tsx
+++ b/src/demo/pages/PivotPage/PivotPage.tsx
@@ -9,6 +9,7 @@ import {
 
 import { PivotBasicExample } from './examples/Pivot.Basic.Example';
 import { PivotLargeExample } from './examples/Pivot.Large.Example';
+import { PivotItemCountExample } from './examples/Pivot.ItemCount.Example';
 import { PivotTabsExample } from './examples/Pivot.Tabs.Example';
 import { PivotTabsLargeExample } from './examples/Pivot.TabsLarge.Example';
 import { PivotFabricExample } from './examples/Pivot.Fabric.Example';
@@ -18,6 +19,7 @@ import { PivotRemoveExample } from './examples/Pivot.Remove.Example';
 const PivotRemoveExampleCode = require('./examples/Pivot.Remove.Example.tsx');
 const PivotBasicExampleCode = require('./examples/Pivot.Basic.Example.tsx');
 const PivotLargeExampleCode = require('./examples/Pivot.Large.Example.tsx');
+const PivotItemCountExampleCode = require('./examples/Pivot.ItemCount.Example.tsx');
 const PivotTabsExampleCode = require('./examples/Pivot.Tabs.Example.tsx');
 const PivotTabsLargesExampleCode = require('./examples/Pivot.TabsLarge.Example.tsx');
 const PivotFabricExampleCode = require('./examples/Pivot.Fabric.Example.tsx');
@@ -39,6 +41,9 @@ export class PivotPage extends React.Component<any, any> {
         <ExampleCard title='Large link size' code={ PivotLargeExampleCode }>
           <PivotLargeExample />
         </ExampleCard>
+        <ExampleCard title='Item Count' code={ PivotItemCountExampleCode }>
+          <PivotItemCountExample />
+        </ExampleCard>
         <ExampleCard title='Links of tab style' code={ PivotTabsExampleCode }>
           <PivotTabsExample />
         </ExampleCard>
diff --git a/src/demo/pages/PivotPage/examples/Pivot.ItemCount.Example.tsx b/src/demo/pages/PivotPage/examples/Pivot.ItemCount.Example.tsx
new file mode 100644
index 00000000000000..da7ce0aa99e964
--- /dev/null
+++ b/src/demo/pages/PivotPage/examples/Pivot.ItemCount.Example.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import {
+  Label,
+  Pivot,
+  PivotItem,
+  PivotLinkSize
+} from '../../../../index';
+
+export class PivotItemCountExample extends React.Component<any, any> {
+  public render() {
+    return (
+      <div>
+        <Pivot linkSize={ PivotLinkSize.large }>
+            <PivotItem linkText='My Files' itemCount={ 5 }>
+              <Label>Pivot #1</Label>
+            </PivotItem>
+            <PivotItem linkText='Recent' itemCount={ 0 }>
+              <Label>Pivot #2</Label>
+            </PivotItem>
+            <PivotItem linkText='Shared with me' itemCount={ 22 }>
+              <Label>Pivot #3</Label>
+            </PivotItem>
+        </Pivot>
+      </div>
+    );
+  }
+
+}

From b8e370716fce4afaeb1fb765782f9187ddc57659 Mon Sep 17 00:00:00 2001
From: Stephen Morrissey <v-mostep@microsoft.com>
Date: Wed, 3 Aug 2016 10:29:23 -0700
Subject: [PATCH 2/6] #225536: updated spacing and text styles for pivot
 itemCount

---
 src/components/Pivot/Pivot.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/Pivot/Pivot.scss b/src/components/Pivot/Pivot.scss
index 3a71fa811b5365..86e3be6ae1e8a2 100644
--- a/src/components/Pivot/Pivot.scss
+++ b/src/components/Pivot/Pivot.scss
@@ -123,6 +123,14 @@
 
     &.is-selected {
       font-weight: $ms-font-weight-semilight;
+
+      .ms-Pivot-count {
+        font-weight: $ms-font-weight-regular;
+      }
+    }
+
+    .ms-Pivot-count {
+      @include margin-left(5px);
     }
   }
 

From f76465eb7befa158c7747e7e51799450a7c66e21 Mon Sep 17 00:00:00 2001
From: Stephen Morrissey <v-mostep@microsoft.com>
Date: Wed, 3 Aug 2016 10:29:23 -0700
Subject: [PATCH 3/6] 225536: updated spacing and text styles for pivot
 itemCount

---
 src/components/Pivot/Pivot.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/Pivot/Pivot.scss b/src/components/Pivot/Pivot.scss
index 3a71fa811b5365..42d75c3d66fa00 100644
--- a/src/components/Pivot/Pivot.scss
+++ b/src/components/Pivot/Pivot.scss
@@ -69,6 +69,10 @@
     &::before {
       background-color: $ms-color-themePrimary;
     }
+
+    .ms-Pivot-count {
+      font-weight: $ms-font-weight-regular;
+    }
   }
 
   //== State: Disabled
@@ -124,6 +128,10 @@
     &.is-selected {
       font-weight: $ms-font-weight-semilight;
     }
+
+    .ms-Pivot-count {
+      @include margin-left(5px);
+    }
   }
 
   .ms-Pivot-link.ms-Pivot-link--overflow {

From a57c8d4980381b9a50069101bf2cbc88407de24a Mon Sep 17 00:00:00 2001
From: Stephen Morrissey <v-mostep@microsoft.com>
Date: Wed, 3 Aug 2016 11:59:01 -0700
Subject: [PATCH 4/6] #225536: updates per feedback.

---
 src/components/Pivot/Pivot.scss | 10 +---------
 src/components/Pivot/Pivot.tsx  |  5 ++---
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/components/Pivot/Pivot.scss b/src/components/Pivot/Pivot.scss
index 199290623af627..21c84e1bb43470 100644
--- a/src/components/Pivot/Pivot.scss
+++ b/src/components/Pivot/Pivot.scss
@@ -127,18 +127,10 @@
 
     &.is-selected {
       font-weight: $ms-font-weight-semilight;
-
-      .ms-Pivot-count {
-        font-weight: $ms-font-weight-regular;
-      }
-    }
-
-    .ms-Pivot-count {
-      @include margin-left(5px);
     }
 
     .ms-Pivot-count {
-      @include margin-left(5px);
+      @include margin-left(4px);
     }
   }
 
diff --git a/src/components/Pivot/Pivot.tsx b/src/components/Pivot/Pivot.tsx
index 3e7e9331cd699c..7a328e1f2d43e4 100644
--- a/src/components/Pivot/Pivot.tsx
+++ b/src/components/Pivot/Pivot.tsx
@@ -101,12 +101,11 @@ export class Pivot extends React.Component<IPivotProps, IPivotState> {
    * Renders a pivot link
    */
   private _renderLink(link: IPivotItemProps) {
-    const itemKey = link.itemKey;
-    const itemCount = link.itemCount;
+    const { itemKey, itemCount } = link;
     let { id } = this.state;
     let countText;
     if (itemCount !== undefined && this.props.linkFormat !== PivotLinkFormat.tabs) {
-      countText = <span className={ css('ms-Pivot-count') }>({ itemCount })</span>;
+      countText = <span className='ms-Pivot-count'>({ itemCount })</span>;
     }
 
     return (

From 6bee31f8b6e0abb00549dc9cb108197fbb2a3466 Mon Sep 17 00:00:00 2001
From: Stephen Morrissey <v-mostep@microsoft.com>
Date: Wed, 3 Aug 2016 16:23:56 -0700
Subject: [PATCH 5/6] #225536: removed font-weight change for itemCount text

---
 src/components/Pivot/Pivot.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/Pivot/Pivot.scss b/src/components/Pivot/Pivot.scss
index 21c84e1bb43470..58ed2333c8140e 100644
--- a/src/components/Pivot/Pivot.scss
+++ b/src/components/Pivot/Pivot.scss
@@ -69,10 +69,6 @@
     &::before {
       background-color: $ms-color-themePrimary;
     }
-
-    .ms-Pivot-count {
-      font-weight: $ms-font-weight-regular;
-    }
   }
 
   //== State: Disabled

From 18f3427adda220211a91f951d0e3c73087850b37 Mon Sep 17 00:00:00 2001
From: Stephen Morrissey <v-mostep@microsoft.com>
Date: Wed, 3 Aug 2016 16:54:56 -0700
Subject: [PATCH 6/6] #225536: fixed title case

---
 src/demo/pages/PivotPage/PivotPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/demo/pages/PivotPage/PivotPage.tsx b/src/demo/pages/PivotPage/PivotPage.tsx
index 4eeb6ba5f5242c..546cbca3192ae3 100644
--- a/src/demo/pages/PivotPage/PivotPage.tsx
+++ b/src/demo/pages/PivotPage/PivotPage.tsx
@@ -41,7 +41,7 @@ export class PivotPage extends React.Component<any, any> {
         <ExampleCard title='Large link size' code={ PivotLargeExampleCode }>
           <PivotLargeExample />
         </ExampleCard>
-        <ExampleCard title='Item Count' code={ PivotItemCountExampleCode }>
+        <ExampleCard title='Item count' code={ PivotItemCountExampleCode }>
           <PivotItemCountExample />
         </ExampleCard>
         <ExampleCard title='Links of tab style' code={ PivotTabsExampleCode }>