fix(pure-black): align Advanced details Expandable sheet with other elevated sheets by georgewrmarshall · Pull Request #33152 · MetaMask/metamask-mobile

georgewrmarshall · 2026-07-10T22:09:45Z

Description

Aligns the confirmations Advanced details stacked sheet (Expandable → BottomModal) with other pure black elevated sheets.

In pure black dark mode, modalContent was using the wrong surface color (bg-section). This is not as severe as the bg-default banding issue elsewhere, but it made this sheet look inconsistent with other elevated bottom sheets. This PR updates expandable.styles.ts only:

backgroundColor uses getElevatedSurfaceColor() so the sheet resolves to bg-alternative in pure black dark mode (unchanged when the preview flag is off)
border.muted is applied only when pure black preview is on in dark mode, matching other elevated-surface stopgaps (SelectComponent, ModalConfirmation)

expandable.tsx is unchanged — still uses legacy BottomModal for stacking on the confirmation sheet. We plan to replace this with MMDS BottomSheet in a follow-up; this is a style-only stopgap until then.

modalContent is shared by all Expandable consumers in confirmations (Advanced details, signature Message, and account Details rows).

Changelog

CHANGELOG entry: Fixed Advanced details bottom sheet surface color in Pure Black to match other elevated sheets (style-only change).

Related issues

Refs: TMCU-622
Fixes: https://consensyssoftware.atlassian.net/browse/TMCU-1095

Manual testing steps

Feature: Advanced details sheet matches other pure black elevated sheets

  Scenario: Open Advanced details from a dapp-initiated transfer
    Given dark mode is enabled and MM_PURE_BLACK_PREVIEW=true
    And the wallet is connected to https://metamask.github.io/test-dapp
    When the user taps "Send EIP-1559 Transaction"
    And scrolls to and taps the "Advanced details" row (testID: advanced-details)
    Then a stacked bottom sheet opens titled "Advanced details"
    And the sheet surface color matches other elevated bottom sheets
    And nonce / interacting-with / data content is unchanged
    And the sheet dismisses via the close button or swipe down

Screenshots/Recordings

Before

After

Pre-merge author checklist

I've followed MetaMask Contributor Docs and 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 (internal only)

Performance checks (if applicable)

I've tested on Android
- Ideally on a mid-range device; emulator is acceptable
I've tested with a power user scenario
- Use the linked power-user SRPs to import wallets with many accounts and tokens
I've instrumented key operations with Sentry traces for production performance metrics

Slack Thread

…apply bg-alternative surface when Pure Black is enabled; remove legacy BottomModal usage Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

metamask-ci · 2026-07-10T22:10:34Z

PR template — items to address before "Ready for review"

Warnings — informational, address before merging:

PR body does not match pull-request-template.md (one or more section headings are missing). See https://github.com/MetaMask/metamask-mobile/blob/main/.github/scripts/shared/pr-template-checks.ts#L15-L23.

See docs/readme/ready-for-review.md for the full Definition of Ready for Review.

georgewrmarshall · 2026-07-10T23:26:26Z

@cursoragent revert the refactor changes and lets just chagne the styles to use background alternative if pure black is true

cursor · 2026-07-10T23:26:34Z

Done. I reverted the Expandable refactor and made a style-only fix:

Reverted Expandable to use the existing BottomModal (no component migration).
Updated expandable.styles.ts to use the elevated surface color, which resolves to bg-alternative when Pure Black is enabled.
Pushed commit and updated the PR body to reflect “style-only” change.

This keeps behavior unchanged and fixes the Pure Black background for the Advanced details sheet.

…lementation Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

Gate border.muted on the Expandable BottomModal surface when pure black preview is enabled in dark mode, matching other elevated surface stopgaps. Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions · 2026-07-13T22:08:43Z

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.

github-actions · 2026-07-13T22:10:15Z

🔍 Smart E2E Test Selection

Selected E2E tags: None (no tests recommended)
Selected Performance tags: None (no tests recommended)
Risk Level: low
AI Confidence: 92%

click to see 🤖 AI reasoning details

E2E Test Selection:
The only changed file is app/components/Views/confirmations/components/UI/expandable/expandable.styles.ts. The diff shows purely visual/styling changes:

The backgroundColor of modalContent is updated from theme.colors.background.section to getElevatedSurfaceColor(theme) - a visual-only change
A borderWidth and borderColor are added conditionally for pure black dark mode - also visual-only

These changes only affect the appearance of the expandable component in confirmations when using the pure black dark theme. There are no functional logic changes, no user flow changes, no API changes, and no behavioral changes. This falls under cosmetic/visual styling changes that do not warrant E2E test execution.

Per the COSMETIC CHANGES guidance: changes that only affect visual styling (colors, borders, backgrounds) have zero functional impact and must NOT trigger additional test selection on their own.

Performance Test Selection:
The change is purely a visual styling update to the expandable component's stylesheet in confirmations. It adjusts background color and adds a border for pure black dark mode. There is no performance-sensitive code changed - no rendering logic, no data fetching, no state management, no component lifecycle changes. No performance tests are warranted.

View GitHub Actions results

sonarqubecloud · 2026-07-13T22:29:06Z

Quality Gate passed

Issues
1 New issue
0 Accepted issues

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

See analysis details on SonarQube Cloud

georgewrmarshall · 2026-07-14T04:45:35Z

+    // Drop getElevatedSurfaceColor, isPureBlackEnabled, and AppThemeKey checks.
    modalContent: {
-      backgroundColor: theme.colors.background.section,
+      backgroundColor: getElevatedSurfaceColor(theme),


Replaces bg-section on modalContent with getElevatedSurfaceColor so the stacked Advanced details BottomModal reads as an elevated surface on the pure black confirmation backdrop. When MM_PURE_BLACK_PREVIEW is off this still resolves to bg-default, so existing dark and light users should see no surface change.

georgewrmarshall · 2026-07-14T04:45:39Z

  const { isCompact } = vars;
+  const { colors } = theme;
+  const isPureBlackDark =
+    isPureBlackEnabled && theme.themeAppearance === AppThemeKey.dark;


isPureBlackDark follows the same gated border pattern as SelectComponent and ModalConfirmation: border.muted only when MM_PURE_BLACK_PREVIEW is on in dark mode. That keeps legacy sheet chrome unchanged outside the preview rollout.

georgewrmarshall · 2026-07-14T04:45:39Z

    },
+    // TODO(Pure Black): Remove once MMDS ships pure-black-aware surface tokens.
+    // Drop getElevatedSurfaceColor, isPureBlackEnabled, and AppThemeKey checks.
    modalContent: {


modalContent is shared by every Expandable consumer in confirmations (Advanced details, signature Message, and account Details rows), so this style-only change fixes pure black colors on all stacked BottomModal sheets from this component, not just the Advanced details entry point.

georgewrmarshall · 2026-07-14T04:45:40Z

    modalContent: {
-      backgroundColor: theme.colors.background.section,
+      backgroundColor: getElevatedSurfaceColor(theme),
+      borderWidth: isPureBlackDark ? 1 : 0,


Net diff vs main is styles only; expandable.tsx still uses legacy BottomModal for stacking on the confirmation sheet. MMDS BottomSheet migration is deferred per confirmations team direction and issue 12656.

fix(pure-black): Use MMDS BottomSheet in confirmations Expandable to …

69e5376

…apply bg-alternative surface when Pure Black is enabled; remove legacy BottomModal usage Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

metamask-ci Bot added team-design-system All issues relating to design system in Mobile INVALID-PR-TEMPLATE PR's body doesn't match template labels Jul 10, 2026

cursor Bot changed the title ~~Pure Black: switch confirmations Expandable to MMDS BottomSheet (uses bg-alternative)~~ fix(pure-black): switch confirmations Expandable to MMDS BottomSheet (uses bg-alternative) Jul 10, 2026

github-actions Bot added the size-S label Jul 10, 2026

revert(confirmations): roll back Expandable to legacy BottomModal imp…

f35ba6b

…lementation Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

github-actions Bot added size-XS and removed size-S labels Jul 10, 2026

fix(TMCU-1059): add pure-black muted border to Advanced details sheet

5e13d38

Gate border.muted on the Expandable BottomModal surface when pure black preview is enabled in dark mode, matching other elevated surface stopgaps. Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions Bot added size-S and removed size-XS labels Jul 13, 2026

georgewrmarshall commented Jul 14, 2026

View reviewed changes

georgewrmarshall changed the title ~~fix(pure-black): switch confirmations Expandable to MMDS BottomSheet (uses bg-alternative)~~ fix(pure-black): elevate Advanced details Expandable sheet surface Jul 14, 2026

georgewrmarshall self-assigned this Jul 14, 2026

georgewrmarshall changed the title ~~fix(pure-black): elevate Advanced details Expandable sheet surface~~ fix(pure-black): align Advanced details Expandable sheet with other elevated sheets Jul 14, 2026

georgewrmarshall marked this pull request as ready for review July 14, 2026 04:49

georgewrmarshall requested a review from a team as a code owner July 14, 2026 04:49

github-actions Bot added the risk:low AI analysis: low risk label Jul 14, 2026

georgewrmarshall enabled auto-merge July 14, 2026 05:02

OGPoyraz approved these changes Jul 14, 2026

View reviewed changes

georgewrmarshall added this pull request to the merge queue Jul 14, 2026

Merged via the queue into main with commit 025842a Jul 14, 2026
228 checks passed

georgewrmarshall deleted the cursor/advanced-details-bottomsheet-7f9d branch July 14, 2026 11:41

github-actions Bot locked and limited conversation to collaborators Jul 14, 2026

metamask-ci Bot added the release-8.4.0 Issue or pull request that will be included in release 8.4.0 label Jul 14, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(pure-black): align Advanced details Expandable sheet with other elevated sheets#33152

fix(pure-black): align Advanced details Expandable sheet with other elevated sheets#33152
georgewrmarshall merged 3 commits into
mainfrom
cursor/advanced-details-bottomsheet-7f9d

georgewrmarshall commented Jul 10, 2026 •

edited

Loading

Uh oh!

metamask-ci Bot commented Jul 10, 2026

Uh oh!

georgewrmarshall commented Jul 10, 2026

Uh oh!

cursor Bot commented Jul 10, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 13, 2026

Uh oh!

github-actions Bot commented Jul 13, 2026

Uh oh!

sonarqubecloud Bot commented Jul 13, 2026

Uh oh!

georgewrmarshall Jul 14, 2026

Uh oh!

georgewrmarshall Jul 14, 2026

Uh oh!

georgewrmarshall Jul 14, 2026 •

edited

Loading

Uh oh!

georgewrmarshall Jul 14, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Uh oh!

Conversation

georgewrmarshall commented Jul 10, 2026 • edited 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

Performance checks (if applicable)

Uh oh!

metamask-ci Bot commented Jul 10, 2026

PR template — items to address before "Ready for review"

Uh oh!

georgewrmarshall commented Jul 10, 2026

Uh oh!

cursor Bot commented Jul 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 13, 2026

Uh oh!

github-actions Bot commented Jul 13, 2026

🔍 Smart E2E Test Selection

Uh oh!

sonarqubecloud Bot commented Jul 13, 2026

Quality Gate passed

Uh oh!

georgewrmarshall Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jul 14, 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 Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

georgewrmarshall commented Jul 10, 2026 •

edited

Loading

cursor Bot commented Jul 10, 2026 •

edited

Loading

georgewrmarshall Jul 14, 2026 •

edited

Loading