fix: Fix backwards compatibility for hover state colors in System Icon (

#2764) Fixes: #2763 Support for v10 System Icon colors has been lost. [category:Components]
Workday · Jun 10, 2024 · 3570f7c · 3570f7c
1 parent 2c181bb
commit 3570f7c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/modules/react/icon/lib/Svg.tsx b/modules/react/icon/lib/Svg.tsx
@@ -45,8 +45,13 @@ export const svgStencil = createStencil({
 /** @deprecated */
 export const transformColorNameToToken = (color?: string) => {
   if (color && color in base) {
-    return base[color as keyof typeof base];
+    return cssVar(base[color as keyof typeof base]);
   }
+
+  if (color?.startsWith('--')) {
+    return cssVar(color);
+  }
+
   return color;
 };
 

diff --git a/modules/react/icon/lib/SystemIcon.tsx b/modules/react/icon/lib/SystemIcon.tsx
@@ -219,10 +219,13 @@ export const SystemIcon = createComponent('span')({
             backgroundColor: transformColorNameToToken(background),
           }),
           {
-            [deprecatedSystemIconVars.colorHover]: colorHover && cssVar(colorHover),
-            [deprecatedSystemIconVars.fillHover]: fillHover && cssVar(fillHover),
-            [deprecatedSystemIconVars.accentHover]: accentHover && cssVar(accentHover),
-            [deprecatedSystemIconVars.backgroundHover]: backgroundHover && cssVar(backgroundHover),
+            [deprecatedSystemIconVars.colorHover]:
+              colorHover && transformColorNameToToken(colorHover),
+            [deprecatedSystemIconVars.fillHover]: fillHover && transformColorNameToToken(fillHover),
+            [deprecatedSystemIconVars.accentHover]:
+              accentHover && transformColorNameToToken(accentHover),
+            [deprecatedSystemIconVars.backgroundHover]:
+              backgroundHover && transformColorNameToToken(backgroundHover),
           },
         ])}
       />