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

georgewrmarshall · 2026-02-19T01:53:39Z

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:(possibly) Standardized enum values to kebab-case format
Added CorporateFare icon
Updated @metamask/utils peer dependency to 11.10.0

📱 Design System React Native (0.7.0)

BREAKING:(possibly) Standardized enum values to kebab-case format
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

Note

Medium Risk
Primarily a release/changelog version bump, but it ships a documented breaking change around enum runtime value formatting that could impact consumers persisting/transmitting enum values.

Overview
Bumps the monorepo release to 20.0.0 and increments package versions for @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 highlights, including exporting the AnimationDuration enum, adding the CorporateFare icon, a breaking kebab-case standardization of non-icon enum runtime values, and React Native peer dependency alignment (notably @metamask/design-tokens to ^8.2.0).

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

Updated all package changelogs to follow Keep a Changelog conventions: - Categorized entries under Added/Changed/Fixed sections - Removed "Uncategorized" sections - Made entries consumer-focused with clear descriptions - Removed dev-only changes (dependency bumps, tooling updates) - Added migration guidance for breaking changes - Provided context for new features and components Packages updated: - @metamask/design-tokens (8.2.0) - @metamask/design-system-react (0.8.0) - @metamask/design-system-react-native (0.7.0) - @metamask/design-system-shared (0.1.3) - @metamask/design-system-tailwind-preset (0.6.2) - @metamask/design-system-twrnc-preset (0.3.1) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

github-actions · 2026-02-19T01:54:53Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall

Some questions

- Update CorporateFare icon description to specify stocks representation - Add AnimationDuration enum export to design-tokens changelog - Clarify maintenance-only changes in tailwind and twrnc presets - Remove font weight reversion entry (changes cancelled out in same release) Changes based on self-review feedback: #921 (review) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

github-actions · 2026-02-19T02:31:23Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-02-19T18:47:42Z

📖 Storybook Preview

View PR Storybook

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

- Revert design-system-tailwind-preset from 0.6.2 to 0.6.1 - Revert design-system-twrnc-preset from 0.3.1 to 0.3.0 These packages only had internal changes (test file cleanups, dev dependencies) that don't affect published packages, so no version bump is needed per semver best practices. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

github-actions · 2026-02-19T18:59:09Z

📖 Storybook Preview

View PR Storybook

…tion BottomSheetOverlay uses AnimationDuration enum which was only exported in design-tokens@8.2.0. Updated peer dependency from ^8.1.0 to ^8.2.0 to prevent runtime import errors. Fixes: #921 (comment) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

github-actions · 2026-02-19T19:01:35Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2026-02-19T19:06:11Z

+
+- **BREAKING:** Standardized non-icon enum runtime values to use kebab-case format ([#894](https://github.com/MetaMask/metamask-design-system/pull/894))
+  - Enum values now use lowercase/kebab-case (e.g., `'primary'` instead of `'Primary'`, `'top-right'` instead of `'TopRight'`)
+  - **Migration likely not needed** - continue using enum constants (e.g., `ButtonVariant.Primary`)


Breaking change is well-documented with concrete examples. Note that migration is only needed if apps persist or transmit these values - most consumers using enum constants like ButtonVariant.Primary won't need any changes.

georgewrmarshall · 2026-02-19T19:06:13Z

+  - Enum values now use lowercase/kebab-case (e.g., `'primary'` instead of `'Primary'`, `'top-right'` instead of `'TopRight'`)
+  - **Migration likely not needed** - continue using enum constants (e.g., `ButtonVariant.Primary`)
+  - **Migration needed** only if your app persists or transmits these enum values (localStorage, databases, APIs)
+  - This prepares for migration from enums to string union types per ADR #127


ADR 127 reference provides important strategic context - this enum standardization prepares the codebase for a future migration from TypeScript enums to string union types.

georgewrmarshall · 2026-02-19T19:06:14Z

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


Critical dependency relationship: BottomSheetOverlay component uses AnimationDuration enum which was only exported starting in design-tokens 8.2.0. The peer dependency bump from ^8.1.0 to ^8.2.0 prevents runtime import errors.

georgewrmarshall · 2026-02-19T19:06:16Z

+## [8.2.0]
+
+### Added
+


This AnimationDuration export is used by the new BottomSheetOverlay component in design-system-react-native, which is why that package requires design-tokens 8.2.0 as a peer dependency.

github-actions · 2026-02-19T20:09:36Z

📖 Storybook Preview

View PR Storybook

Update yarn.lock to reflect the @metamask/design-tokens peer dependency change from ^8.1.0 to ^8.2.0 in @metamask/design-system-react-native. The original Release 20.0.0 merge (#921) updated the peer dependency but did not update yarn.lock, causing the publish workflow to fail during the yarn install --immutable check. Fixes: https://github.com/MetaMask/metamask-design-system/actions/runs/22198282954 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

This reverts commit 4500419.

## Summary Reverts the failed Release 20.0.0 (#921) to redo it properly with complete changelogs and correct yarn.lock. ## Context Release 20.0.0 was merged to main but the publish workflow failed due to a yarn.lock issue: - **Failed workflow:** https://github.com/MetaMask/metamask-design-system/actions/runs/22198282954 - **Root cause:** yarn.lock not updated when peer dependency changed After the release was merged, 7 additional PRs were merged to main: 1. Label component (#907) 2. HeaderBase component (#902) 3. Skeleton (#891) 4. Card (#923) 5. BottomSheetFooter (#899) 6. Toast (#892) 7. Input component (#909) ## Why Revert? To maintain clean version history and proper changelogs: - Release 20.0.0 was never published to NPM (latest is 19.0.0) - The 7 PRs merged after are not documented in Release 20.0.0 changelog - Reverting allows us to create a proper Release 20.0.0 that includes ALL changes ## Changes This PR reverts commit `45004196` which: - Restores package versions to pre-release state (8.1.1, 0.7.0, 0.6.0, etc.) - Restores root package.json version from 20.0.0 to 19.0.0 - Removes Release 20.0.0 changelog entries ## Next Steps After this is merged: 1. Create new `release/20.0.0` branch using standard release process 2. Include all changes (original + 7 PRs) in changelogs 3. **Run `yarn install` to update yarn.lock** 4. Merge new Release 20.0.0 PR 5. Publish workflow will succeed with correct lockfile 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

georgewrmarshall and others added 3 commits February 18, 2026 10:16

Initialize Release 20.0.0

e30ff69

Update Release 20.0.0

c5dd9dc

georgewrmarshall requested a review from a team as a code owner February 19, 2026 01:53

georgewrmarshall commented Feb 19, 2026

View reviewed changes

brianacnguyen previously approved these changes Feb 19, 2026

View reviewed changes

chore: update changelog regarding enum consistency

55f3553

georgewrmarshall dismissed brianacnguyen’s stale review via 55f3553 February 19, 2026 18:46

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

cursor Bot reviewed Feb 19, 2026

View reviewed changes

Comment thread packages/design-system-react-native/CHANGELOG.md

georgewrmarshall commented Feb 19, 2026

View reviewed changes

georgewrmarshall requested a review from brianacnguyen February 19, 2026 19:10

brianacnguyen approved these changes Feb 19, 2026

View reviewed changes

Merge branch 'main' into release/20.0.0

d4c08b9

georgewrmarshall merged commit 4500419 into main Feb 19, 2026
43 checks passed

georgewrmarshall deleted the release/20.0.0 branch February 19, 2026 20:11

georgewrmarshall mentioned this pull request Feb 20, 2026

Release 20.0.0 - Fix yarn.lock #929

Closed

georgewrmarshall added a commit that referenced this pull request Feb 20, 2026

Revert "Release 20.0.0 (#921)"

1b9617a

This reverts commit 4500419.

georgewrmarshall mentioned this pull request Feb 20, 2026

Revert Release 20.0.0 to redo properly #930

Merged

Uh oh!

Conversation

georgewrmarshall commented Feb 19, 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)

Uh oh!

github-actions Bot commented Feb 19, 2026

📖 Storybook Preview

Uh oh!

georgewrmarshall left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Feb 19, 2026

📖 Storybook Preview

Uh oh!

github-actions Bot commented Feb 19, 2026

📖 Storybook Preview

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Feb 19, 2026

📖 Storybook Preview

Uh oh!

github-actions Bot commented Feb 19, 2026

📖 Storybook Preview

Uh oh!

georgewrmarshall Feb 19, 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 Feb 19, 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 Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Feb 19, 2026

📖 Storybook Preview

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

georgewrmarshall commented Feb 19, 2026 •

edited by cursor Bot

Loading

georgewrmarshall Feb 19, 2026 •

edited

Loading

georgewrmarshall Feb 19, 2026 •

edited

Loading