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: update component READMEs with consistent structure and improve… 
…d documentation
  • Loading branch information
@georgewrmarshall
georgewrmarshall committed Jul 18, 2025
commit 8fde1502d4d9155a13ea94cad6ee7b6d396c602e
64 changes: 32 additions & 32 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 @@ -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
<AvatarAccount address="0x9Cbf7c41B7787F6c621115010D3B044029FE2Ce8" />
Expand All @@ -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
<AvatarAccount
<AvatarAccount
address="0x9Cbf7c41B7787F6c621115010D3B044029FE2Ce8"
variant={AvatarAccountVariant.Blockies}
/>
Expand All @@ -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
<AvatarAccount
<AvatarAccount
address="0x9Cbf7c41B7787F6c621115010D3B044029FE2Ce8"
size={AvatarSize.Lg}
/>
Expand All @@ -70,12 +70,12 @@ Available sizes:

Optional props to be passed to the Blockies component when the variant is Blockies.

| TYPE | REQUIRED | DEFAULT |
|------|----------|---------|
| `Partial<BlockiesProps>` | No | `undefined` |
| TYPE | REQUIRED | DEFAULT |
| ------------------------ | -------- | ----------- |
| `Partial<BlockiesProps>` | No | `undefined` |

```tsx
<AvatarAccount
<AvatarAccount
address="0x9Cbf7c41B7787F6c621115010D3B044029FE2Ce8"
variant={AvatarAccountVariant.Blockies}
blockiesProps={{ scale: 3 }}
Expand All @@ -86,12 +86,12 @@ Optional props to be passed to the Blockies component when the variant is Blocki

Optional props to be passed to the Jazzicon component when the variant is Jazzicon.

| TYPE | REQUIRED | DEFAULT |
|------|----------|---------|
| `Partial<JazziconProps>` | No | `undefined` |
| TYPE | REQUIRED | DEFAULT |
| ------------------------ | -------- | ----------- |
| `Partial<JazziconProps>` | No | `undefined` |

```tsx
<AvatarAccount
<AvatarAccount
address="0x9Cbf7c41B7787F6c621115010D3B044029FE2Ce8"
variant={AvatarAccountVariant.Jazzicon}
jazziconProps={{ diameter: 40 }}
Expand All @@ -102,12 +102,12 @@ Optional props to be passed to the Jazzicon component when the variant is Jazzic

Optional props to be passed to the Maskicon component when the variant is Maskicon.

| TYPE | REQUIRED | DEFAULT |
|------|----------|---------|
| `Partial<MaskiconProps>` | No | `undefined` |
| TYPE | REQUIRED | DEFAULT |
| ------------------------ | -------- | ----------- |
| `Partial<MaskiconProps>` | No | `undefined` |

```tsx
<AvatarAccount
<AvatarAccount
address="0x9Cbf7c41B7787F6c621115010D3B044029FE2Ce8"
variant={AvatarAccountVariant.Maskicon}
maskiconProps={{ showBorder: true }}
Expand All @@ -121,23 +121,23 @@ 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 { AvatarAccount } from '@metamask/design-system-react-native';

// Add additional styles
<AvatarAccount
<AvatarAccount
address="0x9Cbf7c41B7787F6c621115010D3B044029FE2Ce8"
twClassName="border-2 border-primary-100"
>
Custom Border
</AvatarAccount>

// Override default styles
<AvatarAccount
<AvatarAccount
address="0x9Cbf7c41B7787F6c621115010D3B044029FE2Ce8"
twClassName="!bg-error-100"
>
Expand All @@ -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<ViewStyle>` | No | `undefined` |
| TYPE | REQUIRED | DEFAULT |
| ---------------------- | -------- | ----------- |
| `StyleProp<ViewStyle>` | No | `undefined` |

```tsx
const styles = StyleSheet.create({
Expand All @@ -162,7 +162,7 @@ const styles = StyleSheet.create({
});

export const StyleExample = () => (
<AvatarAccount
<AvatarAccount
address="0x9Cbf7c41B7787F6c621115010D3B044029FE2Ce8"
style={styles.custom}
/>
Expand Down
36 changes: 18 additions & 18 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 @@ -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
<AvatarBase size={AvatarSize.Sm}>Small Avatar</AvatarBase>
Expand All @@ -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';
Expand All @@ -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
<AvatarBase backgroundColor={BackgroundColor.BackgroundDefault}>
Expand All @@ -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
<AvatarBase borderColor={BorderColor.BorderMuted}>
Expand All @@ -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';
Expand All @@ -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<ViewStyle>` | No | `undefined` |
| TYPE | REQUIRED | DEFAULT |
| ---------------------- | -------- | ----------- |
| `StyleProp<ViewStyle>` | No | `undefined` |

```tsx
const styles = StyleSheet.create({
Expand Down
40 changes: 20 additions & 20 deletions packages/design-system-react-native/src/components/AvatarFavicon/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<AvatarFavicon imageSource={{ uri: 'https://example.com/favicon.ico' }} />
Expand All @@ -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
<AvatarFavicon
<AvatarFavicon
imageSource={{ uri: 'https://example.com/favicon.ico' }}
size={AvatarSize.Sm}
/>
Expand All @@ -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
<AvatarFavicon
<AvatarFavicon
imageSource={{ uri: 'https://example.com/favicon.ico' }}
fallbackText="FB"
/>
Expand All @@ -67,23 +67,23 @@ 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
<AvatarFavicon
<AvatarFavicon
imageSource={{ uri: 'https://example.com/favicon.ico' }}
twClassName="border-2 border-primary-100"
>
Custom Border
</AvatarFavicon>

// Override default styles
<AvatarFavicon
<AvatarFavicon
imageSource={{ uri: 'https://example.com/favicon.ico' }}
twClassName="!bg-error-100"
>
Expand All @@ -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<ViewStyle>` | No | `undefined` |
| TYPE | REQUIRED | DEFAULT |
| ---------------------- | -------- | ----------- |
| `StyleProp<ViewStyle>` | No | `undefined` |

```tsx
const styles = StyleSheet.create({
Expand All @@ -108,7 +108,7 @@ const styles = StyleSheet.create({
});

export const StyleExample = () => (
<AvatarFavicon
<AvatarFavicon
imageSource={{ uri: 'https://example.com/favicon.ico' }}
style={styles.custom}
/>
Expand Down
Loading
Loading