From e2789cbe82e923b9398c096fe4d60e5a1452968a Mon Sep 17 00:00:00 2001
From: George Marshall <george.marshall@consensys.net>
Date: Tue, 29 Aug 2023 12:09:01 -0700
Subject: [PATCH] Adding correct types so ButtonBase and all button variants
 ButtonPrimary, ButtonSecondary, ButtonLink and Button accept Text props
 (#20647)

---
 .../button-base/button-base.types.ts                  | 11 +++++------
 .../component-library/button-link/button-link.tsx     |  2 +-
 .../button-primary/button-primary.tsx                 |  2 +-
 .../component-library/button/button.types.ts          |  6 +++---
 4 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/ui/components/component-library/button-base/button-base.types.ts b/ui/components/component-library/button-base/button-base.types.ts
index 7dd47689c..d19689e47 100644
--- a/ui/components/component-library/button-base/button-base.types.ts
+++ b/ui/components/component-library/button-base/button-base.types.ts
@@ -1,10 +1,7 @@
 import { ReactNode } from 'react';
-import type {
-  StyleUtilityProps,
-  PolymorphicComponentPropWithRef,
-} from '../box';
+import type { PolymorphicComponentPropWithRef } from '../box';
 import { IconColor } from '../../../helpers/constants/design-system';
-import { TextDirection, TextProps } from '../text';
+import { TextDirection, TextProps, TextStyleUtilityProps } from '../text';
 import { IconName } from '../icon';
 import type { IconProps } from '../icon';
 
@@ -15,7 +12,9 @@ export enum ButtonBaseSize {
 }
 
 export type ValidButtonTagType = 'button' | 'a';
-export interface ButtonBaseStyleUtilityProps extends StyleUtilityProps {
+
+export interface ButtonBaseStyleUtilityProps
+  extends Omit<TextStyleUtilityProps, 'as' | 'children' | 'ellipsis'> {
   /**
    * The polymorphic `as` prop allows you to change the root HTML element of the Button component between `button` and `a` tag
    *
diff --git a/ui/components/component-library/button-link/button-link.tsx b/ui/components/component-library/button-link/button-link.tsx
index 221866183..0080ec8cf 100644
--- a/ui/components/component-library/button-link/button-link.tsx
+++ b/ui/components/component-library/button-link/button-link.tsx
@@ -13,7 +13,7 @@ import { ButtonLinkSize, ButtonLinkComponent } from './button-link.types';
 export const ButtonLink: ButtonLinkComponent = React.forwardRef(
   <C extends React.ElementType = 'button' | 'a'>(
     {
-      className,
+      className = '',
       color,
       danger = false,
       disabled = false,
diff --git a/ui/components/component-library/button-primary/button-primary.tsx b/ui/components/component-library/button-primary/button-primary.tsx
index c439364bf..9a2fd6006 100644
--- a/ui/components/component-library/button-primary/button-primary.tsx
+++ b/ui/components/component-library/button-primary/button-primary.tsx
@@ -17,7 +17,7 @@ import {
 export const ButtonPrimary: ButtonPrimaryComponent = React.forwardRef(
   <C extends React.ElementType = 'button' | 'a'>(
     {
-      className,
+      className = '',
       danger = false,
       disabled = false,
       size = ButtonPrimarySize.Md,
diff --git a/ui/components/component-library/button/button.types.ts b/ui/components/component-library/button/button.types.ts
index f0477a65d..e2498a951 100644
--- a/ui/components/component-library/button/button.types.ts
+++ b/ui/components/component-library/button/button.types.ts
@@ -23,15 +23,15 @@ type ButtonPropsByVariant = {
   [ButtonVariant.Primary]: {
     variant?: ButtonVariant.Primary;
     size?: ValidButtonSize; // Allows for only ButtonSize.Sm, ButtonSize.Md, ButtonSize.Lg
-  } & Omit<ButtonPrimaryStyleUtilityProps, 'size'>;
+  } & Omit<ButtonPrimaryStyleUtilityProps, 'size' | 'variant'>;
   [ButtonVariant.Secondary]: {
     variant?: ButtonVariant.Secondary;
     size?: ValidButtonSize; // Allows for only ButtonSize.Sm, ButtonSize.Md, ButtonSize.Lg
-  } & Omit<ButtonSecondaryStyleUtilityProps, 'size'>;
+  } & Omit<ButtonSecondaryStyleUtilityProps, 'size' | 'variant'>;
   [ButtonVariant.Link]: {
     variant?: ButtonVariant.Link;
     size?: ButtonSize;
-  } & Omit<ButtonLinkStyleUtilityProps, 'size'>;
+  } & Omit<ButtonLinkStyleUtilityProps, 'size' | 'variant'>;
 };
 
 type ButtonPropsMap = {