From 1ccba124b62a9f6af6ffc009626aa97e80ece811 Mon Sep 17 00:00:00 2001
From: Valentyna <vkozlova@microsoft.com>
Date: Fri, 14 Feb 2025 08:19:05 +0100
Subject: [PATCH] fixed icon styles and disabled

---
 .../useInteractionTagPrimaryStyles.styles.ts          |  6 ++++++
 .../library/src/components/Tag/useTagStyles.styles.ts | 11 ++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/react-tags/library/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts b/packages/react-components/react-tags/library/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts
index adda253060341c..a45cbba018e6d3 100644
--- a/packages/react-components/react-tags/library/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts
+++ b/packages/react-components/react-tags/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
index 478bc3c7af38ce..7d39b887e64a03 100644
--- 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,
     );
   }