feat(dsr): add Content React parity (DSYS-1043) by cursor[bot] · Pull Request #1436 · MetaMask/metamask-design-system

cursor · 2026-08-07T18:40:24Z

Description

Adds React (@metamask/design-system-react) Content parity for epic DSYS-302 / DSYS-1043, matching the existing React Native + shared ContentVariant consumer API.

Implementation follows the flatter parity strategy: direct Box + leaf Text / SensitiveText (no React BoxRow / BoxColumn / TextOrChildren). Shared types already existed; this PR only adds the React platform layer, stories, tests, and docs.

Audit comparison (Phase 1)

Concern	Extension / web API	Mobile / RN (MMDS) API	Decision
Component name	No `Content` in `component-library`. Nearest analogues: legacy `ui/components/ui/list-item` (`title`, `subtitle`, `icon`, `rightContent`) and product rows like `TokenListItem` (`title`, `primary`, `secondary`, `privacyMode`)	`Content` with `variant`, `avatar`, `title` / `description` / `value` / `subvalue` + inline accessories	Keep MMDS `Content` name in DSR; Extension list-item variants are differently named consumers
Prop names	`subtitle`, `rightContent`, `icon`, `midContent`	`description`, `value` / `subvalue`, `avatar`, `StartAccessory` / `EndAccessory`	Unified to RN/shared API (new React surface; no Extension `Content` consumers)
Types / variants / sizes	CSS modifiers (`list-item--single-content-row`); no shared variant enum	`ContentVariant` (`one-line` / `two-lines` / `multi-line`)	Reuse shared `ContentVariant`
Privacy masking	Ad-hoc `SensitiveText` / `privacyMode` in product rows	`descriptionProps` / `valueProps` / `subvalueProps` support `isHidden` / `length` via `SensitiveText`	Match RN: string slots for description/value/subvalue use `SensitiveText`; title uses `Text`
Event handlers	`onClick` on interactive list shells	N/A on Content (layout-only); ListItem owns press	Platform keep both when interactive shells land
Styling	`className`	`twClassName`	Platform layer only (`className` on React)

Answers

Shared vs platform: Shared: variant, slots, accessories. Platform: className / style, React Box/Text/SensitiveText prop bags. DOM title omitted from BoxProps so Content title?: ReactNode wins.
Naming conflicts: Extension subtitle → MMDS description; no disabled/isDisabled on Content.
Strategy: Unified for the new React API (align to RN/shared). Extension product rows remain conservative / Phase 2 migration maps when ListItem lands.
Mapping: React parity belongs under Content. Extension counterparts are differently named list-item variants, not a drop-in rename.

Known gaps

Jira claim/transition for DSYS-1043 was blocked in this run (Atlassian MCP OAuth required).
React ListItem (DSYS-713) still outstanding; Content docs note ListItem as the padded shell once available on React.
No React BoxRow/BoxColumn/TextOrChildren were introduced (intentional).

Related issues

Fixes: DSYS-1043 (parent epic DSYS-302)

Manual testing steps

yarn storybook (port 6006)
Open React Components → Content
Exercise Default, Variant, Subvalue, Avatar, and Value Props (isHidden)
Confirm light/dark themes and accessory stories render without errors

Screenshots/Recordings

Before

N/A — React Content did not exist.

After

content.after.mov

content.stories.after.mov

Storybook Default (shell):

Content Default story in Storybook

Default iframe (light + dark):

Content Default light and dark

Variant story (OneLine / TwoLines / MultiLine):

Content Variant stories

Subvalue story:

Content Subvalue story

Avatar story:

Content Avatar story

Value Props (isHidden):

Content ValueProps hidden masking

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

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.

_{To show artifacts inline, enable in settings.}

Note

Low Risk
New presentational design-system component with tests and docs; no auth, data, or consumer-breaking changes.

Overview
Adds the React Content component to @metamask/design-system-react, bringing list-row layout parity with the existing React Native API and shared ContentVariant.

Content is a layout-only inner row: optional avatar, left title/description, right value/subvalue, plus start/end accessories. String slots for description/value/subvalue use SensitiveText (with isHidden / length); title uses Text. Variants control which secondary slots render and vertical alignment (OneLine / TwoLines / MultiLine).

Includes Storybook stories, unit tests, docs, and package exports. Shared types already existed; this PR only adds the React platform layer.

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

Add design-system-react Content matching the shared ContentVariant API and React Native consumer props, implemented with a flatter Box + Text / SensitiveText layout (no BoxRow/BoxColumn/TextOrChildren). Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

github-actions · 2026-08-07T18:41:59Z

📖 Storybook Links

Compare the preview for this pull request with the latest Storybooks from the main branch.

🔀 Pull Request Preview

🖥️ React
📱 React Native

🌳 Main Branch (Latest)

🖥️ React
📱 React Native

…lease Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

github-actions · 2026-08-07T19:27:43Z

📖 Storybook Links

Compare the preview for this pull request with the latest Storybooks from the main branch.

🔀 Pull Request Preview

🖥️ React
📱 React Native

🌳 Main Branch (Latest)

🖥️ React
📱 React Native

github-actions · 2026-08-11T22:34:00Z

📖 Storybook Links

Compare the preview for this pull request with the latest Storybooks from the main branch.

🔀 Pull Request Preview

🖥️ React
📱 React Native

🌳 Main Branch (Latest)

🖥️ React
📱 React Native

cursor

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

There are 4 total unresolved issues (including 3 from previous reviews).

^{❌ 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 e5df756. Configure here.}

- Omit w-full on value/subvalue TextRows so the right column end-aligns - Remove padded/background story decorator - Import BoxProps/TextProps from sibling barrels - Align README quick-start with Default story args Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

github-actions · 2026-08-11T22:42:46Z

📖 Storybook Links

Compare the preview for this pull request with the latest Storybooks from the main branch.

🔀 Pull Request Preview

🖥️ React
📱 React Native

🌳 Main Branch (Latest)

🖥️ React
📱 React Native

georgewrmarshall reviewed Aug 7, 2026

View reviewed changes

Comment thread packages/design-system-react/CHANGELOG.md Outdated

chore(dsr): remove CHANGELOG edits; changelog is maintained during re…

aa8ac73

…lease Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

This was referenced Aug 8, 2026

feat(dsr): add ListItem React parity (DSYS-713) #1439

Draft

feat(dsr): add SectionHeader React parity (DSYS-751) #1440

Draft

feat(dsr): add SectionDivider React parity (DSYS-750) #1441

Draft

feat(dsr): add HeaderRoot React parity (DSYS-757) #1443

Draft

georgewrmarshall marked this pull request as ready for review August 11, 2026 22:27

georgewrmarshall requested a review from a team as a code owner August 11, 2026 22:27

georgewrmarshall enabled auto-merge (squash) August 11, 2026 22:27

cursor Bot commented Aug 11, 2026

View reviewed changes

Comment thread packages/design-system-react/src/components/Content/Content.tsx

Comment thread packages/design-system-react/src/components/Content/Content.stories.tsx Outdated

Comment thread packages/design-system-react/src/components/Content/Content.types.ts Outdated

georgewrmarshall previously approved these changes Aug 11, 2026

View reviewed changes

Merge branch 'main' into cursor/react-parity-from-mobile-c4d1

e5df756

georgewrmarshall disabled auto-merge August 11, 2026 22:35

cursor Bot commented Aug 11, 2026

View reviewed changes

Comment thread packages/design-system-react/src/components/Content/README.mdx Outdated

cursor Bot dismissed georgewrmarshall’s stale review via 3e7bf76 August 11, 2026 22:41

Navigation Menu

Repository navigation

feat(dsr): add Content React parity (DSYS-1043) - #1436

feat(dsr): add Content React parity (DSYS-1043)#1436
cursor[bot] wants to merge 4 commits into
mainfrom
cursor/react-parity-from-mobile-c4d1

cursor Bot commented Aug 7, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Aug 7, 2026

Uh oh!

Uh oh!

github-actions Bot commented Aug 7, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Aug 11, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

Uh oh!

github-actions Bot commented Aug 11, 2026

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

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

Uh oh!

Description

Audit comparison (Phase 1)

Known gaps

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Aug 7, 2026

📖 Storybook Links

🔀 Pull Request Preview

🌳 Main Branch (Latest)

Uh oh!

Uh oh!

github-actions Bot commented Aug 7, 2026

📖 Storybook Links

🔀 Pull Request Preview

🌳 Main Branch (Latest)

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Aug 11, 2026

📖 Storybook Links

🔀 Pull Request Preview

🌳 Main Branch (Latest)

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Aug 11, 2026

📖 Storybook Links

🔀 Pull Request Preview

🌳 Main Branch (Latest)

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

cursor Bot commented Aug 7, 2026 •

edited

Loading