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'; 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..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 '../../types'; 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..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 '../../types'; - import { Button } from './Button'; describe('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..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..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,3 +1,3 @@ -export { ButtonSize, ButtonVariant } from '../../types'; +export { ButtonSize, ButtonVariant } from '@metamask/design-system-shared'; export { Button } from './Button'; export type { ButtonProps } from './Button.types'; 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..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 '../../../../types'; 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..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 '../../../../types'; - import { ButtonPrimary } from './ButtonPrimary'; describe('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..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 { ButtonPrimarySize } from '../../../../types'; +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..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 '../../../../types'; 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..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 '../../../../types'; - import { ButtonSecondary } from './ButtonSecondary'; describe('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..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 { ButtonSecondarySize } from '../../../../types'; +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..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 '../../../../types'; 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..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 '../../../../types'; - import { ButtonTertiary } from './ButtonTertiary'; describe('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..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 { ButtonTertiarySize } from '../../../../types'; +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.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 a867b767c..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,7 @@ +import { ButtonBaseSize } from '@metamask/design-system-shared'; import type { Meta, StoryObj } from '@storybook/react-native'; -import { BoxFlexDirection, ButtonBaseSize } from '../../types'; +import { BoxFlexDirection } from '../../types'; import { Box } from '../Box'; import { IconName } from '../Icon'; 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..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,7 +6,7 @@ import React from 'react'; import { View, Text } from 'react-native'; import * as ReactTestRenderer from 'react-test-renderer'; -import { ButtonBaseSize, IconName } from '../../types'; +import { IconName } from '../../types'; import { ButtonBase } from './ButtonBase'; 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/components/ButtonHero/ButtonHero.stories.tsx b/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.stories.tsx index a83069b42..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 '../../types'; 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..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 '../../types'; 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 772eb81aa..1c9a4c0c9 100644 --- a/packages/design-system-react-native/src/types/index.ts +++ b/packages/design-system-react-native/src/types/index.ts @@ -211,38 +211,6 @@ export enum BoxBorderColor { Transparent = 'border-transparent', } -/** - * ButtonBase - size - */ -export enum ButtonBaseSize { - /** - * Represents a small button size (32px). - */ - Sm = 'sm', - /** - * Represents a medium button size (40px). - */ - Md = 'md', - /** - * Represents a large button size (48px). - */ - Lg = 'lg', -} -export { ButtonBaseSize as ButtonSize }; -export { ButtonBaseSize as ButtonPrimarySize }; -export { ButtonBaseSize as ButtonSecondarySize }; -export { ButtonBaseSize as ButtonTertiarySize }; -export { ButtonBaseSize as ButtonHeroSize }; - -/** - * Button - variant - */ -export enum ButtonVariant { - Primary = 'primary', - Secondary = 'secondary', - Tertiary = 'tertiary', -} - /** * ButtonIcon - size */ diff --git a/packages/design-system-react/src/components/BannerBase/BannerBase.tsx b/packages/design-system-react/src/components/BannerBase/BannerBase.tsx index b8bd113a8..d0e78208d 100644 --- a/packages/design-system-react/src/components/BannerBase/BannerBase.tsx +++ b/packages/design-system-react/src/components/BannerBase/BannerBase.tsx @@ -1,11 +1,14 @@ -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'; 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..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 { ButtonVariant, ButtonSize } from '../../types'; 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..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 '../../types'; import { IconName } from '../Icon'; 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..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 '../../types'; +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?: 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..a35bfd094 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, 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..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 '../../../../types'; 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..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 '../../../../types'; 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 348e9a3d7..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 { ButtonPrimarySize } from '../../../../types'; +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..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 '../../../../types'; 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..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 '../../../../types'; 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 391fa2b30..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 { ButtonSecondarySize } from '../../../../types'; +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..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 '../../../../types'; 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..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 '../../../../types'; 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 db6f99b9f..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 { ButtonTertiarySize } from '../../../../types'; +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.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..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,8 +1,11 @@ -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..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 '../../types'; import { IconName } from '../Icon'; 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..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/ButtonHero.stories.tsx b/packages/design-system-react/src/components/ButtonHero/ButtonHero.stories.tsx index f9584ffd9..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 '../../types'; 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 8d9eedd17..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 { ButtonHeroSize } from '../../types'; +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 224741501..5544ee926 100644 --- a/packages/design-system-react/src/types/index.ts +++ b/packages/design-system-react/src/types/index.ts @@ -211,47 +211,6 @@ export enum BoxBorderColor { Transparent = 'border-transparent', } -/** - * ButtonBase - size - */ -export enum ButtonBaseSize { - /** - * Represents a small button size (32px). - */ - Sm = 'sm', - /** - * Represents a medium button size (40px). - */ - Md = 'md', - /** - * Represents a large button size (48px). - */ - Lg = 'lg', -} -export { ButtonBaseSize as 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', -} - /** * ButtonIcon - size */ diff --git a/packages/design-system-shared/src/index.ts b/packages/design-system-shared/src/index.ts index bff678ef4..679733d58 100644 --- a/packages/design-system-shared/src/index.ts +++ b/packages/design-system-shared/src/index.ts @@ -113,3 +113,14 @@ export { // Checkbox types (ADR-0004) 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'; 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..e6790a99c --- /dev/null +++ b/packages/design-system-shared/src/types/ButtonBase/ButtonBase.types.ts @@ -0,0 +1,61 @@ +import type { ReactNode } from 'react'; + +/** + * 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: 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';