Skip to content

chore: aligning readmes for react native components #787

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
georgewrmarshall wants to merge 9 commits into
base: main
Choose a base branch
from
Draft

chore: aligning readmes for react native components #787

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3cd55ea
Update component READMEs with consistent structure and improved docum…
cursoragent Jul 18, 2025
8fde150
chore: update component READMEs with consistent structure and improve…
georgewrmarshall Jul 18, 2025
382b4e4
chore: aligning descriptions
georgewrmarshall Jul 21, 2025
55d97ef
chore: aligning descriptions
georgewrmarshall Jul 21, 2025
93e7a67
chore: updates to button variants
georgewrmarshall Jul 21, 2025
c272bc3
chore: fixing incorrect updates
georgewrmarshall Jul 21, 2025
7cf0de3
chore: fixing incorrect updates
georgewrmarshall Jul 21, 2025
73f19b6
chore: updates
georgewrmarshall Jul 21, 2025
3dc3bf4
chore: update
georgewrmarshall Jul 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
chore: updates
  • Loading branch information
@georgewrmarshall
georgewrmarshall committed Jul 21, 2025
commit 73f19b688cb67ddace278e4e62a2cc7a8b9e0cdf
18 changes: 9 additions & 9 deletions packages/design-system-react-native/src/components/AvatarAccount/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<AvatarAccount
address="0x9Cbf7c41B7787F6c621115010D3B044029FE2Ce8"
size={AvatarSize.Lg}
size={AvatarBaseSize.Lg}
/>
```

Expand Down
20 changes: 10 additions & 10 deletions packages/design-system-react-native/src/components/AvatarBase/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<AvatarBase size={AvatarSize.Sm}>Small Avatar</AvatarBase>
<AvatarBase size={AvatarBaseSize.Sm}>Small Avatar</AvatarBase>
<AvatarBase>Medium Avatar (default)</AvatarBase>
<AvatarBase size={AvatarSize.Lg}>Large Avatar</AvatarBase>
<AvatarBase size={AvatarBaseSize.Lg}>Large Avatar</AvatarBase>
```

### `children`
Expand Down
20 changes: 10 additions & 10 deletions packages/design-system-react-native/src/components/AvatarIcon/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<AvatarIcon name="Bank" size={AvatarSize.Sm} />
<AvatarIcon name="Bank" size={AvatarBaseSize.Sm} />
<AvatarIcon name="Bank" />
<AvatarIcon name="Bank" size={AvatarSize.Lg} />
<AvatarIcon name="Bank" size={AvatarBaseSize.Lg} />
```

### `iconColor`
Expand Down
32 changes: 16 additions & 16 deletions packages/design-system-react-native/src/components/AvatarNetwork/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ The network name for the avatar.

| TYPE | REQUIRED | DEFAULT |
| -------- | -------- | ----------- |
| `string` | Yes | `undefined` |
| `string` | No | `undefined` |

```tsx
<AvatarNetwork name="ethereum" />
Expand All @@ -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
<AvatarNetwork name="ethereum" size={AvatarSize.Sm} />
<AvatarNetwork name="ethereum" size={AvatarBaseSize.Sm} />
<AvatarNetwork name="ethereum" />
<AvatarNetwork name="ethereum" size={AvatarSize.Lg} />
<AvatarNetwork name="ethereum" size={AvatarBaseSize.Lg} />
```

### `imageSource`
### `src`

Custom image source for the network avatar.

| TYPE | REQUIRED | DEFAULT |
| --------------------- | -------- | ----------- |
| `ImageSourcePropType` | No | `undefined` |
| TYPE | REQUIRED | DEFAULT |
| --------------- | -------- | ----------- |
| `ImageOrSvgSrc` | No | `undefined` |

```tsx
<AvatarNetwork
name="custom-network"
imageSource={{ uri: 'https://example.com/network-icon.png' }}
src={{ uri: 'https://example.com/network-icon.png' }}
/>
```

Expand Down
30 changes: 15 additions & 15 deletions packages/design-system-react-native/src/components/AvatarToken/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<AvatarToken name="ethereum" size={AvatarSize.Sm} />
<AvatarToken name="ethereum" size={AvatarBaseSize.Sm} />
<AvatarToken name="ethereum" />
<AvatarToken name="ethereum" size={AvatarSize.Lg} />
<AvatarToken name="ethereum" size={AvatarBaseSize.Lg} />
```

### `imageSource`
### `src`

Custom image source for the token avatar.

| TYPE | REQUIRED | DEFAULT |
| --------------------- | -------- | ----------- |
| `ImageSourcePropType` | No | `undefined` |
| TYPE | REQUIRED | DEFAULT |
| --------------- | -------- | ----------- |
| `ImageOrSvgSrc` | No | `undefined` |

```tsx
<AvatarToken
name="custom-token"
imageSource={{ uri: 'https://example.com/token-icon.png' }}
src={{ uri: 'https://example.com/token-icon.png' }}
/>
```

Expand Down
17 changes: 9 additions & 8 deletions packages/design-system-react-native/src/components/BadgeCount/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ The count value to display in the badge.
<BadgeCount count={5} />
```

### `maxCount`
### `max`

Maximum count to display before showing overflow indicator (e.g., "99+").

Expand All @@ -31,19 +31,20 @@ Maximum count to display before showing overflow indicator (e.g., "99+").
| `number` | No | `99` |

```tsx
<BadgeCount count={150} maxCount={99} />
<BadgeCount count={150} max={99} />
```

### `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
<BadgeCount count={0} showZero />
<BadgeCount count={5} size={BadgeCountSize.Sm} />
<BadgeCount count={10} size={BadgeCountSize.Lg} />
```

### `twClassName`
Expand Down
10 changes: 5 additions & 5 deletions packages/design-system-react-native/src/components/BadgeNetwork/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,18 +22,18 @@ The network name for the badge.
<BadgeNetwork name="ethereum" />
```

### `imageSource`
### `src`

Custom image source for the network badge.

| TYPE | REQUIRED | DEFAULT |
| --------------------- | -------- | ----------- |
| `ImageSourcePropType` | No | `undefined` |
| TYPE | REQUIRED | DEFAULT |
| --------------- | -------- | ----------- |
| `ImageOrSvgSrc` | No | `undefined` |

```tsx
<BadgeNetwork
name="custom-network"
imageSource={{ uri: 'https://example.com/network-icon.png' }}
src={{ uri: 'https://example.com/network-icon.png' }}
/>
```

Expand Down
6 changes: 3 additions & 3 deletions packages/design-system-react-native/src/components/ButtonBase/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Loading