Release 20.0.0 by georgewrmarshall · Pull Request #931 · MetaMask/metamask-design-system

georgewrmarshall · 2026-02-21T00:01:22Z

Release 20.0.0

This release includes updates to 4 packages with breaking changes, new features, and improvements.

Packages Being Released

Package	Current Version	New Version	Type
@metamask/design-tokens	8.1.1	8.2.0	Minor
@metamask/design-system-react	0.7.0	0.8.0	Minor
@metamask/design-system-react-native	0.6.0	0.7.0	Minor
@metamask/design-system-shared	0.1.2	0.1.3	Patch

Highlights

🎨 Design Tokens (8.2.0)

Exported AnimationDuration enum for standardized animation timing values

⚛️ Design System React (0.8.0)

BREAKING: Standardized enum values to kebab-case format
Added CorporateFare icon
Added Input component
Updated @metamask/utils peer dependency to 11.10.0

📱 Design System React Native (0.7.0)

BREAKING: Standardized enum values to kebab-case format
Added 7 new components: Label, HeaderBase, Skeleton, Card, BottomSheetFooter, Toast, Input
Added CorporateFare icon
Added BottomSheetOverlay component for modal interactions
Fixed ButtonBase sizing issues in flex layouts
Updated component styling to use tw.style() for better type safety

🔧 Other Packages

design-system-shared (0.1.3): Updated @metamask/utils dependency

Breaking Changes

Enum Value Format Change (React & React Native)

All component enum values (except icon names) now use kebab-case format at runtime:

// Code usage remains the same
<Button variant={ButtonVariant.Primary} />

// But the runtime value changed from 'Primary' to 'primary'
console.log(ButtonVariant.Primary); // 'primary' (was 'Primary')

Migration:

Most consumers: No changes needed - continue using enum constants (e.g., ButtonVariant.Primary)
Only if persisting/transmitting values: Update stored values from PascalCase to kebab-case (e.g., 'Primary' → 'primary', 'TopRight' → 'top-right')

Context: This prepares for migration from enums to string union types per ADR #127

Critical Fix

This release includes the yarn.lock update that was missing from the original Release 20.0.0 attempt. The peer dependency change from @metamask/design-tokens ^8.1.0 to ^8.2.0 now has the corresponding yarn.lock update, preventing the publish workflow failure.

Context

This is a recreation of Release 20.0.0 after:

The original release merged but publish failed due to missing yarn.lock update
7 additional PRs were merged to main
We reverted the release to properly document all changes

See PR #930 for revert details.

🤖 Generated with Claude Code

Note

Medium Risk
Mostly a release/versioning PR, but it includes a documented breaking change to enum runtime values and dependency range updates that can affect downstream consumers relying on persisted/transmitted enum strings.

Overview
Bumps the monorepo release to 20.0.0 and publishes new versions of @metamask/design-tokens (8.2.0), @metamask/design-system-react (0.8.0), @metamask/design-system-react-native (0.7.0), and @metamask/design-system-shared (0.1.3).

Updates changelogs to document the release contents (including a breaking kebab-case standardization for non-icon enum runtime values, new React/React Native components/icons, and the AnimationDuration token export), and aligns @metamask/design-system-react-native peer dependency on @metamask/design-tokens to ^8.2.0 with the corresponding yarn.lock update.

^{Written by Cursor Bugbot for commit f049d15. This will update automatically on new commits. Configure here.}

- Categorized all changelog entries per Keep a Changelog format (Added/Changed/Fixed) - Removed dev-only and revert entries from changelogs - Added consumer-focused descriptions for all new components and features - Updated @metamask/design-tokens peer dependency from ^8.1.0 to ^8.2.0 in design-system-react-native - Updated yarn.lock to reflect peer dependency change This fixes the issue that caused the original Release 20.0.0 publish to fail. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

georgewrmarshall · 2026-02-21T00:02:31Z

  "peerDependencies": {
    "@metamask/design-system-twrnc-preset": "^0.3.0",
-    "@metamask/design-tokens": "^8.1.0",
+    "@metamask/design-tokens": "^8.2.0",


Critical fix: This peer dependency change from ^8.1.0 to ^8.2.0 now has the corresponding yarn.lock update (see yarn.lock line 3414). The BottomSheetOverlay component uses the AnimationDuration enum which was exported in design-tokens@8.2.0, making this peer dependency update necessary.

georgewrmarshall · 2026-02-21T00:02:47Z


+## [0.7.0]
+
+### Added


This release includes 7 new components (Label, HeaderBase, Skeleton, Card, BottomSheetFooter, Toast, Input) that were merged to main after the original Release 20.0.0 failed. All entries are categorized per Keep a Changelog format with consumer-focused descriptions.

github-actions · 2026-02-21T00:02:59Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2026-02-21T00:03:02Z

+
+### Changed
+
+- **BREAKING:** Standardized non-icon enum runtime values to use kebab-case format ([#894](https://github.com/MetaMask/metamask-design-system/pull/894))


Breaking change is well-documented with clear migration guidance. Most consumers can continue using enum constants without changes. Only apps that persist or transmit enum values need to update stored values from PascalCase to kebab-case format.

georgewrmarshall · 2026-02-21T00:05:08Z

@@ -3411,7 +3411,7 @@ __metadata:
    typescript: "npm:~5.2.2"


This synchronized yarn.lock update fixes the original release failure. The peer dependency change in package.json now has its corresponding lockfile update, preventing the YN0028: The lockfile would have been modified error that blocked the first release attempt.

georgewrmarshall · 2026-02-21T00:05:37Z

+
+### Added
+
+- Exported `AnimationDuration` enum for standardized animation timing values ([#897](https://github.com/MetaMask/metamask-design-system/pull/897))


The AnimationDuration enum export is what necessitated the peer dependency bump to ^8.2.0 in the React Native package. The BottomSheetOverlay component uses these standardized animation timing values.

georgewrmarshall · 2026-02-21T00:05:54Z

+
+### Changed
+
+- **BREAKING:** Standardized non-icon enum runtime values to use kebab-case format ([#894](https://github.com/MetaMask/metamask-design-system/pull/894))


BREAKING CHANGE: This enum standardization applies to both React and React Native packages. While migration is likely not needed if consumers use enum constants (e.g., ButtonVariant.Primary), teams that persist or transmit enum values (localStorage, databases, APIs) will need to handle the PascalCase → kebab-case change.

georgewrmarshall and others added 3 commits February 20, 2026 15:55

Initialize Release 20.0.0

405f6e4

Update Release 20.0.0

bfb6cb8

georgewrmarshall requested a review from a team as a code owner February 21, 2026 00:01

georgewrmarshall commented Feb 21, 2026

View reviewed changes

georgewrmarshall enabled auto-merge (squash) February 21, 2026 00:06

brianacnguyen approved these changes Feb 21, 2026

View reviewed changes

georgewrmarshall merged commit 9d29f60 into main Feb 21, 2026
43 checks passed

georgewrmarshall deleted the release/20.0.0 branch February 21, 2026 00:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Release 20.0.0#931

Release 20.0.0#931
georgewrmarshall merged 3 commits into
mainfrom
release/20.0.0

georgewrmarshall commented Feb 21, 2026 •

edited by cursor Bot

Loading

Uh oh!

georgewrmarshall Feb 21, 2026

Uh oh!

georgewrmarshall Feb 21, 2026

Uh oh!

github-actions Bot commented Feb 21, 2026

Uh oh!

georgewrmarshall Feb 21, 2026

Uh oh!

georgewrmarshall Feb 21, 2026

Uh oh!

georgewrmarshall Feb 21, 2026

Uh oh!

georgewrmarshall Feb 21, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


		### Changed

		- BREAKING: Standardized non-icon enum runtime values to use kebab-case format ([#894](https://github.com/MetaMask/metamask-design-system/pull/894))


		### Added

		- Exported `AnimationDuration` enum for standardized animation timing values ([#897](https://github.com/MetaMask/metamask-design-system/pull/897))

Uh oh!

Conversation

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

Uh oh!

Release 20.0.0

Packages Being Released

Highlights

🎨 Design Tokens (8.2.0)

⚛️ Design System React (0.8.0)

📱 Design System React Native (0.7.0)

🔧 Other Packages

Breaking Changes

Enum Value Format Change (React & React Native)

Critical Fix

Context

Uh oh!

georgewrmarshall Feb 21, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Feb 21, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Feb 21, 2026

📖 Storybook Preview

Uh oh!

georgewrmarshall Feb 21, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Feb 21, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Feb 21, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Feb 21, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

georgewrmarshall commented Feb 21, 2026 •

edited by cursor Bot

Loading