feat(shared): migrate Button and ButtonBase to ADR-0003 and ADR-0004 shared types (DSYS-483)

packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx

@@ -1,11 +1,11 @@
+import { ButtonBaseSize as ButtonSize } from '@metamask/design-system-shared';
 import React from 'react';
 import { GestureResponderEvent } from 'react-native';
 
 import {
   BoxAlignItems,
   BoxBackgroundColor,
   ButtonIconSize,
-  ButtonSize,
   FontWeight,
   BoxFlexDirection,
   IconName,

packages/design-system-react-native/src/components/Button/Button.stories.tsx

@@ -1,9 +1,12 @@
+import {
+  ButtonBaseSize as ButtonSize,
+  ButtonVariant,
+} from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import type { Meta, StoryObj } from '@storybook/react-native';
 import React from 'react';
 import { View } from 'react-native';
 
-import { ButtonSize, ButtonVariant } from '../../types';
 import { IconName } from '../Icon';
 
 import { Button } from './Button';

packages/design-system-react-native/src/components/Button/Button.test.tsx

@@ -1,8 +1,7 @@
+import { ButtonVariant } from '@metamask/design-system-shared';
 import { render } from '@testing-library/react-native';
 import React from 'react';
 
-import { ButtonVariant } from '../../types';
-
 import { Button } from './Button';
 
 describe('Button', () => {

packages/design-system-react-native/src/components/Button/Button.tsx

@@ -1,7 +1,6 @@
+import { ButtonVariant } from '@metamask/design-system-shared';
 import React from 'react';
 
-import { ButtonVariant } from '../../types';
-
 import type { ButtonProps } from './Button.types';
 import { ButtonPrimary } from './variants/ButtonPrimary';
 import { ButtonSecondary } from './variants/ButtonSecondary';

packages/design-system-react-native/src/components/Button/Button.types.ts

@@ -1,4 +1,4 @@
-import type { ButtonVariant } from '../../types';
+import type { ButtonPropsShared } from '@metamask/design-system-shared';
 
 import type { ButtonPrimaryProps } from './variants/ButtonPrimary';
 import type { ButtonSecondaryProps } from './variants/ButtonSecondary';
@@ -7,13 +7,5 @@ import type { ButtonTertiaryProps } from './variants/ButtonTertiary';
 /**
  * Button component props.
  */
-export type ButtonProps = (
-  | ButtonTertiaryProps
-  | ButtonPrimaryProps
-  | ButtonSecondaryProps
-) & {
-  /**
-   * Variant of Button.
-   */
-  variant?: ButtonVariant;
-};
+export type ButtonProps = ButtonPropsShared &
+  (ButtonTertiaryProps | ButtonPrimaryProps | ButtonSecondaryProps);

packages/design-system-react-native/src/components/Button/index.ts

@@ -1,3 +1,6 @@
-export { ButtonSize, ButtonVariant } from '../../types';
+export {
+  ButtonBaseSize as ButtonSize,
+  ButtonVariant,
+} from '@metamask/design-system-shared';
 export { Button } from './Button';
 export type { ButtonProps } from './Button.types';

packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx

@@ -1,8 +1,8 @@
+import { ButtonBaseSize as ButtonPrimarySize } from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import type { Meta, StoryObj } from '@storybook/react-native';
 import { View } from 'react-native';
 
-import { ButtonPrimarySize } from '../../../../types';
 import { IconName } from '../../../Icon';
 
 import { ButtonPrimary } from './ButtonPrimary';

packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx

@@ -1,11 +1,10 @@
+import { ButtonBaseSize } from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { renderHook } from '@testing-library/react-hooks';
 import { render } from '@testing-library/react-native';
 import React from 'react';
 import * as ReactTestRenderer from 'react-test-renderer';
 
-import { ButtonBaseSize } from '../../../../types';
-
 import { ButtonPrimary } from './ButtonPrimary';
 
 describe('ButtonPrimary', () => {

packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/index.ts

@@ -1,3 +1,3 @@
-export { ButtonPrimarySize } from '../../../../types';
+export { ButtonBaseSize as ButtonPrimarySize } from '@metamask/design-system-shared';
 export { ButtonPrimary } from './ButtonPrimary';
 export type { ButtonPrimaryProps } from './ButtonPrimary.types';

packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx

@@ -1,8 +1,8 @@
+import { ButtonBaseSize as ButtonSecondarySize } from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import type { Meta, StoryObj } from '@storybook/react-native';
 import { View } from 'react-native';
 
-import { ButtonSecondarySize } from '../../../../types';
 import { IconName } from '../../../Icon';
 
 import { ButtonSecondary } from './ButtonSecondary';

packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx

@@ -1,11 +1,10 @@
+import { ButtonBaseSize } from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { renderHook } from '@testing-library/react-hooks';
 import { render } from '@testing-library/react-native';
 import React from 'react';
 import * as ReactTestRenderer from 'react-test-renderer';
 
-import { ButtonBaseSize } from '../../../../types';
-
 import { ButtonSecondary } from './ButtonSecondary';
 
 describe('ButtonSecondary', () => {

packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/index.ts

@@ -1,3 +1,3 @@
-export { ButtonSecondarySize } from '../../../../types';
+export { ButtonBaseSize as ButtonSecondarySize } from '@metamask/design-system-shared';
 export { ButtonSecondary } from './ButtonSecondary';
 export type { ButtonSecondaryProps } from './ButtonSecondary.types';

packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx

@@ -1,8 +1,8 @@
+import { ButtonBaseSize as ButtonTertiarySize } from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import type { Meta, StoryObj } from '@storybook/react-native';
 import { View } from 'react-native';
 
-import { ButtonTertiarySize } from '../../../../types';
 import { IconName } from '../../../Icon';
 
 import { ButtonTertiary } from './ButtonTertiary';

packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx

@@ -1,11 +1,10 @@
+import { ButtonBaseSize } from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { renderHook } from '@testing-library/react-hooks';
 import { render } from '@testing-library/react-native';
 import React from 'react';
 import * as ReactTestRenderer from 'react-test-renderer';
 
-import { ButtonBaseSize } from '../../../../types';
-
 import { ButtonTertiary } from './ButtonTertiary';
 
 describe('ButtonTertiary', () => {

packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/index.ts

@@ -1,3 +1,3 @@
-export { ButtonTertiarySize } from '../../../../types';
+export { ButtonBaseSize as ButtonTertiarySize } from '@metamask/design-system-shared';
 export { ButtonTertiary } from './ButtonTertiary';
 export type { ButtonTertiaryProps } from './ButtonTertiary.types';

packages/design-system-react-native/src/components/ButtonBase/ButtonBase.constants.ts

@@ -1,4 +1,4 @@
-import { ButtonBaseSize } from '../../types';
+import { ButtonBaseSize } from '@metamask/design-system-shared';
 
 export const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION: Record<
   ButtonBaseSize,

packages/design-system-react-native/src/components/ButtonBase/ButtonBase.stories.tsx

@@ -1,6 +1,7 @@
+import { ButtonBaseSize } from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-native';
 
-import { BoxFlexDirection, ButtonBaseSize } from '../../types';
+import { BoxFlexDirection } from '../../types';
 import { Box } from '../Box';
 import { IconName } from '../Icon';
 

packages/design-system-react-native/src/components/ButtonBase/ButtonBase.test.tsx

@@ -1,11 +1,12 @@
+import { ButtonBaseSize } from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { renderHook } from '@testing-library/react-hooks';
 import { render, fireEvent, waitFor } from '@testing-library/react-native';
 import React from 'react';
 import { View, Text } from 'react-native';
 import * as ReactTestRenderer from 'react-test-renderer';
 
-import { ButtonBaseSize, IconName } from '../../types';
+import { IconName } from '../../types';
 
 import { ButtonBase } from './ButtonBase';
 

packages/design-system-react-native/src/components/ButtonBase/ButtonBase.tsx

@@ -1,9 +1,9 @@
+import { ButtonBaseSize } from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import React, { useMemo } from 'react';
 import { View } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 
-import { ButtonBaseSize } from '../../types';
 import { Icon, IconColor, IconSize } from '../Icon';
 import { ButtonAnimated } from '../temp-components/ButtonAnimated';
 import { Spinner } from '../temp-components/Spinner';

packages/design-system-react-native/src/components/ButtonBase/ButtonBase.types.ts

@@ -1,14 +1,14 @@
+import type { ButtonBasePropsShared } from '@metamask/design-system-shared';
 import type { PressableProps, StyleProp, ViewStyle } from 'react-native';
 
-import type { ButtonBaseSize } from '../../types';
 import type { IconProps, IconName } from '../Icon';
 import type { SpinnerProps } from '../temp-components/Spinner';
 import type { TextProps } from '../Text';
 
 /**
  * ButtonBase component props.
  */
-export type ButtonBaseProps = {
+export type ButtonBaseProps = ButtonBasePropsShared & {
   /**
    * Required prop for the content to be rendered within the ButtonBase
    */
@@ -17,23 +17,6 @@ export type ButtonBaseProps = {
    * Optional props to be passed to the Text component when children is a string
    */
   textProps?: Omit<Partial<TextProps>, 'children'>;
-  /**
-   * Optional prop to control the size of the ButtonBase
-   * Possible values: ButtonBaseSize.Sm (32px), ButtonBaseSize.Md (40px), ButtonBaseSize.Lg (48px)
-   *
-   * @default ButtonBaseSize.Lg
-   */
-  size?: ButtonBaseSize;
-  /**
-   * Optional prop that when true, shows a loading spinner
-   *
-   * @default false
-   */
-  isLoading?: boolean;
-  /**
-   * Optional prop for text to display when button is in loading state
-   */
-  loadingText?: string;
   /**
    * Optional prop to pass additional properties to the end icon
    */
@@ -62,18 +45,6 @@ export type ButtonBaseProps = {
    * Optional prop for a custom element to show at the end of the button
    */
   endAccessory?: React.ReactNode;
-  /**
-   * Optional prop that when true, disables the button
-   *
-   * @default false
-   */
-  isDisabled?: boolean;
-  /**
-   * Optional prop that when true, makes the button take up the full width of its container
-   *
-   * @default false
-   */
-  isFullWidth?: boolean;
   /**
    * Optional prop to add twrnc overriding classNames.
    * Can be a string or a function that receives pressed state and returns a string.
@@ -121,10 +92,10 @@ export type ButtonBaseProps = {
     nativeEvent: { actionName: string };
   }) => void;
 } & Omit<
-  PressableProps,
-  | 'accessibilityRole'
-  | 'accessibilityLabel'
-  | 'accessibilityHint'
-  | 'accessibilityActions'
-  | 'onAccessibilityAction'
->;
+    PressableProps,
+    | 'accessibilityRole'
+    | 'accessibilityLabel'
+    | 'accessibilityHint'
+    | 'accessibilityActions'
+    | 'onAccessibilityAction'
+  >;

packages/design-system-react-native/src/components/ButtonBase/index.ts

@@ -1,4 +1,4 @@
-export { ButtonBaseSize } from '../../types';
+export { ButtonBaseSize } from '@metamask/design-system-shared';
 export { ButtonBase } from './ButtonBase';
 export { TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from './ButtonBase.constants';
 export type { ButtonBaseProps } from './ButtonBase.types';

packages/design-system-react-native/src/components/ButtonHero/ButtonHero.stories.tsx

@@ -1,8 +1,8 @@
+import { ButtonBaseSize as ButtonHeroSize } from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-native';
 import React from 'react';
 import { View } from 'react-native';
 
-import { ButtonHeroSize } from '../../types';
 import { IconName } from '../Icon';
 
 import { ButtonHero } from './ButtonHero';

packages/design-system-react-native/src/components/ButtonHero/index.ts

@@ -1,3 +1,3 @@
 export { ButtonHero } from './ButtonHero';
 export type { ButtonHeroProps } from './ButtonHero.types';
-export { ButtonHeroSize } from '../../types';
+export { ButtonBaseSize as ButtonHeroSize } from '@metamask/design-system-shared';

packages/design-system-react-native/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,8 +1,8 @@
+import { ButtonVariant } from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-native';
 import { useState, useRef } from 'react';
 import { View } from 'react-native';
 
-import { ButtonVariant } from '../../types';
 import { Button } from '../Button';
 
 import { Checkbox } from './Checkbox';

packages/design-system-react-native/src/types/index.ts

@@ -223,38 +223,6 @@ export enum BoxBorderColor {
   Transparent = 'border-transparent',
 }
 
-/**
- * ButtonBase - size
- */
-export enum ButtonBaseSize {
-  /**
-   * Represents a small button size (32px).
-   */
-  Sm = 'sm',
-  /**
-   * Represents a medium button size (40px).
-   */
-  Md = 'md',
-  /**
-   * Represents a large button size (48px).
-   */
-  Lg = 'lg',
-}
-export { ButtonBaseSize as ButtonSize };
-export { ButtonBaseSize as ButtonPrimarySize };
-export { ButtonBaseSize as ButtonSecondarySize };
-export { ButtonBaseSize as ButtonTertiarySize };
-export { ButtonBaseSize as ButtonHeroSize };
-
-/**
- * Button - variant
- */
-export enum ButtonVariant {
-  Primary = 'primary',
-  Secondary = 'secondary',
-  Tertiary = 'tertiary',
-}
-
 /**
  * ButtonIcon - size
  */

packages/design-system-react/src/components/BannerBase/BannerBase.tsx

@@ -1,10 +1,10 @@
+import { ButtonBaseSize as ButtonSize } from '@metamask/design-system-shared';
 import React, { forwardRef } from 'react';
 
 import {
   BoxAlignItems,
   BoxBackgroundColor,
   ButtonIconSize,
-  ButtonSize,
   FontWeight,
   BoxFlexDirection,
   IconName,

packages/design-system-react/src/components/Button/Button.stories.tsx

@@ -1,7 +1,10 @@
+import {
+  ButtonVariant,
+  ButtonBaseSize as ButtonSize,
+} from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { ButtonVariant, ButtonSize } from '../../types';
 import { IconName } from '../Icon';
 
 import { Button } from './Button';
@@ -152,7 +155,7 @@
 
 export const IsInverse: Story = {
   render: () => (
-    <div className="space-y-4 bg-primary-default p-4">
+    <div className="bg-primary-default space-y-4 p-4">
       <div className="flex gap-2">
         <Button isInverse>Primary Inverse</Button>
         <Button variant={ButtonVariant.Secondary} isInverse>

packages/design-system-react/src/components/Button/Button.test.tsx

@@ -1,7 +1,7 @@
+import { ButtonVariant } from '@metamask/design-system-shared';
 import { render, screen } from '@testing-library/react';
 import React, { createRef } from 'react';
 
-import { ButtonVariant } from '../../types';
 import { IconName } from '../Icon';
 
 import { Button } from './Button';

packages/design-system-react/src/components/Button/Button.tsx

@@ -1,7 +1,6 @@
+import { ButtonVariant } from '@metamask/design-system-shared';
 import React, { forwardRef } from 'react';
 
-import { ButtonVariant } from '../../types';
-
 import type { ButtonProps } from './Button.types';
 import { ButtonPrimary } from './variants/ButtonPrimary';
 import type { ButtonPrimaryProps } from './variants/ButtonPrimary';