MetaMask / MetaMask/metamask-design-system
[DSRN]: Add badge support to AvatarFavicon
- Dominant language
- TypeScript
- Stars
- 37
- Forks
- 14
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 60
Description
### **Description**
Upgrade the `AvatarFavicon` component to support display of `BadgeNetwork` and `BadgeIcon`, indicating the associated network and action type.
This continues the effort to enhance contextual clarity across avatar components as part of the UI badge audit.
### **Technical Details**
- Integrate `BadgeNetwork` and `BadgeIcon` components within `AvatarFavicon`
- Ensure badges are correctly positioned and styled per design guidelines
- Use props to optionally render network and action-type badges
- Action-type icons should reflect the activity or context associated with the favicon
### **Acceptance Criteria**
- `AvatarFavicon` renders network and icon badges based on props
- UI matches Figma designs
- Component remains backwards-compatible
- Responsive behavior verified across screen sizes
- Design QA passes (e.g., audit spacing, size, color, etc.)
### **References**
- Figma Audit Board: https://www.figma.com/board/pQa2vI7r08pHiqsAPTWdQ8/Avatar%2C-Token%2C-Network%2C-Icon%2C-Badge-Audit-and-Insight-Report?node-id=0-1&t=0EWeZ4yjDqhzZril-1
- Shared UI Components (WIP): https://www.figma.com/design/1D6tnzXqWgnUC3spaAOELN/%F0%9F%A6%8A%5BWIP%5D-DS-Components-(Shared-UI-lib)?node-id=120-1621&t=E6652Uk8pwcj6f2f-1
Contributor guide
Research direction
Start at the AvatarFavicon component and inspect the existing BadgeNetwork and BadgeIcon components and their props. Use the linked Figma audit and shared UI designs to determine positioning, styling, and responsive behavior. Done means optional badges render correctly, existing usage remains compatible, and design QA passes across screen sizes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100