Skip to content

chore: Add deprecation messages for Tag and StockBadge components#28918

Draft
amandaye0h wants to merge 1 commit into
mainfrom
tag/add-deprecation-notices
Draft

chore: Add deprecation messages for Tag and StockBadge components#28918
amandaye0h wants to merge 1 commit into
mainfrom
tag/add-deprecation-notices

Conversation

@amandaye0h

@amandaye0h amandaye0h commented Apr 16, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Description

Adds @deprecated JSDoc (with migration target, API note, and README link) on legacy tag-style components so IDEs and docs surface the replacement: Tag from @metamask/design-system-react-native**.

Updated components

  • Tag
  • TagBase
  • TagColored
  • StockBadge

Changelog

CHANGELOG entry: null

Related issues

Fixes: MetaMask/metamask-design-system#1053

Manual testing steps

Given the app is built from this branch and I open the project in my IDE

When I navigate to imports or definitions of TagBase, Tag, TagColored, or StockBadge
Then I see @deprecated JSDoc with a pointer to Tag from @metamask/design-system-react-native and the linked README

Screenshots/Recordings

Before

N/A

After

/**
 * @deprecated Please update your code to use `Tag` from `@metamask/design-system-react-native`.
 * The API may have changed — compare props before migrating.
 * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/Tag/README.md}
 */

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.

@github-actions

github-actions Bot commented Apr 16, 2026

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

⏭️ Smart E2E selection skipped - draft PR

All E2E tests pre-selected.

View GitHub Actions results

@sonarqubecloud

sonarqubecloud Bot commented Apr 16, 2026

Copy link
Copy Markdown

Quality Gate Passed Quality Gate passed

Issues
4 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

@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

This was referenced Apr 16, 2026
Merged
Draft
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>
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-S team-assets

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@amandaye0h