Release 21.0.0 by georgewrmarshall · Pull Request #938 · MetaMask/metamask-design-system

georgewrmarshall · 2026-02-25T17:32:58Z

Release 21.0.0

This release includes breaking changes, new features, and refactoring improvements across the design system packages.

📦 Package Versions

@metamask/design-system-react: 0.9.0
@metamask/design-system-react-native: 0.8.0
@metamask/design-system-shared: 0.2.0

⚠️ Breaking Changes

BadgeStatus Migration to String Union Types (#912)

The BadgeStatus component has been migrated from TypeScript enums to string union types with const objects, implementing ADR-0003 and ADR-0004:

What Changed:

BadgeStatusStatus and BadgeStatusSize enums replaced with const objects
Types now centralized in @metamask/design-system-shared package
Enables structural typing - both const values and string literals now accepted

Migration Required:

✅ Recommended: Import from shared package

import { BadgeStatusStatus } from '@metamask/design-system-shared'

⚠️ Still works but deprecated: Importing from component packages will re-export from shared
Const object values remain the same: BadgeStatusStatus.Active still works
String literals now supported: 'active' accepted where BadgeStatusStatus.Active is expected

Affected Packages:

@metamask/design-system-react@0.9.0
@metamask/design-system-react-native@0.8.0
@metamask/design-system-shared@0.2.0

✨ New Features

RadioButton Component (#926)

Added RadioButton component to React Native
Supports checked, disabled, read-only, and danger states
Full accessibility support with role="radio" and accessibilityState
Optional label rendering

🔨 Refactoring

BottomSheetFooter Reorganization (#933)

Moved BottomSheetFooter from BottomSheets/BottomSheetFooter/ to BottomSheetFooter/
Updated import paths and Storybook title
No breaking changes - all package imports continue to work

📚 References

ADR-0003: Enum to String Union Migration
ADR-0004: Centralized Types Architecture
MetaMask Decisions Repository

✅ Checklist

All changelogs updated with human-readable descriptions
Breaking changes clearly documented
Changelog validation passed (yarn changelog:validate)
All packages built successfully
Migration paths provided for breaking changes

🤖 Generated with Claude Code

Co-Authored-By: Claude noreply@anthropic.com

Note

Medium Risk
Release/version bumps are low risk, but the documented breaking BadgeStatus type export change and updated peer dependency ranges can cause downstream TypeScript/build breakages for consumers.

Overview
Bumps the monorepo release to 21.0.0 and publishes new package versions: @metamask/design-system-react@0.9.0, @metamask/design-system-react-native@0.8.0, and @metamask/design-system-shared@0.2.0.

Updates changelogs to document a breaking BadgeStatus type migration (enums → const objects + derived string unions, centralized in design-system-shared), plus a React Native RadioButton addition and a BottomSheetFooter re-org. Also bumps design-system-react peer dependency ranges for @metamask/design-system-tailwind-preset and @metamask/design-tokens.

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

Updated changelogs for @metamask/design-system-react v0.9.0, @metamask/design-system-react-native v0.8.0, and @metamask/design-system-shared v0.2.0 to provide clear, human-readable descriptions of changes. Key updates: - Properly categorized BadgeStatus migration as BREAKING change - Added detailed migration notes for enum to string union migration - Documented ADR-0003 and ADR-0004 implementation - Moved RadioButton feature to Added section with description - Categorized BottomSheetFooter refactor in Changed section - Added BadgeStatus types to design-system-shared Added section All changes validated with yarn changelog:validate. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

github-actions · 2026-02-25T17:34:06Z

📖 Storybook Preview

View PR Storybook

…rsions Updated peer dependency versions to match the current package versions in the monorepo: - @metamask/design-system-tailwind-preset: ^0.6.0 → ^0.6.1 - @metamask/design-tokens: ^8.1.0 → ^8.2.0 This ensures consumers get the correct peer dependency warnings and install compatible versions. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

github-actions · 2026-02-25T19:07:54Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2026-02-25T19:27:38Z

+    - ⚠️ **Still works** but deprecated: Importing from component package will re-export from shared
+    - The const object values remain the same (e.g., `BadgeStatusStatus.Active` still works)
+    - String literals now work directly thanks to structural typing (e.g., `'active'` accepted where `BadgeStatusStatus.Active` is expected)
+  - This migration implements ADR-0003 (enum to string union migration) and ADR-0004 (centralized types architecture)


Breaking change is clearly documented with user-friendly guidance. Users can continue importing from their current packages with no migration required. The const object syntax remains the same (BadgeStatusStatus.Active) and string literals are now also accepted ('active'). ADR links provide architectural context for those interested in the technical decisions.

georgewrmarshall · 2026-02-25T19:27:45Z

-    "@metamask/design-system-tailwind-preset": "^0.6.0",
-    "@metamask/design-tokens": "^8.1.0",
+    "@metamask/design-system-tailwind-preset": "^0.6.1",
+    "@metamask/design-tokens": "^8.2.0",


Peer dependencies updated to match current package versions in the monorepo. This ensures consumers receive correct dependency warnings and install compatible versions of design-system-tailwind-preset (0.6.1) and design-tokens (8.2.0).

georgewrmarshall · 2026-02-25T19:27:51Z

+
+### Added
+
+- Added `RadioButton` component for radio button form controls ([#926](https://github.com/MetaMask/metamask-design-system/pull/926))


RadioButton component is the primary new feature in this release. Includes comprehensive accessibility support (role and accessibilityState) and flexible state handling (checked, disabled, read-only, danger) for React Native form controls.

georgewrmarshall · 2026-02-25T19:27:58Z

+- Refactored `BottomSheetFooter` component location for better organization ([#933](https://github.com/MetaMask/metamask-design-system/pull/933))
+  - Moved from `BottomSheets/BottomSheetFooter/` to `BottomSheetFooter/`
+  - Updated import paths and Storybook title
+  - No breaking changes - all imports from package entry point continue to work


BottomSheetFooter refactor is non-breaking despite file location changes. Package entry point exports remain stable, so all consumer imports continue to work without modification. Probably not that valuable in the changelog but oh well

georgewrmarshall · 2026-02-25T19:28:04Z

+  - `BadgeStatusSize` const object with derived string union type for size variants (`sm`, `md`, `lg`)
+  - `BadgeStatusPropsShared` type interface for shared component props
+  - Implements ADR-0003 (enum to string union migration) and ADR-0004 (centralized types architecture)
+  - Enables structural typing - both const object values (`BadgeStatusStatus.Active`) and string literals (`'active'`) are now accepted


Centralized types package establishes a shared foundation for BadgeStatus types consumed by both React and React Native packages. Users continue importing from their platform-specific packages, but the underlying types are now unified. This pattern will be applied to future component migrations, reducing duplication and ensuring consistency.

georgewrmarshall · 2026-02-25T19:28:10Z

 {
  "name": "@metamask/design-system-shared",
-  "version": "0.1.3",
+  "version": "0.2.0",


Version bump to 0.2.0 follows semantic versioning for minor release. The new BadgeStatus types are additive features that maintain backward compatibility with the centralized architecture.

Updated changelogs to be more user-focused and less confusing: - Removed internal architecture details about design-system-shared - Clarified that users should continue importing from their current packages (design-system-react or design-system-react-native) - Simplified migration guidance to focus on "no migration required" - Added note that we're still evaluating best practices for const objects vs string literals Users don't need to know about internal package structure - they should just continue using the packages as usual. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

Added links to ADR-0003 and ADR-0004 in changelogs to provide architectural context for the enum to string union migration. Maintains user-friendly migration guidance while linking to deeper technical documentation for those interested. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

github-actions · 2026-02-25T19:34:48Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-02-25T19:35:29Z

📖 Storybook Preview

View PR Storybook

This reverts commit adee3a9 to redo the release without peer dependency updates that caused the release workflow to fail. The release will be resubmitted with: - Version bumps - Changelog updates - No peer dependency changes to avoid yarn.lock modifications 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

## Summary Reverts Release 21.0.0 (#938) to redo the release without peer dependency updates that caused the release workflow to fail. ## Issue The release workflow failed with: ``` YN0028: The lockfile would have been modified by this install, which is explicitly forbidden. ``` This was caused by peer dependency updates in `@metamask/design-system-react`: - `@metamask/design-system-tailwind-preset`: ^0.6.0 → ^0.6.1 - `@metamask/design-tokens`: ^8.1.0 → ^8.2.0 ## Resolution This PR reverts the release merge to allow resubmission without the peer dependency changes. The new release will include: - ✅ Version bumps - ✅ Changelog updates - ❌ No peer dependency changes (to avoid yarn.lock modifications in CI) ## Next Steps After this revert is merged, a new Release 21.0.0 PR will be created with only the necessary version and changelog updates. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> Co-authored-by: Claude <noreply@anthropic.com>

## Release 21.0.0 This release includes breaking changes, new features, and refactoring improvements across the design system packages. **Note:** This is a corrected resubmission of #938 without peer dependency updates that caused yarn.lock modifications in CI. ### 📦 Package Versions - `@metamask/design-system-react`: **0.9.0** - `@metamask/design-system-react-native`: **0.8.0** - `@metamask/design-system-shared`: **0.2.0** ### ⚠️ Breaking Changes #### BadgeStatus Migration to String Union Types (#912) The `BadgeStatus` component has been migrated from TypeScript enums to string union types with const objects: **What Changed:** - `BadgeStatusStatus` and `BadgeStatusSize` enums replaced with const objects - **No migration required** - continue importing from your current package - Const object values remain the same: `BadgeStatusStatus.Active` still works - String literals now also accepted: `'active'` works where `BadgeStatusStatus.Active` is expected - We are still evaluating best practices for const objects vs string literals **Affected Packages:** - `@metamask/design-system-react@0.9.0` - `@metamask/design-system-react-native@0.8.0` - `@metamask/design-system-shared@0.2.0` **Learn More:** - [ADR-0003: Enum to String Union Migration](https://github.com/MetaMask/decisions/blob/main/decisions/design-system/0003-enum-to-string-union-migration.md) - [ADR-0004: Centralized Types Architecture](https://github.com/MetaMask/decisions/blob/main/decisions/design-system/0004-centralized-types-architecture.md) ### ✨ New Features #### RadioButton Component (#926) - Added `RadioButton` component to React Native - Supports checked, disabled, read-only, and danger states - Full accessibility support with `role="radio"` and `accessibilityState` - Optional label rendering ### 🔨 Refactoring #### BottomSheetFooter Reorganization (#933) - Moved `BottomSheetFooter` from `BottomSheets/BottomSheetFooter/` to `BottomSheetFooter/` - Updated import paths and Storybook title - No breaking changes - all package imports continue to work ### ✅ Checklist - [x] All changelogs updated with human-readable descriptions - [x] Breaking changes clearly documented - [x] Changelog validation passed (`yarn changelog:validate`) - [x] All packages built successfully - [x] Migration paths provided for breaking changes - [x] No peer dependency changes to avoid yarn.lock modifications 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>  --- > [!NOTE] > **Low Risk** > This PR only changes package versions and changelog entries; no runtime code is modified. > > **Overview** > Bumps the monorepo release to `21.0.0` and updates package versions for `@metamask/design-system-react` to `0.9.0`, `@metamask/design-system-react-native` to `0.8.0`, and `@metamask/design-system-shared` to `0.2.0`. > > Updates the React and React Native changelogs to document a **breaking** `BadgeStatus` type migration (enums → const objects + derived string unions), plus RN-only release notes for adding `RadioButton` and a `BottomSheetFooter` location refactor; also updates changelog compare links to start from the new versions. > > Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 35569fb. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).  --------- Co-authored-by: Claude <noreply@anthropic.com>

## Release 21.0.0 This release includes breaking changes, new features, and refactoring improvements across the design system packages. ### 📦 Package Versions - `@metamask/design-system-react`: **0.9.0** - `@metamask/design-system-react-native`: **0.8.0** - `@metamask/design-system-shared`: **0.2.0** ### ⚠️ Breaking Changes #### BadgeStatus Migration to String Union Types (#912) The `BadgeStatus` component has been migrated from TypeScript enums to string union types with const objects, implementing ADR-0003 and ADR-0004: **What Changed:** - `BadgeStatusStatus` and `BadgeStatusSize` enums replaced with const objects - Types now centralized in `@metamask/design-system-shared` package - Enables structural typing - both const values and string literals now accepted **Migration Required:** - ✅ **Recommended**: Import from shared package ```typescript import { BadgeStatusStatus } from '@metamask/design-system-shared' ``` - ⚠️ **Still works** but deprecated: Importing from component packages will re-export from shared - Const object values remain the same: `BadgeStatusStatus.Active` still works - String literals now supported: `'active'` accepted where `BadgeStatusStatus.Active` is expected **Affected Packages:** - `@metamask/design-system-react@0.9.0` - `@metamask/design-system-react-native@0.8.0` - `@metamask/design-system-shared@0.2.0` ### ✨ New Features #### RadioButton Component (#926) - Added `RadioButton` component to React Native - Supports checked, disabled, read-only, and danger states - Full accessibility support with `role="radio"` and `accessibilityState` - Optional label rendering ### 🔨 Refactoring #### BottomSheetFooter Reorganization (#933) - Moved `BottomSheetFooter` from `BottomSheets/BottomSheetFooter/` to `BottomSheetFooter/` - Updated import paths and Storybook title - No breaking changes - all package imports continue to work ### 📚 References - ADR-0003: Enum to String Union Migration - ADR-0004: Centralized Types Architecture - [MetaMask Decisions Repository](https://github.com/MetaMask/decisions) ### ✅ Checklist - [x] All changelogs updated with human-readable descriptions - [x] Breaking changes clearly documented - [x] Changelog validation passed (`yarn changelog:validate`) - [x] All packages built successfully - [x] Migration paths provided for breaking changes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>  --- > [!NOTE] > **Medium Risk** > Release/version bumps are low risk, but the documented **breaking** `BadgeStatus` type export change and updated peer dependency ranges can cause downstream TypeScript/build breakages for consumers. > > **Overview** > Bumps the monorepo release to `21.0.0` and publishes new package versions: `@metamask/design-system-react@0.9.0`, `@metamask/design-system-react-native@0.8.0`, and `@metamask/design-system-shared@0.2.0`. > > Updates changelogs to document a **breaking** `BadgeStatus` type migration (enums → const objects + derived string unions, centralized in `design-system-shared`), plus a React Native `RadioButton` addition and a `BottomSheetFooter` re-org. Also bumps `design-system-react` peer dependency ranges for `@metamask/design-system-tailwind-preset` and `@metamask/design-tokens`. > > Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 6a887c7. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).  --------- Co-authored-by: Claude <noreply@anthropic.com>

## Summary Reverts Release 21.0.0 (#938) to redo the release without peer dependency updates that caused the release workflow to fail. ## Issue The release workflow failed with: ``` YN0028: The lockfile would have been modified by this install, which is explicitly forbidden. ``` This was caused by peer dependency updates in `@metamask/design-system-react`: - `@metamask/design-system-tailwind-preset`: ^0.6.0 → ^0.6.1 - `@metamask/design-tokens`: ^8.1.0 → ^8.2.0 ## Resolution This PR reverts the release merge to allow resubmission without the peer dependency changes. The new release will include: - ✅ Version bumps - ✅ Changelog updates - ❌ No peer dependency changes (to avoid yarn.lock modifications in CI) ## Next Steps After this revert is merged, a new Release 21.0.0 PR will be created with only the necessary version and changelog updates. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> Co-authored-by: Claude <noreply@anthropic.com>

## Release 21.0.0 This release includes breaking changes, new features, and refactoring improvements across the design system packages. **Note:** This is a corrected resubmission of #938 without peer dependency updates that caused yarn.lock modifications in CI. ### 📦 Package Versions - `@metamask/design-system-react`: **0.9.0** - `@metamask/design-system-react-native`: **0.8.0** - `@metamask/design-system-shared`: **0.2.0** ### ⚠️ Breaking Changes #### BadgeStatus Migration to String Union Types (#912) The `BadgeStatus` component has been migrated from TypeScript enums to string union types with const objects: **What Changed:** - `BadgeStatusStatus` and `BadgeStatusSize` enums replaced with const objects - **No migration required** - continue importing from your current package - Const object values remain the same: `BadgeStatusStatus.Active` still works - String literals now also accepted: `'active'` works where `BadgeStatusStatus.Active` is expected - We are still evaluating best practices for const objects vs string literals **Affected Packages:** - `@metamask/design-system-react@0.9.0` - `@metamask/design-system-react-native@0.8.0` - `@metamask/design-system-shared@0.2.0` **Learn More:** - [ADR-0003: Enum to String Union Migration](https://github.com/MetaMask/decisions/blob/main/decisions/design-system/0003-enum-to-string-union-migration.md) - [ADR-0004: Centralized Types Architecture](https://github.com/MetaMask/decisions/blob/main/decisions/design-system/0004-centralized-types-architecture.md) ### ✨ New Features #### RadioButton Component (#926) - Added `RadioButton` component to React Native - Supports checked, disabled, read-only, and danger states - Full accessibility support with `role="radio"` and `accessibilityState` - Optional label rendering ### 🔨 Refactoring #### BottomSheetFooter Reorganization (#933) - Moved `BottomSheetFooter` from `BottomSheets/BottomSheetFooter/` to `BottomSheetFooter/` - Updated import paths and Storybook title - No breaking changes - all package imports continue to work ### ✅ Checklist - [x] All changelogs updated with human-readable descriptions - [x] Breaking changes clearly documented - [x] Changelog validation passed (`yarn changelog:validate`) - [x] All packages built successfully - [x] Migration paths provided for breaking changes - [x] No peer dependency changes to avoid yarn.lock modifications 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>  --- > [!NOTE] > **Low Risk** > This PR only changes package versions and changelog entries; no runtime code is modified. > > **Overview** > Bumps the monorepo release to `21.0.0` and updates package versions for `@metamask/design-system-react` to `0.9.0`, `@metamask/design-system-react-native` to `0.8.0`, and `@metamask/design-system-shared` to `0.2.0`. > > Updates the React and React Native changelogs to document a **breaking** `BadgeStatus` type migration (enums → const objects + derived string unions), plus RN-only release notes for adding `RadioButton` and a `BottomSheetFooter` location refactor; also updates changelog compare links to start from the new versions. > > Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 35569fb. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).  --------- Co-authored-by: Claude <noreply@anthropic.com>

georgewrmarshall and others added 3 commits February 25, 2026 09:02

Initialize Release 21.0.0

90b96a8

Update Release 21.0.0

0608eaf

georgewrmarshall requested a review from a team as a code owner February 25, 2026 17:32

georgewrmarshall self-assigned this Feb 25, 2026

georgewrmarshall commented Feb 25, 2026

View reviewed changes

georgewrmarshall and others added 2 commits February 25, 2026 11:33

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

brianacnguyen approved these changes Feb 25, 2026

View reviewed changes

georgewrmarshall merged commit adee3a9 into main Feb 25, 2026
43 checks passed

georgewrmarshall deleted the release/21.0.0 branch February 25, 2026 20:52

This was referenced Feb 25, 2026

Revert Release 21.0.0 #939

Merged

Release 21.0.0 (corrected) #940

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Release 21.0.0#938

Release 21.0.0#938
georgewrmarshall merged 6 commits into
mainfrom
release/21.0.0

georgewrmarshall commented Feb 25, 2026 •

edited by cursor Bot

Loading

Uh oh!

github-actions Bot commented Feb 25, 2026

Uh oh!

github-actions Bot commented Feb 25, 2026

Uh oh!

georgewrmarshall Feb 25, 2026 •

edited

Loading

Uh oh!

georgewrmarshall Feb 25, 2026

Uh oh!

georgewrmarshall Feb 25, 2026

Uh oh!

georgewrmarshall Feb 25, 2026 •

edited

Loading

Uh oh!

georgewrmarshall Feb 25, 2026 •

edited

Loading

Uh oh!

georgewrmarshall Feb 25, 2026

Uh oh!

github-actions Bot commented Feb 25, 2026

Uh oh!

github-actions Bot commented Feb 25, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


		### Added

		- Added `RadioButton` component for radio button form controls ([#926](https://github.com/MetaMask/metamask-design-system/pull/926))

Uh oh!

Conversation

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

Uh oh!

Release 21.0.0

📦 Package Versions

⚠️ Breaking Changes

BadgeStatus Migration to String Union Types (#912)

✨ New Features

RadioButton Component (#926)

🔨 Refactoring

BottomSheetFooter Reorganization (#933)

📚 References

✅ Checklist

Uh oh!

github-actions Bot commented Feb 25, 2026

📖 Storybook Preview

Uh oh!

github-actions Bot commented Feb 25, 2026

📖 Storybook Preview

Uh oh!

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

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Feb 25, 2026

Choose a reason for hiding this comment

Uh oh!

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

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Feb 25, 2026

📖 Storybook Preview

Uh oh!

github-actions Bot commented Feb 25, 2026

📖 Storybook Preview

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

georgewrmarshall commented Feb 25, 2026 •

edited by cursor Bot

Loading

georgewrmarshall Feb 25, 2026 •

edited

Loading

georgewrmarshall Feb 25, 2026 •

edited

Loading

georgewrmarshall Feb 25, 2026 •

edited

Loading