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

cursor · 2026-08-09T16:10:10Z

Description

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

Queue note: Content (DSYS-1043, PR #1436) and ListItem (DSYS-713, PR #1439) already have open draft PRs, so this run took the next priority-queue item (SectionHeader). Jira MCP could not be authenticated in this cloud environment (interactive OAuth unavailable), so the ticket was not auto-assigned/transitioned.

Implementation follows the flatter parity strategy: direct Box / Text / Icon (no React BoxRow). Interactive rows use role="button", onClick, Enter/Space activation, and active:opacity-70 (matching RN pressed opacity).

SectionHeader Audit & Insight Report

https://www.figma.com/board/V2fkXytJJjljIjLqG4sYT1/Section-Header-Audit---Insight-Report?node-id=0-1&t=cuG8k8eROPkPvLUc-1

Audit comparison (Phase 1)

Concern	Extension / web API	Mobile / RN (MMDS) API	Decision
Component name / location	Legacy `ui/components/ui/section-header` (`label`, `className`) — thin wrapper already importing DSR `Box`/`Text`. Not in `component-library`.	MMDS `SectionHeader` with `title`, accessories, icons, `children`, `isInteractive`	Keep MMDS `SectionHeader` name in DSR; Extension local wrapper is a differently shaped consumer
Prop names	`label` only	`title`, `titleAccessory`, `startAccessory`/`endAccessory`, `startIconName`/`endIconName`, `children`, `isInteractive`	Unified to RN/shared API for the new React surface
Types / variants / sizes	Body-sm alternative text styling	`TextVariant.HeadingMd` + `TextColor.TextDefault` for string titles	Match RN/shared heading styles
Interaction	None (static)	`isInteractive` + `onPress` + default `ArrowRight` end icon	Web: `isInteractive` + `onClick` + `role="button"` + Enter/Space; keep platform event names
Styling	`className`	`twClassName`	Platform layer only (`className` on React)
Internal helpers	N/A	RN uses `BoxRow` for rows	Do not port `BoxRow` to React; use direct `Box` flex rows

Answers

Shared vs platform: Shared: title, titleAccessory, children, startAccessory/endAccessory, startIconName/endIconName. Platform: className/style, titleProps/titleWrapperProps/*IconProps, isInteractive, onClick (web) vs onPress (RN).
Naming conflicts: Extension label → MMDS title. No disabled vs isDisabled conflict; interactive disabled is platform HTML/Pressable.
Strategy: Unified for the new React API (align to RN/shared). Extension’s local SectionHeader remains a Phase 2 consumer migration (label → title, adopt richer props).
Mapping: React parity belongs under SectionHeader in DSR. Extension ui/components/ui/section-header is a thin namesake, not the MMDS API.

Known gaps (Phase 2)

Extension ui/components/ui/section-header still uses label + body-sm styling; migrate consumers to DSR SectionHeader separately.
isInteractive remains platform-discriminated (same as RN types today), not yet on SectionHeaderPropsShared.

Related issues

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

Manual testing steps

yarn storybook (port 6006).
Open React Components / SectionHeader.
Verify Default, StartIconName, EndIconName, accessories, Children, and IsInteractive stories.
Confirm interactive story is keyboard-activatable (Enter/Space) and shows default ArrowRight end icon.

Screenshots/Recordings

Before

N/A — component did not exist in @metamask/design-system-react.

After

SectionHeader Default story
SectionHeader StartIconName story
SectionHeader EndIconName story
SectionHeader TitleAccessory story
SectionHeader Children story
SectionHeader IsInteractive story

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.}

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

github-actions · 2026-08-09T16:11:47Z

📖 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-09T16:11:51Z

📖 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-10T21:10: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

github-actions · 2026-08-10T21:48:10Z

📖 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-11T00:27:12Z

📖 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 · 2026-08-11T16:02:25Z

 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

-## [Unreleased]
-


@cursoragent remove all changes to this file revert it to the one from main branch

Reverted packages/design-system-react/CHANGELOG.md to match origin/main (restored “Unreleased” + 0.35.2 section and link refs).

Committed as: “chore(dsr): revert design-system-react CHANGELOG to match main”.

Pushed to cursor/react-parity-from-mobile-7460 and updated PR #1440.

georgewrmarshall · 2026-08-11T16:06:22Z

@metamaskbot publish-preview

github-actions · 2026-08-11T16:07:38Z

📖 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-11T16:08:14Z

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.35.1-preview.a9a176d8",
  "@metamask-previews/design-system-react-native": "0.39.0-preview.a9a176d8",
  "@metamask-previews/design-system-shared": "0.32.0-preview.a9a176d8",
  "@metamask-previews/design-system-tailwind-preset": "0.10.0-preview.a9a176d8",
  "@metamask-previews/design-system-twrnc-preset": "0.8.0-preview.a9a176d8",
  "@metamask-previews/design-tokens": "8.7.0-preview.a9a176d8"
}

Bring design-system-react SectionHeader in line with the RN/shared consumer API using a flatter Box/Text/Icon implementation (no BoxRow). Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

Markdown pipe tables render as raw text in Storybook docs. Co-authored-by: Cursor <cursoragent@cursor.com>

…tionHeader Interactive rows dim with opacity instead of using the hover and pressed background tokens the other interactive React components use. Co-authored-by: Cursor <cursoragent@cursor.com>

Design guidance specifies hover and pressed feedback at 0.8 opacity, not background hover/pressed tokens. Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions · 2026-08-11T16:16: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 Bot pushed a commit that referenced this pull request Aug 9, 2026

chore(dsr): link SectionHeader changelog entry to PR #1440

6138df7

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

cursor Bot mentioned this pull request Aug 10, 2026

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

Draft

6 tasks

georgewrmarshall reviewed Aug 11, 2026

View reviewed changes

cursoragent and others added 4 commits August 11, 2026 09:13

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

a6aaaba

Bring design-system-react SectionHeader in line with the RN/shared consumer API using a flatter Box/Text/Icon implementation (no BoxRow). Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

docs(dsr): use HTML tables in SectionHeader and ModalContent docs

911404a

Markdown pipe tables render as raw text in Storybook docs. Co-authored-by: Cursor <cursoragent@cursor.com>

fix(dsr): use hover and pressed background colors for interactive Sec…

397545e

…tionHeader Interactive rows dim with opacity instead of using the hover and pressed background tokens the other interactive React components use. Co-authored-by: Cursor <cursoragent@cursor.com>

fix(dsr): use 80% opacity for interactive SectionHeader hover and press

7f3914e

Design guidance specifies hover and pressed feedback at 0.8 opacity, not background hover/pressed tokens. Co-authored-by: Cursor <cursoragent@cursor.com>

georgewrmarshall force-pushed the cursor/react-parity-from-mobile-7460 branch from a9a176d to 7f3914e Compare August 11, 2026 16:14

cursor Bot mentioned this pull request Aug 11, 2026

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

Draft

6 tasks

Navigation Menu

Uh oh!

Uh oh!

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

feat(dsr): add SectionHeader React parity (DSYS-751)#1440
cursor[bot] wants to merge 4 commits into
mainfrom
cursor/react-parity-from-mobile-7460

cursor Bot commented Aug 9, 2026 •

edited by georgewrmarshall

Loading

Uh oh!

github-actions Bot commented Aug 9, 2026

Uh oh!

github-actions Bot commented Aug 9, 2026

Uh oh!

github-actions Bot commented Aug 10, 2026

Uh oh!

github-actions Bot commented Aug 10, 2026

Uh oh!

github-actions Bot commented Aug 11, 2026

Uh oh!

georgewrmarshall Aug 11, 2026

Uh oh!

cursor Bot Aug 11, 2026 •

edited

Loading

Uh oh!

georgewrmarshall commented Aug 11, 2026

Uh oh!

github-actions Bot commented Aug 11, 2026

Uh oh!

github-actions Bot commented Aug 11, 2026

Uh oh!

github-actions Bot commented Aug 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

		## [Unreleased]

Uh oh!

Uh oh!

Conversation

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

Uh oh!

Description

SectionHeader Audit & Insight Report

Audit comparison (Phase 1)

Known gaps (Phase 2)

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Aug 9, 2026

📖 Storybook Links

🔀 Pull Request Preview

🌳 Main Branch (Latest)

Uh oh!

github-actions Bot commented Aug 9, 2026

📖 Storybook Links

🔀 Pull Request Preview

🌳 Main Branch (Latest)

Uh oh!

github-actions Bot commented Aug 10, 2026

📖 Storybook Links

🔀 Pull Request Preview

🌳 Main Branch (Latest)

Uh oh!

github-actions Bot commented Aug 10, 2026

📖 Storybook Links

🔀 Pull Request Preview

🌳 Main Branch (Latest)

Uh oh!

github-actions Bot commented Aug 11, 2026

📖 Storybook Links

🔀 Pull Request Preview

🌳 Main Branch (Latest)

Uh oh!

georgewrmarshall Aug 11, 2026

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall commented Aug 11, 2026

Uh oh!

github-actions Bot commented Aug 11, 2026

📖 Storybook Links

🔀 Pull Request Preview

🌳 Main Branch (Latest)

Uh oh!

github-actions Bot commented Aug 11, 2026

Uh oh!

github-actions Bot commented Aug 11, 2026

📖 Storybook Links

🔀 Pull Request Preview

🌳 Main Branch (Latest)

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

cursor Bot commented Aug 9, 2026 •

edited by georgewrmarshall

Loading

cursor Bot Aug 11, 2026 •

edited

Loading