Skip to content

Feat: ListCell start refactor #136

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

Open
haoruikun-cb wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Feat: ListCell start refactor #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cf7e6dc
feat: deprecate media in ListCell web
haoruikun-cb Oct 29, 2025
71c980a
feat: deprecate priority and use nonShrinkingSections
haoruikun-cb Oct 29, 2025
3fd4d5e
Revert "feat: deprecate priority and use nonShrinkingSections"
haoruikun-cb Oct 30, 2025
530e677
feat: deprecate media in ListCell mobile
haoruikun-cb Oct 30, 2025
baf3d90
feat: updated usage of meida
haoruikun-cb Oct 30, 2025
9b7e36e
feat: updated doc site
haoruikun-cb Oct 30, 2025
64fa7d4
chore: changelog
haoruikun-cb Nov 7, 2025
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
50 changes: 27 additions & 23 deletions apps/docs/docs/components/data-display/ListCell/_mobileExamples.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

A ListCell row is divided into the following 5 columns:

- Media
- Start
- Title & description
- Intermediary
- End (detail & subdetail or action)
Expand Down Expand Up @@ -32,7 +32,7 @@ Prefer `spacingVariant="condensed"` for the new ListCell design. The `compact` m
description="New design (condensed)"
detail="$12,345.00"
spacingVariant="condensed"
media={<Avatar src={assets.eth.imageUrl} size="m" />}
start={<Avatar src={assets.eth.imageUrl} size="m" />}
onPress={console.log}
title="Condensed"
variant="positive"
Expand All @@ -43,7 +43,7 @@ Prefer `spacingVariant="condensed"` for the new ListCell design. The `compact` m
accessory="arrow"
detail="$12,345.00"
spacingVariant="compact"
media={<Avatar src={assets.eth.imageUrl} size="m" />}
start={<Avatar src={assets.eth.imageUrl} size="m" />}
onPress={console.log}
title="Compact (deprecated)"
variant="positive"
Expand All @@ -52,18 +52,18 @@ Prefer `spacingVariant="condensed"` for the new ListCell design. The `compact` m
accessory="arrow"
detail="$12,345.00"
spacingVariant="normal"
media={<Avatar src={assets.eth.imageUrl} size="m" />}
start={<Avatar src={assets.eth.imageUrl} size="m" />}
onPress={console.log}
title="Normal"
variant="positive"
/>
</VStack>
```

## Media
## Start

::::note
We have deprecated `CellMedia`; pass media directly as shown below.
We have deprecated `CellMedia`; pass start content directly with the `start` prop as shown below.
::::

### Leading Icon
Expand All @@ -73,7 +73,7 @@ We have deprecated `CellMedia`; pass media directly as shown below.
spacingVariant="condensed"
title="List Cell with Icon"
description="Shows usage with a leading icon"
media={<Icon active name="info" />}
start={<Icon active name="info" />}
/>
```

Expand All @@ -84,7 +84,7 @@ We have deprecated `CellMedia`; pass media directly as shown below.
spacingVariant="condensed"
title="List Cell with Icon"
description="Shows usage with a leading icon"
media={<Avatar src={assets.btc.imageUrl} size="l" />}
start={<Avatar src={assets.btc.imageUrl} size="l" />}
/>
```

Expand All @@ -106,7 +106,7 @@ When using the Node props, you are responsible for styling, layout, and truncati
```tsx
<ListCell
spacingVariant="condensed"
media={<Avatar src={assets.eth.imageUrl} size="m" />}
start={<Avatar src={assets.eth.imageUrl} size="m" />}
titleNode={
<HStack gap={1} alignItems="center">
<Icon name="checkmark" />
Expand Down Expand Up @@ -168,7 +168,7 @@ function Intermediary() {

return (
<ListCell
media={<Avatar src={assets.btc.imageUrl} />}
start={<Avatar src={assets.btc.imageUrl} />}
spacingVariant="condensed"
title="Bitcoin"
description="BTC"
Expand Down Expand Up @@ -205,7 +205,7 @@ Like `title` and `description`, `detail` and `subdetail` props are also rendered
```tsx
<ListCell
spacingVariant="condensed"
media={<Avatar src={assets.btc.imageUrl} size="m" />}
start={<Avatar src={assets.btc.imageUrl} size="m" />}
title="Custom end content"
description="Detail and subdetail rendered with custom nodes"
detailNode={
Expand Down Expand Up @@ -273,7 +273,7 @@ When you pass the `end` prop, it overrides the `detail`/`subdetail`/`detailNode`
spacingVariant="condensed"
title="Accessory Node"
description="Custom accessory with its own onPress"
media={<Avatar src={assets.eth.imageUrl} size="m" />}
start={<Avatar src={assets.eth.imageUrl} size="m" />}
end={
<Button
compact
Expand Down Expand Up @@ -301,15 +301,15 @@ The accessibility props are only applied when the `<ListCell>` has a value for t
<ListCell
accessibilityLabel="Accessibility label. Describes content for entire list cell. Applied when onPress prop has a value"
intermediary={<Icon name="chartLine" />}
media={<Avatar src={assets.btc.imageUrl} />}
start={<Avatar src={assets.btc.imageUrl} />}
onPress={() => window.alert('ListCell clicked!')}
title="BTC"
spacingVariant="condensed"
/>

<ListCell
intermediary={<Icon accessibilityLabel="Chart icon" name="chartLine" />}
media={<Avatar accessibilityLabel="Bitcoin" src={assets.btc.imageUrl} />}
start={<Avatar accessibilityLabel="Bitcoin" src={assets.btc.imageUrl} />}
title="BTC"
spacingVariant="condensed"
/>
Expand All @@ -329,7 +329,7 @@ The accessibility props are only applied when the `<ListCell>` has a value for t
This is a default helper message.
</CellHelperText>
}
media={<Avatar src={assets.btc.imageUrl} />}
start={<Avatar src={assets.btc.imageUrl} />}
end={<Button compact>Action</Button>}
/>
<ListCell
Expand All @@ -341,7 +341,7 @@ The accessibility props are only applied when the `<ListCell>` has a value for t
This is a warning message.
</CellHelperText>
}
media={<Avatar src={assets.btc.imageUrl} />}
start={<Avatar src={assets.btc.imageUrl} />}
end={<Button compact>Action</Button>}
/>
<ListCell
Expand All @@ -353,7 +353,7 @@ The accessibility props are only applied when the `<ListCell>` has a value for t
This is an error message.
</CellHelperText>
}
media={<Avatar src={assets.btc.imageUrl} />}
start={<Avatar src={assets.btc.imageUrl} />}
end={<Button compact>Action</Button>}
/>
</VStack>
Expand All @@ -368,8 +368,8 @@ The ListCellFallback component provides loading state representations of ListCel
{/* Basic loading state */}
<ListCellFallback title description spacingVariant="condensed" />

{/* Loading state with media */}
<ListCellFallback title description media="icon" spacingVariant="condensed" />
{/* Loading state with start content */}
<ListCellFallback title description start="icon" spacingVariant="condensed" />

{/* Loading state with details */}
<ListCellFallback title description detail subdetail spacingVariant="condensed" />
Expand All @@ -382,7 +382,7 @@ The ListCellFallback component provides loading state representations of ListCel
detail
subdetail
helperText
media="icon"
start="icon"
rectWidthVariant={2} // Creates a deterministic variant of the loading state
disableRandomRectWidth
styles={{ helperText: { paddingLeft: 48 } }}
Expand Down Expand Up @@ -472,6 +472,10 @@ function PriorityContent() {
}
```

:::::note
`start` priority applies to the title and description column, not the start slot content. The start slot always have `flexShrink={0}`.
:::::

## Anatomy

Without helper text (top-only layout):
Expand All @@ -484,7 +488,7 @@ Without helper text (top-only layout):
││┌───────────────────────────────────────────────────────────────────────┐││
│││ contentContainer & mainContent (HStack) │││
│││ ┌─────┐ ┌────────────────┐ ┌────────────┐ ┌────────────┐ ┌─────────┐ │││
│││ │media│ │ VStack │ │intermediary│ │ end │ │accessory│ │││
│││ │start│ │ VStack │ │intermediary│ │ end │ │accessory│ │││
│││ │ │ │ ┌──────────┐ │ │ │ │ (detail │ │ │ │││
│││ │ │ │ │ title │ │ │ │ │ or │ │ │ │││
│││ │ │ │ └──────────┘ │ │ │ │ action) │ │ │ │││
Expand All @@ -509,7 +513,7 @@ With helper text (top + bottom layout):
│││┌───────────────────────────────────────────────────────────────────────┐│││
││││ mainContent (HStack) ││││
││││ ┌─────┐ ┌────────────────┐ ┌────────────┐ ┌────────────┐ ┌─────────┐ ││││
││││ │media│ │ VStack │ │intermediary│ │ end │ │accessory│ ││││
││││ │start│ │ VStack │ │intermediary│ │ end │ │accessory│ ││││
││││ │ │ │ ┌──────────┐ │ │ │ │ (detail │ │ │ ││││
││││ │ │ │ │ title │ │ │ │ │ or │ │ │ ││││
││││ │ │ │ └──────────┘ │ │ │ │ action) │ │ │ ││││
Expand All @@ -533,7 +537,7 @@ Mapping to `styles` / `classNames` keys:
- contentContainer: container around top and optional bottom content
- mainContent: inner horizontal layout that holds the main pieces
- title/description: stacked text column within `topContent`
- media: leading media container
- start: leading content container
- intermediary: middle container between main and end
- end: container for `detail` / `subdetail` or `end` prop you pass in
- accessory: trailing accessory container
Expand Down
Loading