feat: [DSRN] Added TitleAlert#1131
Merged
Merged
Conversation
Contributor
📖 Storybook Preview |
Contributor
📖 Storybook Preview |
Contributor
📖 Storybook Preview |
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 7a9c2b1. Configure here.
Contributor
📖 Storybook Preview |
Contributor
📖 Storybook Preview |
Contributor
📖 Storybook Preview |
vinnyhoward
reviewed
May 15, 2026
Contributor
📖 Storybook Preview |
…-system into dsrn/titlealert
Contributor
📖 Storybook Preview |
…o dsrn/titlealert
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
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
TitleAlertto@metamask/design-system-react-native, for compact alert-style headers in modals, bottom sheets, and similar surfaces (e.g. swap warnings).Figma link: https://www.figma.com/design/1D6tnzXqWgnUC3spaAOELN/branch/i48BCJNGdFo9ScLfTndIBf/%F0%9F%A6%8A-MMDS-Components?m=auto&node-id=13762-333&t=PEWsMEXLgKJ3xVhJ-1
Related issues
Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-576
Manual testing steps
yarn storybook:iosoryarn storybook:android(see repo docs).Screenshots/Recordings
Before
N/A — new component.
After
Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-05-15.at.08.09.40.mov
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Low Risk
Low risk: introduces a new UI component plus docs/stories/tests, with only minor shared-type export changes and no security- or data-sensitive logic.
Overview
Adds new
TitleAlertcomponent to@metamask/design-system-react-native, rendering a severity-basedIconAlertabove an optional centered title row (with start/end accessories) and optional description, with passthrough props for title/description text and layout overrides.Includes Storybook stories, comprehensive rendering/prop-forwarding tests, and component README documentation; exports
TitleAlertfrom the React Native component index and adds sharedTitleAlertPropsSharedtypes todesign-system-shared(with a small reordering ofSectionHeaderPropsSharedexport).Reviewed by Cursor Bugbot for commit ed1b319. Bugbot is set up for automated code reviews on this repo. Configure here.