Skip to content

chore: migrate RN component default exports to named exports#1032

Merged
georgewrmarshall merged 3 commits into
mainfrom
chore/named-component-exports
Apr 1, 2026
Merged

chore: migrate RN component default exports to named exports#1032
georgewrmarshall merged 3 commits into
mainfrom
chore/named-component-exports

Conversation

@georgewrmarshall

@georgewrmarshall georgewrmarshall commented Apr 1, 2026

Copy link
Copy Markdown
Contributor

Description

This PR migrates React Native component modules away from default exports to named exports and updates all affected local imports/re-exports. It also adds an ESLint guard (import-x/no-default-export) for component source files to prevent regressions.

The migration covers BottomSheetDialog, Toast, Skeleton, and KeyValueRow (including its internal subcomponents), plus related stories/tests/barrels.

Related issues

Fixes:

Manual testing steps

  1. Check out chore/named-component-exports.
  2. Run yarn lint.
  3. Run yarn test.
  4. Run yarn build.
  5. Verify RN stories/components still import and render the migrated components:
    • BottomSheetDialog
    • HeaderStandard
    • Toast
    • Skeleton
    • KeyValueRow

Screenshots/Recordings

N/A (export/import refactor only).

Before

N/A

After

N/A

Pre-merge author checklist

  • I've followed MetaMask Contributor Docs
  • I've completed the PR template to the best of my ability
  • I’ve included tests if applicable
  • I’ve documented my code using JSDoc format if applicable
  • I’ve applied the right labels on the PR (see labeling guidelines). 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.

Validation notes

  • yarn lint: pass
  • yarn build: pass
  • yarn test: fails in @metamask/design-system-react on existing BadgeWrapper type-export errors (BadgeWrapperPosition and BadgeWrapperPositionAnchorShape missing from @metamask/design-system-shared).

Note

Medium Risk
Mostly a mechanical export/import refactor, but it changes public module export shape for multiple React Native components and can break downstream imports if any were missed.

Overview
Migrates several design-system-react-native components from default exports to named exports (notably BottomSheetDialog, Toast, Skeleton, and KeyValueRow plus its internal stubs), and updates all local imports, barrel re-exports, stories, tests, and Jest mocks accordingly.

Adds an ESLint guard (import-x/no-default-export) for design-system-react and design-system-react-native component source files (excluding stories/tests/.d.ts) to prevent reintroducing default exports.

Written by Cursor Bugbot for commit 7c166c0. This will update automatically on new commits. Configure here.

@github-actions

github-actions Bot commented Apr 1, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@cursor cursor Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

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

Fix All in Cursor

Bugbot Autofix prepared a fix for the issue found in the latest run.

  • ✅ Fixed: KeyValueRow stories still import removed default export
    • Updated KeyValueRow.stories.tsx to import the named KeyValueRow export as KeyValueRowComponent, removing the invalid default import.

Create PR

Or push these changes by commenting:

@cursor push f3b45ade76
Preview (f3b45ade76)
diff --git a/packages/design-system-react-native/src/components/KeyValueRow/KeyValueRow.stories.tsx b/packages/design-system-react-native/src/components/KeyValueRow/KeyValueRow.stories.tsx
--- a/packages/design-system-react-native/src/components/KeyValueRow/KeyValueRow.stories.tsx
+++ b/packages/design-system-react-native/src/components/KeyValueRow/KeyValueRow.stories.tsx
@@ -5,7 +5,8 @@
 import { IconColor, IconName, IconSize } from '../Icon';
 import { Text, TextColor, TextVariant } from '../Text';
 
-import KeyValueRowComponent, {
+import {
+  KeyValueRow as KeyValueRowComponent,
   KeyValueRowFieldIconSides,
   TooltipSizes,
 } from '.';

You can send follow-ups to this agent here.

@github-actions

github-actions Bot commented Apr 1, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@georgewrmarshall georgewrmarshall force-pushed the chore/named-component-exports branch from 645e4cb to 7c166c0 Compare April 1, 2026 23:29
@github-actions

github-actions Bot commented Apr 1, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

onOpen?.();
callback?.();
return {
BottomSheetDialog: forwardRef(

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.

This mock now exports BottomSheetDialog as a named symbol so tests match the runtime import contract after the default-to-named export migration; without this shape, BottomSheet would render an undefined component in test runs.

Comment thread eslint.config.mjs
'packages/design-system-react/src/components/**/*.{ts,tsx}',
'packages/design-system-react-native/src/components/**/*.{ts,tsx}',
],
ignores: ['**/*.stories.tsx', '**/*.test.tsx', '**/*.d.ts'],

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.

This rule is scoped to component source files and explicitly excludes stories/tests so we enforce named exports in shipped component modules without conflicting with Storybook meta defaults or test ergonomics.

capturedDialogOnClose = onClose;
capturedDialogOnOpen = onOpen;
capturedPanGestureHandlerProps = panGestureHandlerProps;
useImperativeHandle(ref, () => ({

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.

Keeping callback capture and imperative-handle behavior in the mock preserves the original test intent: verify BottomSheet wiring and lifecycle delegation instead of animation internals, which keeps these tests stable through export refactors.

@georgewrmarshall georgewrmarshall marked this pull request as ready for review April 1, 2026 23:33
@georgewrmarshall georgewrmarshall requested a review from a team as a code owner April 1, 2026 23:33
@georgewrmarshall georgewrmarshall self-assigned this Apr 1, 2026
@georgewrmarshall georgewrmarshall enabled auto-merge (squash) April 1, 2026 23:36
@georgewrmarshall georgewrmarshall merged commit a9106ea into main Apr 1, 2026
44 checks passed
@georgewrmarshall georgewrmarshall deleted the chore/named-component-exports branch April 1, 2026 23:45
@georgewrmarshall georgewrmarshall mentioned this pull request Apr 6, 2026
18 tasks
georgewrmarshall added a commit that referenced this pull request Apr 6, 2026
## Release 29.0.0

This release includes new React Native header and layout primitives,
BottomSheet API updates, shared type migrations, and
documentation/runtime dependency alignment across core design-system
packages.

### 📦 Package Versions

- @metamask/design-system-shared: 0.7.0
- @metamask/design-system-react: 0.14.0
- @metamask/design-system-react-native: 0.14.0

### 🔄 Shared Type Updates (0.7.0)

#### Added

- Added shared types used by new React Native header components,
including HeaderRoot contracts consumed by
@metamask/design-system-react-native (#1029).
- Added shared BoxHorizontal and BoxVertical utility component contracts
for cross-platform layout primitives (#1003).

#### Changed

- Migrated AvatarBase type exports from enum-based definitions to shared
const-object + string-union types, aligned with ADR-0003/ADR-0004
(#1005).
- Updated @metamask/utils dependency to ^11.11.0 (#1033).

### 🌐 React Web Updates (0.14.0)

#### Changed

- BREAKING: Updated AvatarBase exports to consume shared const-object +
string-union types rather than local enums (#1005).
- No migration required for typical usage; continue importing from
@metamask/design-system-react as before.
- Runtime values remain stable while type definitions follow
ADR-0003/ADR-0004.
- Updated @metamask/utils peer dependency to ^11.11.0 (#1033).
- Expanded BannerBase migration documentation to improve upgrade
guidance for recent releases (#1011).

### 📱 React Native Updates (0.14.0)

#### Added

- Added HeaderRoot as a new root primitive for React Native header
composition (#1029).
- Added HeaderStandard for standardized title + action header layouts in
mobile screens (#1028, #1030).
- Added TextFieldSearch for search-style text input flows on mobile
(#1027).
- Added BoxHorizontal and BoxVertical utility components for directional
layout composition (#1003).

#### Changed

- BREAKING: Replaced BottomSheet shouldNavigateBack with an optional
goBack callback for explicit navigation handling in host apps (#1024).
- Remove shouldNavigateBack usage and pass goBack when sheet close
should navigate back.
- See migration guide:
packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140.
- Added panGestureHandlerProps support to BottomSheet for
gesture-handler customization (#1016).
- Migrated React Native package exports from default exports to named
exports for consistent import ergonomics (#1032).
- BREAKING: Updated AvatarBase exports to use shared const-object +
string-union types instead of local enums (#1005).
- No migration required for typical usage; continue importing from
@metamask/design-system-react-native as before.
- Runtime values remain stable while type definitions follow
ADR-0003/ADR-0004.
- Updated @metamask/utils peer dependency to ^11.11.0 (#1033).
- Expanded BannerBase migration documentation to improve upgrade
guidance for consumers (#1011).

#### Fixed

- Updated BottomSheetHeader action button size to md for consistent
sizing and visual alignment (#1012).

### ⚠️ Breaking Changes

- BottomSheet (React Native): replaced shouldNavigateBack with optional
goBack callback (#1024).
- Migration required where shouldNavigateBack was used; see
packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140.
- AvatarBase export type migration (React + React Native): moved from
local enums to shared const-object + string-union types (#1005).
- Marked breaking for type contract changes, but no migration is
expected for typical consumer imports/usage.

### ✅ Checklist

- [x] Changelogs updated with human-readable descriptions
- [x] Changelog validation passed (yarn changelog:validate)
- [x] Version bumps follow semantic versioning
- [x] design-system-shared: minor (0.6.0 to 0.7.0) - shared types and
dependency alignment
- [x] design-system-react: minor (0.13.0 to 0.14.0) - shared type
migration and docs/dependency updates
- [x] design-system-react-native: minor (0.13.0 to 0.14.0) - new
components and API enhancements
- [x] Breaking changes documented with migration guidance
- [x] Migration guides updated with before/after examples (if breaking
changes)
- [x] PR references included in changelog entries

## **Pre-merge author checklist**

- [x] I have followed MetaMask Contributor Docs
- [x] I have reviewed the Release Workflow cursor rule
- [ ] All tests pass (yarn build && yarn test && yarn lint)
- [x] Changelog validation passes (yarn changelog:validate)

## **Pre-merge reviewer checklist**

- [x] I have reviewed the Reviewing Release PRs guide
- [x] Package versions follow semantic versioning
- [x] Changelog entries are consumer-facing (not commit message
regurgitation)
- [x] Breaking changes are documented in MIGRATION.md with examples
- [x] All unreleased changes are accounted for in changelogs

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> <sup>[Cursor Bugbot](https://cursor.com/bugbot) is generating a
summary for commit 87c05a5. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
georgewrmarshall added a commit that referenced this pull request Apr 6, 2026
## **Description**

This PR migrates React Native component modules away from default
exports to named exports and updates all affected local
imports/re-exports. It also adds an ESLint guard
(`import-x/no-default-export`) for component source files to prevent
regressions.

The migration covers `BottomSheetDialog`, `Toast`, `Skeleton`, and
`KeyValueRow` (including its internal subcomponents), plus related
stories/tests/barrels.

## **Related issues**

Fixes:

## **Manual testing steps**

1. Check out `chore/named-component-exports`.
2. Run `yarn lint`.
3. Run `yarn test`.
4. Run `yarn build`.
5. Verify RN stories/components still import and render the migrated
components:
   - `BottomSheetDialog`
   - `HeaderStandard`
   - `Toast`
   - `Skeleton`
   - `KeyValueRow`

## **Screenshots/Recordings**

N/A (export/import refactor only).

### **Before**

N/A

### **After**

N/A

## **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
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] 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.

## **Validation notes**

- `yarn lint`: pass
- `yarn build`: pass
- `yarn test`: fails in `@metamask/design-system-react` on existing
`BadgeWrapper` type-export errors (`BadgeWrapperPosition` and
`BadgeWrapperPositionAnchorShape` missing from
`@metamask/design-system-shared`).

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Mostly a mechanical export/import refactor, but it changes public
module export shape for multiple React Native components and can break
downstream imports if any were missed.
> 
> **Overview**
> Migrates several `design-system-react-native` components from
**default exports to named exports** (notably `BottomSheetDialog`,
`Toast`, `Skeleton`, and `KeyValueRow` plus its internal stubs), and
updates all local imports, barrel re-exports, stories, tests, and Jest
mocks accordingly.
> 
> Adds an ESLint guard (`import-x/no-default-export`) for
`design-system-react` and `design-system-react-native` component source
files (excluding stories/tests/`.d.ts`) to prevent reintroducing default
exports.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
7c166c0. 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 Apr 6, 2026
## Release 29.0.0

This release includes new React Native header and layout primitives,
BottomSheet API updates, shared type migrations, and
documentation/runtime dependency alignment across core design-system
packages.

### 📦 Package Versions

- @metamask/design-system-shared: 0.7.0
- @metamask/design-system-react: 0.14.0
- @metamask/design-system-react-native: 0.14.0

### 🔄 Shared Type Updates (0.7.0)

#### Added

- Added shared types used by new React Native header components,
including HeaderRoot contracts consumed by
@metamask/design-system-react-native (#1029).
- Added shared BoxHorizontal and BoxVertical utility component contracts
for cross-platform layout primitives (#1003).

#### Changed

- Migrated AvatarBase type exports from enum-based definitions to shared
const-object + string-union types, aligned with ADR-0003/ADR-0004
(#1005).
- Updated @metamask/utils dependency to ^11.11.0 (#1033).

### 🌐 React Web Updates (0.14.0)

#### Changed

- BREAKING: Updated AvatarBase exports to consume shared const-object +
string-union types rather than local enums (#1005).
- No migration required for typical usage; continue importing from
@metamask/design-system-react as before.
- Runtime values remain stable while type definitions follow
ADR-0003/ADR-0004.
- Updated @metamask/utils peer dependency to ^11.11.0 (#1033).
- Expanded BannerBase migration documentation to improve upgrade
guidance for recent releases (#1011).

### 📱 React Native Updates (0.14.0)

#### Added

- Added HeaderRoot as a new root primitive for React Native header
composition (#1029).
- Added HeaderStandard for standardized title + action header layouts in
mobile screens (#1028, #1030).
- Added TextFieldSearch for search-style text input flows on mobile
(#1027).
- Added BoxHorizontal and BoxVertical utility components for directional
layout composition (#1003).

#### Changed

- BREAKING: Replaced BottomSheet shouldNavigateBack with an optional
goBack callback for explicit navigation handling in host apps (#1024).
- Remove shouldNavigateBack usage and pass goBack when sheet close
should navigate back.
- See migration guide:
packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140.
- Added panGestureHandlerProps support to BottomSheet for
gesture-handler customization (#1016).
- Migrated React Native package exports from default exports to named
exports for consistent import ergonomics (#1032).
- BREAKING: Updated AvatarBase exports to use shared const-object +
string-union types instead of local enums (#1005).
- No migration required for typical usage; continue importing from
@metamask/design-system-react-native as before.
- Runtime values remain stable while type definitions follow
ADR-0003/ADR-0004.
- Updated @metamask/utils peer dependency to ^11.11.0 (#1033).
- Expanded BannerBase migration documentation to improve upgrade
guidance for consumers (#1011).

#### Fixed

- Updated BottomSheetHeader action button size to md for consistent
sizing and visual alignment (#1012).

### ⚠️ Breaking Changes

- BottomSheet (React Native): replaced shouldNavigateBack with optional
goBack callback (#1024).
- Migration required where shouldNavigateBack was used; see
packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140.
- AvatarBase export type migration (React + React Native): moved from
local enums to shared const-object + string-union types (#1005).
- Marked breaking for type contract changes, but no migration is
expected for typical consumer imports/usage.

### ✅ Checklist

- [x] Changelogs updated with human-readable descriptions
- [x] Changelog validation passed (yarn changelog:validate)
- [x] Version bumps follow semantic versioning
- [x] design-system-shared: minor (0.6.0 to 0.7.0) - shared types and
dependency alignment
- [x] design-system-react: minor (0.13.0 to 0.14.0) - shared type
migration and docs/dependency updates
- [x] design-system-react-native: minor (0.13.0 to 0.14.0) - new
components and API enhancements
- [x] Breaking changes documented with migration guidance
- [x] Migration guides updated with before/after examples (if breaking
changes)
- [x] PR references included in changelog entries

## **Pre-merge author checklist**

- [x] I have followed MetaMask Contributor Docs
- [x] I have reviewed the Release Workflow cursor rule
- [ ] All tests pass (yarn build && yarn test && yarn lint)
- [x] Changelog validation passes (yarn changelog:validate)

## **Pre-merge reviewer checklist**

- [x] I have reviewed the Reviewing Release PRs guide
- [x] Package versions follow semantic versioning
- [x] Changelog entries are consumer-facing (not commit message
regurgitation)
- [x] Breaking changes are documented in MIGRATION.md with examples
- [x] All unreleased changes are accounted for in changelogs

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> <sup>[Cursor Bugbot](https://cursor.com/bugbot) is generating a
summary for commit 87c05a5. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
georgewrmarshall added a commit that referenced this pull request Apr 27, 2026
## **Description**

This PR migrates React Native component modules away from default
exports to named exports and updates all affected local
imports/re-exports. It also adds an ESLint guard
(`import-x/no-default-export`) for component source files to prevent
regressions.

The migration covers `BottomSheetDialog`, `Toast`, `Skeleton`, and
`KeyValueRow` (including its internal subcomponents), plus related
stories/tests/barrels.

## **Related issues**

Fixes:

## **Manual testing steps**

1. Check out `chore/named-component-exports`.
2. Run `yarn lint`.
3. Run `yarn test`.
4. Run `yarn build`.
5. Verify RN stories/components still import and render the migrated
components:
   - `BottomSheetDialog`
   - `HeaderStandard`
   - `Toast`
   - `Skeleton`
   - `KeyValueRow`

## **Screenshots/Recordings**

N/A (export/import refactor only).

### **Before**

N/A

### **After**

N/A

## **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
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] 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.

## **Validation notes**

- `yarn lint`: pass
- `yarn build`: pass
- `yarn test`: fails in `@metamask/design-system-react` on existing
`BadgeWrapper` type-export errors (`BadgeWrapperPosition` and
`BadgeWrapperPositionAnchorShape` missing from
`@metamask/design-system-shared`).

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Mostly a mechanical export/import refactor, but it changes public
module export shape for multiple React Native components and can break
downstream imports if any were missed.
> 
> **Overview**
> Migrates several `design-system-react-native` components from
**default exports to named exports** (notably `BottomSheetDialog`,
`Toast`, `Skeleton`, and `KeyValueRow` plus its internal stubs), and
updates all local imports, barrel re-exports, stories, tests, and Jest
mocks accordingly.
> 
> Adds an ESLint guard (`import-x/no-default-export`) for
`design-system-react` and `design-system-react-native` component source
files (excluding stories/tests/`.d.ts`) to prevent reintroducing default
exports.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
7c166c0. 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 Apr 27, 2026
## Release 29.0.0

This release includes new React Native header and layout primitives,
BottomSheet API updates, shared type migrations, and
documentation/runtime dependency alignment across core design-system
packages.

### 📦 Package Versions

- @metamask/design-system-shared: 0.7.0
- @metamask/design-system-react: 0.14.0
- @metamask/design-system-react-native: 0.14.0

### 🔄 Shared Type Updates (0.7.0)

#### Added

- Added shared types used by new React Native header components,
including HeaderRoot contracts consumed by
@metamask/design-system-react-native (#1029).
- Added shared BoxHorizontal and BoxVertical utility component contracts
for cross-platform layout primitives (#1003).

#### Changed

- Migrated AvatarBase type exports from enum-based definitions to shared
const-object + string-union types, aligned with ADR-0003/ADR-0004
(#1005).
- Updated @metamask/utils dependency to ^11.11.0 (#1033).

### 🌐 React Web Updates (0.14.0)

#### Changed

- BREAKING: Updated AvatarBase exports to consume shared const-object +
string-union types rather than local enums (#1005).
- No migration required for typical usage; continue importing from
@metamask/design-system-react as before.
- Runtime values remain stable while type definitions follow
ADR-0003/ADR-0004.
- Updated @metamask/utils peer dependency to ^11.11.0 (#1033).
- Expanded BannerBase migration documentation to improve upgrade
guidance for recent releases (#1011).

### 📱 React Native Updates (0.14.0)

#### Added

- Added HeaderRoot as a new root primitive for React Native header
composition (#1029).
- Added HeaderStandard for standardized title + action header layouts in
mobile screens (#1028, #1030).
- Added TextFieldSearch for search-style text input flows on mobile
(#1027).
- Added BoxHorizontal and BoxVertical utility components for directional
layout composition (#1003).

#### Changed

- BREAKING: Replaced BottomSheet shouldNavigateBack with an optional
goBack callback for explicit navigation handling in host apps (#1024).
- Remove shouldNavigateBack usage and pass goBack when sheet close
should navigate back.
- See migration guide:
packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140.
- Added panGestureHandlerProps support to BottomSheet for
gesture-handler customization (#1016).
- Migrated React Native package exports from default exports to named
exports for consistent import ergonomics (#1032).
- BREAKING: Updated AvatarBase exports to use shared const-object +
string-union types instead of local enums (#1005).
- No migration required for typical usage; continue importing from
@metamask/design-system-react-native as before.
- Runtime values remain stable while type definitions follow
ADR-0003/ADR-0004.
- Updated @metamask/utils peer dependency to ^11.11.0 (#1033).
- Expanded BannerBase migration documentation to improve upgrade
guidance for consumers (#1011).

#### Fixed

- Updated BottomSheetHeader action button size to md for consistent
sizing and visual alignment (#1012).

### ⚠️ Breaking Changes

- BottomSheet (React Native): replaced shouldNavigateBack with optional
goBack callback (#1024).
- Migration required where shouldNavigateBack was used; see
packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140.
- AvatarBase export type migration (React + React Native): moved from
local enums to shared const-object + string-union types (#1005).
- Marked breaking for type contract changes, but no migration is
expected for typical consumer imports/usage.

### ✅ Checklist

- [x] Changelogs updated with human-readable descriptions
- [x] Changelog validation passed (yarn changelog:validate)
- [x] Version bumps follow semantic versioning
- [x] design-system-shared: minor (0.6.0 to 0.7.0) - shared types and
dependency alignment
- [x] design-system-react: minor (0.13.0 to 0.14.0) - shared type
migration and docs/dependency updates
- [x] design-system-react-native: minor (0.13.0 to 0.14.0) - new
components and API enhancements
- [x] Breaking changes documented with migration guidance
- [x] Migration guides updated with before/after examples (if breaking
changes)
- [x] PR references included in changelog entries

## **Pre-merge author checklist**

- [x] I have followed MetaMask Contributor Docs
- [x] I have reviewed the Release Workflow cursor rule
- [ ] All tests pass (yarn build && yarn test && yarn lint)
- [x] Changelog validation passes (yarn changelog:validate)

## **Pre-merge reviewer checklist**

- [x] I have reviewed the Reviewing Release PRs guide
- [x] Package versions follow semantic versioning
- [x] Changelog entries are consumer-facing (not commit message
regurgitation)
- [x] Breaking changes are documented in MIGRATION.md with examples
- [x] All unreleased changes are accounted for in changelogs

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> <sup>[Cursor Bugbot](https://cursor.com/bugbot) is generating a
summary for commit 87c05a5. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
cursor Bot pushed a commit that referenced this pull request Apr 28, 2026
## Release 29.0.0

This release includes new React Native header and layout primitives,
BottomSheet API updates, shared type migrations, and
documentation/runtime dependency alignment across core design-system
packages.

### 📦 Package Versions

- @metamask/design-system-shared: 0.7.0
- @metamask/design-system-react: 0.14.0
- @metamask/design-system-react-native: 0.14.0

### 🔄 Shared Type Updates (0.7.0)

#### Added

- Added shared types used by new React Native header components,
including HeaderRoot contracts consumed by
@metamask/design-system-react-native (#1029).
- Added shared BoxHorizontal and BoxVertical utility component contracts
for cross-platform layout primitives (#1003).

#### Changed

- Migrated AvatarBase type exports from enum-based definitions to shared
const-object + string-union types, aligned with ADR-0003/ADR-0004
(#1005).
- Updated @metamask/utils dependency to ^11.11.0 (#1033).

### 🌐 React Web Updates (0.14.0)

#### Changed

- BREAKING: Updated AvatarBase exports to consume shared const-object +
string-union types rather than local enums (#1005).
- No migration required for typical usage; continue importing from
@metamask/design-system-react as before.
- Runtime values remain stable while type definitions follow
ADR-0003/ADR-0004.
- Updated @metamask/utils peer dependency to ^11.11.0 (#1033).
- Expanded BannerBase migration documentation to improve upgrade
guidance for recent releases (#1011).

### 📱 React Native Updates (0.14.0)

#### Added

- Added HeaderRoot as a new root primitive for React Native header
composition (#1029).
- Added HeaderStandard for standardized title + action header layouts in
mobile screens (#1028, #1030).
- Added TextFieldSearch for search-style text input flows on mobile
(#1027).
- Added BoxHorizontal and BoxVertical utility components for directional
layout composition (#1003).

#### Changed

- BREAKING: Replaced BottomSheet shouldNavigateBack with an optional
goBack callback for explicit navigation handling in host apps (#1024).
- Remove shouldNavigateBack usage and pass goBack when sheet close
should navigate back.
- See migration guide:
packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140.
- Added panGestureHandlerProps support to BottomSheet for
gesture-handler customization (#1016).
- Migrated React Native package exports from default exports to named
exports for consistent import ergonomics (#1032).
- BREAKING: Updated AvatarBase exports to use shared const-object +
string-union types instead of local enums (#1005).
- No migration required for typical usage; continue importing from
@metamask/design-system-react-native as before.
- Runtime values remain stable while type definitions follow
ADR-0003/ADR-0004.
- Updated @metamask/utils peer dependency to ^11.11.0 (#1033).
- Expanded BannerBase migration documentation to improve upgrade
guidance for consumers (#1011).

#### Fixed

- Updated BottomSheetHeader action button size to md for consistent
sizing and visual alignment (#1012).

### ⚠️ Breaking Changes

- BottomSheet (React Native): replaced shouldNavigateBack with optional
goBack callback (#1024).
- Migration required where shouldNavigateBack was used; see
packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140.
- AvatarBase export type migration (React + React Native): moved from
local enums to shared const-object + string-union types (#1005).
- Marked breaking for type contract changes, but no migration is
expected for typical consumer imports/usage.

### ✅ Checklist

- [x] Changelogs updated with human-readable descriptions
- [x] Changelog validation passed (yarn changelog:validate)
- [x] Version bumps follow semantic versioning
- [x] design-system-shared: minor (0.6.0 to 0.7.0) - shared types and
dependency alignment
- [x] design-system-react: minor (0.13.0 to 0.14.0) - shared type
migration and docs/dependency updates
- [x] design-system-react-native: minor (0.13.0 to 0.14.0) - new
components and API enhancements
- [x] Breaking changes documented with migration guidance
- [x] Migration guides updated with before/after examples (if breaking
changes)
- [x] PR references included in changelog entries

## **Pre-merge author checklist**

- [x] I have followed MetaMask Contributor Docs
- [x] I have reviewed the Release Workflow cursor rule
- [ ] All tests pass (yarn build && yarn test && yarn lint)
- [x] Changelog validation passes (yarn changelog:validate)

## **Pre-merge reviewer checklist**

- [x] I have reviewed the Reviewing Release PRs guide
- [x] Package versions follow semantic versioning
- [x] Changelog entries are consumer-facing (not commit message
regurgitation)
- [x] Breaking changes are documented in MIGRATION.md with examples
- [x] All unreleased changes are accounted for in changelogs

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> <sup>[Cursor Bugbot](https://cursor.com/bugbot) is generating a
summary for commit 87c05a5. Configure
[here](https://www.cursor.com/dashboard/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