From 2553b3b3f9ca3afd8eedc458e985f07e14851638 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Fri, 10 Jul 2026 23:36:02 +0000 Subject: [PATCH 1/2] fix(design-system): remove useElevatedSurface shim from ActionListItem MMDS surface tokens now handle pure-black press/surface styling internally. Replace the app-level useElevatedSurface() shim with bg-default and bg-default-pressed per the component design spec. Fixes TMCU-1047 Co-authored-by: George Marshall --- .../components-temp/ActionListItem/ActionListItem.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/app/component-library/components-temp/ActionListItem/ActionListItem.tsx b/app/component-library/components-temp/ActionListItem/ActionListItem.tsx index 04832bf07f39..40cfd75a19d6 100644 --- a/app/component-library/components-temp/ActionListItem/ActionListItem.tsx +++ b/app/component-library/components-temp/ActionListItem/ActionListItem.tsx @@ -18,7 +18,6 @@ import { import { useTailwind } from '@metamask/design-system-twrnc-preset'; // Internal dependencies -import { useElevatedSurface } from '../../../util/theme/themeUtils'; import { ActionListItemProps } from './ActionListItem.types'; /** @@ -39,7 +38,6 @@ const ActionListItem: React.FC = ({ ...pressableProps }) => { const tw = useTailwind(); - const surfaceClass = useElevatedSurface(); // Render label based on type const renderLabel = () => { @@ -100,11 +98,11 @@ const ActionListItem: React.FC = ({ const getStyle = useCallback( ({ pressed }: { pressed: boolean }) => tw.style( - `${surfaceClass} px-4 py-3`, + 'bg-default px-4 py-3', pressed && !isDisabled && 'bg-default-pressed', isDisabled && 'opacity-50', ), - [tw, isDisabled, surfaceClass], + [tw, isDisabled], ); return ( From 392617d261032c54dca7200000c8d61de7813d0c Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Fri, 10 Jul 2026 23:54:57 +0000 Subject: [PATCH 2/2] fix(design-system): make ActionListItem background transparent Parent containers (e.g. BottomSheet) own the surface color. Remove bg-default from ActionListItem and use bg-pressed for press feedback, matching the MMDS ActionListItem implementation. Co-authored-by: George Marshall --- .../components-temp/ActionListItem/ActionListItem.tsx | 4 ++-- .../components-temp/ActionListItem/README.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/component-library/components-temp/ActionListItem/ActionListItem.tsx b/app/component-library/components-temp/ActionListItem/ActionListItem.tsx index 40cfd75a19d6..c6ab914dcb55 100644 --- a/app/component-library/components-temp/ActionListItem/ActionListItem.tsx +++ b/app/component-library/components-temp/ActionListItem/ActionListItem.tsx @@ -98,8 +98,8 @@ const ActionListItem: React.FC = ({ const getStyle = useCallback( ({ pressed }: { pressed: boolean }) => tw.style( - 'bg-default px-4 py-3', - pressed && !isDisabled && 'bg-default-pressed', + 'px-4 py-3', + pressed && !isDisabled && 'bg-pressed', isDisabled && 'opacity-50', ), [tw, isDisabled], diff --git a/app/component-library/components-temp/ActionListItem/README.md b/app/component-library/components-temp/ActionListItem/README.md index edca439e1e9a..ea40bfb1e003 100644 --- a/app/component-library/components-temp/ActionListItem/README.md +++ b/app/component-library/components-temp/ActionListItem/README.md @@ -87,7 +87,7 @@ import { IconName } from '../../components/Icons/Icon'; ## Design Specifications -- **Background**: `bg-default` on default state, `bg-default-pressed` when pressed +- **Background**: transparent by default (parent owns surface); `bg-pressed` when pressed - **Padding**: 12px vertical, 16px horizontal - **Gap**: 16px between start content and end accessory - **Label**: Uses `TextVariant.BodyMD` with `TextColor.Default` for strings