Skip to content

Release/25.0.0#972

Merged
georgewrmarshall merged 6 commits into
mainfrom
release/25.0.0
Mar 10, 2026
Merged

Release/25.0.0#972
georgewrmarshall merged 6 commits into
mainfrom
release/25.0.0

Conversation

@georgewrmarshall

@georgewrmarshall georgewrmarshall commented Mar 10, 2026

Copy link
Copy Markdown
Contributor

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:

  • Added ButtonFilter shared types with ButtonFilterVariant const object and ButtonFilterPropsShared
  • Added BannerBase shared types with BannerBaseSeverity const object and BannerBasePropsShared

Impact:

  • Enables consistent ButtonFilter and BannerBase implementations across React and React Native
  • Continues ADR-0003/0004 const-object + string-union pattern adoption

🌐 React Web Updates (0.11.0)

Added

Changed

📱 React Native Updates (0.11.0)

Added

Changed

Fixed

⚠️ Breaking Changes

ButtonIcon Variant Prop (Both Platforms)

What Changed:

  • Removed isInverse and isFloating boolean props
  • Added variant prop with three options:
    • ButtonIconVariant.Default (transparent background - default)
    • ButtonIconVariant.Filled (muted background with rounded corners - new)
    • ButtonIconVariant.Floating (colored background with inverse icon - replaces isFloating)

Migration:

// Before
<ButtonIcon name={IconName.Add} isFloating />

// After
<ButtonIcon name={IconName.Add} variant={ButtonIconVariant.Floating} />

See migration guides for complete instructions:

Input Controlled-Only (React Native Only)

What Changed:

  • Removed defaultValue prop
  • value prop is now required
  • All Input instances must be controlled with state management

Migration:

// Before
<Input placeholder="Enter text" defaultValue="Initial" onChange={handleChange} />

// After
const [text, setText] = useState('Initial');
<Input placeholder="Enter text" value={text} onChange={setText} />

Impact:

  • Affects Input and TextField components
  • Provides consistent behavior and fixes iOS placeholder alignment

See React Native Migration Guide for complete instructions.

✅ Checklist

  • Changelogs updated with human-readable descriptions
  • Changelog validation passed (yarn changelog:validate)
  • Version bumps follow semantic versioning
    • design-system-shared: minor (0.3.0 → 0.4.0) - new shared types
    • design-system-react: minor (0.10.0 → 0.11.0) - new components + breaking ButtonIcon change
    • design-system-react-native: minor (0.10.0 → 0.11.0) - new components + breaking ButtonIcon and Input changes
  • Breaking changes documented with migration guidance
  • Migration guides updated with before/after examples
  • PR references included in changelog entries

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-system to 25.0.0, @metamask/design-system-react/-react-native to 0.11.0, and @metamask/design-system-shared to 0.4.0).

Updates React/React Native/shared changelogs to include the new component additions and breaking API notes (notably ButtonIcon now uses variant, and React Native Input is controlled-only), and adds corresponding 0.10.0 → 0.11.0 sections 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.

@georgewrmarshall georgewrmarshall requested a review from a team as a code owner March 10, 2026 19:41
@georgewrmarshall georgewrmarshall marked this pull request as draft March 10, 2026 19:41
@github-actions

Copy link
Copy Markdown
Contributor

📖 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
@github-actions

Copy link
Copy Markdown
Contributor

📖 Storybook Preview


## [Unreleased]

## [0.11.0]

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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))

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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))

@georgewrmarshall georgewrmarshall Mar 10, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Comprehensive Migration Documentation Added

This migration guide provides complete before/after examples for both breaking changes in this release:

  1. ButtonIcon variant prop: Shows how to migrate from isFloating to the new variant enum
  2. 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

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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): ButtonFilterVariant and BannerBaseSeverity use 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.

@georgewrmarshall georgewrmarshall marked this pull request as ready for review March 10, 2026 20:13
{
"name": "@metamask/design-system-react-native",
"version": "0.10.0",
"version": "0.11.0",

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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-native instead 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.

@github-actions

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@georgewrmarshall georgewrmarshall self-assigned this Mar 10, 2026
@georgewrmarshall georgewrmarshall enabled auto-merge (squash) March 10, 2026 20:34
@github-actions

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@georgewrmarshall georgewrmarshall merged commit 6aab1c9 into main Mar 10, 2026
43 checks passed
@georgewrmarshall georgewrmarshall deleted the release/25.0.0 branch March 10, 2026 20:40
georgewrmarshall added a commit that referenced this pull request Mar 17, 2026
## **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 -->
georgewrmarshall added a commit that referenced this pull request Mar 20, 2026
## **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 -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants