fix lint issue

MetaMask · Jul 18, 2023 · 1083b90 · 1083b90
1 parent dc64796
commit 1083b90
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 11 deletions.
diff --git a/ui/components/component-library/button-base/button-base.tsx b/ui/components/component-library/button-base/button-base.tsx
@@ -19,9 +19,8 @@ import {
 } from './button-base.types';
 
 export const ButtonBase: ButtonBaseComponent = React.forwardRef(
-  <C extends React.ElementType = 'button'>(
+  <C extends React.ElementType = 'button' | 'a'>(
     {
-      as = 'button',
       block,
       children,
       className = '',
@@ -43,20 +42,16 @@ export const ButtonBase: ButtonBaseComponent = React.forwardRef(
     }: ButtonBaseProps<C>,
     ref?: PolymorphicRef<C>,
   ) => {
-    const Tag = href ? 'a' : as;
-    if (Tag === 'a' && externalLink) {
-      props.target = '_blank';
-      props.rel = 'noopener noreferrer';
-    }
-
     return (
       <Text
-        as={Tag}
+        as={href ? 'a' : 'button'}
         backgroundColor={BackgroundColor.backgroundAlternative}
         variant={TextVariant.bodyMdMedium}
         color={loading ? TextColor.transparent : color}
         ref={ref}
         href={href}
+        target={externalLink ? '_blank' : undefined}
+        rel={externalLink ? 'noopener noreferrer' : undefined}
         paddingLeft={4}
         paddingRight={4}
         ellipsis={ellipsis}

diff --git a/ui/components/component-library/button-base/button-base.types.ts b/ui/components/component-library/button-base/button-base.types.ts
@@ -13,12 +13,13 @@ export enum ButtonBaseSize {
   Lg = 'lg',
 }
 
+export type ValidButtonTagType = 'button' | 'a';
 export interface ButtonBaseStyleUtilityProps extends StyleUtilityProps {
   /**
    * The polymorphic `as` prop allows you to change the root HTML element of the Button component between `button` and `a` tag
    *
    */
-  as?: 'button' | 'a';
+  as?: ValidButtonTagType;
   /**
    * Boolean prop to quickly activate box prop display block
    */
@@ -100,6 +101,8 @@ export interface ButtonBaseStyleUtilityProps extends StyleUtilityProps {
 export type ButtonBaseProps<C extends React.ElementType> =
   PolymorphicComponentPropWithRef<C, ButtonBaseStyleUtilityProps>;
 
-export type ButtonBaseComponent = <C extends React.ElementType = 'button'>(
+export type ButtonBaseComponent = <
+  C extends React.ElementType = 'button' | 'a',
+>(
   props: ButtonBaseProps<C>,
 ) => React.ReactElement | null;