Release 23.0.0 by georgewrmarshall · Pull Request #947 · MetaMask/metamask-design-system

georgewrmarshall · 2026-02-26T19:17:53Z

Release 23.0.0

This release includes typography token updates for improved text hierarchy and the new TextField component for React Native.

📦 Package Versions

@metamask/design-tokens: 8.2.2
@metamask/design-system-react-native: 0.9.0

🎨 Design Token Updates

Typography Scale Refinement (#936)

Updated the typography scale for improved text hierarchy:

What Changed:

fontSize.5 increased from 18px to 20px, affecting HeadingMd, SectionHeading, BodyLg, and ButtonLabelLg typography tokens
SectionHeading on large screens now uses 24px (up from 20px) to maintain consistent hierarchy with HeadingMd
These tokens map to TextVariant.HeadingMd, TextVariant.SectionHeading, TextVariant.BodyLg, and TextVariant.ButtonLabelLg used in the Text component from both @metamask/design-system-react and @metamask/design-system-react-native packages
Typography documentation updated to reflect the refined sizes

Impact:

Better visual hierarchy for section and page headings
Improved consistency across responsive breakpoints
More maintainable type scale with fewer similar sizes
Affects Text components in both React Web and React Native packages (peer dependency)

Why no React Web version bump?

design-tokens is a peer dependency, so consumers control which version they use
The React Web component package code itself didn't change
Following strict semantic versioning: only packages with code/API changes are bumped

📱 React Native Updates (0.9.0)

Added

Added TextField component for text input fields (feat: TextField migration #910)
- Boxed, press-to-focus wrapper around Input component
- Supports configurable sizes, optional start/end accessories
- Includes error and disabled states with custom styling
- Full accessibility support and comprehensive test coverage

✅ Checklist

Changelogs updated with human-readable descriptions
Changelog validation passed (yarn changelog:validate)
Version bumps follow semantic versioning
- design-tokens: patch (8.2.1 → 8.2.2) - typography refinement
- design-system-react-native: minor (0.8.0 → 0.9.0) - new TextField component
- design-system-react: no bump - component code unchanged, consumes design-tokens as peer dependency
No breaking changes
PR references included in changelog entries

- Updated design-tokens changelog to describe typography scale changes - Updated design-system-react-native changelog to describe TextField component - Updated design-system-react changelog to describe Text variant updates

github-actions · 2026-02-26T19:19:07Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2026-02-26T19:22:04Z

+### Changed
+
+- Updated typography scale for improved text hierarchy ([#936](https://github.com/MetaMask/metamask-design-system/pull/936))
+  - `fontSize.5` increased from 18px to 20px, affecting `HeadingMd`, `SectionHeading`, `BodyLg`, and `ButtonLabelLg` typography tokens


Typography scale change affects four specific tokens across all platforms. This impacts HeadingMd and SectionHeading (primary changes), plus BodyLg and ButtonLabelLg which share fontSize.5.

georgewrmarshall · 2026-02-26T19:22:10Z

+
+- Updated typography scale for improved text hierarchy ([#936](https://github.com/MetaMask/metamask-design-system/pull/936))
+  - `fontSize.5` increased from 18px to 20px, affecting `HeadingMd`, `SectionHeading`, `BodyLg`, and `ButtonLabelLg` typography tokens
+  - `SectionHeading` on large screens now uses 24px (up from 20px) to maintain consistent hierarchy with `HeadingMd`


Responsive behavior: SectionHeading increases to 24px on large screens to maintain 1:1 relationship with HeadingMd, ensuring consistent implementation logic across breakpoints.

georgewrmarshall · 2026-02-26T19:22:16Z

 {
  "name": "@metamask/design-tokens",
-  "version": "8.2.1",
+  "version": "8.2.2",


Patch version bump for design-tokens is appropriate: typography size refinement is non-breaking since it only affects visual presentation without changing APIs or component interfaces.

georgewrmarshall · 2026-02-26T19:22:22Z

+
+### Added
+
+- Added `TextField` component for text input fields ([#910](https://github.com/MetaMask/metamask-design-system/pull/910))


TextField component is the primary feature addition justifying the minor version bump. Provides a complete form input solution with press-to-focus behavior, size variants, accessories, and comprehensive state management.

georgewrmarshall · 2026-02-26T19:22:28Z

 {
  "name": "@metamask/design-system-react-native",
-  "version": "0.8.0",
+  "version": "0.9.0",


Minor version bump appropriate for React Native package: new TextField component extends the API surface without breaking existing functionality. Consumers can adopt incrementally.

- Keep design-system-react at 0.9.0 since component code didn't change - Only bump design-tokens for typography changes - Only bump design-system-react-native for new TextField component - Updated design-tokens changelog to mention cross-package TextVariant impact

georgewrmarshall · 2026-02-26T19:33:21Z

+- Updated typography scale for improved text hierarchy ([#936](https://github.com/MetaMask/metamask-design-system/pull/936))
+  - `fontSize.5` increased from 18px to 20px, affecting `HeadingMd`, `SectionHeading`, `BodyLg`, and `ButtonLabelLg` typography tokens
+  - `SectionHeading` on large screens now uses 24px (up from 20px) to maintain consistent hierarchy with `HeadingMd`
+  - These tokens map to `TextVariant.HeadingMd`, `TextVariant.SectionHeading`, `TextVariant.BodyLg`, and `TextVariant.ButtonLabelLg` used in the `Text` component from both `@metamask/design-system-react` and `@metamask/design-system-react-native` packages


Cross-package impact: These typography tokens map directly to TextVariant enums used by the Text component in both react and react-native packages. Since design-tokens is a peer dependency, consumers can upgrade independently without requiring new component package versions.

github-actions · 2026-02-26T19:33:23Z

📖 Storybook Preview

View PR Storybook

## Release 23.0.0 This release includes typography updates for improved text hierarchy and the new TextField component for React Native. ### 📦 Package Versions - `@metamask/design-tokens`: **8.2.2** - `@metamask/design-system-react`: **0.9.1** - `@metamask/design-system-react-native`: **0.9.0** ### 🎨 Design Token Updates #### Typography Scale Refinement (#936) Updated the typography scale for improved text hierarchy across all platforms: **What Changed:** - `fontSize.5` increased from 18px to 20px, affecting `HeadingMd`, `SectionHeading`, `BodyLg`, and `ButtonLabelLg` typography tokens - `SectionHeading` on large screens now uses 24px (up from 20px) to maintain consistent hierarchy with `HeadingMd` - Typography documentation updated to reflect the refined sizes **Impact:** - Better visual hierarchy for section and page headings - Improved consistency across responsive breakpoints - More maintainable type scale with fewer similar sizes ### ⚛️ React Web Updates (0.9.1) #### Changed - Updated `Text` component typography sizes for improved text hierarchy (#936) - `TextVariant.HeadingMd` and `TextVariant.SectionHeading` now use 20px on small screens (up from 18px) - `TextVariant.SectionHeading` now uses 24px on large screens (up from 20px) for consistent hierarchy with `HeadingMd` - `TextVariant.BodyLg` and `TextVariant.ButtonLabelLg` also updated to 20px - Typography documentation updated for accuracy ### 📱 React Native Updates (0.9.0) #### Added - Added `TextField` component for text input fields (#910) - Boxed, press-to-focus wrapper around `Input` component - Supports configurable sizes, optional start/end accessories - Includes error and disabled states with custom styling - Full accessibility support and comprehensive test coverage ### ✅ Checklist - [x] Changelogs updated with human-readable descriptions - [x] Changelog validation passed (`yarn changelog:validate`) - [x] Version bumps follow semantic versioning - design-tokens: patch (8.2.1 → 8.2.2) - typography refinement - design-system-react: patch (0.9.0 → 0.9.1) - component update using new tokens - design-system-react-native: minor (0.8.0 → 0.9.0) - new TextField component - [x] No breaking changes - [x] PR references included in changelog entries  --- > [!NOTE] > **Low Risk** > Primarily version/changelog updates; the only functional impact described is typography token/`Text` sizing tweaks and a new RN `TextField` component, which may affect UI layout but not security-critical logic. > > **Overview** > Bumps the monorepo release to `23.0.0` and updates package versions: `@metamask/design-tokens` `8.2.1`→`8.2.2`, `@metamask/design-system-react` `0.9.0`→`0.9.1`, and `@metamask/design-system-react-native` `0.8.0`→`0.9.0`. > > Changelogs are updated to document **typography scale adjustments** (notably `fontSize.5` 18px→20px and larger `SectionHeading` on large screens) and the corresponding `Text` variant size updates in React, plus the addition of a new React Native `TextField` component. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit efba7fa. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup>

georgewrmarshall added 3 commits February 26, 2026 11:06

Initialize Release 23.0.0

84db723

Update Release 23.0.0

3dbcd6b

georgewrmarshall requested a review from a team as a code owner February 26, 2026 19:17

georgewrmarshall commented Feb 26, 2026

View reviewed changes

georgewrmarshall self-assigned this Feb 26, 2026

georgewrmarshall commented Feb 26, 2026

View reviewed changes

georgewrmarshall enabled auto-merge (squash) February 26, 2026 19:26

georgewrmarshall commented Feb 26, 2026

View reviewed changes

brianacnguyen approved these changes Feb 26, 2026

View reviewed changes

georgewrmarshall merged commit 00b6d5f into main Feb 26, 2026
43 checks passed

georgewrmarshall deleted the release/23.0.0 branch February 26, 2026 20:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Release 23.0.0#947

Release 23.0.0#947
georgewrmarshall merged 4 commits into
mainfrom
release/23.0.0

georgewrmarshall commented Feb 26, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Feb 26, 2026

Uh oh!

georgewrmarshall Feb 26, 2026

Uh oh!

georgewrmarshall Feb 26, 2026

Uh oh!

georgewrmarshall Feb 26, 2026

Uh oh!

georgewrmarshall Feb 26, 2026

Uh oh!

georgewrmarshall Feb 26, 2026

Uh oh!

georgewrmarshall Feb 26, 2026

Uh oh!

github-actions Bot commented Feb 26, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


		### Added

		- Added `TextField` component for text input fields ([#910](https://github.com/MetaMask/metamask-design-system/pull/910))

Uh oh!

Conversation

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

Uh oh!

Release 23.0.0

📦 Package Versions

🎨 Design Token Updates

Typography Scale Refinement (#936)

📱 React Native Updates (0.9.0)

Added

✅ Checklist

Uh oh!

github-actions Bot commented Feb 26, 2026

📖 Storybook Preview

Uh oh!

georgewrmarshall Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Feb 26, 2026

📖 Storybook Preview

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

georgewrmarshall commented Feb 26, 2026 •

edited

Loading