Skip to content

feat: [DSRN] Added TitleAlert#1131

Merged
brianacnguyen merged 12 commits into
mainfrom
dsrn/titlealert
May 15, 2026
Merged

feat: [DSRN] Added TitleAlert#1131
brianacnguyen merged 12 commits into
mainfrom
dsrn/titlealert

Conversation

@brianacnguyen

@brianacnguyen brianacnguyen commented Apr 29, 2026

Copy link
Copy Markdown
Contributor

Description

This PR adds TitleAlert to @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

  1. From the repo root, run React Native Storybook, e.g. yarn storybook:ios or yarn storybook:android (see repo docs).
  2. Open Components → TitleAlert.
  3. In the Default story, confirm severity, title, and description controls behave as expected.
  4. Skim Severity, Title, TitleStartAccessory, TitleEndAccessory, and Description stories to confirm layout and copy look correct on device.

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

  • 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
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 TitleAlert component to @metamask/design-system-react-native, rendering a severity-based IconAlert above 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 TitleAlert from the React Native component index and adds shared TitleAlertPropsShared types to design-system-shared (with a small reordering of SectionHeaderPropsShared export).

Reviewed by Cursor Bugbot for commit ed1b319. Bugbot is set up for automated code reviews on this repo. Configure here.

@brianacnguyen brianacnguyen requested a review from a team as a code owner April 29, 2026 15:26
@brianacnguyen brianacnguyen marked this pull request as draft April 29, 2026 15:26
@github-actions

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

Comment thread packages/design-system-react-native/src/components/TitleAlert/index.ts Outdated
@github-actions

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@brianacnguyen brianacnguyen changed the title Added TitleAlert to DSRN feat: [DSRN] Added TitleAlert May 15, 2026
@brianacnguyen brianacnguyen marked this pull request as ready for review May 15, 2026 15:22
@github-actions

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@github-actions

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@cursor cursor Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Fix All in Cursor

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

Comment thread packages/design-system-react-native/src/components/TitleAlert/TitleAlert.tsx Outdated
@github-actions

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@github-actions

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@github-actions

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

vinnyhoward
vinnyhoward previously approved these changes May 15, 2026

@vinnyhoward vinnyhoward left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks solid to me

@github-actions

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@github-actions

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@github-actions

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@brianacnguyen brianacnguyen enabled auto-merge (squash) May 15, 2026 18:07
@brianacnguyen brianacnguyen merged commit 1058c50 into main May 15, 2026
44 checks passed
@brianacnguyen brianacnguyen deleted the dsrn/titlealert branch May 15, 2026 18:18
@brianacnguyen brianacnguyen mentioned this pull request May 20, 2026
18 tasks
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants