feat: [DSRN] Added SectionHeader#1175
Merged
Merged
Conversation
Contributor
📖 Storybook Preview |
Contributor
📖 Storybook Preview |
Contributor
📖 Storybook Preview |
…o dsrn/section-header
Contributor
📖 Storybook Preview |
Contributor
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ 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 ccbb46a. Configure here.
Contributor
📖 Storybook Preview |
amandaye0h
previously approved these changes
May 15, 2026
Contributor
📖 Storybook Preview |
kirillzyusko
previously approved these changes
May 15, 2026
…sign-system into dsrn/section-header
335bb84
Contributor
📖 Storybook Preview |
vinnyhoward
approved these changes
May 15, 2026
georgewrmarshall
pushed a commit
that referenced
this pull request
May 20, 2026
## Release 41.0.0 This release adds mobile layout components (`TitleAlert`, `SectionHeader`, `SectionDivider`), exports shared types for the new cross-platform contracts, and updates the `Telegram` icon asset on web and mobile. There are no breaking API changes. ### 📦 Package Versions - `@metamask/design-system-shared`: **0.19.0** - `@metamask/design-system-react`: **0.23.1** - `@metamask/design-system-react-native`: **0.26.0** ### 🔄 Shared Type Updates (0.19.0) #### Component Type Additions ([#1131](#1131), [#1175](#1175)) **What Changed:** - Exported `TitleAlertPropsShared` for alert-style title layouts (severity, title row, optional description) - Exported `SectionHeaderPropsShared` for section headings with optional accessories and icon shortcuts - Updated the shared `Telegram` icon asset to match the official Telegram logo ([#1176](#1176)) **Impact:** - Enables consistent `TitleAlert` and `SectionHeader` implementations across React and React Native - Continues ADR-0003/ADR-0004 const-object + string-union pattern adoption - Apps using `IconName.Telegram` on either platform get the updated glyph without API changes ### 🌐 React Web Updates (0.23.1) #### Changed - Updated the `Telegram` icon asset to match the official Telegram logo ([#1176](#1176)) ### 📱 React Native Updates (0.26.0) #### Added - Added `TitleAlert` for alert-style headings with a severity icon, title row, and optional description in modals, bottom sheets, and other compact surfaces ([#1131](#1131)) - Added `SectionHeader` for section titles with optional start and end accessories, icon shortcuts, and an inline title accessory ([#1175](#1175)) - Added `SectionDivider` as a horizontal rule with a muted top border and default vertical spacing for separating screen sections ([#1174](#1174)) #### Changed - Updated the `Telegram` icon asset to match the official Telegram logo ([#1176](#1176)) ###⚠️ Breaking Changes None in this release. ### ✅ Checklist - [x] Changelogs updated with human-readable descriptions - [x] Changelog validation passed (`yarn changelog:validate`) - [x] Version bumps follow semantic versioning - [x] design-system-shared: **minor** (0.18.0 → 0.19.0) — new shared type exports + icon asset update - [x] design-system-react: **patch** (0.23.0 → 0.23.1) — `Telegram` icon asset update only - [x] design-system-react-native: **minor** (0.25.0 → 0.26.0) — new components + icon asset update - [x] Breaking changes documented with migration guidance — N/A (no breaking changes) - [x] Migration guides updated with before/after examples — N/A (no breaking changes) - [x] PR references included in changelog entries ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) - [x] I've reviewed the [Release Workflow](./.cursor/rules/release-workflow.md) cursor rule - [x] All tests pass (`yarn build && yarn test && yarn lint`) - [x] Changelog validation passes (`yarn changelog:validate`) ## **Pre-merge reviewer checklist** - [ ] I've reviewed the [Reviewing Release PRs](./docs/reviewing-release-prs.md) guide - [ ] Package versions follow semantic versioning - [ ] Changelog entries are consumer-facing (not commit message regurgitation) - [ ] Breaking changes are documented in MIGRATION.md with examples — N/A - [ ] All unreleased changes are accounted for in changelogs
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
4 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
This PR adds
SectionHeaderto@metamask/design-system-react-native, a horizontal row for section titles with optional start/end icons or custom accessories and an optional title inline accessory (titleAccessory).Figma Link: https://www.figma.com/design/1D6tnzXqWgnUC3spaAOELN/branch/i0yqn71LpKHyOdlQFBXJpe/%F0%9F%A6%8A-MMDS-Components?m=auto&node-id=12135-740&t=yxu0vfJ3yYix0gji-1
Related issues
Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-584
Manual testing steps
yarn workspace @metamask/design-system-react-native run testand confirm all tests pass (includingSectionHeader).yarn storybook:iosoryarn storybook:android), open Components → SectionHeader, and verify Default (interactivetitle/ icon controls) plus stories for StartIconName, EndIconName, TitleAccessory, StartAccessory, and EndAccessory render as expected on device.yarn build:types(or your CI equivalent) afteryarn workspace @metamask/design-system-shared run buildif needed soSectionHeaderPropsSharedresolves indisttypings for consumers.Screenshots/Recordings
Before
After
Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-05-14.at.22.01.01.mov
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Low Risk
Low risk: this is a new, self-contained UI component with additive exports and scoped styling behavior, plus unit tests and Storybook coverage.
Overview
Adds a new
SectionHeadercomponent to@metamask/design-system-react-nativethat renders a horizontal header row with an optional title row, optional inlinetitleAccessory, and optional start/end icons (falling back to custom accessories) while forwarding outerViewPropsand supportingtwClassNamestyling.Introduces
SectionHeaderPropsSharedin@metamask/design-system-sharedand wires up package exports, along with comprehensive README docs, Storybook stories, and unit tests covering rendering, prop precedence (icon vs accessory), and basic layout/style merging.Reviewed by Cursor Bugbot for commit 335bb84. Bugbot is set up for automated code reviews on this repo. Configure here.