Persona: Fix styles issue caused by unnecessary nesting (microsoft#9946)

* Fix persona JS in CSS bug issue * Change files * Experiments snapshot * Change files
ecraig12345 · Aug 1, 2019 · b884fea · b884fea
1 parent 81c835b
commit b884fea
Show file tree

Hide file tree

Showing 18 changed files with 274 additions and 360 deletions.
diff --git a/change/@uifabric-experiments-2019-07-30-10-32-51-cliffkoh-persona.json b/change/@uifabric-experiments-2019-07-30-10-32-51-cliffkoh-persona.json
@@ -0,0 +1,8 @@
+{
+  "comment": "Experiments snapshot",
+  "type": "none",
+  "packageName": "@uifabric/experiments",
+  "email": "cliff.koh@microsoft.com",
+  "commit": "68e92fda0699006a704575a93cb55335230a4ba6",
+  "date": "2019-07-30T17:32:51.255Z"
+}
diff --git a/change/office-ui-fabric-react-2019-07-25-13-59-00-master.json b/change/office-ui-fabric-react-2019-07-25-13-59-00-master.json
@@ -0,0 +1,8 @@
+{
+  "comment": "Persona: Fix styles issue caused by unnecessary nesting",
+  "type": "patch",
+  "packageName": "office-ui-fabric-react",
+  "email": "cliff.koh@microsoft.com",
+  "commit": "080f2b1f3ca771b92c51704e2948f79567d86b29",
+  "date": "2019-07-25T20:59:00.496Z"
+}
diff --git a/...nents/SelectedItemsList/SelectedPeopleList/__snapshots__/SelectedPeopleList.test.tsx.snap b/...nents/SelectedItemsList/SelectedPeopleList/__snapshots__/SelectedPeopleList.test.tsx.snap
@@ -218,9 +218,6 @@ Array [
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -302,6 +299,9 @@ Array [
                     text-overflow: ellipsis;
                     white-space: nowrap;
                   }
+                  &:hover {
+                    color: #201f1e;
+                  }
                   @media screen and (-ms-high-contrast: active){& {
                     color: HighlightText;
                   }
@@ -716,9 +716,6 @@ Array [
               & .contextualHost {
                 display: none;
               }
-              &:hover $primaryText {
-                color: #201f1e;
-              }
         >
           <div
             className=
@@ -800,6 +797,9 @@ Array [
                     text-overflow: ellipsis;
                     white-space: nowrap;
                   }
+                  &:hover {
+                    color: #201f1e;
+                  }
                   @media screen and (-ms-high-contrast: active){& {
                     color: HighlightText;
                   }

diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts
@@ -65,14 +65,6 @@ export const getStyles = (props: IPersonaStyleProps): IPersonaStyles => {
         selectors: {
           '.contextualHost': {
             display: 'none'
-          },
-
-          ':hover': {
-            selectors: {
-              $primaryText: {
-                color: palette.neutralDark
-              }
-            }
           }
         }
       },
@@ -215,7 +207,12 @@ export const getStyles = (props: IPersonaStyleProps): IPersonaStyles => {
       {
         color: palette.neutralPrimary,
         fontWeight: FontWeights.regular,
-        fontSize: FontSizes.medium
+        fontSize: FontSizes.medium,
+        selectors: {
+          ':hover': {
+            color: palette.neutralDark
+          }
+        }
       },
 
       showSecondaryText && {

diff --git a/...i-fabric-react/src/components/Persona/PersonaCoin/__snapshots__/PersonaCoin.test.tsx.snap b/...i-fabric-react/src/components/Persona/PersonaCoin/__snapshots__/PersonaCoin.test.tsx.snap
@@ -31,9 +31,6 @@ exports[`Persona renders Persona children correctly 1`] = `
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <div
     className=
@@ -115,6 +112,9 @@ exports[`Persona renders Persona children correctly 1`] = `
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     >
       <div
@@ -211,9 +211,6 @@ exports[`Persona renders Persona correctly with UnknownPersona coin 1`] = `
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <div
     className=
@@ -310,6 +307,9 @@ exports[`Persona renders Persona correctly with UnknownPersona coin 1`] = `
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     >
       <div
@@ -403,9 +403,6 @@ exports[`Persona renders Persona correctly with image 1`] = `
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <div
     className=
@@ -511,6 +508,9 @@ exports[`Persona renders Persona correctly with image 1`] = `
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     >
       <div
@@ -604,9 +604,6 @@ exports[`Persona renders Persona correctly with initials 1`] = `
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <div
     className=
@@ -688,6 +685,9 @@ exports[`Persona renders Persona correctly with initials 1`] = `
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     >
       <div
@@ -781,9 +781,6 @@ exports[`Persona renders Persona correctly with no props 1`] = `
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <div
     className=
@@ -880,6 +877,9 @@ exports[`Persona renders Persona correctly with no props 1`] = `
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     />
     <div
@@ -959,9 +959,6 @@ exports[`Persona renders Persona which calls onRenderCoin callback without image
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <div
     className=
@@ -1122,6 +1119,9 @@ exports[`Persona renders Persona which calls onRenderCoin callback without image
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     >
       <div
@@ -1261,9 +1261,6 @@ exports[`Persona renders Persona which calls onRenderPersonaCoin callback with c
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <i
     aria-hidden={true}
@@ -1310,6 +1307,9 @@ exports[`Persona renders Persona which calls onRenderPersonaCoin callback with c
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     >
       <div
@@ -1449,9 +1449,6 @@ exports[`Persona renders correctly with onRender callback 1`] = `
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <div
     className=
@@ -1633,6 +1630,9 @@ exports[`Persona renders correctly with onRender callback 1`] = `
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     >
       <div

diff --git a/...ice-ui-fabric-react/src/components/Persona/__snapshots__/Persona.deprecated.test.tsx.snap b/...ice-ui-fabric-react/src/components/Persona/__snapshots__/Persona.deprecated.test.tsx.snap
@@ -31,9 +31,6 @@ exports[`Persona renders Persona correctly with image 1`] = `
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <div
     className=
@@ -139,6 +136,9 @@ exports[`Persona renders Persona correctly with image 1`] = `
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     >
       <div
@@ -232,9 +232,6 @@ exports[`Persona renders Persona correctly with initials 1`] = `
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <div
     className=
@@ -316,6 +313,9 @@ exports[`Persona renders Persona correctly with initials 1`] = `
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     >
       <div
@@ -409,9 +409,6 @@ exports[`Persona renders Persona correctly with no props 1`] = `
       & .contextualHost {
         display: none;
       }
-      &:hover $primaryText {
-        color: #201f1e;
-      }
 >
   <div
     className=
@@ -508,6 +505,9 @@ exports[`Persona renders Persona correctly with no props 1`] = `
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &:hover {
+            color: #201f1e;
+          }
       dir="auto"
     />
     <div