From ff433173b06661b5b3e969921ac37eebebca5336 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sun, 12 Apr 2026 16:26:04 +0000 Subject: [PATCH 1/8] feat(DSYS-484): migrate ButtonBase and Button to ADR-0003 and ADR-0004 - Create ButtonBaseSize const object and ButtonBasePropsShared in shared package - Create ButtonVariant const object and ButtonPropsShared in shared package - Export new types from @metamask/design-system-shared index - Replace ButtonBaseSize and ButtonVariant enums in both platform type indices with re-exports from shared package (backwards compatible) - Update ButtonBase.types.ts, ButtonBase.tsx, ButtonBase.constants.ts in both platforms - Update Button.types.ts, Button.tsx in both platforms - Update ButtonBase/index.ts and Button/index.ts in both platforms to export from shared - Update ButtonHero/index.ts and all ButtonPrimary/Secondary/Tertiary variant index files to use ButtonBaseSize aliases from shared package Co-authored-by: George Marshall --- .../src/components/Button/Button.tsx | 3 +- .../src/components/Button/Button.types.ts | 2 +- .../src/components/Button/index.ts | 5 +- .../Button/variants/ButtonPrimary/index.ts | 2 +- .../Button/variants/ButtonSecondary/index.ts | 2 +- .../Button/variants/ButtonTertiary/index.ts | 2 +- .../ButtonBase/ButtonBase.constants.ts | 2 +- .../src/components/ButtonBase/ButtonBase.tsx | 2 +- .../components/ButtonBase/ButtonBase.types.ts | 51 +--- .../src/components/ButtonBase/index.ts | 2 +- .../src/types/index.ts | 37 +-- .../src/components/Button/Button.tsx | 3 +- .../src/components/Button/Button.types.ts | 8 +- .../src/components/Button/index.ts | 5 +- .../Button/variants/ButtonPrimary/index.ts | 2 +- .../Button/variants/ButtonSecondary/index.ts | 2 +- .../Button/variants/ButtonTertiary/index.ts | 2 +- .../ButtonBase/ButtonBase.constants.ts | 2 +- .../src/components/ButtonBase/ButtonBase.tsx | 2 +- .../components/ButtonBase/ButtonBase.types.ts | 233 ++++++++---------- .../src/components/ButtonBase/index.ts | 2 +- .../src/components/ButtonHero/index.ts | 2 +- .../design-system-react/src/types/index.ts | 46 +--- packages/design-system-shared/src/index.ts | 6 + .../src/types/Button/Button.types.ts | 34 +++ .../src/types/Button/index.ts | 1 + .../src/types/ButtonBase/ButtonBase.types.ts | 59 +++++ .../src/types/ButtonBase/index.ts | 1 + 28 files changed, 251 insertions(+), 269 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/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..9c608ae89 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 { ButtonVariant } from '@metamask/design-system-shared'; import type { ButtonPrimaryProps } from './variants/ButtonPrimary'; import type { ButtonSecondaryProps } from './variants/ButtonSecondary'; 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..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 { 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/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/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/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.tsx b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.tsx index 1ae187d4b..b6a45f2c4 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,9 @@ +import { ButtonBaseSize } from '@metamask/design-system-shared'; import { useTailwind } from '@metamask/design-system-twrnc-preset'; import React, { useMemo } from 'react'; import { View } from 'react-native'; import type { StyleProp, ViewStyle } from 'react-native'; -import { ButtonBaseSize } from '../../types'; import { Icon, IconColor, IconSize } from '../Icon'; import { ButtonAnimated } from '../temp-components/ButtonAnimated'; import { Spinner } from '../temp-components/Spinner'; 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..fe30be05e 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,6 +1,6 @@ +import type { ButtonBasePropsShared } from '@metamask/design-system-shared'; import type { PressableProps, StyleProp, ViewStyle } from 'react-native'; -import type { ButtonBaseSize } from '../../types'; import type { IconProps, IconName } from '../Icon'; import type { SpinnerProps } from '../temp-components/Spinner'; import type { TextProps } from '../Text'; @@ -8,32 +8,11 @@ import type { TextProps } from '../Text'; /** * ButtonBase component props. */ -export type ButtonBaseProps = { - /** - * Required prop for the content to be rendered within the ButtonBase - */ - children: React.ReactNode | string; +export type ButtonBaseProps = ButtonBasePropsShared & { /** * 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 +41,6 @@ export type ButtonBaseProps = { * Optional prop for a custom element to show at the end of the button */ endAccessory?: React.ReactNode; - /** - * Optional prop that when true, disables the button - * - * @default false - */ - isDisabled?: boolean; - /** - * Optional prop that when true, makes the button take up the full width of its container - * - * @default false - */ - isFullWidth?: boolean; /** * Optional prop to add twrnc overriding classNames. * Can be a string or a function that receives pressed state and returns a string. @@ -121,10 +88,10 @@ export type ButtonBaseProps = { 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/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/types/index.ts b/packages/design-system-react-native/src/types/index.ts index 772eb81aa..d11fe48fc 100644 --- a/packages/design-system-react-native/src/types/index.ts +++ b/packages/design-system-react-native/src/types/index.ts @@ -211,37 +211,12 @@ export enum BoxBorderColor { Transparent = 'border-transparent', } -/** - * ButtonBase - size - */ -export enum ButtonBaseSize { - /** - * Represents a small button size (32px). - */ - Sm = 'sm', - /** - * Represents a medium button size (40px). - */ - Md = 'md', - /** - * Represents a large button size (48px). - */ - Lg = 'lg', -} -export { ButtonBaseSize as ButtonSize }; -export { ButtonBaseSize as ButtonPrimarySize }; -export { ButtonBaseSize as ButtonSecondarySize }; -export { ButtonBaseSize as ButtonTertiarySize }; -export { ButtonBaseSize as ButtonHeroSize }; - -/** - * Button - variant - */ -export enum ButtonVariant { - Primary = 'primary', - Secondary = 'secondary', - Tertiary = 'tertiary', -} +export { ButtonBaseSize, ButtonVariant } from '@metamask/design-system-shared'; +export { ButtonBaseSize as ButtonSize } 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'; /** * ButtonIcon - size 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..8f15a7b42 100644 --- a/packages/design-system-react/src/components/Button/Button.types.ts +++ b/packages/design-system-react/src/components/Button/Button.types.ts @@ -1,4 +1,4 @@ -import type { ButtonVariant } from '../../types'; +import type { ButtonVariant } from '@metamask/design-system-shared'; import type { ButtonPrimaryProps } from './variants/ButtonPrimary'; import type { ButtonSecondaryProps } from './variants/ButtonSecondary'; @@ -13,12 +13,12 @@ export type ButtonProps = { variant?: ButtonVariant; } & ( | (Omit & { - variant?: ButtonVariant.Primary; + variant?: Extract; }) | (Omit & { - variant?: ButtonVariant.Secondary; + variant?: Extract; }) | (Omit & { - variant?: ButtonVariant.Tertiary; + variant?: Extract; }) ); diff --git a/packages/design-system-react/src/components/Button/index.ts b/packages/design-system-react/src/components/Button/index.ts index ef9407485..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, 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/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/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/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.tsx b/packages/design-system-react/src/components/ButtonBase/ButtonBase.tsx index 9fda610e9..a0bc62eb8 100644 --- a/packages/design-system-react/src/components/ButtonBase/ButtonBase.tsx +++ b/packages/design-system-react/src/components/ButtonBase/ButtonBase.tsx @@ -1,7 +1,7 @@ +import { ButtonBaseSize } 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 { Text, FontWeight, TextColor } from '../Text'; 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..a2847dc77 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,107 @@ +import type { ButtonBasePropsShared } from '@metamask/design-system-shared'; import type { ComponentProps } from 'react'; -import type { ButtonBaseSize } from '../../types'; import type { IconName, 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 = ButtonBasePropsShared & + ComponentProps<'button'> & { + /** + * 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/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 224741501..decaa3558 100644 --- a/packages/design-system-react/src/types/index.ts +++ b/packages/design-system-react/src/types/index.ts @@ -211,46 +211,12 @@ export enum BoxBorderColor { Transparent = 'border-transparent', } -/** - * ButtonBase - size - */ -export enum ButtonBaseSize { - /** - * Represents a small button size (32px). - */ - Sm = 'sm', - /** - * Represents a medium button size (40px). - */ - Md = 'md', - /** - * Represents a large button size (48px). - */ - Lg = 'lg', -} -export { ButtonBaseSize as 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 } 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'; /** * ButtonIcon - size diff --git a/packages/design-system-shared/src/index.ts b/packages/design-system-shared/src/index.ts index bff678ef4..b90893680 100644 --- a/packages/design-system-shared/src/index.ts +++ b/packages/design-system-shared/src/index.ts @@ -113,3 +113,9 @@ export { // Checkbox types (ADR-0004) export { type CheckboxPropsShared } from './types/Checkbox'; + +// 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/Button.types.ts b/packages/design-system-shared/src/types/Button/Button.types.ts new file mode 100644 index 000000000..e6a755253 --- /dev/null +++ b/packages/design-system-shared/src/types/Button/Button.types.ts @@ -0,0 +1,34 @@ +import type { ButtonBasePropsShared } from '../ButtonBase'; + +/** + * 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 = ButtonBasePropsShared & { + /** + * 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..fd196331f --- /dev/null +++ b/packages/design-system-shared/src/types/Button/index.ts @@ -0,0 +1 @@ +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..730523da4 --- /dev/null +++ b/packages/design-system-shared/src/types/ButtonBase/ButtonBase.types.ts @@ -0,0 +1,59 @@ +/** + * 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..83f0883f8 --- /dev/null +++ b/packages/design-system-shared/src/types/ButtonBase/index.ts @@ -0,0 +1 @@ +export { ButtonBaseSize, type ButtonBasePropsShared } from './ButtonBase.types'; From 8157e48418053466af9cd6608f04547c21069a49 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 14 Apr 2026 14:37:51 -0700 Subject: [PATCH 2/8] refactor(DSYS-484): migrate Button size aliases to design-system-shared and update internal imports - Export ButtonSize, ButtonPrimarySize, ButtonSecondarySize, ButtonTertiarySize, and ButtonHeroSize aliases from @metamask/design-system-shared - Update all component index.ts files to re-export named aliases from shared (no more `as` redirection) - Update all stories and tests to import Button types directly from @metamask/design-system-shared instead of ../../types - Remove Button-related re-exports from src/types/index.ts in both platform packages --- .../src/components/Button/Button.stories.tsx | 2 +- .../src/components/Button/Button.test.tsx | 2 +- .../src/components/Button/index.ts | 2 +- .../Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx | 2 +- .../Button/variants/ButtonPrimary/ButtonPrimary.test.tsx | 2 +- .../src/components/Button/variants/ButtonPrimary/index.ts | 2 +- .../variants/ButtonSecondary/ButtonSecondary.stories.tsx | 2 +- .../variants/ButtonSecondary/ButtonSecondary.test.tsx | 2 +- .../src/components/Button/variants/ButtonSecondary/index.ts | 2 +- .../variants/ButtonTertiary/ButtonTertiary.stories.tsx | 2 +- .../Button/variants/ButtonTertiary/ButtonTertiary.test.tsx | 2 +- .../src/components/Button/variants/ButtonTertiary/index.ts | 2 +- .../src/components/ButtonBase/ButtonBase.stories.tsx | 4 +++- .../src/components/ButtonBase/ButtonBase.test.tsx | 4 +++- .../src/components/ButtonHero/ButtonHero.stories.tsx | 2 +- .../src/components/ButtonHero/index.ts | 2 +- .../src/components/Checkbox/Checkbox.stories.tsx | 2 +- packages/design-system-react-native/src/types/index.ts | 6 ------ .../src/components/Button/Button.stories.tsx | 2 +- .../src/components/Button/Button.test.tsx | 2 +- packages/design-system-react/src/components/Button/index.ts | 2 +- .../Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx | 2 +- .../Button/variants/ButtonPrimary/ButtonPrimary.test.tsx | 2 +- .../src/components/Button/variants/ButtonPrimary/index.ts | 2 +- .../variants/ButtonSecondary/ButtonSecondary.stories.tsx | 2 +- .../variants/ButtonSecondary/ButtonSecondary.test.tsx | 2 +- .../src/components/Button/variants/ButtonSecondary/index.ts | 2 +- .../variants/ButtonTertiary/ButtonTertiary.stories.tsx | 2 +- .../Button/variants/ButtonTertiary/ButtonTertiary.test.tsx | 2 +- .../src/components/Button/variants/ButtonTertiary/index.ts | 2 +- .../src/components/ButtonBase/ButtonBase.stories.tsx | 3 +-- .../src/components/ButtonBase/ButtonBase.test.tsx | 2 +- .../src/components/ButtonHero/ButtonHero.stories.tsx | 2 +- .../design-system-react/src/components/ButtonHero/index.ts | 2 +- packages/design-system-react/src/types/index.ts | 6 ------ packages/design-system-shared/src/index.ts | 5 +++++ 36 files changed, 42 insertions(+), 46 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 faa991000..a5e70f693 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,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react-native'; import React from 'react'; import { View } from 'react-native'; -import { ButtonSize, ButtonVariant } from '../../types'; +import { ButtonSize, ButtonVariant } from '@metamask/design-system-shared'; import { IconName } from '../Icon'; import { Button } from './Button'; 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/index.ts b/packages/design-system-react-native/src/components/Button/index.ts index b15ebcf10..284e4de65 100644 --- a/packages/design-system-react-native/src/components/Button/index.ts +++ b/packages/design-system-react-native/src/components/Button/index.ts @@ -1,5 +1,5 @@ export { - ButtonBaseSize as ButtonSize, + ButtonSize, ButtonVariant, } from '@metamask/design-system-shared'; export { Button } from './Button'; 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..550518632 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,7 +2,7 @@ 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 { ButtonPrimarySize } from '@metamask/design-system-shared'; import { IconName } from '../../../Icon'; import { ButtonPrimary } from './ButtonPrimary'; 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 00c6aae94..a70937d37 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 { ButtonBaseSize as ButtonPrimarySize } from '@metamask/design-system-shared'; +export { 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..e892c467d 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,7 +2,7 @@ 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 { ButtonSecondarySize } from '@metamask/design-system-shared'; import { IconName } from '../../../Icon'; import { ButtonSecondary } from './ButtonSecondary'; 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 d125429c3..b5c9288a6 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 { ButtonBaseSize as ButtonSecondarySize } from '@metamask/design-system-shared'; +export { 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..e26d46f69 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,7 +2,7 @@ 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 { ButtonTertiarySize } from '@metamask/design-system-shared'; import { IconName } from '../../../Icon'; import { ButtonTertiary } from './ButtonTertiary'; 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 e91dd8d85..29e87a893 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 { ButtonBaseSize as ButtonTertiarySize } from '@metamask/design-system-shared'; +export { 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.stories.tsx b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.stories.tsx index a867b767c..580a634aa 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,6 +1,8 @@ import type { Meta, StoryObj } from '@storybook/react-native'; -import { BoxFlexDirection, ButtonBaseSize } from '../../types'; +import { ButtonBaseSize } from '@metamask/design-system-shared'; + +import { BoxFlexDirection } from '../../types'; import { Box } from '../Box'; import { IconName } from '../Icon'; 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..876aeb223 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,9 @@ import React from 'react'; import { View, Text } from 'react-native'; import * as ReactTestRenderer from 'react-test-renderer'; -import { ButtonBaseSize, IconName } from '../../types'; +import { ButtonBaseSize } from '@metamask/design-system-shared'; + +import { IconName } from '../../types'; import { ButtonBase } from './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 a83069b42..8ccfabbf8 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,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-native'; import React from 'react'; import { View } from 'react-native'; -import { ButtonHeroSize } from '../../types'; +import { ButtonHeroSize } from '@metamask/design-system-shared'; import { IconName } from '../Icon'; 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..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 { ButtonHeroSize } from '../../types'; +export { 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 d11fe48fc..8dccbba02 100644 --- a/packages/design-system-react-native/src/types/index.ts +++ b/packages/design-system-react-native/src/types/index.ts @@ -211,12 +211,6 @@ export enum BoxBorderColor { Transparent = 'border-transparent', } -export { ButtonBaseSize, ButtonVariant } from '@metamask/design-system-shared'; -export { ButtonBaseSize as ButtonSize } 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'; /** * ButtonIcon - size 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..6aa3197b4 100644 --- a/packages/design-system-react/src/components/Button/Button.stories.tsx +++ b/packages/design-system-react/src/components/Button/Button.stories.tsx @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; import React from 'react'; -import { ButtonVariant, ButtonSize } from '../../types'; +import { ButtonSize, ButtonVariant } from '@metamask/design-system-shared'; import { IconName } from '../Icon'; import { Button } from './Button'; 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 ae2f36421..69b0f909b 100644 --- a/packages/design-system-react/src/components/Button/Button.test.tsx +++ b/packages/design-system-react/src/components/Button/Button.test.tsx @@ -1,7 +1,7 @@ import { render, screen } from '@testing-library/react'; import React, { createRef } from 'react'; -import { ButtonVariant } from '../../types'; +import { ButtonVariant } from '@metamask/design-system-shared'; import { IconName } from '../Icon'; import { Button } from './Button'; diff --git a/packages/design-system-react/src/components/Button/index.ts b/packages/design-system-react/src/components/Button/index.ts index abed5686c..9751a7359 100644 --- a/packages/design-system-react/src/components/Button/index.ts +++ b/packages/design-system-react/src/components/Button/index.ts @@ -1,6 +1,6 @@ export { ButtonVariant, - ButtonBaseSize as ButtonSize, + 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..b3bd57456 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,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; import React from 'react'; -import { ButtonPrimarySize } from '../../../../types'; +import { ButtonPrimarySize } from '@metamask/design-system-shared'; import { IconName } from '../../../Icon'; import { ButtonPrimary } from './ButtonPrimary'; 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..9b8888000 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,7 @@ import { render, screen } from '@testing-library/react'; import React from 'react'; -import { ButtonPrimarySize } from '../../../../types'; +import { ButtonPrimarySize } from '@metamask/design-system-shared'; import { IconName } from '../../../Icon'; 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 00c6aae94..a70937d37 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 { ButtonBaseSize as ButtonPrimarySize } from '@metamask/design-system-shared'; +export { 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..50fd1831b 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,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; import React from 'react'; -import { ButtonSecondarySize } from '../../../../types'; +import { ButtonSecondarySize } from '@metamask/design-system-shared'; import { IconName } from '../../../Icon'; import { ButtonSecondary } from './ButtonSecondary'; 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..f04fe60bc 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,7 @@ import { render, screen } from '@testing-library/react'; import React from 'react'; -import { ButtonSecondarySize } from '../../../../types'; +import { ButtonSecondarySize } from '@metamask/design-system-shared'; import { IconName } from '../../../Icon'; 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 d125429c3..b5c9288a6 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 { ButtonBaseSize as ButtonSecondarySize } from '@metamask/design-system-shared'; +export { 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..505a74632 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,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; import React from 'react'; -import { ButtonTertiarySize } from '../../../../types'; +import { ButtonTertiarySize } from '@metamask/design-system-shared'; import { IconName } from '../../../Icon'; import { ButtonTertiary } from './ButtonTertiary'; 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 0c8475ce9..dcfb14080 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,7 @@ import { render, screen } from '@testing-library/react'; import React, { createRef } from 'react'; -import { ButtonTertiarySize } from '../../../../types'; +import { ButtonTertiarySize } from '@metamask/design-system-shared'; import { IconName } from '../../../Icon'; 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 e91dd8d85..29e87a893 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 { ButtonBaseSize as ButtonTertiarySize } from '@metamask/design-system-shared'; +export { 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.stories.tsx b/packages/design-system-react/src/components/ButtonBase/ButtonBase.stories.tsx index fc487015e..ddf8798ba 100644 --- a/packages/design-system-react/src/components/ButtonBase/ButtonBase.stories.tsx +++ b/packages/design-system-react/src/components/ButtonBase/ButtonBase.stories.tsx @@ -1,8 +1,7 @@ -import { TextColor, TextVariant } from '@metamask/design-system-shared'; +import { ButtonBaseSize, 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 { Text } from '../Text'; 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..682ce928e 100644 --- a/packages/design-system-react/src/components/ButtonBase/ButtonBase.test.tsx +++ b/packages/design-system-react/src/components/ButtonBase/ButtonBase.test.tsx @@ -1,7 +1,7 @@ import { render, screen } from '@testing-library/react'; import React from 'react'; -import { ButtonBaseSize } from '../../types'; +import { ButtonBaseSize } from '@metamask/design-system-shared'; import { IconName } from '../Icon'; import { ButtonBase } from './ButtonBase'; 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..6eadd8b99 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,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; import React from 'react'; -import { ButtonHeroSize } from '../../types'; +import { ButtonHeroSize } from '@metamask/design-system-shared'; import { IconName } from '../Icon'; import { ButtonHero } from './ButtonHero'; 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-react/src/types/index.ts b/packages/design-system-react/src/types/index.ts index decaa3558..4ef246778 100644 --- a/packages/design-system-react/src/types/index.ts +++ b/packages/design-system-react/src/types/index.ts @@ -211,12 +211,6 @@ export enum BoxBorderColor { Transparent = 'border-transparent', } -export { ButtonBaseSize, ButtonVariant } 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'; /** * ButtonIcon - size diff --git a/packages/design-system-shared/src/index.ts b/packages/design-system-shared/src/index.ts index b90893680..679733d58 100644 --- a/packages/design-system-shared/src/index.ts +++ b/packages/design-system-shared/src/index.ts @@ -116,6 +116,11 @@ export { type CheckboxPropsShared } from './types/Checkbox'; // ButtonBase types (ADR-0003 + ADR-0004) export { ButtonBaseSize, type ButtonBasePropsShared } from './types/ButtonBase'; +export { ButtonBaseSize as ButtonSize } from './types/ButtonBase'; +export { ButtonBaseSize as ButtonPrimarySize } from './types/ButtonBase'; +export { ButtonBaseSize as ButtonSecondarySize } from './types/ButtonBase'; +export { ButtonBaseSize as ButtonTertiarySize } from './types/ButtonBase'; +export { ButtonBaseSize as ButtonHeroSize } from './types/ButtonBase'; // Button types (ADR-0003 + ADR-0004) export { ButtonVariant, type ButtonPropsShared } from './types/Button'; From a3300fcbe5fd8c24d3fc8f244734520da9c895ba Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 14 Apr 2026 14:38:49 -0700 Subject: [PATCH 3/8] chore: fix import ordering after lint:fix --- .../src/components/Button/Button.stories.tsx | 2 +- .../src/components/Button/Button.test.tsx | 3 +-- .../src/components/Button/index.ts | 5 +---- .../Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx | 2 +- .../Button/variants/ButtonPrimary/ButtonPrimary.test.tsx | 3 +-- .../variants/ButtonSecondary/ButtonSecondary.stories.tsx | 2 +- .../variants/ButtonSecondary/ButtonSecondary.test.tsx | 3 +-- .../variants/ButtonTertiary/ButtonTertiary.stories.tsx | 2 +- .../Button/variants/ButtonTertiary/ButtonTertiary.test.tsx | 3 +-- .../src/components/ButtonBase/ButtonBase.stories.tsx | 3 +-- .../src/components/ButtonBase/ButtonBase.test.tsx | 3 +-- .../src/components/ButtonHero/ButtonHero.stories.tsx | 2 +- .../src/components/Checkbox/Checkbox.stories.tsx | 2 +- packages/design-system-react-native/src/types/index.ts | 1 - .../src/components/Button/Button.stories.tsx | 2 +- .../src/components/Button/Button.test.tsx | 2 +- packages/design-system-react/src/components/Button/index.ts | 5 +---- .../Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx | 2 +- .../Button/variants/ButtonPrimary/ButtonPrimary.test.tsx | 2 +- .../variants/ButtonSecondary/ButtonSecondary.stories.tsx | 2 +- .../variants/ButtonSecondary/ButtonSecondary.test.tsx | 2 +- .../variants/ButtonTertiary/ButtonTertiary.stories.tsx | 2 +- .../Button/variants/ButtonTertiary/ButtonTertiary.test.tsx | 2 +- .../src/components/ButtonBase/ButtonBase.stories.tsx | 6 +++++- .../src/components/ButtonBase/ButtonBase.test.tsx | 2 +- .../src/components/ButtonHero/ButtonHero.stories.tsx | 2 +- packages/design-system-react/src/types/index.ts | 1 - 27 files changed, 29 insertions(+), 39 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 a5e70f693..0b899ab9d 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,9 +1,9 @@ +import { ButtonSize, ButtonVariant } from '@metamask/design-system-shared'; import { useTailwind } from '@metamask/design-system-twrnc-preset'; import type { Meta, StoryObj } from '@storybook/react-native'; import React from 'react'; import { View } from 'react-native'; -import { ButtonSize, ButtonVariant } from '@metamask/design-system-shared'; import { IconName } from '../Icon'; import { Button } from './Button'; 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 284e4de65..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 { - 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 550518632..46a17c1e4 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,8 +1,8 @@ +import { ButtonPrimarySize } from '@metamask/design-system-shared'; import { useTailwind } from '@metamask/design-system-twrnc-preset'; import type { Meta, StoryObj } from '@storybook/react-native'; import { View } from 'react-native'; -import { ButtonPrimarySize } from '@metamask/design-system-shared'; import { IconName } from '../../../Icon'; import { ButtonPrimary } from './ButtonPrimary'; 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.stories.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx index e892c467d..28efc0714 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,8 +1,8 @@ +import { ButtonSecondarySize } from '@metamask/design-system-shared'; import { useTailwind } from '@metamask/design-system-twrnc-preset'; import type { Meta, StoryObj } from '@storybook/react-native'; import { View } from 'react-native'; -import { ButtonSecondarySize } from '@metamask/design-system-shared'; import { IconName } from '../../../Icon'; import { ButtonSecondary } from './ButtonSecondary'; 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.stories.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx index e26d46f69..4f364977b 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,8 +1,8 @@ +import { ButtonTertiarySize } from '@metamask/design-system-shared'; import { useTailwind } from '@metamask/design-system-twrnc-preset'; import type { Meta, StoryObj } from '@storybook/react-native'; import { View } from 'react-native'; -import { ButtonTertiarySize } from '@metamask/design-system-shared'; import { IconName } from '../../../Icon'; import { ButtonTertiary } from './ButtonTertiary'; 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.stories.tsx b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.stories.tsx index 580a634aa..edab55d39 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,6 +1,5 @@ -import type { Meta, StoryObj } from '@storybook/react-native'; - import { ButtonBaseSize } from '@metamask/design-system-shared'; +import type { Meta, StoryObj } from '@storybook/react-native'; import { BoxFlexDirection } from '../../types'; import { Box } from '../Box'; 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 876aeb223..d54d43637 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 } 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,8 +6,6 @@ import React from 'react'; import { View, Text } from 'react-native'; import * as ReactTestRenderer from 'react-test-renderer'; -import { ButtonBaseSize } from '@metamask/design-system-shared'; - import { IconName } from '../../types'; import { ButtonBase } from './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 8ccfabbf8..fe3d61cc6 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,8 +1,8 @@ +import { ButtonHeroSize } from '@metamask/design-system-shared'; import type { Meta, StoryObj } from '@storybook/react-native'; import React from 'react'; import { View } from 'react-native'; -import { ButtonHeroSize } from '@metamask/design-system-shared'; import { IconName } from '../Icon'; import { ButtonHero } from './ButtonHero'; 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-native/src/types/index.ts b/packages/design-system-react-native/src/types/index.ts index 8dccbba02..1c9a4c0c9 100644 --- a/packages/design-system-react-native/src/types/index.ts +++ b/packages/design-system-react-native/src/types/index.ts @@ -211,7 +211,6 @@ export enum BoxBorderColor { Transparent = 'border-transparent', } - /** * ButtonIcon - size */ 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 6aa3197b4..a2b7d4a0e 100644 --- a/packages/design-system-react/src/components/Button/Button.stories.tsx +++ b/packages/design-system-react/src/components/Button/Button.stories.tsx @@ -1,7 +1,7 @@ +import { ButtonSize, ButtonVariant } from '@metamask/design-system-shared'; import type { Meta, StoryObj } from '@storybook/react-vite'; import React from 'react'; -import { ButtonSize, ButtonVariant } from '@metamask/design-system-shared'; import { IconName } from '../Icon'; import { Button } from './Button'; 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 69b0f909b..91ae6b37b 100644 --- a/packages/design-system-react/src/components/Button/Button.test.tsx +++ b/packages/design-system-react/src/components/Button/Button.test.tsx @@ -1,7 +1,7 @@ +import { ButtonVariant } from '@metamask/design-system-shared'; import { render, screen } from '@testing-library/react'; import React, { createRef } from 'react'; -import { ButtonVariant } from '@metamask/design-system-shared'; import { IconName } from '../Icon'; import { Button } from './Button'; diff --git a/packages/design-system-react/src/components/Button/index.ts b/packages/design-system-react/src/components/Button/index.ts index 9751a7359..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, - 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 b3bd57456..246f30aac 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,7 @@ +import { ButtonPrimarySize } from '@metamask/design-system-shared'; import type { Meta, StoryObj } from '@storybook/react-vite'; import React from 'react'; -import { ButtonPrimarySize } from '@metamask/design-system-shared'; import { IconName } from '../../../Icon'; import { ButtonPrimary } from './ButtonPrimary'; 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 9b8888000..066d6f551 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,7 @@ +import { ButtonPrimarySize } from '@metamask/design-system-shared'; import { render, screen } from '@testing-library/react'; import React from 'react'; -import { ButtonPrimarySize } from '@metamask/design-system-shared'; import { IconName } from '../../../Icon'; import { ButtonPrimary } from './ButtonPrimary'; 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 50fd1831b..1ca39d5cd 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,7 @@ +import { ButtonSecondarySize } from '@metamask/design-system-shared'; import type { Meta, StoryObj } from '@storybook/react-vite'; import React from 'react'; -import { ButtonSecondarySize } from '@metamask/design-system-shared'; import { IconName } from '../../../Icon'; import { ButtonSecondary } from './ButtonSecondary'; 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 f04fe60bc..a4921fe7e 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,7 @@ +import { ButtonSecondarySize } from '@metamask/design-system-shared'; import { render, screen } from '@testing-library/react'; import React from 'react'; -import { ButtonSecondarySize } from '@metamask/design-system-shared'; import { IconName } from '../../../Icon'; import { ButtonSecondary } from './ButtonSecondary'; 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 505a74632..383196b34 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,7 @@ +import { ButtonTertiarySize } from '@metamask/design-system-shared'; import type { Meta, StoryObj } from '@storybook/react-vite'; import React from 'react'; -import { ButtonTertiarySize } from '@metamask/design-system-shared'; import { IconName } from '../../../Icon'; import { ButtonTertiary } from './ButtonTertiary'; 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 dcfb14080..a1cdc54ba 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,7 @@ +import { ButtonTertiarySize } from '@metamask/design-system-shared'; import { render, screen } from '@testing-library/react'; import React, { createRef } from 'react'; -import { ButtonTertiarySize } from '@metamask/design-system-shared'; import { IconName } from '../../../Icon'; import { ButtonTertiary } from './ButtonTertiary'; 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 ddf8798ba..f6e708173 100644 --- a/packages/design-system-react/src/components/ButtonBase/ButtonBase.stories.tsx +++ b/packages/design-system-react/src/components/ButtonBase/ButtonBase.stories.tsx @@ -1,4 +1,8 @@ -import { ButtonBaseSize, TextColor, TextVariant } from '@metamask/design-system-shared'; +import { + ButtonBaseSize, + TextColor, + TextVariant, +} 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/ButtonBase/ButtonBase.test.tsx b/packages/design-system-react/src/components/ButtonBase/ButtonBase.test.tsx index 682ce928e..f2cb5131b 100644 --- a/packages/design-system-react/src/components/ButtonBase/ButtonBase.test.tsx +++ b/packages/design-system-react/src/components/ButtonBase/ButtonBase.test.tsx @@ -1,7 +1,7 @@ +import { ButtonBaseSize } from '@metamask/design-system-shared'; import { render, screen } from '@testing-library/react'; import React from 'react'; -import { ButtonBaseSize } from '@metamask/design-system-shared'; import { IconName } from '../Icon'; import { ButtonBase } from './ButtonBase'; 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 6eadd8b99..e3ded98ac 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,7 @@ +import { ButtonHeroSize } from '@metamask/design-system-shared'; import type { Meta, StoryObj } from '@storybook/react-vite'; import React from 'react'; -import { ButtonHeroSize } from '@metamask/design-system-shared'; import { IconName } from '../Icon'; import { ButtonHero } from './ButtonHero'; diff --git a/packages/design-system-react/src/types/index.ts b/packages/design-system-react/src/types/index.ts index 4ef246778..5544ee926 100644 --- a/packages/design-system-react/src/types/index.ts +++ b/packages/design-system-react/src/types/index.ts @@ -211,7 +211,6 @@ export enum BoxBorderColor { Transparent = 'border-transparent', } - /** * ButtonIcon - size */ From 8ae131b2c59c6d2cc489a8aa8d884647dbdf0755 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 14 Apr 2026 14:50:48 -0700 Subject: [PATCH 4/8] fix(DSYS-484): update BannerBase to import ButtonSize from design-system-shared --- .../src/components/BannerBase/BannerBase.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/design-system-react/src/components/BannerBase/BannerBase.tsx b/packages/design-system-react/src/components/BannerBase/BannerBase.tsx index b8bd113a8..778b22ab1 100644 --- a/packages/design-system-react/src/components/BannerBase/BannerBase.tsx +++ b/packages/design-system-react/src/components/BannerBase/BannerBase.tsx @@ -1,11 +1,10 @@ -import { FontWeight, TextVariant } from '@metamask/design-system-shared'; +import { ButtonSize, FontWeight, TextVariant } from '@metamask/design-system-shared'; import React, { forwardRef } from 'react'; import { BoxAlignItems, BoxBackgroundColor, ButtonIconSize, - ButtonSize, BoxFlexDirection, IconName, } from '../../types'; From 97c236529857eb76bd28c64a1c690337017d8df7 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 14 Apr 2026 14:51:05 -0700 Subject: [PATCH 5/8] chore: fix prettier formatting in BannerBase --- .../src/components/BannerBase/BannerBase.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/design-system-react/src/components/BannerBase/BannerBase.tsx b/packages/design-system-react/src/components/BannerBase/BannerBase.tsx index 778b22ab1..d0e78208d 100644 --- a/packages/design-system-react/src/components/BannerBase/BannerBase.tsx +++ b/packages/design-system-react/src/components/BannerBase/BannerBase.tsx @@ -1,4 +1,8 @@ -import { ButtonSize, FontWeight, TextVariant } from '@metamask/design-system-shared'; +import { + ButtonSize, + FontWeight, + TextVariant, +} from '@metamask/design-system-shared'; import React, { forwardRef } from 'react'; import { From 739a1673386dd0ae7e82a988eb89be4d0a6db9bd Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 14 Apr 2026 15:55:16 -0700 Subject: [PATCH 6/8] fix(DSYS-484): update RN BannerBase to import ButtonSize from design-system-shared --- .../src/components/BannerBase/BannerBase.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 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 63eba2c9c..4a575e783 100644 --- a/packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx +++ b/packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx @@ -1,4 +1,8 @@ -import { FontWeight, TextVariant } from '@metamask/design-system-shared'; +import { + ButtonSize, + FontWeight, + TextVariant, +} from '@metamask/design-system-shared'; import React from 'react'; import { GestureResponderEvent } from 'react-native'; @@ -6,7 +10,6 @@ import { BoxAlignItems, BoxBackgroundColor, ButtonIconSize, - ButtonSize, BoxFlexDirection, IconName, } from '../../types'; From 650a92371b94fd1b1b0a96589535a0b9dc802b85 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 14 Apr 2026 16:05:37 -0700 Subject: [PATCH 7/8] fix(DSYS-484): add ReactNode import to ButtonBasePropsShared --- .../src/types/ButtonBase/ButtonBase.types.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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..e6790a99c 100644 --- a/packages/design-system-shared/src/types/ButtonBase/ButtonBase.types.ts +++ b/packages/design-system-shared/src/types/ButtonBase/ButtonBase.types.ts @@ -1,3 +1,5 @@ +import type { ReactNode } from 'react'; + /** * ButtonBase - size * Convert from enum to const object (ADR-0003) @@ -27,7 +29,7 @@ export type ButtonBasePropsShared = { /** * Required prop for the content to be rendered within the ButtonBase */ - children: React.ReactNode; + children: ReactNode; /** * Optional prop to control the size of the ButtonBase * From 53ed92a8a547ec07ff4798f42f8ca452d9334b96 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 14 Apr 2026 16:06:55 -0700 Subject: [PATCH 8/8] refactor(DSYS-484): use typeof ButtonVariant.X instead of Extract in Button.types.ts --- .../src/components/Button/Button.types.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 8f15a7b42..eaf0445c5 100644 --- a/packages/design-system-react/src/components/Button/Button.types.ts +++ b/packages/design-system-react/src/components/Button/Button.types.ts @@ -1,4 +1,4 @@ -import type { ButtonVariant } from '@metamask/design-system-shared'; +import { ButtonVariant } from '@metamask/design-system-shared'; import type { ButtonPrimaryProps } from './variants/ButtonPrimary'; import type { ButtonSecondaryProps } from './variants/ButtonSecondary'; @@ -13,12 +13,12 @@ export type ButtonProps = { variant?: ButtonVariant; } & ( | (Omit & { - variant?: Extract; + variant?: typeof ButtonVariant.Primary; }) | (Omit & { - variant?: Extract; + variant?: typeof ButtonVariant.Secondary; }) | (Omit & { - variant?: Extract; + variant?: typeof ButtonVariant.Tertiary; }) );