From 3cd55ea7875dd268c2e1bf68de4d39e945ebacb9 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Fri, 18 Jul 2025 21:15:18 +0000 Subject: [PATCH 1/9] Update component READMEs with consistent structure and improved documentation Co-authored-by: george.marshall --- .../src/components/AvatarAccount/README.md | 226 +++--- .../src/components/AvatarBase/README.md | 200 +++--- .../src/components/AvatarFavicon/README.md | 205 +++--- .../src/components/AvatarGroup/README.md | 303 +++----- .../src/components/AvatarIcon/README.md | 179 +++-- .../src/components/AvatarNetwork/README.md | 206 +++--- .../src/components/AvatarToken/README.md | 205 +++--- .../src/components/BadgeCount/README.md | 174 ++--- .../src/components/BadgeIcon/README.md | 148 ++-- .../src/components/BadgeNetwork/README.md | 207 +++--- .../src/components/BadgeStatus/README.md | 202 ++---- .../src/components/BadgeWrapper/README.md | 243 +++---- .../src/components/Box/README.md | 661 ++---------------- .../src/components/Button/README.md | 283 +++++--- .../src/components/ButtonBase/README.md | 427 +++-------- .../src/components/ButtonIcon/README.md | 245 ++++--- .../src/components/Checkbox/README.md | 282 +++----- .../src/components/Icon/README.md | 196 +++--- .../src/components/Text/README.md | 233 +++--- .../src/components/TextButton/README.md | 320 ++++----- .../temp-components/Blockies/README.md | 148 ++-- .../temp-components/ButtonAnimated/README.md | 155 +++- .../temp-components/ImageOrSvg/README.md | 233 +++--- .../temp-components/Jazzicon/README.md | 164 ++--- .../temp-components/Maskicon/README.md | 180 ++--- .../temp-components/Spinner/README.md | 148 ++-- .../temp-components/TextOrChildren/README.md | 113 +-- 27 files changed, 2555 insertions(+), 3731 deletions(-) diff --git a/packages/design-system-react-native/src/components/AvatarAccount/README.md b/packages/design-system-react-native/src/components/AvatarAccount/README.md index 95cf2e707..f05d48ceb 100644 --- a/packages/design-system-react-native/src/components/AvatarAccount/README.md +++ b/packages/design-system-react-native/src/components/AvatarAccount/README.md @@ -1,160 +1,174 @@ # AvatarAccount -The `AvatarAccount` component is reserved for representing accounts inside of an avatar. +AvatarAccount is used to render account avatars within an interface. -_Developer Note: It extends the functionality of [`AvatarBase`](../AvatarBase/) by incorporating an Account and severity levels, making it useful for visually representing statuses, alerts, or simply user avatars with Accounts._ +```tsx +import { AvatarAccount } from '@metamask/design-system-react-native'; ---- +; +``` ## Props -### `variant` - -Optional prop to control the variant of the avatar account. - -| TYPE | REQUIRED | DEFAULT | -| :--------------------- | :------- | :------------------------------ | -| `AvatarAccountVariant` | No | `AvatarAccountVariant.Jazzicon` | - -Available severities: - -- `Jazzicon` -- `Blockies` -- `Maskicon` - ---- - -### `address` (Required) +### `address` Required address used as a unique identifier to generate the AvatarAccount art. -| TYPE | REQUIRED | DEFAULT | -| :------- | :------- | :------ | -| `string` | Yes | `N/A` | - ---- - -### `blockiesProps` - -Optional props to be passed to the `Blockies` component when the variant is `Blockies`. - -| TYPE | REQUIRED | DEFAULT | -| ------------------------ | -------- | ----------- | -| `Partial` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | Yes | `undefined` | -Used to customize the `Blockies` identicon, such as block size or color settings. - ---- - -### `jazziconProps` +```tsx + +``` -Optional props to be passed to the `Jazzicon` component when the variant is `Jazzicon`. +### `variant` -| TYPE | REQUIRED | DEFAULT | -| ------------------------ | -------- | ----------- | -| `Partial` | No | `undefined` | +Optional prop to control the variant of the avatar account. -Used to customize the `Jazzicon` identicon, such as diameter or address seed. +Available variants: ---- +- `AvatarAccountVariant.Jazzicon` (default) +- `AvatarAccountVariant.Blockies` +- `AvatarAccountVariant.Maskicon` -### `maskiconProps` +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `AvatarAccountVariant` | No | `AvatarAccountVariant.Jazzicon` | -Optional props to be passed to the `Maskicon` component itself. +```tsx + +``` -| TYPE | REQUIRED | DEFAULT | -| ------------------------ | -------- | ----------- | -| `Partial` | No | `undefined` | +### `size` -Useful for forwarding additional `SvgProps`, accessibility attributes, or animation styles. +The size of the AvatarAccount. ---- +Available sizes: -### Other Props +- `AvatarSize.Xs` (16px) +- `AvatarSize.Sm` (24px) +- `AvatarSize.Md` (32px) +- `AvatarSize.Lg` (40px) +- `AvatarSize.Xl` (48px) -`AvatarAccount` supports all props from [`AvatarBase`](#) except `children`, `fallbackText`, and `fallbackTextProps`. This includes: +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `AvatarSize` | No | `AvatarSize.Md` | -- `size` – Controls the avatar size. See [AvatarBase documentation](#) for details. -- `shape` – Controls the avatar shape. See [AvatarBase documentation](#) for details. -- `twClassName` – Additional Tailwind class names. -- `style` – Override or extend style properties. +```tsx + +``` ---- +### `blockiesProps` -## Accessibility +Optional props to be passed to the Blockies component when the variant is Blockies. -Since `AvatarAccount` typically represents an account-based avatar. it is important to ensure the component is usable by screen readers and assistive technologies. The following `react-native` accessibility props can be passed: +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `Partial` | No | `undefined` | -- **`accessibilityLabel`**: Use to describe the AvatarAccount. -- **`accessibilityRole`**: - - If interactive (e.g., navigates to account details), set to `button` or another appropriate role. -- **`accessibilityHint`**: Provide context if `AvatarAccount` triggers a navigation or action. -- **`accessible`**: Set to `true` when the avatar is meaningful, so screen readers properly identify it. If the Account is strictly decorative or not essential, it can be set to `false`. +```tsx + +``` ---- +### `jazziconProps` -## Usage +Optional props to be passed to the Jazzicon component when the variant is Jazzicon. -### Basic Usage +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `Partial` | No | `undefined` | ```tsx -import React from 'react'; -import AvatarAccount, { - AvatarAccountSeverity, -} from '@metamask/design-system-react-native'; - -; + ``` ---- +### `maskiconProps` + +Optional props to be passed to the Maskicon component when the variant is Maskicon. -### Setting Variant +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `Partial` | No | `undefined` | ```tsx - - - ``` ---- +### `twClassName` -### Changing Size +Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to: -```tsx -import { AvatarSize } from '@metamask/design-system-react-native'; +- Add new styles that don't exist in the default component +- Override the component's default styles when needed -; -``` +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | -See the [AvatarBase README](#) for more details on `size` and `shape`. +```tsx +import { AvatarAccount } from '@metamask/design-system-react-native'; ---- +// Add additional styles + + Custom Border + -## Notes +// Override default styles + + Override Background + +``` -- `AvatarAccount` relies on [`AvatarBase`](#) for its foundational behavior. -- The `variant` prop changes the AvatarAccount art style. +### `style` ---- +Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -## Contributing +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `StyleProp` | No | `undefined` | -1. Add tests for new features. -2. Update this README for any changes to the API. -3. Follow the design system's coding guidelines. +```tsx +const styles = StyleSheet.create({ + custom: { + marginVertical: 8, + marginHorizontal: 16, + }, +}); + +export const StyleExample = () => ( + +); +``` ---- +## References -For questions, refer to the [React Native documentation](https://reactnative.dev/docs), the [AvatarBase documentation](#), or contact the maintainers of the design system. +[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940) diff --git a/packages/design-system-react-native/src/components/AvatarBase/README.md b/packages/design-system-react-native/src/components/AvatarBase/README.md index 98bcce846..8718a6206 100644 --- a/packages/design-system-react-native/src/components/AvatarBase/README.md +++ b/packages/design-system-react-native/src/components/AvatarBase/README.md @@ -1,163 +1,125 @@ # AvatarBase -The `AvatarBase` is the base component for avatars. +AvatarBase is used to render base avatar elements within an interface. ---- - -## Props - -### `children` - -Optional prop for the content to be rendered within the `AvatarBase`. +```tsx +import { AvatarBase } from '@metamask/design-system-react-native'; -| TYPE | REQUIRED | DEFAULT | -| :---------- | :------- | :------ | -| `ReactNode` | No | `null` | +AB; +``` ---- +## Props ### `size` -Optional prop to control the size of the `AvatarBase`. - -| TYPE | REQUIRED | DEFAULT | -| :--------------- | :------- | :------------------ | -| `AvatarBaseSize` | No | `AvatarBaseSize.Md` | +The size of the AvatarBase. Available sizes: -- `AvatarBaseSize.Xs` (16px) -- `AvatarBaseSize.Sm` (24px) -- `AvatarBaseSize.Md` (32px) -- `AvatarBaseSize.Lg` (40px) -- `AvatarBaseSize.Xl` (48px) - ---- - -### `shape` - -Optional prop to control the shape of the `AvatarBase`. - -| TYPE | REQUIRED | DEFAULT | -| :---------------- | :------- | :----------------------- | -| `AvatarBaseShape` | No | `AvatarBaseShape.Circle` | - -Available shapes: - -- `AvatarBaseShape.Circle` -- `AvatarBaseShape.Square` - ---- - -### `fallbackText` - -Optional text to be displayed when the avatar content fails to render. - -| TYPE | REQUIRED | DEFAULT | -| :------- | :------- | :------ | -| `string` | No | `null` | - ---- - -### `fallbackTextProps` - -Optional props to customize the fallback text. - -| TYPE | REQUIRED | DEFAULT | -| :---------------------------- | :------- | :------ | -| `Omit` | No | `{}` | - ---- +- `AvatarSize.Xs` (16px) +- `AvatarSize.Sm` (24px) +- `AvatarSize.Md` (32px) +- `AvatarSize.Lg` (40px) +- `AvatarSize.Xl` (48px) -### `twClassName` - -Optional prop to add `twrnc` overriding class names. - -| TYPE | REQUIRED | DEFAULT | -| :------- | :------- | :------ | -| `string` | No | `''` | - ---- - -### `style` +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `AvatarSize` | No | `AvatarSize.Md` | -Optional prop to control the style. - -| TYPE | REQUIRED | DEFAULT | -| :--------------------- | :------- | :------ | -| `StyleProp` | No | `null` | +```tsx +Small Avatar +Medium Avatar (default) +Large Avatar +``` ---- +### `children` -## Usage +The content of the AvatarBase component. -### Basic Usage +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `ReactNode` | No | `undefined` | ```tsx -import React from 'react'; -import AvatarBase from '@metamask/design-system-react-native'; +import { AvatarBase } from '@metamask/design-system-react-native'; -👤; +Custom avatar content; ``` ---- - -### Avatar with Fallback Text - -```tsx - -``` +### `backgroundColor` ---- +Background color of the avatar. -### Customizing the Fallback Text +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `BackgroundColor` | No | `BackgroundColor.BackgroundAlternative` | ```tsx - + + Avatar with custom background + ``` ---- +### `borderColor` + +Border color of the avatar. -### Changing Avatar Size +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `BorderColor` | No | `BorderColor.BorderDefault` | ```tsx -👤 + + Avatar with custom border + ``` ---- - -### Changing Avatar Shape +### `twClassName` -```tsx -👤 -``` +Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to: ---- +- Add new styles that don't exist in the default component +- Override the component's default styles when needed -### Accessibility +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | -- Ensure `fallbackText` provides meaningful information when the avatar content is unavailable. -- Use `fallbackTextProps` to style text for better visibility and contrast. +```tsx +import { AvatarBase } from '@metamask/design-system-react-native'; ---- +// Add additional styles + + Custom Border + -### Notes +// Override default styles + + Override Background + +``` -- `AvatarBase` is optimized for handling different avatar states. -- The fallback text ensures a meaningful representation when no image or content is available. -- Custom styling can be applied using `twClassName` and `style` props. +### `style` ---- +Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -## Contributing +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `StyleProp` | No | `undefined` | -1. Add tests for new features. -2. Update this README for any changes to the API. -3. Follow the design system's coding guidelines. +```tsx +const styles = StyleSheet.create({ + custom: { + marginVertical: 8, + marginHorizontal: 16, + }, +}); + +export const StyleExample = () => ( + Custom styled avatar +); +``` ---- +## References -For questions, refer to the [React Native documentation](https://reactnative.dev/docs) or contact the maintainers of the design system. +[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940) diff --git a/packages/design-system-react-native/src/components/AvatarFavicon/README.md b/packages/design-system-react-native/src/components/AvatarFavicon/README.md index 9d0c7bbda..6a78b16d1 100644 --- a/packages/design-system-react-native/src/components/AvatarFavicon/README.md +++ b/packages/design-system-react-native/src/components/AvatarFavicon/README.md @@ -1,161 +1,120 @@ # AvatarFavicon -`AvatarFavicon` is a type of avatar reserved for representing dapps, sites, and other general entities. +AvatarFavicon is used to render favicon avatars within an interface. ---- - -## Props - -### `src` - -Optional prop specifying the source of the favicon image or SVG. - -| TYPE | REQUIRED | DEFAULT | DESCRIPTION | -| --------------- | -------- | ------- | ----------------------------------------- | -| `ImageOrSvgSrc` | No | `null` | URI, local asset, or inline SVG component | - ---- - -### `name` - -Optional string used to derive the fallback text (first character). +```tsx +import { AvatarFavicon } from '@metamask/design-system-react-native'; -| TYPE | REQUIRED | DEFAULT | DESCRIPTION | -| -------- | -------- | ------- | -------------------------------------- | -| `string` | No | `null` | Used to create fallback if image fails | +; +``` ---- +## Props -### `imageOrSvgProps` +### `imageSource` -Optional props forwarded to the `ImageOrSvg` component. +The image source for the favicon. -| TYPE | REQUIRED | DEFAULT | DESCRIPTION | -| ----------------- | -------- | ------- | -------------------------------------------------- | -| `ImageOrSvgProps` | No | `null` | Customize image handling, test IDs, alt text, etc. | +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `ImageSourcePropType` | Yes | `undefined` | ---- +```tsx + +``` ### `size` -Controls the size of the avatar. Inherits from `AvatarBaseSize`. - -| TYPE | REQUIRED | DEFAULT | -| ------------------- | -------- | ---------------------- | -| `AvatarFaviconSize` | No | `AvatarFaviconSize.Md` | +The size of the AvatarFavicon. Available sizes: -- `Xs` – 16px -- `Sm` – 24px -- `Md` – 32px -- `Lg` – 40px -- `Xl` – 48px - ---- - -### `fallbackText` - -Optional custom fallback text shown when image fails to load. - -| TYPE | REQUIRED | DEFAULT | DESCRIPTION | -| -------- | -------- | ----------------------------------------- | --------------------- | -| `string` | No | First character of `name` or empty string | Used when image fails | - ---- - -### `fallbackTextProps` - -Optional props to customize the fallback text appearance. - -| TYPE | REQUIRED | DEFAULT | -| -------------------- | -------- | ------- | -| `Partial` | No | `{}` | +- `AvatarSize.Xs` (16px) +- `AvatarSize.Sm` (24px) +- `AvatarSize.Md` (32px) +- `AvatarSize.Lg` (40px) +- `AvatarSize.Xl` (48px) ---- - -### `twClassName` - -Optional Tailwind-style utility classes. - -| TYPE | REQUIRED | DEFAULT | -| -------- | -------- | ------- | -| `string` | No | `''` | - ---- - -### Additional Props - -All other props supported by `AvatarBase`, excluding `children`, are also accepted (e.g., `style`, `testID`). - ---- - -## Usage - -### Basic +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `AvatarSize` | No | `AvatarSize.Md` | ```tsx - ``` -### Custom Size and Fallback +### `fallbackText` -```tsx - -``` +Text to display when the image fails to load. -### Forwarding props to ImageOrSvg +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | ```tsx - ``` ---- - -## Behavior - -- Falls back to the first character of `name` if image fails to load. -- Defaults to `Md` (32px) size. -- Always uses a circular shape. - ---- +### `twClassName` -## Accessibility +Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to: -- Use `imageOrSvgProps.imageProps.accessibilityLabel` to describe the favicon for screen readers. -- The fallback text is rendered using the `Text` component and can be customized via `fallbackTextProps`. +- Add new styles that don't exist in the default component +- Override the component's default styles when needed ---- +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | -## Notes +```tsx +import { AvatarFavicon } from '@metamask/design-system-react-native'; + +// Add additional styles + + Custom Border + + +// Override default styles + + Override Background + +``` -- This component uses `AvatarBase` and `ImageOrSvg` under the hood. -- SVGs and raster images are both supported. -- For custom shapes or behaviors, extend `AvatarBase` directly. +### `style` ---- +Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -## Contributing +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `StyleProp` | No | `undefined` | -1. Add tests for new features. -2. Update this README for any changes to the API. -3. Follow the design system's coding guidelines. +```tsx +const styles = StyleSheet.create({ + custom: { + marginVertical: 8, + marginHorizontal: 16, + }, +}); + +export const StyleExample = () => ( + +); +``` ---- +## References -For questions, refer to the [React Native documentation](https://reactnative.dev/docs), the [AvatarFavicon documentation](#), or contact the maintainers of the design system. +[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940) diff --git a/packages/design-system-react-native/src/components/AvatarGroup/README.md b/packages/design-system-react-native/src/components/AvatarGroup/README.md index 10c9276dd..bd7c34758 100644 --- a/packages/design-system-react-native/src/components/AvatarGroup/README.md +++ b/packages/design-system-react-native/src/components/AvatarGroup/README.md @@ -1,262 +1,117 @@ # AvatarGroup -`AvatarGroup` is a stacked avatars to represent a group of avatars. +AvatarGroup is used to render a group of avatars within an interface. ---- - -## Props - -### `variant` (Required) - -Determines the type of avatars used within the group. - -| TYPE | REQUIRED | DEFAULT | -| :------------------- | :------- | :------ | -| `AvatarGroupVariant` | Yes | `N/A` | - -Available variants: - -- `Account` -- `Favicon` -- `Network` -- `Token` - ---- - -### `avatarPropsArr` (Required) - -An array of props for each avatar within the group. - -| TYPE | REQUIRED | DEFAULT | -| :------------------- | :------- | :------ | -| `Array` | Yes | `N/A` | - -Each avatar follows the prop structure of the corresponding variant component (`AvatarAccount`, `AvatarFavicon`, `AvatarNetwork`, `AvatarToken`). - ---- - -### `size` - -Optional prop to control the size of the avatars in the group. - -| TYPE | REQUIRED | DEFAULT | -| :----------- | :------- | :-------------- | -| `AvatarSize` | No | `AvatarSize.Md` | - -Available sizes: - -- `AvatarSize.Xs` -- `AvatarSize.Sm` -- `AvatarSize.Md` -- `AvatarSize.Lg` -- `AvatarSize.Xl` - ---- - -### `max` - -Determines the maximum number of avatars to display before showing an overflow indicator. - -| TYPE | REQUIRED | DEFAULT | -| :------- | :------- | :------ | -| `number` | No | `4` | - ---- - -### `isReverse` - -Optional prop to reverse the order of avatar stacking. - -| TYPE | REQUIRED | DEFAULT | -| :-------- | :------- | :------ | -| `boolean` | No | `false` | - ---- - -### `twClassName` - -Optional prop to add `twrnc` overriding class names. - -| TYPE | REQUIRED | DEFAULT | -| :------- | :------- | :------ | -| `string` | No | `''` | - ---- - -### `style` - -Optional prop to control the style of the avatar group container. +```tsx +import { AvatarGroup } from '@metamask/design-system-react-native'; -| TYPE | REQUIRED | DEFAULT | -| :--------------------- | :------- | :------ | -| `StyleProp` | No | `null` | + + + +; +``` ---- +## Props -## Usage +### `children` -Below are examples illustrating how to structure the `avatarPropsArr` based on each avatar variant. Note that the data shown is purely illustrative. +The avatar components to display in the group. -### Account Avatars +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `ReactNode` | Yes | `undefined` | ```tsx -import React from 'react'; -import AvatarGroup, { - AvatarGroupVariant, -} from '@metamask/design-system-react-native'; -import { AvatarAccountVariant } from '@metamask/design-system-react-native'; +import { AvatarGroup, AvatarAccount } from '@metamask/design-system-react-native'; -; + + + + + ``` ---- +### `maxAvatars` -### Favicon Avatars +Maximum number of avatars to display before showing overflow indicator. -```tsx -import React from 'react'; -import AvatarGroup, { - AvatarGroupVariant, -} from '@metamask/design-system-react-native'; +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `number` | No | `4` | -; +```tsx + + + + + + ``` ---- +### `spacing` -### Network Avatars +Spacing between avatars in the group. -```tsx -import React from 'react'; -import AvatarGroup, { - AvatarGroupVariant, -} from '@metamask/design-system-react-native'; +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `number` | No | `-8` | -; +```tsx + + + + ``` ---- +### `twClassName` -### Token Avatars +Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to: -```tsx -import React from 'react'; -import AvatarGroup, { - AvatarGroupVariant, -} from '@metamask/design-system-react-native'; +- Add new styles that don't exist in the default component +- Override the component's default styles when needed -; -``` +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | ---- +```tsx +import { AvatarGroup } from '@metamask/design-system-react-native'; -### Displaying More Avatars with Overflow +// Add additional styles + + Custom Background + -```tsx - +// Override default styles + + Override Layout + ``` -If more than `max` avatars are provided, an overflow counter (e.g., `+1`) will be displayed. +### `style` ---- +Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -### Changing Avatar Size +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `StyleProp` | No | `undefined` | ```tsx -import AvatarGroup, { - AvatarGroupVariant, - AvatarGroupSize, -} from '@metamask/design-system-react-native'; -; +const styles = StyleSheet.create({ + custom: { + marginVertical: 8, + marginHorizontal: 16, + }, +}); + +export const StyleExample = () => ( + + + + +); ``` ---- - -## Notes - -- `AvatarGroup` ensures consistent avatar alignment and spacing. -- Overflow avatars are indicated with a counter. -- It supports different avatar types based on the selected variant. - ---- - -## Contributing - -1. Add tests for new features. -2. Update this README for any changes to the API. -3. Follow the design system's coding guidelines. - ---- +## References -For questions, refer to the [React Native documentation](https://reactnative.dev/docs) or contact the maintainers of the design system. +[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940) diff --git a/packages/design-system-react-native/src/components/AvatarIcon/README.md b/packages/design-system-react-native/src/components/AvatarIcon/README.md index f3e8915de..89462f535 100644 --- a/packages/design-system-react-native/src/components/AvatarIcon/README.md +++ b/packages/design-system-react-native/src/components/AvatarIcon/README.md @@ -1,131 +1,128 @@ # AvatarIcon -The `AvatarIcon` component is reserved for representing static icons inside of an avatar. +AvatarIcon is used to render icon avatars within an interface. -_Developer Note: This components extends the functionality of [`AvatarBase`](../AvatarBase/) by incorporating an icon and severity levels, making it useful for visually representing statuses, alerts, or simply user avatars with icons._ +```tsx +import { AvatarIcon } from '@metamask/design-system-react-native'; ---- +; +``` ## Props -### `severity` - -Optional prop to control the severity of the avatar. - -| TYPE | REQUIRED | DEFAULT | -| :------------------- | :------- | :--------------------------- | -| `AvatarIconSeverity` | No | `AvatarIconSeverity.Neutral` | - -Available severities: - -- `Neutral` -- `Info` -- `Success` -- `Error` -- `Warning` - ---- +### `name` -### `iconName` (Required) +The icon name to display in the avatar. -The name of the icon to be displayed. +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `IconName` | Yes | `undefined` | -| TYPE | REQUIRED | DEFAULT | -| :--------- | :------- | :------ | -| `IconName` | Yes | `N/A` | - ---- - -### `iconProps` - -Optional props to pass additional properties to the icon. - -| TYPE | REQUIRED | DEFAULT | -| :------------------------ | :------- | :------ | -| `Omit` | No | `{}` | - ---- - -### Other Props +```tsx + +``` -`AvatarIcon` supports all props from [`AvatarBase`](#) except `children`, `fallbackText`, and `fallbackTextProps`. This includes: +### `size` -- `size` – Controls the avatar size. See [AvatarBase documentation](#) for details. -- `shape` – Controls the avatar shape. See [AvatarBase documentation](#) for details. -- `twClassName` – Additional Tailwind class names. -- `style` – Override or extend style properties. +The size of the AvatarIcon. ---- +Available sizes: -## Accessibility +- `AvatarSize.Xs` (16px) +- `AvatarSize.Sm` (24px) +- `AvatarSize.Md` (32px) +- `AvatarSize.Lg` (40px) +- `AvatarSize.Xl` (48px) -Since `AvatarIcon` typically represents an icon-based avatar, it is important to ensure the component is usable by screen readers and assistive technologies. The following `react-native` accessibility props can be passed: +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `AvatarSize` | No | `AvatarSize.Md` | -- **`accessibilityLabel`**: Use to describe the AvatarIcon. For example, "Sent" -- **`accessibilityRole`**: - - If interactive (e.g., navigates to account details), set to `button` or another appropriate role. -- **`accessibilityHint`**: Provide context if `AvatarIcon` triggers a navigation or action. -- **`accessible`**: Set to `true` when the avatar is meaningful, so screen readers properly identify it. If the icon is strictly decorative or not essential, it can be set to `false`. +```tsx + + + +``` ---- +### `iconColor` -## Usage +Color of the icon within the avatar. -### Basic Usage +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `IconColor` | No | `IconColor.IconDefault` | ```tsx -import React from 'react'; -import AvatarIcon, { - AvatarIconSeverity, -} from '@metamask/design-system-react-native'; - -; + ``` ---- +### `backgroundColor` -### Setting Severity +Background color of the avatar. + +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `BackgroundColor` | No | `BackgroundColor.BackgroundAlternative` | ```tsx - + ``` ---- - -### Customizing Icon Props +### `twClassName` -```tsx - -``` +Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to: ---- +- Add new styles that don't exist in the default component +- Override the component's default styles when needed -### Changing Size and Shape +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | ```tsx -import { AvatarSize, AvatarShape } from '@metamask/design-system-react-native'; - -; +import { AvatarIcon } from '@metamask/design-system-react-native'; + +// Add additional styles + + Custom Border + + +// Override default styles + + Override Background + ``` -See the [AvatarBase README](#) for more details on `size` and `shape`. - ---- - -## Notes +### `style` -- `AvatarIcon` relies on [`AvatarBase`](#) for its foundational behavior. -- The `severity` prop changes the icon color, making it easy to signal statuses. -- You can override icon appearance via `iconProps`. +Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. ---- +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `StyleProp` | No | `undefined` | -## Contributing - -1. Add tests for new features. -2. Update this README for any changes to the API. -3. Follow the design system's coding guidelines. +```tsx +const styles = StyleSheet.create({ + custom: { + marginVertical: 8, + marginHorizontal: 16, + }, +}); + +export const StyleExample = () => ( + +); +``` ---- +## References -For questions, refer to the [React Native documentation](https://reactnative.dev/docs), the [AvatarBase documentation](#), or contact the maintainers of the design system. +[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940) diff --git a/packages/design-system-react-native/src/components/AvatarNetwork/README.md b/packages/design-system-react-native/src/components/AvatarNetwork/README.md index 52d839647..5fef77e1c 100644 --- a/packages/design-system-react-native/src/components/AvatarNetwork/README.md +++ b/packages/design-system-react-native/src/components/AvatarNetwork/README.md @@ -1,161 +1,131 @@ # AvatarNetwork -`AvatarNetwork` is reserved for representing networks. +AvatarNetwork is used to render network avatars within an interface. ---- - -## Props - -### `src` - -Optional prop specifying the source of the network image or SVG. +```tsx +import { AvatarNetwork } from '@metamask/design-system-react-native'; -| TYPE | REQUIRED | DEFAULT | DESCRIPTION | -| --------------- | -------- | ------- | ----------------------------------------- | -| `ImageOrSvgSrc` | No | `null` | URI, local asset, or inline SVG component | +; +``` ---- +## Props ### `name` -Optional string used to derive the fallback text (first character). - -| TYPE | REQUIRED | DEFAULT | DESCRIPTION | -| -------- | -------- | ------- | -------------------------------------- | -| `string` | No | `null` | Used to create fallback if image fails | - ---- - -### `imageOrSvgProps` - -Optional props forwarded to the `ImageOrSvg` component. +The network name for the avatar. -| TYPE | REQUIRED | DEFAULT | DESCRIPTION | -| ----------------- | -------- | ------- | -------------------------------------------------- | -| `ImageOrSvgProps` | No | `null` | Customize image handling, test IDs, alt text, etc. | +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | Yes | `undefined` | ---- +```tsx + +``` ### `size` -Controls the size of the avatar. Inherits from `AvatarBaseSize`. - -| TYPE | REQUIRED | DEFAULT | -| ------------------- | -------- | ---------------------- | -| `AvatarNetworkSize` | No | `AvatarNetworkSize.Md` | +The size of the AvatarNetwork. Available sizes: -- `Xs` – 16px -- `Sm` – 24px -- `Md` – 32px -- `Lg` – 40px -- `Xl` – 48px - ---- - -### `fallbackText` - -Optional custom fallback text shown when image fails to load. - -| TYPE | REQUIRED | DEFAULT | DESCRIPTION | -| -------- | -------- | ----------------------------------------- | --------------------- | -| `string` | No | First character of `name` or empty string | Used when image fails | - ---- - -### `fallbackTextProps` - -Optional props to customize the fallback text appearance. +- `AvatarSize.Xs` (16px) +- `AvatarSize.Sm` (24px) +- `AvatarSize.Md` (32px) +- `AvatarSize.Lg` (40px) +- `AvatarSize.Xl` (48px) -| TYPE | REQUIRED | DEFAULT | -| -------------------- | -------- | ------- | -| `Partial` | No | `{}` | +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `AvatarSize` | No | `AvatarSize.Md` | ---- - -### `twClassName` - -Optional Tailwind-style utility classes. - -| TYPE | REQUIRED | DEFAULT | -| -------- | -------- | ------- | -| `string` | No | `''` | - ---- - -### Additional Props - -All other props supported by `AvatarBase`, excluding `children`, are also accepted (e.g., `style`, `testID`). +```tsx + + + +``` ---- +### `imageSource` -## Usage +Custom image source for the network avatar. -### Basic +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `ImageSourcePropType` | No | `undefined` | ```tsx - ``` -### Custom Size and Fallback +### `fallbackText` -```tsx - -``` +Text to display when the network image fails to load. -### Forwarding props to ImageOrSvg +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | ```tsx - ``` ---- - -## Behavior - -- Falls back to the first character of `name` if image fails to load. -- Defaults to `Md` (32px) size. -- Always uses a circular shape. - ---- +### `twClassName` -## Accessibility +Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to: -- Use `imageOrSvgProps.imageProps.accessibilityLabel` to describe the Network for screen readers. -- The fallback text is rendered using the `Text` component and can be customized via `fallbackTextProps`. +- Add new styles that don't exist in the default component +- Override the component's default styles when needed ---- +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | -## Notes +```tsx +import { AvatarNetwork } from '@metamask/design-system-react-native'; + +// Add additional styles + + Custom Border + + +// Override default styles + + Override Background + +``` -- This component uses `AvatarBase` and `ImageOrSvg` under the hood. -- SVGs and raster images are both supported. -- For custom shapes or behaviors, extend `AvatarBase` directly. +### `style` ---- +Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -## Contributing +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `StyleProp` | No | `undefined` | -1. Add tests for new features. -2. Update this README for any changes to the API. -3. Follow the design system's coding guidelines. +```tsx +const styles = StyleSheet.create({ + custom: { + marginVertical: 8, + marginHorizontal: 16, + }, +}); + +export const StyleExample = () => ( + +); +``` ---- +## References -For questions, refer to the [React Native documentation](https://reactnative.dev/docs), the [AvatarFavicon documentation](#), or contact the maintainers of the design system. +[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940) diff --git a/packages/design-system-react-native/src/components/AvatarToken/README.md b/packages/design-system-react-native/src/components/AvatarToken/README.md index 78c0dc4fc..8dcd469af 100644 --- a/packages/design-system-react-native/src/components/AvatarToken/README.md +++ b/packages/design-system-react-native/src/components/AvatarToken/README.md @@ -1,158 +1,131 @@ # AvatarToken -`AvatarToken` is reserved for representing tokens. +AvatarToken is used to render token avatars within an interface. ---- - -## Props - -### `src` - -Optional prop specifying the source of the token image or SVG. +```tsx +import { AvatarToken } from '@metamask/design-system-react-native'; -| TYPE | REQUIRED | DEFAULT | DESCRIPTION | -| --------------- | -------- | ------- | ----------------------------------------- | -| `ImageOrSvgSrc` | No | `null` | URI, local asset, or inline SVG component | +; +``` ---- +## Props ### `name` -Optional string used to derive the fallback text (first character). - -| TYPE | REQUIRED | DEFAULT | DESCRIPTION | -| -------- | -------- | ------- | -------------------------------------- | -| `string` | No | `null` | Used to create fallback if image fails | - ---- - -### `imageOrSvgProps` - -Optional props forwarded to the `ImageOrSvg` component. +The token name for the avatar. -| TYPE | REQUIRED | DEFAULT | DESCRIPTION | -| ----------------- | -------- | ------- | -------------------------------------------------- | -| `ImageOrSvgProps` | No | `null` | Customize image handling, test IDs, alt text, etc. | +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | Yes | `undefined` | ---- +```tsx + +``` ### `size` -Controls the size of the avatar. Inherits from `AvatarBaseSize`. - -| TYPE | REQUIRED | DEFAULT | -| ----------------- | -------- | -------------------- | -| `AvatarTokenSize` | No | `AvatarTokenSize.Md` | +The size of the AvatarToken. Available sizes: -- `Xs` – 16px -- `Sm` – 24px -- `Md` – 32px -- `Lg` – 40px -- `Xl` – 48px - ---- - -### `fallbackText` - -Optional custom fallback text shown when image fails to load. - -| TYPE | REQUIRED | DEFAULT | DESCRIPTION | -| -------- | -------- | ----------------------------------------- | --------------------- | -| `string` | No | First character of `name` or empty string | Used when image fails | - ---- - -### `fallbackTextProps` - -Optional props to customize the fallback text appearance. +- `AvatarSize.Xs` (16px) +- `AvatarSize.Sm` (24px) +- `AvatarSize.Md` (32px) +- `AvatarSize.Lg` (40px) +- `AvatarSize.Xl` (48px) -| TYPE | REQUIRED | DEFAULT | -| -------------------- | -------- | ------- | -| `Partial` | No | `{}` | +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `AvatarSize` | No | `AvatarSize.Md` | ---- - -### `twClassName` - -Optional Tailwind-style utility classes. - -| TYPE | REQUIRED | DEFAULT | -| -------- | -------- | ------- | -| `string` | No | `''` | - ---- - -### Additional Props - -All other props supported by `AvatarBase`, excluding `children`, are also accepted (e.g., `style`, `testID`). +```tsx + + + +``` ---- +### `imageSource` -## Usage +Custom image source for the token avatar. -### Basic +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `ImageSourcePropType` | No | `undefined` | ```tsx - + ``` -### Custom Size and Fallback +### `fallbackText` -```tsx - -``` +Text to display when the token image fails to load. -### Forwarding props to ImageOrSvg +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | ```tsx - ``` ---- - -## Behavior - -- Falls back to the first character of `name` if image fails to load. -- Defaults to `Md` (32px) size. -- Always uses a circular shape. - ---- +### `twClassName` -## Accessibility +Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to: -- Use `imageOrSvgProps.imageProps.accessibilityLabel` to describe the Token for screen readers. -- The fallback text is rendered using the `Text` component and can be customized via `fallbackTextProps`. +- Add new styles that don't exist in the default component +- Override the component's default styles when needed ---- +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | -## Notes +```tsx +import { AvatarToken } from '@metamask/design-system-react-native'; + +// Add additional styles + + Custom Border + + +// Override default styles + + Override Background + +``` -- This component uses `AvatarBase` and `ImageOrSvg` under the hood. -- SVGs and raster images are both supported. -- For custom shapes or behaviors, extend `AvatarBase` directly. +### `style` ---- +Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -## Contributing +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `StyleProp` | No | `undefined` | -1. Add tests for new features. -2. Update this README for any changes to the API. -3. Follow the design system's coding guidelines. +```tsx +const styles = StyleSheet.create({ + custom: { + marginVertical: 8, + marginHorizontal: 16, + }, +}); + +export const StyleExample = () => ( + +); +``` ---- +## References -For questions, refer to the [React Native documentation](https://reactnative.dev/docs), the [AvatarFavicon documentation](#), or contact the maintainers of the design system. +[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940) diff --git a/packages/design-system-react-native/src/components/BadgeCount/README.md b/packages/design-system-react-native/src/components/BadgeCount/README.md index 310af7332..aa9d99215 100644 --- a/packages/design-system-react-native/src/components/BadgeCount/README.md +++ b/packages/design-system-react-native/src/components/BadgeCount/README.md @@ -1,141 +1,103 @@ # BadgeCount -`BadgeCount` is a numeric indicator of unread messages or notifications on an app or UI element. +BadgeCount is used to render count badges within an interface. ---- - -## Props - -### `count` (Required) - -The number to be displayed in the badge. - -| TYPE | REQUIRED | DEFAULT | -| :------- | :------- | :------ | -| `number` | Yes | `N/A` | - -If `count` exceeds `max`, it will display as `max+`. - ---- - -### `max` - -Optional prop to set the maximum count before displaying `max+`. - -| TYPE | REQUIRED | DEFAULT | -| :------- | :------- | :------ | -| `number` | No | `99` | - ---- - -### `size` - -Optional prop to control the size of the badge. - -| TYPE | REQUIRED | DEFAULT | -| :--------------- | :------- | :------------------ | -| `BadgeCountSize` | No | `BadgeCountSize.Md` | - -Available sizes: - -- `Md` (14px height) -- `Lg` (20px height) - ---- - -### `textProps` - -Optional props to be passed to the `Text` component inside the badge. - -| TYPE | REQUIRED | DEFAULT | -| :------------------- | :------- | :------ | -| `Partial` | No | `{}` | - ---- - -### `twClassName` - -Optional prop to add `twrnc` overriding class names. - -| TYPE | REQUIRED | DEFAULT | -| :------- | :------- | :------ | -| `string` | No | `''` | - ---- - -### `style` +```tsx +import { BadgeCount } from '@metamask/design-system-react-native'; -Optional prop to control the style of the badge container. +; +``` -| TYPE | REQUIRED | DEFAULT | -| :--------------------- | :------- | :------ | -| `StyleProp` | No | `null` | +## Props ---- +### `count` -## Usage +The count value to display in the badge. -### Basic Usage +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `number` | Yes | `undefined` | ```tsx -import React from 'react'; -import BadgeCount from '@metamask/design-system-react-native'; - -; + ``` ---- +### `maxCount` -### Setting a Maximum Count +Maximum count to display before showing overflow indicator (e.g., "99+"). + +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `number` | No | `99` | ```tsx - + ``` -This will display `99+` instead of `120`. +### `showZero` ---- +Whether to show the badge when count is zero. -### Changing Badge Size +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `boolean` | No | `false` | ```tsx -import { BadgeCountSize } from '@metamask/design-system-react-native'; - -; + ``` ---- - -### Customizing Text Props +### `twClassName` -```tsx - -``` +Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to: ---- +- Add new styles that don't exist in the default component +- Override the component's default styles when needed -### Applying Tailwind Custom Styles +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | ```tsx - +import { BadgeCount } from '@metamask/design-system-react-native'; + +// Add additional styles + + Custom Background + + +// Override default styles + + Override Background + ``` ---- - -## Notes - -- `BadgeCount` is useful for indicating unread notifications, message counts, or status indicators. -- The text color and weight are customizable via `textProps`. -- The component ensures that excessively large numbers are represented concisely with `max+`. +### `style` ---- +Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -## Contributing +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `StyleProp` | No | `undefined` | -1. Add tests for new features. -2. Update this README for any changes to the API. -3. Follow the design system's coding guidelines. +```tsx +const styles = StyleSheet.create({ + custom: { + marginVertical: 8, + marginHorizontal: 16, + }, +}); + +export const StyleExample = () => ( + +); +``` ---- +## References -For questions, refer to the [React Native documentation](https://reactnative.dev/docs) or contact the maintainers of the design system. +[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940) diff --git a/packages/design-system-react-native/src/components/BadgeIcon/README.md b/packages/design-system-react-native/src/components/BadgeIcon/README.md index 2204a2765..19dcf958b 100644 --- a/packages/design-system-react-native/src/components/BadgeIcon/README.md +++ b/packages/design-system-react-native/src/components/BadgeIcon/README.md @@ -1,103 +1,117 @@ # BadgeIcon -`BadgeIcon` is a circular indicator that contains an icon, used to provide quick context or visual tagging at a glance. +BadgeIcon is used to render icon badges within an interface. ---- - -## Props - -### `iconName` (Required) +```tsx +import { BadgeIcon } from '@metamask/design-system-react-native'; -The name of the icon to be displayed. +; +``` -| TYPE | REQUIRED | DEFAULT | -| :--------- | :------- | :------ | -| `IconName` | Yes | `N/A` | +## Props ---- +### `name` -### `iconProps` +The icon name to display in the badge. -Optional props to customize the appearance of the icon inside the badge. +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `IconName` | Yes | `undefined` | -| TYPE | REQUIRED | DEFAULT | -| :------------------- | :------- | :------------------------------------------------------- | -| `Partial` | No | `{ size: IconSize.Xs, color: IconColor.PrimaryInverse }` | +```tsx + +``` ---- +### `variant` -### `twClassName` +The visual variant of the badge. -Optional prop to add `twrnc` overriding class names. +Available variants: -| TYPE | REQUIRED | DEFAULT | -| :------- | :------- | :------ | -| `string` | No | `''` | +- `BadgeIconVariant.Success` +- `BadgeIconVariant.Error` +- `BadgeIconVariant.Warning` +- `BadgeIconVariant.Info` ---- +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `BadgeIconVariant` | No | `BadgeIconVariant.Success` | -### `style` +```tsx + + +``` -Optional prop to control the style of the badge container. +### `size` -| TYPE | REQUIRED | DEFAULT | -| :--------------------- | :------- | :------ | -| `StyleProp` | No | `null` | +The size of the BadgeIcon. ---- +Available sizes: -## Usage +- `BadgeIconSize.Sm` (16px) +- `BadgeIconSize.Md` (20px) -### Basic Usage +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `BadgeIconSize` | No | `BadgeIconSize.Md` | ```tsx -import React from 'react'; -import BadgeIcon, { IconName } from '@metamask/design-system-react-native'; - -; + + ``` ---- - -### Adjusting Icon Properties +### `twClassName` -```tsx -import { - IconColor, - IconSize, - IconName, -} from '@metamask/design-system-react-native'; - -; -``` +Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to: ---- +- Add new styles that don't exist in the default component +- Override the component's default styles when needed -### Applying Tailwind Custom Styles +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | ```tsx - +import { BadgeIcon } from '@metamask/design-system-react-native'; + +// Add additional styles + + Custom Border + + +// Override default styles + + Override Background + ``` ---- - -## Notes - -- `BadgeIcon` provides a quick visual indication for different actions in the UI. -- You can override the default icon properties using `iconProps`. -- Tailwind classes and custom styles can be applied for further customization. +### `style` ---- +Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -## Contributing +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `StyleProp` | No | `undefined` | -1. Add tests for new features. -2. Update this README for any changes to the API. -3. Follow the design system's coding guidelines. +```tsx +const styles = StyleSheet.create({ + custom: { + marginVertical: 8, + marginHorizontal: 16, + }, +}); + +export const StyleExample = () => ( + +); +``` ---- +## References -For questions, refer to the [React Native documentation](https://reactnative.dev/docs) or contact the maintainers of the design system. +[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940) diff --git a/packages/design-system-react-native/src/components/BadgeNetwork/README.md b/packages/design-system-react-native/src/components/BadgeNetwork/README.md index adc9cce12..1e963d85c 100644 --- a/packages/design-system-react-native/src/components/BadgeNetwork/README.md +++ b/packages/design-system-react-native/src/components/BadgeNetwork/README.md @@ -1,163 +1,112 @@ # BadgeNetwork -`BadgeNetwork` indicates the network an entity is connected to. +BadgeNetwork is used to render network badges within an interface. ---- - -## Props - -The `BadgeNetwork` component accepts the following props: - -### `src` (Required) - -The source of the image or SVG. It determines whether a local image, a local SVG component, or a remote image/SVG (via URI) is rendered. - -| TYPE | REQUIRED | DEFAULT | -| :------------------------------------------------------ | :------- | :------ | -| `number \| ComponentType \| { uri?: string }` | Yes | `N/A` | - ---- - -### `name` (Optional) - -Used to generate fallback text when the image or SVG fails to load. - -| TYPE | REQUIRED | DEFAULT | -| :------- | :------- | :---------- | -| `string` | No | `undefined` | - ---- - -### `fallbackText` (Optional) - -Custom fallback text displayed when the image fails to load. - -| TYPE | REQUIRED | DEFAULT | -| :------- | :------- | :---------- | -| `string` | No | `name?.[0]` | - ---- - -### `fallbackTextProps` (Optional) - -Additional props for customizing the fallback text. - -| TYPE | REQUIRED | DEFAULT | -| :------- | :------- | :------ | -| `object` | No | `{}` | - ---- - -### `imageProps` (Optional) - -Additional properties for the image component. +```tsx +import { BadgeNetwork } from '@metamask/design-system-react-native'; -| TYPE | REQUIRED | DEFAULT | -| :----------- | :------- | :-------------------------- | -| `ImageProps` | No | `{ resizeMode: 'contain' }` | +; +``` ---- +## Props -### `onImageError` (Optional) +### `name` -Callback function triggered when the image fails to load. +The network name for the badge. -| TYPE | REQUIRED | DEFAULT | -| :------------------------------------------------------- | :------- | :---------- | -| `(e: NativeSyntheticEvent) => void` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | Yes | `undefined` | ---- +```tsx + +``` -### `onSvgError` (Optional) +### `imageSource` -Callback function triggered when the SVG fails to load. +Custom image source for the network badge. -| TYPE | REQUIRED | DEFAULT | -| :----------------- | :------- | :---------- | -| `(e: any) => void` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `ImageSourcePropType` | No | `undefined` | ---- +```tsx + +``` -### Other Props +### `variant` -`BadgeNetwork` supports all other props from [`AvatarNetwork`](#) and [`ImageOrSvg`](#), such as: +The visual variant of the badge. -- **`twClassName`** – Tailwind class names for styling. -- **`testID`** – Identifier used for testing purposes. -- **`style`** – Custom styles for the Badge container. +Available variants: ---- +- `BadgeNetworkVariant.Primary` +- `BadgeNetworkVariant.Secondary` -## Accessibility +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `BadgeNetworkVariant` | No | `BadgeNetworkVariant.Primary` | -To ensure proper accessibility, the following React Native accessibility props can be passed: +```tsx + + +``` -- **`accessibilityLabel`**: Describes the Badge for screen readers. -- **`accessible`**: Set to `true` if the Badge represents meaningful content. +### `twClassName` ---- +Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to: -## Usage +- Add new styles that don't exist in the default component +- Override the component's default styles when needed -### Basic Usage +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | ```tsx -import React from 'react'; -import BadgeNetwork from '@metamask/design-system-react-native/badge-network'; - -const App = () => ( - -); - -export default App; +import { BadgeNetwork } from '@metamask/design-system-react-native'; + +// Add additional styles + + Custom Border + + +// Override default styles + + Override Background + ``` ---- +### `style` + +Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -### Handling Image Errors +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `StyleProp` | No | `undefined` | ```tsx -import React from 'react'; -import BadgeNetwork from '@metamask/design-system-react-native/badge-network'; - -const handleError = () => { - console.log('Image failed to load'); -}; - -const App = () => ( - +const styles = StyleSheet.create({ + custom: { + marginVertical: 8, + marginHorizontal: 16, + }, +}); + +export const StyleExample = () => ( + ); - -export default App; ``` ---- - -## Notes - -- **Fallback Mechanism:** - If an image or SVG fails to load, the component falls back to displaying text derived from the `name` prop. -- **Customization:** - Supports various props for shape, size, and additional styling. - -- **Extensibility:** - Any additional `ImageOrSvg` props are forwarded for greater flexibility. - ---- - -## Contributing - -1. Add tests for any new features or modifications. -2. Update this README to reflect any changes in the API. -3. Follow the project's coding guidelines and best practices. - ---- +## References -For further details, refer to the [React Native documentation](https://reactnative.dev/docs/image). +[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940) diff --git a/packages/design-system-react-native/src/components/BadgeStatus/README.md b/packages/design-system-react-native/src/components/BadgeStatus/README.md index 86b377f70..6c7a9a011 100644 --- a/packages/design-system-react-native/src/components/BadgeStatus/README.md +++ b/packages/design-system-react-native/src/components/BadgeStatus/README.md @@ -1,161 +1,113 @@ # BadgeStatus -`BadgeStatus` indicates the state of an item through color +BadgeStatus is used to render status badges within an interface. ---- - -## Props - -### `status` (Required) - -Controls the status of the badge. - -| TYPE | REQUIRED | DEFAULT | -| :------------------ | :------- | :------ | -| `BadgeStatusStatus` | Yes | `N/A` | - -Available statuses: - -- `Active` (Connected) -- `Inactive` (Connected) -- `Disconnected` -- `New` -- `Attention` - -Each status maps to a different background and border color: - -| Status | Background Color | Border Color | -| -------------- | -------------------- | ------------------------ | -| `Active` | `bg-success-default` | `border-success-default` | -| `Inactive` | `bg-default` | `border-success-default` | -| `Disconnected` | `bg-icon-muted` | `border-icon-muted` | -| `New` | `bg-primary-default` | `border-primary-default` | -| `Attention` | `bg-error-default` | `border-error-default` | - ---- - -### `size` - -Optional prop to control the size of the badge. - -| TYPE | REQUIRED | DEFAULT | -| :---------------- | :------- | :------------------- | -| `BadgeStatusSize` | No | `BadgeStatusSize.Md` | - -Available sizes: - -- `Md` (8px) -- `Lg` (10px) - ---- - -### `hasBorder` - -Determines whether the badge has an outer border. - -| TYPE | REQUIRED | DEFAULT | -| :-------- | :------- | :------ | -| `boolean` | No | `true` | - ---- - -### `twClassName` - -Optional prop to add `twrnc` overriding class names. - -| TYPE | REQUIRED | DEFAULT | -| :------- | :------- | :------ | -| `string` | No | `''` | +```tsx +import { BadgeStatus } from '@metamask/design-system-react-native'; ---- +; +``` -### `style` +## Props -Optional prop to control the style of the badge container. +### `variant` -| TYPE | REQUIRED | DEFAULT | -| :--------------------- | :------- | :------ | -| `StyleProp` | No | `null` | +The status variant of the badge. ---- +Available variants: -## Usage +- `BadgeStatusVariant.Success` +- `BadgeStatusVariant.Error` +- `BadgeStatusVariant.Warning` +- `BadgeStatusVariant.Info` -### Basic Usage +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `BadgeStatusVariant` | Yes | `undefined` | ```tsx -import React from 'react'; -import BadgeStatus, { - BadgeStatusStatus, -} from '@metamask/design-system-react-native'; - -; + + + + ``` ---- +### `size` -### Changing Status +The size of the BadgeStatus. -```tsx - -``` +Available sizes: ---- +- `BadgeStatusSize.Sm` (8px) +- `BadgeStatusSize.Md` (12px) -### Adjusting Size +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `BadgeStatusSize` | No | `BadgeStatusSize.Md` | ```tsx -import { BadgeStatusSize } from '@metamask/design-system-react-native'; - -; + + ``` ---- - -### Adding a Border +### `twClassName` -```tsx - -``` +Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to: ---- +- Add new styles that don't exist in the default component +- Override the component's default styles when needed -### Customizing with Tailwind +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | ```tsx - +import { BadgeStatus } from '@metamask/design-system-react-native'; + +// Add additional styles + + Custom Border + + +// Override default styles + + Override Background + ``` ---- +### `style` -## Accessibility +Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -The `BadgeStatus` component supports accessibility through the optional `accessibilityLabel` prop. This allows developers to provide context-specific descriptions for screen readers. +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `StyleProp` | No | `undefined` | ```tsx -// Example with custom accessibility label - +const styles = StyleSheet.create({ + custom: { + marginVertical: 8, + marginHorizontal: 16, + }, +}); + +export const StyleExample = () => ( + +); ``` ---- - -## Notes - -- `BadgeStatus` is useful for indicating statuses such as online/offline states, alerts, or new updates. -- The border color dynamically adjusts based on the `status` value. -- You can override styles using `twClassName` or `style` props. - ---- - -## Contributing - -1. Add tests for new features. -2. Update this README for any changes to the API. -3. Follow the design system's coding guidelines. - ---- +## References -For questions, refer to the [React Native documentation](https://reactnative.dev/docs) or contact the maintainers of the design system. +[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940) diff --git a/packages/design-system-react-native/src/components/BadgeWrapper/README.md b/packages/design-system-react-native/src/components/BadgeWrapper/README.md index 38b0e213b..963bf9ba0 100644 --- a/packages/design-system-react-native/src/components/BadgeWrapper/README.md +++ b/packages/design-system-react-native/src/components/BadgeWrapper/README.md @@ -1,203 +1,128 @@ # BadgeWrapper -The `BadgeWrapper` positions a badge on top of another element. +BadgeWrapper is used to wrap components with a badge indicator within an interface. ---- - -## Props - -### `children` (Required) - -The main element that the badge will be anchored to. Additional props can be passed to the children container using the `childrenContainerProps` prop. - -| TYPE | REQUIRED | DESCRIPTION | -| ----------------- | -------- | -------------------------------------- | -| `React.ReactNode` | Yes | Anchor element to attach the badge to. | - ---- - -### `badge` (Required) - -The badge element that is positioned relative to the `children`. Additional props can be passed to the badge container using the `badgeContainerProps` prop. - -| TYPE | REQUIRED | DESCRIPTION | -| ----------------- | -------- | ------------------------ | -| `React.ReactNode` | Yes | Badge element to render. | - ---- - -### `position` - -Optional preset to determine badge placement. - -| TYPE | REQUIRED | DEFAULT | -| ---------------------- | -------- | ---------------------------------- | -| `BadgeWrapperPosition` | No | `BadgeWrapperPosition.BottomRight` | - -Options: - -- `TopRight` -- `BottomRight` -- `BottomLeft` -- `TopLeft` - ---- - -### `positionAnchorShape` - -Specifies the shape of the anchor to adjust badge alignment. - -| TYPE | REQUIRED | DEFAULT | -| --------------------------------- | -------- | ------------------------------------------ | -| `BadgeWrapperPositionAnchorShape` | No | `BadgeWrapperPositionAnchorShape.Circular` | - -Options: - -- `Circular` -- `Rectangular` - ---- - -### `positionXOffset` - -Horizontal adjustment for the badge position. - -| TYPE | REQUIRED | DEFAULT | -| -------- | -------- | ------- | -| `number` | No | `0` | - ---- - -### `positionYOffset` - -Vertical adjustment for the badge position. - -| TYPE | REQUIRED | DEFAULT | -| -------- | -------- | ------- | -| `number` | No | `0` | - ---- - -### `customPosition` - -Allows complete control over badge positioning using style values. - -| TYPE | REQUIRED | DEFAULT | -| ---------------------------- | -------- | ----------- | -| `BadgeWrapperCustomPosition` | No | `undefined` | - -Example: +```tsx +import { BadgeWrapper } from '@metamask/design-system-react-native'; -```ts -{ - top: 5, - right: 10, -} +}> + Content with badge +; ``` ---- - -### `twClassName` - -Tailwind class names to apply to the outermost wrapper. +## Props -| TYPE | REQUIRED | DEFAULT | -| -------- | -------- | ------- | -| `string` | No | `''` | +### `children` ---- +The content to wrap with a badge. -### `style` +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `ReactNode` | Yes | `undefined` | -Optional style override for the outermost wrapper. +```tsx +import { BadgeWrapper, BadgeCount } from '@metamask/design-system-react-native'; -| TYPE | REQUIRED | DEFAULT | -| ---------------------- | -------- | ------- | -| `StyleProp` | No | `null` | +}> + Wrapped content + +``` ---- +### `badge` -## Usage +The badge component to display. -### Basic Usage +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `ReactNode` | Yes | `undefined` | ```tsx -}> - +}> + Content ``` ---- +### `position` -### Preset Positions +The position of the badge relative to the wrapped content. -```tsx -} -> - - -``` +Available positions: ---- +- `BadgeWrapperPosition.TopRight` +- `BadgeWrapperPosition.TopLeft` +- `BadgeWrapperPosition.BottomRight` +- `BadgeWrapperPosition.BottomLeft` -### Custom Position +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `BadgeWrapperPosition` | No | `BadgeWrapperPosition.TopRight` | ```tsx -} +} + position={BadgeWrapperPosition.BottomRight} > - + Content ``` ---- +### `twClassName` + +Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to: -### Anchor Shape Adjustment +- Add new styles that don't exist in the default component +- Override the component's default styles when needed + +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | ```tsx -} +import { BadgeWrapper } from '@metamask/design-system-react-native'; + +// Add additional styles +} + twClassName="bg-primary-100" > - + Custom Background -``` - ---- -### Offset Adjustments - -```tsx -} +// Override default styles +} + twClassName="!relative" > - + Override Position ``` ---- - -## Notes - -- You must wrap both `children` and `badge` elements using this component to ensure proper positioning. -- Positioning logic adjusts based on anchor shape to better align on circular vs. rectangular anchors. -- Offset props are additive and can help nudge badges pixel-perfect into place. +### `style` ---- +Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -## Contributing +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `StyleProp` | No | `undefined` | -1. Add tests for new props or layout logic. -2. Document new functionality in this README. -3. Follow the design system's coding guidelines. +```tsx +const styles = StyleSheet.create({ + custom: { + marginVertical: 8, + marginHorizontal: 16, + }, +}); + +export const StyleExample = () => ( + } + style={styles.custom} + > + Custom styled content + +); +``` ---- +## References -For questions, refer to the [React Native documentation](https://reactnative.dev/docs) or reach out to the maintainers of the design system. +[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940) diff --git a/packages/design-system-react-native/src/components/Box/README.md b/packages/design-system-react-native/src/components/Box/README.md index c9d4769ea..acbae5ba1 100644 --- a/packages/design-system-react-native/src/components/Box/README.md +++ b/packages/design-system-react-native/src/components/Box/README.md @@ -1,652 +1,145 @@ # Box -`Box` is a low level flexbox layout component built on top of the React Native `View` element. It provides a comprehensive set of props for layout control including flexbox properties, spacing (margin and padding), borders, and background colors that map to Tailwind utility classes. - ---- - -## Props - -### Flexbox Properties - -### `flexDirection` - -The flexDirection style of the component for controlling the main axis direction. - -| TYPE | REQUIRED | -| :--------------------------------------- | :------- | -| [BoxFlexDirection](../../types/index.ts) | No | - -### `flexWrap` - -The flexWrap style of the component for controlling item wrapping behavior. - -| TYPE | REQUIRED | -| :---------------------------------- | :------- | -| [BoxFlexWrap](../../types/index.ts) | No | - -### `gap` - -The gap between the component's children. Use values from the BoxSpacing scale (0-12). - -| TYPE | REQUIRED | -| :--------------------------------- | :------- | -| [BoxSpacing](../../types/index.ts) | No | - -### `alignItems` - -The alignItems style of the component for cross-axis alignment. - -| TYPE | REQUIRED | -| :------------------------------------ | :------- | -| [BoxAlignItems](../../types/index.ts) | No | - -### `justifyContent` - -The justifyContent style of the component for main-axis alignment. - -| TYPE | REQUIRED | -| :---------------------------------------- | :------- | -| [BoxJustifyContent](../../types/index.ts) | No | - -### Margin Properties - -### `margin` - -The margin of the component on all sides. Use values from the BoxSpacing scale (0-12). - -| TYPE | REQUIRED | -| :--------------------------------- | :------- | -| [BoxSpacing](../../types/index.ts) | No | - -### `marginTop` - -The top margin of the component. Use values from the BoxSpacing scale (0-12). - -| TYPE | REQUIRED | -| :--------------------------------- | :------- | -| [BoxSpacing](../../types/index.ts) | No | - -### `marginRight` - -The right margin of the component. Use values from the BoxSpacing scale (0-12). - -| TYPE | REQUIRED | -| :--------------------------------- | :------- | -| [BoxSpacing](../../types/index.ts) | No | - -### `marginBottom` - -The bottom margin of the component. Use values from the BoxSpacing scale (0-12). - -| TYPE | REQUIRED | -| :--------------------------------- | :------- | -| [BoxSpacing](../../types/index.ts) | No | - -### `marginLeft` - -The left margin of the component. Use values from the BoxSpacing scale (0-12). - -| TYPE | REQUIRED | -| :--------------------------------- | :------- | -| [BoxSpacing](../../types/index.ts) | No | - -### `marginHorizontal` - -The horizontal margin (left and right) of the component. Use values from the BoxSpacing scale (0-12). - -| TYPE | REQUIRED | -| :--------------------------------- | :------- | -| [BoxSpacing](../../types/index.ts) | No | - -### `marginVertical` - -The vertical margin (top and bottom) of the component. Use values from the BoxSpacing scale (0-12). - -| TYPE | REQUIRED | -| :--------------------------------- | :------- | -| [BoxSpacing](../../types/index.ts) | No | - -### Padding Properties - -### `padding` - -The padding of the component on all sides. Use values from the BoxSpacing scale (0-12). - -| TYPE | REQUIRED | -| :--------------------------------- | :------- | -| [BoxSpacing](../../types/index.ts) | No | - -### `paddingTop` - -The top padding of the component. Use values from the BoxSpacing scale (0-12). - -| TYPE | REQUIRED | -| :--------------------------------- | :------- | -| [BoxSpacing](../../types/index.ts) | No | - -### `paddingRight` - -The right padding of the component. Use values from the BoxSpacing scale (0-12). - -| TYPE | REQUIRED | -| :--------------------------------- | :------- | -| [BoxSpacing](../../types/index.ts) | No | - -### `paddingBottom` - -The bottom padding of the component. Use values from the BoxSpacing scale (0-12). - -| TYPE | REQUIRED | -| :--------------------------------- | :------- | -| [BoxSpacing](../../types/index.ts) | No | - -### `paddingLeft` - -The left padding of the component. Use values from the BoxSpacing scale (0-12). - -| TYPE | REQUIRED | -| :--------------------------------- | :------- | -| [BoxSpacing](../../types/index.ts) | No | - -### `paddingHorizontal` - -The horizontal padding (left and right) of the component. Use values from the BoxSpacing scale (0-12). - -| TYPE | REQUIRED | -| :--------------------------------- | :------- | -| [BoxSpacing](../../types/index.ts) | No | - -### `paddingVertical` - -The vertical padding (top and bottom) of the component. Use values from the BoxSpacing scale (0-12). - -| TYPE | REQUIRED | -| :--------------------------------- | :------- | -| [BoxSpacing](../../types/index.ts) | No | - -### Border Properties - -### `borderWidth` - -The border width of the component. Use only valid Tailwind CSS border width values (0, 1, 2, 4, 8). - -| TYPE | REQUIRED | -| :------------------------------------- | :------- | -| [BoxBorderWidth](../../types/index.ts) | No | - -### `borderColor` - -The border color of the component. - -| TYPE | REQUIRED | -| :------------------------------------- | :------- | -| [BoxBorderColor](../../types/index.ts) | No | - -### Background Properties - -### `backgroundColor` - -The background color of the component. - -| TYPE | REQUIRED | -| :----------------------------------------- | :------- | -| [BoxBackgroundColor](../../types/index.ts) | No | - -### General Properties - -### `twClassName` - -Optional prop to add twrnc overriding classNames for styling beyond the component's built-in props. - -| TYPE | REQUIRED | DEFAULT | -| :------- | :------- | :------ | -| `string` | No | `''` | - -### `style` - -Optional style prop forwarded to the underlying `View`. - -| TYPE | REQUIRED | DEFAULT | -| :--------------------- | :------- | :------ | -| `StyleProp` | No | `null` | - -### Additional ViewProps - -All other `ViewProps` are passed directly to the underlying `View` component. - ---- - -## Usage - -### Flexbox Properties - -#### `flexDirection` +Box is used to render flexible container elements within an interface. ```tsx -// Horizontal layout (default) - - Item 1 - Item 2 - +import { Box } from '@metamask/design-system-react-native'; -// Vertical layout - - Item 1 - Item 2 - -``` - -#### `flexWrap` - -```tsx - - Item 1 - Item 2 - Item 3 - Item 4 - +Default Box; ``` -#### `gap` +## Props -```tsx -// Small gap (8px) - - Item 1 - Item 2 - +### `children` -// Large gap (24px) - - Item 1 - Item 2 - -``` +The content of the Box component. -#### `alignItems` +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `ReactNode` | No | `undefined` | ```tsx -// Center items on cross axis - - Centered content - +import { Box } from '@metamask/design-system-react-native'; -// Stretch items to fill cross axis - - Stretched content - +Custom box content; ``` -#### `justifyContent` - -```tsx -// Space between items - - Left - Right - - -// Center items on main axis - - Centered - -``` +### `backgroundColor` -### Margin Properties +Background color of the box. -#### `margin` +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `BackgroundColor` | No | `BackgroundColor.Transparent` | ```tsx -// All sides margin (16px) - - Box with margin - - -// No margin - - Box without margin + + Box with background color ``` -#### Directional Margins - -```tsx -// Different margins on each side - - Box with directional margins - - -// Horizontal and vertical margins - - Box with horizontal and vertical margins - -``` +### `borderColor` -### Padding Properties +Border color of the box. -#### `padding` +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `BorderColor` | No | `BorderColor.Transparent` | ```tsx -// All sides padding (16px) - - Box with padding - - -// Large padding (24px) - - Box with large padding + + Box with border ``` -#### Directional Padding - -```tsx -// Different padding on each side - - Box with directional padding - +### `borderRadius` -// Horizontal and vertical padding - - Box with horizontal and vertical padding - -``` +Border radius of the box. -### Border Properties - -#### `borderWidth` and `borderColor` +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `BorderRadius` | No | `BorderRadius.None` | ```tsx -// Basic border - - Box with default border - - -// Thick colored border - - Box with thick primary border - - -// Error state border - - Error state box + + Box with rounded corners ``` -### Background Properties - -#### `backgroundColor` +### `padding` -```tsx -// Primary background - - Box with primary background - +Padding inside the box. -// Muted background - - Box with muted background - +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `number` | No | `0` | -// Success background - - Box with success background +```tsx + + Box with padding ``` -### Combined Usage - -#### Card-like Component +### `margin` -```tsx - - Card Title - - Card content goes here - More content - - -``` +Margin outside the box. -#### Complex Layout +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `number` | No | `0` | ```tsx - - Main Container - - Child 1 - Child 2 - + + Box with margin ``` ### `twClassName` -```tsx -// Custom styling with Tailwind classes - - Custom styled box - +Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to: -// Size and positioning with Tailwind - - Half width, fixed height - -``` +- Add new styles that don't exist in the default component +- Override the component's default styles when needed -### `style` +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | ```tsx - - Box with shadow - -``` - ---- - -## BoxSpacing Values - -The `gap`, `margin`, and `padding` props use the `BoxSpacing` numeric system for consistent spacing scales: - -**Available Values:** 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 - -**Pixel Mapping:** - -- `0` - 0px (none) -- `1` - 4px (extra small) -- `2` - 8px (small) -- `3` - 12px (small-medium) -- `4` - 16px (medium) -- `5` - 20px (medium-large) -- `6` - 24px (large) -- `7` - 28px (extra large) -- `8` - 32px (2x large) -- `9` - 36px (3x large) -- `10` - 40px (4x large) -- `11` - 44px (5x large) -- `12` - 48px (6x large) - -## BoxBorderWidth Values - -The `borderWidth` prop uses the `BoxBorderWidth` type with only valid Tailwind CSS border width values: - -**Available Values:** 0, 1, 2, 4, 8 - -**Pixel Mapping:** - -- `0` - 0px (no border, maps to `border-0`) -- `1` - 1px (default border, maps to `border`) -- `2` - 2px (maps to `border-2`) -- `4` - 4px (maps to `border-4`) -- `8` - 8px (maps to `border-8`) - ---- +import { Box } from '@metamask/design-system-react-native'; -## Color Options - -### BoxBackgroundColor - -Available background colors include: - -- `Default` - Default background color -- `Alternative` - Alternative background color -- `PrimaryDefault` - Primary brand color -- `PrimaryMuted` - Muted primary color -- `ErrorDefault` - Error state color -- `ErrorMuted` - Muted error color -- `WarningDefault` - Warning state color -- `WarningMuted` - Muted warning color -- `SuccessDefault` - Success state color -- `SuccessMuted` - Muted success color -- `InfoDefault` - Info state color -- `InfoMuted` - Muted info color -- `Transparent` - Transparent background - -### BoxBorderColor - -Available border colors include: - -- `Default` - Default border color -- `Muted` - Muted border color -- `PrimaryDefault` - Primary brand border -- `ErrorDefault` - Error state border -- `WarningDefault` - Warning state border -- `SuccessDefault` - Success state border -- `InfoDefault` - Info state border -- `Transparent` - Transparent border - ---- - -## Usage Patterns - -### Basic Horizontal Layout - -```tsx - - Item 1 - Item 2 - Item 3 +// Add additional styles + + Custom Padding and Margin -``` -### Vertical Stack - -```tsx - - Item 1 - Item 2 - Item 3 +// Override default styles + + Override Background ``` -### Space Between Layout +### `style` -```tsx - - Left - Right - -``` +Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -### Alert/Notification Component +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `StyleProp` | No | `undefined` | ```tsx - - Warning: This is an alert message - +const styles = StyleSheet.create({ + custom: { + marginVertical: 8, + marginHorizontal: 16, + }, +}); + +export const StyleExample = () => ( + Custom styled box +); ``` -### Button-like Component +## References -```tsx - - Button Text - -``` +[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940) diff --git a/packages/design-system-react-native/src/components/Button/README.md b/packages/design-system-react-native/src/components/Button/README.md index 23552581a..486016150 100644 --- a/packages/design-system-react-native/src/components/Button/README.md +++ b/packages/design-system-react-native/src/components/Button/README.md @@ -1,116 +1,239 @@ -# [Button](https://metamask-consensys.notion.site/Button-88af1ddc075b40e3bb38a6d0c098d9b6) +# Button -![Button](./Button.png) +Button is used to render interactive button elements within an interface. -`Button` is a labeled element that a user can click or tap to initiate an action. +```tsx +import { Button } from '@metamask/design-system-react-native'; -_Developer Note: This component is a union component, which consists of [ButtonTertiary](./variants/ButtonTertiary/ButtonTertiary.tsx), [ButtonPrimary](./variants/ButtonPrimary/ButtonPrimary.tsx), and [ButtonSecondary](./variants/ButtonSecondary/ButtonSecondary.tsx)._ + + +// Override default styles + ``` + +### `style` + +Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. + +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `StyleProp` | No | `undefined` | + +```tsx +const styles = StyleSheet.create({ + custom: { + marginVertical: 8, + marginHorizontal: 16, + }, +}); + +export const StyleExample = () => ( + -; + {}} +/> ``` -This can be useful in scenarios where you need to trigger the checkbox programmatically, such as when implementing "Select All" functionality or resetting forms. - ---- - ### `twClassName` -Use the `twClassName` prop to add Tailwind CSS classes to the checkbox container. These classes are merged with the default classes. +Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to: + +- Add new styles that don't exist in the default component +- Override the component's default styles when needed -| TYPE | REQUIRED | DEFAULT | -| -------- | -------- | ----------- | -| `string` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | ```tsx -const [isSelected, setIsSelected] = useState(false); +import { Checkbox } from '@metamask/design-system-react-native'; - setIsEnabled(!isSelected)}} - label="Custom BG" - twClassName="bg-primary-100" -/>; +// Add additional styles + {}} + twClassName="p-2" +> + Custom Padding + + +// Override default styles + {}} + twClassName="!border-error-100" +> + Override Border + ``` ---- - ### `style` -Custom styles for the outer `Pressable` container. +Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -| TYPE | REQUIRED | DEFAULT | -| ---------------------- | -------- | ----------- | -| `StyleProp` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `StyleProp` | No | `undefined` | ```tsx -const [isSelected, setIsSelected] = useState(false); -const customStyles = { - marginVertical: 10, -}; - - setIsEnabled(!isSelected)}} - label="Styled" - style={customStyles} -/>; +const styles = StyleSheet.create({ + custom: { + marginVertical: 8, + marginHorizontal: 16, + }, +}); + +export const StyleExample = () => ( + {}} + style={styles.custom} + /> +); ``` ---- - ## References [MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940) diff --git a/packages/design-system-react-native/src/components/Icon/README.md b/packages/design-system-react-native/src/components/Icon/README.md index f0cfdaf26..1baee2477 100644 --- a/packages/design-system-react-native/src/components/Icon/README.md +++ b/packages/design-system-react-native/src/components/Icon/README.md @@ -1,29 +1,32 @@ # Icon -The `Icon` component is a customizable SVG icon component for React Native applications, integrating with Tailwind CSS classes via `twrnc`. It allows you to display various icons by name, with optional size and color customizations. +Icon is used to render icon elements within an interface. + +```tsx +import { Icon } from '@metamask/design-system-react-native'; + +; +``` ## Props ### `name` -**Required**. Specifies which icon to render from the icon set. +The icon name to display. -| TYPE | REQUIRED | -| :------------------------------- | :------- | -| [IconName](./Icon.types.ts#L---) | Yes | +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `IconName` | Yes | `undefined` | -You can find the full list of available icons in `Icon.types.ts`, under the `IconName` enum. +```tsx + +``` ### `size` -Optional prop that controls the size of the icon in pixels. -All sizes map to numeric pixel values. - -| TYPE | REQUIRED | DEFAULT | -| :------------------------------- | :------- | :------------ | -| [IconSize](./Icon.types.ts#L---) | No | `IconSize.Md` | +The size of the icon. -Available `IconSize` options: +Available sizes: - `IconSize.Xs` (12px) - `IconSize.Sm` (16px) @@ -31,119 +34,92 @@ Available `IconSize` options: - `IconSize.Lg` (24px) - `IconSize.Xl` (32px) -### `color` - -Optional prop to set the icon color using predefined theme classes. - -| TYPE | REQUIRED | DEFAULT | -| :-------------------------------- | :------- | :---------------------- | -| [IconColor](./Icon.types.ts#L---) | No | `IconColor.IconDefault` | - -Available `IconColor` options include: - -- `IconDefault` (text-icon-default) -- `IconAlternative` (text-icon-alternative) -- `IconMuted` (text-icon-muted) -- `OverlayInverse` (text-overlay-inverse) -- `PrimaryDefault` (text-primary-default) -- `PrimaryInverse` (text-primary-inverse) -- `ErrorDefault` (text-error-default) -- `ErrorInverse` (text-error-inverse) -- `SuccessDefault` (text-success-default) -- `SuccessInverse` (text-success-inverse) -- `WarningDefault` (text-warning-default) -- `WarningInverse` (text-warning-inverse) -- `InfoDefault` (text-info-default) -- `InfoInverse` (text-info-inverse) - -### `twClassName` - -Optional prop to add custom `twrnc` class names for additional styling overrides. - -| TYPE | REQUIRED | DEFAULT | -| :------- | :------- | :------ | -| `string` | No | `''` | +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `IconSize` | No | `IconSize.Md` | -### Additional ViewProps - -All additional `ViewProps` are spread onto the underlying SVG component for further customization and accessibility. - -## Usage +```tsx + + + +``` -```javascript -import React from 'react'; -import Icon from '@metamask/design-system-react-native/lib/components/Icon'; -import { - IconName, - IconSize, - IconColor, -} from '@metamask/design-system-react-native/lib/components/Icon/Icon.types'; +### `color` -// Basic usage -; +The color of the icon. -// Specify size -; +Available colors: -// Change color -; +- `IconColor.IconDefault` +- `IconColor.IconAlternative` +- `IconColor.IconMuted` +- `IconColor.IconPrimary` +- `IconColor.IconSuccess` +- `IconColor.IconError` +- `IconColor.IconWarning` +- `IconColor.IconInfo` -// Add custom Tailwind class names -; +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `IconColor` | No | `IconColor.IconDefault` | -// Combine multiple props -; +```tsx + + ``` -## Example with All Props +### `twClassName` -```javascript - +Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to: + +- Add new styles that don't exist in the default component +- Override the component's default styles when needed + +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | + +```tsx +import { Icon } from '@metamask/design-system-react-native'; + +// Add additional styles + + Semi-transparent Icon + + +// Override default styles + + Override Color + ``` -## Notes +### `style` -- The `Icon` component is designed to be flexible and works seamlessly with `twrnc` for styling. -- When using `twClassName`, ensure the class names are compatible with your Tailwind configuration. -- Custom styles can be applied via the `style` prop, which merges with the styles generated from `twClassName` and other props. +Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -## Importing Types +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `StyleProp` | No | `undefined` | -If you need to use the enums for `name`, `color`, or `size`, you can import them as follows: +```tsx +const styles = StyleSheet.create({ + custom: { + marginVertical: 8, + marginHorizontal: 16, + }, +}); -```javascript -import { - IconSize, - IconName, - IconColor, -} from '@metamask/design-system-react-native'; +export const StyleExample = () => ( + +); ``` -## Accessibility - -- Consider using `accessibilityLabel` and other accessibility props to provide a text equivalent for users of assistive technologies. -- Ensure icons that convey information have accessible labels. - -## Contributing - -When contributing to the `Icon` component, please ensure: - -- All new icons are flatten, exported, and optimized properly. -- Make sure to remove colors from new icons. -- Add new icons to the assets folder. -- Run `yarn workspace @metamask/design-system-react-native ts-node scripts/generate-icons.ts` from root. - ---- +## References -For questions or further assistance, refer to the React Native SVG documentation or contact the maintainers of the design system. +[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940) diff --git a/packages/design-system-react-native/src/components/Text/README.md b/packages/design-system-react-native/src/components/Text/README.md index 3e00f564c..d59ac70d0 100644 --- a/packages/design-system-react-native/src/components/Text/README.md +++ b/packages/design-system-react-native/src/components/Text/README.md @@ -1,18 +1,34 @@ # Text -Text is the used to render text and paragraphs within an interface +Text is used to render text and paragraphs within an interface. + +```tsx +import { Text } from '@metamask/design-system-react-native'; + +Default Text; +``` ## Props +### `children` + +Text content to be displayed. + +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string \| ReactNode` | Yes | `undefined` | + +```tsx +import { Text } from '@metamask/design-system-react-native'; + +Sample text content; +``` + ### `variant` Optional enum to select between typography variants. -| TYPE | REQUIRED | DEFAULT | -| :----------------------------- | :------- | :------------------- | -| [TextVariant](./Text.types.ts) | No | `TextVariant.BodyMd` | - -Available `TextVariant` options: +Available variants: - `TextVariant.DisplayLg` - `TextVariant.DisplayMd` @@ -23,187 +39,122 @@ Available `TextVariant` options: - `TextVariant.BodyMd` - `TextVariant.BodySm` - `TextVariant.BodyXs` -- `TextVariant.PageHeading` -- `TextVariant.SectionHeading` -- `TextVariant.ButtonLabelMd` -- `TextVariant.ButtonLabelLg` -- `TextVariant.AmountDisplayLg` -### `children` - -Text content to be displayed. +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `TextVariant` | No | `TextVariant.BodyMd` | -| TYPE | REQUIRED | -| :---------------------- | :------- | -| `string` or `ReactNode` | Yes | +```tsx +Large Heading +Small body text +``` ### `color` Optional prop to set the text color. -| TYPE | REQUIRED | DEFAULT | -| :--------------------------- | :------- | :---------------------- | -| [TextColor](./Text.types.ts) | No | `TextColor.TextDefault` | - -Available `TextColor` options: +Available colors: - `TextColor.TextDefault` - `TextColor.TextAlternative` - `TextColor.TextMuted` -- `TextColor.OverlayInverse` - `TextColor.PrimaryDefault` -- `TextColor.PrimaryInverse` - `TextColor.ErrorDefault` -- `TextColor.ErrorAlternative` -- `TextColor.ErrorInverse` - `TextColor.SuccessDefault` -- `TextColor.SuccessInverse` - `TextColor.WarningDefault` -- `TextColor.WarningInverse` - `TextColor.InfoDefault` -- `TextColor.InfoInverse` -- `TextColor.Transparent` + +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `TextColor` | No | `TextColor.TextDefault` | + +```tsx +Primary colored text +Error text +``` ### `fontWeight` Optional prop to adjust the font weight. -| TYPE | REQUIRED | DEFAULT | -| :---------------------------- | :------- | :------------------- | -| [FontWeight](./Text.types.ts) | No | `FontWeight.Regular` | +Available font weights: -Available `FontWeight` options: +- `FontWeight.Regular` (Weight 400) +- `FontWeight.Medium` (Weight 500) +- `FontWeight.Bold` (Weight 700) -- `FontWeight.Regular` (Weight `400`) -- `FontWeight.Medium` (Weight `500`) -- `FontWeight.Bold` (Weight `700`) +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `FontWeight` | No | `FontWeight.Regular` | + +```tsx +Bold text +Medium weight text +``` ### `fontStyle` Optional prop to adjust the font style. -| TYPE | REQUIRED | DEFAULT | -| :--------------------------- | :------- | :----------------- | -| [FontStyle](./Text.types.ts) | No | `FontStyle.Normal` | - -Available `FontStyle` options: +Available font styles: - `FontStyle.Normal` - `FontStyle.Italic` +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `FontStyle` | No | `FontStyle.Normal` | + +```tsx +Italic text +``` + ### `twClassName` -Optional prop to add custom `twrnc` class names for additional styling. +Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to: -| TYPE | REQUIRED | DEFAULT | -| :------- | :------- | :------ | -| `string` | No | `''` | +- Add new styles that don't exist in the default component +- Override the component's default styles when needed -## Usage +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | -```javascript -import React from 'react'; +```tsx import { Text } from '@metamask/design-system-react-native'; -import { - TextVariant, - TextColor, - FontWeight, - FontStyle, -} from '@metamask/design-system-react-native/lib/components/Text/Text.types'; - -// Basic usage with default props -Sample Text; - -// Using a specific variant -Heading Large Text; - -// Applying a text color -Primary Colored Text; - -// Setting font weight to bold -Bold Text; - -// Setting font style to italic -Italic Text; - -// Combining multiple styling props - - Bold Italic Success Text -; - -// Adding custom Tailwind class names -Underlined Text; - -// Passing additional props to the underlying Text component - - This is a very long text that will be truncated at the end. -; - -// Using custom styles alongside twClassName - - Custom Styled Text -; - -// Nested Text components - - This is a nested text example. -; -``` -## Example with All Props - -```javascript - - This is a bold, italic, underlined, centered text with error color. +// Add additional styles + + Underlined centered text -``` - -## Notes - -- The `Text` component is designed to be flexible and works seamlessly with `twrnc` for styling. -- When using `twClassName`, ensure the class names are compatible with your Tailwind configuration. -- The `variant` prop controls the overall typography, including font size and line height. -- Custom styles can be applied via the `style` prop, which merges with the styles generated from `twClassName` and other props. -## Importing Types - -If you need to use the enums for `variant`, `color`, `fontWeight`, or `fontStyle`, you can import them as follows: - -```javascript -import { - TextVariant, - TextColor, - FontWeight, - FontStyle, -} from '@metamask/design-system-react-native/'; +// Override default styles + + Override Text Color + ``` -## Accessibility +### `style` -- The `Text` component sets `accessibilityRole` to `"text"` by default to enhance accessibility support. -- Ensure that any interactive text elements are wrapped appropriately (e.g., within a `TouchableOpacity`) and have the correct accessibility roles and labels. +Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -## Contributing +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `StyleProp` | No | `undefined` | -When contributing to the `Text` component, please ensure: +```tsx +const styles = StyleSheet.create({ + custom: { + marginVertical: 8, + marginHorizontal: 16, + }, +}); -- All new variants, colors, font weights, or styles are added to the respective enums in `Text.types.ts`. -- Updates to the component maintain consistency with the design system guidelines. -- All changes are accompanied by appropriate tests and documentation updates. +export const StyleExample = () => ( + Custom styled text +); +``` ---- +## References -For any questions or further assistance, please refer to the [React Native Text documentation](https://reactnative.dev/docs/text) or reach out to the maintainers of the design system. +[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940) diff --git a/packages/design-system-react-native/src/components/TextButton/README.md b/packages/design-system-react-native/src/components/TextButton/README.md index b6653b52e..f71ea4f86 100644 --- a/packages/design-system-react-native/src/components/TextButton/README.md +++ b/packages/design-system-react-native/src/components/TextButton/README.md @@ -1,226 +1,210 @@ # TextButton -`TextButton` is used for text-only button actions or hyperlink without padding or background. +TextButton is used to render text-based button elements within an interface. ---- - -## Props - -### `children` (Required) - -The content to be rendered within the `TextButton`. - -| TYPE | REQUIRED | DEFAULT | -| :------- | :------- | :------ | -| `string` | Yes | `N/A` | - ---- - -### `textProps` - -Optional props to be passed to the `Text` component when the `children` is a string. - -| TYPE | REQUIRED | DEFAULT | -| :------------------------------------- | :------- | :--------------------------------------------------------------- | -| `Omit, 'children'>` | No | `{ variant: BodyMd, fontWeight: Medium, color: PrimaryDefault }` | - ---- - -### `isLoading` - -Optional prop that, when `true`, shows a loading spinner. - -| TYPE | REQUIRED | DEFAULT | -| :-------- | :------- | :------ | -| `boolean` | No | `false` | - ---- - -### `loadingText` - -Optional text to display when the button is in the loading state. - -| TYPE | REQUIRED | DEFAULT | -| :------- | :------- | :---------- | -| `string` | No | `"Loading"` | - ---- - -### `spinnerProps` - -Optional props to customize the appearance of the spinner. - -| TYPE | REQUIRED | DEFAULT | -| :---------------------- | :------- | :----------------------- | -| `Partial` | No | `{ color: IconDefault }` | - ---- +```tsx +import { TextButton } from '@metamask/design-system-react-native'; -### `startIconName` + console.log('Pressed')}> + Click me +; +``` -Optional prop to specify an icon to show at the start of the button. +## Props -| TYPE | REQUIRED | DEFAULT | -| :--------- | :------- | :------ | -| `IconName` | No | `null` | +### `children` ---- +The text content of the TextButton component. -### `startIconProps` +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string \| ReactNode` | Yes | `undefined` | -Optional props to pass additional properties to the start icon. +```tsx +import { TextButton } from '@metamask/design-system-react-native'; -| TYPE | REQUIRED | DEFAULT | -| :------------------- | :------- | :----------------------------------- | -| `Partial` | No | `{ size: Sm, testID: 'start-icon' }` | + {}}> + Custom button text +; +``` ---- +### `onPress` -### `startAccessory` +Function to trigger when pressing the button. -Optional prop for a custom element to show at the start of the button. +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `() => void` | Yes | `undefined` | -| TYPE | REQUIRED | DEFAULT | -| :---------- | :------- | :------ | -| `ReactNode` | No | `null` | +```tsx + console.log('Text button pressed')}> + Press me + +``` ---- +### `variant` -### `endIconName` +The visual variant of the text button. -Optional prop to specify an icon to show at the end of the button. +Available variants: -| TYPE | REQUIRED | DEFAULT | -| :--------- | :------- | :------ | -| `IconName` | No | `null` | +- `TextButtonVariant.Primary` +- `TextButtonVariant.Secondary` +- `TextButtonVariant.Link` ---- +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `TextButtonVariant` | No | `TextButtonVariant.Primary` | -### `endIconProps` - -Optional props to pass additional properties to the end icon. +```tsx + {}} +> + Primary Text Button + + {}} +> + Link Text Button + +``` -| TYPE | REQUIRED | DEFAULT | -| :------------------- | :------- | :--------------------------------- | -| `Partial` | No | `{ size: Sm, testID: 'end-icon' }` | +### `size` ---- +The size of the text button. -### `endAccessory` +Available sizes: -Optional prop for a custom element to show at the end of the button. +- `TextButtonSize.Sm` +- `TextButtonSize.Md` +- `TextButtonSize.Lg` -| TYPE | REQUIRED | DEFAULT | -| :---------- | :------- | :------ | -| `ReactNode` | No | `null` | +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `TextButtonSize` | No | `TextButtonSize.Md` | ---- +```tsx + {}} +> + Small Text Button + + {}} +> + Large Text Button + +``` ### `isDisabled` -Optional prop that, when `true`, disables the button. - -| TYPE | REQUIRED | DEFAULT | -| :-------- | :------- | :------ | -| `boolean` | No | `false` | - ---- - -### `isInverse` - -Optional prop to show the inverse state of the button, typically used for buttons on colored backgrounds. - -| TYPE | REQUIRED | DEFAULT | -| :-------- | :------- | :------ | -| `boolean` | No | `false` | - ---- - -### `twClassName` +Whether the text button is disabled. -Optional prop to add `twrnc` overriding class names. +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `boolean` | No | `false` | -| TYPE | REQUIRED | DEFAULT | -| :------- | :------- | :------ | -| `string` | No | `''` | +```tsx + {}} +> + Disabled Text Button + +``` ---- +### `startIconName` -### `style` +Optional icon name to display before the text. -Optional prop to control the style. +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `IconName` | No | `undefined` | -| TYPE | REQUIRED | DEFAULT | -| :--------------------- | :------- | :------ | -| `StyleProp` | No | `null` | +```tsx + {}} +> + Back + +``` ---- +### `endIconName` -## Usage +Optional icon name to display after the text. -### Basic Usage +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `IconName` | No | `undefined` | ```tsx -import React from 'react'; -import TextButton from '@metamask/design-system-react-native'; - - console.log('Pressed!')}>Click Me; + {}} +> + Continue + ``` ---- +### `twClassName` -### Button with Icon +Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to: -```tsx -Go Back -``` - ---- +- Add new styles that don't exist in the default component +- Override the component's default styles when needed -### Button with Spinner +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | ```tsx -Loading... -``` +import { TextButton } from '@metamask/design-system-react-native'; ---- - -### Customizing the Spinner +// Add additional styles + {}} + twClassName="underline" +> + Underlined Text Button + -```tsx - {}} + twClassName="!text-error-100" > - Please wait + Override Text Color ``` ---- - -### Accessibility - -- Use the `accessibilityLabel` prop to provide meaningful labels for assistive technologies. -- Ensure `children` describes the button's purpose or action. - ---- - -### Notes - -- `TextButton` uses the `Text` component as its base to ensure proper inline rendering with other text elements. -- Custom alignment logic is applied to ensure consistent layout of icons and spinners. -- Use `isLoading` to disable user interactions during a loading state. +### `style` ---- +Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -## Contributing +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `StyleProp` | No | `undefined` | -1. Add tests for new features. -2. Update this README for any changes to the API. -3. Follow the design system's coding guidelines. +```tsx +const styles = StyleSheet.Create({ + custom: { + marginVertical: 8, + marginHorizontal: 16, + }, +}); + +export const StyleExample = () => ( + {}} style={styles.custom}> + Custom styled text button + +); +``` ---- +## References -For questions, refer to the [React Native documentation](https://reactnative.dev/docs) or contact the maintainers of the design system. +[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940) diff --git a/packages/design-system-react-native/src/components/temp-components/Blockies/README.md b/packages/design-system-react-native/src/components/temp-components/Blockies/README.md index cfaac5176..e118b5804 100644 --- a/packages/design-system-react-native/src/components/temp-components/Blockies/README.md +++ b/packages/design-system-react-native/src/components/temp-components/Blockies/README.md @@ -1,114 +1,110 @@ # Blockies -The `Blockies` component generates a unique, consistent, and visually distinct icon based on an Ethereum address. It acts as a wrapper around the `Image` component, using [`toDataUrl`](#) to generate a base64-encoded blocky avatar. +Blockies is used to generate unique, consistent blocky avatars based on Ethereum addresses within an interface. ---- - -## Props - -The `Blockies` component accepts the following props: - -### `address` (Required) +```tsx +import { Blockies } from '@metamask/design-system-react-native'; -A string address used as a unique identifier to generate the Blockies avatar. This ensures that the same input always produces the same avatar. +; +``` -| TYPE | REQUIRED | DEFAULT | -| :------- | :------- | :------ | -| `string` | Yes | `N/A` | +## Props ---- +### `address` -### `size` (Optional) +A string address used as a unique identifier to generate the Blockies avatar. -Defines the size of the Blockies avatar in pixels. Defaults to `32`. +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | Yes | `undefined` | -| TYPE | REQUIRED | DEFAULT | -| :------- | :------- | :------ | -| `number` | No | `32` | +```tsx + +``` ---- +### `size` -### Other Props +The size of the Blockies avatar in pixels. -`Blockies` supports all other props from [`Image`](https://reactnative.dev/docs/image) except `source`, `width`, and `height`. This includes: +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `number` | No | `32` | -- **`resizeMode`** – Controls how the image is resized within the container. -- **`style`** – Custom styles for the image. -- **`testID`** – Identifier used for testing purposes. -- Any other valid `ImageProps`. +```tsx + +``` ---- +### `scale` -## Usage +The scale factor for the blocky pattern. -### Basic Usage +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `number` | No | `3` | ```tsx -import React from 'react'; -import Blockies from '@your-library/blockies'; - -const App = () => ; - -export default App; + ``` ---- +### `twClassName` -### Custom Size +Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to: -```tsx -import React from 'react'; -import Blockies from '@your-library/blockies'; +- Add new styles that don't exist in the default component +- Override the component's default styles when needed -const App = () => ; +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | -export default App; +```tsx +import { Blockies } from '@metamask/design-system-react-native'; + +// Add additional styles + + Custom Border + + +// Override default styles + + Rounded Avatar + ``` ---- +### `style` -### Applying Custom Styles +Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -```tsx -import React from 'react'; -import { StyleSheet } from 'react-native'; -import Blockies from '@your-library/blockies'; +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `StyleProp` | No | `undefined` | +```tsx const styles = StyleSheet.create({ - customBlockies: { + custom: { + marginVertical: 8, + marginHorizontal: 16, borderRadius: 10, - borderWidth: 2, - borderColor: 'blue', }, }); -const App = () => ( - +export const StyleExample = () => ( + ); - -export default App; ``` ---- - -## Notes - -- **Unique Avatar Generation:** - `Blockies` ensures each address generates a unique, consistent avatar using [`toDataUrl`](#). -- **Size Customization:** - The `size` prop allows resizing of the avatar while maintaining its resolution. - -- **Extensibility:** - Any additional `Image` props are forwarded to the underlying component for flexibility. - ---- - -## Contributing - -1. Add tests for any new features or modifications. -2. Update this README to reflect any changes in the API. -3. Follow the project's coding guidelines and best practices. - ---- +## References -For further details, refer to the [React Native documentation](https://reactnative.dev/docs/image). +[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940) diff --git a/packages/design-system-react-native/src/components/temp-components/ButtonAnimated/README.md b/packages/design-system-react-native/src/components/temp-components/ButtonAnimated/README.md index c30ba4c8a..5e67ccbca 100644 --- a/packages/design-system-react-native/src/components/temp-components/ButtonAnimated/README.md +++ b/packages/design-system-react-native/src/components/temp-components/ButtonAnimated/README.md @@ -1,59 +1,152 @@ # ButtonAnimated -The `ButtonAnimated` component is a React Native button with scale animation for press interactions. It utilizes `react-native-reanimated` for animations. +ButtonAnimated is used to render animated button elements with scale animations within an interface. + +```tsx +import { ButtonAnimated } from '@metamask/design-system-react-native'; + + console.log('Pressed')}> + Click Me +; +``` ## Props +### `children` + +The content of the ButtonAnimated component. + +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `ReactNode` | Yes | `undefined` | + +```tsx +import { ButtonAnimated } from '@metamask/design-system-react-native'; + + {}}> + Animated Button Content +; +``` + +### `onPress` + +Function to trigger when pressing the button. + +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `() => void` | Yes | `undefined` | + +```tsx + console.log('Button pressed')}> + Press me + +``` + ### `onPressIn` Callback function triggered when the button is pressed in. -| **Type** | **Required** | **Default** | -| ---------- | ------------ | ----------- | -| `function` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `() => void` | No | `undefined` | + +```tsx + {}} + onPressIn={() => console.log('Pressed in')} +> + Button with Press In + +``` ### `onPressOut` Callback function triggered when the button is released. -| **Type** | **Required** | **Default** | -| ---------- | ------------ | ----------- | -| `function` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `() => void` | No | `undefined` | + +```tsx + {}} + onPressOut={() => console.log('Pressed out')} +> + Button with Press Out + +``` ### `disabled` -Disables button interactions when set to `true`. +Whether the button is disabled. -| **Type** | **Required** | **Default** | -| --------- | ------------ | ----------- | -| `boolean` | No | `false` | +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `boolean` | No | `false` | -### `...props` +```tsx + {}} + disabled +> + Disabled Button + +``` + +### `twClassName` -Additional props passed to the underlying `Pressable` component. +Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to: -## Usage +- Add new styles that don't exist in the default component +- Override the component's default styles when needed + +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | ```tsx -import React from 'react'; -import ButtonAnimated from './ButtonAnimated'; +import { ButtonAnimated } from '@metamask/design-system-react-native'; + +// Add additional styles + {}} + twClassName="bg-primary-100" +> + Custom Background + + +// Override default styles + {}} + twClassName="!bg-error-100" +> + Override Background + +``` -const App = () => { - return ( - console.log('Pressed In')} - onPressOut={() => console.log('Pressed Out')} - disabled={false} - > - Click Me - - ); -}; +### `style` -export default App; +Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. + +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `StyleProp` | No | `undefined` | + +```tsx +const styles = StyleSheet.create({ + custom: { + marginVertical: 8, + marginHorizontal: 16, + }, +}); + +export const StyleExample = () => ( + {}} style={styles.custom}> + Custom styled animated button + +); ``` -## Notes +## References -- The `ButtonAnimated` component supports scaling animations on press. -- Ensure to wrap the component in an appropriate layout or container for proper spacing. +[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940) diff --git a/packages/design-system-react-native/src/components/temp-components/ImageOrSvg/README.md b/packages/design-system-react-native/src/components/temp-components/ImageOrSvg/README.md index cdf89f3d6..8a1ac20cd 100644 --- a/packages/design-system-react-native/src/components/temp-components/ImageOrSvg/README.md +++ b/packages/design-system-react-native/src/components/temp-components/ImageOrSvg/README.md @@ -1,179 +1,158 @@ # ImageOrSvg -The `ImageOrSvg` component is a flexible image component that supports local and remote images, as well as local and remote SVGs, ensuring proper rendering in React Native applications. +ImageOrSvg is used to render flexible image and SVG elements within an interface. ---- +```tsx +import { ImageOrSvg } from '@metamask/design-system-react-native'; + +; +``` ## Props -### `src` (Required) +### `src` -The source of the image or SVG. It determines whether a local image, a local SVG component, or a remote image/SVG (via URI) is rendered. +The source of the image or SVG to render. -| TYPE | REQUIRED | DEFAULT | -| :------------------------------------------------------ | :------- | :------ | -| `number \| ComponentType \| { uri?: string }` | Yes | `N/A` | +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `number \| ComponentType \| { uri?: string }` | Yes | `undefined` | ---- +```tsx + + +``` ### `width` -Optional prop to set the width of the image/SVG. -Accepts numbers (pixels) or string values (like percentages). +The width of the image or SVG. -| TYPE | REQUIRED | DEFAULT | -| :----------------- | :------- | :------ | -| `number \| string` | No | `N/A` | +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `number \| string` | No | `undefined` | ---- +```tsx + +``` ### `height` -Optional prop to set the height of the image/SVG. -Accepts numbers (pixels) or string values (like percentages). +The height of the image or SVG. -| TYPE | REQUIRED | DEFAULT | -| :----------------- | :------- | :------ | -| `number \| string` | No | `N/A` | +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `number \| string` | No | `undefined` | ---- +```tsx + +``` ### `onImageLoad` -Optional callback triggered when the image has loaded successfully. +Callback triggered when the image has loaded successfully. -| TYPE | REQUIRED | DEFAULT | -| :---------------------------------------------------------- | :------- | :------ | -| `(event: NativeSyntheticEvent) => void` | No | `N/A` | +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `(event: NativeSyntheticEvent) => void` | No | `undefined` | ---- +```tsx + console.log('Image loaded')} +/> +``` ### `onImageError` -Optional callback triggered when there is an error rendering the image. +Callback triggered when there is an error loading the image. -| TYPE | REQUIRED | DEFAULT | -| :---------------------------------------------------------------- | :------- | :------ | -| `(errorEvent: NativeSyntheticEvent) => void` | No | `N/A` | +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `(errorEvent: NativeSyntheticEvent) => void` | No | `undefined` | ---- +```tsx + console.log('Image error')} +/> +``` ### `onSvgError` -Optional callback triggered when there is an error rendering the SVG. - -| TYPE | REQUIRED | DEFAULT | -| :----------------------- | :------- | :------ | -| `(error: Error) => void` | No | `N/A` | - ---- - -### `style` - -Optional prop for style overrides for the image/SVG container. - -| TYPE | REQUIRED | DEFAULT | -| :---------------------- | :------- | :------ | -| `StyleProp` | No | `null` | - ---- - -### `imageProps` - -Additional props to pass to the `Image` component, excluding the `source` prop (which is handled separately). - -| TYPE | REQUIRED | DEFAULT | -| :--------------------------- | :------- | :------ | -| `Omit` | No | `{}` | - ---- +Callback triggered when there is an error loading the SVG. -### `svgProps` - -Additional props to pass to the `Svg` component, excluding the `uri` prop (which is handled separately). - -| TYPE | REQUIRED | DEFAULT | -| :---------------------- | :------- | :------ | -| `Omit` | No | `{}` | - ---- - -## Usage - -### Basic Usage +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `(error: Error) => void` | No | `undefined` | ```tsx -import React from 'react'; -import ImageOrSvg from '@metamask/design-system-react-native'; - -; + console.log('SVG error')} +/> ``` ---- - -### Local Image - -```tsx -import React from 'react'; -import { ImageOrSvg } from '@metamask/design-system-react-native'; -import localImage from '../assets/image.png'; +### `twClassName` -; -``` +Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to: ---- +- Add new styles that don't exist in the default component +- Override the component's default styles when needed -### Local SVG +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | ```tsx -import React from 'react'; import { ImageOrSvg } from '@metamask/design-system-react-native'; -import LocalSvg from '../assets/icon.svg'; - -; -``` - ---- -### Handling Errors +// Add additional styles + + Custom Border + -```tsx - console.log('Image failed to load')} - onSvgError={() => console.log('SVG failed to load')} -/> +// Override default styles + + Rounded Image + ``` ---- - -### Accessibility - -- Use meaningful `alt` descriptions for SVGs and images when possible. -- Ensure proper fallback strategies for failed image/SVG loads. - ---- - -### Notes - -- `ImageOrSvg` detects content type dynamically for remote sources. -- Local and remote images and SVGs are supported without additional dependencies. -- Uses `fetch` to determine if a URI corresponds to an SVG when necessary. +### `style` ---- +Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -## Contributing +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `StyleProp` | No | `undefined` | -1. Add tests for new features. -2. Update this README for any changes to the API. -3. Follow the design system's coding guidelines. +```tsx +const styles = StyleSheet.create({ + custom: { + marginVertical: 8, + marginHorizontal: 16, + }, +}); + +export const StyleExample = () => ( + +); +``` ---- +## References -For questions, refer to the [React Native documentation](https://reactnative.dev/docs) or contact the maintainers of the design system. +[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940) diff --git a/packages/design-system-react-native/src/components/temp-components/Jazzicon/README.md b/packages/design-system-react-native/src/components/temp-components/Jazzicon/README.md index ac6c6c032..3e2c6d0bd 100644 --- a/packages/design-system-react-native/src/components/temp-components/Jazzicon/README.md +++ b/packages/design-system-react-native/src/components/temp-components/Jazzicon/README.md @@ -1,132 +1,116 @@ # Jazzicon -The `Jazzicon` component is a lightweight wrapper around [`react-native-jazzicon`](https://github.com/novinyll/react-native-jazzicon) that provides an easy-to-use interface for rendering unique, visually appealing icons based on a seed or address value. This component is especially useful for representing users, tokens, or any entities where a consistent yet unique icon is desired. +Jazzicon is used to render unique, visually appealing identicon avatars based on seed or address values within an interface. ---- - -## Props - -The `Jazzicon` component accepts all props provided by [`react-native-jazzicon`](#). The key props include: - -### `size` (Optional) - -Defines the size of the Jazzicon in pixels. - -| TYPE | REQUIRED | DEFAULT | -| :------- | :------- | :---------- | -| `number` | No | `undefined` | - ---- - -### `address` (Optional) +```tsx +import { Jazzicon } from '@metamask/design-system-react-native'; -A string address used as a unique identifier to generate the Jazzicon. This provides a consistent and visually unique icon. +; +``` -| TYPE | REQUIRED | DEFAULT | -| :------- | :------- | :---------- | -| `string` | No | `undefined` | +## Props ---- +### `size` -### `seed` (Optional) +The size of the Jazzicon in pixels. -A unique numeric value used to generate a consistent and unique icon. If both `address` and `seed` are provided, `address` takes precedence. +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `number` | No | `40` | -| TYPE | REQUIRED | DEFAULT | -| :------- | :------- | :---------- | -| `number` | No | `undefined` | +```tsx + +``` ---- +### `address` -### `containerStyle` (Optional) +A string address used as a unique identifier to generate the Jazzicon. -Allows customization of the container's style using a React Native `StyleProp`. +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | -| TYPE | REQUIRED | DEFAULT | -| :--------------------- | :------- | :---------- | -| `StyleProp` | No | `undefined` | +```tsx + +``` ---- +### `seed` -### Other Props +A unique numeric value used to generate a consistent and unique icon. -`Jazzicon` supports all other properties available in [`react-native-jazzicon`](#), such as: +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `number` | No | `undefined` | -- **`testID`** – Identifier used for testing purposes. -- Any additional props will be forwarded to the underlying `RNJazzicon` component. +```tsx + +``` ---- +### `diameter` -## Usage +Alternative prop for size (for compatibility with react-native-jazzicon). -### Basic Usage +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `number` | No | `undefined` | ```tsx -import React from 'react'; -import Jazzicon from '@your-library/jazzicon'; - -const App = () => ; - -export default App; + ``` ---- +### `twClassName` -### Using an Address +Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to: -```tsx -import React from 'react'; -import Jazzicon from '@your-library/jazzicon'; +- Add new styles that don't exist in the default component +- Override the component's default styles when needed -const App = () => ; +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | -export default App; +```tsx +import { Jazzicon } from '@metamask/design-system-react-native'; + +// Add additional styles + + Custom Border + + +// Override default styles + + Rounded Jazzicon + ``` ---- +### `style` -### Customizing the Container Style +Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -```tsx -import React from 'react'; -import { StyleSheet } from 'react-native'; -import Jazzicon from '@your-library/jazzicon'; +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `StyleProp` | No | `undefined` | +```tsx const styles = StyleSheet.create({ - container: { + custom: { + marginVertical: 8, + marginHorizontal: 16, borderRadius: 10, - padding: 5, - backgroundColor: 'lightgrey', }, }); -const App = () => ( - +export const StyleExample = () => ( + ); - -export default App; ``` ---- - -## Notes - -- **Wrapper Functionality:** - `Jazzicon` is a thin wrapper around [`react-native-jazzicon`](#), ensuring that all props are seamlessly passed through to the underlying component. -- **Key Props:** - The `address` or `seed` prop is essential for generating a unique icon, while the `size` defines its dimensions. The optional `containerStyle` prop provides additional styling. - -- **Extensibility:** - Any prop supported by `react-native-jazzicon` can be applied to `Jazzicon`, making it flexible for various use cases. - ---- - -## Contributing - -1. Add tests for any new features or modifications. -2. Update this README to reflect any changes in the API. -3. Follow the project's coding guidelines and best practices. - ---- +## References -For further details, please refer to the [React Native documentation](https://reactnative.dev/docs) or the [`react-native-jazzicon` documentation](https://github.com/novinyll/react-native-jazzicon). +[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940) diff --git a/packages/design-system-react-native/src/components/temp-components/Maskicon/README.md b/packages/design-system-react-native/src/components/temp-components/Maskicon/README.md index 05f45c173..f0a989261 100644 --- a/packages/design-system-react-native/src/components/temp-components/Maskicon/README.md +++ b/packages/design-system-react-native/src/components/temp-components/Maskicon/README.md @@ -1,140 +1,112 @@ # Maskicon -The `Maskicon` component renders a unique SVG identicon derived from a blockchain address. It supports Ethereum and other address formats (e.g., Solana, Bitcoin), and generates consistent visuals using a hash-based algorithm and a fixed color palette. +Maskicon is used to render unique SVG identicons derived from blockchain addresses within an interface. ---- +```tsx +import { Maskicon } from '@metamask/design-system-react-native'; + +; +``` ## Props -### `address` (Required) +### `address` The blockchain address used as the seed to generate the Maskicon. -| TYPE | REQUIRED | DESCRIPTION | -| -------- | -------- | ----------------------------------------------- | -| `string` | Yes | Blockchain address for generating the identicon | +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | Yes | `undefined` | ---- +```tsx + +``` ### `size` -Optional prop to control the size (width and height) of the Maskicon. - -| TYPE | REQUIRED | DEFAULT | -| -------- | -------- | ------- | -| `number` | No | `32` | - ---- - -### Additional Props - -Any other props passed to the component will be forwarded to the underlying `SvgXml` element. +The size (width and height) of the Maskicon. -| TYPE | DESCRIPTION | -| ---------- | -------------------------------- | -| `SvgProps` | Custom styling and accessibility | - ---- - -## Usage - -### Basic Usage +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `number` | No | `32` | ```tsx -import Maskicon from '@metamask/design-system-react-native'; - -; + ``` ---- +### `showBorder` -### Custom Size +Whether to show a border around the Maskicon. + +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `boolean` | No | `false` | ```tsx - + ``` ---- - -## Internals - -The Maskicon is generated using the following steps: - -1. **Address Namespace Detection** +### `twClassName` - - Detects address type (Ethereum, Solana, Bitcoin, etc.) via the `getCaipNamespaceFromAddress` function. +Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to: -2. **Seed Generation** +- Add new styles that don't exist in the default component +- Override the component's default styles when needed - - Ethereum addresses generate numeric seeds via `generateSeedEthereum`. - - Other address types generate byte-array seeds via `generateSeedNonEthereum`. +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | -3. **Visual Hashing** - - - Seed is converted to a string and hashed using `sdbmHash`. - - A consistent color pair is selected from a predefined color palette. - - SVG path shapes are determined by the hash to fill a 2x2 grid. - -4. **Caching** - - - Identicons are cached per `(address:size)` to avoid recomputation. - -5. **Rendering** - - An SVG string is constructed and rendered using `SvgXml`. - ---- - -## Color Pair Categories - -Color pairings are designed to provide variety and distinguishability: - -- **Neutral Pairs**: Basic contrast like orange on white or purple on black. -- **Tonal Pairs**: Tints and shades of the same hue. -- **Complementary Pairs**: Visually opposite hues like purple and green. - ---- - -## Accessibility +```tsx +import { Maskicon } from '@metamask/design-system-react-native'; + +// Add additional styles + + Custom Border + + +// Override default styles + + Rounded Maskicon + +``` -- The `Maskicon` is rendered via `SvgXml` which supports `accessibilityLabel` and other `SvgProps`. -- Use `accessibilityLabel` if a description is needed for screen readers. +### `style` ---- +Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -## Example with Multiple Addresses +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `StyleProp` | No | `undefined` | ```tsx -const addresses = [ - '0x50cA820Ff810F7687E7d0aDb23A830e3ac6032C3', - '0x8AceA3A9748294d1B5C25a08EFE37b756AafDFdd', - '0xEC5CE72f2e18B0017C88F7B12d3308119C5Cf129', -]; - -return ( - - {addresses.map((addr) => ( - - ))} - +const styles = StyleSheet.create({ + custom: { + marginVertical: 8, + marginHorizontal: 16, + }, +}); + +export const StyleExample = () => ( + ); ``` ---- - -## Notes - -- Deterministic identicons: same address always produces the same visual. -- Custom color pairs can be extended by modifying the internal `colorPairs` array. -- The `createMaskiconSVG` function is also exported for standalone usage. - ---- - -## Contributing - -1. Add or update test cases for new logic (e.g., color pair updates). -2. Update this README if the visual generation logic changes. -3. Follow best practices for accessibility when rendering SVGs. - ---- +## References -For more guidance, refer to the [React Native SVG documentation](https://github.com/software-mansion/react-native-svg) or the internal design system usage policies. +[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940) diff --git a/packages/design-system-react-native/src/components/temp-components/Spinner/README.md b/packages/design-system-react-native/src/components/temp-components/Spinner/README.md index 49b441707..4ce8ea72f 100644 --- a/packages/design-system-react-native/src/components/temp-components/Spinner/README.md +++ b/packages/design-system-react-native/src/components/temp-components/Spinner/README.md @@ -1,85 +1,76 @@ # Spinner -The `Spinner` component is a loading indicator designed for React Native applications. It displays a spinning icon, optionally accompanied by text, to indicate a loading state. +Spinner is used to render loading indicators within an interface. -## Props +```tsx +import { Spinner } from '@metamask/design-system-react-native'; -### `color` +; +``` -Optional prop that sets the color of the spinner icon using predefined theme colors. +## Props -| TYPE | REQUIRED | DEFAULT | -| :---------- | :------- | :---------------------- | -| `IconColor` | No | `IconColor.IconDefault` | +### `color` -Available `IconColor` options include: +The color of the spinner icon. -- `IconDefault` -- `PrimaryDefault` -- `SuccessDefault` -- `ErrorDefault` -- ...and more, as defined in the `IconColor` enum. +Available colors: -### `loadingText` +- `IconColor.IconDefault` +- `IconColor.IconPrimary` +- `IconColor.IconSuccess` +- `IconColor.IconError` +- `IconColor.IconWarning` -Optional text to display to the right of the spinner, providing additional context or information about the loading state. +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `IconColor` | No | `IconColor.IconDefault` | -| TYPE | REQUIRED | DEFAULT | -| :------- | :------- | :------ | -| `string` | No | `null` | - -### `loadingTextProps` +```tsx + +``` -Optional props to customize the appearance of the `loadingText`. These are passed directly to the `Text` component. +### `size` -| TYPE | REQUIRED | DEFAULT | -| :------------------- | :------- | :------ | -| `Partial` | No | `{}` | +The size of the spinner. ---- +Available sizes: -## Usage +- `SpinnerSize.Sm` +- `SpinnerSize.Md` +- `SpinnerSize.Lg` -### Basic Usage +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `SpinnerSize` | No | `SpinnerSize.Md` | ```tsx -import React from 'react'; -import Spinner from '@metamask/design-system-react-native'; - -// Render a spinner with default settings -; + ``` -### Customizing the Spinner Color +### `loadingText` -```tsx - -``` +Optional text to display next to the spinner. -### Adding Loading Text +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | ```tsx ``` -### Customizing the Loading Text +### `loadingTextProps` -```tsx - -``` +Optional props to customize the loading text appearance. -### Combining Props +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `Partial` | No | `undefined` | ```tsx - ``` ---- +### `twClassName` -## Accessibility +Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to: -- Ensure the `loadingText` prop provides meaningful information about the loading state for users of assistive technologies. -- Use the `loadingTextProps` to set accessibility roles or labels if needed. +- Add new styles that don't exist in the default component +- Override the component's default styles when needed ---- +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | -## Notes +```tsx +import { Spinner } from '@metamask/design-system-react-native'; -- The `Spinner` component uses `react-native-reanimated` for smooth animations. -- The spinning icon animation is implemented using `useSharedValue` and `useAnimatedStyle`. -- For custom styling of the spinner, use the `Icon` component directly if necessary. +// Add additional styles + + Semi-transparent Spinner + ---- +// Override default styles + + Override Color + +``` -## Contributing +### `style` -When contributing to the `Spinner` component: +Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -1. Ensure any new features or props are accompanied by tests. -2. Update this README file to document the changes. -3. Maintain consistency with the design system's guidelines. +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `StyleProp` | No | `undefined` | + +```tsx +const styles = StyleSheet.create({ + custom: { + marginVertical: 8, + marginHorizontal: 16, + }, +}); + +export const StyleExample = () => ( + +); +``` ---- +## References -For questions or further assistance, refer to the [React Native documentation](https://reactnative.dev/docs) or contact the maintainers of the design system. +[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940) diff --git a/packages/design-system-react-native/src/components/temp-components/TextOrChildren/README.md b/packages/design-system-react-native/src/components/temp-components/TextOrChildren/README.md index 87fa542ff..000aeb68f 100644 --- a/packages/design-system-react-native/src/components/temp-components/TextOrChildren/README.md +++ b/packages/design-system-react-native/src/components/temp-components/TextOrChildren/README.md @@ -1,87 +1,102 @@ # TextOrChildren -The `TextOrChildren` component is a utility component that provides flexibility to render either a `Text` component when the `children` prop is a string or render the provided child components directly. +TextOrChildren is used to render either text or child components flexibly within an interface. -## Props - -### `children` - -**Required**. Specifies the content to render. If the `children` is a string, it will render as a `Text` component with optional `textProps`. Otherwise, the child components are rendered directly. - -| TYPE | REQUIRED | -| :---------------- | :------- | -| `React.ReactNode` | Yes | - -### `textProps` +```tsx +import { TextOrChildren } from '@metamask/design-system-react-native'; -Optional props to configure the `Text` component when `children` is a string. This prop is ignored if `children` is not a string. +String Content; +``` -| TYPE | REQUIRED | DEFAULT | -| :------------------------------------- | :------- | :------ | -| `Partial>` | No | `{}` | +## Props ---- +### `children` -## Usage +The content to render. If a string, renders as Text component; otherwise renders child components directly. -### Basic Usage +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `ReactNode` | Yes | `undefined` | ```tsx -import React from 'react'; -import TextOrChildren from '@metamask/design-system-react-native/lib/components/TextOrChildren'; +import { TextOrChildren } from '@metamask/design-system-react-native'; // Render string as Text component -String Content; +String Content // Render nested children directly Nested Content -; + ``` -### With `textProps` +### `textProps` + +Optional props to configure the Text component when children is a string. + +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `Partial>` | No | `undefined` | ```tsx Styled Text ``` -### Handling Conditional Rendering - -```tsx - - {condition ? 'This is a string' : } - -``` +### `twClassName` ---- +Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to: -## Notes +- Add new styles that don't exist in the default component +- Override the component's default styles when needed -- The `TextOrChildren` component ensures that string content adheres to consistent typography by wrapping it in the `Text` component. -- When using `textProps`, ensure the props are valid for the `Text` component. -- If `children` is not a string, all other props are ignored, and the child components are rendered as-is. +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `string` | No | `undefined` | ---- +```tsx +import { TextOrChildren } from '@metamask/design-system-react-native'; -## Accessibility +// Add additional styles + + Centered Content + -- The `Text` component renders with appropriate accessibility props (e.g., `accessibilityRole="text"`) for string content. -- Ensure any custom child components used with `TextOrChildren` have appropriate accessibility attributes. +// Override default styles + + Override Text Color + +``` ---- +### `style` -## Contributing +Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -When contributing to the `TextOrChildren` component: +| TYPE | REQUIRED | DEFAULT | +|------|----------|---------| +| `StyleProp` | No | `undefined` | -1. Add tests for any new functionality or props. -2. Update the README file to reflect changes. -3. Maintain consistency with the design system's guidelines. +```tsx +const styles = StyleSheet.create({ + custom: { + marginVertical: 8, + marginHorizontal: 16, + }, +}); + +export const StyleExample = () => ( + + Custom styled content + +); +``` ---- +## References -For questions or further assistance, refer to the [React Native Text documentation](https://reactnative.dev/docs/text) or contact the maintainers of the design system. +[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940) From 8fde1502d4d9155a13ea94cad6ee7b6d396c602e Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Fri, 18 Jul 2025 16:31:00 -0700 Subject: [PATCH 2/9] chore: update component READMEs with consistent structure and improved documentation --- .../src/components/AvatarAccount/README.md | 64 ++++----- .../src/components/AvatarBase/README.md | 36 ++--- .../src/components/AvatarFavicon/README.md | 40 +++--- .../src/components/AvatarGroup/README.md | 37 ++--- .../src/components/AvatarIcon/README.md | 45 +++---- .../src/components/AvatarNetwork/README.md | 47 +++---- .../src/components/AvatarToken/README.md | 47 +++---- .../src/components/BadgeCount/README.md | 34 ++--- .../src/components/BadgeIcon/README.md | 34 ++--- .../src/components/BadgeNetwork/README.md | 36 ++--- .../src/components/BadgeStatus/README.md | 39 +++--- .../src/components/BadgeWrapper/README.md | 43 +++--- .../src/components/Box/README.md | 64 ++++----- .../src/components/Button/README.md | 127 +++++++----------- .../src/components/ButtonBase/README.md | 56 ++++---- .../src/components/ButtonIcon/README.md | 91 ++++++------- .../src/components/Checkbox/README.md | 89 +++++------- .../src/components/Icon/README.md | 34 ++--- .../src/components/Text/README.md | 42 +++--- .../src/components/TextButton/README.md | 89 ++++++------ .../temp-components/Blockies/README.md | 44 +++--- .../temp-components/ButtonAnimated/README.md | 62 ++++----- .../temp-components/ImageOrSvg/README.md | 70 +++++----- .../temp-components/Jazzicon/README.md | 44 +++--- .../temp-components/Maskicon/README.md | 46 +++---- .../temp-components/Spinner/README.md | 42 +++--- .../temp-components/TextOrChildren/README.md | 34 +++-- 27 files changed, 653 insertions(+), 783 deletions(-) diff --git a/packages/design-system-react-native/src/components/AvatarAccount/README.md b/packages/design-system-react-native/src/components/AvatarAccount/README.md index f05d48ceb..2d057ff9a 100644 --- a/packages/design-system-react-native/src/components/AvatarAccount/README.md +++ b/packages/design-system-react-native/src/components/AvatarAccount/README.md @@ -14,9 +14,9 @@ import { AvatarAccount } from '@metamask/design-system-react-native'; Required address used as a unique identifier to generate the AvatarAccount art. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `string` | Yes | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ----------- | +| `string` | Yes | `undefined` | ```tsx @@ -32,12 +32,12 @@ Available variants: - `AvatarAccountVariant.Blockies` - `AvatarAccountVariant.Maskicon` -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `AvatarAccountVariant` | No | `AvatarAccountVariant.Jazzicon` | +| TYPE | REQUIRED | DEFAULT | +| ---------------------- | -------- | ------------------------------- | +| `AvatarAccountVariant` | No | `AvatarAccountVariant.Jazzicon` | ```tsx - @@ -55,12 +55,12 @@ Available sizes: - `AvatarSize.Lg` (40px) - `AvatarSize.Xl` (48px) -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `AvatarSize` | No | `AvatarSize.Md` | +| TYPE | REQUIRED | DEFAULT | +| ------------ | -------- | --------------- | +| `AvatarSize` | No | `AvatarSize.Md` | ```tsx - @@ -70,12 +70,12 @@ Available sizes: Optional props to be passed to the Blockies component when the variant is Blockies. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `Partial` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| ------------------------ | -------- | ----------- | +| `Partial` | No | `undefined` | ```tsx -` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| ------------------------ | -------- | ----------- | +| `Partial` | No | `undefined` | ```tsx -` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| ------------------------ | -------- | ----------- | +| `Partial` | No | `undefined` | ```tsx - @@ -137,7 +137,7 @@ import { AvatarAccount } from '@metamask/design-system-react-native'; // Override default styles - @@ -149,9 +149,9 @@ import { AvatarAccount } from '@metamask/design-system-react-native'; Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `StyleProp` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| ---------------------- | -------- | ----------- | +| `StyleProp` | No | `undefined` | ```tsx const styles = StyleSheet.create({ @@ -162,7 +162,7 @@ const styles = StyleSheet.create({ }); export const StyleExample = () => ( - diff --git a/packages/design-system-react-native/src/components/AvatarBase/README.md b/packages/design-system-react-native/src/components/AvatarBase/README.md index 8718a6206..8fc7b8e77 100644 --- a/packages/design-system-react-native/src/components/AvatarBase/README.md +++ b/packages/design-system-react-native/src/components/AvatarBase/README.md @@ -22,9 +22,9 @@ Available sizes: - `AvatarSize.Lg` (40px) - `AvatarSize.Xl` (48px) -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `AvatarSize` | No | `AvatarSize.Md` | +| TYPE | REQUIRED | DEFAULT | +| ------------ | -------- | --------------- | +| `AvatarSize` | No | `AvatarSize.Md` | ```tsx Small Avatar @@ -36,9 +36,9 @@ Available sizes: The content of the AvatarBase component. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `ReactNode` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| ----------- | -------- | ----------- | +| `ReactNode` | No | `undefined` | ```tsx import { AvatarBase } from '@metamask/design-system-react-native'; @@ -50,9 +50,9 @@ import { AvatarBase } from '@metamask/design-system-react-native'; Background color of the avatar. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `BackgroundColor` | No | `BackgroundColor.BackgroundAlternative` | +| TYPE | REQUIRED | DEFAULT | +| ----------------- | -------- | --------------------------------------- | +| `BackgroundColor` | No | `BackgroundColor.BackgroundAlternative` | ```tsx @@ -64,9 +64,9 @@ Background color of the avatar. Border color of the avatar. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `BorderColor` | No | `BorderColor.BorderDefault` | +| TYPE | REQUIRED | DEFAULT | +| ------------- | -------- | --------------------------- | +| `BorderColor` | No | `BorderColor.BorderDefault` | ```tsx @@ -81,9 +81,9 @@ Use the `twClassName` prop to add Tailwind CSS classes to the component. These c - Add new styles that don't exist in the default component - Override the component's default styles when needed -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `string` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ----------- | +| `string` | No | `undefined` | ```tsx import { AvatarBase } from '@metamask/design-system-react-native'; @@ -103,9 +103,9 @@ import { AvatarBase } from '@metamask/design-system-react-native'; Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `StyleProp` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| ---------------------- | -------- | ----------- | +| `StyleProp` | No | `undefined` | ```tsx const styles = StyleSheet.create({ diff --git a/packages/design-system-react-native/src/components/AvatarFavicon/README.md b/packages/design-system-react-native/src/components/AvatarFavicon/README.md index 6a78b16d1..78fa08168 100644 --- a/packages/design-system-react-native/src/components/AvatarFavicon/README.md +++ b/packages/design-system-react-native/src/components/AvatarFavicon/README.md @@ -14,9 +14,9 @@ import { AvatarFavicon } from '@metamask/design-system-react-native'; The image source for the favicon. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `ImageSourcePropType` | Yes | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| --------------------- | -------- | ----------- | +| `ImageSourcePropType` | Yes | `undefined` | ```tsx @@ -34,12 +34,12 @@ Available sizes: - `AvatarSize.Lg` (40px) - `AvatarSize.Xl` (48px) -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `AvatarSize` | No | `AvatarSize.Md` | +| TYPE | REQUIRED | DEFAULT | +| ------------ | -------- | --------------- | +| `AvatarSize` | No | `AvatarSize.Md` | ```tsx - @@ -49,12 +49,12 @@ Available sizes: Text to display when the image fails to load. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `string` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ----------- | +| `string` | No | `undefined` | ```tsx - @@ -67,15 +67,15 @@ Use the `twClassName` prop to add Tailwind CSS classes to the component. These c - Add new styles that don't exist in the default component - Override the component's default styles when needed -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `string` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ----------- | +| `string` | No | `undefined` | ```tsx import { AvatarFavicon } from '@metamask/design-system-react-native'; // Add additional styles - @@ -83,7 +83,7 @@ import { AvatarFavicon } from '@metamask/design-system-react-native'; // Override default styles - @@ -95,9 +95,9 @@ import { AvatarFavicon } from '@metamask/design-system-react-native'; Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `StyleProp` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| ---------------------- | -------- | ----------- | +| `StyleProp` | No | `undefined` | ```tsx const styles = StyleSheet.create({ @@ -108,7 +108,7 @@ const styles = StyleSheet.create({ }); export const StyleExample = () => ( - diff --git a/packages/design-system-react-native/src/components/AvatarGroup/README.md b/packages/design-system-react-native/src/components/AvatarGroup/README.md index bd7c34758..56d611aef 100644 --- a/packages/design-system-react-native/src/components/AvatarGroup/README.md +++ b/packages/design-system-react-native/src/components/AvatarGroup/README.md @@ -17,27 +17,30 @@ import { AvatarGroup } from '@metamask/design-system-react-native'; The avatar components to display in the group. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `ReactNode` | Yes | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| ----------- | -------- | ----------- | +| `ReactNode` | Yes | `undefined` | ```tsx -import { AvatarGroup, AvatarAccount } from '@metamask/design-system-react-native'; +import { + AvatarGroup, + AvatarAccount, +} from '@metamask/design-system-react-native'; - +; ``` ### `maxAvatars` Maximum number of avatars to display before showing overflow indicator. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `number` | No | `4` | +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ------- | +| `number` | No | `4` | ```tsx @@ -52,9 +55,9 @@ Maximum number of avatars to display before showing overflow indicator. Spacing between avatars in the group. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `number` | No | `-8` | +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ------- | +| `number` | No | `-8` | ```tsx @@ -70,9 +73,9 @@ Use the `twClassName` prop to add Tailwind CSS classes to the component. These c - Add new styles that don't exist in the default component - Override the component's default styles when needed -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `string` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ----------- | +| `string` | No | `undefined` | ```tsx import { AvatarGroup } from '@metamask/design-system-react-native'; @@ -92,9 +95,9 @@ import { AvatarGroup } from '@metamask/design-system-react-native'; Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `StyleProp` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| ---------------------- | -------- | ----------- | +| `StyleProp` | No | `undefined` | ```tsx const styles = StyleSheet.create({ diff --git a/packages/design-system-react-native/src/components/AvatarIcon/README.md b/packages/design-system-react-native/src/components/AvatarIcon/README.md index 89462f535..65640b891 100644 --- a/packages/design-system-react-native/src/components/AvatarIcon/README.md +++ b/packages/design-system-react-native/src/components/AvatarIcon/README.md @@ -14,9 +14,9 @@ import { AvatarIcon } from '@metamask/design-system-react-native'; The icon name to display in the avatar. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `IconName` | Yes | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| ---------- | -------- | ----------- | +| `IconName` | Yes | `undefined` | ```tsx @@ -34,9 +34,9 @@ Available sizes: - `AvatarSize.Lg` (40px) - `AvatarSize.Xl` (48px) -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `AvatarSize` | No | `AvatarSize.Md` | +| TYPE | REQUIRED | DEFAULT | +| ------------ | -------- | --------------- | +| `AvatarSize` | No | `AvatarSize.Md` | ```tsx @@ -48,9 +48,9 @@ Available sizes: Color of the icon within the avatar. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `IconColor` | No | `IconColor.IconDefault` | +| TYPE | REQUIRED | DEFAULT | +| ----------- | -------- | ----------------------- | +| `IconColor` | No | `IconColor.IconDefault` | ```tsx @@ -60,15 +60,12 @@ Color of the icon within the avatar. Background color of the avatar. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `BackgroundColor` | No | `BackgroundColor.BackgroundAlternative` | +| TYPE | REQUIRED | DEFAULT | +| ----------------- | -------- | --------------------------------------- | +| `BackgroundColor` | No | `BackgroundColor.BackgroundAlternative` | ```tsx - + ``` ### `twClassName` @@ -78,15 +75,15 @@ Use the `twClassName` prop to add Tailwind CSS classes to the component. These c - Add new styles that don't exist in the default component - Override the component's default styles when needed -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `string` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ----------- | +| `string` | No | `undefined` | ```tsx import { AvatarIcon } from '@metamask/design-system-react-native'; // Add additional styles - @@ -94,7 +91,7 @@ import { AvatarIcon } from '@metamask/design-system-react-native'; // Override default styles - @@ -106,9 +103,9 @@ import { AvatarIcon } from '@metamask/design-system-react-native'; Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `StyleProp` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| ---------------------- | -------- | ----------- | +| `StyleProp` | No | `undefined` | ```tsx const styles = StyleSheet.create({ diff --git a/packages/design-system-react-native/src/components/AvatarNetwork/README.md b/packages/design-system-react-native/src/components/AvatarNetwork/README.md index 5fef77e1c..5cedc707b 100644 --- a/packages/design-system-react-native/src/components/AvatarNetwork/README.md +++ b/packages/design-system-react-native/src/components/AvatarNetwork/README.md @@ -14,9 +14,9 @@ import { AvatarNetwork } from '@metamask/design-system-react-native'; The network name for the avatar. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `string` | Yes | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ----------- | +| `string` | Yes | `undefined` | ```tsx @@ -34,9 +34,9 @@ Available sizes: - `AvatarSize.Lg` (40px) - `AvatarSize.Xl` (48px) -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `AvatarSize` | No | `AvatarSize.Md` | +| TYPE | REQUIRED | DEFAULT | +| ------------ | -------- | --------------- | +| `AvatarSize` | No | `AvatarSize.Md` | ```tsx @@ -48,12 +48,12 @@ Available sizes: Custom image source for the network avatar. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `ImageSourcePropType` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| --------------------- | -------- | ----------- | +| `ImageSourcePropType` | No | `undefined` | ```tsx - @@ -63,15 +63,12 @@ Custom image source for the network avatar. Text to display when the network image fails to load. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `string` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ----------- | +| `string` | No | `undefined` | ```tsx - + ``` ### `twClassName` @@ -81,15 +78,15 @@ Use the `twClassName` prop to add Tailwind CSS classes to the component. These c - Add new styles that don't exist in the default component - Override the component's default styles when needed -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `string` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ----------- | +| `string` | No | `undefined` | ```tsx import { AvatarNetwork } from '@metamask/design-system-react-native'; // Add additional styles - @@ -97,7 +94,7 @@ import { AvatarNetwork } from '@metamask/design-system-react-native'; // Override default styles - @@ -109,9 +106,9 @@ import { AvatarNetwork } from '@metamask/design-system-react-native'; Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `StyleProp` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| ---------------------- | -------- | ----------- | +| `StyleProp` | No | `undefined` | ```tsx const styles = StyleSheet.create({ diff --git a/packages/design-system-react-native/src/components/AvatarToken/README.md b/packages/design-system-react-native/src/components/AvatarToken/README.md index 8dcd469af..5bcc479b3 100644 --- a/packages/design-system-react-native/src/components/AvatarToken/README.md +++ b/packages/design-system-react-native/src/components/AvatarToken/README.md @@ -14,9 +14,9 @@ import { AvatarToken } from '@metamask/design-system-react-native'; The token name for the avatar. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `string` | Yes | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ----------- | +| `string` | Yes | `undefined` | ```tsx @@ -34,9 +34,9 @@ Available sizes: - `AvatarSize.Lg` (40px) - `AvatarSize.Xl` (48px) -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `AvatarSize` | No | `AvatarSize.Md` | +| TYPE | REQUIRED | DEFAULT | +| ------------ | -------- | --------------- | +| `AvatarSize` | No | `AvatarSize.Md` | ```tsx @@ -48,12 +48,12 @@ Available sizes: Custom image source for the token avatar. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `ImageSourcePropType` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| --------------------- | -------- | ----------- | +| `ImageSourcePropType` | No | `undefined` | ```tsx - @@ -63,15 +63,12 @@ Custom image source for the token avatar. Text to display when the token image fails to load. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `string` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ----------- | +| `string` | No | `undefined` | ```tsx - + ``` ### `twClassName` @@ -81,15 +78,15 @@ Use the `twClassName` prop to add Tailwind CSS classes to the component. These c - Add new styles that don't exist in the default component - Override the component's default styles when needed -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `string` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ----------- | +| `string` | No | `undefined` | ```tsx import { AvatarToken } from '@metamask/design-system-react-native'; // Add additional styles - @@ -97,7 +94,7 @@ import { AvatarToken } from '@metamask/design-system-react-native'; // Override default styles - @@ -109,9 +106,9 @@ import { AvatarToken } from '@metamask/design-system-react-native'; Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `StyleProp` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| ---------------------- | -------- | ----------- | +| `StyleProp` | No | `undefined` | ```tsx const styles = StyleSheet.create({ diff --git a/packages/design-system-react-native/src/components/BadgeCount/README.md b/packages/design-system-react-native/src/components/BadgeCount/README.md index aa9d99215..b11eacc01 100644 --- a/packages/design-system-react-native/src/components/BadgeCount/README.md +++ b/packages/design-system-react-native/src/components/BadgeCount/README.md @@ -14,9 +14,9 @@ import { BadgeCount } from '@metamask/design-system-react-native'; The count value to display in the badge. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `number` | Yes | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ----------- | +| `number` | Yes | `undefined` | ```tsx @@ -26,9 +26,9 @@ The count value to display in the badge. Maximum count to display before showing overflow indicator (e.g., "99+"). -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `number` | No | `99` | +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ------- | +| `number` | No | `99` | ```tsx @@ -38,9 +38,9 @@ Maximum count to display before showing overflow indicator (e.g., "99+"). Whether to show the badge when count is zero. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `boolean` | No | `false` | +| TYPE | REQUIRED | DEFAULT | +| --------- | -------- | ------- | +| `boolean` | No | `false` | ```tsx @@ -53,15 +53,15 @@ Use the `twClassName` prop to add Tailwind CSS classes to the component. These c - Add new styles that don't exist in the default component - Override the component's default styles when needed -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `string` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ----------- | +| `string` | No | `undefined` | ```tsx import { BadgeCount } from '@metamask/design-system-react-native'; // Add additional styles - @@ -69,7 +69,7 @@ import { BadgeCount } from '@metamask/design-system-react-native'; // Override default styles - @@ -81,9 +81,9 @@ import { BadgeCount } from '@metamask/design-system-react-native'; Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `StyleProp` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| ---------------------- | -------- | ----------- | +| `StyleProp` | No | `undefined` | ```tsx const styles = StyleSheet.create({ diff --git a/packages/design-system-react-native/src/components/BadgeIcon/README.md b/packages/design-system-react-native/src/components/BadgeIcon/README.md index 19dcf958b..544a7a02b 100644 --- a/packages/design-system-react-native/src/components/BadgeIcon/README.md +++ b/packages/design-system-react-native/src/components/BadgeIcon/README.md @@ -14,9 +14,9 @@ import { BadgeIcon } from '@metamask/design-system-react-native'; The icon name to display in the badge. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `IconName` | Yes | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| ---------- | -------- | ----------- | +| `IconName` | Yes | `undefined` | ```tsx @@ -33,9 +33,9 @@ Available variants: - `BadgeIconVariant.Warning` - `BadgeIconVariant.Info` -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `BadgeIconVariant` | No | `BadgeIconVariant.Success` | +| TYPE | REQUIRED | DEFAULT | +| ------------------ | -------- | -------------------------- | +| `BadgeIconVariant` | No | `BadgeIconVariant.Success` | ```tsx @@ -51,9 +51,9 @@ Available sizes: - `BadgeIconSize.Sm` (16px) - `BadgeIconSize.Md` (20px) -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `BadgeIconSize` | No | `BadgeIconSize.Md` | +| TYPE | REQUIRED | DEFAULT | +| --------------- | -------- | ------------------ | +| `BadgeIconSize` | No | `BadgeIconSize.Md` | ```tsx @@ -67,15 +67,15 @@ Use the `twClassName` prop to add Tailwind CSS classes to the component. These c - Add new styles that don't exist in the default component - Override the component's default styles when needed -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `string` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ----------- | +| `string` | No | `undefined` | ```tsx import { BadgeIcon } from '@metamask/design-system-react-native'; // Add additional styles - @@ -83,7 +83,7 @@ import { BadgeIcon } from '@metamask/design-system-react-native'; // Override default styles - @@ -95,9 +95,9 @@ import { BadgeIcon } from '@metamask/design-system-react-native'; Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `StyleProp` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| ---------------------- | -------- | ----------- | +| `StyleProp` | No | `undefined` | ```tsx const styles = StyleSheet.create({ diff --git a/packages/design-system-react-native/src/components/BadgeNetwork/README.md b/packages/design-system-react-native/src/components/BadgeNetwork/README.md index 1e963d85c..e80e536ab 100644 --- a/packages/design-system-react-native/src/components/BadgeNetwork/README.md +++ b/packages/design-system-react-native/src/components/BadgeNetwork/README.md @@ -14,9 +14,9 @@ import { BadgeNetwork } from '@metamask/design-system-react-native'; The network name for the badge. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `string` | Yes | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ----------- | +| `string` | Yes | `undefined` | ```tsx @@ -26,12 +26,12 @@ The network name for the badge. Custom image source for the network badge. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `ImageSourcePropType` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| --------------------- | -------- | ----------- | +| `ImageSourcePropType` | No | `undefined` | ```tsx - @@ -46,9 +46,9 @@ Available variants: - `BadgeNetworkVariant.Primary` - `BadgeNetworkVariant.Secondary` -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `BadgeNetworkVariant` | No | `BadgeNetworkVariant.Primary` | +| TYPE | REQUIRED | DEFAULT | +| --------------------- | -------- | ----------------------------- | +| `BadgeNetworkVariant` | No | `BadgeNetworkVariant.Primary` | ```tsx @@ -62,15 +62,15 @@ Use the `twClassName` prop to add Tailwind CSS classes to the component. These c - Add new styles that don't exist in the default component - Override the component's default styles when needed -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `string` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ----------- | +| `string` | No | `undefined` | ```tsx import { BadgeNetwork } from '@metamask/design-system-react-native'; // Add additional styles - @@ -78,7 +78,7 @@ import { BadgeNetwork } from '@metamask/design-system-react-native'; // Override default styles - @@ -90,9 +90,9 @@ import { BadgeNetwork } from '@metamask/design-system-react-native'; Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `StyleProp` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| ---------------------- | -------- | ----------- | +| `StyleProp` | No | `undefined` | ```tsx const styles = StyleSheet.create({ diff --git a/packages/design-system-react-native/src/components/BadgeStatus/README.md b/packages/design-system-react-native/src/components/BadgeStatus/README.md index 6c7a9a011..89d38e4db 100644 --- a/packages/design-system-react-native/src/components/BadgeStatus/README.md +++ b/packages/design-system-react-native/src/components/BadgeStatus/README.md @@ -21,9 +21,9 @@ Available variants: - `BadgeStatusVariant.Warning` - `BadgeStatusVariant.Info` -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `BadgeStatusVariant` | Yes | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| -------------------- | -------- | ----------- | +| `BadgeStatusVariant` | Yes | `undefined` | ```tsx @@ -41,14 +41,14 @@ Available sizes: - `BadgeStatusSize.Sm` (8px) - `BadgeStatusSize.Md` (12px) -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `BadgeStatusSize` | No | `BadgeStatusSize.Md` | +| TYPE | REQUIRED | DEFAULT | +| ----------------- | -------- | -------------------- | +| `BadgeStatusSize` | No | `BadgeStatusSize.Md` | ```tsx - ``` @@ -60,15 +60,15 @@ Use the `twClassName` prop to add Tailwind CSS classes to the component. These c - Add new styles that don't exist in the default component - Override the component's default styles when needed -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `string` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ----------- | +| `string` | No | `undefined` | ```tsx import { BadgeStatus } from '@metamask/design-system-react-native'; // Add additional styles - @@ -76,7 +76,7 @@ import { BadgeStatus } from '@metamask/design-system-react-native'; // Override default styles - @@ -88,9 +88,9 @@ import { BadgeStatus } from '@metamask/design-system-react-native'; Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `StyleProp` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| ---------------------- | -------- | ----------- | +| `StyleProp` | No | `undefined` | ```tsx const styles = StyleSheet.create({ @@ -101,10 +101,7 @@ const styles = StyleSheet.create({ }); export const StyleExample = () => ( - + ); ``` diff --git a/packages/design-system-react-native/src/components/BadgeWrapper/README.md b/packages/design-system-react-native/src/components/BadgeWrapper/README.md index 963bf9ba0..0ad2a211e 100644 --- a/packages/design-system-react-native/src/components/BadgeWrapper/README.md +++ b/packages/design-system-react-native/src/components/BadgeWrapper/README.md @@ -16,25 +16,25 @@ import { BadgeWrapper } from '@metamask/design-system-react-native'; The content to wrap with a badge. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `ReactNode` | Yes | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| ----------- | -------- | ----------- | +| `ReactNode` | Yes | `undefined` | ```tsx import { BadgeWrapper, BadgeCount } from '@metamask/design-system-react-native'; }> Wrapped content - +; ``` ### `badge` The badge component to display. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `ReactNode` | Yes | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| ----------- | -------- | ----------- | +| `ReactNode` | Yes | `undefined` | ```tsx }> @@ -53,12 +53,12 @@ Available positions: - `BadgeWrapperPosition.BottomRight` - `BadgeWrapperPosition.BottomLeft` -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `BadgeWrapperPosition` | No | `BadgeWrapperPosition.TopRight` | +| TYPE | REQUIRED | DEFAULT | +| ---------------------- | -------- | ------------------------------- | +| `BadgeWrapperPosition` | No | `BadgeWrapperPosition.TopRight` | ```tsx -} position={BadgeWrapperPosition.BottomRight} > @@ -73,15 +73,15 @@ Use the `twClassName` prop to add Tailwind CSS classes to the component. These c - Add new styles that don't exist in the default component - Override the component's default styles when needed -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `string` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ----------- | +| `string` | No | `undefined` | ```tsx import { BadgeWrapper } from '@metamask/design-system-react-native'; // Add additional styles -} twClassName="bg-primary-100" > @@ -89,7 +89,7 @@ import { BadgeWrapper } from '@metamask/design-system-react-native'; // Override default styles -} twClassName="!relative" > @@ -101,9 +101,9 @@ import { BadgeWrapper } from '@metamask/design-system-react-native'; Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `StyleProp` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| ---------------------- | -------- | ----------- | +| `StyleProp` | No | `undefined` | ```tsx const styles = StyleSheet.create({ @@ -114,10 +114,7 @@ const styles = StyleSheet.create({ }); export const StyleExample = () => ( - } - style={styles.custom} - > + } style={styles.custom}> Custom styled content ); diff --git a/packages/design-system-react-native/src/components/Box/README.md b/packages/design-system-react-native/src/components/Box/README.md index acbae5ba1..0b3fb970d 100644 --- a/packages/design-system-react-native/src/components/Box/README.md +++ b/packages/design-system-react-native/src/components/Box/README.md @@ -14,9 +14,9 @@ import { Box } from '@metamask/design-system-react-native'; The content of the Box component. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `ReactNode` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| ----------- | -------- | ----------- | +| `ReactNode` | No | `undefined` | ```tsx import { Box } from '@metamask/design-system-react-native'; @@ -28,9 +28,9 @@ import { Box } from '@metamask/design-system-react-native'; Background color of the box. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `BackgroundColor` | No | `BackgroundColor.Transparent` | +| TYPE | REQUIRED | DEFAULT | +| ----------------- | -------- | ----------------------------- | +| `BackgroundColor` | No | `BackgroundColor.Transparent` | ```tsx @@ -42,56 +42,48 @@ Background color of the box. Border color of the box. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `BorderColor` | No | `BorderColor.Transparent` | +| TYPE | REQUIRED | DEFAULT | +| ------------- | -------- | ------------------------- | +| `BorderColor` | No | `BorderColor.Transparent` | ```tsx - - Box with border - +Box with border ``` ### `borderRadius` Border radius of the box. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `BorderRadius` | No | `BorderRadius.None` | +| TYPE | REQUIRED | DEFAULT | +| -------------- | -------- | ------------------- | +| `BorderRadius` | No | `BorderRadius.None` | ```tsx - - Box with rounded corners - +Box with rounded corners ``` ### `padding` Padding inside the box. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `number` | No | `0` | +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ------- | +| `number` | No | `0` | ```tsx - - Box with padding - +Box with padding ``` ### `margin` Margin outside the box. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `number` | No | `0` | +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ------- | +| `number` | No | `0` | ```tsx - - Box with margin - +Box with margin ``` ### `twClassName` @@ -101,9 +93,9 @@ Use the `twClassName` prop to add Tailwind CSS classes to the component. These c - Add new styles that don't exist in the default component - Override the component's default styles when needed -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `string` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ----------- | +| `string` | No | `undefined` | ```tsx import { Box } from '@metamask/design-system-react-native'; @@ -123,9 +115,9 @@ import { Box } from '@metamask/design-system-react-native'; Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible, and use `style` for dynamic values or styles not available in Tailwind. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `StyleProp` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| ---------------------- | -------- | ----------- | +| `StyleProp` | No | `undefined` | ```tsx const styles = StyleSheet.create({ diff --git a/packages/design-system-react-native/src/components/Button/README.md b/packages/design-system-react-native/src/components/Button/README.md index 486016150..410382531 100644 --- a/packages/design-system-react-native/src/components/Button/README.md +++ b/packages/design-system-react-native/src/components/Button/README.md @@ -14,9 +14,9 @@ import { Button } from '@metamask/design-system-react-native'; The text label displayed on the button. -| TYPE | REQUIRED | DEFAULT | -|------|----------|---------| -| `string` | Yes | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ----------- | +| `string` | Yes | `undefined` | ```tsx // Override default styles -; ``` ## Props -### `label` +### `children` -The text label displayed on the button. +Required prop for the content to be rendered within the Button. -| TYPE | REQUIRED | DEFAULT | -| -------- | -------- | ----------- | -| `string` | Yes | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| --------------------------- | -------- | ----------- | +| `React.ReactNode \| string` | Yes | `undefined` | ```tsx - + ``` ### `onPress` @@ -31,7 +34,7 @@ Function to trigger when pressing the button. | `() => void` | Yes | `undefined` | ```tsx - ``` ### `variant` @@ -44,21 +47,17 @@ Available variants: - `ButtonVariant.Secondary` - `ButtonVariant.Tertiary` -| TYPE | REQUIRED | DEFAULT | -| --------------- | -------- | ----------------------- | -| `ButtonVariant` | No | `ButtonVariant.Primary` | +| TYPE | REQUIRED | DEFAULT | +| --------------- | -------- | ----------- | +| `ButtonVariant` | Yes | `undefined` | ```tsx - + ``` ### `size` @@ -67,61 +66,85 @@ The size of the button. Available sizes: -- `ButtonSize.Sm` (32px height) -- `ButtonSize.Md` (40px height) -- `ButtonSize.Lg` (48px height) +- `ButtonBaseSize.Sm` (32px height) +- `ButtonBaseSize.Md` (40px height) +- `ButtonBaseSize.Lg` (48px height) -| TYPE | REQUIRED | DEFAULT | -| ------------ | -------- | --------------- | -| `ButtonSize` | No | `ButtonSize.Md` | +| TYPE | REQUIRED | DEFAULT | +| ---------------- | -------- | ------------------- | +| `ButtonBaseSize` | No | `ButtonBaseSize.Lg` | ```tsx - + ``` ### `startIconName` -Optional icon name to display before the label. +Optional icon name to display before the content. | TYPE | REQUIRED | DEFAULT | | ---------- | -------- | ----------- | | `IconName` | No | `undefined` | ```tsx - ``` ### `endIconName` -Optional icon name to display after the label. +Optional icon name to display after the content. | TYPE | REQUIRED | DEFAULT | | ---------- | -------- | ----------- | | `IconName` | No | `undefined` | ```tsx - ``` ### `isDanger` -Whether to show the button in danger state. +Whether to show the button in danger state (only available for Primary variant). + +| TYPE | REQUIRED | DEFAULT | +| --------- | -------- | ------- | +| `boolean` | No | `false` | + +```tsx + +``` + +### `isInverse` + +Whether to show the button with inverted colors for use on colored backgrounds (only available for Primary variant). | TYPE | REQUIRED | DEFAULT | | --------- | -------- | ------- | | `boolean` | No | `false` | ```tsx - ``` ### `isDisabled` @@ -133,24 +156,56 @@ Whether the button is disabled. | `boolean` | No | `false` | ```tsx - ``` -### `width` +### `isFullWidth` -The width behavior of the button. +Whether the button should take up the full width of its container. -Available width types: +| TYPE | REQUIRED | DEFAULT | +| --------- | -------- | ------- | +| `boolean` | No | `false` | -- `ButtonWidthTypes.Auto` - Fits content -- `ButtonWidthTypes.Full` - Full width +```tsx + +``` + +### `isLoading` + +Whether the button is in a loading state, showing a spinner. -| TYPE | REQUIRED | DEFAULT | -| ---------------------------- | -------- | ----------------------- | -| `ButtonWidthTypes \| number` | No | `ButtonWidthTypes.Auto` | +| TYPE | REQUIRED | DEFAULT | +| --------- | -------- | ------- | +| `boolean` | No | `false` | ```tsx - +``` + +### `loadingText` + +Text to display when the button is in loading state. + +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ----------- | +| `string` | No | `undefined` | + +```tsx + ``` ### `twClassName` @@ -169,7 +224,7 @@ import { Button } from '@metamask/design-system-react-native'; // Add additional styles ); ``` From 7cf0de3226956b12355dea43e1a823cdfffa26a9 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Mon, 21 Jul 2025 13:19:02 -0700 Subject: [PATCH 7/9] chore: fixing incorrect updates --- .../src/components/ButtonIcon/README.md | 92 +++++++------- .../src/components/Checkbox/README.md | 94 ++++++++------- .../src/components/TextButton/README.md | 114 +++++++++++------- 3 files changed, 168 insertions(+), 132 deletions(-) diff --git a/packages/design-system-react-native/src/components/ButtonIcon/README.md b/packages/design-system-react-native/src/components/ButtonIcon/README.md index ae664288d..e393489ef 100644 --- a/packages/design-system-react-native/src/components/ButtonIcon/README.md +++ b/packages/design-system-react-native/src/components/ButtonIcon/README.md @@ -5,12 +5,12 @@ A Button Icon is a compact, icon-only button that triggers an action, designed f ```tsx import { ButtonIcon } from '@metamask/design-system-react-native'; - console.log('Pressed')} />; + console.log('Pressed')} />; ``` ## Props -### `name` +### `iconName` The icon name to display in the button. @@ -19,7 +19,7 @@ The icon name to display in the button. | `IconName` | Yes | `undefined` | ```tsx - {}} /> + {}} /> ``` ### `onPress` @@ -31,33 +31,9 @@ Function to trigger when pressing the button. | `() => void` | Yes | `undefined` | ```tsx - console.log('Settings pressed')} /> -``` - -### `variant` - -The visual variant of the button. - -Available variants: - -- `ButtonIconVariant.Primary` -- `ButtonIconVariant.Secondary` -- `ButtonIconVariant.Tertiary` - -| TYPE | REQUIRED | DEFAULT | -| ------------------- | -------- | --------------------------- | -| `ButtonIconVariant` | No | `ButtonIconVariant.Primary` | - -```tsx - {}} -/> {}} + iconName="Settings" + onPress={() => console.log('Settings pressed')} /> ``` @@ -77,39 +53,67 @@ Available sizes: ```tsx {}} /> {}} /> ``` -### `isDanger` +### `isDisabled` -Whether to show the button in danger state. +Whether the button is disabled. | TYPE | REQUIRED | DEFAULT | | --------- | -------- | ------- | | `boolean` | No | `false` | ```tsx - {}} /> + {}} /> ``` -### `isDisabled` +### `isInverse` -Whether the button is disabled. +Whether to show the button with inverted colors for use on colored backgrounds. + +| TYPE | REQUIRED | DEFAULT | +| --------- | -------- | ------- | +| `boolean` | No | `false` | + +```tsx + {}} /> +``` + +### `isFloating` + +Whether to show the button in floating/contained state for floating buttons. | TYPE | REQUIRED | DEFAULT | | --------- | -------- | ------- | | `boolean` | No | `false` | ```tsx - {}} /> + {}} /> +``` + +### `iconProps` + +Optional props to pass to the Icon component. + +| TYPE | REQUIRED | DEFAULT | +| -------------------- | -------- | ----------- | +| `Partial` | No | `undefined` | + +```tsx + {}} +/> ``` ### `twClassName` @@ -128,21 +132,17 @@ import { ButtonIcon } from '@metamask/design-system-react-native'; // Add additional styles {}} twClassName="shadow-lg" -> - Custom Shadow - +/> // Override default styles {}} twClassName="!bg-error-100" -> - Override Background - +/> ``` ### `style` @@ -162,7 +162,7 @@ const styles = StyleSheet.create({ }); export const StyleExample = () => ( - {}} style={styles.custom} /> + {}} style={styles.custom} /> ); ``` diff --git a/packages/design-system-react-native/src/components/Checkbox/README.md b/packages/design-system-react-native/src/components/Checkbox/README.md index a9447e8bc..f01c51a7c 100644 --- a/packages/design-system-react-native/src/components/Checkbox/README.md +++ b/packages/design-system-react-native/src/components/Checkbox/README.md @@ -5,35 +5,35 @@ Checkbox allows users to select one or more options from a set of choices. ```tsx import { Checkbox } from '@metamask/design-system-react-native'; - console.log(value)} />; + console.log(value)} />; ``` ## Props -### `isChecked` +### `isSelected` -Whether the checkbox is checked. +Whether the checkbox is currently selected. | TYPE | REQUIRED | DEFAULT | | --------- | -------- | ----------- | | `boolean` | Yes | `undefined` | ```tsx - {}} /> + {}} /> ``` -### `onValueChange` +### `onChange` -Function called when the checkbox value changes. +Function called when the checkbox selection changes. -| TYPE | REQUIRED | DEFAULT | -| -------------------------- | -------- | ----------- | -| `(value: boolean) => void` | Yes | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| ------------------------------- | -------- | ----------- | +| `(isSelected: boolean) => void` | Yes | `undefined` | ```tsx console.log('Checked:', checked)} + isSelected={false} + onChange={(selected) => console.log('Selected:', selected)} /> ``` @@ -46,52 +46,68 @@ Whether the checkbox is disabled. | `boolean` | No | `false` | ```tsx - {}} /> + {}} /> ``` -### `isIndeterminate` +### `isInvalid` -Whether the checkbox is in an indeterminate state. +Whether the checkbox is in an invalid/error state. | TYPE | REQUIRED | DEFAULT | | --------- | -------- | ------- | | `boolean` | No | `false` | ```tsx - {}} /> + {}} /> ``` ### `label` -Label text for the checkbox. +Label text or React node for the checkbox. -| TYPE | REQUIRED | DEFAULT | -| -------- | -------- | ----------- | -| `string` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| --------------------------- | -------- | ----------- | +| `React.ReactNode \| string` | No | `undefined` | ```tsx {}} + onChange={() => {}} /> ``` -### `size` +### `labelProps` -The size of the checkbox. +Optional props to be passed to the label's Text component. -Available sizes: +| TYPE | REQUIRED | DEFAULT | +| -------------------------------------- | -------- | ----------- | +| `Omit, 'children'>` | No | `undefined` | -- `CheckboxSize.Sm` (16px) -- `CheckboxSize.Md` (20px) +```tsx + {}} +/> +``` -| TYPE | REQUIRED | DEFAULT | -| -------------- | -------- | ----------------- | -| `CheckboxSize` | No | `CheckboxSize.Md` | +### `checkedIconProps` + +Optional props to be passed to the check Icon component. + +| TYPE | REQUIRED | DEFAULT | +| -------------------- | -------- | ----------- | +| `Partial` | No | `undefined` | ```tsx - {}} /> + {}} +/> ``` ### `twClassName` @@ -110,21 +126,17 @@ import { Checkbox } from '@metamask/design-system-react-native'; // Add additional styles {}} + isSelected={false} + onChange={() => {}} twClassName="p-2" -> - Custom Padding - +/> // Override default styles {}} + isSelected={false} + onChange={() => {}} twClassName="!border-error-100" -> - Override Border - +/> ``` ### `style` @@ -144,7 +156,7 @@ const styles = StyleSheet.create({ }); export const StyleExample = () => ( - {}} style={styles.custom} /> + {}} style={styles.custom} /> ); ``` diff --git a/packages/design-system-react-native/src/components/TextButton/README.md b/packages/design-system-react-native/src/components/TextButton/README.md index 5741b8071..5f823a970 100644 --- a/packages/design-system-react-native/src/components/TextButton/README.md +++ b/packages/design-system-react-native/src/components/TextButton/README.md @@ -14,9 +14,9 @@ import { TextButton } from '@metamask/design-system-react-native'; The text content of the TextButton component. -| TYPE | REQUIRED | DEFAULT | -| --------------------- | -------- | ----------- | -| `string \| ReactNode` | Yes | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| -------- | -------- | ----------- | +| `string` | Yes | `undefined` | ```tsx import { TextButton } from '@metamask/design-system-react-native'; @@ -38,35 +38,6 @@ Function to trigger when pressing the button. ``` -### `variant` - -The visual variant of the text button. - -Available variants: - -- `TextButtonVariant.Primary` -- `TextButtonVariant.Secondary` -- `TextButtonVariant.Link` - -| TYPE | REQUIRED | DEFAULT | -| ------------------- | -------- | --------------------------- | -| `TextButtonVariant` | No | `TextButtonVariant.Primary` | - -```tsx - {}} -> - Primary Text Button - - {}} -> - Link Text Button - -``` - ### `size` The size of the text button. @@ -77,21 +48,15 @@ Available sizes: - `TextButtonSize.Md` - `TextButtonSize.Lg` -| TYPE | REQUIRED | DEFAULT | -| ---------------- | -------- | ------------------- | -| `TextButtonSize` | No | `TextButtonSize.Md` | +| TYPE | REQUIRED | DEFAULT | +| ---------------- | -------- | ----------------------- | +| `TextButtonSize` | No | `TextButtonSize.BodyMd` | ```tsx - {}} -> + {}}> Small Text Button - {}} -> + {}}> Large Text Button ``` @@ -110,6 +75,20 @@ Whether the text button is disabled. ``` +### `isInverse` + +Whether to show the button with inverted colors for use on colored backgrounds. + +| TYPE | REQUIRED | DEFAULT | +| --------- | -------- | ------- | +| `boolean` | No | `false` | + +```tsx + {}}> + Inverse Text Button + +``` + ### `startIconName` Optional icon name to display before the text. @@ -138,6 +117,51 @@ Optional icon name to display after the text. ``` +### `startAccessory` + +Optional custom element to show at the start of the button. + +| TYPE | REQUIRED | DEFAULT | +| ----------------- | -------- | ----------- | +| `React.ReactNode` | No | `undefined` | + +```tsx +} onPress={() => {}}> + Custom Start + +``` + +### `endAccessory` + +Optional custom element to show at the end of the button. + +| TYPE | REQUIRED | DEFAULT | +| ----------------- | -------- | ----------- | +| `React.ReactNode` | No | `undefined` | + +```tsx +} onPress={() => {}}> + Custom End + +``` + +### `textProps` + +Optional props to be passed to the Text component. + +| TYPE | REQUIRED | DEFAULT | +| -------------------------------------- | -------- | ----------- | +| `Omit, 'children'>` | No | `undefined` | + +```tsx + {}} +> + Custom Text Styling + +``` + ### `twClassName` Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to: @@ -178,7 +202,7 @@ Use the `style` prop to customize the component's appearance with React Native s | `StyleProp` | No | `undefined` | ```tsx -const styles = StyleSheet.Create({ +const styles = StyleSheet.create({ custom: { marginVertical: 8, marginHorizontal: 16, @@ -187,7 +211,7 @@ const styles = StyleSheet.Create({ export const StyleExample = () => ( {}} style={styles.custom}> - Custom styled text button + Custom Text Button ); ``` From 73f19b688cb67ddace278e4e62a2cc7a8b9e0cdf Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Mon, 21 Jul 2025 14:08:22 -0700 Subject: [PATCH 8/9] chore: updates --- .../src/components/AvatarAccount/README.md | 18 +++++------ .../src/components/AvatarBase/README.md | 20 ++++++------ .../src/components/AvatarIcon/README.md | 20 ++++++------ .../src/components/AvatarNetwork/README.md | 32 +++++++++---------- .../src/components/AvatarToken/README.md | 30 ++++++++--------- .../src/components/BadgeCount/README.md | 17 +++++----- .../src/components/BadgeNetwork/README.md | 10 +++--- .../src/components/ButtonBase/README.md | 6 ++-- 8 files changed, 77 insertions(+), 76 deletions(-) diff --git a/packages/design-system-react-native/src/components/AvatarAccount/README.md b/packages/design-system-react-native/src/components/AvatarAccount/README.md index 4941f0fdd..6a52c5915 100644 --- a/packages/design-system-react-native/src/components/AvatarAccount/README.md +++ b/packages/design-system-react-native/src/components/AvatarAccount/README.md @@ -49,20 +49,20 @@ The size of the AvatarAccount. Available sizes: -- `AvatarSize.Xs` (16px) -- `AvatarSize.Sm` (24px) -- `AvatarSize.Md` (32px) -- `AvatarSize.Lg` (40px) -- `AvatarSize.Xl` (48px) +- `AvatarBaseSize.Xs` (16px) +- `AvatarBaseSize.Sm` (24px) +- `AvatarBaseSize.Md` (32px) +- `AvatarBaseSize.Lg` (40px) +- `AvatarBaseSize.Xl` (48px) -| TYPE | REQUIRED | DEFAULT | -| ------------ | -------- | --------------- | -| `AvatarSize` | No | `AvatarSize.Md` | +| TYPE | REQUIRED | DEFAULT | +| ---------------- | -------- | ------------------- | +| `AvatarBaseSize` | No | `AvatarBaseSize.Md` | ```tsx ``` diff --git a/packages/design-system-react-native/src/components/AvatarBase/README.md b/packages/design-system-react-native/src/components/AvatarBase/README.md index c60f69eee..f2432836f 100644 --- a/packages/design-system-react-native/src/components/AvatarBase/README.md +++ b/packages/design-system-react-native/src/components/AvatarBase/README.md @@ -16,20 +16,20 @@ The size of the AvatarBase. Available sizes: -- `AvatarSize.Xs` (16px) -- `AvatarSize.Sm` (24px) -- `AvatarSize.Md` (32px) -- `AvatarSize.Lg` (40px) -- `AvatarSize.Xl` (48px) +- `AvatarBaseSize.Xs` (16px) +- `AvatarBaseSize.Sm` (24px) +- `AvatarBaseSize.Md` (32px) +- `AvatarBaseSize.Lg` (40px) +- `AvatarBaseSize.Xl` (48px) -| TYPE | REQUIRED | DEFAULT | -| ------------ | -------- | --------------- | -| `AvatarSize` | No | `AvatarSize.Md` | +| TYPE | REQUIRED | DEFAULT | +| ---------------- | -------- | ------------------- | +| `AvatarBaseSize` | No | `AvatarBaseSize.Md` | ```tsx -Small Avatar +Small Avatar Medium Avatar (default) -Large Avatar +Large Avatar ``` ### `children` diff --git a/packages/design-system-react-native/src/components/AvatarIcon/README.md b/packages/design-system-react-native/src/components/AvatarIcon/README.md index b2746f6de..d064ebfc4 100644 --- a/packages/design-system-react-native/src/components/AvatarIcon/README.md +++ b/packages/design-system-react-native/src/components/AvatarIcon/README.md @@ -28,20 +28,20 @@ The size of the AvatarIcon. Available sizes: -- `AvatarSize.Xs` (16px) -- `AvatarSize.Sm` (24px) -- `AvatarSize.Md` (32px) -- `AvatarSize.Lg` (40px) -- `AvatarSize.Xl` (48px) +- `AvatarBaseSize.Xs` (16px) +- `AvatarBaseSize.Sm` (24px) +- `AvatarBaseSize.Md` (32px) +- `AvatarBaseSize.Lg` (40px) +- `AvatarBaseSize.Xl` (48px) -| TYPE | REQUIRED | DEFAULT | -| ------------ | -------- | --------------- | -| `AvatarSize` | No | `AvatarSize.Md` | +| TYPE | REQUIRED | DEFAULT | +| ---------------- | -------- | ------------------- | +| `AvatarBaseSize` | No | `AvatarBaseSize.Md` | ```tsx - + - + ``` ### `iconColor` diff --git a/packages/design-system-react-native/src/components/AvatarNetwork/README.md b/packages/design-system-react-native/src/components/AvatarNetwork/README.md index 7a9986f64..938f64b33 100644 --- a/packages/design-system-react-native/src/components/AvatarNetwork/README.md +++ b/packages/design-system-react-native/src/components/AvatarNetwork/README.md @@ -16,7 +16,7 @@ The network name for the avatar. | TYPE | REQUIRED | DEFAULT | | -------- | -------- | ----------- | -| `string` | Yes | `undefined` | +| `string` | No | `undefined` | ```tsx @@ -28,34 +28,34 @@ The size of the AvatarNetwork. Available sizes: -- `AvatarSize.Xs` (16px) -- `AvatarSize.Sm` (24px) -- `AvatarSize.Md` (32px) -- `AvatarSize.Lg` (40px) -- `AvatarSize.Xl` (48px) +- `AvatarBaseSize.Xs` (16px) +- `AvatarBaseSize.Sm` (24px) +- `AvatarBaseSize.Md` (32px) +- `AvatarBaseSize.Lg` (40px) +- `AvatarBaseSize.Xl` (48px) -| TYPE | REQUIRED | DEFAULT | -| ------------ | -------- | --------------- | -| `AvatarSize` | No | `AvatarSize.Md` | +| TYPE | REQUIRED | DEFAULT | +| ---------------- | -------- | ------------------- | +| `AvatarBaseSize` | No | `AvatarBaseSize.Md` | ```tsx - + - + ``` -### `imageSource` +### `src` Custom image source for the network avatar. -| TYPE | REQUIRED | DEFAULT | -| --------------------- | -------- | ----------- | -| `ImageSourcePropType` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| --------------- | -------- | ----------- | +| `ImageOrSvgSrc` | No | `undefined` | ```tsx ``` diff --git a/packages/design-system-react-native/src/components/AvatarToken/README.md b/packages/design-system-react-native/src/components/AvatarToken/README.md index 064b6d9d8..e16ea9ad0 100644 --- a/packages/design-system-react-native/src/components/AvatarToken/README.md +++ b/packages/design-system-react-native/src/components/AvatarToken/README.md @@ -28,34 +28,34 @@ The size of the AvatarToken. Available sizes: -- `AvatarSize.Xs` (16px) -- `AvatarSize.Sm` (24px) -- `AvatarSize.Md` (32px) -- `AvatarSize.Lg` (40px) -- `AvatarSize.Xl` (48px) +- `AvatarBaseSize.Xs` (16px) +- `AvatarBaseSize.Sm` (24px) +- `AvatarBaseSize.Md` (32px) +- `AvatarBaseSize.Lg` (40px) +- `AvatarBaseSize.Xl` (48px) -| TYPE | REQUIRED | DEFAULT | -| ------------ | -------- | --------------- | -| `AvatarSize` | No | `AvatarSize.Md` | +| TYPE | REQUIRED | DEFAULT | +| ---------------- | -------- | ------------------- | +| `AvatarBaseSize` | No | `AvatarBaseSize.Md` | ```tsx - + - + ``` -### `imageSource` +### `src` Custom image source for the token avatar. -| TYPE | REQUIRED | DEFAULT | -| --------------------- | -------- | ----------- | -| `ImageSourcePropType` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| --------------- | -------- | ----------- | +| `ImageOrSvgSrc` | No | `undefined` | ```tsx ``` diff --git a/packages/design-system-react-native/src/components/BadgeCount/README.md b/packages/design-system-react-native/src/components/BadgeCount/README.md index 698aee5aa..001fa7555 100644 --- a/packages/design-system-react-native/src/components/BadgeCount/README.md +++ b/packages/design-system-react-native/src/components/BadgeCount/README.md @@ -22,7 +22,7 @@ The count value to display in the badge. ``` -### `maxCount` +### `max` Maximum count to display before showing overflow indicator (e.g., "99+"). @@ -31,19 +31,20 @@ Maximum count to display before showing overflow indicator (e.g., "99+"). | `number` | No | `99` | ```tsx - + ``` -### `showZero` +### `size` -Whether to show the badge when count is zero. +The size of the BadgeCount. -| TYPE | REQUIRED | DEFAULT | -| --------- | -------- | ------- | -| `boolean` | No | `false` | +| TYPE | REQUIRED | DEFAULT | +| ---------------- | -------- | ------------------- | +| `BadgeCountSize` | No | `BadgeCountSize.Md` | ```tsx - + + ``` ### `twClassName` diff --git a/packages/design-system-react-native/src/components/BadgeNetwork/README.md b/packages/design-system-react-native/src/components/BadgeNetwork/README.md index d3403d9f4..b09d954ef 100644 --- a/packages/design-system-react-native/src/components/BadgeNetwork/README.md +++ b/packages/design-system-react-native/src/components/BadgeNetwork/README.md @@ -22,18 +22,18 @@ The network name for the badge. ``` -### `imageSource` +### `src` Custom image source for the network badge. -| TYPE | REQUIRED | DEFAULT | -| --------------------- | -------- | ----------- | -| `ImageSourcePropType` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| --------------- | -------- | ----------- | +| `ImageOrSvgSrc` | No | `undefined` | ```tsx ``` diff --git a/packages/design-system-react-native/src/components/ButtonBase/README.md b/packages/design-system-react-native/src/components/ButtonBase/README.md index 33a4edf5a..1bc9255ba 100644 --- a/packages/design-system-react-native/src/components/ButtonBase/README.md +++ b/packages/design-system-react-native/src/components/ButtonBase/README.md @@ -14,9 +14,9 @@ import { ButtonBase } from '@metamask/design-system-react-native'; The content of the ButtonBase component. -| TYPE | REQUIRED | DEFAULT | -| ----------- | -------- | ----------- | -| `ReactNode` | No | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| --------------------------- | -------- | ----------- | +| `React.ReactNode \| string` | Yes | `undefined` | ```tsx import { ButtonBase } from '@metamask/design-system-react-native'; From 3dc3bf4b743a7d867720badcb7515b81da67c511 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Mon, 21 Jul 2025 16:23:33 -0700 Subject: [PATCH 9/9] chore: update --- .../src/components/AvatarBase/README.md | 52 +++++ .../src/components/AvatarGroup/README.md | 204 ++++++++++++++---- .../src/components/AvatarIcon/README.md | 59 +++-- 3 files changed, 252 insertions(+), 63 deletions(-) diff --git a/packages/design-system-react-native/src/components/AvatarBase/README.md b/packages/design-system-react-native/src/components/AvatarBase/README.md index f2432836f..3f4cc75f9 100644 --- a/packages/design-system-react-native/src/components/AvatarBase/README.md +++ b/packages/design-system-react-native/src/components/AvatarBase/README.md @@ -32,6 +32,24 @@ Available sizes: Large Avatar ``` +### `shape` + +Optional prop to control the shape of the `AvatarBase`. + +| TYPE | REQUIRED | DEFAULT | +| :---------------- | :------- | :----------------------- | +| `AvatarBaseShape` | No | `AvatarBaseShape.Circle` | + +Available shapes: + +- `AvatarBaseShape.Circle` +- `AvatarBaseShape.Square` + +```tsx +AB +CD +``` + ### `children` The content of the AvatarBase component. @@ -46,6 +64,40 @@ import { AvatarBase } from '@metamask/design-system-react-native'; Custom avatar content; ``` +### `fallbackText` + +Optional text to be displayed when the avatar content fails to render. + +| TYPE | REQUIRED | DEFAULT | +| :------- | :------- | :------ | +| `string` | No | `null` | + +```tsx + + {/* Content that might fail to render */} + +``` + +### `fallbackTextProps` + +Optional props to customize the fallback text. + +| TYPE | REQUIRED | DEFAULT | +| :---------------------------- | :------- | :------ | +| `Omit` | No | `{}` | + +```tsx + + {/* Content that might fail to render */} + +``` + ### `backgroundColor` Background color of the avatar. diff --git a/packages/design-system-react-native/src/components/AvatarGroup/README.md b/packages/design-system-react-native/src/components/AvatarGroup/README.md index dded376c8..ca296c67c 100644 --- a/packages/design-system-react-native/src/components/AvatarGroup/README.md +++ b/packages/design-system-react-native/src/components/AvatarGroup/README.md @@ -1,40 +1,118 @@ # AvatarGroup -AvatarGroup is a stacked avatars to represent a group of avatars. +AvatarGroup is a stacked avatars component to represent a group of avatars. ```tsx -import { AvatarGroup } from '@metamask/design-system-react-native'; +import { + AvatarGroup, + AvatarGroupVariant, +} from '@metamask/design-system-react-native'; - - - -; +; ``` ## Props -### `children` +### `variant` -The avatar components to display in the group. +The type of avatars to display in the group. -| TYPE | REQUIRED | DEFAULT | -| ----------- | -------- | ----------- | -| `ReactNode` | Yes | `undefined` | +| TYPE | REQUIRED | DEFAULT | +| -------------------- | -------- | ----------- | +| `AvatarGroupVariant` | Yes | `undefined` | + +Available variants: + +- `AvatarGroupVariant.Account` +- `AvatarGroupVariant.Favicon` +- `AvatarGroupVariant.Network` +- `AvatarGroupVariant.Token` ```tsx -import { - AvatarGroup, - AvatarAccount, -} from '@metamask/design-system-react-native'; + +``` + +### `avatarPropsArr` + +Array of props for the individual avatar components. The type depends on the variant. + +| TYPE | REQUIRED | DEFAULT | +| -------------------------------------------------------------------------------------------------- | -------- | ----------- | +| `AvatarAccountProps[]` \| `AvatarFaviconProps[]` \| `AvatarNetworkProps[]` \| `AvatarTokenProps[]` | Yes | `undefined` | + +```tsx +// Account variant + + +// Favicon variant + + +// Network variant + + +// Token variant + +``` + +### `size` + +The size of the avatars in the group. + +| TYPE | REQUIRED | DEFAULT | +| ----------------- | -------- | -------------------- | +| `AvatarGroupSize` | No | `AvatarGroupSize.Md` | - - - - -; +Available sizes: + +- `AvatarGroupSize.Xs` (16px) +- `AvatarGroupSize.Sm` (24px) +- `AvatarGroupSize.Md` (32px) +- `AvatarGroupSize.Lg` (40px) +- `AvatarGroupSize.Xl` (48px) + +```tsx + ``` -### `maxAvatars` +### `max` Maximum number of avatars to display before showing overflow indicator. @@ -43,27 +121,56 @@ Maximum number of avatars to display before showing overflow indicator. | `number` | No | `4` | ```tsx - - - - - - + ``` -### `spacing` +### `isReverse` -Spacing between avatars in the group. +Optional prop to reverse the order of avatar stacking. -| TYPE | REQUIRED | DEFAULT | -| -------- | -------- | ------- | -| `number` | No | `-8` | +| TYPE | REQUIRED | DEFAULT | +| :-------- | :------- | :------ | +| `boolean` | No | `false` | + +```tsx + +``` + +### `overflowTextProps` + +Additional AvatarBase props to pass to the overflow text element. + +| TYPE | REQUIRED | DEFAULT | +| ----------------- | -------- | ----------- | +| `AvatarBaseProps` | No | `undefined` | ```tsx - - - - + ``` ### `twClassName` @@ -81,14 +188,18 @@ Use the `twClassName` prop to add Tailwind CSS classes to the component. These c import { AvatarGroup } from '@metamask/design-system-react-native'; // Add additional styles - - Custom Background - + // Override default styles - - Override Layout - + ``` ### `style` @@ -108,10 +219,11 @@ const styles = StyleSheet.create({ }); export const StyleExample = () => ( - - - - + ); ``` diff --git a/packages/design-system-react-native/src/components/AvatarIcon/README.md b/packages/design-system-react-native/src/components/AvatarIcon/README.md index d064ebfc4..9304861db 100644 --- a/packages/design-system-react-native/src/components/AvatarIcon/README.md +++ b/packages/design-system-react-native/src/components/AvatarIcon/README.md @@ -3,9 +3,13 @@ Avatar reserved for representing static icons inside of an avatar. ```tsx -import { AvatarIcon } from '@metamask/design-system-react-native'; +import { + AvatarIcon, + AvatarIconSeverity, + IconName, +} from '@metamask/design-system-react-native'; -; +; ``` ## Props @@ -19,7 +23,29 @@ The icon name to display in the avatar. | `IconName` | Yes | `undefined` | ```tsx - + +``` + +### `severity` + +Optional prop to control the severity of the avatar. + +| TYPE | REQUIRED | DEFAULT | +| :------------------- | :------- | :--------------------------- | +| `AvatarIconSeverity` | No | `AvatarIconSeverity.Neutral` | + +Available severities: + +- `AvatarIconSeverity.Neutral` +- `AvatarIconSeverity.Info` +- `AvatarIconSeverity.Success` +- `AvatarIconSeverity.Error` +- `AvatarIconSeverity.Warning` + +```tsx + + + ``` ### `size` @@ -39,9 +65,9 @@ Available sizes: | `AvatarBaseSize` | No | `AvatarBaseSize.Md` | ```tsx - - - + + + ``` ### `iconColor` @@ -53,7 +79,7 @@ Color of the icon within the avatar. | `IconColor` | No | `IconColor.IconDefault` | ```tsx - + ``` ### `backgroundColor` @@ -65,7 +91,10 @@ Background color of the avatar. | `BackgroundColor` | No | `BackgroundColor.BackgroundAlternative` | ```tsx - + ``` ### `twClassName` @@ -84,19 +113,15 @@ import { AvatarIcon } from '@metamask/design-system-react-native'; // Add additional styles - Custom Border - +/> // Override default styles - Override Background - +/> ``` ### `style` @@ -116,7 +141,7 @@ const styles = StyleSheet.create({ }); export const StyleExample = () => ( - + ); ```