#225536: added support for item count on link style pivots. Added Piv…

src/components/Pivot/Pivot.scss

@@ -124,6 +124,10 @@
     &.is-selected {
       font-weight: $ms-font-weight-semilight;
     }
+
+    .ms-Pivot-count {
+      @include margin-left(4px);
+    }
   }
 
   .ms-Pivot-link.ms-Pivot-link--overflow {

src/components/Pivot/Pivot.tsx

@@ -101,8 +101,13 @@ export class Pivot extends React.Component<IPivotProps, IPivotState> {
    * Renders a pivot link
    */
   private _renderLink(link: IPivotItemProps) {
-    const itemKey = link.itemKey;
+    const { itemKey, itemCount } = link;
     let { id } = this.state;
+    let countText;
+    if (itemCount !== undefined && this.props.linkFormat !== PivotLinkFormat.tabs) {
+      countText = <span className='ms-Pivot-count'>({ itemCount })</span>;
+    }
+
     return (
       <a
         id={ id + '-tab' }
@@ -115,6 +120,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 +159,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;
       }

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;
+
 }

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>

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>
+    );
+  }
+
+}