Release 43.0.0 by georgewrmarshall · Pull Request #1215 · MetaMask/metamask-design-system

georgewrmarshall · 2026-06-04T16:58:59Z

Release 43.0.0

This release drops Node.js 18 support across the release line, adds several new components, and includes a small set of breaking API changes that are documented in the migration guides.

📦 Package Versions

@metamask/design-system-shared: 0.21.0
@metamask/design-system-react: 0.25.0
@metamask/design-system-react-native: 0.28.0
@metamask/design-tokens: 8.5.0
@metamask/design-system-tailwind-preset: 0.9.0
@metamask/design-system-twrnc-preset: 0.5.0

🔄 Shared Type Updates (0.21.0)

Added

Added ContentPropsShared and ContentVerticalAlignment for React Native list-style rows and related layout patterns (#1192)

Changed

BREAKING: Dropped Node.js 18 support for the release line; consumers must run Node 20 or newer (#1206)
BREAKING: Updated TextAreaPropsShared to remove inputElement so React Native TextArea can render the root TextInput directly (#1205)

🌐 React Web Updates (0.25.0)

Added

Added Popover for anchored overlays such as menus, tooltips, and dialogs (#1153)
Added TextArea for controlled multiline text entry (#1036)
Added TextFieldSearch for controlled search-field flows on top of TextField (#1171)
Added FormTextField for labeled form controls built from Label, TextField, and HelpText (#1197)

Changed

BREAKING: Dropped Node.js 18 support for the release line; consumers must run Node 20 or newer (#1206)
Updated avatar fallback handling so AvatarToken, AvatarNetwork, and AvatarFavicon resolve consistently when the requested image is unavailable (#1212)

📱 React Native Updates (0.28.0)

Added

Added Content for composing scrollable and padded content sections on React Native screens; it is closely related to the upcoming ListItem work (#1192)

Changed

BREAKING: Dropped Node.js 18 support for the release line; consumers must run Node 20 or newer (#1206)
Added default padding and isInteractive support to SectionHeader so section rows match the new mobile layout patterns (#1210)
BREAKING: Flattened TextArea so it renders the root TextInput directly; pass TextInput props on TextArea, use the component ref for the input, and stop relying on inputProps or inputElement (#1205)
Updated avatar fallback handling so AvatarToken, AvatarNetwork, and AvatarFavicon resolve consistently when the requested image is unavailable (#1212)

⚠️ Breaking Changes

Node.js 18 support removed

What Changed:

The release line now requires Node 20 or newer.
This applies across the monorepo, including the shared package, web package, React Native package, tokens, and both preset packages.

Impact:

Consumers still on Node 18 must upgrade their runtime before installing or developing against this release line.
Node 18 is end-of-life, so this change aligns the repo with the supported app runtimes.

React Native `TextArea` flattening

What Changed:

TextArea now renders the root TextInput directly.
inputProps and inputElement are removed.
inputRef is replaced by the component ref.

Migration:

// Before (0.27.0)
<TextArea
  inputProps={{ placeholder: 'Message' }}
  inputElement={<CustomInput />}
/>

// After (0.28.0)
<TextArea placeholder="Message" ref={inputRef} />

Impact:

Affects React Native consumers using TextArea.
Call sites that depended on the wrapper/input split need to be updated.

See migration guides for complete instructions:

✅ Checklist

Changelogs updated with human-readable descriptions
Changelog validation passed (yarn changelog:validate)
Version bumps follow semantic versioning
- design-system-shared: minor (0.20.0 → 0.21.0) - shared type additions and breaking TextArea/shared runtime baseline
- design-system-react: minor (0.24.0 → 0.25.0) - new components and release-line update
- design-system-react-native: minor (0.27.0 → 0.28.0) - new component, SectionHeader update, and breaking TextArea change
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
Breaking React Native TextArea and Node 18 removal affect consumer upgrades; most diff is release metadata with coordinated peer dependency bumps.

Overview
Release 43.0.0 bumps the monorepo root to 43.0.0 and publishes coordinated semver bumps across design-system packages, with yarn.lock peer ranges updated for @metamask/design-system-tailwind-preset ^0.9.0 and @metamask/design-system-twrnc-preset ^0.5.0.

Across the release line, changelogs record Node.js 18 dropped (Node 20+ required). @metamask/design-system-react 0.25.0 documents new Popover, TextArea, TextFieldSearch, and FormTextField, plus avatar fallback fixes. @metamask/design-system-react-native 0.28.0 adds Content, updates SectionHeader (default padding, isInteractive), and includes a breaking TextArea flattening (inputProps / inputElement / inputRef removed; props and ref target the root TextInput). @metamask/design-system-shared 0.21.0 adds ContentPropsShared / ContentVerticalAlignment and removes inputElement from shared TextArea props.

Migration guide edits in this diff: React Native 0.27.0 → 0.28.0 TextArea guidance; React version heading 0.22.0 → 0.23.0 for BannerBase (changelog-driven 0.25.0 items are not new migration sections here).

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

github-actions · 2026-06-04T17:00:31Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-06-04T17:24:36Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2026-06-04T17:26:48Z

+
+- **BREAKING:** Dropped Node.js 18 support for the release line; consumers must run Node 20 or newer ([#1206](https://github.com/MetaMask/metamask-design-system/pull/1206))
+- Added default padding and `isInteractive` support to `SectionHeader` so section rows match the new mobile layout patterns ([#1210](https://github.com/MetaMask/metamask-design-system/pull/1210))
+- **BREAKING:** Flattened `TextArea` so it renders the root `TextInput` directly; pass `TextInput` props on `TextArea`, use the component `ref` for the input, and stop relying on `inputProps` or `inputElement` ([#1205](https://github.com/MetaMask/metamask-design-system/pull/1205))


This is the breaking React Native API change in the release. The migration guide mirrors the wrapper-to-root-input split removal so reviewers can see the required ref and prop updates in one place.

georgewrmarshall · 2026-06-04T17:26:48Z

+
+### Added
+
+- Added `Content` for composing scrollable and padded content sections on React Native screens; it is closely related to the upcoming `ListItem` work ([#1192](https://github.com/MetaMask/metamask-design-system/pull/1192))


This note intentionally ties Content to the upcoming ListItem work because the component is meant to be a building block for that flow, not a full list row abstraction on its own. The release note stays accurate without implying the follow-up has already shipped.

georgewrmarshall · 2026-06-04T17:26:48Z

+
+### Changed
+
+- **BREAKING:** Dropped Node.js 18 support for the release line; consumers must run Node 20 or newer ([#1206](https://github.com/MetaMask/metamask-design-system/pull/1206))


Node 18 is called out here because this release line changes the supported runtime for every package, even though the API surface in this package did not change. Keeping the requirement visible in each package changelog helps downstream consumers notice it where they upgrade.

mcmire · 2026-06-04T17:46:42Z

+
+### Changed
+
+- **BREAKING:** Dropped Node.js 18 support for the release line; the emitted token values and CSS output are unchanged, but consumers must run on Node 20 or newer ([#1206](https://github.com/MetaMask/metamask-design-system/pull/1206))


@georgewrmarshall Going forward, can we make sure to bump the major version whenever there are breaking changes? We use SemVer as a rough guide to know whether there are breaking changes or not. (I realize that for 0.x releases things are different so it's hard to keep track of. You might also consider promoting the 0.x releases in this monorepo to 1.x so it's easier to remember.)

Hey @mcmire, really fair point! My view is that staying pre-1.0.0 is still somewhat defensible for us right now because the design system is still in a migration heavy phase, and the public API is not yet as stable as we want it to be. 0.x gives us more flexibility while the component surface is still settling.

But I agree with the underlying concern, using 0.x as a standing excuse for frequent breaking changes is a smell, not a strategy 😅. We are shipping breaking changes in almost every release, I think that's a sign that we are still in the "shape the API" stage rather than the "stabilize and protect the API" stage.

I was hoping we could release 1.0.0 whe core component APIs are mostly settled, breaking changes become rare and deliberate and we're prepared to optimize for consumer stability over release velocity

For now, I think the honest answer is that we're still in that transitional zone. I'm going to bring this up in team chat so we can align on when we think the right point is to move to 1.0.0 and what criteria we want to use to get there.

Okay no problem, thanks!

georgewrmarshall added 3 commits June 4, 2026 10:11

Initialize Release 43.0.0

ad3da83

Update Release 43.0.0

0325ad3

release 43.0.0 notes cleanup

23b0cda

georgewrmarshall force-pushed the release/43.0.0 branch from c83abaa to 23b0cda Compare June 4, 2026 17:23

georgewrmarshall commented Jun 4, 2026

View reviewed changes

georgewrmarshall marked this pull request as ready for review June 4, 2026 17:35

georgewrmarshall requested a review from a team as a code owner June 4, 2026 17:35

georgewrmarshall enabled auto-merge (squash) June 4, 2026 17:36

georgewrmarshall self-assigned this Jun 4, 2026

brianacnguyen approved these changes Jun 4, 2026

View reviewed changes

georgewrmarshall merged commit 0ac37e2 into main Jun 4, 2026
36 checks passed

georgewrmarshall deleted the release/43.0.0 branch June 4, 2026 17:38

mcmire reviewed Jun 4, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Release 43.0.0#1215

Release 43.0.0#1215
georgewrmarshall merged 3 commits into
mainfrom
release/43.0.0

georgewrmarshall commented Jun 4, 2026 •

edited by cursor Bot

Loading

Uh oh!

github-actions Bot commented Jun 4, 2026

Uh oh!

github-actions Bot commented Jun 4, 2026

Uh oh!

georgewrmarshall Jun 4, 2026

Uh oh!

georgewrmarshall Jun 4, 2026

Uh oh!

georgewrmarshall Jun 4, 2026

Uh oh!

Uh oh!

mcmire Jun 4, 2026 •

edited

Loading

Uh oh!

georgewrmarshall Jun 4, 2026

Uh oh!

mcmire Jun 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants


		### Added

		- Added `Content` for composing scrollable and padded content sections on React Native screens; it is closely related to the upcoming `ListItem` work ([#1192](https://github.com/MetaMask/metamask-design-system/pull/1192))


		### Changed

		- BREAKING: Dropped Node.js 18 support for the release line; consumers must run Node 20 or newer ([#1206](https://github.com/MetaMask/metamask-design-system/pull/1206))

Uh oh!

Conversation

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

Uh oh!

Release 43.0.0

📦 Package Versions

🔄 Shared Type Updates (0.21.0)

Added

Changed

🌐 React Web Updates (0.25.0)

Added

Changed

📱 React Native Updates (0.28.0)

Added

Changed

⚠️ Breaking Changes

Node.js 18 support removed

React Native TextArea flattening

✅ Checklist

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Jun 4, 2026

📖 Storybook Preview

Uh oh!

github-actions Bot commented Jun 4, 2026

📖 Storybook Preview

Uh oh!

georgewrmarshall Jun 4, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jun 4, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jun 4, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mcmire Jun 4, 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 Jun 4, 2026

Choose a reason for hiding this comment

Uh oh!

mcmire Jun 4, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

georgewrmarshall commented Jun 4, 2026 •

edited by cursor Bot

Loading

React Native `TextArea` flattening

mcmire Jun 4, 2026 •

edited

Loading