feat: Atomic Components for Card refactor by adrienzheng-cb · Pull Request #235 · coinbase/cds

adrienzheng-cb · 2025-12-11T20:48:51Z

What changed? Why?

Root cause (required for bugfixes)

UI changes

iOS Old	iOS New
old screenshot	new screenshot

Android Old	Android New
old screenshot	new screenshot

Web Old	Web New
old screenshot	new screenshot

Testing

How has it been tested?

Testing instructions

Illustrations/Icons Checklist

Required if this PR changes files under packages/illustrations/** or packages/icons/**

verified visreg changes with Terran (include link to visreg run/approval)
all illustration/icons names have been reviewed by Dom and/or Terran

Change management

type=routine
risk=low
impact=sev5

automerge=false

cb-heimdall · 2025-12-11T20:48:56Z

🟡 Heimdall Review Status

Requirement Status More Info

Reviews

🟡 0/1

Denominator calculation

Show calculation

1 if user is bot 0

1 if user is external 0

2 if repo is sensitive 0

From .codeflow.yml 1

Additional review requirements

Show calculation

Max	0

0

From CODEOWNERS 1

Global minimum 0

Max 1

1

1 if commit is unverified 0

Sum 1

CODEOWNERS 🟡 See below

🟡 `CODEOWNERS`

Code Owner Status Calculation

ui-systems-eng-team

🟡 0/1

Denominator calculation

Additional CODEOWNERS Requirement

Show calculation

Sum	0

0

From CODEOWNERS 1

Sum 1

adrienzheng-cb · 2025-12-11T20:49:40Z

packages/mobile/src/cards/CardRoot.tsx

+
+export type CardRootProps = CardRootBaseProps & PressableProps;
+
+export const CardRoot = memo(


Component that handles the interactive layer of card

@adrienzheng-cb do you mind adding some js docs to this (and other component s where helpful) to add context around usage?

Additionally, are we expecting customers to ever use this directly or is it for internal use to share behavior between Card components?

At the moment, I'm planning to just keep it internal along with all of the CardLayout component, only MediaCard, DataCard, MessagingCard, and ContentCard will be exposed. I do see benefit of exposing it if we encourage consumers to assemble their own card tho.

@adrienzheng-cb got it! In that case let's not export it from the barrel file nor add an exports entry for those modules in the package.json to make it harder for customers to use

packages/mobile/src/cards/CardRoot.tsx

cb-ekuersch

Few questions I want to get to the bottom of here, but in general the direction looks good!

cb-ekuersch · 2026-01-26T16:46:12Z

packages/mobile/src/cards/CardMedia.tsx


 import { Pictogram, SpotSquare } from '../illustrations';
-
-import { CardRemoteImage } from './CardRemoteImage';


cb-ekuersch · 2026-01-26T17:10:27Z

packages/mobile/src/cards/CardMedia.tsx

+        <RemoteImage
          alt={props.alt ?? ''}
+          resizeMode="cover"
+          source={getSource(props.src)}


nit: curious about the addition of these properties

Because this properties used to be set inside CardRemoteImage which got removed.
resizeMode ensures that the Image always stretch proportionally covers its container entirely no matter what aspect ratio the container is in.

cb-ekuersch · 2026-01-26T17:11:23Z

packages/mobile/src/cards/CardRoot.tsx

+
+export type CardRootProps = CardRootBaseProps & PressableProps;
+
+export const CardRoot = memo(


@adrienzheng-cb do you mind adding some js docs to this (and other component s where helpful) to add context around usage?

Additionally, are we expecting customers to ever use this directly or is it for internal use to share behavior between Card components?

cb-ekuersch · 2026-01-26T17:12:05Z

packages/web/src/cards/CardRoot.tsx

+  {
+    children?: React.ReactNode;
+    /** If true, the CardRoot will be rendered as a Pressable component. */
+    renderAsPressable?: boolean;


nit: should we just make this implicit with a onPress prop as the previous cards did?

I know we discussed this like a month ago, i just need a little help remembering the context around the decision

because the list of props that indicate is interactivity is indefinite, we just want to leave the choice to customer instead of having implicit logic here and there and make assumptions.

cb-ekuersch · 2026-01-26T17:12:30Z

packages/web/src/cards/CardRoot.tsx

+      if (renderAsPressable) {
+        const { as, ...pressableRestProps } = props;
+        return (
+          <Pressable ref={ref} as={as ?? 'button'} {...(pressableRestProps as any)}>


nit: is the default as necessary? Pretty sure button is the default for pressable

should we render the pressable if they pass button as the value for as? onClick will be valid prop at that point

nice suggestion. I updated logic to the following in followup pr

if as is button or a, then renderAsPressable is true by default, otherwise false.

removed the default as, because Pressable by default renders a button.

cb-ekuersch · 2026-01-26T17:12:43Z

packages/web/src/cards/CardRoot.tsx

+      } else {
+        const { as, ...hstackRestProps } = props;
+        return (
+          <HStack ref={ref} as={as ?? 'article'} {...(hstackRestProps as any)}>


nit: why article?

this has been removed in follow-up. originally using article because semanticaly non-interactive card with a lot of text content should be rendered as an article. Since MediaCard, DataCard, and MessagingCard are intended to be more interactive than static, this is no longer necessary.

adrienzheng-cb temporarily deployed to production December 11, 2025 20:48 — with GitHub Actions Inactive

github-actions bot added packages:web packages:mobile apps:mobile-app packages:ui-mobile-playground packages:ui-mobile-visreg labels Dec 11, 2025

adrienzheng-cb commented Dec 11, 2025

View reviewed changes

packages/mobile/src/cards/CardRoot.tsx Outdated Show resolved Hide resolved

adrienzheng-cb force-pushed the adrien/card-refactor-base branch from 4c49779 to ec9c499 Compare December 12, 2025 19:27

adrienzheng-cb temporarily deployed to production December 12, 2025 19:27 — with GitHub Actions Inactive

adrienzheng-cb force-pushed the adrien/card-refactor-base branch 2 times, most recently from a6cb94a to be85bd4 Compare December 15, 2025 19:30

adrienzheng-cb temporarily deployed to production December 15, 2025 19:31 — with GitHub Actions Inactive

adrienzheng-cb force-pushed the adrien/card-refactor-base branch from be85bd4 to 7134a9f Compare December 19, 2025 18:26

adrienzheng-cb had a problem deploying to production December 19, 2025 18:26 — with GitHub Actions Error

adrienzheng-cb force-pushed the adrien/card-refactor-base branch from 7134a9f to 830443f Compare December 19, 2025 18:35

adrienzheng-cb had a problem deploying to production December 19, 2025 18:35 — with GitHub Actions Error

adrienzheng-cb force-pushed the adrien/card-refactor-base branch from 830443f to e3d6651 Compare December 19, 2025 18:44

adrienzheng-cb had a problem deploying to production December 19, 2025 18:44 — with GitHub Actions Error

adrienzheng-cb force-pushed the adrien/card-refactor-base branch from e3d6651 to 67a0cf5 Compare December 19, 2025 18:50

adrienzheng-cb had a problem deploying to production December 19, 2025 18:50 — with GitHub Actions Error

adrienzheng-cb force-pushed the adrien/card-refactor-base branch from 67a0cf5 to 634007d Compare December 19, 2025 18:59

adrienzheng-cb temporarily deployed to production December 19, 2025 18:59 — with GitHub Actions Inactive

feat: CardRoot

d4869f5

adrienzheng-cb force-pushed the adrien/card-refactor-base branch from 634007d to d4869f5 Compare January 19, 2026 17:46

adrienzheng-cb temporarily deployed to production January 19, 2026 17:46 — with GitHub Actions Inactive

adrienzheng-cb requested review from cb-ekuersch, hcopp and maximo-macchi-cb January 22, 2026 14:25

cb-ekuersch reviewed Jan 26, 2026

View reviewed changes


		export type CardRootProps = CardRootBaseProps & PressableProps;

		export const CardRoot = memo(


		import { Pictogram, SpotSquare } from '../illustrations';

		import { CardRemoteImage } from './CardRemoteImage';

Conversation

adrienzheng-cb commented Dec 11, 2025

What changed? Why?

Root cause (required for bugfixes)

UI changes

Testing

How has it been tested?

Testing instructions

Illustrations/Icons Checklist

Change management

Uh oh!

cb-heimdall commented Dec 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟡 Heimdall Review Status

🟡 CODEOWNERS

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cb-ekuersch left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

cb-heimdall commented Dec 11, 2025 •

edited

Loading

🟡 `CODEOWNERS`