feat(DSYS-489): Migrate Text to ADR-0003 and ADR-0004 by cursor[bot] · Pull Request #1047 · MetaMask/metamask-design-system

cursor · 2026-04-07T16:29:01Z

Description

This PR migrates the Text component to align with ADR-0003 (String Unions) and ADR-0004 (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

Manual testing steps

Run yarn build — all packages build successfully
Run yarn test — all tests pass with 100% coverage on changed components
Verify TextVariant is importable from @metamask/design-system-shared
Verify TextColor is importable from @metamask/design-system-shared
Verify TextPropsShared is importable from @metamask/design-system-shared

Screenshots/Recordings

Before

TextVariant and TextColor were duplicated enums in both design-system-react and design-system-react-native src/types/index.ts. FontWeight, FontFamily, FontStyle etc. were also enums.

After

TextVariant and TextColor (common subset) are shared const objects in @metamask/design-system-shared. Platform packages extend TextColor with their platform-specific values. All other Text-related enums converted to const objects.

Text component in storybook works as expected and no visual regressions picked up in Chromatic run

text.migration.after.720.mov

Pre-merge author checklist

I've followed 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 format if applicable
I've applied the right labels on the PR (see labeling guidelines). 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.

Note

Medium Risk
Medium risk because it changes exported Text* types (enums → const string-union objects) and updates many imports across React/React Native, which can cause downstream type/runtime mismatches if any consumers relied on old enum values or CSS class names.

Overview
Migrates Text typing to centralized shared types by introducing FontWeight, FontStyle, FontFamily, TextVariant, TextColor, and TextPropsShared in @metamask/design-system-shared, and updating both React and React Native components/tests/stories to import these directly.

On web, Text now maps shared semantic font props to platform-specific Tailwind classes via new MAP_FONT* helpers, and React src/types removes the old Text* enums (converting TextAlign/OverflowWrap/TextTransform to const+union types). Storybook Tailwind scanning is expanded to include design-system-shared, and internal docs add guidance to import shared types from the shared package to avoid circular deps.

^{Reviewed by Cursor Bugbot for commit 71b6ea1. Bugbot is set up for automated code reviews on this repo. Configure here.}

github-actions · 2026-04-07T16:30:10Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-04-07T21:36:30Z

📖 Storybook Preview

View PR Storybook

packages/design-system-shared/src/types/Text/Text.types.ts

github-actions · 2026-04-07T21:46:02Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-04-07T21:48:04Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-04-07T22:00:51Z

📖 Storybook Preview

View PR Storybook

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

There are 2 total unresolved issues (including 1 from previous review).

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit ebc9dd5. Configure here.}

packages/design-system-react-native/src/components/HeaderRoot/HeaderRoot.stories.tsx

- Add TextVariant const object to shared (identical across React and RN) - Add TextColor const object to shared (common colors across platforms) - Add TextPropsShared to shared (variant, children, color) - React: TextColor extends shared + adds hover states (PrimaryDefaultHover, ErrorDefaultHover, SuccessDefaultHover, WarningDefaultHover) and Inherit - RN: TextColor extends shared + adds PrimaryAlternative - FontWeight, FontFamily, FontStyle remain platform-specific (different values) - TextAlign, OverflowWrap, TextTransform are React-only (Tailwind-specific) - Platform enums converted to const objects in types/index.ts - Text.types.ts in both packages now extends TextPropsShared - Component index.ts exports TextVariant/TextPropsShared from shared DSYS-489 Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

…ypes - Add FontWeight, FontFamily, FontStyle const objects and types to design-system-shared with semantic values - Remove platform-specific FontWeight/FontFamily/FontStyle from both platform types/index.ts - Add MAP_FONTWEIGHT_CLASS, MAP_FONTFAMILY_CLASS, MAP_FONTSTYLE_CLASS constants to React Web Text component - Update React Web Text.tsx to use mapping constants for Tailwind class resolution - Update React Native Text.constants.ts to use explicit FontWeight values instead of design token casts - Export Font* types directly from shared in both platform Text/index.ts files - Update React Web Text tests to assert mapped CSS classes

…types/index.ts Move TextVariant, TextColor, FontWeight, FontStyle, FontFamily imports from ../../types to @metamask/design-system-shared across all consumer files in both React and React Native packages. Remove the re-export stubs from both platform types/index.ts files.

…-system-shared

TextColor const values (e.g. 'text-primary-default-hover') are now defined in @metamask/design-system-shared rather than design-system-react/src/types. Add the shared package to the Storybook Tailwind content paths so JIT generates CSS for all color literal strings found in the shared source.

github-actions · 2026-04-07T23:04:10Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2026-04-07T23:15:40Z

@metamaskbot publish-preview

github-actions · 2026-04-07T23:17:22Z

Preview builds have been published. See these instructions for more information about preview builds.

Expand for full list of packages and versions.

{
  "@metamask-previews/design-system-react": "0.14.0-preview.dff9dce",
  "@metamask-previews/design-system-react-native": "0.14.0-preview.dff9dce",
  "@metamask-previews/design-system-shared": "0.7.0-preview.dff9dce",
  "@metamask-previews/design-system-tailwind-preset": "0.6.1-preview.dff9dce",
  "@metamask-previews/design-system-twrnc-preset": "0.4.1-preview.dff9dce",
  "@metamask-previews/design-tokens": "8.3.0-preview.dff9dce"
}

github-actions · 2026-04-07T23:23:16Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2026-04-07T23:25:02Z

packages/design-system-react-native/src/components/Text/Text.types.ts

+    /**
+     * Optional prop to control the font weight of the text.
+     * Normal: 400
+     * Medium: 500
+     * Bold: 600
+     */
+    fontWeight?: FontWeight;
+    /**
+     * Optional prop to adjust the font family.
+     * Default: Geist
+     * Accent: MM Sans
+     * Hero: MM Poly
+     */
+    fontFamily?: FontFamily;
+    /**
+     * Optional prop to adjust the style of the font.
+     */
+    fontStyle?: FontStyle;


Should be able to move these into TextPropsShared

cursor bot commented Apr 7, 2026

View reviewed changes

packages/design-system-shared/src/types/Text/Text.types.ts Show resolved Hide resolved

georgewrmarshall force-pushed the cursor/enum-shared-type-migration-1f3a branch from b23ac6d to 25b28ad Compare April 7, 2026 21:46

cursor bot commented Apr 7, 2026

View reviewed changes

packages/design-system-react-native/src/components/HeaderRoot/HeaderRoot.stories.tsx Outdated Show resolved Hide resolved

cursoragent and others added 10 commits April 7, 2026 16:02

chore: aligning text color

185bce2

chore: export TextColor from shared in Text component index files

3f52e2d

docs: document shared type import rule in component-architecture

a91a3b9

docs: fix prettier formatting in component-architecture

b665a59

fix: update temp-component stories to import shared types from design…

7ad87cc

…-system-shared

fix: fix import ordering in temp-component stories

fa702b8

georgewrmarshall self-assigned this Apr 7, 2026

georgewrmarshall force-pushed the cursor/enum-shared-type-migration-1f3a branch from 116713a to dff9dce Compare April 7, 2026 23:03

docs(text): document TextColor.Inherit as web-only

4c0193a

georgewrmarshall added 2 commits April 7, 2026 16:21

docs(text): document hover TextColor values as web interaction state

7e14dfe

fix: jsdoc formatting

71b6ea1

georgewrmarshall reviewed Apr 7, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(DSYS-489): Migrate Text to ADR-0003 and ADR-0004#1047

feat(DSYS-489): Migrate Text to ADR-0003 and ADR-0004#1047
cursor[bot] wants to merge 13 commits intomainfrom
cursor/enum-shared-type-migration-1f3a

cursor bot commented Apr 7, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 7, 2026

Uh oh!

github-actions bot commented Apr 7, 2026

Uh oh!

Uh oh!

github-actions bot commented Apr 7, 2026

Uh oh!

github-actions bot commented Apr 7, 2026

Uh oh!

github-actions bot commented Apr 7, 2026

Uh oh!

cursor bot left a comment

Uh oh!

Uh oh!

github-actions bot commented Apr 7, 2026

Uh oh!

georgewrmarshall commented Apr 7, 2026

Uh oh!

github-actions bot commented Apr 7, 2026

Uh oh!

github-actions bot commented Apr 7, 2026

Uh oh!

georgewrmarshall Apr 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

cursor bot commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changes

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented Apr 7, 2026

📖 Storybook Preview

Uh oh!

github-actions bot commented Apr 7, 2026

📖 Storybook Preview

Uh oh!

Uh oh!

github-actions bot commented Apr 7, 2026

📖 Storybook Preview

Uh oh!

github-actions bot commented Apr 7, 2026

📖 Storybook Preview

Uh oh!

github-actions bot commented Apr 7, 2026

📖 Storybook Preview

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Apr 7, 2026

📖 Storybook Preview

Uh oh!

georgewrmarshall commented Apr 7, 2026

Uh oh!

github-actions bot commented Apr 7, 2026

Uh oh!

github-actions bot commented Apr 7, 2026

📖 Storybook Preview

Uh oh!

georgewrmarshall Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

cursor bot commented Apr 7, 2026 •

edited

Loading