feat: BottomSheet migration#963
Conversation
0c9e40b to
af10277
Compare
📖 Storybook Preview |
| > | ||
| {children} | ||
| </BottomSheetDialog> | ||
| </KeyboardAvoidingView> |
There was a problem hiding this comment.
Nested KeyboardAvoidingViews cause double keyboard offset
High Severity
BottomSheet wraps its entire render tree in a KeyboardAvoidingView, but BottomSheetDialog (rendered inside it) already contains its own KeyboardAvoidingView with the same behavior, keyboardVerticalOffset, and enabled settings. When the keyboard appears on iOS, both views independently apply padding adjustments, causing the sheet content to shift up by roughly double the intended amount.
Additional Locations (1)
There was a problem hiding this comment.
This is indeed suspicios, but this is original code from mobile repo 🤔
📖 Storybook Preview |
georgewrmarshall
left a comment
There was a problem hiding this comment.
Looking good! I think we still need to export it from the index.ts file in components/
| const goBack = () => setIsVisible(false); | ||
|
|
||
| return ( | ||
| <View style={{ flex: 1, width: '100%' }}> |
There was a problem hiding this comment.
non-blocking: I think it would be good to try to style everything with either the Box or twrnc classnames we can do a larger clean up as a subsequent PR
📖 Storybook Preview |
| BottomSheetProps, | ||
| BottomSheetRef, | ||
| BottomSheetPostCallback, | ||
| } from './BottomSheet.types'; |
There was a problem hiding this comment.
BottomSheet component not exported from package index
High Severity
BottomSheet, BottomSheetRef, and BottomSheetPostCallback are exported from the local index.ts but never re-exported from components/index.ts. All sibling components (BottomSheetFooter, BottomSheetHeader, BottomSheetOverlay) are exported there. Package consumers cannot import BottomSheet from @metamask/design-system-react-native, making the component unusable outside the package.
## 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 <!-- CURSOR_SUMMARY --> --- > [!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> <!-- /CURSOR_SUMMARY -->


Description
Added
BottomSheetcomponent (last component fromBottomSheetepic).Important
We removed direct integration with
react-navigation, so we need to create wrapper (that will match existing props) inside mobile repo and use wrapper 🤞Related issues
Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-273
Manual testing steps
BottomSheetcomponentScreenshots/Recordings
Before
After
Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-03-06.at.16.42.55.mov
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Medium Risk
Adds a new interactive bottom-sheet wrapper that hooks Android
BackHandlerand navigation callbacks; behavior changes are contained to new usages but could affect screens that adopt it if close/open callback semantics are misunderstood.Overview
Introduces a new
BottomSheetcomponent that composesBottomSheetDialog+BottomSheetOverlay, adding navigation integration via requiredgoBack/shouldNavigateBack, safe-area/keyboard-avoidance handling, and an imperative ref API (onOpenBottomSheet/onCloseBottomSheet) with optional post-animation callbacks.Adds Storybook stories to exercise default, non-interactable, fullscreen, and imperative-control modes, plus a comprehensive test suite covering overlay/back-button dismissal, callback firing, and duplicate-close protection. Includes new component docs (
README.md) and a barrel export for the new component folder, and updates Storybook’s auto-generatedstorybook.requires.jsto register the new story.Written by Cursor Bugbot for commit f6a37be. This will update automatically on new commits. Configure here.