Fixed Pivot to show the correct PivotItem (#8501)

when JSX expressions are used
microsoft · Apr 1, 2019 · c5bd15c · c5bd15c
1 parent 2a358d7
commit c5bd15c
Show file tree

Hide file tree

Showing 4 changed files with 178 additions and 14 deletions.
diff --git a/common/changes/office-ui-fabric-react/Fix-PivotItems_2019-03-27-19-38.json b/common/changes/office-ui-fabric-react/Fix-PivotItems_2019-03-27-19-38.json
@@ -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]"
+}
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.base.tsx b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.base.tsx
@@ -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;

diff --git a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.test.tsx b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.test.tsx
@@ -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();

diff --git a/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap
@@ -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=
@@ -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]}
@@ -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>
 `;