test: preview design-system Text component changes [DO NOT MERGE]#28575
Draft
georgewrmarshall wants to merge 8 commits intomainfrom
Draft
test: preview design-system Text component changes [DO NOT MERGE]#28575georgewrmarshall wants to merge 8 commits intomainfrom
georgewrmarshall wants to merge 8 commits intomainfrom
Conversation
…-design-system#1047) Temporarily updates @metamask/design-system-react-native, @metamask/design-system-shared, @metamask/design-system-twrnc-preset, and @metamask/design-tokens to their @metamask-previews builds in order to test the Text component changes in MetaMask/metamask-design-system#1047. Do not merge. This branch is for testing purposes only.
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
georgewrmarshall
changed the title
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
…tro.config changes
7 tasks
Contributor
🔍 Smart E2E Test Selection⏭️ Smart E2E selection skipped - draft PR All E2E tests pre-selected. |
Contributor
|
✅ E2E Fixture Validation — Schema is up to date |
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-native,@metamask/design-system-shared,@metamask/design-system-twrnc-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-native→@metamask-previews/design-system-react-native@0.14.0-preview.4ce710b@metamask/design-system-shared→@metamask-previews/design-system-shared@0.7.0-preview.4ce710b@metamask/design-system-twrnc-preset→@metamask-previews/design-system-twrnc-preset@0.4.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-react-nativeScreenshots/Recordings
Before
After
No visual changes
design-tokens.pure.black.before720.mov
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Medium Risk
Swaps core UI dependencies (
@metamask/design-system-*and@metamask/design-tokens) to preview builds, which can introduce rendering/styling regressions or subtle runtime issues across the app. Also updates Jest transform ignore patterns for these new packages, affecting test compilation behavior.Overview
Updates the app to use
@metamask-previewsbuilds of the design system packages by aliasing@metamask/design-system-react-native,@metamask/design-system-twrnc-preset, and@metamask/design-tokensto preview versions and adding direct preview dependencies (plus lockfile updates).Adjusts
jest.config.jstransformIgnorePatternsto ensure the new@metamask-previews/*packages are transpiled during tests.Reviewed by Cursor Bugbot for commit c1dad87. Bugbot is set up for automated code reviews on this repo. Configure here.