From f175c031b4e226935147f0ee763aa1e086429bbb Mon Sep 17 00:00:00 2001
From: Claire Peng <clairepeng94@gmail.com>
Date: Sun, 26 Oct 2025 13:22:38 +0000
Subject: [PATCH 1/2] client/common/icons: update to ts, no-verify

---
 client/common/{icons.jsx => icons.tsx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename client/common/{icons.jsx => icons.tsx} (100%)

diff --git a/client/common/icons.jsx b/client/common/icons.tsx
similarity index 100%
rename from client/common/icons.jsx
rename to client/common/icons.tsx

From 69018f0916314d0ae8fa6a53c41c3d8bc17f2a71 Mon Sep 17 00:00:00 2001
From: Claire Peng <clairepeng94@gmail.com>
Date: Sun, 26 Oct 2025 13:23:28 +0000
Subject: [PATCH 2/2] client/common/icons: add types & update snapshot test

---
 client/common/icons.tsx                       | 40 ++++++++++++-------
 .../__snapshots__/Nav.unit.test.jsx.snap      |  8 ++--
 2 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/client/common/icons.tsx b/client/common/icons.tsx
index bd5a673e2a..80411bf937 100644
--- a/client/common/icons.tsx
+++ b/client/common/icons.tsx
@@ -26,13 +26,25 @@ import Filter from '../images/filter.svg';
 import Cross from '../images/cross.svg';
 import Copy from '../images/copy.svg';
 
+export interface IconColors {
+  default?: string;
+  hover?: string;
+}
+
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+  'aria-label'?: string;
+  Icon?: IconColors;
+}
+
 // HOC that adds the right web accessibility props
 // https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html
 
 // could also give these a default size, color, etc. based on the theme
 // Need to add size to these - like small icon, medium icon, large icon. etc.
-function withLabel(SvgComponent) {
-  const StyledIcon = styled(SvgComponent)`
+function withLabel(
+  SvgComponent: React.ComponentType<React.SVGProps<SVGSVGElement>>
+) {
+  const StyledIcon = styled(SvgComponent)<IconProps>`
     &&& {
       color: ${(props) => props.Icon?.default};
       & g,
@@ -53,27 +65,27 @@ function withLabel(SvgComponent) {
     }
   `;
 
-  const Icon = (props) => {
-    const { 'aria-label': ariaLabel } = props;
+  // Necessary because styled components inject a different type for the ref prop
+  type StyledIconProps = Omit<
+    React.ComponentProps<typeof StyledIcon>,
+    'ref'
+  > & {
+    ref?: React.Ref<SVGSVGElement>;
+  };
+
+  const Icon = (props: StyledIconProps) => {
+    const { 'aria-label': ariaLabel, ...rest } = props;
     if (ariaLabel) {
       return (
         <StyledIcon
-          {...props}
+          {...rest}
           aria-label={ariaLabel}
           role="img"
           focusable="false"
         />
       );
     }
-    return <StyledIcon {...props} aria-hidden focusable="false" />;
-  };
-
-  Icon.propTypes = {
-    'aria-label': PropTypes.string
-  };
-
-  Icon.defaultProps = {
-    'aria-label': null
+    return <StyledIcon {...rest} aria-hidden focusable="false" />;
   };
 
   return Icon;
diff --git a/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap b/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap
index 02e4776b1c..382e49aadd 100644
--- a/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap
+++ b/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap
@@ -351,7 +351,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
           >
             <test-file-stub
               aria-hidden="true"
-              classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
+              classname="icons__StyledIcon-sc-1rmv3zl-0 bKwKVB"
               focusable="false"
             />
           </button>
@@ -367,7 +367,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
         >
           <test-file-stub
             aria-hidden="true"
-            classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
+            classname="icons__StyledIcon-sc-1rmv3zl-0 bKwKVB"
             focusable="false"
           />
         </button>
@@ -971,7 +971,7 @@ exports[`Nav renders editor version for mobile 1`] = `
           >
             <test-file-stub
               aria-hidden="true"
-              classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
+              classname="icons__StyledIcon-sc-1rmv3zl-0 bKwKVB"
               focusable="false"
             />
           </button>
@@ -987,7 +987,7 @@ exports[`Nav renders editor version for mobile 1`] = `
         >
           <test-file-stub
             aria-hidden="true"
-            classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
+            classname="icons__StyledIcon-sc-1rmv3zl-0 bKwKVB"
             focusable="false"
           />
         </button>