chore: remove Text component wrappers from BottomSheetHeader children #22173

georgewrmarshall · 2025-11-05T01:03:01Z

Description

Removed Text component wrappers from BottomSheetHeader children across the codebase to ensure consistency with the new API pattern where BottomSheetHeader handles text styling internally.

This refactoring removes redundant Text components that were wrapping string content inside BottomSheetHeader. The BottomSheetHeader component now handles the text styling directly, ensuring a consistent appearance across all bottom sheet headers in the app.

Changelog

CHANGELOG entry: null

Related issues

Part of: https://consensyssoftware.atlassian.net/browse/MDP-343

Manual testing steps

Feature: Bottom Sheet Headers Display Correctly

  Scenario: user views various bottom sheets with headers
    Given the app is running
    
    When user opens any bottom sheet modal with a header (e.g., network selector, payment method selector, region selector, account permissions, etc.)
    Then the header text should display correctly with proper styling
    And the header should be visually consistent with other bottom sheet headers

Screenshots/Recordings

Before

N/A - Internal refactoring, no visual changes. We can trust the component to handle styling correctly.

After

N/A - Internal refactoring, no visual changes. We can trust the component to handle styling correctly.

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
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.

Changes Summary

11 component files updated:

NetworkSettings/index.js (4 instances)
NetworkListBottomSheet.tsx
TooltipModal/index.tsx
AccountPermissionsConfirmRevokeAll.tsx
NetworkSelector/NetworkSelector.tsx
RpcSelectionModal/RpcSelectionModal.tsx
NetworkManager/index.tsx
PermittedNetworksInfoSheet.tsx
ConnectionDetails/ConnectionDetails.tsx
RegionSelectorModal/RegionSelectorModal.tsx
PaymentMethodSelectorModal.tsx

5 test snapshots updated:

RegionSelectorModal (8 snapshots)
PaymentMethodSelectorModal (1 snapshot)
AccountPermissionsConfirmRevokeAll (1 snapshot)
ConnectionDetails (1 snapshot)
PermittedNetworksInfoSheet (1 snapshot)

Total: 16 files changed, 54 insertions(+), 60 deletions(-)

Note

Refactors BottomSheetHeader to take raw string children across modals/selectors and updates tests/snapshots and small header style expectations.

UI/BottomSheetHeader refactor:
- Replace <Text> wrappers with raw string children in BottomSheetHeader across:
  - Bridge: BlockaidModal, BridgeNetworkSelectorBase, BridgeTokenSelectorBase, QuoteExpiredModal, SlippageModal, TransactionDetails/BlockExplorersModal.
  - Ramp (Deposit): PaymentMethodSelectorModal, RegionSelectorModal.
  - Account Permissions: AccountPermissionsConfirmRevokeAll, ConnectionDetails, PermittedNetworksInfoSheet.
  - Networks: NetworkManager, AddAsset/NetworkListBottomSheet, NetworkSelector.
  - Misc: TooltipModal.
Tests/Snapshots:
- Update snapshots to new header structure: add testID="header-title", center text, and expect fontSize 16.
- Adjust NetworkManager tests to assert testID="header" instead of mocked header ID; extend icon mocks.
Styles:
- Remove unused heading style in NetworkSettings styles; align header typography via BottomSheetHeader.

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

github-actions · 2025-11-05T01:03:11Z

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

cursor · 2025-11-05T01:04:34Z

app/components/Views/NetworkSelector/RpcSelectionModal/RpcSelectionModal.tsx

-        <Text variant={TextVariant.HeadingMD}>
-          {strings('app_settings.select_rpc_url')}{' '}
-        </Text>
+        {strings('app_settings.select_rpc_url')}{' '}


Bug: Broken styling for mixed header children in BottomSheet

The BottomSheetHeader now receives mixed children (a string, a space string, and a Cell component). The HeaderBase component only applies text styling when typeof children === 'string', which will be false for this array of mixed children. This means the string portion will render without proper styling. The previous Text wrapper ensured proper styling for all content. This should either keep the Text wrapper for the string portion or restructure the children to be a single string passed to BottomSheetHeader with the Cell component moved outside.

Copilot

Pull Request Overview

This PR refactors the BottomSheetHeader component usage throughout the codebase by removing redundant text wrapping. The BottomSheetHeader component already handles text rendering internally via HeaderBase, which automatically applies the appropriate text variant based on the header variant (Compact or Display).

Key Changes:

Removed explicit <Text variant={TextVariant.HeadingMD}> wrappers from BottomSheetHeader children across multiple components
Removed unused Text and TextVariant imports where they are no longer needed
Updated test snapshots to reflect the new text styling (HeadingSM for Compact variant instead of HeadingMD)

Reviewed Changes

Copilot reviewed 29 out of 29 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
app/components/Views/TooltipModal/index.tsx	Simplified BottomSheetHeader by removing Text wrapper
app/components/Views/Settings/NetworksSettings/NetworkSettings/index.js	Removed Text wrappers from four BottomSheetHeader instances
app/components/Views/NetworkSelector/RpcSelectionModal/RpcSelectionModal.tsx	Removed Text wrapper and updated snapshot
app/components/Views/NetworkSelector/NetworkSelector.tsx	Removed Text wrapper from delete confirmation modal
app/components/Views/AddAsset/components/NetworkListBottomSheet.tsx	Removed Text wrapper and unused imports
app/components/Views/AccountPermissions/PermittedNetworksInfoSheet/PermittedNetworksInfoSheet.tsx	Removed Text wrapper and updated snapshot
app/components/Views/AccountPermissions/ConnectionDetails/ConnectionDetails.tsx	Removed Text wrapper and updated snapshot
app/components/Views/AccountPermissions/AccountPermissionsConfirmRevokeAll/AccountPermissionsConfirmRevokeAll.tsx	Removed Text wrapper and updated snapshot
app/components/UI/Ramp/Deposit/Views/Modals/RegionSelectorModal/RegionSelectorModal.tsx	Removed Text wrapper and updated snapshot
app/components/UI/Ramp/Deposit/Views/Modals/PaymentMethodSelectorModal/PaymentMethodSelectorModal.tsx	Removed Text wrapper and updated snapshot
app/components/UI/NetworkManager/index.tsx	Removed Text wrapper from delete confirmation modal
app/components/UI/Bridge/components/TransactionDetails/BlockExplorersModal.tsx	Removed Text wrapper
app/components/UI/Bridge/components/SlippageModal/index.tsx	Removed Text wrapper and TextVariant import, updated snapshot
app/components/UI/Bridge/components/QuoteExpiredModal/QuoteExpiredModal.tsx	Removed Text wrapper and updated snapshot
app/components/UI/Bridge/components/BridgeTokenSelectorBase.tsx	Removed Text wrapper and TextVariant import
app/components/UI/Bridge/components/BridgeNetworkSelectorBase.tsx	Removed Text wrapper, unused imports, and styles
app/components/UI/Bridge/components/BlockaidModal/BlockaidModal.tsx	Removed Text wrapper

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

georgewrmarshall · 2025-11-07T00:53:52Z

app/components/Views/NetworkSelector/NetworkSelector.tsx

+              {strings('app_settings.delete')}{' '}
+              {showConfirmDeleteModal.networkName}{' '}
+              {strings('asset_details.network')}


Fix mixed children so it's a single string

georgewrmarshall · 2025-11-07T01:14:11Z

app/components/UI/NetworkManager/index.test.tsx

-jest.mock(
-  '../../../component-library/components/BottomSheets/BottomSheetHeader/BottomSheetHeader',
-  () => {
-    const { View: RNView } = jest.requireActual('react-native');
-    return ({ children }: { children: React.ReactNode }) => (
-      <RNView testID="bottom-sheet-header">{children}</RNView>
-    );
-  },
-);
-


Not sure why we are mocking this. This test file has a lot of unneeded mock anti patterns

georgewrmarshall · 2025-11-07T01:18:15Z

app/components/UI/NetworkManager/index.test.tsx

      expect(mockOnCloseBottomSheet).toHaveBeenCalled();
      await waitFor(() => {
-        expect(getByTestId('bottom-sheet-header')).toBeOnTheScreen();
+        expect(getByTestId('header')).toBeOnTheScreen();


Using the root test id header from the HeaderBase component. The BottomSheetHeader wasn't build to accept unique data test ids which is a problem

sonarqubecloud · 2025-11-12T02:23:38Z

Quality Gate passed

Issues
4 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

cursor · 2025-11-12T04:20:41Z

app/components/Views/NetworkSelector/NetworkSelector.tsx

-              </Text>
+              {strings('app_settings.delete')}{' '}
+              {showConfirmDeleteModal.networkName}{' '}
+              {strings('asset_details.network')}


Bug: Mixed Content Disrupts Header Text Styling

The BottomSheetHeader children contain mixed JSX expressions with string literals instead of a single string. This causes HeaderBase to skip its internal text wrapping logic (which checks typeof children === 'string'), potentially breaking text styling. The fix should use a template literal like in NetworkManager/index.tsx: {`${strings('app_settings.delete')} ${showConfirmDeleteModal.networkName} ${strings('asset_details.network')}`}

wachunei

Ramp changes LGTM

georgewrmarshall requested review from a team as code owners November 5, 2025 01:03

metamaskbot added the team-design-system All issues relating to design system in Mobile label Nov 5, 2025

github-actions bot added the size-M label Nov 5, 2025

cursor bot reviewed Nov 5, 2025

View reviewed changes

georgewrmarshall added the no-changelog no-changelog Indicates no external facing user changes, therefore no changelog documentation needed label Nov 5, 2025

georgewrmarshall self-assigned this Nov 5, 2025

georgewrmarshall enabled auto-merge November 5, 2025 01:11

georgewrmarshall force-pushed the bottom-sheet-headers branch from e19ecd6 to 2c87ef1 Compare November 5, 2025 04:37

georgewrmarshall added the No QA Needed Apply this label when your PR does not need any QA effort. label Nov 5, 2025

georgewrmarshall requested a review from Copilot November 5, 2025 04:39

georgewrmarshall marked this pull request as draft November 5, 2025 04:39

auto-merge was automatically disabled November 5, 2025 04:39
Pull request was converted to draft

Copilot AI reviewed Nov 5, 2025

View reviewed changes

georgewrmarshall commented Nov 7, 2025

View reviewed changes

georgewrmarshall force-pushed the bottom-sheet-headers branch from 2c87ef1 to 343fa4f Compare November 7, 2025 01:13

georgewrmarshall commented Nov 7, 2025

View reviewed changes

georgewrmarshall added 4 commits November 11, 2025 18:01

chore: removing text component in favor of bottom sheet header wrapper

57e9d55

chore: updating snapshots

e54ab38

chore: fixing tests and reverting text component in non text only header

98f489f

chore: updating snapshot

ddcd7e7

georgewrmarshall force-pushed the bottom-sheet-headers branch from 8b891b5 to ddcd7e7 Compare November 12, 2025 02:01

georgewrmarshall added size-M and removed No QA Needed Apply this label when your PR does not need any QA effort. size-M labels Nov 12, 2025

georgewrmarshall marked this pull request as ready for review November 12, 2025 04:15

cursor bot reviewed Nov 12, 2025

View reviewed changes

GeorgeGkas approved these changes Nov 12, 2025

View reviewed changes

Prithpal-Sooriya approved these changes Nov 12, 2025

View reviewed changes

wachunei approved these changes Nov 12, 2025

View reviewed changes

PatrykLucka approved these changes Nov 12, 2025

View reviewed changes

georgewrmarshall added this pull request to the merge queue Nov 12, 2025

Merged via the queue into main with commit 4b978aa Nov 12, 2025
99 checks passed

georgewrmarshall deleted the bottom-sheet-headers branch November 12, 2025 17:18

github-actions bot locked and limited conversation to collaborators Nov 12, 2025

metamaskbot added the release-7.60.0 Issue or pull request that will be included in release 7.60.0 label Nov 12, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

chore: remove Text component wrappers from BottomSheetHeader children #22173

chore: remove Text component wrappers from BottomSheetHeader children #22173

georgewrmarshall commented Nov 5, 2025 •

edited by cursor bot

Loading

Uh oh!

github-actions bot commented Nov 5, 2025

Uh oh!

cursor bot Nov 5, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

georgewrmarshall Nov 7, 2025

Uh oh!

georgewrmarshall Nov 7, 2025

Uh oh!

georgewrmarshall Nov 7, 2025

Uh oh!

sonarqubecloud bot commented Nov 12, 2025

Uh oh!

cursor bot Nov 12, 2025

Uh oh!

wachunei left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Uh oh!

chore: remove Text component wrappers from BottomSheetHeader children #22173

chore: remove Text component wrappers from BottomSheetHeader children #22173

Conversation

georgewrmarshall commented Nov 5, 2025 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Changes Summary

Uh oh!

github-actions bot commented Nov 5, 2025

Uh oh!

cursor bot Nov 5, 2025

Choose a reason for hiding this comment

Bug: Broken styling for mixed header children in BottomSheet

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

georgewrmarshall Nov 7, 2025

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Nov 7, 2025

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Nov 7, 2025

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud bot commented Nov 12, 2025

Quality Gate passed

Uh oh!

cursor bot Nov 12, 2025

Choose a reason for hiding this comment

Bug: Mixed Content Disrupts Header Text Styling

Uh oh!

wachunei left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

georgewrmarshall commented Nov 5, 2025 •

edited by cursor bot

Loading