Release 37.0.0 by georgewrmarshall · Pull Request #1140 · MetaMask/metamask-design-system

georgewrmarshall · 2026-04-30T19:23:09Z

Release 37.0.0

This release focuses on consumer-facing changelog cleanup for the packages being published, plus migration-guide coverage for the React Native TextField API changes included in this release.

📦 Package Versions

@metamask/design-system-shared: 0.15.0
@metamask/design-system-react: 0.20.0
@metamask/design-system-react-native: 0.22.0

🔄 Shared Type Updates (0.15.0)

Shared type additions (#1034, #1038, #1081)

What Changed:

Added shared ButtonBaseSize, ButtonSize, ButtonHeroSize, ButtonVariant, ButtonBasePropsShared, and ButtonPropsShared
Added shared ButtonIconSize, ButtonIconVariant, and ButtonIconPropsShared
Added shared TextFieldPropsShared for the controlled text-field contract used across platforms

Impact:

Continues ADR-0003 and ADR-0004 migration toward shared const-object plus string-union exports
Gives React and React Native one shared source of truth for these component contracts

🌐 React Web Updates (0.20.0)

Changed

BREAKING: Updated Button, ButtonBase, and ButtonHero size and variant exports to use shared const-object + string-union types rather than platform-local enum-based definitions (#1034)
- No migration required for typical usage; continue importing from @metamask/design-system-react as before
BREAKING: Updated ButtonIconSize and ButtonIconVariant to use shared const-object + string-union types rather than platform-local enum-based definitions (#1038)
- No migration required for typical usage; continue importing from @metamask/design-system-react as before
Updated Figma Code Connect to the live MMDS Components file and aligned ButtonIcon and TextButton mappings with the current component APIs shown in Dev Mode (#1109)
Expanded the TextButton migration guide for extension consumers replacing ButtonLink and ButtonVariant.Link with the current design-system APIs (#1098)

📱 React Native Updates (0.22.0)

Changed

BREAKING: Updated Button, ButtonBase, and ButtonHero size and variant exports to use shared const-object + string-union types rather than platform-local enum-based definitions (#1034)
- No migration required for typical usage; continue importing from @metamask/design-system-react-native as before
BREAKING: Updated ButtonIconSize and ButtonIconVariant to use shared const-object + string-union types rather than platform-local enum-based definitions (#1038)
- No migration required for typical usage; continue importing from @metamask/design-system-react-native as before
BREAKING: TextField and TextFieldSearch now use a root Box/View, require native TextInput props under inputProps, rename isReadonly to isReadOnly, and use inputRef for the inner input ref (#1081)
Updated Figma Code Connect to the live MMDS Components file and aligned ButtonIcon and TextButton mappings with the current component APIs shown in Dev Mode (#1109)

⚠️ Breaking Changes

Shared button size and variant exports (Both Platforms)

What Changed:

ButtonVariant, ButtonBaseSize, ButtonSize, ButtonHeroSize, ButtonIconSize, and ButtonIconVariant now come from shared ADR-0003/ADR-0004 definitions instead of platform-local enums
Runtime values and standard imports remain stable for typical usage

Impact:

Affects TypeScript consumers that depended on enum-specific behavior rather than the exported members themselves

React Native TextField prop layering (React Native)

What Changed:

TextField and TextFieldSearch now treat the root as a Box/View
Native TextInput props must move under inputProps
isReadonly is renamed to isReadOnly
ref now targets the outer container and inputRef targets the inner TextInput

Migration:

// Before (0.21.0)
<TextField
  value={query}
  onChangeText={setQuery}
  placeholder="Search"
  keyboardType="default"
  secureTextEntry
  onFocus={handleFocus}
/>

// After (0.22.0)
<TextField
  value={query}
  onChangeText={setQuery}
  placeholder="Search"
  onFocus={handleFocus}
  inputProps={{
    keyboardType: 'default',
    secureTextEntry: true,
  }}
/>

Impact:

Affects React Native consumers passing TextInput props or pressable-only props at the top level of TextField / TextFieldSearch

See migration guides for complete instructions:

React Native Migration Guide

✅ Checklist

Changelogs updated with human-readable descriptions
Changelog validation passed (yarn changelog:validate)
Version bumps follow semantic versioning
- design-system-shared: minor (0.14.0 → 0.15.0) - shared type additions
- design-system-react: minor (0.19.0 → 0.20.0) - includes breaking changes under pre-1.0 semver
- design-system-react-native: minor (0.21.0 → 0.22.0) - includes breaking changes under pre-1.0 semver
Breaking changes documented with migration guidance where needed
Migration guides updated with before/after examples for the React Native TextField changes
PR references included in changelog entries

Pre-merge author checklist

I've followed MetaMask Contributor Docs
I've reviewed the Release Workflow cursor rule
All tests pass (yarn build && yarn test && yarn lint)
Changelog validation passes (yarn changelog:validate)

Pre-merge reviewer checklist

I've reviewed the Reviewing Release PRs guide
Package versions follow semantic versioning
Changelog entries are consumer-facing (not commit message regurgitation)
Breaking changes are documented in MIGRATION.md where migration guidance is required
All unreleased changes are accounted for in changelogs

Note

Low Risk
Release-only change: bumps package versions and updates changelog/migration documentation without modifying runtime code. Low risk aside from potential downstream confusion if documented breaking changes don’t match what was actually published.

Overview
Bumps the monorepo release to 37.0.0 and increments package versions for @metamask/design-system-shared (0.15.0), @metamask/design-system-react (0.20.0), and @metamask/design-system-react-native (0.22.0).

Updates consumer-facing release notes: adds new changelog entries (including documented breaking type-export contract changes and RN TextField API migration details), refreshes the RN migration guide section for 0.21.0 → 0.22.0, and updates changelog compare links accordingly.

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

github-actions · 2026-04-30T19:24:25Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-04-30T19:36:14Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2026-04-30T19:37:09Z

+
+### Changed
+
+- **BREAKING:** Updated `Button`, `ButtonBase`, and `ButtonHero` size and variant exports to use shared const-object + string-union types rather than platform-local enum-based definitions, aligning React with the shared cross-platform type contracts ([#1034](https://github.com/MetaMask/metamask-design-system/pull/1034))


This wording intentionally matches the earlier AvatarBase and AvatarIcon enum-to-union releases. Imports and runtime members stay stable for normal usage, so the consumer-facing guidance is to flag the type contract change without adding unnecessary migration steps.

georgewrmarshall · 2026-04-30T19:37:09Z

- Any reference to the removed entries will produce a TypeScript error after upgrading.
-
---
+### From version 0.21.0 to 0.22.0


This section is anchored to 0.21.0 to 0.22.0 because that is the version actually being published from this release branch. Keeping the TextField guidance under the older 0.19.0 to 0.20.0 heading would send upgraders to the wrong release when they look for breaking-change docs.

georgewrmarshall · 2026-04-30T19:37:09Z

+
+### Added
+
+- Added shared `ButtonBaseSize`, `ButtonSize`, `ButtonHeroSize`, `ButtonVariant`, `ButtonBasePropsShared`, and `ButtonPropsShared` exports so React and React Native button APIs can share one cross-platform type contract ([#1034](https://github.com/MetaMask/metamask-design-system/pull/1034))


Shared package is classified as Added because these exports are new surface area here even though the platform packages describe the same work as breaking. That split helps reviewers see that the shared package gained new public contracts while React and React Native changed where existing contracts come from.

georgewrmarshall · 2026-04-30T19:43:11Z


 ## Version Updates

-### From version 0.19.0 to 0.20.0


The old section opener was moved below the TextField migration. The same guidance is preserved below under 0.21.0 to 0.22.0 so consumers find it under the version they are actually upgrading to.

georgewrmarshall added 3 commits April 30, 2026 12:04

Initialize Release 37.0.0

9b18b6e

Update Release 37.0.0

c2766de

Refine release 37.0.0 changelogs and migration docs

e2d54ab

georgewrmarshall self-assigned this Apr 30, 2026

Align release 37.0.0 enum migration docs

2140b12

georgewrmarshall commented Apr 30, 2026

View reviewed changes

georgewrmarshall marked this pull request as ready for review April 30, 2026 19:38

georgewrmarshall requested a review from a team as a code owner April 30, 2026 19:38

georgewrmarshall enabled auto-merge (squash) April 30, 2026 19:40

georgewrmarshall commented Apr 30, 2026

View reviewed changes

georgewrmarshall mentioned this pull request Apr 30, 2026

feat: ModalBody migration (extension) #1121

Merged

7 tasks

brianacnguyen approved these changes Apr 30, 2026

View reviewed changes

georgewrmarshall merged commit c01d8f0 into main Apr 30, 2026
44 checks passed

georgewrmarshall deleted the release/37.0.0 branch April 30, 2026 20:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Release 37.0.0#1140

Release 37.0.0#1140
georgewrmarshall merged 4 commits into
mainfrom
release/37.0.0

georgewrmarshall commented Apr 30, 2026 •

edited by cursor Bot

Loading

Uh oh!

github-actions Bot commented Apr 30, 2026

Uh oh!

github-actions Bot commented Apr 30, 2026

Uh oh!

georgewrmarshall Apr 30, 2026

Uh oh!

georgewrmarshall Apr 30, 2026

Uh oh!

georgewrmarshall Apr 30, 2026

Uh oh!

georgewrmarshall Apr 30, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


		### Changed

		- BREAKING: Updated `Button`, `ButtonBase`, and `ButtonHero` size and variant exports to use shared const-object + string-union types rather than platform-local enum-based definitions, aligning React with the shared cross-platform type contracts ([#1034](https://github.com/MetaMask/metamask-design-system/pull/1034))


		### Added

		- Added shared `ButtonBaseSize`, `ButtonSize`, `ButtonHeroSize`, `ButtonVariant`, `ButtonBasePropsShared`, and `ButtonPropsShared` exports so React and React Native button APIs can share one cross-platform type contract ([#1034](https://github.com/MetaMask/metamask-design-system/pull/1034))

Uh oh!

Conversation

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

Uh oh!

Release 37.0.0

📦 Package Versions

🔄 Shared Type Updates (0.15.0)

Shared type additions (#1034, #1038, #1081)

🌐 React Web Updates (0.20.0)

Changed

📱 React Native Updates (0.22.0)

Changed

⚠️ Breaking Changes

Shared button size and variant exports (Both Platforms)

React Native TextField prop layering (React Native)

✅ Checklist

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Apr 30, 2026

📖 Storybook Preview

Uh oh!

github-actions Bot commented Apr 30, 2026

📖 Storybook Preview

Uh oh!

georgewrmarshall Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

georgewrmarshall commented Apr 30, 2026 •

edited by cursor Bot

Loading