Skip to content

Pivot override styles #4444

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 12 commits into from
May 14, 2018
Merged

Pivot override styles #4444

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
3146f12
pass through className
natalieethell Apr 2, 2018
ad6eb10
Merge branch 'master' into pivotOverrideStyles
natalieethell Apr 3, 2018
adeb1c8
pass className through to CommandButton as well
natalieethell Apr 3, 2018
f442d39
change request file
natalieethell Apr 3, 2018
c87aac2
use getNativeProps
natalieethell Apr 16, 2018
737efb7
merge with master
natalieethell Apr 30, 2018
95eb87b
get rid of unnecessary newline
natalieethell May 1, 2018
e42eecc
added Pivot snapshot test for custom className
natalieethell May 4, 2018
346e7f4
remove space
natalieethell May 8, 2018
31363a4
Merge branch 'master' into pivotOverrideStyles
May 12, 2018
668061b
Update snapshots due to merge of #4728.
May 12, 2018
aeaa67f
Update pivotOverrideStyles_2018-04-03-18-42.json
dzearing May 14, 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/pivotOverrideStyles_2018-04-03-18-42.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": "Pivot: include className in props to override styles",
"type": "patch"
}
],
"packageName": "office-ui-fabric-react",
"email": "naethell@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 @@ -105,7 +105,7 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
return (
<FocusZone direction={ FocusZoneDirection.horizontal }>
<ul
className={ css('ms-Pivot', styles.root,
className={ css('ms-Pivot', styles.root, this.props.className,

@dzearing dzearing Apr 13, 2018

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the wrong place to put the className.

It needs to live on the outmost div element. Otherwise the consumer can't make it flexGrow: 1.

@dzearing dzearing Apr 13, 2018

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See line 94.

I would recommend we use getNativeProps and mix native props into the root div.

@dzearing dzearing Apr 23, 2018

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't want this to go stale. :)

@natalieethell natalieethell Apr 30, 2018

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes! So sorry about the delay. Just pushed the changes. Let me know what you think.

@natalieethell natalieethell Apr 30, 2018

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Working on the merge conflict.

{ ['ms-Pivot--large ' + styles.rootIsLarge]: this.props.linkSize === PivotLinkSize.large },
{ ['ms-Pivot--tabs ' + styles.rootIsTabs]: this.props.linkFormat === PivotLinkFormat.tabs }) }
role='tablist'
Expand All @@ -117,7 +117,7 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
}

private _renderPivotLink = (link: IPivotItemProps): JSX.Element => {
const { itemKey } = link;
const { itemKey, className } = link;
const tabId = this._keyToTabIds[itemKey as string];
const { onRenderItemLink } = link;
let linkContent: JSX.Element | null;
Expand All @@ -137,7 +137,8 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
styles.link,
{
['is-selected ' + styles.linkIsSelected]: this.state.selectedKey === itemKey
}
},
className
) }
onClick={ this._onLinkClick.bind(this, itemKey) }
onKeyPress={ this._onKeyPress.bind(this, itemKey) }
Expand All @@ -152,10 +153,10 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
}

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

return (
<span className={ css('ms-Pivot-link-content') }>
<span className={ css('ms-Pivot-link-content', className) }>
{ itemIcon !== undefined && (
<span className={ css('ms-Pivot-icon', styles.icon) }>
<Icon iconName={ itemIcon } />
Expand Down Expand Up @@ -206,6 +207,7 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
links.push({
linkText: pivotItem.props.linkText,
ariaLabel: pivotItem.props.ariaLabel,
className: pivotItem.props.className,
itemKey: itemKey,
itemCount: pivotItem.props.itemCount,
itemIcon: pivotItem.props.itemIcon,
Expand Down
5 changes: 5 additions & 0 deletions packages/office-ui-fabric-react/src/components/Pivot/Pivot.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,11 @@ export interface IPivotProps extends React.Props<Pivot> {
*/
initialSelectedIndex?: number;

/**
* Optional root classname for the root pivot element.
*/
className?: string;

/**
* The key of the pivot item initially selected.
*
Expand Down