fix(design-system): remove useElevatedSurface shim from ActionListItem

[georgewrmarshall]

Description

MMDS surface tokens now handle pure-black press/surface styling internally. This PR removes the redundant useElevatedSurface() shim from the temp ActionListItem component. The row background is now transparent by default so the parent container (e.g. BottomSheet) owns the surface color. Press feedback uses bg-pressed, matching the MMDS ActionListItem implementation.

Files updated:

• app/component-library/components-temp/ActionListItem/ActionListItem.tsx
• app/component-library/components-temp/ActionListItem/README.md

Changelog

CHANGELOG entry: null

Related issues

Fixes: TMCU-1047

Refs: TMCU-622 (Pure Black epic)

Manual testing steps

Feature: ActionListItem pure-black surface

  Scenario: ActionListItem rows render with correct surface in sheets
    Given Pure Black preview is enabled (MM_PURE_BLACK_PREVIEW=true) and the app is in Dark mode

    When the user opens a bottom sheet that uses ActionListItem (e.g. Money, confirmations, Trade wallet actions)
    Then each ActionListItem row has a transparent background that inherits the parent sheet surface
    And pressing a row shows bg-pressed feedback without gray/elevated banding

  Scenario: ActionListItem rows render without regression in standard dark mode
    Given the app is in Dark mode with MM_PURE_BLACK_PREVIEW unset or false

    When the user opens a bottom sheet that uses ActionListItem
    Then ActionListItem rows render without visual regression

N/A for automated cloud-agent environment — visual QA on device/simulator recommended.

Screenshots/Recordings

N/A — styling change relies on parent surface and MMDS press tokens; no visual regression expected.

Before

N/A

After

N/A

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 (N/A — removal-only change, no new APIs)
• I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Performance checks (if applicable)

• I've tested on Android
  • Ideally on a mid-range device; emulator is acceptable (N/A — styling-only change; iOS simulator visual QA sufficient)
• I've tested with a power user scenario
  • Use these power-user SRPs to import wallets with many accounts and tokens (N/A — no performance-sensitive paths touched)
• I've instrumented key operations with Sentry traces for production performance metrics
  • See trace() for usage and addToken for an example (N/A — no new traced operations)

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.

  

[georgewrmarshall]

@cursoragent there should be no background color on an ActionListItem it's background color should be copletely handled by the parent container. Remove bg-default here

[cursor]

Addressed the review feedback. ActionListItem no longer paints its own default background — the parent container owns the surface.

Change

  const getStyle = useCallback(
    ({ pressed }: { pressed: boolean }) =>
      tw.style(
        'px-4 py-3',
        pressed && !isDisabled && 'bg-pressed',
        isDisabled && 'opacity-50',
      ),
    [tw, isDisabled],
  );

• Removed bg-default so rows are transparent and inherit the parent surface (e.g. BottomSheet with useElevatedSurface())
• Switched pressed state from bg-default-pressed to bg-pressed to match the MMDS ActionListItem implementation
• Updated the README design spec accordingly

All 23 unit tests pass. Pushed to PR #33163.

  

[github-actions]

🔍 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 PR contains only 2 changed files:

1. ActionListItem.tsx: A purely visual/styling change that:

   • Removes the useElevatedSurface hook (which provided a background color class)
   • Changes the background to transparent (parent owns surface)
   • Changes pressed state from bg-default-pressed to bg-pressed
   • Removes surfaceClass from the useCallback dependency array

   This is a UI styling adjustment with no functional impact on user flows, navigation, transactions, or any business logic.

2. README.md: Documentation update reflecting the new background behavior - purely cosmetic.

While ActionListItem is used in WalletActions, FundActionMenu, MoreTokenActionsMenu, and MultichainAddWalletActions, the change only affects the visual appearance (background color and pressed state color) of the component. No functional behavior, event handlers, navigation, or data flows are modified.

No E2E tests are warranted for this purely visual styling change. The risk is low and limited to visual regression, which is not covered by E2E smoke tests.

Performance Test Selection:
The changes are purely visual/styling adjustments to the ActionListItem component (background color and pressed state). There is no impact on rendering performance, data fetching, or any performance-sensitive flows. No performance tests are needed.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud