fix: Applying correct styles to icon when ToggleButton is checked and…

… has a subtle or transparent appearance (#30775)
microsoft · Mar 13, 2024 · 9865fa9 · 9865fa9
1 parent 0e4c8b7
commit 9865fa9
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/change/@fluentui-react-button-452be093-2c6e-402a-8a9c-52875d63bfac.json b/change/@fluentui-react-button-452be093-2c6e-402a-8a9c-52875d63bfac.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Applying correct styles to icon when ToggleButton is checked and has a subtle or transparent appearance.",
+  "packageName": "@fluentui/react-button",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/...react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.styles.ts b/...react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.styles.ts
@@ -278,9 +278,8 @@ export const useToggleButtonStyles_unstable = (state: ToggleButtonState): Toggle
   if (state.icon) {
     state.icon.className = mergeClasses(
       toggleButtonClassNames.icon,
-      (appearance === 'subtle' || appearance === 'transparent') &&
-        iconCheckedStyles.subtleOrTransparent &&
-        iconCheckedStyles.highContrast,
+      (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent,
+      iconCheckedStyles.highContrast,
       state.icon.className,
     );
   }