Skip to content

chore: Modify Cursor guidelines to include Tag specs#28923

Draft
amandaye0h wants to merge 3 commits into
mainfrom
cursor-guidelines/add-tag
Draft

chore: Modify Cursor guidelines to include Tag specs#28923
amandaye0h wants to merge 3 commits into
mainfrom
cursor-guidelines/add-tag

Conversation

@amandaye0h

@amandaye0h amandaye0h commented Apr 16, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Description

This PR adds guidelines in the Cursor docs to use the DS Tag component.

Changelog

CHANGELOG entry: null

Related issues

Fixes:
#28918
MetaMask/metamask-design-system#1053

Manual testing steps

Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]

Screenshots/Recordings

Before

After

Pre-merge author checklist

Performance checks (if applicable)

  • I've tested on Android
    • Ideally on a mid-range device; emulator is acceptable
  • I've tested with a power user scenario
    • Use these power-user SRPs to import wallets with many accounts and tokens
  • I've instrumented key operations with Sentry traces for production performance metrics

For performance guidelines and tooling, see the Performance Guide.

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

@github-actions

github-actions Bot commented Apr 16, 2026

Copy link
Copy Markdown
Contributor

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@amandaye0h amandaye0h mentioned this pull request Apr 16, 2026
Merged
7 tasks
@github-actions

github-actions Bot commented Apr 16, 2026

Copy link
Copy Markdown
Contributor

✅ E2E Fixture Validation — Schema is up to date
11 value mismatches detected (expected — fixture represents an existing user).
View details

georgewrmarshall pushed a commit to MetaMask/metamask-design-system that referenced this pull request Apr 21, 2026
@amandaye0h
feat: Add Tag component for React Native (#1053)
68ddf99 
<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

### What is the goal of this PR?
- Creates a tag component that can be used in `ListItems`, `Sections`,
and `KeyValues`

### What are the key updates?
- Adds a React Native Tag component with the variants, start/end icons
props and conditional horizontal padding when icons are shown/not shown
- Adds Code Connect (`Tag.figma.tsx`), stories, tests, and README/Figma
link docs

## **Related issues**

JIRA:
- https://consensyssoftware.atlassian.net/browse/DSYS-568

This is a dependency for these migration PRs:

- [chore: Add deprecation messages for Tag and StockBadge
components](MetaMask/metamask-mobile#28918)
- [chore: Modify Cursor guidelines to include Tag
specs](MetaMask/metamask-mobile#28923)

## **Manual testing steps**

1. Run `yarn install && yarn build && yarn storybook:ios` to see changes

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

Component did not exist before this.

### **After**




https://github.com/user-attachments/assets/6aa3f7c3-7e2f-4a13-a4a1-880f24553c74








## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs)
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.



<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Primarily additive design-system UI work (new component + shared
types) with minimal impact outside new exports; risk is limited to
potential styling/prop API integration issues for consumers.
> 
> **Overview**
> Adds a new React Native `Tag` component with shared `TagSeverity`
semantics, optional start/end icons or custom accessories, and automatic
padding adjustments based on icon presence.
> 
> Introduces shared `TagSeverity`/`TagPropsShared` in
`design-system-shared`, wires exports in both shared and RN component
indexes, and includes Storybook stories, Code Connect (`Tag.figma.tsx`),
unit tests, and README documentation.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
7d5d89b. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Amanda <amanda@Amandas-MacBook-Pro.local>
georgewrmarshall pushed a commit to MetaMask/metamask-design-system that referenced this pull request Apr 27, 2026
@amandaye0h @georgewrmarshall
feat: Add Tag component for React Native (#1053)
1fc8295 
<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

### What is the goal of this PR?
- Creates a tag component that can be used in `ListItems`, `Sections`,
and `KeyValues`

### What are the key updates?
- Adds a React Native Tag component with the variants, start/end icons
props and conditional horizontal padding when icons are shown/not shown
- Adds Code Connect (`Tag.figma.tsx`), stories, tests, and README/Figma
link docs

## **Related issues**

JIRA:
- https://consensyssoftware.atlassian.net/browse/DSYS-568

This is a dependency for these migration PRs:

- [chore: Add deprecation messages for Tag and StockBadge
components](MetaMask/metamask-mobile#28918)
- [chore: Modify Cursor guidelines to include Tag
specs](MetaMask/metamask-mobile#28923)

## **Manual testing steps**

1. Run `yarn install && yarn build && yarn storybook:ios` to see changes

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

Component did not exist before this.

### **After**




https://github.com/user-attachments/assets/6aa3f7c3-7e2f-4a13-a4a1-880f24553c74








## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs)
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.



<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Primarily additive design-system UI work (new component + shared
types) with minimal impact outside new exports; risk is limited to
potential styling/prop API integration issues for consumers.
> 
> **Overview**
> Adds a new React Native `Tag` component with shared `TagSeverity`
semantics, optional start/end icons or custom accessories, and automatic
padding adjustments based on icon presence.
> 
> Introduces shared `TagSeverity`/`TagPropsShared` in
`design-system-shared`, wires exports in both shared and RN component
indexes, and includes Storybook stories, Code Connect (`Tag.figma.tsx`),
unit tests, and README documentation.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
7d5d89b. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Amanda <amanda@Amandas-MacBook-Pro.local>
cursor Bot pushed a commit to MetaMask/metamask-design-system that referenced this pull request Apr 28, 2026
@amandaye0h @cursoragent
feat: Add Tag component for React Native (#1053)
1b6bd96 
<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

### What is the goal of this PR?
- Creates a tag component that can be used in `ListItems`, `Sections`,
and `KeyValues`

### What are the key updates?
- Adds a React Native Tag component with the variants, start/end icons
props and conditional horizontal padding when icons are shown/not shown
- Adds Code Connect (`Tag.figma.tsx`), stories, tests, and README/Figma
link docs

## **Related issues**

JIRA:
- https://consensyssoftware.atlassian.net/browse/DSYS-568

This is a dependency for these migration PRs:

- [chore: Add deprecation messages for Tag and StockBadge
components](MetaMask/metamask-mobile#28918)
- [chore: Modify Cursor guidelines to include Tag
specs](MetaMask/metamask-mobile#28923)

## **Manual testing steps**

1. Run `yarn install && yarn build && yarn storybook:ios` to see changes

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

Component did not exist before this.

### **After**




https://github.com/user-attachments/assets/6aa3f7c3-7e2f-4a13-a4a1-880f24553c74








## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs)
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.



<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Primarily additive design-system UI work (new component + shared
types) with minimal impact outside new exports; risk is limited to
potential styling/prop API integration issues for consumers.
> 
> **Overview**
> Adds a new React Native `Tag` component with shared `TagSeverity`
semantics, optional start/end icons or custom accessories, and automatic
padding adjustments based on icon presence.
> 
> Introduces shared `TagSeverity`/`TagPropsShared` in
`design-system-shared`, wires exports in both shared and RN component
indexes, and includes Storybook stories, Code Connect (`Tag.figma.tsx`),
unit tests, and README documentation.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
7d5d89b. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Amanda <amanda@Amandas-MacBook-Pro.local>
@github-actions

github-actions Bot commented May 1, 2026

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: None (no tests recommended)
  • Selected Performance tags: None (no tests recommended)
  • Risk Level: low
  • AI Confidence: 99%
click to see 🤖 AI reasoning details

E2E Test Selection:
The only changed file is .cursor/rules/ui-development-guidelines.mdc, which is a Cursor IDE AI assistant rules/documentation file. The changes are purely documentation updates:

  1. Moving Tag component from app/component-library to @metamask/design-system-react-native in the guidelines
  2. Updating the decision tree to reflect this change
  3. Adding Tag to an import example

This file has zero impact on application code, test infrastructure, or runtime behavior. It only affects how the Cursor AI assistant provides coding suggestions to developers. No E2E tests or performance tests are warranted.

Performance Test Selection:
The change is purely to a Cursor IDE documentation/rules file with no impact on application code, rendering, or performance-sensitive paths.

View GitHub Actions results

@sonarqubecloud

sonarqubecloud Bot commented May 1, 2026

Copy link
Copy Markdown

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

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

Reviewers

No reviews

Assignees

No one assigned

Labels

size-XS team-assets

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@amandaye0h