Skip to content

feat: Atomic Components for Card refactor #235

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

Jump to bottom
Draft
adrienzheng-cb wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

feat: Atomic Components for Card refactor #235

adrienzheng-cb wants to merge 1 commit into from

Conversation

@adrienzheng-cb
Copy link
Contributor

@adrienzheng-cb adrienzheng-cb commented Dec 11, 2025

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?

  • Unit tests
  • Interaction tests
  • Pseudo State tests
  • Manual - Web
  • Manual - Android (Emulator / Device)
  • Manual - iOS (Emulator / Device)

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
Copy link
Collaborator

cb-heimdall commented Dec 11, 2025 •
edited
Loading

🟡 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
adrienzheng-cb commented Dec 11, 2025
View reviewed changes
packages/mobile/src/cards/CardRoot.tsx

export type CardRootProps = CardRootBaseProps & PressableProps;

export const CardRoot = memo(
Copy link
Contributor Author

@adrienzheng-cb adrienzheng-cb Dec 11, 2025

Choose a reason for hiding this comment

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

Component that handles the interactive layer of card

Copy link
Contributor

@cb-ekuersch cb-ekuersch Jan 26, 2026

Choose a reason for hiding this comment

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

@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?

adrienzheng-cb
adrienzheng-cb commented Dec 11, 2025
View reviewed changes
@adrienzheng-cb adrienzheng-cb force-pushed the adrien/card-refactor-base branch from 4c49779 to ec9c499 Compare December 12, 2025 19:27
@adrienzheng-cb 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 adrienzheng-cb force-pushed the adrien/card-refactor-base branch from be85bd4 to 7134a9f Compare December 19, 2025 18:26
@adrienzheng-cb adrienzheng-cb force-pushed the adrien/card-refactor-base branch from 7134a9f to 830443f Compare December 19, 2025 18:35
@adrienzheng-cb adrienzheng-cb force-pushed the adrien/card-refactor-base branch from 830443f to e3d6651 Compare December 19, 2025 18:44
@adrienzheng-cb adrienzheng-cb force-pushed the adrien/card-refactor-base branch from e3d6651 to 67a0cf5 Compare December 19, 2025 18:50
@adrienzheng-cb adrienzheng-cb force-pushed the adrien/card-refactor-base branch from 67a0cf5 to 634007d Compare December 19, 2025 18:59
@adrienzheng-cb adrienzheng-cb force-pushed the adrien/card-refactor-base branch from 634007d to d4869f5 Compare January 19, 2026 17:46
cb-ekuersch
cb-ekuersch reviewed Jan 26, 2026
View reviewed changes
Copy link
Contributor

@cb-ekuersch cb-ekuersch left a comment

Choose a reason for hiding this comment

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

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

packages/mobile/src/cards/CardMedia.tsx

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

import { CardRemoteImage } from './CardRemoteImage';
Copy link
Contributor

@cb-ekuersch cb-ekuersch Jan 26, 2026

Choose a reason for hiding this comment

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

nice!

packages/mobile/src/cards/CardMedia.tsx
<RemoteImage
alt={props.alt ?? ''}
resizeMode="cover"
source={getSource(props.src)}
Copy link
Contributor

@cb-ekuersch cb-ekuersch Jan 26, 2026

Choose a reason for hiding this comment

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

nit: curious about the addition of these properties

packages/mobile/src/cards/CardRoot.tsx

export type CardRootProps = CardRootBaseProps & PressableProps;

export const CardRoot = memo(
Copy link
Contributor

@cb-ekuersch cb-ekuersch Jan 26, 2026

Choose a reason for hiding this comment

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

@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?

packages/web/src/cards/CardRoot.tsx
{
children?: React.ReactNode;
/** If true, the CardRoot will be rendered as a Pressable component. */
renderAsPressable?: boolean;
Copy link
Contributor

@cb-ekuersch cb-ekuersch Jan 26, 2026

Choose a reason for hiding this comment

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

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

Copy link
Contributor

@cb-ekuersch cb-ekuersch Jan 26, 2026

Choose a reason for hiding this comment

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

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

packages/web/src/cards/CardRoot.tsx
if (renderAsPressable) {
const { as, ...pressableRestProps } = props;
return (
<Pressable ref={ref} as={as ?? 'button'} {...(pressableRestProps as any)}>
Copy link
Contributor

@cb-ekuersch cb-ekuersch Jan 26, 2026

Choose a reason for hiding this comment

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

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

Copy link
Contributor

@cb-ekuersch cb-ekuersch Jan 26, 2026

Choose a reason for hiding this comment

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

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

packages/web/src/cards/CardRoot.tsx
} else {
const { as, ...hstackRestProps } = props;
return (
<HStack ref={ref} as={as ?? 'article'} {...(hstackRestProps as any)}>
Copy link
Contributor

@cb-ekuersch cb-ekuersch Jan 26, 2026

Choose a reason for hiding this comment

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

nit: why article?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@cb-ekuersch cb-ekuersch cb-ekuersch left review comments

@hcopp hcopp Awaiting requested review from hcopp

@maximo-macchi-cb maximo-macchi-cb Awaiting requested review from maximo-macchi-cb

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

apps:mobile-app packages:mobile packages:ui-mobile-playground packages:ui-mobile-visreg packages:web

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@adrienzheng-cb @cb-heimdall @cb-ekuersch