feat: [DSRN] Added SectionDivider by brianacnguyen · Pull Request #1174 · MetaMask/metamask-design-system

brianacnguyen · 2026-05-15T05:34:05Z

Description

This PR adds SectionDivider to @metamask/design-system-react-native, a small forwardRef wrapper around Box so teams get a consistent horizontal rule without re-specifying tokens each time.

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-575

Manual testing steps

From the repo root, run React Native Storybook, e.g. yarn storybook:ios or yarn storybook:android.
Open Components → SectionDivider and confirm the Default story: divider between “Above” / “Below” with muted line and vertical spacing.
In the app or a local screen, render <SectionDivider /> inside a column Box and confirm it stretches to the content width and respects overrides (e.g. marginVertical={0}, borderColor, twClassName).
(Optional) yarn workspace @metamask/design-system-react-native run build and yarn workspace @metamask/design-system-react-native run test -- src/components/SectionDivider/SectionDivider.test.tsx (or your team’s Jest invocation).

Screenshots/Recordings

Before

N/A — new component.

After

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-05-14.at.22.28.16.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

Low Risk
Adds a new presentational component plus docs/stories/tests and a barrel export; no changes to existing business logic or security-sensitive code.

Overview
Introduces SectionDivider, a small forwardRef wrapper around Box that standardizes a horizontal divider with default border-t + muted color, my-5 spacing, and self-stretch, while still allowing overrides via borderWidth (mapped to border-t-*), borderColor, twClassName, and style.

Adds Storybook coverage, a Jest test suite for default/override behavior and ref forwarding, component docs, and exports the new component from the main components index.

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

github-actions · 2026-05-15T05:35:17Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-05-15T05:46:31Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-05-15T14:41:07Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-05-15T15:30:09Z

📖 Storybook Preview

View PR Storybook

…esign-system into dsrn/section-divider

github-actions · 2026-05-15T15:50:58Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-05-15T16:08:57Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-05-15T16:31:17Z

📖 Storybook Preview

View PR Storybook

cursor

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 cdf08b9. Configure here.}

github-actions · 2026-05-15T16:44:40Z

📖 Storybook Preview

View PR Storybook

## 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

brianacnguyen added 2 commits May 14, 2026 22:30

feat: Added SectionDivider to DSRN

c083bfa

Removed unnecessary imports

2ac6855

brianacnguyen self-assigned this May 15, 2026

brianacnguyen requested a review from a team as a code owner May 15, 2026 05:34

brianacnguyen added the team-design-system label May 15, 2026

cursor Bot reviewed May 15, 2026

View reviewed changes

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

Removed unused imports from stories

f0ca0b4

cursor Bot reviewed May 15, 2026

View reviewed changes

Comment thread packages/design-system-react-native/src/components/SectionDivider/SectionDivider.tsx Outdated

Address bugbot comments

8c312a4

Merge branch 'main' into dsrn/section-divider

24fdf28

cursor Bot reviewed May 15, 2026

View reviewed changes

Comment thread packages/design-system-react-native/src/components/SectionDivider/README.md Outdated

brianacnguyen added 2 commits May 15, 2026 08:44

Addressed more bugbot comments

d5ae8e0

Merge branch 'dsrn/section-divider' of github.com:MetaMask/metamask-d…

38b1e1a

…esign-system into dsrn/section-divider

cursor Bot reviewed May 15, 2026

View reviewed changes

Comment thread packages/design-system-react-native/src/components/SectionDivider/SectionDivider.tsx Outdated

Comment thread packages/design-system-react-native/src/components/SectionDivider/SectionDivider.tsx Outdated

vinnyhoward previously approved these changes May 15, 2026

View reviewed changes

Address more bugbot comments

ad5de2c

brianacnguyen dismissed vinnyhoward’s stale review via ad5de2c May 15, 2026 16:07

vinnyhoward previously approved these changes May 15, 2026

View reviewed changes

Address more bugbot comments

cdf08b9

brianacnguyen dismissed vinnyhoward’s stale review via cdf08b9 May 15, 2026 16:30

cursor Bot reviewed May 15, 2026

View reviewed changes

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

Addressed more bugbot comments

9e2fbcf

brianacnguyen changed the title ~~feat: Added SectionDivider to DSRN~~ feat: [DSRN] Added SectionDivider May 15, 2026

vinnyhoward approved these changes May 15, 2026

View reviewed changes

brianacnguyen merged commit 2457fd4 into main May 15, 2026
44 checks passed

brianacnguyen deleted the dsrn/section-divider branch May 15, 2026 16:57

brianacnguyen mentioned this pull request May 20, 2026

Release/41.0.0 #1180

Merged

18 tasks

Uh oh!

Conversation

brianacnguyen commented May 15, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented May 15, 2026

📖 Storybook Preview

Uh oh!

Uh oh!

github-actions Bot commented May 15, 2026

📖 Storybook Preview

Uh oh!

Uh oh!

github-actions Bot commented May 15, 2026

📖 Storybook Preview

Uh oh!

github-actions Bot commented May 15, 2026

📖 Storybook Preview

Uh oh!

Uh oh!

github-actions Bot commented May 15, 2026

📖 Storybook Preview

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented May 15, 2026

📖 Storybook Preview

Uh oh!

github-actions Bot commented May 15, 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 May 15, 2026

📖 Storybook Preview

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

brianacnguyen commented May 15, 2026 •

edited by cursor Bot

Loading