diff --git a/src/components/Pivot/Pivot.scss b/src/components/Pivot/Pivot.scss index 3a71fa811b536..58ed2333c8140 100644 --- a/src/components/Pivot/Pivot.scss +++ b/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 { diff --git a/src/components/Pivot/Pivot.tsx b/src/components/Pivot/Pivot.tsx index 75005fcb873a1..7a328e1f2d43e 100644 --- a/src/components/Pivot/Pivot.tsx +++ b/src/components/Pivot/Pivot.tsx @@ -101,8 +101,13 @@ export class Pivot extends React.Component { * 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 = ({ itemCount }); + } + return ( { aria-controls={ id + '-panel' } aria-selected={ this.state.selectedKey === itemKey }> { link.linkText } + { countText } ); } @@ -153,7 +159,8 @@ export class Pivot extends React.Component { 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 a06e500b1fcbf..ecb184c12646f 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 { * 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 ccb7b6de17321..546cbca3192ae 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 { + + + 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 0000000000000..da7ce0aa99e96 --- /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 { + public render() { + return ( +
+ + + + + + + + + + + +
+ ); + } + +}