From f0b75b00f292ed78876042af04f1b17a05d5f123 Mon Sep 17 00:00:00 2001
From: Ian <52504170+ibacher@users.noreply.github.com>
Date: Wed, 5 Jun 2024 16:15:41 -0400
Subject: [PATCH] (fix) CarbonMRS icons should inherit CSS color (#1033)

---
 .../esm-styleguide/src/icons/icons.module.scss     |  5 +++++
 .../framework/esm-styleguide/src/icons/icons.tsx   | 14 ++++++++++++--
 .../esm-styleguide/src/icons/svgs/reset.svg        |  4 ++--
 .../esm-styleguide/src/icons/svgs/save.svg         |  4 ++--
 4 files changed, 21 insertions(+), 6 deletions(-)
 create mode 100644 packages/framework/esm-styleguide/src/icons/icons.module.scss

diff --git a/packages/framework/esm-styleguide/src/icons/icons.module.scss b/packages/framework/esm-styleguide/src/icons/icons.module.scss
new file mode 100644
index 000000000..3fbfbe8fb
--- /dev/null
+++ b/packages/framework/esm-styleguide/src/icons/icons.module.scss
@@ -0,0 +1,5 @@
+.icon {
+  // fill must be marked !important or else it will be overridden by default Carbon selectors
+  // like '.btn__icon svg' that are interpretted as "more specific" than this class.
+  fill: var(--omrs-icon-fill, 'currentColor') !important;
+}
diff --git a/packages/framework/esm-styleguide/src/icons/icons.tsx b/packages/framework/esm-styleguide/src/icons/icons.tsx
index ee7417393..0c407ec1f 100644
--- a/packages/framework/esm-styleguide/src/icons/icons.tsx
+++ b/packages/framework/esm-styleguide/src/icons/icons.tsx
@@ -1,6 +1,7 @@
 /** @category Icons */
-import React, { forwardRef, memo } from 'react';
+import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';
 import classNames, { type Argument } from 'classnames';
+import style from './icons.module.scss';
 
 export type IconProps = {
   className?: Argument;
@@ -403,9 +404,18 @@ export const Icon = memo(
       console.error(`Invalid size '${size}' specified for ${icon}. Defaulting to 20.`);
       size = 20;
     }
+    const iconRef = useRef<SVGSVGElement>(null);
+
+    useImperativeHandle(ref, () => iconRef.current!);
+
+    useEffect(() => {
+      if (iconRef.current) {
+        iconRef.current.style.setProperty('--omrs-icon-fill', fill);
+      }
+    }, []);
 
     return (
-      <svg ref={ref} className={classNames(className)} height={size} width={size} fill={fill} viewBox="0 0 16 16">
+      <svg ref={iconRef} className={classNames(className, style.icon)} height={size} width={size} viewBox="0 0 16 16">
         <use xlinkHref={`#${icon}`} />
       </svg>
     );
diff --git a/packages/framework/esm-styleguide/src/icons/svgs/reset.svg b/packages/framework/esm-styleguide/src/icons/svgs/reset.svg
index 1c77dcc2e..811c1918a 100644
--- a/packages/framework/esm-styleguide/src/icons/svgs/reset.svg
+++ b/packages/framework/esm-styleguide/src/icons/svgs/reset.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg">
-  <path d="M18,28A12,12,0,1,0,6,16v6.2L2.4,18.6,1,20l6,6,6-6-1.4-1.4L8,22.2V16H8A10,10,0,1,1,18,26Z"/>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 14C10.1867 14 11.3467 13.6481 12.3334 12.9888C13.3201 12.3295 14.0892 11.3925 14.5433 10.2961C14.9974 9.19975 15.1162 7.99335 14.8847 6.82946C14.6532 5.66558 14.0818 4.59648 13.2426 3.75736C12.4035 2.91825 11.3344 2.3468 10.1705 2.11529C9.00666 1.88378 7.80026 2.0026 6.7039 2.45673C5.60754 2.91085 4.67047 3.67989 4.01118 4.66658C3.35189 5.65328 3 6.81331 3 8V11.1L1.2 9.3L0.5 10L3.5 13L6.5 10L5.8 9.3L4 11.1V8C4 7.0111 4.29324 6.0444 4.84265 5.22215C5.39206 4.39991 6.17295 3.75904 7.08658 3.38061C8.00021 3.00217 9.00555 2.90315 9.97545 3.09608C10.9454 3.289 11.8363 3.76521 12.5355 4.46447C13.2348 5.16373 13.711 6.05465 13.9039 7.02455C14.0969 7.99446 13.9978 8.99979 13.6194 9.91342C13.241 10.8271 12.6001 11.6079 11.7779 12.1574C10.9556 12.7068 9.98891 13 9 13V14Z" fill="#161616"/>
 </svg>
diff --git a/packages/framework/esm-styleguide/src/icons/svgs/save.svg b/packages/framework/esm-styleguide/src/icons/svgs/save.svg
index ebabae191..e9c8cea25 100644
--- a/packages/framework/esm-styleguide/src/icons/svgs/save.svg
+++ b/packages/framework/esm-styleguide/src/icons/svgs/save.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg">
-  <path d="M27.71,9.29l-5-5A1,1,0,0,0,22,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V10A1,1,0,0,0,27.71,9.29ZM12,6h8v4H12Zm8,20H12V18h8Zm2,0V18a2,2,0,0,0-2-2H12a2,2,0,0,0-2,2v8H6V6h4v4a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V6.41l4,4V26Z"/>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.855 4.64501L11.355 2.14501C11.3083 2.09867 11.2529 2.06201 11.192 2.03712C11.131 2.01224 11.0658 1.99963 11 2.00001H3C2.73478 2.00001 2.48043 2.10537 2.29289 2.2929C2.10536 2.48044 2 2.73479 2 3.00001V13C2 13.2652 2.10536 13.5196 2.29289 13.7071C2.48043 13.8947 2.73478 14 3 14H13C13.2652 14 13.5196 13.8947 13.7071 13.7071C13.8946 13.5196 14 13.2652 14 13V5.00001C14.0004 4.93421 13.9878 4.86897 13.9629 4.80806C13.938 4.74714 13.9013 4.69173 13.855 4.64501ZM6 3.00001H10V5.00001H6V3.00001ZM10 13H6V9.00001H10V13ZM11 13V9.00001C11 8.73479 10.8946 8.48044 10.7071 8.2929C10.5196 8.10537 10.2652 8.00001 10 8.00001H6C5.73478 8.00001 5.48043 8.10537 5.29289 8.2929C5.10536 8.48044 5 8.73479 5 9.00001V13H3V3.00001H5V5.00001C5 5.26523 5.10536 5.51958 5.29289 5.70712C5.48043 5.89465 5.73478 6.00001 6 6.00001H10C10.2652 6.00001 10.5196 5.89465 10.7071 5.70712C10.8946 5.51958 11 5.26523 11 5.00001V3.20501L13 5.20501V13H11Z" fill="#161616"/>
 </svg>