Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
georgewrmarshall wants to merge 2 commits into
base: main
Choose a base branch
from
+4 −6
Draft

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

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2553b3b
fix(design-system): remove useElevatedSurface shim from ActionListItem
cursoragent Jul 10, 2026
392617d
fix(design-system): make ActionListItem background transparent
cursoragent Jul 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions app/component-library/components-temp/ActionListItem/ActionListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

/**
Expand All @@ -39,7 +38,6 @@ const ActionListItem: React.FC<ActionListItemProps> = ({
...pressableProps
}) => {
const tw = useTailwind();
const surfaceClass = useElevatedSurface();

// Render label based on type
const renderLabel = () => {
Expand Down Expand Up @@ -100,11 +98,11 @@ const ActionListItem: React.FC<ActionListItemProps> = ({
const getStyle = useCallback(
({ pressed }: { pressed: boolean }) =>
tw.style(
`${surfaceClass} px-4 py-3`,
'bg-default px-4 py-3',

@georgewrmarshall georgewrmarshall Jul 10, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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 cursor Bot Jul 10, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Open in Web Open in Cursor 

pressed && !isDisabled && 'bg-default-pressed',
isDisabled && 'opacity-50',
),
[tw, isDisabled, surfaceClass],
[tw, isDisabled],
);

return (
Expand Down
Loading