button base box updates

MetaMask · Jul 17, 2023 · fafc39c · fafc39c
1 parent 0f45d75
commit fafc39c
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 245 deletions.
diff --git a/ui/components/component-library/button-base/button-base.js b/ui/components/component-library/button-base/button-base.js
diff --git a/ui/components/component-library/button-base/button-base.stories.tsx b/ui/components/component-library/button-base/button-base.stories.tsx
@@ -5,6 +5,7 @@ import {
   BackgroundColor,
   Display,
   FlexDirection,
+  TextColor,
 } from '../../../helpers/constants/design-system';
 import Box from '../../ui/box/box';
 import { TextDirection, IconName, ValidTag } from '..';
@@ -215,7 +216,11 @@ export const Rtl: StoryFn<typeof ButtonBase> = (args) => (
 export const Ellipsis: StoryFn<typeof ButtonBase> = (args) => (
   <Box backgroundColor={BackgroundColor.primaryMuted} style={{ width: 150 }}>
     <ButtonBase {...args}>Example without ellipsis</ButtonBase>
-    <ButtonBase {...args} ellipsis>
+    <ButtonBase
+      {...args}
+      ellipsis
+      textProps={{ color: TextColor.errorDefault }}
+    >
       Example with ellipsis
     </ButtonBase>
   </Box>

diff --git a/ui/components/component-library/button-base/button-base.tsx b/ui/components/component-library/button-base/button-base.tsx
@@ -1,7 +1,6 @@
-import React, { Ref, forwardRef } from 'react';
+import React from 'react';
 import classnames from 'classnames';
-import { IconName, Icon, IconSize } from '../icon';
-import { Text, ValidTag } from '../text';
+import { IconName, Icon, IconSize, Text } from '..';
 import {
   AlignItems,
   Display,
@@ -12,12 +11,17 @@ import {
   BackgroundColor,
   IconColor,
 } from '../../../helpers/constants/design-system';
-import { ButtonBaseProps, ButtonBaseSize } from './button-base.types';
+import type { PolymorphicRef } from '../box';
+import {
+  ButtonBaseProps,
+  ButtonBaseSize,
+  ButtonBaseComponent,
+} from './button-base.types';
 
-export const ButtonBase = forwardRef(
-  (
+export const ButtonBase: ButtonBaseComponent = React.forwardRef(
+  <C extends React.ElementType = 'button'>(
     {
-      as = ValidTag.Button,
+      as = 'button',
       block,
       children,
       className = '',
@@ -36,11 +40,11 @@ export const ButtonBase = forwardRef(
       color = TextColor.textDefault,
       iconColor = IconColor.iconDefault,
       ...props
-    }: ButtonBaseProps,
-    ref: Ref<HTMLElement>,
+    }: ButtonBaseProps<C>,
+    ref?: PolymorphicRef<C>,
   ) => {
-    const Tag = href ? ValidTag.A : as;
-    if (Tag === ValidTag.A && externalLink) {
+    const Tag = href ? 'a' : as;
+    if (Tag === 'a' && externalLink) {
       props.target = '_blank';
       props.rel = 'noopener noreferrer';
     }
@@ -93,7 +97,7 @@ export const ButtonBase = forwardRef(
           children
         ) : (
           <Text
-            as={ValidTag.Span}
+            as="span"
             ellipsis={ellipsis}
             variant={TextVariant.inherit}
             color={loading ? TextColor.transparent : color}

diff --git a/ui/components/component-library/button-base/button-base.types.ts b/ui/components/component-library/button-base/button-base.types.ts
@@ -1,34 +1,27 @@
 import { ReactNode } from 'react';
-import type { BoxProps } from '../../ui/box/box.d';
-import {
-  Color,
-  IconColor,
-  TextColor,
-} from '../../../helpers/constants/design-system';
-import { TextDirection, TextProps, ValidTag } from '../text';
-import { Icon, IconName } from '../icon';
+import type {
+  StyleUtilityProps,
+  PolymorphicComponentPropWithRef,
+} from '../box';
+import { IconColor } from '../../../helpers/constants/design-system';
+import { TextDirection, TextProps } from '../text';
+import { IconName, IconProps } from '../icon';
 
 export enum ButtonBaseSize {
   Sm = 'sm',
   Md = 'md',
   Lg = 'lg',
 }
 
-export type ButtonOrAnchorTag = ValidTag.Button | ValidTag.A;
-
-export interface ButtonBaseProps extends BoxProps {
+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?: ButtonOrAnchorTag;
+  as?: 'button' | 'a';
   /**
    * Boolean prop to quickly activate box prop display block
    */
   block?: boolean;
-  /**
-   * Additional props to pass to the Text component that wraps the button children
-   */
-  buttonTextProps?: TextProps;
   /**
    * The children to be rendered inside the ButtonBase
    */
@@ -57,9 +50,7 @@ export interface ButtonBaseProps extends BoxProps {
   /**
    * iconProps accepts all the props from Icon
    */
-  startIconProps?: Omit<React.ComponentProps<typeof Icon>, 'name'> & {
-    'data-testid'?: string;
-  };
+  startIconProps?: IconProps;
   /**
    * Add icon to end (right side) of button text passing icon name
    * The name of the icon to display. Should be one of IconName
@@ -68,13 +59,11 @@ export interface ButtonBaseProps extends BoxProps {
   /**
    * iconProps accepts all the props from Icon
    */
-  endIconProps?: Omit<React.ComponentProps<typeof Icon>, 'name'> & {
-    'data-testid'?: string;
-  };
+  endIconProps?: IconProps;
   /**
    * iconLoadingProps accepts all the props from Icon
    */
-  iconLoadingProps?: Omit<React.ComponentProps<typeof Icon>, 'name'>;
+  iconLoadingProps?: IconProps;
   /**
    * Boolean to show loading spinner in button
    */
@@ -85,9 +74,9 @@ export interface ButtonBaseProps extends BoxProps {
    */
   size?: ButtonBaseSize;
   /**
-   * textProps accepts all the props from Icon
+   * textProps are additional props to pass to the Text component that wraps the button children
    */
-  textProps?: TextProps;
+  textProps?: TextProps<'span'>;
   /**
    * Specifies where to display the linked URL.
    */
@@ -97,10 +86,6 @@ export interface ButtonBaseProps extends BoxProps {
    * the linked URL.
    */
   rel?: string;
-  /**
-   * Sets the text color of the button text.
-   */
-  color?: TextColor | Color;
   /**
    * Sets the color of the button icon.
    */
@@ -110,3 +95,10 @@ export interface ButtonBaseProps extends BoxProps {
    */
   textDirection?: TextDirection;
 }
+
+export type ButtonBaseProps<C extends React.ElementType> =
+  PolymorphicComponentPropWithRef<C, ButtonBaseStyleUtilityProps>;
+
+export type ButtonBaseComponent = <C extends React.ElementType = 'button'>(
+  props: ButtonBaseProps<C>,
+) => React.ReactElement | null;