Release 35.0.0 by georgewrmarshall · Pull Request #1108 · MetaMask/metamask-design-system

georgewrmarshall · 2026-04-23T21:43:21Z

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 (chore: centralize Icon types and assets (ADR-0003/ADR-0004) #1042, chore: remove redundant icon assets from design-system-react #1101)
BREAKING: Updated Box type exports to use const-object + string-union types and removed stale Box color entries (feat(shared): migrate Box to ADR-0003 and ADR-0004 shared types (DSYS-482) #1026)
Updated ButtonTertiary to use the default text color for more consistent contrast across states (chore(button): ButtonTertiary uses text-default (web + RN) #1099)

React Native Updates (0.20.0)

Added

Added TitleStandard for mobile title layouts with optional top and bottom accessory rows (feat: [DSRN ]Added TitleStandard #1051)
Added TitleSubpage for subpage headers with avatar, title, subtitle, amount, and bottom-label layouts (feat: [DSRN] Add TitleSubpage #1059)
Added Tag for compact severity-based metadata labels with optional icons or custom accessories (feat: Add Tag component for React Native #1053)

Changed

BREAKING: Updated IconName, IconColor, and IconSize exports to use const-object + string-union types instead of enums (chore: centralize Icon types and assets (ADR-0003/ADR-0004) #1042)
BREAKING: Updated Box type exports to use const-object + string-union types and removed stale Box color entries (feat(shared): migrate Box to ADR-0003 and ADR-0004 shared types (DSYS-482) #1026)
Box now forwards refs to the underlying View (chore: Forward refs for React Native Box #1102)
Updated ButtonTertiary to use the default text color for more consistent contrast across states (chore(button): ButtonTertiary uses text-default (web + RN) #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:

// 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:

Validation

yarn changelog:validate

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.

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

github-actions · 2026-04-23T21:44:28Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-04-23T21:51:48Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-04-23T22:01:24Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2026-04-23T22:03:14Z

 {
  "name": "@metamask/design-system-shared",
-  "version": "0.12.0",
+  "version": "0.13.0",


The shared package is bumped as a minor because direct consumers of @metamask/design-system-shared do see a breaking change here: enum exports moved to const objects plus string unions. That is separate from the platform-package docs, which deliberately stop telling most consumers to import from shared.

georgewrmarshall · 2026-04-23T22:03:14Z

 {
  "name": "@metamask/design-system-react-native",
-  "version": "0.19.0",
+  "version": "0.20.0",


React Native also gets a minor bump for the same pre-1.0 reason, with both new components and breaking type-surface updates in the same release. The version is meant to tell consumers this is more than a patch-level doc cleanup.

georgewrmarshall · 2026-04-23T22:03:14Z

 {
  "name": "@metamask/design-system-react",
-  "version": "0.17.1",
+  "version": "0.18.0",


This stays a minor bump because the package is still pre-1.0 and the release includes breaking public type-surface changes for Box and Icon. In this repo we use the minor version to signal consumer action may be required before 1.0.

georgewrmarshall · 2026-04-23T22:03:14Z

+import { BoxBackgroundColor } from '@metamask/design-system-react-native';
+```
+
+#### Box: Removed stale `-alternative` color tokens


This guide is intentionally narrowed to the actionable Box migration only. We removed design-system-shared import guidance because it describes implementation detail rather than the public upgrade path, and we don't mention the Icon section because it had no meaningful before/after change while the removed Box colors do require explicit replacements.

georgewrmarshall · 2026-04-23T22:05:45Z

+- Added `TitleStandard` for mobile title layouts with optional top and bottom accessory rows ([#1051](https://github.com/MetaMask/metamask-design-system/pull/1051))
+- Added `TitleSubpage` for subpage headers with avatar, title, subtitle, amount, and bottom-label layouts ([#1059](https://github.com/MetaMask/metamask-design-system/pull/1059))
+- Added `Tag` for compact severity-based metadata labels with optional icons or custom accessories ([#1053](https://github.com/MetaMask/metamask-design-system/pull/1053))


New components TitleStandard TitleSubpage and Tag

github-actions · 2026-04-23T22:09:42Z

📖 Storybook Preview

View PR Storybook

## 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`  --- > [!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>

georgewrmarshall added 4 commits April 23, 2026 14:20

Initialize Release 35.0.0

f835331

Update Release 35.0.0

349a6e2

docs: refine release 35.0.0 changelogs

e069cc7

style: format release migration docs

fb9ec3d

docs: simplify migration guidance wording

f2fa981

docs: trim redundant icon migration sections

e2ccefc

georgewrmarshall commented Apr 23, 2026

View reviewed changes

chore: reverting changes to twrnc preset package

addbae5

georgewrmarshall self-assigned this Apr 23, 2026

georgewrmarshall marked this pull request as ready for review April 23, 2026 22:22

georgewrmarshall requested a review from a team as a code owner April 23, 2026 22:22

georgewrmarshall enabled auto-merge (squash) April 23, 2026 22:22

brianacnguyen approved these changes Apr 23, 2026

View reviewed changes

georgewrmarshall merged commit c46fd8d into main Apr 23, 2026
44 checks passed

georgewrmarshall deleted the release/35.0.0 branch April 23, 2026 23:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Release 35.0.0#1108

Release 35.0.0#1108
georgewrmarshall merged 7 commits intomainfrom
release/35.0.0

georgewrmarshall commented Apr 23, 2026 •

edited by cursor Bot

Loading

Uh oh!

github-actions Bot commented Apr 23, 2026

Uh oh!

github-actions Bot commented Apr 23, 2026

Uh oh!

github-actions Bot commented Apr 23, 2026

Uh oh!

georgewrmarshall Apr 23, 2026

Uh oh!

georgewrmarshall Apr 23, 2026

Uh oh!

georgewrmarshall Apr 23, 2026

Uh oh!

georgewrmarshall Apr 23, 2026 •

edited

Loading

Uh oh!

georgewrmarshall Apr 23, 2026

Uh oh!

github-actions Bot commented Apr 23, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

georgewrmarshall commented Apr 23, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Release 35.0.0

Package Versions

Shared Type Updates (0.13.0)

Added (#1051, #1053, #1059)

Changed (#1026, #1042)

React Web Updates (0.18.0)

Changed

React Native Updates (0.20.0)

Added

Changed

Tailwind Preset Updates (0.6.2)

Changed

Breaking Changes

Icon and Box enum exports migrated to const objects plus string unions (Both Platforms)

Validation

Uh oh!

github-actions Bot commented Apr 23, 2026

📖 Storybook Preview

Uh oh!

github-actions Bot commented Apr 23, 2026

📖 Storybook Preview

Uh oh!

github-actions Bot commented Apr 23, 2026

📖 Storybook Preview

Uh oh!

georgewrmarshall Apr 23, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Apr 23, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Apr 23, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Apr 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Apr 23, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Apr 23, 2026

📖 Storybook Preview

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

georgewrmarshall commented Apr 23, 2026 •

edited by cursor Bot

Loading

georgewrmarshall Apr 23, 2026 •

edited

Loading