diff --git a/common/changes/office-ui-fabric-react/pivotitem-nativeprops-4349_2018-04-04-19-55.json b/common/changes/office-ui-fabric-react/pivotitem-nativeprops-4349_2018-04-04-19-55.json new file mode 100644 index 00000000000000..89e6b541192440 --- /dev/null +++ b/common/changes/office-ui-fabric-react/pivotitem-nativeprops-4349_2018-04-04-19-55.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Added headerButtonProps prop to PivotItem to allow passing native props (data-* & aria-*) to the header/link/CommandButton element. Also depricated linkText and added headerText for semantic purposes.", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "v-brgarl@microsoft.com" +} \ No newline at end of file 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 e96dcae184dac6..fbca4a0a7030b5 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx +++ b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx @@ -117,7 +117,7 @@ export class Pivot extends BaseComponent { } private _renderPivotLink = (link: IPivotItemProps): JSX.Element => { - const { itemKey } = link; + const { itemKey, headerButtonProps } = link; const tabId = this._keyToTabIds[itemKey as string]; const { onRenderItemLink } = link; let linkContent: JSX.Element | null; @@ -130,6 +130,7 @@ export class Pivot extends BaseComponent { return ( { ariaLabel={ link.ariaLabel } role='tab' aria-selected={ this.state.selectedKey === itemKey } - name={ link.linkText } + name={ link.headerText } > { linkContent } @@ -152,7 +153,7 @@ export class Pivot extends BaseComponent { } private _renderLinkContent = (link: IPivotItemProps): JSX.Element => { - const { itemCount, itemIcon, linkText } = link; + const { itemCount, itemIcon, headerText } = link; return ( @@ -161,7 +162,7 @@ export class Pivot extends BaseComponent { ) } - { linkText !== undefined && { link.linkText } } + { headerText !== undefined && { link.headerText } } { itemCount !== undefined && ({ itemCount }) } ); @@ -204,7 +205,8 @@ export class Pivot extends BaseComponent { const itemKey = pivotItem.props.itemKey || index.toString(); links.push({ - linkText: pivotItem.props.linkText, + headerText: pivotItem.props.headerText || pivotItem.props.linkText, + headerButtonProps: pivotItem.props.headerButtonProps, ariaLabel: pivotItem.props.ariaLabel, itemKey: itemKey, itemCount: pivotItem.props.itemCount, diff --git a/packages/office-ui-fabric-react/src/components/Pivot/PivotItem.types.ts b/packages/office-ui-fabric-react/src/components/Pivot/PivotItem.types.ts index 616ca5f694a8fc..8eabb6604e1708 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/PivotItem.types.ts +++ b/packages/office-ui-fabric-react/src/components/Pivot/PivotItem.types.ts @@ -8,10 +8,21 @@ export interface IPivotItemProps extends React.HTMLAttributes { componentRef?: () => void; /** - * The text displayed of each pivot link. + * The text displayed of each pivot link - renaming to 'headerText'. + * @deprecated */ linkText?: string; + /** + * The text displayed of each pivot link. + */ + headerText?: string; + + /** + * Props for the header command button supporting native props - data-* and aria-* - for each pivot header/link element + */ + headerButtonProps?: { [key: string]: string | number | boolean }; + /** * An required key to uniquely identify a pivot item. * diff --git a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Basic.Example.tsx index 4b1efa1d9964aa..d00b6e53b6a0b8 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Basic.Example.tsx @@ -9,7 +9,14 @@ export class PivotBasicExample extends React.Component { return (
- +