From 0677c8a9fc68c27ae66f180d8137c3e993bd94b4 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Thu, 2 Apr 2026 16:28:45 +0000 Subject: [PATCH 1/8] feat(shared): migrate Button and ButtonBase to ADR-0003 and ADR-0004 shared types (DSYS-483) Co-authored-by: George Marshall --- .../src/components/BannerBase/BannerBase.tsx | 4 +- .../src/components/Button/Button.stories.tsx | 7 +- .../src/components/Button/Button.test.tsx | 2 +- .../src/components/Button/Button.tsx | 3 +- .../src/components/Button/Button.types.ts | 14 +- .../src/components/Button/index.ts | 2 +- .../ButtonPrimary/ButtonPrimary.stories.tsx | 6 +- .../ButtonPrimary/ButtonPrimary.test.tsx | 2 +- .../Button/variants/ButtonPrimary/index.ts | 2 +- .../ButtonSecondary.stories.tsx | 6 +- .../ButtonSecondary/ButtonSecondary.test.tsx | 2 +- .../Button/variants/ButtonSecondary/index.ts | 2 +- .../ButtonTertiary/ButtonTertiary.stories.tsx | 6 +- .../ButtonTertiary/ButtonTertiary.test.tsx | 2 +- .../Button/variants/ButtonTertiary/index.ts | 2 +- .../ButtonBase/ButtonBase.constants.ts | 2 +- .../ButtonBase/ButtonBase.stories.tsx | 8 +- .../components/ButtonBase/ButtonBase.test.tsx | 5 +- .../src/components/ButtonBase/ButtonBase.tsx | 3 +- .../components/ButtonBase/ButtonBase.types.ts | 38 +-- .../src/components/ButtonBase/index.ts | 2 +- .../ButtonHero/ButtonHero.stories.tsx | 6 +- .../src/components/ButtonHero/index.ts | 2 +- .../components/Checkbox/Checkbox.stories.tsx | 2 +- .../src/types/index.ts | 36 +-- .../src/components/BannerBase/BannerBase.tsx | 4 +- .../src/components/Button/Button.stories.tsx | 7 +- .../src/components/Button/Button.test.tsx | 3 +- .../src/components/Button/Button.tsx | 3 +- .../src/components/Button/Button.types.ts | 17 +- .../src/components/Button/index.ts | 2 +- .../ButtonPrimary/ButtonPrimary.stories.tsx | 6 +- .../ButtonPrimary/ButtonPrimary.test.tsx | 6 +- .../Button/variants/ButtonPrimary/index.ts | 2 +- .../ButtonSecondary.stories.tsx | 6 +- .../ButtonSecondary/ButtonSecondary.test.tsx | 6 +- .../Button/variants/ButtonSecondary/index.ts | 2 +- .../ButtonTertiary/ButtonTertiary.stories.tsx | 6 +- .../ButtonTertiary/ButtonTertiary.test.tsx | 6 +- .../Button/variants/ButtonTertiary/index.ts | 2 +- .../ButtonBase/ButtonBase.constants.ts | 2 +- .../ButtonBase/ButtonBase.stories.tsx | 10 +- .../components/ButtonBase/ButtonBase.test.tsx | 3 +- .../src/components/ButtonBase/ButtonBase.tsx | 8 +- .../components/ButtonBase/ButtonBase.types.ts | 238 ++++++++---------- .../src/components/ButtonBase/index.ts | 2 +- .../ButtonHero/ButtonHero.stories.tsx | 6 +- .../src/components/ButtonHero/index.ts | 2 +- .../design-system-react/src/types/index.ts | 50 +--- packages/design-system-shared/src/index.ts | 6 + .../src/types/Button/Button.types.ts | 32 +++ .../src/types/Button/index.ts | 4 + .../src/types/ButtonBase/ButtonBase.types.ts | 58 +++++ .../src/types/ButtonBase/index.ts | 4 + 54 files changed, 346 insertions(+), 323 deletions(-) create mode 100644 packages/design-system-shared/src/types/Button/Button.types.ts create mode 100644 packages/design-system-shared/src/types/Button/index.ts create mode 100644 packages/design-system-shared/src/types/ButtonBase/ButtonBase.types.ts create mode 100644 packages/design-system-shared/src/types/ButtonBase/index.ts diff --git a/packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx b/packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx index 32e230834..4648a0ec6 100644 --- a/packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx +++ b/packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx @@ -1,15 +1,15 @@ import { BoxAlignItems, BoxBackgroundColor, + ButtonBaseSize as ButtonSize, BoxFlexDirection, ButtonIconSize, 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'; diff --git a/packages/design-system-react-native/src/components/Button/Button.stories.tsx b/packages/design-system-react-native/src/components/Button/Button.stories.tsx index faa991000..b5c910987 100644 --- a/packages/design-system-react-native/src/components/Button/Button.stories.tsx +++ b/packages/design-system-react-native/src/components/Button/Button.stories.tsx @@ -3,8 +3,11 @@ 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 { + ButtonBaseSize as ButtonSize, + ButtonVariant, + IconName, +} from '@metamask/design-system-shared'; import { Button } from './Button'; import type { ButtonProps } from './Button.types'; diff --git a/packages/design-system-react-native/src/components/Button/Button.test.tsx b/packages/design-system-react-native/src/components/Button/Button.test.tsx index fbc829f0b..d0295965f 100644 --- a/packages/design-system-react-native/src/components/Button/Button.test.tsx +++ b/packages/design-system-react-native/src/components/Button/Button.test.tsx @@ -1,7 +1,7 @@ import { render } from '@testing-library/react-native'; import React from 'react'; -import { ButtonVariant } from '../../types'; +import { ButtonVariant } from '@metamask/design-system-shared'; import { Button } from './Button'; diff --git a/packages/design-system-react-native/src/components/Button/Button.tsx b/packages/design-system-react-native/src/components/Button/Button.tsx index b900eab6d..72e76ae72 100644 --- a/packages/design-system-react-native/src/components/Button/Button.tsx +++ b/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'; diff --git a/packages/design-system-react-native/src/components/Button/Button.types.ts b/packages/design-system-react-native/src/components/Button/Button.types.ts index 8857d7acf..8397e7945 100644 --- a/packages/design-system-react-native/src/components/Button/Button.types.ts +++ b/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); diff --git a/packages/design-system-react-native/src/components/Button/index.ts b/packages/design-system-react-native/src/components/Button/index.ts index d49c58803..c03f4daad 100644 --- a/packages/design-system-react-native/src/components/Button/index.ts +++ b/packages/design-system-react-native/src/components/Button/index.ts @@ -1,3 +1,3 @@ -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'; diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx index 9383d0271..0b3b135cc 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx +++ b/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx @@ -2,8 +2,10 @@ 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 { + ButtonBaseSize as ButtonPrimarySize, + IconName, +} from '@metamask/design-system-shared'; import { ButtonPrimary } from './ButtonPrimary'; import type { ButtonPrimaryProps } from './ButtonPrimary.types'; diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx index c88a53f90..8a489f94f 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx +++ b/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx @@ -4,7 +4,7 @@ import { render } from '@testing-library/react-native'; import React from 'react'; import * as ReactTestRenderer from 'react-test-renderer'; -import { ButtonBaseSize } from '../../../../types'; +import { ButtonBaseSize } from '@metamask/design-system-shared'; import { ButtonPrimary } from './ButtonPrimary'; diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/index.ts b/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/index.ts index 348e9a3d7..00c6aae94 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/index.ts +++ b/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'; diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx index 283a223ac..0d949d94c 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx +++ b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx @@ -2,8 +2,10 @@ 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 { + ButtonBaseSize as ButtonSecondarySize, + IconName, +} from '@metamask/design-system-shared'; import { ButtonSecondary } from './ButtonSecondary'; import type { ButtonSecondaryProps } from './ButtonSecondary.types'; diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx index 6f744e79c..b6c620b5e 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx +++ b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx @@ -4,7 +4,7 @@ import { render } from '@testing-library/react-native'; import React from 'react'; import * as ReactTestRenderer from 'react-test-renderer'; -import { ButtonBaseSize } from '../../../../types'; +import { ButtonBaseSize } from '@metamask/design-system-shared'; import { ButtonSecondary } from './ButtonSecondary'; diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/index.ts b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/index.ts index 391fa2b30..d125429c3 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/index.ts +++ b/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'; diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx index 46a4a1954..1a519ae74 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx +++ b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx @@ -2,8 +2,10 @@ 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 { + ButtonBaseSize as ButtonTertiarySize, + IconName, +} from '@metamask/design-system-shared'; import { ButtonTertiary } from './ButtonTertiary'; import type { ButtonTertiaryProps } from './ButtonTertiary.types'; diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx index c572e13ff..12ea2d977 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx +++ b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx @@ -4,7 +4,7 @@ import { render } from '@testing-library/react-native'; import React from 'react'; import * as ReactTestRenderer from 'react-test-renderer'; -import { ButtonBaseSize } from '../../../../types'; +import { ButtonBaseSize } from '@metamask/design-system-shared'; import { ButtonTertiary } from './ButtonTertiary'; diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/index.ts b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/index.ts index db6f99b9f..e91dd8d85 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/index.ts +++ b/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'; diff --git a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.constants.ts b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.constants.ts index bae08cbab..d31826bb5 100644 --- a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.constants.ts +++ b/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, diff --git a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.stories.tsx b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.stories.tsx index 378d20406..c24fe953a 100644 --- a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.stories.tsx +++ b/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'; diff --git a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.test.tsx b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.test.tsx index 751dadad7..de8911c5c 100644 --- a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.test.tsx +++ b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.test.tsx @@ -5,7 +5,10 @@ import React from 'react'; import { View, Text } from 'react-native'; import * as ReactTestRenderer from 'react-test-renderer'; -import { ButtonBaseSize, IconName } from '../../types'; +import { + ButtonBaseSize, + IconName, +} from '@metamask/design-system-shared'; import { ButtonBase } from './ButtonBase'; diff --git a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.tsx b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.tsx index 1ae187d4b..8096b59c0 100644 --- a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.tsx +++ b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.tsx @@ -1,9 +1,8 @@ +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'; diff --git a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.types.ts b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.types.ts index c4c24594a..86a18835e 100644 --- a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.types.ts +++ b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.types.ts @@ -1,14 +1,17 @@ +import type { + ButtonBasePropsShared, + IconName, +} 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 { IconProps } 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 +20,6 @@ export type ButtonBaseProps = { * Optional props to be passed to the Text component when children is a string */ textProps?: Omit, '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 +48,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. diff --git a/packages/design-system-react-native/src/components/ButtonBase/index.ts b/packages/design-system-react-native/src/components/ButtonBase/index.ts index 89a94d3d9..62f936d51 100644 --- a/packages/design-system-react-native/src/components/ButtonBase/index.ts +++ b/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'; diff --git a/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.stories.tsx b/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.stories.tsx index a83069b42..641dd256b 100644 --- a/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.stories.tsx +++ b/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.stories.tsx @@ -2,8 +2,10 @@ 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 { + ButtonBaseSize as ButtonHeroSize, + IconName, +} from '@metamask/design-system-shared'; import { ButtonHero } from './ButtonHero'; diff --git a/packages/design-system-react-native/src/components/ButtonHero/index.ts b/packages/design-system-react-native/src/components/ButtonHero/index.ts index 8d9eedd17..8ea4cc220 100644 --- a/packages/design-system-react-native/src/components/ButtonHero/index.ts +++ b/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'; diff --git a/packages/design-system-react-native/src/components/Checkbox/Checkbox.stories.tsx b/packages/design-system-react-native/src/components/Checkbox/Checkbox.stories.tsx index 24669ea36..07bcbea31 100644 --- a/packages/design-system-react-native/src/components/Checkbox/Checkbox.stories.tsx +++ b/packages/design-system-react-native/src/components/Checkbox/Checkbox.stories.tsx @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-native'; import { useState, useRef } from 'react'; import { View } from 'react-native'; -import { ButtonVariant } from '../../types'; +import { ButtonVariant } from '@metamask/design-system-shared'; import { Button } from '../Button'; import { Checkbox } from './Checkbox'; diff --git a/packages/design-system-react-native/src/types/index.ts b/packages/design-system-react-native/src/types/index.ts index 484f16b74..0dd6e4453 100644 --- a/packages/design-system-react-native/src/types/index.ts +++ b/packages/design-system-react-native/src/types/index.ts @@ -21,33 +21,13 @@ export enum AvatarGroupVariant { } /** - * ButtonBase - size + * AvatarIcon - severity */ -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', +export enum AvatarIconSeverity { + Neutral = 'neutral', + Info = 'info', + Success = 'success', + // eslint-disable-next-line @typescript-eslint/no-shadow + Error = 'error', + Warning = 'warning', } diff --git a/packages/design-system-react/src/components/BannerBase/BannerBase.tsx b/packages/design-system-react/src/components/BannerBase/BannerBase.tsx index d13795eed..f8784a2d0 100644 --- a/packages/design-system-react/src/components/BannerBase/BannerBase.tsx +++ b/packages/design-system-react/src/components/BannerBase/BannerBase.tsx @@ -1,14 +1,14 @@ import { BoxAlignItems, BoxBackgroundColor, + ButtonBaseSize as ButtonSize, BoxFlexDirection, ButtonIconSize, FontWeight, + IconName, TextVariant, } from '@metamask/design-system-shared'; import React, { forwardRef } from 'react'; - -import { ButtonSize, IconName } from '../../types'; import { twMerge } from '../../utils/tw-merge'; import { Box } from '../Box'; import { Button } from '../Button'; diff --git a/packages/design-system-react/src/components/Button/Button.stories.tsx b/packages/design-system-react/src/components/Button/Button.stories.tsx index e7ac2350f..9e68db596 100644 --- a/packages/design-system-react/src/components/Button/Button.stories.tsx +++ b/packages/design-system-react/src/components/Button/Button.stories.tsx @@ -1,8 +1,11 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; import React from 'react'; -import { ButtonVariant, ButtonSize } from '../../types'; -import { IconName } from '../Icon'; +import { + ButtonVariant, + ButtonBaseSize as ButtonSize, + IconName, +} from '@metamask/design-system-shared'; import { Button } from './Button'; import README from './README.mdx'; diff --git a/packages/design-system-react/src/components/Button/Button.test.tsx b/packages/design-system-react/src/components/Button/Button.test.tsx index b66e41208..59abd1b8d 100644 --- a/packages/design-system-react/src/components/Button/Button.test.tsx +++ b/packages/design-system-react/src/components/Button/Button.test.tsx @@ -1,8 +1,7 @@ import { render, screen } from '@testing-library/react'; import React, { createRef } from 'react'; -import { ButtonVariant } from '../../types'; -import { IconName } from '../Icon'; +import { ButtonVariant, IconName } from '@metamask/design-system-shared'; import { Button } from './Button'; diff --git a/packages/design-system-react/src/components/Button/Button.tsx b/packages/design-system-react/src/components/Button/Button.tsx index 64881b3ad..1a2e46d14 100644 --- a/packages/design-system-react/src/components/Button/Button.tsx +++ b/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'; diff --git a/packages/design-system-react/src/components/Button/Button.types.ts b/packages/design-system-react/src/components/Button/Button.types.ts index 4dc9cd062..f51fd2846 100644 --- a/packages/design-system-react/src/components/Button/Button.types.ts +++ b/packages/design-system-react/src/components/Button/Button.types.ts @@ -1,24 +1,17 @@ -import type { ButtonVariant } from '../../types'; +import type { ButtonPropsShared, ButtonVariant } from '@metamask/design-system-shared'; import type { ButtonPrimaryProps } from './variants/ButtonPrimary'; import type { ButtonSecondaryProps } from './variants/ButtonSecondary'; import type { ButtonTertiaryProps } from './variants/ButtonTertiary'; -export type ButtonProps = { - /** - * Optional prop to control the variant of the Button - * - * @default ButtonVariant.Primary - */ - variant?: ButtonVariant; -} & ( +export type ButtonProps = ButtonPropsShared & ( | (Omit & { - variant?: ButtonVariant.Primary; + variant?: typeof ButtonVariant.Primary; }) | (Omit & { - variant?: ButtonVariant.Secondary; + variant?: typeof ButtonVariant.Secondary; }) | (Omit & { - variant?: ButtonVariant.Tertiary; + variant?: typeof ButtonVariant.Tertiary; }) ); diff --git a/packages/design-system-react/src/components/Button/index.ts b/packages/design-system-react/src/components/Button/index.ts index ef9407485..f3f31ed16 100644 --- a/packages/design-system-react/src/components/Button/index.ts +++ b/packages/design-system-react/src/components/Button/index.ts @@ -1,3 +1,3 @@ -export { ButtonVariant, ButtonSize } from '../../types'; +export { ButtonVariant, ButtonBaseSize as ButtonSize } from '@metamask/design-system-shared'; export { Button } from './Button'; export type { ButtonProps } from './Button.types'; diff --git a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx index 57b0ade52..9aabe4d47 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx @@ -1,8 +1,10 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; import React from 'react'; -import { ButtonPrimarySize } from '../../../../types'; -import { IconName } from '../../../Icon'; +import { + ButtonBaseSize as ButtonPrimarySize, + IconName, +} from '@metamask/design-system-shared'; import { ButtonPrimary } from './ButtonPrimary'; import README from './README.mdx'; diff --git a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx index b12707bb9..e830cd725 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx @@ -1,8 +1,10 @@ import { render, screen } from '@testing-library/react'; import React from 'react'; -import { ButtonPrimarySize } from '../../../../types'; -import { IconName } from '../../../Icon'; +import { + ButtonBaseSize as ButtonPrimarySize, + IconName, +} from '@metamask/design-system-shared'; import { ButtonPrimary } from './ButtonPrimary'; diff --git a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/index.ts b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/index.ts index 348e9a3d7..00c6aae94 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/index.ts +++ b/packages/design-system-react/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'; diff --git a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx index 74e96d500..5fee6cbf2 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx @@ -1,8 +1,10 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; import React from 'react'; -import { ButtonSecondarySize } from '../../../../types'; -import { IconName } from '../../../Icon'; +import { + ButtonBaseSize as ButtonSecondarySize, + IconName, +} from '@metamask/design-system-shared'; import { ButtonSecondary } from './ButtonSecondary'; import README from './README.mdx'; diff --git a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx index 374c250ab..dcc893c8c 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx @@ -1,8 +1,10 @@ import { render, screen } from '@testing-library/react'; import React from 'react'; -import { ButtonSecondarySize } from '../../../../types'; -import { IconName } from '../../../Icon'; +import { + ButtonBaseSize as ButtonSecondarySize, + IconName, +} from '@metamask/design-system-shared'; import { ButtonSecondary } from './ButtonSecondary'; diff --git a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/index.ts b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/index.ts index 391fa2b30..d125429c3 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/index.ts +++ b/packages/design-system-react/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'; diff --git a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx index 35190c80a..ebc8475a7 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx @@ -1,8 +1,10 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; import React from 'react'; -import { ButtonTertiarySize } from '../../../../types'; -import { IconName } from '../../../Icon'; +import { + ButtonBaseSize as ButtonTertiarySize, + IconName, +} from '@metamask/design-system-shared'; import { ButtonTertiary } from './ButtonTertiary'; import README from './README.mdx'; diff --git a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx index 6dc20deb1..2ee921f96 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx @@ -1,8 +1,10 @@ import { render, screen } from '@testing-library/react'; import React, { createRef } from 'react'; -import { ButtonTertiarySize } from '../../../../types'; -import { IconName } from '../../../Icon'; +import { + ButtonBaseSize as ButtonTertiarySize, + IconName, +} from '@metamask/design-system-shared'; import { ButtonTertiary } from './ButtonTertiary'; diff --git a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/index.ts b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/index.ts index db6f99b9f..e91dd8d85 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/index.ts +++ b/packages/design-system-react/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'; diff --git a/packages/design-system-react/src/components/ButtonBase/ButtonBase.constants.ts b/packages/design-system-react/src/components/ButtonBase/ButtonBase.constants.ts index bae08cbab..d31826bb5 100644 --- a/packages/design-system-react/src/components/ButtonBase/ButtonBase.constants.ts +++ b/packages/design-system-react/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, diff --git a/packages/design-system-react/src/components/ButtonBase/ButtonBase.stories.tsx b/packages/design-system-react/src/components/ButtonBase/ButtonBase.stories.tsx index fc487015e..3af8d7a33 100644 --- a/packages/design-system-react/src/components/ButtonBase/ButtonBase.stories.tsx +++ b/packages/design-system-react/src/components/ButtonBase/ButtonBase.stories.tsx @@ -1,9 +1,13 @@ -import { TextColor, TextVariant } from '@metamask/design-system-shared'; +import { + ButtonBaseSize, + IconName, + TextColor, + TextVariant, +} from '@metamask/design-system-shared'; import type { Meta, StoryObj } from '@storybook/react-vite'; import React from 'react'; -import { ButtonBaseSize } from '../../types'; -import { Icon, IconName } from '../Icon'; +import { Icon } from '../Icon'; import { Text } from '../Text'; import { ButtonBase } from './ButtonBase'; diff --git a/packages/design-system-react/src/components/ButtonBase/ButtonBase.test.tsx b/packages/design-system-react/src/components/ButtonBase/ButtonBase.test.tsx index 3fbd91dfc..9fc13b503 100644 --- a/packages/design-system-react/src/components/ButtonBase/ButtonBase.test.tsx +++ b/packages/design-system-react/src/components/ButtonBase/ButtonBase.test.tsx @@ -1,8 +1,7 @@ import { render, screen } from '@testing-library/react'; import React from 'react'; -import { ButtonBaseSize } from '../../types'; -import { IconName } from '../Icon'; +import { ButtonBaseSize, IconName } from '@metamask/design-system-shared'; import { ButtonBase } from './ButtonBase'; diff --git a/packages/design-system-react/src/components/ButtonBase/ButtonBase.tsx b/packages/design-system-react/src/components/ButtonBase/ButtonBase.tsx index 9fda610e9..686db36ad 100644 --- a/packages/design-system-react/src/components/ButtonBase/ButtonBase.tsx +++ b/packages/design-system-react/src/components/ButtonBase/ButtonBase.tsx @@ -1,9 +1,11 @@ +import { + ButtonBaseSize, + IconName, +} from '@metamask/design-system-shared'; import { Slot, Slottable } from '@radix-ui/react-slot'; import React, { forwardRef } from 'react'; - -import { ButtonBaseSize } from '../../types'; import { twMerge } from '../../utils/tw-merge'; -import { Icon, IconName, IconSize } from '../Icon'; +import { Icon, IconSize } from '../Icon'; import { Text, FontWeight, TextColor } from '../Text'; import { TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from './ButtonBase.constants'; diff --git a/packages/design-system-react/src/components/ButtonBase/ButtonBase.types.ts b/packages/design-system-react/src/components/ButtonBase/ButtonBase.types.ts index e7b55f5b0..ec186dc92 100644 --- a/packages/design-system-react/src/components/ButtonBase/ButtonBase.types.ts +++ b/packages/design-system-react/src/components/ButtonBase/ButtonBase.types.ts @@ -1,138 +1,110 @@ +import type { + ButtonBasePropsShared, + IconName, +} from '@metamask/design-system-shared'; import type { ComponentProps } from 'react'; -import type { ButtonBaseSize } from '../../types'; -import type { IconName, IconProps } from '../Icon'; +import type { IconProps } from '../Icon'; import type { TextProps } from '../Text'; -export type ButtonBaseProps = ComponentProps<'button'> & { - /** - * Required prop for the content to be rendered within the ButtonBase - */ - children: React.ReactNode; - /** - * Optional prop for additional CSS classes to be applied to the ButtonBase component. - * These classes will be merged with the component's default classes using twMerge. - */ - className?: string; - /** - * Optional prop to control the size of the ButtonBase - * - * @default ButtonBaseSize.Lg - */ - size?: ButtonBaseSize; - /** - * Optional props to be passed to the Text component when children is a string - */ - textProps?: Partial; - /** - * Optional prop that when true, makes the button take up the full width of its container - * - * @default false - */ - isFullWidth?: boolean; - /** - * Optional boolean that determines if the component should merge its props onto its immediate child - * instead of rendering a button element - * - * @default false - */ - asChild?: boolean; - /** - * 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 props to be passed to the loading Text component - */ - loadingTextProps?: Partial; - /** - * Optional prop to specify an icon to show at the start of the button - */ - startIconName?: IconName; - /** - * Optional prop to pass additional properties to the start icon - */ - startIconProps?: Partial; - /** - * Optional prop for a custom element to show at the start of the button - */ - startAccessory?: React.ReactNode; - /** - * Optional prop to specify an icon to show at the end of the button - */ - endIconName?: IconName; - /** - * Optional prop to pass additional properties to the end icon - */ - endIconProps?: Partial; - /** - * 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 to pass additional properties to the loading icon - */ - loadingIconProps?: Partial; - /** - * Optional CSS styles to be applied to the component. - * Should be used sparingly and only for dynamic styles that can't be achieved with className. - */ - style?: React.CSSProperties; +export type ButtonBaseProps = ComponentProps<'button'> & + ButtonBasePropsShared & { + /** + * Optional prop for additional CSS classes to be applied to the ButtonBase component. + * These classes will be merged with the component's default classes using twMerge. + */ + className?: string; + /** + * Optional props to be passed to the Text component when children is a string + */ + textProps?: Partial; + /** + * Optional boolean that determines if the component should merge its props onto its immediate child + * instead of rendering a button element + * + * @default false + */ + asChild?: boolean; + /** + * Optional props to be passed to the loading Text component + */ + loadingTextProps?: Partial; + /** + * Optional prop to specify an icon to show at the start of the button + */ + startIconName?: IconName; + /** + * Optional prop to pass additional properties to the start icon + */ + startIconProps?: Partial; + /** + * Optional prop for a custom element to show at the start of the button + */ + startAccessory?: React.ReactNode; + /** + * Optional prop to specify an icon to show at the end of the button + */ + endIconName?: IconName; + /** + * Optional prop to pass additional properties to the end icon + */ + endIconProps?: Partial; + /** + * Optional prop for a custom element to show at the end of the button + */ + endAccessory?: React.ReactNode; + /** + * Optional prop to pass additional properties to the loading icon + */ + loadingIconProps?: Partial; + /** + * Optional CSS styles to be applied to the component. + * Should be used sparingly and only for dynamic styles that can't be achieved with className. + */ + style?: React.CSSProperties; - // Accessibility props - /** - * Optional accessible label for the button. Use when the button text doesn't fully describe its purpose. - * This will be used as the aria-label attribute. - */ - 'aria-label'?: string; - /** - * Optional ID of an element that labels the button. - * This will be used as the aria-labelledby attribute. - */ - 'aria-labelledby'?: string; - /** - * Optional ID of an element that describes the button. - * This will be used as the aria-describedby attribute. - */ - 'aria-describedby'?: string; - /** - * Optional prop to indicate if the button is pressed (for toggle buttons). - * This will be used as the aria-pressed attribute. - */ - 'aria-pressed'?: boolean | 'mixed'; - /** - * Optional prop to indicate if the button controls a collapsible element. - * This will be used as the aria-expanded attribute. - */ - 'aria-expanded'?: boolean; - /** - * Optional prop to indicate if the button controls another element. - * This will be used as the aria-controls attribute. - */ - 'aria-controls'?: string; - /** - * Optional prop to indicate if the button has a popup (menu, listbox, tree, grid, or dialog). - * This will be used as the aria-haspopup attribute. - */ - 'aria-haspopup'?: - | boolean - | 'false' - | 'true' - | 'menu' - | 'listbox' - | 'tree' - | 'grid' - | 'dialog'; -}; + // Accessibility props + /** + * Optional accessible label for the button. Use when the button text doesn't fully describe its purpose. + * This will be used as the aria-label attribute. + */ + 'aria-label'?: string; + /** + * Optional ID of an element that labels the button. + * This will be used as the aria-labelledby attribute. + */ + 'aria-labelledby'?: string; + /** + * Optional ID of an element that describes the button. + * This will be used as the aria-describedby attribute. + */ + 'aria-describedby'?: string; + /** + * Optional prop to indicate if the button is pressed (for toggle buttons). + * This will be used as the aria-pressed attribute. + */ + 'aria-pressed'?: boolean | 'mixed'; + /** + * Optional prop to indicate if the button controls a collapsible element. + * This will be used as the aria-expanded attribute. + */ + 'aria-expanded'?: boolean; + /** + * Optional prop to indicate if the button controls another element. + * This will be used as the aria-controls attribute. + */ + 'aria-controls'?: string; + /** + * Optional prop to indicate if the button has a popup (menu, listbox, tree, grid, or dialog). + * This will be used as the aria-haspopup attribute. + */ + 'aria-haspopup'?: + | boolean + | 'false' + | 'true' + | 'menu' + | 'listbox' + | 'tree' + | 'grid' + | 'dialog'; + }; diff --git a/packages/design-system-react/src/components/ButtonBase/index.ts b/packages/design-system-react/src/components/ButtonBase/index.ts index 680ba6a9b..2de52e24c 100644 --- a/packages/design-system-react/src/components/ButtonBase/index.ts +++ b/packages/design-system-react/src/components/ButtonBase/index.ts @@ -1,3 +1,3 @@ -export { ButtonBaseSize } from '../../types'; +export { ButtonBaseSize } from '@metamask/design-system-shared'; export { ButtonBase } from './ButtonBase'; export type { ButtonBaseProps } from './ButtonBase.types'; diff --git a/packages/design-system-react/src/components/ButtonHero/ButtonHero.stories.tsx b/packages/design-system-react/src/components/ButtonHero/ButtonHero.stories.tsx index f9584ffd9..88e97c2c0 100644 --- a/packages/design-system-react/src/components/ButtonHero/ButtonHero.stories.tsx +++ b/packages/design-system-react/src/components/ButtonHero/ButtonHero.stories.tsx @@ -1,8 +1,10 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; import React from 'react'; -import { ButtonHeroSize } from '../../types'; -import { IconName } from '../Icon'; +import { + ButtonBaseSize as ButtonHeroSize, + IconName, +} from '@metamask/design-system-shared'; import { ButtonHero } from './ButtonHero'; import README from './README.mdx'; diff --git a/packages/design-system-react/src/components/ButtonHero/index.ts b/packages/design-system-react/src/components/ButtonHero/index.ts index 8d9eedd17..8ea4cc220 100644 --- a/packages/design-system-react/src/components/ButtonHero/index.ts +++ b/packages/design-system-react/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'; diff --git a/packages/design-system-react/src/types/index.ts b/packages/design-system-react/src/types/index.ts index b780329ff..49ace5bbf 100644 --- a/packages/design-system-react/src/types/index.ts +++ b/packages/design-system-react/src/types/index.ts @@ -21,45 +21,19 @@ export enum AvatarGroupVariant { } /** - * ButtonBase - size + * Button-related types re-exported from shared for compatibility. */ -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 ButtonPrimarySize }; -export { ButtonBaseSize as ButtonSecondarySize }; -export { ButtonBaseSize as ButtonTertiarySize }; -export { ButtonBaseSize as ButtonHeroSize }; -export { ButtonBaseSize as ButtonSize }; - -/** - * Button - variant - */ -export enum ButtonVariant { - /** - * Primary button variant - used for primary actions - */ - Primary = 'primary', - /** - * Secondary button variant - used for secondary actions - */ - Secondary = 'secondary', - /** - * Tertiary button variant - used for tertiary-like actions - */ - Tertiary = 'tertiary', -} +export { + ButtonBaseSize, + ButtonVariant, + ButtonIconSize, + ButtonIconVariant, +} from '@metamask/design-system-shared'; +export { ButtonBaseSize as ButtonPrimarySize } from '@metamask/design-system-shared'; +export { ButtonBaseSize as ButtonSecondarySize } from '@metamask/design-system-shared'; +export { ButtonBaseSize as ButtonTertiarySize } from '@metamask/design-system-shared'; +export { ButtonBaseSize as ButtonHeroSize } from '@metamask/design-system-shared'; +export { ButtonBaseSize as ButtonSize } from '@metamask/design-system-shared'; /** * Text - textAlign diff --git a/packages/design-system-shared/src/index.ts b/packages/design-system-shared/src/index.ts index c231c6de1..9cc44bb8f 100644 --- a/packages/design-system-shared/src/index.ts +++ b/packages/design-system-shared/src/index.ts @@ -77,6 +77,12 @@ export { // ButtonFilter types (ADR-0004) export { type ButtonFilterPropsShared } from './types/ButtonFilter'; +// ButtonBase types (ADR-0003 + ADR-0004) +export { ButtonBaseSize, type ButtonBasePropsShared } from './types/ButtonBase'; + +// Button types (ADR-0003 + ADR-0004) +export { ButtonVariant, type ButtonPropsShared } from './types/Button'; + // AvatarNetwork types (ADR-0004) export { type AvatarNetworkPropsShared } from './types/AvatarNetwork'; diff --git a/packages/design-system-shared/src/types/Button/Button.types.ts b/packages/design-system-shared/src/types/Button/Button.types.ts new file mode 100644 index 000000000..c395d3a29 --- /dev/null +++ b/packages/design-system-shared/src/types/Button/Button.types.ts @@ -0,0 +1,32 @@ +/** + * Button - variant + * Convert from enum to const object (ADR-0003) + */ +export const ButtonVariant = { + /** + * Primary button variant - used for primary actions + */ + Primary: 'primary', + /** + * Secondary button variant - used for secondary actions + */ + Secondary: 'secondary', + /** + * Tertiary button variant - used for tertiary-like actions + */ + Tertiary: 'tertiary', +} as const; +export type ButtonVariant = (typeof ButtonVariant)[keyof typeof ButtonVariant]; + +/** + * Button component shared props (ADR-0004) + * Platform-independent properties shared across React and React Native + */ +export type ButtonPropsShared = { + /** + * Optional prop to control the variant of the Button + * + * @default ButtonVariant.Primary + */ + variant?: ButtonVariant; +}; diff --git a/packages/design-system-shared/src/types/Button/index.ts b/packages/design-system-shared/src/types/Button/index.ts new file mode 100644 index 000000000..e3dedaeff --- /dev/null +++ b/packages/design-system-shared/src/types/Button/index.ts @@ -0,0 +1,4 @@ +export { + ButtonVariant, + type ButtonPropsShared, +} from './Button.types'; diff --git a/packages/design-system-shared/src/types/ButtonBase/ButtonBase.types.ts b/packages/design-system-shared/src/types/ButtonBase/ButtonBase.types.ts new file mode 100644 index 000000000..db04e98b3 --- /dev/null +++ b/packages/design-system-shared/src/types/ButtonBase/ButtonBase.types.ts @@ -0,0 +1,58 @@ +/** + * ButtonBase - size + * Convert from enum to const object (ADR-0003) + */ +export const 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', +} as const; +export type ButtonBaseSize = (typeof ButtonBaseSize)[keyof typeof ButtonBaseSize]; + +/** + * ButtonBase component shared props (ADR-0004) + * Platform-independent properties shared across React and React Native + */ +export type ButtonBasePropsShared = { + /** + * Required prop for the content to be rendered within the ButtonBase + */ + children: React.ReactNode; + /** + * Optional prop to control the size of the ButtonBase + * + * @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 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; +}; diff --git a/packages/design-system-shared/src/types/ButtonBase/index.ts b/packages/design-system-shared/src/types/ButtonBase/index.ts new file mode 100644 index 000000000..7439db264 --- /dev/null +++ b/packages/design-system-shared/src/types/ButtonBase/index.ts @@ -0,0 +1,4 @@ +export { + ButtonBaseSize, + type ButtonBasePropsShared, +} from './ButtonBase.types'; From 5917d6014609ecf121445bab71b7154e3696972b Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Thu, 2 Apr 2026 16:39:20 +0000 Subject: [PATCH 2/8] fix: apply lint formatting fixes to Button and ButtonBase migration files Co-authored-by: George Marshall --- .../src/components/Button/Button.test.tsx | 3 +- .../src/components/Button/index.ts | 5 +++- .../ButtonPrimary/ButtonPrimary.test.tsx | 3 +- .../ButtonSecondary/ButtonSecondary.test.tsx | 3 +- .../ButtonTertiary/ButtonTertiary.test.tsx | 3 +- .../src/components/ButtonBase/ButtonBase.tsx | 1 + .../components/ButtonBase/ButtonBase.types.ts | 14 +++++----- .../components/Checkbox/Checkbox.stories.tsx | 2 +- .../src/components/Button/Button.types.ts | 28 +++++++++++-------- .../src/components/Button/index.ts | 5 +++- .../variants/ButtonPrimary/ButtonPrimary.tsx | 4 +-- .../ButtonSecondary/ButtonSecondary.tsx | 8 +++--- .../src/components/ButtonBase/ButtonBase.tsx | 3 +- packages/design-system-shared/src/index.ts | 6 ++++ .../src/types/Button/index.ts | 5 +--- .../src/types/ButtonBase/ButtonBase.types.ts | 3 +- .../src/types/ButtonBase/index.ts | 5 +--- 17 files changed, 55 insertions(+), 46 deletions(-) diff --git a/packages/design-system-react-native/src/components/Button/Button.test.tsx b/packages/design-system-react-native/src/components/Button/Button.test.tsx index d0295965f..ed73efefe 100644 --- a/packages/design-system-react-native/src/components/Button/Button.test.tsx +++ b/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 '@metamask/design-system-shared'; - import { Button } from './Button'; describe('Button', () => { diff --git a/packages/design-system-react-native/src/components/Button/index.ts b/packages/design-system-react-native/src/components/Button/index.ts index c03f4daad..b15ebcf10 100644 --- a/packages/design-system-react-native/src/components/Button/index.ts +++ b/packages/design-system-react-native/src/components/Button/index.ts @@ -1,3 +1,6 @@ -export { ButtonBaseSize as ButtonSize, ButtonVariant } from '@metamask/design-system-shared'; +export { + ButtonBaseSize as ButtonSize, + ButtonVariant, +} from '@metamask/design-system-shared'; export { Button } from './Button'; export type { ButtonProps } from './Button.types'; diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx index 8a489f94f..8a530e140 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx +++ b/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 '@metamask/design-system-shared'; - import { ButtonPrimary } from './ButtonPrimary'; describe('ButtonPrimary', () => { diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx index b6c620b5e..9619c8e78 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx +++ b/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 '@metamask/design-system-shared'; - import { ButtonSecondary } from './ButtonSecondary'; describe('ButtonSecondary', () => { diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx index 12ea2d977..b5ff0501b 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx +++ b/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 '@metamask/design-system-shared'; - import { ButtonTertiary } from './ButtonTertiary'; describe('ButtonTertiary', () => { diff --git a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.tsx b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.tsx index 8096b59c0..b6a45f2c4 100644 --- a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.tsx +++ b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.tsx @@ -3,6 +3,7 @@ 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 { Icon, IconColor, IconSize } from '../Icon'; import { ButtonAnimated } from '../temp-components/ButtonAnimated'; import { Spinner } from '../temp-components/Spinner'; diff --git a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.types.ts b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.types.ts index 86a18835e..6bf4806dd 100644 --- a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.types.ts +++ b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.types.ts @@ -95,10 +95,10 @@ export type ButtonBaseProps = ButtonBasePropsShared & { nativeEvent: { actionName: string }; }) => void; } & Omit< - PressableProps, - | 'accessibilityRole' - | 'accessibilityLabel' - | 'accessibilityHint' - | 'accessibilityActions' - | 'onAccessibilityAction' ->; + PressableProps, + | 'accessibilityRole' + | 'accessibilityLabel' + | 'accessibilityHint' + | 'accessibilityActions' + | 'onAccessibilityAction' + >; diff --git a/packages/design-system-react-native/src/components/Checkbox/Checkbox.stories.tsx b/packages/design-system-react-native/src/components/Checkbox/Checkbox.stories.tsx index 07bcbea31..685fb04e6 100644 --- a/packages/design-system-react-native/src/components/Checkbox/Checkbox.stories.tsx +++ b/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 '@metamask/design-system-shared'; import { Button } from '../Button'; import { Checkbox } from './Checkbox'; diff --git a/packages/design-system-react/src/components/Button/Button.types.ts b/packages/design-system-react/src/components/Button/Button.types.ts index f51fd2846..e490627c8 100644 --- a/packages/design-system-react/src/components/Button/Button.types.ts +++ b/packages/design-system-react/src/components/Button/Button.types.ts @@ -1,17 +1,21 @@ -import type { ButtonPropsShared, ButtonVariant } from '@metamask/design-system-shared'; +import type { + ButtonPropsShared, + ButtonVariant, +} from '@metamask/design-system-shared'; import type { ButtonPrimaryProps } from './variants/ButtonPrimary'; import type { ButtonSecondaryProps } from './variants/ButtonSecondary'; import type { ButtonTertiaryProps } from './variants/ButtonTertiary'; -export type ButtonProps = ButtonPropsShared & ( - | (Omit & { - variant?: typeof ButtonVariant.Primary; - }) - | (Omit & { - variant?: typeof ButtonVariant.Secondary; - }) - | (Omit & { - variant?: typeof ButtonVariant.Tertiary; - }) -); +export type ButtonProps = ButtonPropsShared & + ( + | (Omit & { + variant?: typeof ButtonVariant.Primary; + }) + | (Omit & { + variant?: typeof ButtonVariant.Secondary; + }) + | (Omit & { + variant?: typeof ButtonVariant.Tertiary; + }) + ); diff --git a/packages/design-system-react/src/components/Button/index.ts b/packages/design-system-react/src/components/Button/index.ts index f3f31ed16..abed5686c 100644 --- a/packages/design-system-react/src/components/Button/index.ts +++ b/packages/design-system-react/src/components/Button/index.ts @@ -1,3 +1,6 @@ -export { ButtonVariant, ButtonBaseSize as ButtonSize } from '@metamask/design-system-shared'; +export { + ButtonVariant, + ButtonBaseSize as ButtonSize, +} from '@metamask/design-system-shared'; export { Button } from './Button'; export type { ButtonProps } from './Button.types'; diff --git a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx index 87fbc848d..52251770d 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx @@ -60,8 +60,8 @@ export const ButtonPrimary = forwardRef( ], 'focus-visible:outline-none focus-visible:ring-0', isInverse - ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default' - : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default', + ? 'focus-visible:outline-background-default focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4' + : 'focus-visible:outline-primary-default focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2', // Loading styles isLoading && 'cursor-not-allowed', // Disabled styles (but not loading) diff --git a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx index 4ea72be56..e635cb295 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx @@ -33,14 +33,14 @@ export const ButtonSecondary = forwardRef< // Inverse styles isInverse && !isDanger && [ - 'border-2 border-primary-inverse bg-transparent text-primary-inverse', + 'border-primary-inverse text-primary-inverse border-2 bg-transparent', // Loading state uses pressed color isLoading && 'bg-pressed', ], // Inverse danger styles isInverse && isDanger && [ - 'border-0 bg-default text-error-default', + 'bg-default text-error-default border-0', // Loading state uses pressed color isLoading && 'bg-default-pressed', ], @@ -56,8 +56,8 @@ export const ButtonSecondary = forwardRef< ], 'focus-visible:outline-none focus-visible:ring-0', isInverse - ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default' - : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default', + ? 'focus-visible:outline-background-default focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4' + : 'focus-visible:outline-primary-default focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2', // Loading styles isLoading && 'cursor-not-allowed', // Disabled styles (but not loading) diff --git a/packages/design-system-react/src/components/ButtonBase/ButtonBase.tsx b/packages/design-system-react/src/components/ButtonBase/ButtonBase.tsx index 686db36ad..41b472d7b 100644 --- a/packages/design-system-react/src/components/ButtonBase/ButtonBase.tsx +++ b/packages/design-system-react/src/components/ButtonBase/ButtonBase.tsx @@ -4,6 +4,7 @@ import { } from '@metamask/design-system-shared'; import { Slot, Slottable } from '@radix-ui/react-slot'; import React, { forwardRef } from 'react'; + import { twMerge } from '../../utils/tw-merge'; import { Icon, IconSize } from '../Icon'; import { Text, FontWeight, TextColor } from '../Text'; @@ -153,7 +154,7 @@ export const ButtonBase = forwardRef( // Base styles 'inline-flex items-center justify-center', 'rounded-xl px-4', - 'font-medium text-default', + 'text-default font-medium', 'bg-muted', 'min-w-20 overflow-hidden', // Add relative positioning for loading state diff --git a/packages/design-system-shared/src/index.ts b/packages/design-system-shared/src/index.ts index 9cc44bb8f..99d8bcbb5 100644 --- a/packages/design-system-shared/src/index.ts +++ b/packages/design-system-shared/src/index.ts @@ -166,3 +166,9 @@ export { IconSize, type IconPropsShared, } from './types/Icon'; + +// ButtonBase types (ADR-0003 + ADR-0004) +export { ButtonBaseSize, type ButtonBasePropsShared } from './types/ButtonBase'; + +// Button types (ADR-0003 + ADR-0004) +export { ButtonVariant, type ButtonPropsShared } from './types/Button'; diff --git a/packages/design-system-shared/src/types/Button/index.ts b/packages/design-system-shared/src/types/Button/index.ts index e3dedaeff..fd196331f 100644 --- a/packages/design-system-shared/src/types/Button/index.ts +++ b/packages/design-system-shared/src/types/Button/index.ts @@ -1,4 +1 @@ -export { - ButtonVariant, - type ButtonPropsShared, -} from './Button.types'; +export { ButtonVariant, type ButtonPropsShared } from './Button.types'; diff --git a/packages/design-system-shared/src/types/ButtonBase/ButtonBase.types.ts b/packages/design-system-shared/src/types/ButtonBase/ButtonBase.types.ts index db04e98b3..730523da4 100644 --- a/packages/design-system-shared/src/types/ButtonBase/ButtonBase.types.ts +++ b/packages/design-system-shared/src/types/ButtonBase/ButtonBase.types.ts @@ -16,7 +16,8 @@ export const ButtonBaseSize = { */ Lg: 'lg', } as const; -export type ButtonBaseSize = (typeof ButtonBaseSize)[keyof typeof ButtonBaseSize]; +export type ButtonBaseSize = + (typeof ButtonBaseSize)[keyof typeof ButtonBaseSize]; /** * ButtonBase component shared props (ADR-0004) diff --git a/packages/design-system-shared/src/types/ButtonBase/index.ts b/packages/design-system-shared/src/types/ButtonBase/index.ts index 7439db264..83f0883f8 100644 --- a/packages/design-system-shared/src/types/ButtonBase/index.ts +++ b/packages/design-system-shared/src/types/ButtonBase/index.ts @@ -1,4 +1 @@ -export { - ButtonBaseSize, - type ButtonBasePropsShared, -} from './ButtonBase.types'; +export { ButtonBaseSize, type ButtonBasePropsShared } from './ButtonBase.types'; From 20f5f38d729d7f20d440d48d6dfbc73798caef16 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Mon, 27 Apr 2026 15:30:10 -0700 Subject: [PATCH 3/8] fix: update Button icon type ownership --- .../src/components/Button/Button.stories.tsx | 9 ++++----- .../variants/ButtonPrimary/ButtonPrimary.stories.tsx | 7 +++---- .../variants/ButtonSecondary/ButtonSecondary.stories.tsx | 7 +++---- .../variants/ButtonTertiary/ButtonTertiary.stories.tsx | 7 +++---- .../src/components/ButtonBase/ButtonBase.test.tsx | 6 +----- .../src/components/ButtonHero/ButtonHero.stories.tsx | 7 +++---- .../src/components/Button/Button.stories.tsx | 5 ++--- .../src/components/Button/Button.test.tsx | 3 +-- .../variants/ButtonPrimary/ButtonPrimary.stories.tsx | 5 ++--- .../Button/variants/ButtonPrimary/ButtonPrimary.test.tsx | 5 ++--- .../Button/variants/ButtonPrimary/ButtonPrimary.tsx | 4 ++-- .../variants/ButtonSecondary/ButtonSecondary.stories.tsx | 5 ++--- .../variants/ButtonSecondary/ButtonSecondary.test.tsx | 5 ++--- .../Button/variants/ButtonSecondary/ButtonSecondary.tsx | 8 ++++---- .../variants/ButtonTertiary/ButtonTertiary.stories.tsx | 5 ++--- .../variants/ButtonTertiary/ButtonTertiary.test.tsx | 5 ++--- .../src/components/ButtonBase/ButtonBase.test.tsx | 3 +-- .../src/components/ButtonBase/ButtonBase.tsx | 7 ++----- .../src/components/ButtonHero/ButtonHero.stories.tsx | 5 ++--- packages/design-system-shared/src/index.ts | 6 ------ 20 files changed, 43 insertions(+), 71 deletions(-) diff --git a/packages/design-system-react-native/src/components/Button/Button.stories.tsx b/packages/design-system-react-native/src/components/Button/Button.stories.tsx index b5c910987..3d11d4e4a 100644 --- a/packages/design-system-react-native/src/components/Button/Button.stories.tsx +++ b/packages/design-system-react-native/src/components/Button/Button.stories.tsx @@ -1,13 +1,12 @@ -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 { ButtonBaseSize as 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 { Button } from './Button'; import type { ButtonProps } from './Button.types'; diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx index 0b3b135cc..75953cba8 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx +++ b/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx @@ -1,11 +1,10 @@ -import { useTailwind } from '@metamask/design-system-twrnc-preset'; -import type { Meta, StoryObj } from '@storybook/react-native'; -import { View } from 'react-native'; - import { ButtonBaseSize as ButtonPrimarySize, 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 { ButtonPrimary } from './ButtonPrimary'; import type { ButtonPrimaryProps } from './ButtonPrimary.types'; diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx index 0d949d94c..c7ba891a5 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx +++ b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx @@ -1,11 +1,10 @@ -import { useTailwind } from '@metamask/design-system-twrnc-preset'; -import type { Meta, StoryObj } from '@storybook/react-native'; -import { View } from 'react-native'; - import { ButtonBaseSize as ButtonSecondarySize, 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 { ButtonSecondary } from './ButtonSecondary'; import type { ButtonSecondaryProps } from './ButtonSecondary.types'; diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx index 1a519ae74..c26f0eb43 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx +++ b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx @@ -1,11 +1,10 @@ -import { useTailwind } from '@metamask/design-system-twrnc-preset'; -import type { Meta, StoryObj } from '@storybook/react-native'; -import { View } from 'react-native'; - import { ButtonBaseSize as ButtonTertiarySize, 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 { ButtonTertiary } from './ButtonTertiary'; import type { ButtonTertiaryProps } from './ButtonTertiary.types'; diff --git a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.test.tsx b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.test.tsx index de8911c5c..e979234cb 100644 --- a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.test.tsx +++ b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.test.tsx @@ -1,3 +1,4 @@ +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'; @@ -5,11 +6,6 @@ import React from 'react'; import { View, Text } from 'react-native'; import * as ReactTestRenderer from 'react-test-renderer'; -import { - ButtonBaseSize, - IconName, -} from '@metamask/design-system-shared'; - import { ButtonBase } from './ButtonBase'; describe('ButtonBase', () => { diff --git a/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.stories.tsx b/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.stories.tsx index 641dd256b..14c386e50 100644 --- a/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.stories.tsx +++ b/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.stories.tsx @@ -1,11 +1,10 @@ -import type { Meta, StoryObj } from '@storybook/react-native'; -import React from 'react'; -import { View } from 'react-native'; - import { ButtonBaseSize as ButtonHeroSize, IconName, } from '@metamask/design-system-shared'; +import type { Meta, StoryObj } from '@storybook/react-native'; +import React from 'react'; +import { View } from 'react-native'; import { ButtonHero } from './ButtonHero'; diff --git a/packages/design-system-react/src/components/Button/Button.stories.tsx b/packages/design-system-react/src/components/Button/Button.stories.tsx index 9e68db596..4578de3ca 100644 --- a/packages/design-system-react/src/components/Button/Button.stories.tsx +++ b/packages/design-system-react/src/components/Button/Button.stories.tsx @@ -1,11 +1,10 @@ -import type { Meta, StoryObj } from '@storybook/react-vite'; -import React from 'react'; - import { ButtonVariant, ButtonBaseSize as ButtonSize, IconName, } from '@metamask/design-system-shared'; +import type { Meta, StoryObj } from '@storybook/react-vite'; +import React from 'react'; import { Button } from './Button'; import README from './README.mdx'; diff --git a/packages/design-system-react/src/components/Button/Button.test.tsx b/packages/design-system-react/src/components/Button/Button.test.tsx index 59abd1b8d..af89d09ad 100644 --- a/packages/design-system-react/src/components/Button/Button.test.tsx +++ b/packages/design-system-react/src/components/Button/Button.test.tsx @@ -1,8 +1,7 @@ +import { ButtonVariant, IconName } from '@metamask/design-system-shared'; import { render, screen } from '@testing-library/react'; import React, { createRef } from 'react'; -import { ButtonVariant, IconName } from '@metamask/design-system-shared'; - import { Button } from './Button'; describe('Button', () => { diff --git a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx index 9aabe4d47..0b33d1e1f 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx @@ -1,10 +1,9 @@ -import type { Meta, StoryObj } from '@storybook/react-vite'; -import React from 'react'; - import { ButtonBaseSize as ButtonPrimarySize, IconName, } from '@metamask/design-system-shared'; +import type { Meta, StoryObj } from '@storybook/react-vite'; +import React from 'react'; import { ButtonPrimary } from './ButtonPrimary'; import README from './README.mdx'; diff --git a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx index e830cd725..d468bd436 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx @@ -1,10 +1,9 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; - import { ButtonBaseSize as ButtonPrimarySize, IconName, } from '@metamask/design-system-shared'; +import { render, screen } from '@testing-library/react'; +import React from 'react'; import { ButtonPrimary } from './ButtonPrimary'; diff --git a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx index 52251770d..87fbc848d 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx @@ -60,8 +60,8 @@ export const ButtonPrimary = forwardRef( ], 'focus-visible:outline-none focus-visible:ring-0', isInverse - ? 'focus-visible:outline-background-default focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4' - : 'focus-visible:outline-primary-default focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2', + ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default' + : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default', // Loading styles isLoading && 'cursor-not-allowed', // Disabled styles (but not loading) diff --git a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx index 5fee6cbf2..556c3d718 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx @@ -1,10 +1,9 @@ -import type { Meta, StoryObj } from '@storybook/react-vite'; -import React from 'react'; - import { ButtonBaseSize as ButtonSecondarySize, IconName, } from '@metamask/design-system-shared'; +import type { Meta, StoryObj } from '@storybook/react-vite'; +import React from 'react'; import { ButtonSecondary } from './ButtonSecondary'; import README from './README.mdx'; diff --git a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx index dcc893c8c..2d44bc245 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx @@ -1,10 +1,9 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; - import { ButtonBaseSize as ButtonSecondarySize, IconName, } from '@metamask/design-system-shared'; +import { render, screen } from '@testing-library/react'; +import React from 'react'; import { ButtonSecondary } from './ButtonSecondary'; diff --git a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx index e635cb295..4ea72be56 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx @@ -33,14 +33,14 @@ export const ButtonSecondary = forwardRef< // Inverse styles isInverse && !isDanger && [ - 'border-primary-inverse text-primary-inverse border-2 bg-transparent', + 'border-2 border-primary-inverse bg-transparent text-primary-inverse', // Loading state uses pressed color isLoading && 'bg-pressed', ], // Inverse danger styles isInverse && isDanger && [ - 'bg-default text-error-default border-0', + 'border-0 bg-default text-error-default', // Loading state uses pressed color isLoading && 'bg-default-pressed', ], @@ -56,8 +56,8 @@ export const ButtonSecondary = forwardRef< ], 'focus-visible:outline-none focus-visible:ring-0', isInverse - ? 'focus-visible:outline-background-default focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4' - : 'focus-visible:outline-primary-default focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2', + ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default' + : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default', // Loading styles isLoading && 'cursor-not-allowed', // Disabled styles (but not loading) diff --git a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx index ebc8475a7..40b7b81ab 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx @@ -1,10 +1,9 @@ -import type { Meta, StoryObj } from '@storybook/react-vite'; -import React from 'react'; - import { ButtonBaseSize as ButtonTertiarySize, IconName, } from '@metamask/design-system-shared'; +import type { Meta, StoryObj } from '@storybook/react-vite'; +import React from 'react'; import { ButtonTertiary } from './ButtonTertiary'; import README from './README.mdx'; diff --git a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx index 2ee921f96..319a2f4b0 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx @@ -1,10 +1,9 @@ -import { render, screen } from '@testing-library/react'; -import React, { createRef } from 'react'; - import { ButtonBaseSize as ButtonTertiarySize, IconName, } from '@metamask/design-system-shared'; +import { render, screen } from '@testing-library/react'; +import React, { createRef } from 'react'; import { ButtonTertiary } from './ButtonTertiary'; diff --git a/packages/design-system-react/src/components/ButtonBase/ButtonBase.test.tsx b/packages/design-system-react/src/components/ButtonBase/ButtonBase.test.tsx index 9fc13b503..4b2b127da 100644 --- a/packages/design-system-react/src/components/ButtonBase/ButtonBase.test.tsx +++ b/packages/design-system-react/src/components/ButtonBase/ButtonBase.test.tsx @@ -1,8 +1,7 @@ +import { ButtonBaseSize, IconName } from '@metamask/design-system-shared'; import { render, screen } from '@testing-library/react'; import React from 'react'; -import { ButtonBaseSize, IconName } from '@metamask/design-system-shared'; - import { ButtonBase } from './ButtonBase'; describe('ButtonBase', () => { diff --git a/packages/design-system-react/src/components/ButtonBase/ButtonBase.tsx b/packages/design-system-react/src/components/ButtonBase/ButtonBase.tsx index 41b472d7b..7a3b4f0c5 100644 --- a/packages/design-system-react/src/components/ButtonBase/ButtonBase.tsx +++ b/packages/design-system-react/src/components/ButtonBase/ButtonBase.tsx @@ -1,7 +1,4 @@ -import { - ButtonBaseSize, - IconName, -} from '@metamask/design-system-shared'; +import { ButtonBaseSize, IconName } from '@metamask/design-system-shared'; import { Slot, Slottable } from '@radix-ui/react-slot'; import React, { forwardRef } from 'react'; @@ -154,7 +151,7 @@ export const ButtonBase = forwardRef( // Base styles 'inline-flex items-center justify-center', 'rounded-xl px-4', - 'text-default font-medium', + 'font-medium text-default', 'bg-muted', 'min-w-20 overflow-hidden', // Add relative positioning for loading state diff --git a/packages/design-system-react/src/components/ButtonHero/ButtonHero.stories.tsx b/packages/design-system-react/src/components/ButtonHero/ButtonHero.stories.tsx index 88e97c2c0..4d0491bfc 100644 --- a/packages/design-system-react/src/components/ButtonHero/ButtonHero.stories.tsx +++ b/packages/design-system-react/src/components/ButtonHero/ButtonHero.stories.tsx @@ -1,10 +1,9 @@ -import type { Meta, StoryObj } from '@storybook/react-vite'; -import React from 'react'; - import { ButtonBaseSize as ButtonHeroSize, IconName, } from '@metamask/design-system-shared'; +import type { Meta, StoryObj } from '@storybook/react-vite'; +import React from 'react'; import { ButtonHero } from './ButtonHero'; import README from './README.mdx'; diff --git a/packages/design-system-shared/src/index.ts b/packages/design-system-shared/src/index.ts index 99d8bcbb5..9cc44bb8f 100644 --- a/packages/design-system-shared/src/index.ts +++ b/packages/design-system-shared/src/index.ts @@ -166,9 +166,3 @@ export { IconSize, type IconPropsShared, } from './types/Icon'; - -// ButtonBase types (ADR-0003 + ADR-0004) -export { ButtonBaseSize, type ButtonBasePropsShared } from './types/ButtonBase'; - -// Button types (ADR-0003 + ADR-0004) -export { ButtonVariant, type ButtonPropsShared } from './types/Button'; From b16bfbd2bd9613a8e37629fbe58605bee65af8e1 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 28 Apr 2026 10:24:45 -0700 Subject: [PATCH 4/8] fix: align button size aliases and internal variants --- .../src/components/BannerBase/BannerBase.tsx | 2 +- .../src/components/Button/Button.stories.tsx | 2 +- .../src/components/Button/index.ts | 5 +---- .../ButtonPrimary/ButtonPrimary.stories.tsx | 15 ++++++--------- .../variants/ButtonPrimary/ButtonPrimary.tsx | 5 +++++ .../Button/variants/ButtonPrimary/README.md | 3 +++ .../Button/variants/ButtonPrimary/index.ts | 1 - .../ButtonSecondary.stories.tsx | 19 ++++++------------- .../ButtonSecondary/ButtonSecondary.tsx | 5 +++++ .../Button/variants/ButtonSecondary/README.md | 3 +++ .../Button/variants/ButtonSecondary/index.ts | 1 - .../ButtonTertiary/ButtonTertiary.stories.tsx | 19 ++++++------------- .../ButtonTertiary/ButtonTertiary.tsx | 5 +++++ .../Button/variants/ButtonTertiary/README.md | 3 +++ .../Button/variants/ButtonTertiary/index.ts | 1 - .../ButtonHero/ButtonHero.stories.tsx | 5 +---- .../src/components/ButtonHero/index.ts | 2 +- .../src/components/BannerBase/BannerBase.tsx | 2 +- .../src/components/Button/Button.stories.tsx | 2 +- .../src/components/Button/index.ts | 5 +---- .../ButtonPrimary/ButtonPrimary.stories.tsx | 15 ++++++--------- .../ButtonPrimary/ButtonPrimary.test.tsx | 9 +++------ .../variants/ButtonPrimary/ButtonPrimary.tsx | 4 ++++ .../Button/variants/ButtonPrimary/README.mdx | 17 +++++++++-------- .../Button/variants/ButtonPrimary/index.ts | 1 - .../ButtonSecondary.stories.tsx | 15 ++++++--------- .../ButtonSecondary/ButtonSecondary.test.tsx | 11 +++-------- .../ButtonSecondary/ButtonSecondary.tsx | 4 ++++ .../variants/ButtonSecondary/README.mdx | 17 +++++++++-------- .../Button/variants/ButtonSecondary/index.ts | 1 - .../ButtonTertiary/ButtonTertiary.stories.tsx | 13 +++++-------- .../ButtonTertiary/ButtonTertiary.test.tsx | 15 ++++----------- .../ButtonTertiary/ButtonTertiary.tsx | 4 ++++ .../Button/variants/ButtonTertiary/README.mdx | 17 +++++++++-------- .../Button/variants/ButtonTertiary/index.ts | 1 - .../ButtonHero/ButtonHero.stories.tsx | 5 +---- .../src/components/ButtonHero/index.ts | 2 +- packages/design-system-shared/src/index.ts | 7 ++++++- .../src/types/ButtonBase/ButtonBase.types.ts | 6 ++++++ .../src/types/ButtonBase/index.ts | 7 ++++++- 40 files changed, 136 insertions(+), 140 deletions(-) diff --git a/packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx b/packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx index 4648a0ec6..af09c04d3 100644 --- a/packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx +++ b/packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx @@ -1,9 +1,9 @@ import { BoxAlignItems, BoxBackgroundColor, - ButtonBaseSize as ButtonSize, BoxFlexDirection, ButtonIconSize, + ButtonSize, FontWeight, IconName, TextVariant, diff --git a/packages/design-system-react-native/src/components/Button/Button.stories.tsx b/packages/design-system-react-native/src/components/Button/Button.stories.tsx index 3d11d4e4a..bdce75316 100644 --- a/packages/design-system-react-native/src/components/Button/Button.stories.tsx +++ b/packages/design-system-react-native/src/components/Button/Button.stories.tsx @@ -1,5 +1,5 @@ import { - ButtonBaseSize as ButtonSize, + ButtonSize, ButtonVariant, IconName, } from '@metamask/design-system-shared'; diff --git a/packages/design-system-react-native/src/components/Button/index.ts b/packages/design-system-react-native/src/components/Button/index.ts index b15ebcf10..4992b96c8 100644 --- a/packages/design-system-react-native/src/components/Button/index.ts +++ b/packages/design-system-react-native/src/components/Button/index.ts @@ -1,6 +1,3 @@ -export { - ButtonBaseSize as ButtonSize, - ButtonVariant, -} from '@metamask/design-system-shared'; +export { ButtonSize, ButtonVariant } from '@metamask/design-system-shared'; export { Button } from './Button'; export type { ButtonProps } from './Button.types'; diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx index 75953cba8..3a592c41d 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx +++ b/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx @@ -1,7 +1,4 @@ -import { - ButtonBaseSize as ButtonPrimarySize, - IconName, -} from '@metamask/design-system-shared'; +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'; @@ -18,7 +15,7 @@ const meta: Meta = { }, size: { control: 'select', - options: ButtonPrimarySize, + options: ButtonSize, }, isLoading: { control: 'boolean', @@ -70,7 +67,7 @@ const ButtonPrimaryStory: React.FC = ({ export const Default: Story = { args: { children: 'Sample ButtonPrimary Text', - size: ButtonPrimarySize.Lg, + size: ButtonSize.Lg, isLoading: false, loadingText: 'Loading', startIconName: IconName.Add, @@ -86,9 +83,9 @@ export const Default: Story = { export const Sizes: Story = { render: () => ( - ButtonSize Sm - ButtonSize Md - + ButtonSize Sm + ButtonSize Md + ButtonSize Lg (Default) diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx index adf71f997..4dd6d41b6 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx +++ b/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx @@ -6,6 +6,11 @@ import { TextVariant, FontWeight } from '../../../Text'; import type { ButtonPrimaryProps } from './ButtonPrimary.types'; +// eslint-disable-next-line jsdoc/require-param, jsdoc/require-returns +/** + * Internal variant of `Button`. + * Consumers should use `Button` with `variant`; this variant component is not part of the public package API. + */ export const ButtonPrimary = ({ children, textProps, diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/README.md b/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/README.md index 6d9b1d2c9..9bbfd4297 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/README.md +++ b/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 diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/index.ts b/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/index.ts index 00c6aae94..ea4794add 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/index.ts +++ b/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/index.ts @@ -1,3 +1,2 @@ -export { ButtonBaseSize as ButtonPrimarySize } from '@metamask/design-system-shared'; export { ButtonPrimary } from './ButtonPrimary'; export type { ButtonPrimaryProps } from './ButtonPrimary.types'; diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx index c7ba891a5..8bd8fc12a 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx +++ b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx @@ -1,7 +1,4 @@ -import { - ButtonBaseSize as ButtonSecondarySize, - IconName, -} from '@metamask/design-system-shared'; +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'; @@ -18,7 +15,7 @@ const meta: Meta = { }, size: { control: 'select', - options: ButtonSecondarySize, + options: ButtonSize, }, isLoading: { control: 'boolean', @@ -70,7 +67,7 @@ const ButtonSecondaryStory: React.FC = ({ export const Default: Story = { args: { children: 'Sample ButtonSecondary Text', - size: ButtonSecondarySize.Lg, + size: ButtonSize.Lg, isLoading: false, loadingText: 'Loading', startIconName: IconName.Add, @@ -86,13 +83,9 @@ export const Default: Story = { export const Sizes: Story = { render: () => ( - - ButtonSize Sm - - - ButtonSize Md - - + ButtonSize Sm + ButtonSize Md + ButtonSize Lg (Default) diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx index e555b86ce..8b3dfd1a8 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx +++ b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx @@ -6,6 +6,11 @@ import { TextVariant, FontWeight } from '../../../Text'; import type { ButtonSecondaryProps } from './ButtonSecondary.types'; +// eslint-disable-next-line jsdoc/require-param, jsdoc/require-returns +/** + * Internal variant of `Button`. + * Consumers should use `Button` with `variant`; this variant component is not part of the public package API. + */ export const ButtonSecondary = ({ children, textProps, diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/README.md b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/README.md index 94d5d986e..c33adfeca 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/README.md +++ b/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 diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/index.ts b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/index.ts index d125429c3..73a792c24 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/index.ts +++ b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/index.ts @@ -1,3 +1,2 @@ -export { ButtonBaseSize as ButtonSecondarySize } from '@metamask/design-system-shared'; export { ButtonSecondary } from './ButtonSecondary'; export type { ButtonSecondaryProps } from './ButtonSecondary.types'; diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx index c26f0eb43..9f4738b59 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx +++ b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx @@ -1,7 +1,4 @@ -import { - ButtonBaseSize as ButtonTertiarySize, - IconName, -} from '@metamask/design-system-shared'; +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'; @@ -18,7 +15,7 @@ const meta: Meta = { }, size: { control: 'select', - options: ButtonTertiarySize, + options: ButtonSize, }, isLoading: { control: 'boolean', @@ -70,7 +67,7 @@ const ButtonTertiaryStory: React.FC = ({ export const Default: Story = { args: { children: 'Sample ButtonTertiary Text', - size: ButtonTertiarySize.Lg, + size: ButtonSize.Lg, isLoading: false, loadingText: 'Loading', startIconName: IconName.Add, @@ -86,13 +83,9 @@ export const Default: Story = { export const Sizes: Story = { render: () => ( - - ButtonSize Sm - - - ButtonSize Md - - + ButtonSize Sm + ButtonSize Md + ButtonSize Lg (Default) diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx index cec8457a3..85cbd79b4 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx +++ b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx @@ -6,6 +6,11 @@ import { TextVariant, FontWeight } from '../../../Text'; import type { ButtonTertiaryProps } from './ButtonTertiary.types'; +// eslint-disable-next-line jsdoc/require-param, jsdoc/require-returns +/** + * Internal variant of `Button`. + * Consumers should use `Button` with `variant`; this variant component is not part of the public package API. + */ export const ButtonTertiary = ({ children, textProps, diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/README.md b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/README.md index 165a7a3eb..3bfb0ea51 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/README.md +++ b/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 diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/index.ts b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/index.ts index e91dd8d85..33bbae45d 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/index.ts +++ b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/index.ts @@ -1,3 +1,2 @@ -export { ButtonBaseSize as ButtonTertiarySize } from '@metamask/design-system-shared'; export { ButtonTertiary } from './ButtonTertiary'; export type { ButtonTertiaryProps } from './ButtonTertiary.types'; diff --git a/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.stories.tsx b/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.stories.tsx index 14c386e50..5732a66be 100644 --- a/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.stories.tsx +++ b/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.stories.tsx @@ -1,7 +1,4 @@ -import { - ButtonBaseSize as ButtonHeroSize, - IconName, -} from '@metamask/design-system-shared'; +import { ButtonHeroSize, IconName } from '@metamask/design-system-shared'; import type { Meta, StoryObj } from '@storybook/react-native'; import React from 'react'; import { View } from 'react-native'; diff --git a/packages/design-system-react-native/src/components/ButtonHero/index.ts b/packages/design-system-react-native/src/components/ButtonHero/index.ts index 8ea4cc220..77ea4f3fd 100644 --- a/packages/design-system-react-native/src/components/ButtonHero/index.ts +++ b/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 { ButtonBaseSize as ButtonHeroSize } from '@metamask/design-system-shared'; +export { ButtonHeroSize } from '@metamask/design-system-shared'; diff --git a/packages/design-system-react/src/components/BannerBase/BannerBase.tsx b/packages/design-system-react/src/components/BannerBase/BannerBase.tsx index f8784a2d0..51404f717 100644 --- a/packages/design-system-react/src/components/BannerBase/BannerBase.tsx +++ b/packages/design-system-react/src/components/BannerBase/BannerBase.tsx @@ -1,9 +1,9 @@ import { BoxAlignItems, BoxBackgroundColor, - ButtonBaseSize as ButtonSize, BoxFlexDirection, ButtonIconSize, + ButtonSize, FontWeight, IconName, TextVariant, diff --git a/packages/design-system-react/src/components/Button/Button.stories.tsx b/packages/design-system-react/src/components/Button/Button.stories.tsx index 4578de3ca..081745587 100644 --- a/packages/design-system-react/src/components/Button/Button.stories.tsx +++ b/packages/design-system-react/src/components/Button/Button.stories.tsx @@ -1,6 +1,6 @@ import { ButtonVariant, - ButtonBaseSize as ButtonSize, + ButtonSize, IconName, } from '@metamask/design-system-shared'; import type { Meta, StoryObj } from '@storybook/react-vite'; diff --git a/packages/design-system-react/src/components/Button/index.ts b/packages/design-system-react/src/components/Button/index.ts index abed5686c..a35bfd094 100644 --- a/packages/design-system-react/src/components/Button/index.ts +++ b/packages/design-system-react/src/components/Button/index.ts @@ -1,6 +1,3 @@ -export { - ButtonVariant, - ButtonBaseSize as ButtonSize, -} from '@metamask/design-system-shared'; +export { ButtonVariant, ButtonSize } from '@metamask/design-system-shared'; export { Button } from './Button'; export type { ButtonProps } from './Button.types'; diff --git a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx index 0b33d1e1f..5fa7438cc 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx @@ -1,7 +1,4 @@ -import { - ButtonBaseSize as ButtonPrimarySize, - IconName, -} from '@metamask/design-system-shared'; +import { ButtonSize, IconName } from '@metamask/design-system-shared'; import type { Meta, StoryObj } from '@storybook/react-vite'; import React from 'react'; @@ -39,8 +36,8 @@ const meta: Meta = { }, size: { control: 'select', - options: Object.keys(ButtonPrimarySize), - mapping: ButtonPrimarySize, + options: Object.keys(ButtonSize), + mapping: ButtonSize, description: 'Optional prop to control the size of the ButtonPrimary', }, isFullWidth: { @@ -135,13 +132,13 @@ export const IsInverse: Story = { export const Size: Story = { render: (args) => (
- + Small - + Medium - + Large
diff --git a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx index d468bd436..817da34ea 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx @@ -1,7 +1,4 @@ -import { - ButtonBaseSize as ButtonPrimarySize, - IconName, -} from '@metamask/design-system-shared'; +import { ButtonSize, IconName } from '@metamask/design-system-shared'; import { render, screen } from '@testing-library/react'; import React from 'react'; @@ -117,11 +114,11 @@ describe('ButtonPrimary', () => { it('renders with correct size classes', () => { const { rerender } = render( - Small, + Small, ); expect(screen.getByRole('button')).toHaveClass('h-8'); - rerender(Large); + rerender(Large); expect(screen.getByRole('button')).toHaveClass('h-12'); }); diff --git a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx index 87fbc848d..9eccd1604 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx @@ -5,6 +5,10 @@ import { ButtonBase } from '../../../ButtonBase'; import type { ButtonPrimaryProps } from './ButtonPrimary.types'; +/** + * Internal variant of `Button`. + * Consumers should use `Button` with `variant`; this variant component is not part of the public package API. + */ export const ButtonPrimary = forwardRef( ( { className, isDanger, isInverse, isDisabled, isLoading, ...props }, diff --git a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/README.mdx b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/README.mdx index 1d2a7b25f..0c5a22869 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/README.mdx +++ b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/README.mdx @@ -4,12 +4,13 @@ import * as ButtonPrimaryStories from './ButtonPrimary.stories'; # ButtonPrimary -`ButtonPrimary` is a button for most important and desired action to guide the user. +`ButtonPrimary` is an internal variant of the public `Button` component. +Consumers should use `Button` with `variant={ButtonVariant.Primary}` instead of using `ButtonPrimary` directly. ```tsx -import { ButtonPrimary } from '@metamask/design-system-react'; +import { Button, ButtonVariant } from '@metamask/design-system-react'; -Primary Button; +; ``` @@ -22,9 +23,9 @@ ButtonPrimary supports three sizes. Available sizes: -- `ButtonPrimarySize.Sm` (32px) -- `ButtonPrimarySize.Md` (40px) -- `ButtonPrimarySize.Lg` (48px) +- `ButtonSize.Sm` (32px) +- `ButtonSize.Md` (40px) +- `ButtonSize.Lg` (48px) @@ -37,11 +38,11 @@ Available sizes: diff --git a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/index.ts b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/index.ts index 00c6aae94..ea4794add 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/index.ts +++ b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/index.ts @@ -1,3 +1,2 @@ -export { ButtonBaseSize as ButtonPrimarySize } from '@metamask/design-system-shared'; export { ButtonPrimary } from './ButtonPrimary'; export type { ButtonPrimaryProps } from './ButtonPrimary.types'; diff --git a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx index 556c3d718..7e5000633 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx @@ -1,7 +1,4 @@ -import { - ButtonBaseSize as ButtonSecondarySize, - IconName, -} from '@metamask/design-system-shared'; +import { ButtonSize, IconName } from '@metamask/design-system-shared'; import type { Meta, StoryObj } from '@storybook/react-vite'; import React from 'react'; @@ -39,8 +36,8 @@ const meta: Meta = { }, size: { control: 'select', - options: Object.keys(ButtonSecondarySize), - mapping: ButtonSecondarySize, + options: Object.keys(ButtonSize), + mapping: ButtonSize, description: 'Optional prop to control the size of the ButtonSecondary', }, isFullWidth: { @@ -135,13 +132,13 @@ export const IsInverse: Story = { export const Size: Story = { render: (args) => (
- + Small - + Medium - + Large
diff --git a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx index 2d44bc245..55342e4b6 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx @@ -1,7 +1,4 @@ -import { - ButtonBaseSize as ButtonSecondarySize, - IconName, -} from '@metamask/design-system-shared'; +import { ButtonSize, IconName } from '@metamask/design-system-shared'; import { render, screen } from '@testing-library/react'; import React from 'react'; @@ -100,13 +97,11 @@ describe('ButtonSecondary', () => { it('renders with correct size classes', () => { const { rerender } = render( - Small, + Small, ); expect(screen.getByRole('button')).toHaveClass('h-8'); - rerender( - Large, - ); + rerender(Large); expect(screen.getByRole('button')).toHaveClass('h-12'); }); diff --git a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx index 4ea72be56..17627e501 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx @@ -5,6 +5,10 @@ import { ButtonBase } from '../../../ButtonBase'; import type { ButtonSecondaryProps } from './ButtonSecondary.types'; +/** + * Internal variant of `Button`. + * Consumers should use `Button` with `variant`; this variant component is not part of the public package API. + */ export const ButtonSecondary = forwardRef< HTMLButtonElement, ButtonSecondaryProps diff --git a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/README.mdx b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/README.mdx index d0331b099..b47735170 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/README.mdx +++ b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/README.mdx @@ -4,12 +4,13 @@ import * as ButtonSecondaryStories from './ButtonSecondary.stories'; # ButtonSecondary -`ButtonSecondary` is a button for additional options that are helpful. +`ButtonSecondary` is an internal variant of the public `Button` component. +Consumers should use `Button` with `variant={ButtonVariant.Secondary}` instead of using `ButtonSecondary` directly. ```tsx -import { ButtonSecondary } from '@metamask/design-system-react'; +import { Button, ButtonVariant } from '@metamask/design-system-react'; - {}}>Secondary Button; +; ``` @@ -22,9 +23,9 @@ ButtonSecondary supports three sizes. Available sizes: -- `ButtonSecondarySize.Sm` (32px) -- `ButtonSecondarySize.Md` (40px) -- `ButtonSecondarySize.Lg` (48px) +- `ButtonSize.Sm` (32px) +- `ButtonSize.Md` (40px) +- `ButtonSize.Lg` (48px)
- ButtonPrimarySize + ButtonSize No - ButtonPrimarySize.Lg + ButtonSize.Lg
@@ -37,11 +38,11 @@ Available sizes: diff --git a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/index.ts b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/index.ts index d125429c3..73a792c24 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/index.ts +++ b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/index.ts @@ -1,3 +1,2 @@ -export { ButtonBaseSize as ButtonSecondarySize } from '@metamask/design-system-shared'; export { ButtonSecondary } from './ButtonSecondary'; export type { ButtonSecondaryProps } from './ButtonSecondary.types'; diff --git a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx index 40b7b81ab..19ba2924d 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx @@ -1,7 +1,4 @@ -import { - ButtonBaseSize as ButtonTertiarySize, - IconName, -} from '@metamask/design-system-shared'; +import { ButtonSize, IconName } from '@metamask/design-system-shared'; import type { Meta, StoryObj } from '@storybook/react-vite'; import React from 'react'; @@ -34,7 +31,7 @@ const meta: Meta = { }, size: { control: 'select', - options: Object.values(ButtonTertiarySize), + options: Object.values(ButtonSize), description: 'Optional prop to control the size of the ButtonTertiary', }, isFullWidth: { @@ -114,13 +111,13 @@ export const IsDanger: Story = { export const Size: Story = { render: (args) => (
- + Small - + Medium - + Large
diff --git a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx index 319a2f4b0..ce4dadf9e 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx @@ -1,7 +1,4 @@ -import { - ButtonBaseSize as ButtonTertiarySize, - IconName, -} from '@metamask/design-system-shared'; +import { ButtonSize, IconName } from '@metamask/design-system-shared'; import { render, screen } from '@testing-library/react'; import React, { createRef } from 'react'; @@ -56,18 +53,14 @@ describe('ButtonTertiary', () => { it('renders with correct size classes', () => { const { rerender } = render( - Small, + Small, ); expect(screen.getByRole('button')).toHaveClass('h-8'); - rerender( - Medium, - ); + rerender(Medium); expect(screen.getByRole('button')).toHaveClass('h-10'); - rerender( - Large, - ); + rerender(Large); expect(screen.getByRole('button')).toHaveClass('h-12'); }); diff --git a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx index 3c0602dcc..5d8fd46eb 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx @@ -5,6 +5,10 @@ import { ButtonBase } from '../../../ButtonBase'; import type { ButtonTertiaryProps } from './ButtonTertiary.types'; +/** + * Internal variant of `Button`. + * Consumers should use `Button` with `variant`; this variant component is not part of the public package API. + */ export const ButtonTertiary = forwardRef< HTMLButtonElement, ButtonTertiaryProps diff --git a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/README.mdx b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/README.mdx index 55d963878..0ec75e470 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/README.mdx +++ b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/README.mdx @@ -4,12 +4,13 @@ import * as ButtonTertiaryStories from './ButtonTertiary.stories'; # ButtonTertiary -`ButtonTertiary` is a button for optional and lowest attention. +`ButtonTertiary` is an internal variant of the public `Button` component. +Consumers should use `Button` with `variant={ButtonVariant.Tertiary}` instead of using `ButtonTertiary` directly. ```tsx -import { ButtonTertiary } from '@metamask/design-system-react'; +import { Button, ButtonVariant } from '@metamask/design-system-react'; - {}}>Button Tertiary; +; ``` @@ -22,9 +23,9 @@ ButtonTertiary supports three sizes. Available sizes: -- `ButtonTertiarySize.Sm` (32px) -- `ButtonTertiarySize.Md` (40px) -- `ButtonTertiarySize.Lg` (48px) +- `ButtonSize.Sm` (32px) +- `ButtonSize.Md` (40px) +- `ButtonSize.Lg` (48px)
- ButtonSecondarySize + ButtonSize No - ButtonSecondarySize.Lg + ButtonSize.Lg
@@ -37,11 +38,11 @@ Available sizes: diff --git a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/index.ts b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/index.ts index e91dd8d85..33bbae45d 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/index.ts +++ b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/index.ts @@ -1,3 +1,2 @@ -export { ButtonBaseSize as ButtonTertiarySize } from '@metamask/design-system-shared'; export { ButtonTertiary } from './ButtonTertiary'; export type { ButtonTertiaryProps } from './ButtonTertiary.types'; diff --git a/packages/design-system-react/src/components/ButtonHero/ButtonHero.stories.tsx b/packages/design-system-react/src/components/ButtonHero/ButtonHero.stories.tsx index 4d0491bfc..46ed8a031 100644 --- a/packages/design-system-react/src/components/ButtonHero/ButtonHero.stories.tsx +++ b/packages/design-system-react/src/components/ButtonHero/ButtonHero.stories.tsx @@ -1,7 +1,4 @@ -import { - ButtonBaseSize as ButtonHeroSize, - IconName, -} from '@metamask/design-system-shared'; +import { ButtonHeroSize, IconName } from '@metamask/design-system-shared'; import type { Meta, StoryObj } from '@storybook/react-vite'; import React from 'react'; diff --git a/packages/design-system-react/src/components/ButtonHero/index.ts b/packages/design-system-react/src/components/ButtonHero/index.ts index 8ea4cc220..77ea4f3fd 100644 --- a/packages/design-system-react/src/components/ButtonHero/index.ts +++ b/packages/design-system-react/src/components/ButtonHero/index.ts @@ -1,3 +1,3 @@ export { ButtonHero } from './ButtonHero'; export type { ButtonHeroProps } from './ButtonHero.types'; -export { ButtonBaseSize as ButtonHeroSize } from '@metamask/design-system-shared'; +export { ButtonHeroSize } from '@metamask/design-system-shared'; diff --git a/packages/design-system-shared/src/index.ts b/packages/design-system-shared/src/index.ts index 9cc44bb8f..0aa5644b3 100644 --- a/packages/design-system-shared/src/index.ts +++ b/packages/design-system-shared/src/index.ts @@ -78,7 +78,12 @@ export { export { type ButtonFilterPropsShared } from './types/ButtonFilter'; // ButtonBase types (ADR-0003 + ADR-0004) -export { ButtonBaseSize, type ButtonBasePropsShared } from './types/ButtonBase'; +export { + ButtonBaseSize, + ButtonHeroSize, + ButtonSize, + type ButtonBasePropsShared, +} from './types/ButtonBase'; // Button types (ADR-0003 + ADR-0004) export { ButtonVariant, type ButtonPropsShared } from './types/Button'; diff --git a/packages/design-system-shared/src/types/ButtonBase/ButtonBase.types.ts b/packages/design-system-shared/src/types/ButtonBase/ButtonBase.types.ts index 730523da4..05ddb4ca1 100644 --- a/packages/design-system-shared/src/types/ButtonBase/ButtonBase.types.ts +++ b/packages/design-system-shared/src/types/ButtonBase/ButtonBase.types.ts @@ -19,6 +19,12 @@ export const ButtonBaseSize = { export type ButtonBaseSize = (typeof ButtonBaseSize)[keyof typeof ButtonBaseSize]; +export const ButtonSize = ButtonBaseSize; +export type ButtonSize = ButtonBaseSize; + +export const ButtonHeroSize = ButtonBaseSize; +export type ButtonHeroSize = ButtonBaseSize; + /** * ButtonBase component shared props (ADR-0004) * Platform-independent properties shared across React and React Native diff --git a/packages/design-system-shared/src/types/ButtonBase/index.ts b/packages/design-system-shared/src/types/ButtonBase/index.ts index 83f0883f8..883395feb 100644 --- a/packages/design-system-shared/src/types/ButtonBase/index.ts +++ b/packages/design-system-shared/src/types/ButtonBase/index.ts @@ -1 +1,6 @@ -export { ButtonBaseSize, type ButtonBasePropsShared } from './ButtonBase.types'; +export { + ButtonBaseSize, + ButtonHeroSize, + ButtonSize, + type ButtonBasePropsShared, +} from './ButtonBase.types'; From 0b336c742b28232df2a4877563aaa2b854215cef Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 28 Apr 2026 10:25:57 -0700 Subject: [PATCH 5/8] fix: use plain comments for internal button variants --- .../Button/variants/ButtonPrimary/ButtonPrimary.tsx | 7 ++----- .../Button/variants/ButtonSecondary/ButtonSecondary.tsx | 7 ++----- .../Button/variants/ButtonTertiary/ButtonTertiary.tsx | 7 ++----- .../Button/variants/ButtonPrimary/ButtonPrimary.tsx | 6 ++---- .../Button/variants/ButtonSecondary/ButtonSecondary.tsx | 6 ++---- .../Button/variants/ButtonTertiary/ButtonTertiary.tsx | 6 ++---- 6 files changed, 12 insertions(+), 27 deletions(-) diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx index 4dd6d41b6..c7c728abd 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx +++ b/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx @@ -6,11 +6,8 @@ import { TextVariant, FontWeight } from '../../../Text'; import type { ButtonPrimaryProps } from './ButtonPrimary.types'; -// eslint-disable-next-line jsdoc/require-param, jsdoc/require-returns -/** - * Internal variant of `Button`. - * Consumers should use `Button` with `variant`; this variant component is not part of the public package API. - */ +// Internal Button variant. +// Consumers should use `Button` with `variant`. export const ButtonPrimary = ({ children, textProps, diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx index 8b3dfd1a8..05272b34d 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx +++ b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx @@ -6,11 +6,8 @@ import { TextVariant, FontWeight } from '../../../Text'; import type { ButtonSecondaryProps } from './ButtonSecondary.types'; -// eslint-disable-next-line jsdoc/require-param, jsdoc/require-returns -/** - * Internal variant of `Button`. - * Consumers should use `Button` with `variant`; this variant component is not part of the public package API. - */ +// Internal Button variant. +// Consumers should use `Button` with `variant`. export const ButtonSecondary = ({ children, textProps, diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx index 85cbd79b4..66925c59a 100644 --- a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx +++ b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx @@ -6,11 +6,8 @@ import { TextVariant, FontWeight } from '../../../Text'; import type { ButtonTertiaryProps } from './ButtonTertiary.types'; -// eslint-disable-next-line jsdoc/require-param, jsdoc/require-returns -/** - * Internal variant of `Button`. - * Consumers should use `Button` with `variant`; this variant component is not part of the public package API. - */ +// Internal Button variant. +// Consumers should use `Button` with `variant`. export const ButtonTertiary = ({ children, textProps, diff --git a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx index 9eccd1604..1d5440e9c 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx @@ -5,10 +5,8 @@ import { ButtonBase } from '../../../ButtonBase'; import type { ButtonPrimaryProps } from './ButtonPrimary.types'; -/** - * Internal variant of `Button`. - * Consumers should use `Button` with `variant`; this variant component is not part of the public package API. - */ +// Internal Button variant. +// Consumers should use `Button` with `variant`. export const ButtonPrimary = forwardRef( ( { className, isDanger, isInverse, isDisabled, isLoading, ...props }, diff --git a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx index 17627e501..168853d28 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx @@ -5,10 +5,8 @@ import { ButtonBase } from '../../../ButtonBase'; import type { ButtonSecondaryProps } from './ButtonSecondary.types'; -/** - * Internal variant of `Button`. - * Consumers should use `Button` with `variant`; this variant component is not part of the public package API. - */ +// Internal Button variant. +// Consumers should use `Button` with `variant`. export const ButtonSecondary = forwardRef< HTMLButtonElement, ButtonSecondaryProps diff --git a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx index 5d8fd46eb..8f03e924f 100644 --- a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx +++ b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx @@ -5,10 +5,8 @@ import { ButtonBase } from '../../../ButtonBase'; import type { ButtonTertiaryProps } from './ButtonTertiary.types'; -/** - * Internal variant of `Button`. - * Consumers should use `Button` with `variant`; this variant component is not part of the public package API. - */ +// Internal Button variant. +// Consumers should use `Button` with `variant`. export const ButtonTertiary = forwardRef< HTMLButtonElement, ButtonTertiaryProps From ef3ae6e3ab4c5df730f75edd2656c09b4ad0f15a Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 28 Apr 2026 10:41:20 -0700 Subject: [PATCH 6/8] chore: removing AvatarIconSeverity --- .../design-system-react-native/src/types/index.ts | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/packages/design-system-react-native/src/types/index.ts b/packages/design-system-react-native/src/types/index.ts index 0dd6e4453..1029e19f4 100644 --- a/packages/design-system-react-native/src/types/index.ts +++ b/packages/design-system-react-native/src/types/index.ts @@ -19,15 +19,3 @@ export enum AvatarGroupVariant { Network = 'network', Token = 'token', } - -/** - * AvatarIcon - severity - */ -export enum AvatarIconSeverity { - Neutral = 'neutral', - Info = 'info', - Success = 'success', - // eslint-disable-next-line @typescript-eslint/no-shadow - Error = 'error', - Warning = 'warning', -} From 4c91bf9e1b271f715d0fbf7a0c9dcb4e9213313e Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 28 Apr 2026 11:31:56 -0700 Subject: [PATCH 7/8] chore: lint fix --- .../src/components/BannerBase/BannerBase.tsx | 1 + .../design-system-react/src/components/BannerBase/BannerBase.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx b/packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx index af09c04d3..1f923b4c0 100644 --- a/packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx +++ b/packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx @@ -10,6 +10,7 @@ import { } from '@metamask/design-system-shared'; import React from 'react'; import { GestureResponderEvent } from 'react-native'; + import { Box } from '../Box'; import { Button } from '../Button'; import { ButtonIcon } from '../ButtonIcon'; diff --git a/packages/design-system-react/src/components/BannerBase/BannerBase.tsx b/packages/design-system-react/src/components/BannerBase/BannerBase.tsx index 51404f717..daf620537 100644 --- a/packages/design-system-react/src/components/BannerBase/BannerBase.tsx +++ b/packages/design-system-react/src/components/BannerBase/BannerBase.tsx @@ -9,6 +9,7 @@ import { TextVariant, } from '@metamask/design-system-shared'; import React, { forwardRef } from 'react'; + import { twMerge } from '../../utils/tw-merge'; import { Box } from '../Box'; import { Button } from '../Button'; From cc5e4d5814d34c7640d56f4d9c7f2bc0f012d2b0 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 28 Apr 2026 11:36:35 -0700 Subject: [PATCH 8/8] chore: remove stale react button type re-exports --- packages/design-system-react/src/types/index.ts | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/packages/design-system-react/src/types/index.ts b/packages/design-system-react/src/types/index.ts index 49ace5bbf..9a344c832 100644 --- a/packages/design-system-react/src/types/index.ts +++ b/packages/design-system-react/src/types/index.ts @@ -20,21 +20,6 @@ export enum AvatarGroupVariant { Token = 'token', } -/** - * Button-related types re-exported from shared for compatibility. - */ -export { - ButtonBaseSize, - ButtonVariant, - ButtonIconSize, - ButtonIconVariant, -} from '@metamask/design-system-shared'; -export { ButtonBaseSize as ButtonPrimarySize } from '@metamask/design-system-shared'; -export { ButtonBaseSize as ButtonSecondarySize } from '@metamask/design-system-shared'; -export { ButtonBaseSize as ButtonTertiarySize } from '@metamask/design-system-shared'; -export { ButtonBaseSize as ButtonHeroSize } from '@metamask/design-system-shared'; -export { ButtonBaseSize as ButtonSize } from '@metamask/design-system-shared'; - /** * Text - textAlign */
- ButtonTertiarySize + ButtonSize No - ButtonTertiarySize.Lg + ButtonSize.Lg