Skip to content

Addressing Issue #4349 - Data attributes on Pivot Item #4461

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dzearing merged 5 commits into from
Apr 20, 2018
Merged

Addressing Issue #4349 - Data attributes on Pivot Item #4461

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b830ac7
added linkNativeProps prop to PivotItem to pass to the link/CommandBu…
oengusmacinog-zz Apr 4, 2018
8d21a1b
rush change
oengusmacinog-zz Apr 4, 2018
15b71cb
updated to headerButtonProps and deprecated linkText while adding hea…
oengusmacinog-zz Apr 19, 2018
84d62ff
better implementation of headerText
oengusmacinog-zz Apr 19, 2018
7b3a2fa
fixed name attribute
oengusmacinog-zz Apr 19, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions common/changes/office-ui-fabric-react/pivotitem-nativeprops-4349_2018-04-04-19-55.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
12 changes: 7 additions & 5 deletions packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
}

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;
Expand All @@ -130,6 +130,7 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {

return (
<CommandButton
{ ...headerButtonProps }
id={ tabId }
key={ itemKey }
className={ css(
Expand All @@ -144,15 +145,15 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
ariaLabel={ link.ariaLabel }
role='tab'
aria-selected={ this.state.selectedKey === itemKey }
name={ link.linkText }
name={ link.headerText }
>
{ linkContent }
</CommandButton>
);
}

private _renderLinkContent = (link: IPivotItemProps): JSX.Element => {
const { itemCount, itemIcon, linkText } = link;
const { itemCount, itemIcon, headerText } = link;

return (
<span className={ css('ms-Pivot-link-content') }>
Expand All @@ -161,7 +162,7 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
<Icon iconName={ itemIcon } />
</span>
) }
{ linkText !== undefined && <span className={ css('ms-Pivot-text', styles.text) }> { link.linkText }</span> }
{ headerText !== undefined && <span className={ css('ms-Pivot-text', styles.text) }> { link.headerText }</span> }
{ itemCount !== undefined && <span className={ css('ms-Pivot-count', styles.count) } > ({ itemCount })</span> }
</span>
);
Expand Down Expand Up @@ -204,7 +205,8 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
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,
Expand Down
13 changes: 12 additions & 1 deletion packages/office-ui-fabric-react/src/components/Pivot/PivotItem.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,21 @@ export interface IPivotItemProps extends React.HTMLAttributes<HTMLDivElement> {
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.
*
Expand Down
9 changes: 8 additions & 1 deletion packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Basic.Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,14 @@ export class PivotBasicExample extends React.Component<any, any> {
return (
<div>
<Pivot>
<PivotItem linkText='My Files'>
<PivotItem
headerText='My Files'
linkText='I am deprecated. "headerText" overwrites me'
headerButtonProps={ {
'data-order': 1,
'data-title': 'My Files Title'
} }
>
<Label className={ exampleStyles.exampleLabel }>Pivot #1</Label>
</PivotItem>
<PivotItem linkText='Recent'>
Expand Down