From 890b261e7cd314f5bab84a64ea2f63691403e064 Mon Sep 17 00:00:00 2001 From: Pablo Nunez Navarro Date: Fri, 7 Apr 2017 11:47:59 +0200 Subject: [PATCH 1/8] Pivot: new props headersOnly and getTabId. --- .../src/components/Pivot/Pivot.Props.ts | 12 ++++++++++++ .../src/components/Pivot/Pivot.tsx | 19 +++++++++++++++++-- 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.Props.ts b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.Props.ts index e6dcf8c72a510e..df53f832a8337c 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.Props.ts +++ b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.Props.ts @@ -50,6 +50,18 @@ export interface IPivotProps extends React.Props { */ 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 { diff --git a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx index 48c0bd4ed4ee62..663aec155f1966 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx +++ b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx @@ -26,7 +26,7 @@ import styles = require('./Pivot.scss'); * * * - * + * * * */ @@ -169,6 +169,10 @@ export class Pivot extends BaseComponent { * 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 { 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. */ From a61b260a302f7fc3bb707116edfbab040e93a5b9 Mon Sep 17 00:00:00 2001 From: Pablo Nunez Navarro Date: Fri, 7 Apr 2017 12:38:10 +0200 Subject: [PATCH 2/8] New example for separate render of pivot content. --- .../src/components/Pivot/PivotPage.tsx | 5 ++ .../Pivot/examples/Pivot.Separate.Example.tsx | 46 +++++++++++++++++++ 2 files changed, 51 insertions(+) create mode 100644 packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx diff --git a/packages/office-ui-fabric-react/src/components/Pivot/PivotPage.tsx b/packages/office-ui-fabric-react/src/components/Pivot/PivotPage.tsx index c56311ff58731d..6541fab6c0508b 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/PivotPage.tsx +++ b/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 { public render() { @@ -60,6 +62,9 @@ export class PivotPage extends React.Component { + + + } propertiesTables={ diff --git a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx new file mode 100644 index 00000000000000..1239f2b409278b --- /dev/null +++ b/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 { + state = { selectedKey: 'rectangleRed' }; + + public render() { + return ( +
+
+ + + + + +
+ ); + } + + @autobind + private _handleLinkClick(item: PivotItem): void { + this.setState({ + selectedKey: item.props.itemKey + }); + } + + @autobind + private _getTabId(itemKey: string): string { + return `ShapeColorPivot_${itemKey}`; + } +} From 587cff472c18ac66f14942cda47d1c0bb6d34a64 Mon Sep 17 00:00:00 2001 From: Pablo Nunez Navarro Date: Fri, 7 Apr 2017 12:40:50 +0200 Subject: [PATCH 3/8] Describe change. --- .../pivotHeadersOnly_2017-04-07-10-40.json | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 common/changes/pivotHeadersOnly_2017-04-07-10-40.json diff --git a/common/changes/pivotHeadersOnly_2017-04-07-10-40.json b/common/changes/pivotHeadersOnly_2017-04-07-10-40.json new file mode 100644 index 00000000000000..b7a11ab19e8245 --- /dev/null +++ b/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" +} \ No newline at end of file From f7faae28fbedaa1360b80be5b98b7726d7e39350 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pablo=20N=C3=BA=C3=B1ez?= Date: Fri, 7 Apr 2017 18:25:48 +0200 Subject: [PATCH 4/8] Fixed change description to be higher level. --- common/changes/pivotHeadersOnly_2017-04-07-10-40.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/common/changes/pivotHeadersOnly_2017-04-07-10-40.json b/common/changes/pivotHeadersOnly_2017-04-07-10-40.json index b7a11ab19e8245..e9407978e6d2d5 100644 --- a/common/changes/pivotHeadersOnly_2017-04-07-10-40.json +++ b/common/changes/pivotHeadersOnly_2017-04-07-10-40.json @@ -2,7 +2,7 @@ "changes": [ { "packageName": "office-ui-fabric-react", - "comment": "Pivot: new props headersOnly and getTabId.", + "comment": "Pivot: Allow rendering PivotItem headers without content.", "type": "minor" }, { @@ -17,4 +17,4 @@ } ], "email": "v-panu@microsoft.com" -} \ No newline at end of file +} From b6d223fdf3e0cbaf6541a07742bb3e3691f26794 Mon Sep 17 00:00:00 2001 From: Christian Gonzalez Date: Mon, 1 May 2017 09:28:23 -0700 Subject: [PATCH 5/8] Update Pivot.Separate.Example.tsx Fix linter error --- .../src/components/Pivot/examples/Pivot.Separate.Example.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx index 1239f2b409278b..c16ced09910ac4 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx @@ -12,7 +12,7 @@ export class PivotSeparateExample extends React.Component {
Date: Mon, 1 May 2017 09:30:03 -0700 Subject: [PATCH 6/8] Update Pivot.Separate.Example.tsx Make state private in pivot example to fix linter issues --- .../src/components/Pivot/examples/Pivot.Separate.Example.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx index c16ced09910ac4..d012a2ef7b42b2 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx @@ -5,7 +5,7 @@ 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 { - state = { selectedKey: 'rectangleRed' }; + private state = { selectedKey: 'rectangleRed' }; public render() { return ( From 95af8881abf43ca9c0da700507460a51c947734f Mon Sep 17 00:00:00 2001 From: Christian Gonzalez Date: Mon, 1 May 2017 09:39:52 -0700 Subject: [PATCH 7/8] Update Pivot.Separate.Example.tsx Undo last change --- .../src/components/Pivot/examples/Pivot.Separate.Example.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx index d012a2ef7b42b2..c16ced09910ac4 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx @@ -5,7 +5,7 @@ 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 { - private state = { selectedKey: 'rectangleRed' }; + state = { selectedKey: 'rectangleRed' }; public render() { return ( From f480b6705ed849c7368f92828f3a935aada3cde0 Mon Sep 17 00:00:00 2001 From: Pablo Nunez Navarro Date: Tue, 2 May 2017 01:22:15 +0200 Subject: [PATCH 8/8] Declare state public. Should fix TSLint error in CI. --- .../src/components/Pivot/examples/Pivot.Separate.Example.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx index c16ced09910ac4..7736a8b36e1ce6 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx @@ -5,7 +5,7 @@ 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 { - state = { selectedKey: 'rectangleRed' }; + public state = { selectedKey: 'rectangleRed' }; public render() { return (