Skip to content

Commit 96d0533

Browse files
authored
Will include the ChoiceList > Compose rich choice content example in 2026-01 (#3694)
### Background This PR adds the example to the ChoiceList component documentation to `2026-01` as well (note: It is already present in `2025-10` but is missing in `2026-01) ### 🎩 - Verify that the "Compose rich choice content" example in present in 2026-01. - Tophat link: https://pr-66384.shopify-dev.shopify.io/ ### Checklist - [x] I have 🎩'd these changes - [x] I have updated relevant documentation --- ![image.png](https://app.graphite.com/user-attachments/assets/1495461b-37d0-4917-bc51-a3540e9993f2.png)
2 parents 9475b2d + d8094e9 commit 96d0533

File tree

2 files changed

+48
-0
lines changed

2 files changed

+48
-0
lines changed

packages/ui-extensions/src/surfaces/point-of-sale/components/ChoiceList/ChoiceList.doc.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,19 @@ const data: ReferenceEntityTemplateSchema = {
9393
],
9494
},
9595
},
96+
{
97+
description:
98+
'Compose rich choice content by nesting other components within `Choice` elements. This example demonstrates combining images, text, and layout components to create visually enhanced choice options with descriptions and supporting images.',
99+
codeblock: {
100+
title: 'Compose rich choice content',
101+
tabs: [
102+
{
103+
code: './examples/composed-choices.jsx',
104+
language: 'jsx',
105+
},
106+
],
107+
},
108+
},
96109
],
97110
},
98111
};
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<s-choice-list>
2+
{/* Composed choice with image and text */}
3+
<s-choice value="option1">
4+
<s-stack gap="small-200" alignItems="center" direction="inline">
5+
<s-box blockSize="40px" inlineSize="40px">
6+
<s-image src="https://placehold.co/60x60" inlineSize="fill" objectFit="cover" />
7+
</s-box>
8+
<s-box>
9+
<s-text>Option 1</s-text>
10+
<s-text type="small" color="subdued">
11+
Additional details for option 1
12+
</s-text>
13+
</s-box>
14+
</s-stack>
15+
</s-choice>
16+
17+
{/* Composed choice with nested text */}
18+
<s-choice value="option2">
19+
<s-text type="strong">
20+
Option 2
21+
<s-text type="small" color="subdued">
22+
Additional details for option 2
23+
</s-text>
24+
</s-text>
25+
</s-choice>
26+
27+
{/* Mix of text and composed elements */}
28+
<s-choice value="option3" disabled>
29+
Option 3
30+
<s-text type="small" color="subdued">
31+
(disabled)
32+
</s-text>
33+
<s-text type="strong">Additional details for option 3</s-text>
34+
</s-choice>
35+
</s-choice-list>

0 commit comments

Comments
 (0)