test: preview design-system Text component changes [DO NOT MERGE] #41582
Draft
georgewrmarshall wants to merge 4 commits intomainfrom
Draft
test: preview design-system Text component changes [DO NOT MERGE] #41582georgewrmarshall wants to merge 4 commits intomainfrom
georgewrmarshall wants to merge 4 commits intomainfrom
Conversation
Temporarily swaps @metamask/design-system-react, design-system-shared, design-system-tailwind-preset, and design-tokens to their @metamask-previews builds to test MetaMask/metamask-design-system#1047.
georgewrmarshall
temporarily deployed
to
pr-comment
GitHub Actions
Inactive
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. |
metamaskbot
added
the
team-design-system
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix prepared a fix for the issue found in the latest run.
- ✅ Fixed: Global resolution forces incompatible major version on phishing-warning
- Removed the global @metamask/design-tokens resolution from package.json so transitive dependencies like @metamask/phishing-warning can resolve their compatible v7 range.
Or push these changes by commenting:
@cursor push 6033a7cd88
Preview (6033a7cd88)
diff --git a/package.json b/package.json
--- a/package.json
+++ b/package.json
@@ -161,7 +161,6 @@
"@metamask/design-system-react": "npm:@metamask-previews/design-system-react@0.14.0-preview.4ce710b",
"@metamask/design-system-shared": "npm:@metamask-previews/design-system-shared@0.7.0-preview.4ce710b",
"@metamask/design-system-tailwind-preset": "npm:@metamask-previews/design-system-tailwind-preset@0.6.1-preview.4ce710b",
- "@metamask/design-tokens": "npm:@metamask-previews/design-tokens@8.3.0-preview.4ce710b",
"@unrs/resolver-binding-wasm32-wasi": "npm:npm-empty-package@1.0.0",
"jest-clean-console-reporter/chalk": "^4.1.2",
"napi-postinstall": "npm:npm-empty-package@1.0.0",
diff --git a/yarn.lock b/yarn.lock
--- a/yarn.lock
+++ b/yarn.lock
@@ -6208,6 +6208,13 @@
languageName: node
linkType: hard
+"@metamask/design-tokens@npm:^7.1.0":
+ version: 7.1.0
+ resolution: "@metamask/design-tokens@npm:7.1.0"
+ checksum: 10/a4f1379bdf5f6b99c9a228ce4f5bb07ace4ed5abc61384e7f04cf5bdf943b32dd13ec9676a88f6b6c7314cdba6e2967b9fd99707a64a645865f21f8d8a2566d9
+ languageName: node
+ linkType: hard
+
"@metamask/eip-5792-middleware@npm:3.0.3":
version: 3.0.3
resolution: "@metamask/eip-5792-middleware@npm:3.0.3"You can send follow-ups to the cloud agent here.
Reviewed by Cursor Bugbot for commit ffab2ac. Configure here.
| "@metamask/design-system-react": "npm:@metamask-previews/design-system-react@0.14.0-preview.4ce710b", | ||
| "@metamask/design-system-shared": "npm:@metamask-previews/design-system-shared@0.7.0-preview.4ce710b", | ||
| "@metamask/design-system-tailwind-preset": "npm:@metamask-previews/design-system-tailwind-preset@0.6.1-preview.4ce710b", | ||
| "@metamask/design-tokens": "npm:@metamask-previews/design-tokens@8.3.0-preview.4ce710b", |
There was a problem hiding this comment.
Global resolution forces incompatible major version on phishing-warning
Medium Severity
The blanket @metamask/design-tokens resolution forces every consumer to 8.3.0-preview.4ce710b, but @metamask/phishing-warning depends on @metamask/design-tokens@^7.1.0. This is a major-version jump (7 → 8) that removes the dedicated v7 entry from yarn.lock entirely. If the v8 preview has breaking API changes, the phishing warning page — a security-critical UI — could malfunction at runtime. A scoped resolution (e.g., targeting only the direct dependency) would avoid forcing a semver-incompatible upgrade on unrelated packages.
Reviewed by Cursor Bugbot for commit ffab2ac. Configure here.
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
georgewrmarshall
temporarily deployed
to
pr-comment
GitHub Actions
Inactive
georgewrmarshall
temporarily deployed
to
pr-comment
GitHub Actions
Inactive
Contributor
✨ Files requiring CODEOWNER review ✨📜 @MetaMask/policy-reviewers (12 files, +72 -72)
Tip Follow the policy review process outlined in the LavaMoat Policy Review Process doc before expecting an approval from Policy Reviewers. 🔐 @MetaMask/web3auth (2 files, +10 -10)
|
Contributor
Author
|
@metamaskbot update-policies |
7 tasks
Collaborator
|
Policies updated. Tip Follow the policy review process outlined in the LavaMoat Policy Review Process doc before expecting an approval from Policy Reviewers. 👀 lavamoat/browserify/beta/policy.json changes differ from main/policy.json policy changes |
georgewrmarshall
changed the title
georgewrmarshall
changed the title
|
Contributor
Builds ready [732d795]
⚡ Performance Benchmarks (Total: 🟢 7 pass · 🟡 12 warn · 🔴 0 fail)
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
georgewrmarshall
added a commit
to MetaMask/metamask-design-system
that referenced
this pull request
Apr 9, 2026
## **Description** This PR migrates the `Text` component to align with [ADR-0003](MetaMask/decisions#127) (String Unions) and [ADR-0004](MetaMask/decisions#128) (Centralized Types Architecture) as part of epic **DSYS-468**. ### Changes **New shared types (`@metamask/design-system-shared`)** - `TextVariant` — converted from duplicated `enum TextVariant` in both platform packages to a single `const` object with string union type (ADR-0003). Values are identical across React and React Native. - `TextColor` — new shared `const` object containing all common color values across both platforms (ADR-0003). React extends this with hover states (`PrimaryDefaultHover`, `ErrorDefaultHover`, `SuccessDefaultHover`, `WarningDefaultHover`) and `Inherit`. React Native extends with `PrimaryAlternative`. - `TextPropsShared` — new shared props type (ADR-0004) containing cross-platform Text props: `variant`, `children`, and `color` (typed as `string` to allow platform-specific extensions). **Updated platform packages (`design-system-react` and `design-system-react-native`)** - Removed `enum TextVariant` from both `src/types/index.ts` — now re-exported from shared - Removed `enum TextColor` from both `src/types/index.ts` — replaced with platform-extended const objects - Removed `enum FontWeight`, `enum FontFamily`, `enum FontStyle` from both `src/types/index.ts` — converted to const objects (platform-specific values preserved) - Removed `enum TextAlign`, `enum OverflowWrap`, `enum TextTransform` from React `src/types/index.ts` — converted to const objects (React/Tailwind-specific) - `Text.types.ts` in both packages now extends `TextPropsShared` from shared - `Text/index.ts` in both packages exports `TextVariant` and `TextPropsShared` from shared **Platform differences preserved** - `FontWeight`: React uses Tailwind classes (`font-bold`, `font-medium`, `font-regular`); RN uses numeric values (`600`, `500`, `400`) - `FontFamily`: React uses Tailwind classes (`font-default`, `font-accent`, `font-hero`); RN uses plain names (`default`, `accent`, `hero`) - `FontStyle`: React uses Tailwind values (`italic`, `not-italic`); RN uses CSS values (`italic`, `normal`) - `TextAlign`, `OverflowWrap`, `TextTransform`: React-only (Tailwind-specific) ## **Related issues** Fixes: [DSYS-489](https://consensyssoftware.atlassian.net/browse/DSYS-489) ## **Manual testing steps** 1. Run `yarn build` — all packages build successfully 2. Run `yarn test` — all tests pass with 100% coverage on changed components 3. Verify `TextVariant` is importable from `@metamask/design-system-shared` 4. Verify `TextColor` is importable from `@metamask/design-system-shared` 5. Verify `TextPropsShared` is importable from `@metamask/design-system-shared` ## **Screenshots/Recordings** ### **Before** No visual changes. https://github.com/user-attachments/assets/d5fc7e35-013e-4be2-bdff-0bed7d2faab2 ### **After** No visual changes. Text component in storybook works as expected and no visual regressions picked up in Chromatic run https://github.com/user-attachments/assets/4efed996-4451-4c97-ab91-b8de60d5b93a <img width="1496" height="868" alt="Screenshot 2026-04-07 at 3 57 11 PM" src="https://github.com/user-attachments/assets/227e45ca-40af-43de-a80b-32342daadbab" /> Testing preview packages in mobile works with no typescript or visual issues Test PR: MetaMask/metamask-mobile#28575 Mobile running with MMDS `Text` https://github.com/user-attachments/assets/0dacb94b-1b39-4870-9f77-4ad8509ab551 Testing preview packages in extension works with no typescript or visual issues Test PR: MetaMask/metamask-extension#41582 Extension running with MMDS `Text` <img width="494" height="658" alt="Screenshot 2026-04-08 at 2 13 00 PM" src="https://github.com/user-attachments/assets/5f70ec0f-2ddd-436f-92e5-16161be28ae2" /> Extension storybook running with MMDS `Text` <img width="1500" height="876" alt="Screenshot 2026-04-08 at 2 14 09 PM" src="https://github.com/user-attachments/assets/17e5fefc-1c5a-4d47-ba74-987ec7c0b9ca" /> ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] 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. <div><a href="https://cursor.com/agents/bc-200db13e-7cf7-4b8a-a5ae-77e06cae2d41"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/assets/images/open-in-web-dark.png"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/assets/images/open-in-web-light.png"><img alt="Open in Web" width="114" height="28" src="https://cursor.com/assets/images/open-in-web-dark.png"></picture></a> <a href="https://cursor.com/automations/864f6729-e11f-445a-9607-65e9539d53c1"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/assets/images/view-automation-dark.png"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/assets/images/view-automation-light.png"><img alt="View Automation" width="141" height="28" src="https://cursor.com/assets/images/view-automation-dark.png"></picture></a> </div> <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Medium Risk** > Medium risk because it replaces widely used `Text*` enums/types across both React and React Native with shared const-union exports and updates component typings/class mappings, which could cause subtle styling or type-breaking regressions if any downstream imports rely on the removed enums. > > **Overview** > Migrates cross-platform `Text` primitives to ADR-0003/0004 by introducing shared `TextVariant`, `TextColor`, `FontWeight`, `FontFamily`, `FontStyle`, and `TextPropsShared` in `@metamask/design-system-shared`, and updating React/React Native components, stories, and tests to import these directly. > > Removes duplicated `Text*` enums from both platform `src/types/index.ts` (and converts React-only `TextAlign`/`OverflowWrap`/`TextTransform` to const-union types), refactors React `Text` to map semantic shared font values to Tailwind classes via new mapping constants, and adjusts RN `Text` font-weight defaults to explicit shared mappings. > > Updates Storybook Tailwind scanning to include `design-system-shared` sources, and documents the new import rules in `.cursor/rules/component-architecture.md` to avoid importing shared types via sibling component indices. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit 4ce710b. 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: Cursor Agent <cursoragent@cursor.com> Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com> Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
![https://cursor.com/assets/images/open-in-web-dark.png"><source](https://cursor.com/assets/images/open-in-web-dark.png"><source){kind=link}
![https://cursor.com/assets/images/open-in-web-light.png"><img](https://cursor.com/assets/images/open-in-web-light.png"><img){kind=link}
![https://cursor.com/assets/images/open-in-web-dark.png"></picture></a> <a](https://cursor.com/assets/images/open-in-web-dark.png"></picture></a> <a){kind=link}
![https://cursor.com/assets/images/view-automation-dark.png"><source](https://cursor.com/assets/images/view-automation-dark.png"><source){kind=link}
![https://cursor.com/assets/images/view-automation-light.png"><img](https://cursor.com/assets/images/view-automation-light.png"><img){kind=link}
![https://cursor.com/assets/images/view-automation-dark.png"></picture></a> </div](https://cursor.com/assets/images/view-automation-dark.png"></picture></a> </div){kind=link}
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Temporarily updates
@metamask/design-system-react,@metamask/design-system-shared,@metamask/design-system-tailwind-preset, and@metamask/design-tokensto their@metamask-previewsbuilds in order to test the Text component changes in MetaMask/metamask-design-system#1047.Preview packages used (commit
4ce710b):@metamask/design-system-react→@metamask-previews/design-system-react@0.14.0-preview.4ce710b@metamask/design-system-shared→@metamask-previews/design-system-shared@0.7.0-preview.4ce710b@metamask/design-system-tailwind-preset→@metamask-previews/design-system-tailwind-preset@0.6.1-preview.4ce710b@metamask/design-tokens→@metamask-previews/design-tokens@8.3.0-preview.4ce710bDo not merge. This branch is for testing purposes only and should be closed once the upstream PR is merged.
Changelog
CHANGELOG entry: null
Related issues
Fixes: N/A — testing upstream: MetaMask/metamask-design-system#1047
Manual testing steps
Textcomponent from@metamask/design-system-reactScreenshots/Recordings
Before
After
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Medium Risk
Swaps core UI dependencies to preview
@metamask-previews/*builds, which may subtly change styling/behavior across the app despite limited code changes. Risk is mainly around UI regressions and lockfile resolution changes rather than runtime/security logic.Overview
Temporarily repoints
@metamask/design-system-*and@metamask/design-tokensto@metamask-previewsbuilds (via bothdependenciesandresolutions) to validate upstream design-systemTextchanges.Updates
yarn.lockaccordingly (including pulling in previewdesign-system-sharedand bumping@metamask/utilsto satisfy new peer ranges) and refreshes Jest snapshots to match updated checkbox focus styling (peer/peer-focus-visibleclasses).Reviewed by Cursor Bugbot for commit a24aedb. Bugbot is set up for automated code reviews on this repo. Configure here.