feat: [DSRN ]Added TitleStandard#1051
Merged
georgewrmarshall merged 25 commits intomainfrom Apr 23, 2026
Merged
Conversation
Contributor
📖 Storybook Preview |
Contributor
📖 Storybook Preview |
…o dsrn/titlestandard
Contributor
📖 Storybook Preview |
Contributor
📖 Storybook Preview |
amandaye0h
reviewed
Apr 9, 2026
…o dsrn/titlestandard
Contributor
📖 Storybook Preview |
…o dsrn/titlestandard
Contributor
📖 Storybook Preview |
Contributor
📖 Storybook Preview |
Contributor
📖 Storybook Preview |
georgewrmarshall
previously approved these changes
Apr 14, 2026
Contributor
georgewrmarshall
left a comment
georgewrmarshall
left a comment
There was a problem hiding this comment.
LGTM! Much cleaner. Left a couple non-blocking questions.
Contributor
📖 Storybook Preview |
Contributor
📖 Storybook Preview |
georgewrmarshall
previously approved these changes
Apr 17, 2026
Contributor
There was a problem hiding this comment.
Looks good after the updates. The component shape is much cleaner now, the story/docs/test coverage is in much better shape, and the earlier convention issues from previous review rounds look addressed.
One non-blocking follow-up for cleanup: I’m not sure we need to re-export TitleStandardPropsShared from the DSRN component entrypoint in packages/design-system-react-native/src/components/TitleStandard/index.ts.The shared prop types are mainly for internal cross-platform alignment, while consumers of @metamask/design-system-react-native should use TitleStandardProps. This seems fine to clean up in a bulk pass if we want to keep moving here.
…o dsrn/titlestandard
…ign-system into dsrn/titlestandard
Contributor
📖 Storybook Preview |
…o dsrn/titlestandard
Contributor
📖 Storybook Preview |
georgewrmarshall
previously approved these changes
Apr 20, 2026
…o dsrn/titlestandard
Contributor
📖 Storybook Preview |
Contributor
📖 Storybook Preview |
georgewrmarshall
approved these changes
Apr 23, 2026
Merged
georgewrmarshall
added a commit
that referenced
this pull request
Apr 23, 2026
## Release 35.0.0 This release adds new React Native title primitives, continues the enum-to-const-object/string-union migration for public type exports, and updates the release documentation so breaking changes are consumer-focused and migration-oriented. ### Package Versions - `@metamask/design-system-shared`: **0.13.0** - `@metamask/design-system-react`: **0.18.0** - `@metamask/design-system-react-native`: **0.20.0** - `@metamask/design-system-tailwind-preset`: **0.6.2** ### Shared Type Updates (0.13.0) #### Added (#1051, #1053, #1059) **What Changed:** - Added `TitleStandardPropsShared` and `TitleSubpagePropsShared` - Added `TagSeverity` and `TagPropsShared` **Impact:** - Supports the new React Native `TitleStandard`, `TitleSubpage`, and `Tag` APIs #### Changed (#1026, #1042) **What Changed:** - **BREAKING:** Updated shared `Box` and `Icon` exports from enums to const objects with derived string-union types - Removed stale Box `WarningAlternative`, `SuccessAlternative`, and `InfoAlternative` color entries that no longer map to design tokens **Impact:** - Affects consumers of `@metamask/design-system-shared` directly - Platform package consumers should continue importing from `@metamask/design-system-react` or `@metamask/design-system-react-native` ### React Web Updates (0.18.0) #### Changed - **BREAKING:** Updated `IconName`, `IconColor`, and `IconSize` exports to use const-object + string-union types instead of enums (#1042, #1101) - **BREAKING:** Updated `Box` type exports to use const-object + string-union types and removed stale Box color entries (#1026) - Updated `ButtonTertiary` to use the default text color for more consistent contrast across states (#1099) ### React Native Updates (0.20.0) #### Added - Added `TitleStandard` for mobile title layouts with optional top and bottom accessory rows (#1051) - Added `TitleSubpage` for subpage headers with avatar, title, subtitle, amount, and bottom-label layouts (#1059) - Added `Tag` for compact severity-based metadata labels with optional icons or custom accessories (#1053) #### Changed - **BREAKING:** Updated `IconName`, `IconColor`, and `IconSize` exports to use const-object + string-union types instead of enums (#1042) - **BREAKING:** Updated `Box` type exports to use const-object + string-union types and removed stale Box color entries (#1026) - `Box` now forwards refs to the underlying `View` (#1102) - Updated `ButtonTertiary` to use the default text color for more consistent contrast across states (#1099) ### Tailwind Preset Updates (0.6.2) #### Changed - No consumer-facing API or behavior changes in this release; this patch republishes the existing preset without requiring changes in consuming apps ### Breaking Changes #### Icon and Box enum exports migrated to const objects plus string unions (Both Platforms) **What Changed:** - `IconName`, `IconColor`, and `IconSize` now use const objects with derived string-union types instead of enums - `BoxFlexDirection`, `BoxFlexWrap`, `BoxAlignItems`, `BoxJustifyContent`, `BoxBackgroundColor`, `BoxBorderColor`, `BoxSpacing`, and `BoxBorderWidth` now use const objects with derived string-union types instead of enums - Removed stale Box color entries with no backing design token: - `BoxBackgroundColor.WarningAlternative` - `BoxBackgroundColor.SuccessAlternative` - `BoxBorderColor.WarningAlternative` - `BoxBorderColor.SuccessAlternative` - `BoxBorderColor.InfoAlternative` **Migration:** ```tsx // Before import { BoxBackgroundColor, IconColor, IconName, } from '@metamask/design-system-react-native'; <Box backgroundColor={BoxBackgroundColor.WarningAlternative} /> <Icon name={IconName.Add} color={IconColor.IconDefault} /> // After import { BoxBackgroundColor, IconColor, IconName, } from '@metamask/design-system-react-native'; <Box backgroundColor={BoxBackgroundColor.WarningDefault} /> <Icon name={IconName.Add} color={IconColor.IconDefault} /> ``` **Impact:** - Affects consumers relying on enum-specific TypeScript behavior for `Icon*` and `Box*` exports - Import paths stay the same for platform-package consumers - Any use of the removed Box `*Alternative` color entries will need to switch to the corresponding `*Default` or `*Muted` token See migration guides for complete instructions: - [React Migration Guide](./packages/design-system-react/MIGRATION.md#from-version-0170-to-0180) - [React Native Migration Guide](./packages/design-system-react-native/MIGRATION.md#from-version-0190-to-0200) ### Validation - `yarn changelog:validate` <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Medium Risk** > Medium risk because it publishes new versions with **breaking TypeScript surface changes** (Box/Icon enums → const-object/string-union and removal of stale Box color members), which can break downstream builds despite minimal runtime behavior changes. > > **Overview** > Bumps the monorepo release to `35.0.0` and publishes new package versions for `@metamask/design-system-react` (`0.18.0`), `@metamask/design-system-react-native` (`0.20.0`), and `@metamask/design-system-shared` (`0.13.0`). > > Updates changelogs/migration guides to reflect the release: adds React Native primitives (`TitleStandard`, `TitleSubpage`, `Tag`) and shared prop contracts, and documents **breaking** shifts of `Box*` and `Icon*` exports from enums to const-object + string-union types (plus removal of stale `*Alternative` Box color entries) with consumer-facing migration steps. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit addbae5. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY -->
georgewrmarshall
pushed a commit
that referenced
this pull request
Apr 27, 2026
## **Description** Adds **`TitleStandard`** to `@metamask/design-system-react-native`: a left-aligned title block with optional **top row** (`topAccessory`), **inline title accessory** (`titleAccessory`), and a **bottom row** that is either **`bottomLabel`** (with default secondary typography when it’s a string) or **`bottomAccessory`** when there is no renderable `bottomLabel`. Shared layout props live in **`TitleStandardPropsShared`** in `@metamask/design-system-shared` (ADR-0004 alignment with other shared types). The RN implementation uses **`BoxHorizontal`** / **`TextOrChildren`** patterns, `titleProps` / `bottomLabelProps` for platform `Text`, and `twClassName` + `View` props on the root. Also includes **unit tests**, a **README**, **Storybook** stories (and registration in `storybook.requires.js`), and a **MIGRATION.md** section for **0.14.0 → 0.15.0** documenting the stable API: **`title` is required**, **`topLabel` / `topLabelProps` removed** in favor of **`topAccessory`**, and **bottom row** behavior when both `bottomLabel` and `bottomAccessory` are passed. ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-582 ## **Manual testing steps** 1. From the repo root, run React Native Storybook (`yarn storybook:ios` or `yarn storybook:android` per your setup). 2. Open **Components → TitleStandard** and confirm **Default**, **Title**, **TitleAccessory**, **TopAccessory**, **BottomLabel**, and **BottomAccessory** match expected layout and copy. 3. Run package tests: `yarn workspace @metamask/design-system-react-native run jest -- TitleStandard` (or your usual Jest invocation for that workspace). ## **Screenshots/Recordings** _If applicable, add screenshots and/or recordings to visualize the before and after of your change._ ### **Before** _N/A — new component._ ### **After** https://github.com/user-attachments/assets/3e7ae0a5-e99d-4932-91ee-c0b757f39e4b ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). 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. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Low Risk** > Low risk: this PR only adds a new React Native UI component plus types, stories, and tests, with minimal impact beyond new exports in package indexes. > > **Overview** > Adds new `TitleStandard` component to `@metamask/design-system-react-native`, providing a left-aligned title block with optional `topAccessory`, inline `titleEndAccessory`, and a bottom row that prioritizes `bottomLabel` (with default secondary typography) over `bottomAccessory`. > > Exports the component from the RN components index and introduces shared prop types via `TitleStandardPropsShared` in `@metamask/design-system-shared`, alongside Storybook stories, unit tests, and a README documenting the API and slot behavior. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit 6a9454d. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY -->
georgewrmarshall
added a commit
that referenced
this pull request
Apr 27, 2026
## Release 35.0.0 This release adds new React Native title primitives, continues the enum-to-const-object/string-union migration for public type exports, and updates the release documentation so breaking changes are consumer-focused and migration-oriented. ### Package Versions - `@metamask/design-system-shared`: **0.13.0** - `@metamask/design-system-react`: **0.18.0** - `@metamask/design-system-react-native`: **0.20.0** - `@metamask/design-system-tailwind-preset`: **0.6.2** ### Shared Type Updates (0.13.0) #### Added (#1051, #1053, #1059) **What Changed:** - Added `TitleStandardPropsShared` and `TitleSubpagePropsShared` - Added `TagSeverity` and `TagPropsShared` **Impact:** - Supports the new React Native `TitleStandard`, `TitleSubpage`, and `Tag` APIs #### Changed (#1026, #1042) **What Changed:** - **BREAKING:** Updated shared `Box` and `Icon` exports from enums to const objects with derived string-union types - Removed stale Box `WarningAlternative`, `SuccessAlternative`, and `InfoAlternative` color entries that no longer map to design tokens **Impact:** - Affects consumers of `@metamask/design-system-shared` directly - Platform package consumers should continue importing from `@metamask/design-system-react` or `@metamask/design-system-react-native` ### React Web Updates (0.18.0) #### Changed - **BREAKING:** Updated `IconName`, `IconColor`, and `IconSize` exports to use const-object + string-union types instead of enums (#1042, #1101) - **BREAKING:** Updated `Box` type exports to use const-object + string-union types and removed stale Box color entries (#1026) - Updated `ButtonTertiary` to use the default text color for more consistent contrast across states (#1099) ### React Native Updates (0.20.0) #### Added - Added `TitleStandard` for mobile title layouts with optional top and bottom accessory rows (#1051) - Added `TitleSubpage` for subpage headers with avatar, title, subtitle, amount, and bottom-label layouts (#1059) - Added `Tag` for compact severity-based metadata labels with optional icons or custom accessories (#1053) #### Changed - **BREAKING:** Updated `IconName`, `IconColor`, and `IconSize` exports to use const-object + string-union types instead of enums (#1042) - **BREAKING:** Updated `Box` type exports to use const-object + string-union types and removed stale Box color entries (#1026) - `Box` now forwards refs to the underlying `View` (#1102) - Updated `ButtonTertiary` to use the default text color for more consistent contrast across states (#1099) ### Tailwind Preset Updates (0.6.2) #### Changed - No consumer-facing API or behavior changes in this release; this patch republishes the existing preset without requiring changes in consuming apps ### Breaking Changes #### Icon and Box enum exports migrated to const objects plus string unions (Both Platforms) **What Changed:** - `IconName`, `IconColor`, and `IconSize` now use const objects with derived string-union types instead of enums - `BoxFlexDirection`, `BoxFlexWrap`, `BoxAlignItems`, `BoxJustifyContent`, `BoxBackgroundColor`, `BoxBorderColor`, `BoxSpacing`, and `BoxBorderWidth` now use const objects with derived string-union types instead of enums - Removed stale Box color entries with no backing design token: - `BoxBackgroundColor.WarningAlternative` - `BoxBackgroundColor.SuccessAlternative` - `BoxBorderColor.WarningAlternative` - `BoxBorderColor.SuccessAlternative` - `BoxBorderColor.InfoAlternative` **Migration:** ```tsx // Before import { BoxBackgroundColor, IconColor, IconName, } from '@metamask/design-system-react-native'; <Box backgroundColor={BoxBackgroundColor.WarningAlternative} /> <Icon name={IconName.Add} color={IconColor.IconDefault} /> // After import { BoxBackgroundColor, IconColor, IconName, } from '@metamask/design-system-react-native'; <Box backgroundColor={BoxBackgroundColor.WarningDefault} /> <Icon name={IconName.Add} color={IconColor.IconDefault} /> ``` **Impact:** - Affects consumers relying on enum-specific TypeScript behavior for `Icon*` and `Box*` exports - Import paths stay the same for platform-package consumers - Any use of the removed Box `*Alternative` color entries will need to switch to the corresponding `*Default` or `*Muted` token See migration guides for complete instructions: - [React Migration Guide](./packages/design-system-react/MIGRATION.md#from-version-0170-to-0180) - [React Native Migration Guide](./packages/design-system-react-native/MIGRATION.md#from-version-0190-to-0200) ### Validation - `yarn changelog:validate` <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Medium Risk** > Medium risk because it publishes new versions with **breaking TypeScript surface changes** (Box/Icon enums → const-object/string-union and removal of stale Box color members), which can break downstream builds despite minimal runtime behavior changes. > > **Overview** > Bumps the monorepo release to `35.0.0` and publishes new package versions for `@metamask/design-system-react` (`0.18.0`), `@metamask/design-system-react-native` (`0.20.0`), and `@metamask/design-system-shared` (`0.13.0`). > > Updates changelogs/migration guides to reflect the release: adds React Native primitives (`TitleStandard`, `TitleSubpage`, `Tag`) and shared prop contracts, and documents **breaking** shifts of `Box*` and `Icon*` exports from enums to const-object + string-union types (plus removal of stale `*Alternative` Box color entries) with consumer-facing migration steps. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit addbae5. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY -->
georgewrmarshall
added a commit
that referenced
this pull request
Apr 28, 2026
## Release 35.0.0 This release adds new React Native title primitives, continues the enum-to-const-object/string-union migration for public type exports, and updates the release documentation so breaking changes are consumer-focused and migration-oriented. ### Package Versions - `@metamask/design-system-shared`: **0.13.0** - `@metamask/design-system-react`: **0.18.0** - `@metamask/design-system-react-native`: **0.20.0** - `@metamask/design-system-tailwind-preset`: **0.6.2** ### Shared Type Updates (0.13.0) #### Added (#1051, #1053, #1059) **What Changed:** - Added `TitleStandardPropsShared` and `TitleSubpagePropsShared` - Added `TagSeverity` and `TagPropsShared` **Impact:** - Supports the new React Native `TitleStandard`, `TitleSubpage`, and `Tag` APIs #### Changed (#1026, #1042) **What Changed:** - **BREAKING:** Updated shared `Box` and `Icon` exports from enums to const objects with derived string-union types - Removed stale Box `WarningAlternative`, `SuccessAlternative`, and `InfoAlternative` color entries that no longer map to design tokens **Impact:** - Affects consumers of `@metamask/design-system-shared` directly - Platform package consumers should continue importing from `@metamask/design-system-react` or `@metamask/design-system-react-native` ### React Web Updates (0.18.0) #### Changed - **BREAKING:** Updated `IconName`, `IconColor`, and `IconSize` exports to use const-object + string-union types instead of enums (#1042, #1101) - **BREAKING:** Updated `Box` type exports to use const-object + string-union types and removed stale Box color entries (#1026) - Updated `ButtonTertiary` to use the default text color for more consistent contrast across states (#1099) ### React Native Updates (0.20.0) #### Added - Added `TitleStandard` for mobile title layouts with optional top and bottom accessory rows (#1051) - Added `TitleSubpage` for subpage headers with avatar, title, subtitle, amount, and bottom-label layouts (#1059) - Added `Tag` for compact severity-based metadata labels with optional icons or custom accessories (#1053) #### Changed - **BREAKING:** Updated `IconName`, `IconColor`, and `IconSize` exports to use const-object + string-union types instead of enums (#1042) - **BREAKING:** Updated `Box` type exports to use const-object + string-union types and removed stale Box color entries (#1026) - `Box` now forwards refs to the underlying `View` (#1102) - Updated `ButtonTertiary` to use the default text color for more consistent contrast across states (#1099) ### Tailwind Preset Updates (0.6.2) #### Changed - No consumer-facing API or behavior changes in this release; this patch republishes the existing preset without requiring changes in consuming apps ### Breaking Changes #### Icon and Box enum exports migrated to const objects plus string unions (Both Platforms) **What Changed:** - `IconName`, `IconColor`, and `IconSize` now use const objects with derived string-union types instead of enums - `BoxFlexDirection`, `BoxFlexWrap`, `BoxAlignItems`, `BoxJustifyContent`, `BoxBackgroundColor`, `BoxBorderColor`, `BoxSpacing`, and `BoxBorderWidth` now use const objects with derived string-union types instead of enums - Removed stale Box color entries with no backing design token: - `BoxBackgroundColor.WarningAlternative` - `BoxBackgroundColor.SuccessAlternative` - `BoxBorderColor.WarningAlternative` - `BoxBorderColor.SuccessAlternative` - `BoxBorderColor.InfoAlternative` **Migration:** ```tsx // Before import { BoxBackgroundColor, IconColor, IconName, } from '@metamask/design-system-react-native'; <Box backgroundColor={BoxBackgroundColor.WarningAlternative} /> <Icon name={IconName.Add} color={IconColor.IconDefault} /> // After import { BoxBackgroundColor, IconColor, IconName, } from '@metamask/design-system-react-native'; <Box backgroundColor={BoxBackgroundColor.WarningDefault} /> <Icon name={IconName.Add} color={IconColor.IconDefault} /> ``` **Impact:** - Affects consumers relying on enum-specific TypeScript behavior for `Icon*` and `Box*` exports - Import paths stay the same for platform-package consumers - Any use of the removed Box `*Alternative` color entries will need to switch to the corresponding `*Default` or `*Muted` token See migration guides for complete instructions: - [React Migration Guide](./packages/design-system-react/MIGRATION.md#from-version-0170-to-0180) - [React Native Migration Guide](./packages/design-system-react-native/MIGRATION.md#from-version-0190-to-0200) ### Validation - `yarn changelog:validate` <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Medium Risk** > Medium risk because it publishes new versions with **breaking TypeScript surface changes** (Box/Icon enums → const-object/string-union and removal of stale Box color members), which can break downstream builds despite minimal runtime behavior changes. > > **Overview** > Bumps the monorepo release to `35.0.0` and publishes new package versions for `@metamask/design-system-react` (`0.18.0`), `@metamask/design-system-react-native` (`0.20.0`), and `@metamask/design-system-shared` (`0.13.0`). > > Updates changelogs/migration guides to reflect the release: adds React Native primitives (`TitleStandard`, `TitleSubpage`, `Tag`) and shared prop contracts, and documents **breaking** shifts of `Box*` and `Icon*` exports from enums to const-object + string-union types (plus removal of stale `*Alternative` Box color entries) with consumer-facing migration steps. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit addbae5. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY -->
cursor Bot
pushed a commit
that referenced
this pull request
Apr 28, 2026
## **Description** Adds **`TitleStandard`** to `@metamask/design-system-react-native`: a left-aligned title block with optional **top row** (`topAccessory`), **inline title accessory** (`titleAccessory`), and a **bottom row** that is either **`bottomLabel`** (with default secondary typography when it’s a string) or **`bottomAccessory`** when there is no renderable `bottomLabel`. Shared layout props live in **`TitleStandardPropsShared`** in `@metamask/design-system-shared` (ADR-0004 alignment with other shared types). The RN implementation uses **`BoxHorizontal`** / **`TextOrChildren`** patterns, `titleProps` / `bottomLabelProps` for platform `Text`, and `twClassName` + `View` props on the root. Also includes **unit tests**, a **README**, **Storybook** stories (and registration in `storybook.requires.js`), and a **MIGRATION.md** section for **0.14.0 → 0.15.0** documenting the stable API: **`title` is required**, **`topLabel` / `topLabelProps` removed** in favor of **`topAccessory`**, and **bottom row** behavior when both `bottomLabel` and `bottomAccessory` are passed. ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-582 ## **Manual testing steps** 1. From the repo root, run React Native Storybook (`yarn storybook:ios` or `yarn storybook:android` per your setup). 2. Open **Components → TitleStandard** and confirm **Default**, **Title**, **TitleAccessory**, **TopAccessory**, **BottomLabel**, and **BottomAccessory** match expected layout and copy. 3. Run package tests: `yarn workspace @metamask/design-system-react-native run jest -- TitleStandard` (or your usual Jest invocation for that workspace). ## **Screenshots/Recordings** _If applicable, add screenshots and/or recordings to visualize the before and after of your change._ ### **Before** _N/A — new component._ ### **After** https://github.com/user-attachments/assets/3e7ae0a5-e99d-4932-91ee-c0b757f39e4b ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). 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. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Low Risk** > Low risk: this PR only adds a new React Native UI component plus types, stories, and tests, with minimal impact beyond new exports in package indexes. > > **Overview** > Adds new `TitleStandard` component to `@metamask/design-system-react-native`, providing a left-aligned title block with optional `topAccessory`, inline `titleEndAccessory`, and a bottom row that prioritizes `bottomLabel` (with default secondary typography) over `bottomAccessory`. > > Exports the component from the RN components index and introduces shared prop types via `TitleStandardPropsShared` in `@metamask/design-system-shared`, alongside Storybook stories, unit tests, and a README documenting the API and slot behavior. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit 6a9454d. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY -->
cursor Bot
pushed a commit
that referenced
this pull request
Apr 28, 2026
## Release 35.0.0 This release adds new React Native title primitives, continues the enum-to-const-object/string-union migration for public type exports, and updates the release documentation so breaking changes are consumer-focused and migration-oriented. ### Package Versions - `@metamask/design-system-shared`: **0.13.0** - `@metamask/design-system-react`: **0.18.0** - `@metamask/design-system-react-native`: **0.20.0** - `@metamask/design-system-tailwind-preset`: **0.6.2** ### Shared Type Updates (0.13.0) #### Added (#1051, #1053, #1059) **What Changed:** - Added `TitleStandardPropsShared` and `TitleSubpagePropsShared` - Added `TagSeverity` and `TagPropsShared` **Impact:** - Supports the new React Native `TitleStandard`, `TitleSubpage`, and `Tag` APIs #### Changed (#1026, #1042) **What Changed:** - **BREAKING:** Updated shared `Box` and `Icon` exports from enums to const objects with derived string-union types - Removed stale Box `WarningAlternative`, `SuccessAlternative`, and `InfoAlternative` color entries that no longer map to design tokens **Impact:** - Affects consumers of `@metamask/design-system-shared` directly - Platform package consumers should continue importing from `@metamask/design-system-react` or `@metamask/design-system-react-native` ### React Web Updates (0.18.0) #### Changed - **BREAKING:** Updated `IconName`, `IconColor`, and `IconSize` exports to use const-object + string-union types instead of enums (#1042, #1101) - **BREAKING:** Updated `Box` type exports to use const-object + string-union types and removed stale Box color entries (#1026) - Updated `ButtonTertiary` to use the default text color for more consistent contrast across states (#1099) ### React Native Updates (0.20.0) #### Added - Added `TitleStandard` for mobile title layouts with optional top and bottom accessory rows (#1051) - Added `TitleSubpage` for subpage headers with avatar, title, subtitle, amount, and bottom-label layouts (#1059) - Added `Tag` for compact severity-based metadata labels with optional icons or custom accessories (#1053) #### Changed - **BREAKING:** Updated `IconName`, `IconColor`, and `IconSize` exports to use const-object + string-union types instead of enums (#1042) - **BREAKING:** Updated `Box` type exports to use const-object + string-union types and removed stale Box color entries (#1026) - `Box` now forwards refs to the underlying `View` (#1102) - Updated `ButtonTertiary` to use the default text color for more consistent contrast across states (#1099) ### Tailwind Preset Updates (0.6.2) #### Changed - No consumer-facing API or behavior changes in this release; this patch republishes the existing preset without requiring changes in consuming apps ### Breaking Changes #### Icon and Box enum exports migrated to const objects plus string unions (Both Platforms) **What Changed:** - `IconName`, `IconColor`, and `IconSize` now use const objects with derived string-union types instead of enums - `BoxFlexDirection`, `BoxFlexWrap`, `BoxAlignItems`, `BoxJustifyContent`, `BoxBackgroundColor`, `BoxBorderColor`, `BoxSpacing`, and `BoxBorderWidth` now use const objects with derived string-union types instead of enums - Removed stale Box color entries with no backing design token: - `BoxBackgroundColor.WarningAlternative` - `BoxBackgroundColor.SuccessAlternative` - `BoxBorderColor.WarningAlternative` - `BoxBorderColor.SuccessAlternative` - `BoxBorderColor.InfoAlternative` **Migration:** ```tsx // Before import { BoxBackgroundColor, IconColor, IconName, } from '@metamask/design-system-react-native'; <Box backgroundColor={BoxBackgroundColor.WarningAlternative} /> <Icon name={IconName.Add} color={IconColor.IconDefault} /> // After import { BoxBackgroundColor, IconColor, IconName, } from '@metamask/design-system-react-native'; <Box backgroundColor={BoxBackgroundColor.WarningDefault} /> <Icon name={IconName.Add} color={IconColor.IconDefault} /> ``` **Impact:** - Affects consumers relying on enum-specific TypeScript behavior for `Icon*` and `Box*` exports - Import paths stay the same for platform-package consumers - Any use of the removed Box `*Alternative` color entries will need to switch to the corresponding `*Default` or `*Muted` token See migration guides for complete instructions: - [React Migration Guide](./packages/design-system-react/MIGRATION.md#from-version-0170-to-0180) - [React Native Migration Guide](./packages/design-system-react-native/MIGRATION.md#from-version-0190-to-0200) ### Validation - `yarn changelog:validate` <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Medium Risk** > Medium risk because it publishes new versions with **breaking TypeScript surface changes** (Box/Icon enums → const-object/string-union and removal of stale Box color members), which can break downstream builds despite minimal runtime behavior changes. > > **Overview** > Bumps the monorepo release to `35.0.0` and publishes new package versions for `@metamask/design-system-react` (`0.18.0`), `@metamask/design-system-react-native` (`0.20.0`), and `@metamask/design-system-shared` (`0.13.0`). > > Updates changelogs/migration guides to reflect the release: adds React Native primitives (`TitleStandard`, `TitleSubpage`, `Tag`) and shared prop contracts, and documents **breaking** shifts of `Box*` and `Icon*` exports from enums to const-object + string-union types (plus removal of stale `*Alternative` Box color entries) with consumer-facing migration steps. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit addbae5. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY -->
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
3 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
Adds
TitleStandardto@metamask/design-system-react-native: a left-aligned title block with optional top row (topAccessory), inline title accessory (titleAccessory), and a bottom row that is eitherbottomLabel(with default secondary typography when it’s a string) orbottomAccessorywhen there is no renderablebottomLabel.Shared layout props live in
TitleStandardPropsSharedin@metamask/design-system-shared(ADR-0004 alignment with other shared types). The RN implementation usesBoxHorizontal/TextOrChildrenpatterns,titleProps/bottomLabelPropsfor platformText, andtwClassName+Viewprops on the root.Also includes unit tests, a README, Storybook stories (and registration in
storybook.requires.js), and a MIGRATION.md section for 0.14.0 → 0.15.0 documenting the stable API:titleis required,topLabel/topLabelPropsremoved in favor oftopAccessory, and bottom row behavior when bothbottomLabelandbottomAccessoryare passed.Related issues
Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-582
Manual testing steps
yarn storybook:iosoryarn storybook:androidper your setup).yarn workspace @metamask/design-system-react-native run jest -- TitleStandard(or your usual Jest invocation for that workspace).Screenshots/Recordings
If applicable, add screenshots and/or recordings to visualize the before and after of your change.
Before
N/A — new component.
After
Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-04-07.at.19.08.06.mov
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Low Risk
Low risk: this PR only adds a new React Native UI component plus types, stories, and tests, with minimal impact beyond new exports in package indexes.
Overview
Adds new
TitleStandardcomponent to@metamask/design-system-react-native, providing a left-aligned title block with optionaltopAccessory, inlinetitleEndAccessory, and a bottom row that prioritizesbottomLabel(with default secondary typography) overbottomAccessory.Exports the component from the RN components index and introduces shared prop types via
TitleStandardPropsSharedin@metamask/design-system-shared, alongside Storybook stories, unit tests, and a README documenting the API and slot behavior.Reviewed by Cursor Bugbot for commit 6a9454d. Bugbot is set up for automated code reviews on this repo. Configure here.