Release 42.0.0 by georgewrmarshall · Pull Request #1195 · MetaMask/metamask-design-system

georgewrmarshall · 2026-05-29T19:39:35Z

Release 42.0.0

This release curates the changelogs for three published packages into consumer-facing Keep a Changelog entries. It adds the FlashFilled icon and SelectButtonSize across platforms, adds the TextField component to React web, and ships two React Native breaking changes: the panGestureHandlerProps removal (part of the react-native-gesture-handler v2 migration) and the removal of the variant-based title API from HeaderBase/BottomSheetHeader.

📦 Package Versions

@metamask/design-system-shared: 0.20.0 (was 0.19.0)
@metamask/design-system-react: 0.24.0 (was 0.23.1)
@metamask/design-system-react-native: 0.27.0 (was 0.26.0)

@metamask/design-tokens, @metamask/design-system-tailwind-preset, and @metamask/design-system-twrnc-preset are unchanged in this release.

🔄 Shared Type Updates (0.20.0)

Component Type Additions (#1191, #1177, #1170)

What Changed:

Added FlashFilled to the IconName const so the filled lightning bolt is available on both platforms.
Added SelectButtonSize so SelectButton exposes a semantic size type shared across platforms.
Added TextFieldPropsShared for the cross-platform text field input contract.

Impact:

Additive only — no breaking changes to the shared package.
Continues the ADR-0003/0004 const-object + centralized-types pattern.

🌐 React Web Updates (0.24.0)

Added

Added TextField for labeled text entry with optional helper and validation text, exposing TextFieldSize and TextFieldType (feat: TextField migration (extension) #1170)
Added FlashFilled icon (filled lightning bolt) to IconName (feat(shared,react,react-native): add FlashFilled icon #1191)

📱 React Native Updates (0.27.0)

Added

Added FlashFilled icon (filled lightning bolt) to IconName (feat(shared,react,react-native): add FlashFilled icon #1191)
Added SelectButtonSize so SelectButton exposes a semantic size type (feat(rn): add SelectButtonSize and align SelectButton with Figma #1177)

Changed

BREAKING: Removed panGestureHandlerProps from BottomSheet and BottomSheetDialog following the migration to the react-native-gesture-handler v2 GestureDetector/Gesture.Pan() API (chore: Align React Native and Expo dependencies with mobile #1165)
- Migration: From version 0.26.0 to 0.27.0
BREAKING: Removed the variant-based title API from HeaderBase and BottomSheetHeader — variant, HeaderBaseVariant, BottomSheetHeaderVariant, and HeaderBase's titleTestID (refactor(rn): simplify HeaderBase text API #1103)
- String titles now render with a centered HeadingSm treatment; pass custom children for bespoke title layouts and use textProps.testID in place of titleTestID
- Migration: From version 0.26.0 to 0.27.0
Reduced the default SegmentGroup segment spacing from gap-3 to gap-1 for tighter grouped segments (refactor: updated segment group style and gap #1194)

Fixed

Fixed a HeaderStandardAnimated runtime crash under React Native Reanimated 4 by inlining the scroll-handler worklet (fix(HeaderStandardAnimated): inline scroll update to fix Reanimated 4 UI-thread error #1185)
Fixed React Native Web rendering for BottomSheet, BottomSheetOverlay, Icon, and the animated ButtonAnimated and Spinner components (fix(rn): web rendering compatibility for BottomSheet, BottomSheetOverlay, Icon, and animated components #1187)

⚠️ Breaking Changes

Removed `panGestureHandlerProps` from `BottomSheet` / `BottomSheetDialog` (React Native Only)

What Changed:

Removed the panGestureHandlerProps prop. The components migrated from the deprecated RNGH v1 PanGestureHandler JSX component to the v2 GestureDetector + Gesture.Pan() API.
simultaneousHandlers (the only real-world use case) was never wired up under the old shim, so no working behavior is lost.

Migration:

// Before (0.26.0)
<BottomSheet
  goBack={goBack}
  panGestureHandlerProps={{ simultaneousHandlers: scrollViewRef }}
>
  {children}
</BottomSheet>

// After (0.27.0)
<BottomSheet goBack={goBack}>{children}</BottomSheet>

Removed variant-based title API from `HeaderBase` / `BottomSheetHeader` (React Native Only)

What Changed:

Removed variant, HeaderBaseVariant, BottomSheetHeaderVariant, and HeaderBase's titleTestID.
String titles now render with a centered HeadingSm treatment; custom layouts use children, and titleTestID is replaced by textProps.testID.

Migration:

// Before (0.26.0)
import { HeaderBase, HeaderBaseVariant } from '@metamask/design-system-react-native';
<HeaderBase variant={HeaderBaseVariant.Display} titleTestID="title">
  Account details
</HeaderBase>

// After (0.27.0)
import { HeaderBase } from '@metamask/design-system-react-native';
<HeaderBase textProps={{ testID: 'title' }}>Account details</HeaderBase>

See migration guide for complete instructions:

React Native Migration Guide — 0.26.0 to 0.27.0

🔗 Consumer note: MetaMask Mobile

MetaMask Mobile currently consumes @metamask/design-system-react-native@0.20.0 and applies a local yarn patch — .yarn/patches/@metamask-design-system-react-native-npm-0.20.0-2ae4d6f1dd.patch — to migrate BottomSheetDialog from PanGestureHandler to GestureDetector for its React Native Reanimated 4 upgrade (MetaMask/metamask-mobile#29470).

This release upstreams that exact migration natively (#1165). Once mobile bumps to 0.27.0, it can drop that yarn patch — the package now uses the RNGH v2 GestureDetector/Gesture.Pan() API on its own.

Compatibility note: the package keeps react-native-reanimated at peerDependencies: >=3.17.0 (unchanged). It was validated against mobile's current Reanimated 3.19 and is forward-compatible with the incoming Reanimated 4.1.x (the #1185 worklet fix works on both), so no peer-dependency bump is required.

✅ Checklist

Changelogs updated with human-readable descriptions
Changelog validation passed (yarn changelog:validate)
Version bumps follow semantic versioning
- design-system-shared: minor (0.19.0 → 0.20.0) - additive type exports
- design-system-react: minor (0.23.1 → 0.24.0) - new TextField component + icon
- design-system-react-native: minor (0.26.0 → 0.27.0) - pre-1.0 minor with breaking changes
Breaking changes documented with migration guidance
Migration guides updated with before/after examples (if breaking 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 with examples
All unreleased changes are accounted for in changelogs

Note

Medium Risk
No runtime code in the diff, but the published React Native 0.27.0 changelog documents breaking BottomSheet and Header API changes that require consumer migrations.

Overview
Release 42.0.0 bumps the monorepo to 42.0.0 and publishes @metamask/design-system-shared@0.20.0, @metamask/design-system-react@0.24.0, and @metamask/design-system-react-native@0.27.0 with finalized Keep a Changelog entries and compare links.

The diff is mostly release packaging: version fields in root and package package.json files, new changelog sections for those versions, and doc updates. React Native docs drop panGestureHandlerProps from BottomSheet / BottomSheetDialog READMEs; MIGRATION.md adds a 0.26.0 → 0.27.0 section (bottom-sheet gesture prop removal, header title API) and moves BannerBase guidance under 0.24.0 → 0.25.0.

What consumers get in this release (documented in changelogs, not new code in this PR): shared FlashFilled, SelectButtonSize, TextFieldPropsShared; web TextField and FlashFilled; native FlashFilled, SelectButtonSize, two breaking API removals (panGestureHandlerProps, header variant / titleTestID), tighter SegmentGroup spacing, Reanimated 4 / RN Web fixes.

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

Transform the auto-generated Uncategorized changelog entries into consumer-facing Keep a Changelog sections for design-system-shared (0.20.0), design-system-react (0.24.0), and design-system-react-native (0.27.0). Drop dev-only noise (auto-changelog bump, dependency alignment, migration-docs-only PRs). Flag the two React Native breaking changes for 0.27.0 — the panGestureHandlerProps removal (RNGH v2 migration) and the HeaderBase variant API removal — and split the accumulating "0.24.0 to 0.x.0" migration placeholder into concrete 0.26.0 to 0.27.0 and 0.24.0 to 0.25.0 sections. Remove the stale panGestureHandlerProps documentation from the BottomSheet and BottomSheetDialog READMEs now that the prop no longer exists.

github-actions · 2026-05-29T19:40:47Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2026-05-29T19:52:15Z

+
+### Added
+
+- Added `FlashFilled` icon (filled lightning bolt) to `IconName`, keeping the centralized icon set aligned across React and React Native ([#1191](https://github.com/MetaMask/metamask-design-system/pull/1191))


This groups only additive shared type and icon exports, which lets reviewers verify the cross-platform contract without treating this release commit as the source of runtime implementation changes.

georgewrmarshall · 2026-05-29T19:52:21Z

+
+### Added
+
+- Added `TextField` for labeled text entry with optional helper and validation text, exposing `TextFieldSize` and `TextFieldType` ([#1170](https://github.com/MetaMask/metamask-design-system/pull/1170))


React web is additive in this release: the shared changelog records the type contract while this entry records the exported component surface reviewers should expect consumers to import.

georgewrmarshall · 2026-05-29T19:52:28Z

+
+### Changed
+
+- **BREAKING:** Removed `panGestureHandlerProps` from `BottomSheet` and `BottomSheetDialog` following the migration to the `react-native-gesture-handler` v2 `GestureDetector`/`Gesture.Pan()` API ([#1165](https://github.com/MetaMask/metamask-design-system/pull/1165))


This is marked breaking because the public prop is gone even though its only intended simultaneousHandlers path was not functioning; the migration guide gives the consumer-facing before and after.

georgewrmarshall · 2026-05-29T19:52:35Z

-<!-- TODO: Replace 0.x.0 with the actual next released version when this BannerBase follow-up ships. -->
-
-### From version 0.24.0 to 0.x.0
+### From version 0.26.0 to 0.27.0


The release window starts at 0.26.0 so the 0.27.0 guide only covers breaking changes shipped in this release; older BannerBase guidance is preserved under its original 0.25.0 section below.

georgewrmarshall · 2026-05-29T19:52:41Z

 <BottomSheet goBack={goBack}>{children}</BottomSheet>
 ```

 If you were relying on `simultaneousHandlers` for nested scroll behaviour, this was not functioning correctly in the previous version. First-class support for simultaneous gesture handling will be addressed in a follow-up.


The simultaneousHandlers note explains why removing this escape hatch should not regress a working consumer path, while still calling out that first-class nested gesture support is a separate follow-up.

georgewrmarshall · 2026-05-29T19:52:48Z

-</BottomSheet>;
-```
-
 ### `twClassName`


Missed in the PR to remove panGestureHandlerProps. The removed README section would now contradict the migration guide because BottomSheet no longer forwards a PanGestureHandler shim through to the dialog.

georgewrmarshall · 2026-05-29T19:52:54Z

-</BottomSheetDialog>;
-```
-
 ### `twClassName`


This README now lists only the props still available after the RNGH v2 migration, so consumers are not pointed at the removed patch-only gesture escape hatch. Was missed in PR.

georgewrmarshall · 2026-05-29T19:57:54Z


+### From version 0.24.0 to 0.25.0
+
+#### BannerBase: `onClose` is now the only close-button behavior API


BannerBase is kept in the migration guide but moved under 0.24.0 to 0.25.0 because that API change shipped in the prior RN release; this keeps 0.27.0 focused on the breaking changes consumers encounter when upgrading from 0.26.0.

georgewrmarshall added 3 commits May 29, 2026 11:42

Initialize Release 42.0.0

dabe377

Update Release 42.0.0

ff5046e

georgewrmarshall requested a review from a team as a code owner May 29, 2026 19:39

georgewrmarshall mentioned this pull request May 29, 2026

chore: breaking changes reanimated MetaMask/metamask-mobile#29470

Closed

10 tasks

georgewrmarshall commented May 29, 2026

View reviewed changes

georgewrmarshall enabled auto-merge (squash) May 29, 2026 19:52

georgewrmarshall commented May 29, 2026

View reviewed changes

brianacnguyen approved these changes May 29, 2026

View reviewed changes

georgewrmarshall merged commit ce8600c into main May 29, 2026
43 checks passed

georgewrmarshall deleted the release/42.0.0 branch May 29, 2026 19:56

georgewrmarshall commented May 29, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Release 42.0.0#1195

Release 42.0.0#1195
georgewrmarshall merged 3 commits into
mainfrom
release/42.0.0

georgewrmarshall commented May 29, 2026 •

edited by cursor Bot

Loading

Uh oh!

github-actions Bot commented May 29, 2026

Uh oh!

georgewrmarshall May 29, 2026

Uh oh!

georgewrmarshall May 29, 2026

Uh oh!

georgewrmarshall May 29, 2026

Uh oh!

georgewrmarshall May 29, 2026

Uh oh!

georgewrmarshall May 29, 2026

Uh oh!

georgewrmarshall May 29, 2026 •

edited

Loading

Uh oh!

georgewrmarshall May 29, 2026 •

edited

Loading

Uh oh!

Uh oh!

georgewrmarshall May 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


		### Added

		- Added `FlashFilled` icon (filled lightning bolt) to `IconName`, keeping the centralized icon set aligned across React and React Native ([#1191](https://github.com/MetaMask/metamask-design-system/pull/1191))


		### Added

		- Added `TextField` for labeled text entry with optional helper and validation text, exposing `TextFieldSize` and `TextFieldType` ([#1170](https://github.com/MetaMask/metamask-design-system/pull/1170))


		### Changed

		- BREAKING: Removed `panGestureHandlerProps` from `BottomSheet` and `BottomSheetDialog` following the migration to the `react-native-gesture-handler` v2 `GestureDetector`/`Gesture.Pan()` API ([#1165](https://github.com/MetaMask/metamask-design-system/pull/1165))


		### From version 0.24.0 to 0.25.0

		#### BannerBase: `onClose` is now the only close-button behavior API

Uh oh!

Conversation

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

Uh oh!

Release 42.0.0

📦 Package Versions

🔄 Shared Type Updates (0.20.0)

Component Type Additions (#1191, #1177, #1170)

🌐 React Web Updates (0.24.0)

Added

📱 React Native Updates (0.27.0)

Added

Changed

Fixed

⚠️ Breaking Changes

Removed panGestureHandlerProps from BottomSheet / BottomSheetDialog (React Native Only)

Removed variant-based title API from HeaderBase / BottomSheetHeader (React Native Only)

🔗 Consumer note: MetaMask Mobile

✅ Checklist

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented May 29, 2026

📖 Storybook Preview

Uh oh!

georgewrmarshall May 29, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall May 29, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall May 29, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall May 29, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall May 29, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall May 29, 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 May 29, 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!

Uh oh!

georgewrmarshall May 29, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

georgewrmarshall commented May 29, 2026 •

edited by cursor Bot

Loading

Removed `panGestureHandlerProps` from `BottomSheet` / `BottomSheetDialog` (React Native Only)

Removed variant-based title API from `HeaderBase` / `BottomSheetHeader` (React Native Only)

georgewrmarshall May 29, 2026 •

edited

Loading

georgewrmarshall May 29, 2026 •

edited

Loading