Pivot: render headers only

common/changes/pivotHeadersOnly_2017-04-07-10-40.json

@@ -0,0 +1,20 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Pivot: new props headersOnly and getTabId.",
+      "type": "minor"
+    },
+    {
+      "comment": "",
+      "packageName": "@uifabric/utilities",
+      "type": "none"
+    },
+    {
+      "comment": "",
+      "packageName": "@uifabric/example-app-base",
+      "type": "none"
+    }
+  ],
+  "email": "v-panu@microsoft.com"
+}

packages/office-ui-fabric-react/src/components/Pivot/Pivot.Props.ts

@@ -50,6 +50,18 @@ export interface IPivotProps extends React.Props<Pivot> {
    */
   linkFormat?: PivotLinkFormat;
 
+  /**
+   * Specify whether to skip rendering the tabpanel with the content of the selected tab.
+   * Use this prop if you plan to separately render the tab content
+   * and don't want to leave an empty tabpanel in the page that may confuse Screen Readers.
+   */
+  headersOnly?: boolean;
+
+  /**
+   * Optional. Specify how IDs are generated for each tab header.
+   * Useful if you're rendering content outside and need to connect aria-labelledby.
+   */
+  getTabId?: (itemKey: string, index: number) => string;
 }
 
 export enum PivotLinkFormat {

packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx

@@ -26,7 +26,7 @@ import styles = require('./Pivot.scss');
  *       <Label>Pivot #2</Label>
  *     </PivotItem>
  *     <PivotItem linkText="Bas">
- *     <Label>Pivot #3</Label>
+ *       <Label>Pivot #3</Label>
  *     </PivotItem>
  *   </Pivot>
  */
@@ -169,6 +169,10 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
    * Renders the current Pivot Item
    */
   private _renderPivotItem() {
+    if (this.props.headersOnly) {
+      return null;
+    }
+
     const itemKey: string = this.state.selectedKey;
     const index = this._keyToIndexMapping[itemKey];
     let { selectedTabId } = this.state;
@@ -205,13 +209,24 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
           onRenderItemLink: pivotItem.props.onRenderItemLink
         });
         this._keyToIndexMapping[itemKey] = index;
-        this._keyToTabIds[itemKey] = this._pivotId + `-Tab${index}`;
+        this._keyToTabIds[itemKey] = this.getTabId(itemKey, index);
       }
     });
 
     return links;
   }
 
+  /**
+   * Generates the Id for the tab button.
+   */
+  private getTabId(itemKey: string, index: number): string {
+    if (this.props.getTabId) {
+      return this.props.getTabId(itemKey, index);
+    }
+
+    return this._pivotId + `-Tab${index}`;
+  }
+
   /**
    * whether the key exists in the pivot items.
    */

packages/office-ui-fabric-react/src/components/Pivot/PivotPage.tsx

@@ -14,6 +14,7 @@ import { PivotFabricExample } from './examples/Pivot.Fabric.Example';
 import { PivotOnChangeExample } from './examples/Pivot.OnChange.Example';
 import { PivotRemoveExample } from './examples/Pivot.Remove.Example';
 import { PivotOverrideExample } from './examples/Pivot.Override.Example';
+import { PivotSeparateExample } from './examples/Pivot.Separate.Example';
 
 const PivotRemoveExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Remove.Example.tsx') as string;
 const PivotBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Basic.Example.tsx') as string;
@@ -24,6 +25,7 @@ const PivotFabricExampleCode = require('!raw-loader!office-ui-fabric-react/src/c
 const PivotOnChangeExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.OnChange.Example.tsx') as string;
 const PivotIconCountExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.IconCount.Example.tsx') as string;
 const PivotOverrideExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Override.Example.tsx') as string;
+const PivotSeparateExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx') as string;
 
 export class PivotPage extends React.Component<IComponentDemoPageProps, {}> {
   public render() {
@@ -60,6 +62,9 @@ export class PivotPage extends React.Component<IComponentDemoPageProps, {}> {
             <ExampleCard title='Override selected item' code={ PivotOverrideExampleCode }>
               <PivotOverrideExample />
             </ExampleCard>
+            <ExampleCard title='Render content separately' code={ PivotSeparateExampleCode }>
+              <PivotSeparateExample />
+            </ExampleCard>
           </div>
         }
         propertiesTables={

packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { Label } from 'office-ui-fabric-react/lib/Label';
+import { Button } from 'office-ui-fabric-react/lib/Button';
+import { Pivot, PivotItem } from 'office-ui-fabric-react/lib/Pivot';
+import { autobind } from 'office-ui-fabric-react/lib/Utilities';
+
+export class PivotSeparateExample extends React.Component<any, any> {
+  state = { selectedKey: 'rectangleRed' };
+
+  public render() {
+    return (
+      <div>
+        <div
+          aria-labelledby={ this._getTabId(this.state.selectedKey) }
+          role="tabitem"
+          style={ {
+            float: 'left',
+            width: 100,
+            height: this.state.selectedKey === 'squareRed' ? 100 : 200,
+            background: this.state.selectedKey === 'rectangleGreen' ? 'green' : 'red'
+          } } />
+        <Pivot
+          selectedKey={ this.state.selectedKey }
+          onLinkClick={ this._handleLinkClick }
+          headersOnly={ true }
+          getTabId={ this._getTabId }>
+          <PivotItem linkText='Rectangle red' itemKey='rectangleRed' />
+          <PivotItem linkText='Square red' itemKey='squareRed' />
+          <PivotItem linkText='Rectangle green' itemKey='rectangleGreen' />
+        </Pivot>
+      </div>
+    );
+  }
+
+  @autobind
+  private _handleLinkClick(item: PivotItem): void {
+    this.setState({
+      selectedKey: item.props.itemKey
+    });
+  }
+
+  @autobind
+  private _getTabId(itemKey: string): string {
+    return `ShapeColorPivot_${itemKey}`;
+  }
+}