fix: set the hover and focus color on dropdown item (#1960)

This fix ensures that the color of the text on the dropdown item is set whenever you hover or focus anywhere on the dropdown item. Closes #1950
microsoftgraph · Nov 29, 2022 · 39774a0 · 39774a0
1 parent 22b204a
commit 39774a0
Showing 1 changed file with 6 additions and 8 deletions.
diff --git a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.scss b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.scss
@@ -117,9 +117,15 @@ mgt-people-picker .root {
           border-radius: 4px;
           &:hover {
             background-color: $dropdown-item__background-color--hover;
+            .people-person-text-area {
+              color: $dropdown-item__text__color--hover;
+            }
           }
           &.focused {
             background-color: $dropdown-item__background-color--hover;
+            .people-person-text-area {
+              color: $dropdown-item__text__color--hover;
+            }
           }
           .people-person-text-area {
             margin-left: 13px;
@@ -128,14 +134,6 @@ mgt-people-picker .root {
             overflow: hidden;
             color: $dropdown-item__text__color;
 
-            &:hover {
-              color: $dropdown-item__text__color--hover;
-            }
-
-            &.focused {
-              color: $dropdown-item__text__color--hover;
-            }
-
             .people-person-text {
               font-size: 14px;
               font-weight: normal;