MetaMask / MetaMask/metamask-design-system

[React Native]: Create `Tag` component in shared UI component library

Open
#408 0 comments 0 reactions 1 assignee Assigned to @brianacnguyen View on GitHub
team-design-system
Dominant language
TypeScript
Stars
37
Forks
14
Avg merge
1d 9h
Merged PRs (30d)
60

Description

### **Description**

Create a reusable `Tag` component for the shared UI component library. The component should implement the Avatar design standards outlined in the [Tag Audit and Insight Report Figma Board](https://www.figma.com/board/ziRpq1uELbxCGPwIFQiwZN/Tag-Audit-and-Insight-Report?node-id=0-1&t=kXsJhvZzgZ9vB65G-1). This task is part of the migration to the new shared UI component library, ensuring consistency with the conventions set by existing components.

### **Technical Details**

- **Component Implementation**:
- Build using React Native and TypeScript.

- **Integration**:
- Ensure compatibility with twrnc or any relevant design system tokens (e.g., spacing, colors, typography).
- Align with global typography and accessibility standards outlined in the Tag Audit.

- **Testing**:
- Integrate unit tests using Jest and React Testing Library.
- Add accessibility tests to ensure ARIA compliance for keyboard and screen reader users.

- **Documentation**:
- Provide detailed usage examples for different variants, sizes, and states.
- Include a storybook story for each prop and for default configurations.

### **Acceptance Criteria**

- The `Tag` component should match the design specs in the [Avatar Audit and Insight Report Figma Board](https://www.figma.com/board/ziRpq1uELbxCGPwIFQiwZN/Tag-Audit-and-Insight-Report?node-id=0-1&t=kXsJhvZzgZ9vB65G-1).
- Component implementation must cover the following:
- Proper alignment with typography and spacing standards.
- Compatibility with all design system color tokens and themes.
- Inclusion of hover, focus, and active states.
- Unit tests must cover at least 80% of the component’s functionality, including interactivity and accessibility.
- Component must be reviewed and approved by both engineering and design teams.
- Documentation for the component should be added, covering usage, available props, and examples.
- Ensure all aspects meet the [Definition of Done](https://www.notion.so/metamask-consensys/Definition-of-Done-778a1a8b231d4b8a99b6ad4bc115056a?pvs=4#c63409afae6b47d6a92e975d47c3737c).

### **References**

- [Tag Audit and Insight Report Figma Board](https://www.figma.com/board/ziRpq1uELbxCGPwIFQiwZN/Tag-Audit-and-Insight-Report?node-id=0-1&t=kXsJhvZzgZ9vB65G-1)
- [Definition of Done](https://www.notion.so/metamask-consensys/Definition-of-Done-778a1a8b231d4b8a99b6ad4bc115056a?pvs=4#c63409afae6b47d6a92e975d47c3737c)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.