chore: add missing React Native component exports by georgewrmarshall · Pull Request #967 · MetaMask/metamask-design-system

georgewrmarshall · 2026-03-09T16:03:53Z

Description

Adds the missing public exports from packages/design-system-react-native/src/components/index.ts so the top-level component barrel matches the component-level barrels.

This includes the previously missing BottomSheet, BottomSheetDialog, SensitiveText, temp-components/ImageOrSvg, and temp-components/Spinner exports, plus the related public types and existing RN symbols that were not being re-exported at the top level.

Related issues

Fixes:

Manual testing steps

Run yarn build.
Run yarn test.
Run yarn lint.
Confirm the React Native src/components/index.ts barrel re-exports the same public symbols exposed by the component-level index.ts files.

Screenshots/Recordings

Not applicable. Barrel export change only.

Before

Not applicable.

After

Not applicable.

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.

Note

Low Risk
Low risk: only updates the React Native components barrel to re-export existing components/types, with no runtime logic changes beyond module export surface.

Overview
Aligns the top-level React Native src/components/index.ts barrel with component-level barrels by adding missing public exports.

Newly re-exports BottomSheet/BottomSheetDialog, SensitiveText, and temp components ImageOrSvg and Spinner (plus their public types), and expands existing exports to include BoxBorderWidth and additional Toast symbols (ToastCloseButtonVariant, ToastContextWrapper, ToastProps).

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

github-actions · 2026-03-09T16:05:17Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall

Shouldn't export consts of any kind

georgewrmarshall · 2026-03-09T16:08:21Z


 export { ButtonBase, ButtonBaseSize } from './ButtonBase';
 export type { ButtonBaseProps } from './ButtonBase';
+export { TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from './ButtonBase';


Remove this

Suggested change

export { TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from './ButtonBase';

georgewrmarshall · 2026-03-09T16:08:39Z

+  TOAST_VISIBILITY_DURATION,
+  TOAST_ANIMATION_DURATION,
+  TOAST_BOTTOM_PADDING,


Remove these consts

Suggested change

TOAST_VISIBILITY_DURATION,

TOAST_ANIMATION_DURATION,

TOAST_BOTTOM_PADDING,

github-actions · 2026-03-09T16:13:22Z

📖 Storybook Preview

View PR Storybook

cursor

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

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

✅ Fixed: Missing SensitiveTextLength export from top-level barrel
- Added SensitiveTextLength re-export to packages/design-system-react-native/src/components/index.ts to match the component barrel and docs.

Or push these changes by commenting:

@cursor push d9dc166baa

Preview (d9dc166baa)

diff --git a/packages/design-system-react-native/src/components/index.ts b/packages/design-system-react-native/src/components/index.ts
--- a/packages/design-system-react-native/src/components/index.ts
+++ b/packages/design-system-react-native/src/components/index.ts
@@ -148,7 +148,7 @@
 export { Skeleton } from './Skeleton';
 export type { SkeletonProps } from './Skeleton';
 
-export { SensitiveText } from './SensitiveText';
+export { SensitiveText, SensitiveTextLength } from './SensitiveText';
 export type { SensitiveTextProps } from './SensitiveText';
 
 export { TabEmptyState } from './TabEmptyState';

georgewrmarshall · 2026-03-09T16:18:54Z

 export { BannerBase } from './BannerBase';
 export type { BannerBaseProps } from './BannerBase';

+export { BottomSheet } from './BottomSheet';


Making BottomSheet and BottomSheetDialog available from library

georgewrmarshall · 2026-03-09T16:22:19Z

+  BottomSheetRef,
+  BottomSheetPostCallback,


We likely won't need these types but it doesn't hurt

github-actions · 2026-03-09T16:23:49Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-03-09T21:24:32Z

📖 Storybook Preview

View PR Storybook

## 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 - Added `ButtonFilter` component for filter button functionality (#964) - Added `BannerBase` component for creating custom banner notifications (#961) #### Changed - **BREAKING:** Updated `ButtonIcon` API to use `variant` prop instead of `isInverse` and `isFloating` boolean props (#948) - Updated `Ai` icon to filled version for visual consistency (#970) ### 📱 React Native Updates (0.11.0) #### Added - Added `ButtonFilter` component (#964) - Added `BottomSheet` component for modal interactions (#963) - Added `MainActionButton` component for primary CTAs (#952) - Added `BannerBase` component for custom banners (#955) - Added `ListItem` component for standardized list rows (#958) - Added `TabEmptyState` component for empty states (#949) - Added `BottomSheetDialog` component for dialogs (#905) #### Changed - **BREAKING:** Updated `ButtonIcon` API to use `variant` prop instead of `isInverse` and `isFloating` boolean props (#948) - **BREAKING:** `Input` component now requires `value` prop and is controlled-only (#960) - Updated `Ai` icon to filled version (#970) #### Fixed - Fixed iOS placeholder alignment issue in `Input` component (#960) - Fixed missing component exports (#967) ### ⚠️ 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:** ```tsx // Before <ButtonIcon name={IconName.Add} isFloating /> // After <ButtonIcon name={IconName.Add} variant={ButtonIconVariant.Floating} /> ``` See migration guides for complete instructions: - [React Migration Guide](./packages/design-system-react/MIGRATION.md#from-version-0100-to-0110) - [React Native Migration Guide](./packages/design-system-react-native/MIGRATION.md#from-version-0100-to-0110) #### 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:** ```tsx // 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](./packages/design-system-react-native/MIGRATION.md#from-version-0100-to-0110) for complete instructions. ### ✅ Checklist - [x] Changelogs updated with human-readable descriptions - [x] Changelog validation passed (`yarn changelog:validate`) - [x] 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 - [x] Breaking changes documented with migration guidance - [x] Migration guides updated with before/after examples - [x] PR references included in changelog entries  --- > [!NOTE] > **Medium Risk** > Although this PR is mostly versioning/docs, it formalizes breaking public API changes (`ButtonIcon` and RN `Input`) that will require downstream updates and could cause consumer build failures if missed. > > **Overview** > Bumps the monorepo release to `25.0.0` and publishes new package versions (`@metamask/design-system-react@0.11.0`, `@metamask/design-system-react-native@0.11.0`, `@metamask/design-system-shared@0.4.0`) with updated changelogs. > > Documents newly added components/types (`ButtonFilter`, `BannerBase`, plus several React Native-only additions like `BottomSheet`, `ListItem`, etc.) and **breaking API changes**: `ButtonIcon` replaces `isInverse`/`isFloating` with a `variant` prop (React + RN), and React Native `Input` becomes controlled-only (requires `value`, removes `defaultValue`). Migration guides are updated with before/after examples and new compare links. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 0148a27. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup>

georgewrmarshall self-assigned this Mar 9, 2026

georgewrmarshall commented Mar 9, 2026

View reviewed changes

georgewrmarshall changed the title ~~Add missing React Native component barrel exports~~ chore: add missing React Native component exports Mar 9, 2026

cursor Bot reviewed Mar 9, 2026

View reviewed changes

Comment thread packages/design-system-react-native/src/components/index.ts

georgewrmarshall marked this pull request as ready for review March 9, 2026 16:18

georgewrmarshall requested a review from a team as a code owner March 9, 2026 16:18

georgewrmarshall commented Mar 9, 2026

View reviewed changes

kirillzyusko previously approved these changes Mar 9, 2026

View reviewed changes

georgewrmarshall added 3 commits March 9, 2026 14:22

Add missing react native component exports

e548bc9

Remove const re-exports from RN barrel

d1a78a4

Re-export SensitiveTextLength

fc695e0

georgewrmarshall dismissed kirillzyusko’s stale review via fc695e0 March 9, 2026 21:23

georgewrmarshall force-pushed the fix/rn-components-barrel-exports branch from fe63f0c to fc695e0 Compare March 9, 2026 21:23

georgewrmarshall requested a review from kirillzyusko March 9, 2026 21:23

georgewrmarshall enabled auto-merge (squash) March 9, 2026 21:23

kirillzyusko approved these changes Mar 10, 2026

View reviewed changes

georgewrmarshall merged commit fc972f2 into main Mar 10, 2026
43 checks passed

georgewrmarshall deleted the fix/rn-components-barrel-exports branch March 10, 2026 11:11

georgewrmarshall mentioned this pull request Mar 10, 2026

Release/25.0.0 #972

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore: add missing React Native component exports#967

chore: add missing React Native component exports#967
georgewrmarshall merged 3 commits into
mainfrom
fix/rn-components-barrel-exports

georgewrmarshall commented Mar 9, 2026 •

edited by cursor Bot

Loading

Uh oh!

github-actions Bot commented Mar 9, 2026

Uh oh!

georgewrmarshall left a comment

Uh oh!

georgewrmarshall Mar 9, 2026

Uh oh!

georgewrmarshall Mar 9, 2026

Uh oh!

github-actions Bot commented Mar 9, 2026

Uh oh!

cursor Bot left a comment •

edited

Loading

Uh oh!

Uh oh!

georgewrmarshall Mar 9, 2026 •

edited

Loading

Uh oh!

georgewrmarshall Mar 9, 2026

Uh oh!

github-actions Bot commented Mar 9, 2026

Uh oh!

github-actions Bot commented Mar 9, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	TOAST_VISIBILITY_DURATION,
	TOAST_ANIMATION_DURATION,
	TOAST_BOTTOM_PADDING,

Uh oh!

Conversation

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

Uh oh!

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Mar 9, 2026

📖 Storybook Preview

Uh oh!

georgewrmarshall left a comment

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Mar 9, 2026

📖 Storybook Preview

Uh oh!

cursor Bot left a comment • 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!

Uh oh!

georgewrmarshall Mar 9, 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 Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Mar 9, 2026

📖 Storybook Preview

Uh oh!

github-actions Bot commented Mar 9, 2026

📖 Storybook Preview

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

georgewrmarshall commented Mar 9, 2026 •

edited by cursor Bot

Loading

cursor Bot left a comment •

edited

Loading

georgewrmarshall Mar 9, 2026 •

edited

Loading