Release/25.0.0#972
Conversation
📖 Storybook Preview |
Updated changelogs to follow Keep a Changelog format with proper categorization: - Moved entries from "Uncategorized" to appropriate sections (Added, Changed, Fixed) - Added detailed breaking change descriptions with migration instructions - Linked to migration guides for breaking changes Added migration documentation for v0.10.0 to v0.11.0: - ButtonIcon variant prop migration (both React and React Native) - Input controlled-only requirement (React Native only) - Includes before/after code examples and rationale
📖 Storybook Preview |
|
|
||
| ## [Unreleased] | ||
|
|
||
| ## [0.11.0] |
There was a problem hiding this comment.
Keep a Changelog Format Applied
This release properly categorizes changes into Added, Changed, and Fixed sections instead of the generic "Uncategorized" section.
This follows the Keep a Changelog specification and makes it easier for consumers to:
- Quickly identify new features vs breaking changes vs bug fixes
- Understand the impact of upgrading
- Reference specific types of changes
Each entry includes PR links for detailed context.
|
|
||
| ### Changed | ||
|
|
||
| - **BREAKING:** Updated `ButtonIcon` API to use `variant` prop instead of `isInverse` and `isFloating` boolean props ([#948](https://github.com/MetaMask/metamask-design-system/pull/948)) |
There was a problem hiding this comment.
Critical Breaking Change: ButtonIcon Variant Prop
The ButtonIcon API has been simplified from two boolean props (isInverse, isFloating) to a single variant enum prop with three options.
Why this change?
- Avoids boolean prop combinations that could conflict or be unclear
- Introduces a new "Filled" variant that would have required yet another boolean prop
- Makes the component's visual style more explicit and easier to reason about
Impact: All ButtonIcon usage must be updated. The migration is straightforward - isFloating becomes variant={ButtonIconVariant.Floating}. See the migration guide linked in the changelog for complete examples.
| - Added `variant` prop with three options: `ButtonIconVariant.Default` (default), `ButtonIconVariant.Filled` (new muted background with rounded corners), and `ButtonIconVariant.Floating` (replaces `isFloating` behavior) | ||
| - Migration: Replace `isFloating={true}` with `variant={ButtonIconVariant.Floating}`, and use `variant={ButtonIconVariant.Default}` for standard transparent background | ||
| - See [Migration Guide](./MIGRATION.md#from-version-0100-to-0110) for complete migration instructions | ||
| - **BREAKING:** `Input` component now requires `value` prop and is controlled-only ([#960](https://github.com/MetaMask/metamask-design-system/pull/960)) |
There was a problem hiding this comment.
Critical Breaking Change: Input and by extension TextField Controlled-Only (React Native)
The Input component now enforces controlled behavior by requiring the value prop and removing defaultValue support.
Why this change?
- Fixes iOS placeholder alignment bug: The workaround for iOS placeholder positioning requires knowing whether the input is empty, which is only reliably possible with controlled state
- Prevents mixed controlled/uncontrolled bugs: Eliminates a common React pattern that can cause subtle bugs
- Consistent API: All inputs now have predictable, explicit state management
Impact: Every Input and TextField usage must manage state with useState. This is more verbose but prevents bugs and enables the iOS fix. See migration guide for conversion examples.
|
|
||
| This section covers version-to-version breaking changes within `@metamask/design-system-react-native`. | ||
|
|
||
| ## From version 0.10.0 to 0.11.0 |
There was a problem hiding this comment.
Comprehensive Migration Documentation Added
This migration guide provides complete before/after examples for both breaking changes in this release:
- ButtonIcon variant prop: Shows how to migrate from
isFloatingto the newvariantenum - Input controlled-only: Demonstrates converting uncontrolled inputs to controlled with
useState
Each section includes:
- Clear "Breaking Changes" callout
- Side-by-side before/after code examples
- Explanation of why the change was made
- Impact assessment (what's affected)
These detailed examples are critical for consumers upgrading from 0.10.0 to 0.11.0, especially for Mobile team integration.
|
|
||
| ## [0.4.0] | ||
|
|
||
| ### Added |
There was a problem hiding this comment.
Shared Type Architecture (ADR-0003/0004 Compliance)
This release adds shared types for ButtonFilter and BannerBase components, following the established architecture:
- Const objects with derived union types (ADR-0003):
ButtonFilterVariantandBannerBaseSeverityuse the const-object pattern instead of enums - Centralized in shared package (ADR-0004): Platform packages (React/React Native) consume and extend these shared types
Why this matters:
- Ensures consistent APIs across web and mobile platforms
- Enables structural typing (string literals work where enum values are expected)
- Aligns with design system architectural decisions for type safety and flexibility
These shared types are imported and extended by both @metamask/design-system-react and @metamask/design-system-react-native.
| { | ||
| "name": "@metamask/design-system-react-native", | ||
| "version": "0.10.0", | ||
| "version": "0.11.0", |
There was a problem hiding this comment.
Minor Version Bump Despite Breaking Changes
This release bumps from 0.10.0 → 0.11.0 (minor) even though it contains breaking changes.
Why minor instead of major?
The design system is following the pre-1.0 semantic versioning convention where:
- Major (0.x → 1.0): Reserved for the stable v1.0 release when the API is considered production-ready
- Minor (0.10 → 0.11): Breaking changes are allowed during the 0.x development phase
- Patch (0.11.0 → 0.11.1): Bug fixes and non-breaking changes
This is standard practice for libraries in active development before their 1.0 release. Consumers should expect potential breaking changes in minor releases until the design system reaches 1.0.
The comprehensive migration guides and clear BREAKING labels in changelogs help consumers navigate these changes safely.
| ## [0.11.0] | ||
|
|
||
| ### Added | ||
|
|
There was a problem hiding this comment.
Significant Component Migration Progress
This release adds 7 new React Native components migrated from MetaMask Mobile's component-library:
- ButtonFilter, BottomSheet, MainActionButton, BannerBase, ListItem, TabEmptyState, BottomSheetDialog
These components represent continued progress in consolidating MetaMask's design system from consumer codebases (Extension and Mobile) into this centralized monorepo.
Impact:
- Mobile team can start consuming these components from
@metamask/design-system-react-nativeinstead of maintaining local versions - Ensures consistency between Extension and Mobile implementations
- Reduces duplication and maintenance burden across codebases
Each component follows ADR-0003/0004 patterns with shared types in @metamask/design-system-shared for cross-platform consistency.
📖 Storybook Preview |
📖 Storybook Preview |
## **Description** This PR adds comprehensive release workflow documentation for AI agents and human maintainers, addressing a critical gap in MIGRATION.md documentation guidance. **What changed:** 1. **Created `.cursor/rules/release-workflow.md`** (244 lines - Layer 2 cursor rule): - Step-by-step release creation workflow (`yarn create-release-branch`) - Release strategy guidance (release often, isolate large breaking changes) - Changelog quality standards with **explicit rules to remove dev dependencies** - **MIGRATION.md documentation patterns** (structure, critical rules, examples) - NEW - **Peer dependency warning** - do NOT manually update (causes build errors) - PR template usage and release PR structure - Verification checklists for release quality - Anti-patterns with before/after examples 2. **Updated `docs/reviewing-release-prs.md`**: - Added new **Section 7: Review MIGRATION.md for breaking changes** - Updated tl;dr checklist to include MIGRATION.md verification - Cross-references `.cursor/rules/release-workflow.md` for detailed examples 3. **Created `.github/PULL_REQUEST_TEMPLATE/release.md`**: - Standardized release PR template based on recent releases (PR #972) - Structured sections: package versions, categorized changes, breaking changes - Pre-filled verification checklist - Usage: append `?template=release.md` to PR compare URL 4. **Updated `CLAUDE.md`**: - Added reference to new release-workflow rule **Why these changes:** During the v25 release, we identified that there was no guidance on: - How to write MIGRATION.md documentation for breaking changes - When to update MIGRATION.md (any breaking change) - What structure/examples to use in migration sections - Critical rules (realistic examples, table of contents updates, before/after code) - **What to exclude from changelogs** (dev dependencies, internal tooling) - **Peer dependency management** (automated by yarn workspaces) This PR fills those gaps with AI-first documentation following our three-layer strategy (see docs/ai-agents.md): - Layer 1 (CLAUDE.md): References new rule - Layer 2 (.cursor/rules/): Actionable checklist-based workflow (200-400 lines) - Layer 3 (docs/): Human-focused reviewer guide now includes MIGRATION.md verification **Key improvements from review feedback:** 1. ✅ Release strategy: Isolate large breaking changes to single releases 2. ✅ Command corrected: `yarn create-release-branch` (not npx) 3. ✅ Changelog quality: Remove dev dependencies and developer-only changes 4. ✅ Peer deps: Critical warning not to manually update (causes errors) 5. ✅ Golden paths: Both React and React Native MIGRATION.md references 6. ✅ Trimmed: 244 lines (within 200-400 target range) 7. ✅ Removed editorial: "(Critical Gap)" from heading **MIGRATION.md structure documented:** \`\`\`markdown ## From version 0.X.0 to 0.Y.0 ### Component Breaking Change **What Changed:** - Old vs new API - Rationale **Migration:** \\\`\\\`\\\`tsx // Before (0.X.0) import { Component } from '@metamask/design-system-react'; <Component oldProp={value} /> // After (0.Y.0) import { Component, NewEnum } from '@metamask/design-system-react'; <Component newProp={NewEnum.Value} /> \\\`\\\`\\\` **Impact:** - Who is affected - What breaks \`\`\` ## **Related issues** Fixes: N/A (Documentation improvement identified during v25 release) ## **Manual testing steps** 1. Review \`.cursor/rules/release-workflow.md\` for completeness 2. Check MIGRATION.md guidance section matches recent v25 patterns 3. Verify release PR template structure matches PR #972 4. Confirm CLAUDE.md correctly references new rule 5. Review \`docs/reviewing-release-prs.md\` new section 7 ## **Screenshots/Recordings** N/A - Documentation only ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable (N/A - documentation) - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable (N/A - markdown docs) - [ ] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Low Risk** > Documentation/template additions only; no runtime or build logic changes, so risk is limited to process adoption/accuracy. > > **Overview** > Adds an AI-focused release workflow rule (`.cursor/rules/release-workflow.md`) that standardizes release branch creation, dependency update commands, changelog quality expectations, and required `MIGRATION.md` documentation for breaking changes (including anti-pattern callouts). > > Introduces a dedicated release PR template (`.github/PULL_REQUEST_TEMPLATE/release.md`) with sections for package/version listings, platform-specific changes, explicit breaking-change migration guidance, and pre-merge checklists; updates `docs/reviewing-release-prs.md` to require reviewing `MIGRATION.md` for breaking changes and links this guidance from `CLAUDE.md`. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit e648a38. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
## **Description** This PR adds comprehensive release workflow documentation for AI agents and human maintainers, addressing a critical gap in MIGRATION.md documentation guidance. **What changed:** 1. **Created `.cursor/rules/release-workflow.md`** (244 lines - Layer 2 cursor rule): - Step-by-step release creation workflow (`yarn create-release-branch`) - Release strategy guidance (release often, isolate large breaking changes) - Changelog quality standards with **explicit rules to remove dev dependencies** - **MIGRATION.md documentation patterns** (structure, critical rules, examples) - NEW - **Peer dependency warning** - do NOT manually update (causes build errors) - PR template usage and release PR structure - Verification checklists for release quality - Anti-patterns with before/after examples 2. **Updated `docs/reviewing-release-prs.md`**: - Added new **Section 7: Review MIGRATION.md for breaking changes** - Updated tl;dr checklist to include MIGRATION.md verification - Cross-references `.cursor/rules/release-workflow.md` for detailed examples 3. **Created `.github/PULL_REQUEST_TEMPLATE/release.md`**: - Standardized release PR template based on recent releases (PR #972) - Structured sections: package versions, categorized changes, breaking changes - Pre-filled verification checklist - Usage: append `?template=release.md` to PR compare URL 4. **Updated `CLAUDE.md`**: - Added reference to new release-workflow rule **Why these changes:** During the v25 release, we identified that there was no guidance on: - How to write MIGRATION.md documentation for breaking changes - When to update MIGRATION.md (any breaking change) - What structure/examples to use in migration sections - Critical rules (realistic examples, table of contents updates, before/after code) - **What to exclude from changelogs** (dev dependencies, internal tooling) - **Peer dependency management** (automated by yarn workspaces) This PR fills those gaps with AI-first documentation following our three-layer strategy (see docs/ai-agents.md): - Layer 1 (CLAUDE.md): References new rule - Layer 2 (.cursor/rules/): Actionable checklist-based workflow (200-400 lines) - Layer 3 (docs/): Human-focused reviewer guide now includes MIGRATION.md verification **Key improvements from review feedback:** 1. ✅ Release strategy: Isolate large breaking changes to single releases 2. ✅ Command corrected: `yarn create-release-branch` (not npx) 3. ✅ Changelog quality: Remove dev dependencies and developer-only changes 4. ✅ Peer deps: Critical warning not to manually update (causes errors) 5. ✅ Golden paths: Both React and React Native MIGRATION.md references 6. ✅ Trimmed: 244 lines (within 200-400 target range) 7. ✅ Removed editorial: "(Critical Gap)" from heading **MIGRATION.md structure documented:** \`\`\`markdown ## From version 0.X.0 to 0.Y.0 ### Component Breaking Change **What Changed:** - Old vs new API - Rationale **Migration:** \\\`\\\`\\\`tsx // Before (0.X.0) import { Component } from '@metamask/design-system-react'; <Component oldProp={value} /> // After (0.Y.0) import { Component, NewEnum } from '@metamask/design-system-react'; <Component newProp={NewEnum.Value} /> \\\`\\\`\\\` **Impact:** - Who is affected - What breaks \`\`\` ## **Related issues** Fixes: N/A (Documentation improvement identified during v25 release) ## **Manual testing steps** 1. Review \`.cursor/rules/release-workflow.md\` for completeness 2. Check MIGRATION.md guidance section matches recent v25 patterns 3. Verify release PR template structure matches PR #972 4. Confirm CLAUDE.md correctly references new rule 5. Review \`docs/reviewing-release-prs.md\` new section 7 ## **Screenshots/Recordings** N/A - Documentation only ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable (N/A - documentation) - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable (N/A - markdown docs) - [ ] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Low Risk** > Documentation/template additions only; no runtime or build logic changes, so risk is limited to process adoption/accuracy. > > **Overview** > Adds an AI-focused release workflow rule (`.cursor/rules/release-workflow.md`) that standardizes release branch creation, dependency update commands, changelog quality expectations, and required `MIGRATION.md` documentation for breaking changes (including anti-pattern callouts). > > Introduces a dedicated release PR template (`.github/PULL_REQUEST_TEMPLATE/release.md`) with sections for package/version listings, platform-specific changes, explicit breaking-change migration guidance, and pre-merge checklists; updates `docs/reviewing-release-prs.md` to require reviewing `MIGRATION.md` for breaking changes and links this guidance from `CLAUDE.md`. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit e648a38. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
Release 25.0.0
This release includes new components migrated from Extension and Mobile, breaking API improvements to ButtonIcon and Input components, and continued ADR-0003/0004 type migrations.
📦 Package Versions
@metamask/design-system-shared: 0.4.0@metamask/design-system-react: 0.11.0@metamask/design-system-react-native: 0.11.0🔄 Shared Type Updates (0.4.0)
Component Type Additions (#964, #955)
Added shared types for newly migrated components following ADR-0003 and ADR-0004 patterns:
What Changed:
ButtonFiltershared types withButtonFilterVariantconst object andButtonFilterPropsSharedBannerBaseshared types withBannerBaseSeverityconst object andBannerBasePropsSharedImpact:
🌐 React Web Updates (0.11.0)
Added
ButtonFiltercomponent for filter button functionality (feat: migrate ButtonFilter component to MMDS #964)BannerBasecomponent for creating custom banner notifications (feat: migrate BannerBase to MMDS react #961)Changed
ButtonIconAPI to usevariantprop instead ofisInverseandisFloatingboolean props (refactor: updated ButtonIcon to have variant prop #948)Aiicon to filled version for visual consistency (refactor: Updated Ai icon to the filled version for both packages #970)📱 React Native Updates (0.11.0)
Added
ButtonFiltercomponent (feat: migrate ButtonFilter component to MMDS #964)BottomSheetcomponent for modal interactions (feat:BottomSheetmigration #963)MainActionButtoncomponent for primary CTAs (feat: migrate MainActionButton to design-system-react-native #952)BannerBasecomponent for custom banners (feat: migrate BannerBase from mobile into MMDS #955)ListItemcomponent for standardized list rows (feat: addListItem#958)TabEmptyStatecomponent for empty states (feat:TabEmptyStatecomponent #949)BottomSheetDialogcomponent for dialogs (feat: addBottomSheetDialogcomponent #905)Changed
ButtonIconAPI to usevariantprop instead ofisInverseandisFloatingboolean props (refactor: updated ButtonIcon to have variant prop #948)Inputcomponent now requiresvalueprop and is controlled-only (fix: line-height bug and make Input controlled-only and require value #960)Aiicon to filled version (refactor: Updated Ai icon to the filled version for both packages #970)Fixed
Inputcomponent (fix: line-height bug and make Input controlled-only and require value #960)ButtonIcon Variant Prop (Both Platforms)
What Changed:
isInverseandisFloatingboolean propsvariantprop with three options:ButtonIconVariant.Default(transparent background - default)ButtonIconVariant.Filled(muted background with rounded corners - new)ButtonIconVariant.Floating(colored background with inverse icon - replacesisFloating)Migration:
See migration guides for complete instructions:
Input Controlled-Only (React Native Only)
What Changed:
defaultValuepropvalueprop is now requiredMigration:
Impact:
InputandTextFieldcomponentsSee React Native Migration Guide for complete instructions.
✅ Checklist
yarn changelog:validate)Note
Low Risk
This PR is primarily version bumps and documentation (changelog/migration guide) updates; it does not change runtime code, so functional risk is low.
Overview
Bumps versions for the release (
@metamask/metamask-design-systemto25.0.0,@metamask/design-system-react/-react-nativeto0.11.0, and@metamask/design-system-sharedto0.4.0).Updates React/React Native/shared changelogs to include the new component additions and breaking API notes (notably
ButtonIconnow usesvariant, and React NativeInputis controlled-only), and adds corresponding0.10.0 → 0.11.0sections to both migration guides with before/after examples and updated compare links.Written by Cursor Bugbot for commit dc1941c. This will update automatically on new commits. Configure here.