Skip to content

Fixed Pivot to show the correct PivotItem #8501

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 1 commit into from
Apr 1, 2019
Merged

Fixed Pivot to show the correct PivotItem #8501

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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/Fix-PivotItems_2019-03-27-19-38.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": "Fixed a problem with Pivot showing the wrong PivotItems when using JSX expressions. Extended the test case",
"type": "patch"
}
],
"packageName": "office-ui-fabric-react",
"email": "[email protected]"
}
7 changes: 1 addition & 6 deletions packages/office-ui-fabric-react/src/components/Pivot/Pivot.base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,12 +207,7 @@ export class PivotBase extends BaseComponent<IPivotProps, IPivotState> {
keyToTabIdMapping: {}
};

React.Children.map(props.children, (child: any, index: number) => {
// skip empty JSX expressions
if (!child) {
return;
}

React.Children.map(React.Children.toArray(props.children), (child: any, index: number) => {
if (typeof child === 'object' && child.type === PivotItemType) {
const pivotItem = child as PivotItem;
const { linkText, ...pivotItemProps } = pivotItem.props;
Expand Down
11 changes: 8 additions & 3 deletions packages/office-ui-fabric-react/src/components/Pivot/Pivot.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,14 @@ describe('Pivot', () => {

it('supports JSX expressions', () => {
const component = renderer.create(
<Pivot>
<PivotItem headerText="Test Link 1" />
{false && <PivotItem headerText="" />}
<Pivot defaultSelectedIndex={1}>
<PivotItem headerText="Test Link 1">
<div>This is item 1</div>
</PivotItem>
{false && <PivotItem headerText="Test Link 2" />}
<PivotItem headerText="Test Link 3">
<div>This is Item 3</div>
</PivotItem>
</Pivot>
);
const tree = component.toJSON();
Expand Down
163 changes: 158 additions & 5 deletions packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2733,6 +2733,155 @@ exports[`Pivot supports JSX expressions 1`] = `
}
role="tablist"
>
<button
aria-selected={false}
className=
ms-Button
ms-Button--action
ms-Button--command
ms-Pivot-link
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
background-color: transparent;
border-radius: 0px;
border: 0px;
box-sizing: border-box;
color: #333333;
cursor: pointer;
display: inline-block;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 14px;
font-weight: 400;
height: 40px;
line-height: 40px;
margin-right: 8px;
outline: transparent;
padding-bottom: 0;
padding-left: 8px;
padding-right: 8px;
padding-top: 0;
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
vertical-align: top;
}
&::-moz-focus-inner {
border: 0;
}
.ms-Fabric--isFocusVisible &:focus:after {
border: 1px solid #ffffff;
bottom: 0px;
content: "";
left: 0px;
outline: 1px solid #666666;
position: absolute;
right: 0px;
top: 0px;
z-index: 1;
}
@media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
border: none;
bottom: -2px;
left: -2px;
outline-color: ButtonText;
right: -2px;
top: -2px;
}
&:active > * {
left: 0px;
position: relative;
top: 0px;
}
&:hover {
color: #212121;
cursor: pointer;
}
@media screen and (-ms-high-contrast: active){&:hover {
border-color: Highlight;
color: Highlight;
}
&:hover .ms-Button-icon {
color: #0078d4;
}
&:focus {
outline: none;
}
&:active {
color: #000000;
}
&:active .ms-Button-icon {
color: #004578;
}
&:before {
background-color: transparent;
bottom: 0px;
content: "";
height: 2px;
left: 8px;
position: absolute;
right: 8px;
transition: background-color 0.267s cubic-bezier(.1,.25,.75,.9);
}
&:after {
color: transparent;
content: attr(title);
display: block;
font-weight: 700;
height: 1px;
overflow: hidden;
visibility: hidden;
}
.ms-Fabric--isFocusVisible &:focus {
outline: 1px solid #666666;
}
&:hover::before {
border-bottom: 2px solid transparent;
box-sizing: border-box;
}
data-is-focusable={true}
id="Pivot0-Tab0"
name="Test Link 1"
onClick={[Function]}
onKeyDown={[Function]}
onKeyPress={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
role="tab"
type="button"
>
<div
className=
ms-Button-flexContainer
{
align-items: center;
display: flex;
flex-wrap: nowrap;
height: 100%;
justify-content: flex-start;
}
>
<span
className=
ms-Pivot-linkContent

>
<span
className=
ms-Pivot-text
{
display: inline-block;
vertical-align: top;
}
>

Test Link 1
</span>
</span>
</div>
</button>
<button
aria-selected={true}
className=
Expand Down Expand Up @@ -2846,8 +2995,8 @@ exports[`Pivot supports JSX expressions 1`] = `
color: Highlight;
}
data-is-focusable={true}
id="Pivot0-Tab0"
name="Test Link 1"
id="Pivot0-Tab1"
name="Test Link 3"
onClick={[Function]}
onKeyDown={[Function]}
onKeyPress={[Function]}
Expand Down Expand Up @@ -2882,18 +3031,22 @@ exports[`Pivot supports JSX expressions 1`] = `
}
>

Test Link 1
Test Link 3
</span>
</span>
</div>
</button>
</div>
</div>
<div
aria-labelledby="Pivot0-Tab0"
aria-labelledby="Pivot0-Tab1"
role="tabpanel"
>
<div />
<div>
<div>
This is Item 3
</div>
</div>
</div>
</div>
`;