[Northstar][Dropdown] Fix styling mutation when merging themes (#24787)

* [Northstar][Dropdown] Fix styling mutation when merging themes * fix * Update CHANGELOG.md Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
microsoft · Sep 16, 2022 · 9c8ab6e · 9c8ab6e
1 parent e23edb7
commit 9c8ab6e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
@@ -28,6 +28,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Remove `rotate(360deg)` from `PopupContent` content styles @yuanboxue-amber ([#24432](https://github.com/microsoft/fluentui/pull/24432))
 - Fix `FocusZone` to reset tabindex when focus is outside the zone with prop `shouldResetActiveElementWhenTabFromZone` @yuanboxue-amber ([#24463](https://github.com/microsoft/fluentui/pull/24463))
 - Change `useLayoutEffect` in `Dropdown` to `useIsomorphicLayoutEffect` @marwan38 ([#24559](https://github.com/microsoft/fluentui/pull/24559))
+- Fix styling mutation when merging themes in `Dropdown` @petrjaros ([#24787](https://github.com/microsoft/fluentui/pull/24787))
 
 ### Performance
 - Avoid memory trashing in `felaExpandCssShorthandsPlugin` @layershifter ([#24663](https://github.com/microsoft/fluentui/pull/24663))

diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Dropdown/dropdownStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Dropdown/dropdownStyles.ts
@@ -10,15 +10,15 @@ const transparentColorStyle: ICSSInJSStyle = {
   borderBottomColor: 'transparent',
 };
 
-const transparentColorStyleObj: ICSSInJSStyle = {
+const createTransparentColorStyleObj = (): ICSSInJSStyle => ({
   ...transparentColorStyle,
-  ':hover': transparentColorStyle,
-  ':active': transparentColorStyle,
+  ':hover': { ...transparentColorStyle },
+  ':active': { ...transparentColorStyle },
   ':focus': {
     ...transparentColorStyle,
-    ':active': transparentColorStyle,
+    ':active': { ...transparentColorStyle },
   },
-};
+});
 
 const getWidth = (p: DropdownStylesProps, v: DropdownVariables): string => {
   if (p.fluid) {
@@ -99,7 +99,7 @@ export const dropdownStyles: ComponentSlotStylesPrepared<DropdownStylesProps, Dr
         getBorderFocusStyles({ variables: siteVariables })[':focus-visible']),
     }),
     ...(p.inline && {
-      ...transparentColorStyleObj,
+      ...createTransparentColorStyleObj(),
       alignItems: 'center',
     }),
     ...(p.inverted && {
@@ -156,7 +156,7 @@ export const dropdownStyles: ComponentSlotStylesPrepared<DropdownStylesProps, Dr
       overflow: 'hidden',
       boxShadow: 'none',
       minHeight: pxToRem(32),
-      ...transparentColorStyleObj,
+      ...createTransparentColorStyleObj(),
       margin: '0',
       justifyContent: 'left',
       padding: v.comboboxPaddingButton,
@@ -172,10 +172,10 @@ export const dropdownStyles: ComponentSlotStylesPrepared<DropdownStylesProps, Dr
           height: '100%',
         }),
       }),
-      ...transparentColorStyleObj,
+      ...createTransparentColorStyleObj(),
       ':focus': {
         color: v.color,
-        ...transparentColorStyleObj,
+        ...createTransparentColorStyleObj(),
       },
       ':focus-visible': {
         color: v.color,