fixed icon styles and disabled

microsoft · Feb 14, 2025 · 1ccba12 · 1ccba12
1 parent 306c796
commit 1ccba12
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/...ags/library/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts b/...ags/library/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts
@@ -197,10 +197,16 @@ const useRootStyles = makeStyles({
     ':hover': {
       backgroundColor: tokens.colorBrandBackgroundHover,
       color: tokens.colorNeutralForegroundOnBrand,
+      [`& .${iconFilledClassName}`]: {
+        color: tokens.colorNeutralForegroundOnBrand,
+      },
     },
     ':active': {
       backgroundColor: tokens.colorBrandBackgroundPressed,
       color: tokens.colorNeutralForegroundOnBrand,
+      [`& .${iconFilledClassName}`]: {
+        color: tokens.colorNeutralForegroundOnBrand,
+      },
     },
   },
   medium: {

diff --git a/packages/react-components/react-tags/library/src/components/Tag/useTagStyles.styles.ts b/packages/react-components/react-tags/library/src/components/Tag/useTagStyles.styles.ts
@@ -285,6 +285,14 @@ const useDismissIconStyles = makeStyles({
       color: tokens.colorCompoundBrandForeground1Pressed,
     },
   },
+  selected: {
+    ':hover': {
+      color: tokens.colorNeutralForegroundOnBrand,
+    },
+    ':active': {
+      color: tokens.colorNeutralForegroundOnBrand,
+    },
+  },
 });
 
 export const usePrimaryTextStyles = makeStyles({
@@ -354,7 +362,7 @@ export const useTagStyles_unstable = (state: TagState): TagState => {
     shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName,
 
     state.disabled ? rootDisabledStyles[appearance] : rootStyles[appearance],
-    selected && rootStyles.selected,
+    selected && !state.disabled && rootStyles.selected,
     rootStyles[size],
 
     !state.media && !state.icon && rootWithoutMediaStyles[size],
@@ -399,6 +407,7 @@ export const useTagStyles_unstable = (state: TagState): TagState => {
       dismissIconStyles.base,
       dismissIconStyles[size],
       !state.disabled && dismissIconStyles[appearance],
+      selected && !state.disabled && dismissIconStyles.selected,
       state.dismissIcon.className,
     );
   }