From 040855523776cb753787654634a0cf2a1ebd30e0 Mon Sep 17 00:00:00 2001
From: Jason <jason@scurker.com>
Date: Wed, 5 Jun 2024 09:02:19 -0500
Subject: [PATCH] fix(IconButton): loosen polymorphic type to allow for any
 type of JSXElement (#1494)

---
 .../src/components/IconButton/IconButton.test.tsx | 15 ++-------------
 .../react/src/components/IconButton/index.tsx     |  6 ++----
 2 files changed, 4 insertions(+), 17 deletions(-)

diff --git a/packages/react/src/components/IconButton/IconButton.test.tsx b/packages/react/src/components/IconButton/IconButton.test.tsx
index c7fef5599..46c7e7ae5 100644
--- a/packages/react/src/components/IconButton/IconButton.test.tsx
+++ b/packages/react/src/components/IconButton/IconButton.test.tsx
@@ -40,10 +40,7 @@ it('should add button role for custom components', () => {
   ) {
     return <div data-testid="custom" ref={ref} {...props}></div>;
   });
-  render(
-    // @ts-expect-error this technically should be allowed
-    <IconButton icon="pencil" label="Edit" as={CustomButton} />
-  );
+  render(<IconButton icon="pencil" label="Edit" as={CustomButton} />);
   expect(screen.getByTestId('custom')).toBeInTheDocument();
   expect(screen.getByTestId('custom')).toHaveAttribute('role', 'button');
   expect(screen.getByTestId('custom')).toHaveAttribute('tabIndex', '0');
@@ -121,15 +118,7 @@ test('should return no axe violations when rendered as CustomElement', async ()
   ) {
     return <div data-testid="custom" ref={ref} {...props}></div>;
   });
-  render(
-    <IconButton
-      icon="pencil"
-      label="Edit"
-      // @ts-expect-error this technically should be allowed
-      as={CustomButton}
-      href="/somewhere"
-    />
-  );
+  render(<IconButton icon="pencil" label="Edit" as={CustomButton} />);
   const results = await axe(screen.getByTestId('custom'));
   expect(results).toHaveNoViolations();
 });
diff --git a/packages/react/src/components/IconButton/index.tsx b/packages/react/src/components/IconButton/index.tsx
index 39c207113..f463c4597 100644
--- a/packages/react/src/components/IconButton/index.tsx
+++ b/packages/react/src/components/IconButton/index.tsx
@@ -16,8 +16,7 @@ import {
 
 export interface IconButtonProps
   extends PolymorphicProps<
-    React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>,
-    'button' | 'a'
+    React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>
   > {
   icon: IconType;
   label: React.ReactNode;
@@ -112,7 +111,6 @@ const IconButton = forwardRef(
             'IconButton--error': variant === 'error',
             'IconButton--large': large
           })}
-          // @ts-expect-error the concrete type is unknown, so HTMLElement is expected
           ref={internalRef}
           disabled={disabled}
           tabIndex={disabled ? -1 : tabIndex}
@@ -130,7 +128,7 @@ const IconButton = forwardRef(
       </React.Fragment>
     );
   }
-) as PolymorphicComponent<IconButtonProps, 'button' | 'a'>;
+) as PolymorphicComponent<IconButtonProps>;
 
 IconButton.displayName = 'IconButton';