Skip to content

Conversation

georgewrmarshall
Copy link
Contributor

Description

This PR standardizes all React Native component README files in `packages/design-system-react-native/src/components/` to follow the standardized template structure defined in `docs/component-readme-examples/react-native-readme-example.md`.

What is the reason for the change?

  • Inconsistent documentation format across React Native components
  • HTML tables instead of markdown tables
  • Missing standard props (`twClassName`, `style`)
  • Incorrect import statements referencing React instead of React Native
  • Grammatical errors and formatting inconsistencies

What is the improvement/solution?

  • Aligned all 27 component README files with the standardized template
  • Converted HTML tables to markdown format
  • Added standard `twClassName` and `style` props with consistent descriptions
  • Updated all imports to use `@metamask/design-system-react-native`
  • Fixed grammatical errors and improved code examples
  • Ensured all TypeScript examples are syntactically correct

Related issues

Fixes: Background agent task to align React Native Component READMEs with template

Manual testing steps

  1. Navigate to `packages/design-system-react-native/src/components/`
  2. Review any component README (e.g., `AvatarAccount/README.md`)
  3. Verify the structure follows the template format:
    • Standardized header with component description
    • Proper import examples using `@metamask/design-system-react-native`
    • Markdown tables instead of HTML tables
    • Standard `twClassName` and `style` props included
    • Consistent References section
  4. Check that all code examples use proper TypeScript syntax
  5. Verify all prop types and default values are accurate

Screenshots/Recordings

Before

  • HTML tables with complex styling
  • Inconsistent component descriptions
  • Missing standard props
  • Incorrect import paths
  • Grammatical errors

After

  • Clean markdown tables
  • Standardized "ComponentName is used to render..." descriptions
  • All components include `twClassName` and `style` props
  • Correct React Native import paths
  • Professional, error-free documentation

Pre-merge author checklist

  • I've followed MetaMask Contributor Docs
  • I've completed the PR template to the best of my ability
  • I've included tests if applicable (N/A - documentation only)
  • I've documented my code using JSDoc format if applicable (N/A - documentation only)
  • I've applied the right labels on the PR

Pre-merge reviewer checklist

  • I've manually tested the PR
  • I confirm that this PR addresses all acceptance criteria

Copy link
Contributor

📖 Storybook Preview

Copy link
Contributor

📖 Storybook Preview

Copy link
Contributor

📖 Storybook Preview

Copy link
Contributor

📖 Storybook Preview

Copy link
Contributor

📖 Storybook Preview

Comment on lines 37 to 69
### `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<TextProps, 'children'>` | No | `{}` |

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add these back to AvatarBase

Copy link
Contributor

📖 Storybook Preview

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants