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

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

@@ -3,13 +3,14 @@ import {
   BoxBackgroundColor,
   BoxFlexDirection,
   ButtonIconSize,
+  ButtonSize,
   FontWeight,
+  IconName,
   TextVariant,
 } from '@metamask/design-system-shared';
 import React from 'react';
 import { GestureResponderEvent } from 'react-native';
 
-import { ButtonSize, IconName } from '../../types';
 import { Box } from '../Box';
 import { Button } from '../Button';
 import { ButtonIcon } from '../ButtonIcon';

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

@@ -1,11 +1,13 @@
+import {
+  ButtonSize,
+  ButtonVariant,
+  IconName,
+} 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';
 import type { ButtonProps } from './Button.types';
 

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,3 @@
-export { ButtonSize, ButtonVariant } from '../../types';
+export { 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,10 +1,8 @@
+import { ButtonSize, IconName } 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';
 import type { ButtonPrimaryProps } from './ButtonPrimary.types';
 
@@ -17,7 +15,7 @@ const meta: Meta<ButtonPrimaryProps> = {
     },
     size: {
       control: 'select',
-      options: ButtonPrimarySize,
+      options: ButtonSize,
     },
     isLoading: {
       control: 'boolean',
@@ -69,7 +67,7 @@ const ButtonPrimaryStory: React.FC<ButtonPrimaryProps> = ({
 export const Default: Story = {
   args: {
     children: 'Sample ButtonPrimary Text',
-    size: ButtonPrimarySize.Lg,
+    size: ButtonSize.Lg,
     isLoading: false,
     loadingText: 'Loading',
     startIconName: IconName.Add,
@@ -85,9 +83,9 @@ export const Default: Story = {
 export const Sizes: Story = {
   render: () => (
     <View style={{ gap: 16 }}>
-      <ButtonPrimary size={ButtonPrimarySize.Sm}>ButtonSize Sm</ButtonPrimary>
-      <ButtonPrimary size={ButtonPrimarySize.Md}>ButtonSize Md</ButtonPrimary>
-      <ButtonPrimary size={ButtonPrimarySize.Lg}>
+      <ButtonPrimary size={ButtonSize.Sm}>ButtonSize Sm</ButtonPrimary>
+      <ButtonPrimary size={ButtonSize.Md}>ButtonSize Md</ButtonPrimary>
+      <ButtonPrimary size={ButtonSize.Lg}>
         ButtonSize Lg (Default)
       </ButtonPrimary>
     </View>

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/ButtonPrimary.tsx

@@ -6,6 +6,8 @@ import { TextVariant, FontWeight } from '../../../Text';
 
 import type { ButtonPrimaryProps } from './ButtonPrimary.types';
 
+// Internal Button variant.
+// Consumers should use `Button` with `variant`.
 export const ButtonPrimary = ({
   children,
   textProps,

packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/README.md

@@ -1,5 +1,8 @@
 # ButtonPrimary
 
+`ButtonPrimary` is an internal variant of the public `Button` component.
+Consumers should use `Button` with `variant={ButtonVariant.Primary}` instead of using `ButtonPrimary` directly.
+
 `ButtonPrimary` is a button for most important and desired action to guide the user.
 
 ## Props

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

@@ -1,3 +1,2 @@
-export { ButtonPrimarySize } from '../../../../types';
 export { ButtonPrimary } from './ButtonPrimary';
 export type { ButtonPrimaryProps } from './ButtonPrimary.types';

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

@@ -1,10 +1,8 @@
+import { ButtonSize, IconName } 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';
 import type { ButtonSecondaryProps } from './ButtonSecondary.types';
 
@@ -17,7 +15,7 @@ const meta: Meta<ButtonSecondaryProps> = {
     },
     size: {
       control: 'select',
-      options: ButtonSecondarySize,
+      options: ButtonSize,
     },
     isLoading: {
       control: 'boolean',
@@ -69,7 +67,7 @@ const ButtonSecondaryStory: React.FC<ButtonSecondaryProps> = ({
 export const Default: Story = {
   args: {
     children: 'Sample ButtonSecondary Text',
-    size: ButtonSecondarySize.Lg,
+    size: ButtonSize.Lg,
     isLoading: false,
     loadingText: 'Loading',
     startIconName: IconName.Add,
@@ -85,13 +83,9 @@ export const Default: Story = {
 export const Sizes: Story = {
   render: () => (
     <View style={{ gap: 16 }}>
-      <ButtonSecondary size={ButtonSecondarySize.Sm}>
-        ButtonSize Sm
-      </ButtonSecondary>
-      <ButtonSecondary size={ButtonSecondarySize.Md}>
-        ButtonSize Md
-      </ButtonSecondary>
-      <ButtonSecondary size={ButtonSecondarySize.Lg}>
+      <ButtonSecondary size={ButtonSize.Sm}>ButtonSize Sm</ButtonSecondary>
+      <ButtonSecondary size={ButtonSize.Md}>ButtonSize Md</ButtonSecondary>
+      <ButtonSecondary size={ButtonSize.Lg}>
         ButtonSize Lg (Default)
       </ButtonSecondary>
     </View>

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/ButtonSecondary.tsx

@@ -6,6 +6,8 @@ import { TextVariant, FontWeight } from '../../../Text';
 
 import type { ButtonSecondaryProps } from './ButtonSecondary.types';
 
+// Internal Button variant.
+// Consumers should use `Button` with `variant`.
 export const ButtonSecondary = ({
   children,
   textProps,

packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/README.md

@@ -1,5 +1,8 @@
 # ButtonSecondary
 
+`ButtonSecondary` is an internal variant of the public `Button` component.
+Consumers should use `Button` with `variant={ButtonVariant.Secondary}` instead of using `ButtonSecondary` directly.
+
 `ButtonSecondary` is a button for additional options that are helpful.
 
 ## Props

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

@@ -1,3 +1,2 @@
-export { ButtonSecondarySize } from '../../../../types';
 export { ButtonSecondary } from './ButtonSecondary';
 export type { ButtonSecondaryProps } from './ButtonSecondary.types';

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

@@ -1,10 +1,8 @@
+import { ButtonSize, IconName } 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';
 import type { ButtonTertiaryProps } from './ButtonTertiary.types';
 
@@ -17,7 +15,7 @@ const meta: Meta<ButtonTertiaryProps> = {
     },
     size: {
       control: 'select',
-      options: ButtonTertiarySize,
+      options: ButtonSize,
     },
     isLoading: {
       control: 'boolean',
@@ -69,7 +67,7 @@ const ButtonTertiaryStory: React.FC<ButtonTertiaryProps> = ({
 export const Default: Story = {
   args: {
     children: 'Sample ButtonTertiary Text',
-    size: ButtonTertiarySize.Lg,
+    size: ButtonSize.Lg,
     isLoading: false,
     loadingText: 'Loading',
     startIconName: IconName.Add,
@@ -85,13 +83,9 @@ export const Default: Story = {
 export const Sizes: Story = {
   render: () => (
     <View style={{ gap: 16 }}>
-      <ButtonTertiary size={ButtonTertiarySize.Sm}>
-        ButtonSize Sm
-      </ButtonTertiary>
-      <ButtonTertiary size={ButtonTertiarySize.Md}>
-        ButtonSize Md
-      </ButtonTertiary>
-      <ButtonTertiary size={ButtonTertiarySize.Lg}>
+      <ButtonTertiary size={ButtonSize.Sm}>ButtonSize Sm</ButtonTertiary>
+      <ButtonTertiary size={ButtonSize.Md}>ButtonSize Md</ButtonTertiary>
+      <ButtonTertiary size={ButtonSize.Lg}>
         ButtonSize Lg (Default)
       </ButtonTertiary>
     </View>

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/ButtonTertiary.tsx

@@ -6,6 +6,8 @@ import { TextVariant, FontWeight } from '../../../Text';
 
 import type { ButtonTertiaryProps } from './ButtonTertiary.types';
 
+// Internal Button variant.
+// Consumers should use `Button` with `variant`.
 export const ButtonTertiary = ({
   children,
   textProps,

packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/README.md

@@ -1,5 +1,8 @@
 # ButtonTertiary
 
+`ButtonTertiary` is an internal variant of the public `Button` component.
+Consumers should use `Button` with `variant={ButtonVariant.Tertiary}` instead of using `ButtonTertiary` directly.
+
 `ButtonTertiary` is a button for optional and lowest attention.
 
 ## Props

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

@@ -1,3 +1,2 @@
-export { ButtonTertiarySize } from '../../../../types';
 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,9 +1,11 @@
-import { BoxFlexDirection } from '@metamask/design-system-shared';
+import {
+  BoxFlexDirection,
+  ButtonBaseSize,
+  IconName,
+} from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-native';
 
-import { ButtonBaseSize } from '../../types';
 import { Box } from '../Box';
-import { IconName } from '../Icon';
 
 import { ButtonBase } from './ButtonBase';
 import type { ButtonBaseProps } from './ButtonBase.types';

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

@@ -1,12 +1,11 @@
+import { ButtonBaseSize, IconName } 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 { ButtonBase } from './ButtonBase';
 
 describe('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';