refactor: move BottomSheetFooter out of BottomSheets folder by georgewrmarshall · Pull Request #933 · MetaMask/metamask-design-system

georgewrmarshall · 2026-02-23T22:15:01Z

Description

Fixes incorrect nesting of BottomSheetFooter left over from mobile conventions

Improvement:
Moved the component to align with the standard structure, making it easier to locate and maintain.

Changes:

Moved BottomSheetFooter from BottomSheets/BottomSheetFooter/ to BottomSheetFooter/
Updated import paths in component exports (index.ts)
Fixed internal Button import paths to reflect new location
Updated Storybook title from 'Components/BottomSheets/BottomSheetFooter' to 'Components/BottomSheetFooter'
Removed empty BottomSheets folder

Related issues

Fixes: N/A

Manual testing steps

Run yarn build - should complete successfully
Run yarn lint - should pass without errors
Run yarn workspace @metamask/design-system-react-native run test - all tests should pass
Import BottomSheetFooter from @metamask/design-system-react-native - should work as before

Screenshots/Recordings

N/A - This is a refactor with no visual changes

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 (existing tests updated/passing)
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
Purely organizational refactor (path/export/story title updates) with no functional or data-flow changes; main risk is breaking imports for downstream consumers if any paths were missed.

Overview
Moves BottomSheetFooter out of the BottomSheets namespace to a top-level BottomSheetFooter component export, updating components/index.ts and internal type imports accordingly.

Updates the BottomSheetFooter Storybook entry to the new Components/BottomSheetFooter title and fixes the component’s internal Button import path to match the new location.

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

Restructures the BottomSheetFooter component location in the React Native design system package for better organization. Changes: - Moved BottomSheetFooter from `BottomSheets/BottomSheetFooter/` to `BottomSheetFooter/` - Updated import paths in component exports (index.ts) - Fixed internal Button import paths to reflect new location - Updated Storybook title from 'Components/BottomSheets/BottomSheetFooter' to 'Components/BottomSheetFooter' - Removed empty BottomSheets folder This change aligns the component structure with the rest of the design system where components are in their own top-level directories. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

github-actions · 2026-02-23T22:16:13Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2026-02-23T22:24:10Z


 const meta: Meta<BottomSheetFooterProps> = {
-  title: 'Components/BottomSheets/BottomSheetFooter',
+  title: 'Components/BottomSheetFooter',


Storybook title updated to match the new component location, ensuring the navigation hierarchy in Storybook reflects the flattened folder structure.

georgewrmarshall · 2026-02-23T22:24:16Z


 // External dependencies.
-import { Button, ButtonVariant } from '../../Button';
+import { Button, ButtonVariant } from '../Button';


Import path adjusted from two levels up to one level up due to the component moving from BottomSheets/BottomSheetFooter/ to BottomSheetFooter/. This maintains the correct relative path to the Button component.

georgewrmarshall · 2026-02-23T22:24:22Z


 // External dependencies.
-import type { ButtonProps } from '../../Button/Button.types';
+import type { ButtonProps } from '../Button/Button.types';


Type import path also updated to reflect the flattened structure. ButtonProps is imported from sibling component rather than parent's parent directory.

georgewrmarshall · 2026-02-23T22:24:29Z

-  BottomSheetFooter,
-  ButtonsAlignment,
-} from './BottomSheets/BottomSheetFooter';
+export { BottomSheetFooter, ButtonsAlignment } from './BottomSheetFooter';


Public API remains unchanged. Component exports moved from nested path to top-level, aligning with other components like AvatarAccount, BadgeWrapper, etc. Consumers importing from the package will not be affected.

github-actions · 2026-02-23T22:27:23Z

📖 Storybook Preview

View PR Storybook

## Release 21.0.0 This release includes breaking changes, new features, and refactoring improvements across the design system packages. ### 📦 Package Versions - `@metamask/design-system-react`: **0.9.0** - `@metamask/design-system-react-native`: **0.8.0** - `@metamask/design-system-shared`: **0.2.0** ### ⚠️ Breaking Changes #### BadgeStatus Migration to String Union Types (#912) The `BadgeStatus` component has been migrated from TypeScript enums to string union types with const objects, implementing ADR-0003 and ADR-0004: **What Changed:** - `BadgeStatusStatus` and `BadgeStatusSize` enums replaced with const objects - Types now centralized in `@metamask/design-system-shared` package - Enables structural typing - both const values and string literals now accepted **Migration Required:** - ✅ **Recommended**: Import from shared package ```typescript import { BadgeStatusStatus } from '@metamask/design-system-shared' ``` - ⚠️ **Still works** but deprecated: Importing from component packages will re-export from shared - Const object values remain the same: `BadgeStatusStatus.Active` still works - String literals now supported: `'active'` accepted where `BadgeStatusStatus.Active` is expected **Affected Packages:** - `@metamask/design-system-react@0.9.0` - `@metamask/design-system-react-native@0.8.0` - `@metamask/design-system-shared@0.2.0` ### ✨ New Features #### RadioButton Component (#926) - Added `RadioButton` component to React Native - Supports checked, disabled, read-only, and danger states - Full accessibility support with `role="radio"` and `accessibilityState` - Optional label rendering ### 🔨 Refactoring #### BottomSheetFooter Reorganization (#933) - Moved `BottomSheetFooter` from `BottomSheets/BottomSheetFooter/` to `BottomSheetFooter/` - Updated import paths and Storybook title - No breaking changes - all package imports continue to work ### 📚 References - ADR-0003: Enum to String Union Migration - ADR-0004: Centralized Types Architecture - [MetaMask Decisions Repository](https://github.com/MetaMask/decisions) ### ✅ Checklist - [x] All changelogs updated with human-readable descriptions - [x] Breaking changes clearly documented - [x] Changelog validation passed (`yarn changelog:validate`) - [x] All packages built successfully - [x] Migration paths provided for breaking changes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>  --- > [!NOTE] > **Medium Risk** > Release/version bumps are low risk, but the documented **breaking** `BadgeStatus` type export change and updated peer dependency ranges can cause downstream TypeScript/build breakages for consumers. > > **Overview** > Bumps the monorepo release to `21.0.0` and publishes new package versions: `@metamask/design-system-react@0.9.0`, `@metamask/design-system-react-native@0.8.0`, and `@metamask/design-system-shared@0.2.0`. > > Updates changelogs to document a **breaking** `BadgeStatus` type migration (enums → const objects + derived string unions, centralized in `design-system-shared`), plus a React Native `RadioButton` addition and a `BottomSheetFooter` re-org. Also bumps `design-system-react` peer dependency ranges for `@metamask/design-system-tailwind-preset` and `@metamask/design-tokens`. > > Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 6a887c7. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).  --------- Co-authored-by: Claude <noreply@anthropic.com>

## Release 21.0.0 This release includes breaking changes, new features, and refactoring improvements across the design system packages. **Note:** This is a corrected resubmission of #938 without peer dependency updates that caused yarn.lock modifications in CI. ### 📦 Package Versions - `@metamask/design-system-react`: **0.9.0** - `@metamask/design-system-react-native`: **0.8.0** - `@metamask/design-system-shared`: **0.2.0** ### ⚠️ Breaking Changes #### BadgeStatus Migration to String Union Types (#912) The `BadgeStatus` component has been migrated from TypeScript enums to string union types with const objects: **What Changed:** - `BadgeStatusStatus` and `BadgeStatusSize` enums replaced with const objects - **No migration required** - continue importing from your current package - Const object values remain the same: `BadgeStatusStatus.Active` still works - String literals now also accepted: `'active'` works where `BadgeStatusStatus.Active` is expected - We are still evaluating best practices for const objects vs string literals **Affected Packages:** - `@metamask/design-system-react@0.9.0` - `@metamask/design-system-react-native@0.8.0` - `@metamask/design-system-shared@0.2.0` **Learn More:** - [ADR-0003: Enum to String Union Migration](https://github.com/MetaMask/decisions/blob/main/decisions/design-system/0003-enum-to-string-union-migration.md) - [ADR-0004: Centralized Types Architecture](https://github.com/MetaMask/decisions/blob/main/decisions/design-system/0004-centralized-types-architecture.md) ### ✨ New Features #### RadioButton Component (#926) - Added `RadioButton` component to React Native - Supports checked, disabled, read-only, and danger states - Full accessibility support with `role="radio"` and `accessibilityState` - Optional label rendering ### 🔨 Refactoring #### BottomSheetFooter Reorganization (#933) - Moved `BottomSheetFooter` from `BottomSheets/BottomSheetFooter/` to `BottomSheetFooter/` - Updated import paths and Storybook title - No breaking changes - all package imports continue to work ### ✅ Checklist - [x] All changelogs updated with human-readable descriptions - [x] Breaking changes clearly documented - [x] Changelog validation passed (`yarn changelog:validate`) - [x] All packages built successfully - [x] Migration paths provided for breaking changes - [x] No peer dependency changes to avoid yarn.lock modifications 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>  --- > [!NOTE] > **Low Risk** > This PR only changes package versions and changelog entries; no runtime code is modified. > > **Overview** > Bumps the monorepo release to `21.0.0` and updates package versions for `@metamask/design-system-react` to `0.9.0`, `@metamask/design-system-react-native` to `0.8.0`, and `@metamask/design-system-shared` to `0.2.0`. > > Updates the React and React Native changelogs to document a **breaking** `BadgeStatus` type migration (enums → const objects + derived string unions), plus RN-only release notes for adding `RadioButton` and a `BottomSheetFooter` location refactor; also updates changelog compare links to start from the new versions. > > Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 35569fb. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).  --------- Co-authored-by: Claude <noreply@anthropic.com>

## Release 21.0.0 This release includes breaking changes, new features, and refactoring improvements across the design system packages. ### 📦 Package Versions - `@metamask/design-system-react`: **0.9.0** - `@metamask/design-system-react-native`: **0.8.0** - `@metamask/design-system-shared`: **0.2.0** ### ⚠️ Breaking Changes #### BadgeStatus Migration to String Union Types (#912) The `BadgeStatus` component has been migrated from TypeScript enums to string union types with const objects, implementing ADR-0003 and ADR-0004: **What Changed:** - `BadgeStatusStatus` and `BadgeStatusSize` enums replaced with const objects - Types now centralized in `@metamask/design-system-shared` package - Enables structural typing - both const values and string literals now accepted **Migration Required:** - ✅ **Recommended**: Import from shared package ```typescript import { BadgeStatusStatus } from '@metamask/design-system-shared' ``` - ⚠️ **Still works** but deprecated: Importing from component packages will re-export from shared - Const object values remain the same: `BadgeStatusStatus.Active` still works - String literals now supported: `'active'` accepted where `BadgeStatusStatus.Active` is expected **Affected Packages:** - `@metamask/design-system-react@0.9.0` - `@metamask/design-system-react-native@0.8.0` - `@metamask/design-system-shared@0.2.0` ### ✨ New Features #### RadioButton Component (#926) - Added `RadioButton` component to React Native - Supports checked, disabled, read-only, and danger states - Full accessibility support with `role="radio"` and `accessibilityState` - Optional label rendering ### 🔨 Refactoring #### BottomSheetFooter Reorganization (#933) - Moved `BottomSheetFooter` from `BottomSheets/BottomSheetFooter/` to `BottomSheetFooter/` - Updated import paths and Storybook title - No breaking changes - all package imports continue to work ### 📚 References - ADR-0003: Enum to String Union Migration - ADR-0004: Centralized Types Architecture - [MetaMask Decisions Repository](https://github.com/MetaMask/decisions) ### ✅ Checklist - [x] All changelogs updated with human-readable descriptions - [x] Breaking changes clearly documented - [x] Changelog validation passed (`yarn changelog:validate`) - [x] All packages built successfully - [x] Migration paths provided for breaking changes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>  --- > [!NOTE] > **Medium Risk** > Release/version bumps are low risk, but the documented **breaking** `BadgeStatus` type export change and updated peer dependency ranges can cause downstream TypeScript/build breakages for consumers. > > **Overview** > Bumps the monorepo release to `21.0.0` and publishes new package versions: `@metamask/design-system-react@0.9.0`, `@metamask/design-system-react-native@0.8.0`, and `@metamask/design-system-shared@0.2.0`. > > Updates changelogs to document a **breaking** `BadgeStatus` type migration (enums → const objects + derived string unions, centralized in `design-system-shared`), plus a React Native `RadioButton` addition and a `BottomSheetFooter` re-org. Also bumps `design-system-react` peer dependency ranges for `@metamask/design-system-tailwind-preset` and `@metamask/design-tokens`. > > Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 6a887c7. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).  --------- Co-authored-by: Claude <noreply@anthropic.com>

## Release 21.0.0 This release includes breaking changes, new features, and refactoring improvements across the design system packages. **Note:** This is a corrected resubmission of #938 without peer dependency updates that caused yarn.lock modifications in CI. ### 📦 Package Versions - `@metamask/design-system-react`: **0.9.0** - `@metamask/design-system-react-native`: **0.8.0** - `@metamask/design-system-shared`: **0.2.0** ### ⚠️ Breaking Changes #### BadgeStatus Migration to String Union Types (#912) The `BadgeStatus` component has been migrated from TypeScript enums to string union types with const objects: **What Changed:** - `BadgeStatusStatus` and `BadgeStatusSize` enums replaced with const objects - **No migration required** - continue importing from your current package - Const object values remain the same: `BadgeStatusStatus.Active` still works - String literals now also accepted: `'active'` works where `BadgeStatusStatus.Active` is expected - We are still evaluating best practices for const objects vs string literals **Affected Packages:** - `@metamask/design-system-react@0.9.0` - `@metamask/design-system-react-native@0.8.0` - `@metamask/design-system-shared@0.2.0` **Learn More:** - [ADR-0003: Enum to String Union Migration](https://github.com/MetaMask/decisions/blob/main/decisions/design-system/0003-enum-to-string-union-migration.md) - [ADR-0004: Centralized Types Architecture](https://github.com/MetaMask/decisions/blob/main/decisions/design-system/0004-centralized-types-architecture.md) ### ✨ New Features #### RadioButton Component (#926) - Added `RadioButton` component to React Native - Supports checked, disabled, read-only, and danger states - Full accessibility support with `role="radio"` and `accessibilityState` - Optional label rendering ### 🔨 Refactoring #### BottomSheetFooter Reorganization (#933) - Moved `BottomSheetFooter` from `BottomSheets/BottomSheetFooter/` to `BottomSheetFooter/` - Updated import paths and Storybook title - No breaking changes - all package imports continue to work ### ✅ Checklist - [x] All changelogs updated with human-readable descriptions - [x] Breaking changes clearly documented - [x] Changelog validation passed (`yarn changelog:validate`) - [x] All packages built successfully - [x] Migration paths provided for breaking changes - [x] No peer dependency changes to avoid yarn.lock modifications 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>  --- > [!NOTE] > **Low Risk** > This PR only changes package versions and changelog entries; no runtime code is modified. > > **Overview** > Bumps the monorepo release to `21.0.0` and updates package versions for `@metamask/design-system-react` to `0.9.0`, `@metamask/design-system-react-native` to `0.8.0`, and `@metamask/design-system-shared` to `0.2.0`. > > Updates the React and React Native changelogs to document a **breaking** `BadgeStatus` type migration (enums → const objects + derived string unions), plus RN-only release notes for adding `RadioButton` and a `BottomSheetFooter` location refactor; also updates changelog compare links to start from the new versions. > > Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 35569fb. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).  --------- Co-authored-by: Claude <noreply@anthropic.com>

georgewrmarshall commented Feb 23, 2026

View reviewed changes

georgewrmarshall marked this pull request as ready for review February 23, 2026 22:24

georgewrmarshall requested a review from a team as a code owner February 23, 2026 22:24

georgewrmarshall commented Feb 23, 2026

View reviewed changes

georgewrmarshall enabled auto-merge (squash) February 23, 2026 22:26

Merge branch 'main' into mmds-2

eb7222d

georgewrmarshall self-assigned this Feb 23, 2026

brianacnguyen approved these changes Feb 23, 2026

View reviewed changes

georgewrmarshall merged commit 2dbed1f into main Feb 23, 2026
43 checks passed

georgewrmarshall deleted the mmds-2 branch February 23, 2026 22:30

This was referenced Feb 25, 2026

Add CI testing for React Native Storybook to prevent import errors #935

Open

Release 21.0.0 #938

Merged

georgewrmarshall mentioned this pull request Feb 25, 2026

Release 21.0.0 (corrected) #940

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor: move BottomSheetFooter out of BottomSheets folder#933

refactor: move BottomSheetFooter out of BottomSheets folder#933
georgewrmarshall merged 2 commits into
mainfrom
mmds-2

georgewrmarshall commented Feb 23, 2026 •

edited by cursor Bot

Loading

Uh oh!

github-actions Bot commented Feb 23, 2026

Uh oh!

georgewrmarshall Feb 23, 2026

Uh oh!

georgewrmarshall Feb 23, 2026

Uh oh!

georgewrmarshall Feb 23, 2026

Uh oh!

georgewrmarshall Feb 23, 2026

Uh oh!

github-actions Bot commented Feb 23, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

georgewrmarshall commented Feb 23, 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

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Feb 23, 2026

📖 Storybook Preview

Uh oh!

georgewrmarshall Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Feb 23, 2026

📖 Storybook Preview

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

georgewrmarshall commented Feb 23, 2026 •

edited by cursor Bot

Loading