fix color for dropdown checkable indicator in hc theme (#20621)

* fix color for dropdown checkable indicator for hc theme * update changelog * update changelog * update dropdown styles Co-authored-by: Anna Kellerstein <annkelle@microsoft.com>
microsoft · Nov 16, 2021 · f8113b8 · f8113b8
1 parent 58db204
commit f8113b8
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
@@ -39,6 +39,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `Alert` components to properly pass ref to root slots @chpalac ([#20582](https://github.com/microsoft/fluentui/pull/20582))
 - Fix `Avatar` Components to properly pass ref to root slots @chpalac ([#20588](https://github.com/microsoft/fluentui/pull/20588))
 - Fix `ButtonGroup` comoponent to properly pass ref to root slots @chpalac ([#20595](https://github.com/microsoft/fluentui/pull/20595))
+- Fix color of `Dropdown` checkable indicator on hover in high contrast theme @annabratseiko ([#20621](https://github.com/microsoft/fluentui/pull/20621))
 
 ### Features
 - Adding `ViewPersonSparkleIcon`, `CartIcon`, and fixing `EmojiAddIcon` and `AccessibilityIcon` - @notandrew ([#20054](https://github.com/microsoft/fluentui/pull/20054))

diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Dropdown/dropdownItemStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Dropdown/dropdownItemStyles.ts
@@ -69,8 +69,11 @@ export const dropdownItemStyles: ComponentSlotStylesPrepared<DropdownItemStylesP
     fontSize: v.listItemContentFontSize,
     color: v.listItemContentColor,
   }),
-  checkableIndicator: ({ variables: v }) => ({
+  checkableIndicator: ({ props: p, variables: v }) => ({
     backgroundImage: checkableIndicatorUrl(v.listItemSelectedColor),
+    ...(p.active && {
+      backgroundImage: checkableIndicatorUrl(v.listItemColorHover),
+    }),
     backgroundPosition: 'center',
     backgroundRepeat: 'no-repeat',
     position: 'absolute',