MetaMask / MetaMask/metamask-design-system

[Docs] Avatar family migration documentation (7 components)

Open
#990 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

documentation
Dominant language
TypeScript
Stars
37
Forks
14
Avg merge
1d 9h
Merged PRs (30d)
60

Description

## Summary

Add migration documentation for the Avatar component family (7 components) that have been migrated from Extension/Mobile to MMDS.

## Components

- AvatarBase
- AvatarIcon
- AvatarAccount
- AvatarNetwork
- AvatarToken
- AvatarFavicon
- AvatarGroup

## Definition of Done

### 1. MIGRATION.md Sections
Add migration sections with API maps to:
- `packages/design-system-react/MIGRATION.md`
- `packages/design-system-react-native/MIGRATION.md`

Include:
- Breaking changes between Extension/Mobile and MMDS
- Prop mapping tables
- Before/after code examples

### 2. README Links
Add migration section to each component's README.mdx:
- Link to relevant MIGRATION.md section

### 3. @deprecated Updates
Add migration links to JSDoc in:
- Extension: `ui/components/component-library/avatar*`
- Mobile: `app/component-library/components/Avatar*`

## Example Reference
Text component migration: https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react/MIGRATION.md#text-component

## Labels
documentation

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Text component migration section in packages/design-system-react/MIGRATION.md, then inspect the React and React Native Avatar README.mdx files and the listed Extension and Mobile component paths. Document all seven Avatar components in both MIGRATION.md files, link each README and deprecated JSDoc entry, and verify that the API maps, breaking changes, and before/after examples are complete.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, react-native, typescript
Domain
documentation
Issue type
Documentation
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
62/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.