Pivot: Fix HC styling for pivot tabs to show text when selected (#15166)

* Pivot: Fix HC styling for pivot tabs to show text when selected * Change files * set height to 0 * Update Pivot.scss in react-tabs package * Change files * update snapshots * Update change/@fluentui-react-tabs-2020-09-22-11-36-27-pivot-hc-styling.json Co-authored-by: Xu Gao <xugao0131@hotmail.com> * update Pivot.styles.ts file in react-tabs * update snapshots Co-authored-by: Xu Gao <xugao0131@hotmail.com>
microsoft · Sep 23, 2020 · 7b57bf7 · 7b57bf7
1 parent d792de0
commit 7b57bf7
Show file tree

Hide file tree

Showing 11 changed files with 29 additions and 13 deletions.
diff --git a/change/@fluentui-react-tabs-2020-09-22-11-36-27-pivot-hc-styling.json b/change/@fluentui-react-tabs-2020-09-22-11-36-27-pivot-hc-styling.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Fix HC styling for pivot tabs to show text when selected",
+  "packageName": "@fluentui/react-tabs",
+  "email": "ololubek@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-09-22T18:36:27.092Z"
+}
diff --git a/change/office-ui-fabric-react-2020-09-21-18-00-21-pivot-hc-styling.json b/change/office-ui-fabric-react-2020-09-21-18-00-21-pivot-hc-styling.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Pivot: Fix HC styling for pivot tabs to show text when selected",
+  "packageName": "office-ui-fabric-react",
+  "email": "ololubek@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-09-22T01:00:21.290Z"
+}
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.styles.ts b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.styles.ts
@@ -187,7 +187,7 @@ export const getStyles = (props: IPivotStyleProps): IPivotStyles => {
             right: 0,
             bottom: 0,
             content: '""',
-            height: 'auto',
+            height: 0,
           },
           ':hover': {
             backgroundColor: semanticColors.primaryButtonBackgroundHovered,

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
@@ -1840,7 +1840,7 @@ exports[`Pivot renders large tabbed Pivot correctly 1`] = `
             background-color: transparent;
             bottom: 0px;
             content: "";
-            height: auto;
+            height: 0px;
             left: 0px;
             position: absolute;
             right: 0px;
@@ -2613,7 +2613,7 @@ exports[`Pivot renders tabbed Pivot correctly 1`] = `
             background-color: transparent;
             bottom: 0px;
             content: "";
-            height: auto;
+            height: 0px;
             left: 0px;
             position: absolute;
             right: 0px;

diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Pivot.OnChange.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Pivot.OnChange.Example.tsx.shot
@@ -156,7 +156,7 @@ exports[`Component Examples renders Pivot.OnChange.Example.tsx correctly 1`] = `
               background-color: transparent;
               bottom: 0px;
               content: "";
-              height: auto;
+              height: 0px;
               left: 0px;
               position: absolute;
               right: 0px;

diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Pivot.Remove.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Pivot.Remove.Example.tsx.shot
@@ -129,7 +129,7 @@ exports[`Component Examples renders Pivot.Remove.Example.tsx correctly 1`] = `
               background-color: transparent;
               bottom: 0px;
               content: "";
-              height: auto;
+              height: 0px;
               left: 0px;
               position: absolute;
               right: 0px;

diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Pivot.Tabs.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Pivot.Tabs.Example.tsx.shot
@@ -128,7 +128,7 @@ exports[`Component Examples renders Pivot.Tabs.Example.tsx correctly 1`] = `
               background-color: transparent;
               bottom: 0px;
               content: "";
-              height: auto;
+              height: 0px;
               left: 0px;
               position: absolute;
               right: 0px;

diff --git a/...ages/office-ui-fabric-react/src/components/__snapshots__/Pivot.TabsLarge.Example.tsx.shot b/...ages/office-ui-fabric-react/src/components/__snapshots__/Pivot.TabsLarge.Example.tsx.shot
@@ -129,7 +129,7 @@ exports[`Component Examples renders Pivot.TabsLarge.Example.tsx correctly 1`] =
               background-color: transparent;
               bottom: 0px;
               content: "";
-              height: auto;
+              height: 0px;
               left: 0px;
               position: absolute;
               right: 0px;

diff --git a/packages/react-tabs/src/components/Pivot/Pivot.styles.ts b/packages/react-tabs/src/components/Pivot/Pivot.styles.ts
@@ -137,7 +137,7 @@ const getLinkStyles = (
                   right: 0,
                   bottom: 0,
                   content: '""',
-                  height: 'auto',
+                  height: 0,
                 },
                 ':hover': {
                   backgroundColor: semanticColors.primaryButtonBackgroundHovered,

diff --git a/packages/react-tabs/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap b/packages/react-tabs/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap
@@ -1928,7 +1928,7 @@ exports[`Pivot renders large tabbed Pivot correctly 1`] = `
             background-color: transparent;
             bottom: 0px;
             content: "";
-            height: auto;
+            height: 0px;
             left: 0px;
             position: absolute;
             right: 0px;
@@ -2134,7 +2134,7 @@ exports[`Pivot renders large tabbed Pivot correctly 1`] = `
             background-color: transparent;
             bottom: 0px;
             content: "";
-            height: auto;
+            height: 0px;
             left: 0px;
             position: absolute;
             right: 0px;
@@ -2775,7 +2775,7 @@ exports[`Pivot renders tabbed Pivot correctly 1`] = `
             background-color: transparent;
             bottom: 0px;
             content: "";
-            height: auto;
+            height: 0px;
             left: 0px;
             position: absolute;
             right: 0px;
@@ -2981,7 +2981,7 @@ exports[`Pivot renders tabbed Pivot correctly 1`] = `
             background-color: transparent;
             bottom: 0px;
             content: "";
-            height: auto;
+            height: 0px;
             left: 0px;
             position: absolute;
             right: 0px;

diff --git a/packages/react-tabs/src/next/Pivot.scss b/packages/react-tabs/src/next/Pivot.scss
@@ -147,7 +147,7 @@
         right: 0;
         bottom: 0;
         content: '';
-        height: auto;
+        height: 0;
       }
 
       &:hover {