From e7be6d35a765b83c1e600bd8e4695c00f9d6efda Mon Sep 17 00:00:00 2001
From: Klink <85062+dogmar@users.noreply.github.com>
Date: Mon, 18 Dec 2023 15:49:54 -0800
Subject: [PATCH] fix: Incorrect styling of `IconFrame` when using `as` prop
 (#556)

---
 src/components/IconFrame.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/IconFrame.tsx b/src/components/IconFrame.tsx
index 75323ae0..cc87429b 100644
--- a/src/components/IconFrame.tsx
+++ b/src/components/IconFrame.tsx
@@ -1,4 +1,5 @@
 import {
+  type ComponentProps,
   type ReactElement,
   type ReactNode,
   cloneElement,
@@ -143,7 +144,10 @@ const IconFrameSC = styled(Flex)<{
     : {}),
 }))
 
-const IconFrame = forwardRef<HTMLDivElement, IconFrameProps>(
+const IconFrame = forwardRef<
+  HTMLDivElement,
+  IconFrameProps & ComponentProps<typeof IconFrameSC>
+>(
   (
     {
       icon,
@@ -154,6 +158,7 @@ const IconFrame = forwardRef<HTMLDivElement, IconFrameProps>(
       tooltip,
       tooltipProps,
       type = 'tertiary',
+      as,
       ...props
     },
     ref
@@ -162,6 +167,7 @@ const IconFrame = forwardRef<HTMLDivElement, IconFrameProps>(
     if (tooltip && typeof tooltip === 'boolean') {
       tooltip = textValue
     }
+    const forwardedAs = as || (clickable ? ButtonBase : undefined)
 
     let content = (
       <IconFrameSC
@@ -172,9 +178,8 @@ const IconFrame = forwardRef<HTMLDivElement, IconFrameProps>(
         ref={ref}
         flex={false}
         aria-label={textValue}
-        forwardedAs={(props as any).as}
+        {...(forwardedAs ? { forwardedAs } : {})}
         {...(clickable && {
-          forwardedAs: (props as any).as || ButtonBase,
           tabIndex: 0,
           role: 'button',
           type: 'button',