Skip to content

Commit 88f1cf9

Browse files
haoruikun-cbhaoruikun-cb
committed
feat: updated usage of meida
1 parent 53e4d7f commit 88f1cf9

File tree

6 files changed

+121
-121
lines changed

6 files changed

+121
-121
lines changed

‎apps/docs/docs/components/data-display/ListCell/_mobileExamples.mdx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ Prefer `spacingVariant="condensed"` for the new ListCell design. The `compact` m
3232
description="New design (condensed)"
3333
detail="$12,345.00"
3434
spacingVariant="condensed"
35-
media={<Avatar src={assets.eth.imageUrl} size="m" />}
35+
start={<Avatar src={assets.eth.imageUrl} size="m" />}
3636
onPress={console.log}
3737
title="Condensed"
3838
variant="positive"
@@ -43,7 +43,7 @@ Prefer `spacingVariant="condensed"` for the new ListCell design. The `compact` m
4343
accessory="arrow"
4444
detail="$12,345.00"
4545
spacingVariant="compact"
46-
media={<Avatar src={assets.eth.imageUrl} size="m" />}
46+
start={<Avatar src={assets.eth.imageUrl} size="m" />}
4747
onPress={console.log}
4848
title="Compact (deprecated)"
4949
variant="positive"
@@ -52,7 +52,7 @@ Prefer `spacingVariant="condensed"` for the new ListCell design. The `compact` m
5252
accessory="arrow"
5353
detail="$12,345.00"
5454
spacingVariant="normal"
55-
media={<Avatar src={assets.eth.imageUrl} size="m" />}
55+
start={<Avatar src={assets.eth.imageUrl} size="m" />}
5656
onPress={console.log}
5757
title="Normal"
5858
variant="positive"
@@ -73,7 +73,7 @@ We have deprecated `CellMedia`; pass media directly as shown below.
7373
spacingVariant="condensed"
7474
title="List Cell with Icon"
7575
description="Shows usage with a leading icon"
76-
media={<Icon active name="info" />}
76+
start={<Icon active name="info" />}
7777
/>
7878
```
7979

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

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

169169
return (
170170
<ListCell
171-
media={<Avatar src={assets.btc.imageUrl} />}
171+
start={<Avatar src={assets.btc.imageUrl} />}
172172
spacingVariant="condensed"
173173
title="Bitcoin"
174174
description="BTC"
@@ -205,7 +205,7 @@ Like `title` and `description`, `detail` and `subdetail` props are also rendered
205205
```tsx
206206
<ListCell
207207
spacingVariant="condensed"
208-
media={<Avatar src={assets.btc.imageUrl} size="m" />}
208+
start={<Avatar src={assets.btc.imageUrl} size="m" />}
209209
title="Custom end content"
210210
description="Detail and subdetail rendered with custom nodes"
211211
detailNode={
@@ -273,7 +273,7 @@ When you pass the `end` prop, it overrides the `detail`/`subdetail`/`detailNode`
273273
spacingVariant="condensed"
274274
title="Accessory Node"
275275
description="Custom accessory with its own onPress"
276-
media={<Avatar src={assets.eth.imageUrl} size="m" />}
276+
start={<Avatar src={assets.eth.imageUrl} size="m" />}
277277
end={
278278
<Button
279279
compact
@@ -301,15 +301,15 @@ The accessibility props are only applied when the `<ListCell>` has a value for t
301301
<ListCell
302302
accessibilityLabel="Accessibility label. Describes content for entire list cell. Applied when onPress prop has a value"
303303
intermediary={<Icon name="chartLine" />}
304-
media={<Avatar src={assets.btc.imageUrl} />}
304+
start={<Avatar src={assets.btc.imageUrl} />}
305305
onPress={() => window.alert('ListCell clicked!')}
306306
title="BTC"
307307
spacingVariant="condensed"
308308
/>
309309

310310
<ListCell
311311
intermediary={<Icon accessibilityLabel="Chart icon" name="chartLine" />}
312-
media={<Avatar accessibilityLabel="Bitcoin" src={assets.btc.imageUrl} />}
312+
start={<Avatar accessibilityLabel="Bitcoin" src={assets.btc.imageUrl} />}
313313
title="BTC"
314314
spacingVariant="condensed"
315315
/>
@@ -329,7 +329,7 @@ The accessibility props are only applied when the `<ListCell>` has a value for t
329329
This is a default helper message.
330330
</CellHelperText>
331331
}
332-
media={<Avatar src={assets.btc.imageUrl} />}
332+
start={<Avatar src={assets.btc.imageUrl} />}
333333
end={<Button compact>Action</Button>}
334334
/>
335335
<ListCell
@@ -341,7 +341,7 @@ The accessibility props are only applied when the `<ListCell>` has a value for t
341341
This is a warning message.
342342
</CellHelperText>
343343
}
344-
media={<Avatar src={assets.btc.imageUrl} />}
344+
start={<Avatar src={assets.btc.imageUrl} />}
345345
end={<Button compact>Action</Button>}
346346
/>
347347
<ListCell
@@ -353,7 +353,7 @@ The accessibility props are only applied when the `<ListCell>` has a value for t
353353
This is an error message.
354354
</CellHelperText>
355355
}
356-
media={<Avatar src={assets.btc.imageUrl} />}
356+
start={<Avatar src={assets.btc.imageUrl} />}
357357
end={<Button compact>Action</Button>}
358358
/>
359359
</VStack>
@@ -369,7 +369,7 @@ The ListCellFallback component provides loading state representations of ListCel
369369
<ListCellFallback title description spacingVariant="condensed" />
370370

371371
{/* Loading state with media */}
372-
<ListCellFallback title description media="icon" spacingVariant="condensed" />
372+
<ListCellFallback title description start="icon" spacingVariant="condensed" />
373373

374374
{/* Loading state with details */}
375375
<ListCellFallback title description detail subdetail spacingVariant="condensed" />
@@ -382,7 +382,7 @@ The ListCellFallback component provides loading state representations of ListCel
382382
detail
383383
subdetail
384384
helperText
385-
media="icon"
385+
start="icon"
386386
rectWidthVariant={2} // Creates a deterministic variant of the loading state
387387
disableRandomRectWidth
388388
styles={{ helperText: { paddingLeft: 48 } }}

‎apps/docs/docs/components/data-display/ListCell/_webExamples.mdx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ Prefer `spacingVariant="condensed"` for the new ListCell design. The `compact` m
3232
description="New design (condensed)"
3333
detail="$12,345.00"
3434
spacingVariant="condensed"
35-
media={<Avatar src={assets.eth.imageUrl} size="m" />}
35+
start={<Avatar src={assets.eth.imageUrl} size="m" />}
3636
onClick={console.log}
3737
title="Condensed"
3838
variant="positive"
@@ -43,7 +43,7 @@ Prefer `spacingVariant="condensed"` for the new ListCell design. The `compact` m
4343
accessory="arrow"
4444
detail="$12,345.00"
4545
spacingVariant="compact"
46-
media={<Avatar src={assets.eth.imageUrl} size="m" />}
46+
start={<Avatar src={assets.eth.imageUrl} size="m" />}
4747
onClick={console.log}
4848
title="Compact (deprecated)"
4949
variant="positive"
@@ -52,7 +52,7 @@ Prefer `spacingVariant="condensed"` for the new ListCell design. The `compact` m
5252
accessory="arrow"
5353
detail="$12,345.00"
5454
spacingVariant="normal"
55-
media={<Avatar src={assets.eth.imageUrl} size="m" />}
55+
start={<Avatar src={assets.eth.imageUrl} size="m" />}
5656
onClick={console.log}
5757
title="Normal"
5858
variant="positive"
@@ -73,7 +73,7 @@ We have deprecated `CellMedia`; pass media directly as shown below.
7373
spacingVariant="condensed"
7474
title="List Cell with Icon"
7575
description="Shows usage with a leading icon"
76-
media={<Icon active name="info" />}
76+
start={<Icon active name="info" />}
7777
/>
7878
```
7979

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

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

169169
return (
170170
<ListCell
171-
media={<Avatar src={assets.btc.imageUrl} />}
171+
start={<Avatar src={assets.btc.imageUrl} />}
172172
spacingVariant="condensed"
173173
title="Bitcoin"
174174
description="BTC"
@@ -205,7 +205,7 @@ Like `title` and `description`, `detail` and `subdetail` props are also rendered
205205
```tsx live
206206
<ListCell
207207
spacingVariant="condensed"
208-
media={<Avatar src={assets.btc.imageUrl} size="m" />}
208+
start={<Avatar src={assets.btc.imageUrl} size="m" />}
209209
title="Custom end content"
210210
description="Detail and subdetail rendered with custom nodes"
211211
detailNode={
@@ -273,7 +273,7 @@ When you pass the `end` prop, it overrides the `detail`/`subdetail`/`detailNode`
273273
spacingVariant="condensed"
274274
title="Accessory Node"
275275
description="Custom accessory with its own onClick"
276-
media={<Avatar src={assets.eth.imageUrl} size="m" />}
276+
start={<Avatar src={assets.eth.imageUrl} size="m" />}
277277
end={
278278
<Button
279279
compact
@@ -301,15 +301,15 @@ The accessibility props are only applied when the `<ListCell>` has a value for t
301301
<ListCell
302302
accessibilityLabel="Accessibility label. Describes content for entire list cell. Applied when onClick prop has a value"
303303
intermediary={<Icon name="chartLine" />}
304-
media={<Avatar src={assets.btc.imageUrl} />}
304+
start={<Avatar src={assets.btc.imageUrl} />}
305305
onClick={() => window.alert('ListCell clicked!')}
306306
title="BTC"
307307
spacingVariant="condensed"
308308
/>
309309

310310
<ListCell
311311
intermediary={<Icon accessibilityLabel="Chart icon" name="chartLine" />}
312-
media={<Avatar accessibilityLabel="Bitcoin" src={assets.btc.imageUrl} />}
312+
start={<Avatar accessibilityLabel="Bitcoin" src={assets.btc.imageUrl} />}
313313
title="BTC"
314314
spacingVariant="condensed"
315315
/>
@@ -329,7 +329,7 @@ The accessibility props are only applied when the `<ListCell>` has a value for t
329329
This is a default helper message.
330330
</CellHelperText>
331331
}
332-
media={<Avatar src={assets.btc.imageUrl} />}
332+
start={<Avatar src={assets.btc.imageUrl} />}
333333
end={<Button compact>Action</Button>}
334334
/>
335335
<ListCell
@@ -341,7 +341,7 @@ The accessibility props are only applied when the `<ListCell>` has a value for t
341341
This is a warning message.
342342
</CellHelperText>
343343
}
344-
media={<Avatar src={assets.btc.imageUrl} />}
344+
start={<Avatar src={assets.btc.imageUrl} />}
345345
end={<Button compact>Action</Button>}
346346
/>
347347
<ListCell
@@ -353,7 +353,7 @@ The accessibility props are only applied when the `<ListCell>` has a value for t
353353
This is an error message.
354354
</CellHelperText>
355355
}
356-
media={<Avatar src={assets.btc.imageUrl} />}
356+
start={<Avatar src={assets.btc.imageUrl} />}
357357
end={<Button compact>Action</Button>}
358358
/>
359359
</VStack>
@@ -369,7 +369,7 @@ The ListCellFallback component provides loading state representations of ListCel
369369
<ListCellFallback title description spacingVariant="condensed" />
370370

371371
{/* Loading state with media */}
372-
<ListCellFallback title description media="icon" spacingVariant="condensed" />
372+
<ListCellFallback title description start="icon" spacingVariant="condensed" />
373373

374374
{/* Loading state with details */}
375375
<ListCellFallback title description detail subdetail spacingVariant="condensed" />
@@ -382,7 +382,7 @@ The ListCellFallback component provides loading state representations of ListCel
382382
detail
383383
subdetail
384384
helperText
385-
media="icon"
385+
start="icon"
386386
rectWidthVariant={2} // Creates a deterministic variant of the loading state
387387
disableRandomRectWidth
388388
styles={{ helperText: { paddingLeft: 48 } }}

0 commit comments

Comments
 (0)