Skip to content

Commit 47c6a1c

Browse files
davebcn87davebcn87
authored
Merge pull request #3383 from Shopify/examples-titles-and-text-components
Added examples to admin title and text components
2 parents 0d06fa2 + d279ce5 commit 47c6a1c

34 files changed

+596
-0
lines changed

‎packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.doc.ts‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,68 @@ const data: AdminReferenceEntityTemplateSchema = {
3030
],
3131
},
3232
},
33+
examples: {
34+
description: 'Component examples',
35+
exampleGroups: [
36+
{
37+
title: 'Basic usage',
38+
examples: [
39+
{
40+
description:
41+
'Demonstrates how different badge tones can visually represent various order fulfillment states, enabling merchants to quickly understand order progress at a glance.',
42+
codeblock: {
43+
title: 'Order status badges',
44+
tabs: [
45+
{
46+
code: './examples/order-status-badges.html',
47+
language: 'preview',
48+
},
49+
],
50+
},
51+
},
52+
{
53+
description:
54+
'Showcases how badges can incorporate both tones and icons to provide contextual information across different merchant scenarios, such as product management, inventory tracking, and payment status.',
55+
codeblock: {
56+
title: 'Status indicators with icons',
57+
tabs: [
58+
{
59+
code: './examples/status-indicators-with-icons.html',
60+
language: 'preview',
61+
},
62+
],
63+
},
64+
},
65+
{
66+
description:
67+
'Illustrates how badges can be seamlessly integrated into table layouts to provide quick, visually distinct status indicators for individual table rows.',
68+
codeblock: {
69+
title: 'Within table context',
70+
tabs: [
71+
{
72+
code: './examples/within-table-context.html',
73+
language: 'preview',
74+
},
75+
],
76+
},
77+
},
78+
{
79+
description:
80+
'Demonstrates the two available badge sizes for creating visual hierarchy.',
81+
codeblock: {
82+
title: 'Different sizes for emphasis',
83+
tabs: [
84+
{
85+
code: './examples/different-sizes-for-emphasis.html',
86+
language: 'preview',
87+
},
88+
],
89+
},
90+
},
91+
],
92+
},
93+
],
94+
},
3395
};
3496

3597
export default data;

‎packages/ui-extensions/src/surfaces/admin/components/Badge/examples/different-sizes-for-emphasis.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<s-stack direction="inline" gap="base">
2+
<s-badge size="base">New</s-badge>
3+
<s-badge size="large">Attention needed</s-badge>
4+
</s-stack>

‎packages/ui-extensions/src/surfaces/admin/components/Badge/examples/order-status-badges.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<s-stack direction="inline" gap="base">
2+
<s-badge tone="success">Fulfilled</s-badge>
3+
<s-badge tone="warning">Partially fulfilled</s-badge>
4+
<s-badge tone="neutral">Unfulfilled</s-badge>
5+
<s-badge tone="critical">Cancelled</s-badge>
6+
</s-stack>

‎packages/ui-extensions/src/surfaces/admin/components/Badge/examples/status-indicators-with-icons.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<s-stack gap="base">
2+
<!-- Product status -->
3+
<s-stack direction="inline" gap="base">
4+
<s-badge tone="success" icon="view">Active</s-badge>
5+
<s-badge tone="warning" icon="clock">Scheduled</s-badge>
6+
<s-badge tone="critical">Archived</s-badge>
7+
</s-stack>
8+
9+
<!-- Inventory status -->
10+
<s-stack direction="inline" gap="base">
11+
<s-badge tone="success">In stock</s-badge>
12+
<s-badge tone="warning" icon="alert-triangle">Low stock</s-badge>
13+
<s-badge tone="critical">Out of stock</s-badge>
14+
</s-stack>
15+
</s-stack>

‎packages/ui-extensions/src/surfaces/admin/components/Badge/examples/within-table-context.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<s-table>
2+
<s-table-header-row>
3+
<s-table-header>Order</s-table-header>
4+
<s-table-header>Fulfillment</s-table-header>
5+
<s-table-header>Payment</s-table-header>
6+
</s-table-header-row>
7+
<s-table-body>
8+
<s-table-row>
9+
<s-table-cell>#1001</s-table-cell>
10+
<s-table-cell>
11+
<s-badge tone="success">Fulfilled</s-badge>
12+
</s-table-cell>
13+
<s-table-cell>
14+
<s-badge tone="success">Paid</s-badge>
15+
</s-table-cell>
16+
</s-table-row>
17+
</s-table-body>
18+
</s-table>

‎packages/ui-extensions/src/surfaces/admin/components/Chip/Chip.doc.ts‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,81 @@ const data: AdminReferenceEntityTemplateSchema = {
2929
],
3030
},
3131
},
32+
examples: {
33+
description: 'Component examples',
34+
exampleGroups: [
35+
{
36+
title: 'Basic usage',
37+
examples: [
38+
{
39+
description:
40+
'Simple chip displaying product status without an icon.',
41+
codeblock: {
42+
title: 'Basic usage',
43+
tabs: [
44+
{
45+
code: './examples/basic-usage.html',
46+
language: 'preview',
47+
},
48+
],
49+
},
50+
},
51+
{
52+
description:
53+
'Chip enhanced with an icon to provide visual context for the category.',
54+
codeblock: {
55+
title: 'With icon graphic',
56+
tabs: [
57+
{
58+
code: './examples/with-icon-graphic.html',
59+
language: 'preview',
60+
},
61+
],
62+
},
63+
},
64+
{
65+
description:
66+
'Demonstrates all three color variants for different levels of visual emphasis.',
67+
codeblock: {
68+
title: 'Color variants',
69+
tabs: [
70+
{
71+
code: './examples/color-variants.html',
72+
language: 'preview',
73+
},
74+
],
75+
},
76+
},
77+
{
78+
description:
79+
'Common status indicators demonstrating chips in real-world product management scenarios.',
80+
codeblock: {
81+
title: 'Product status',
82+
tabs: [
83+
{
84+
code: './examples/product-status.html',
85+
language: 'preview',
86+
},
87+
],
88+
},
89+
},
90+
{
91+
description:
92+
'Demonstrates automatic text truncation for long content within a constrained width.',
93+
codeblock: {
94+
title: 'Text truncation',
95+
tabs: [
96+
{
97+
code: './examples/text-truncation.html',
98+
language: 'preview',
99+
},
100+
],
101+
},
102+
},
103+
],
104+
},
105+
],
106+
},
32107
};
33108

34109
export default data;

‎packages/ui-extensions/src/surfaces/admin/components/Chip/examples/basic-usage.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<s-chip color="base" accessibilityLabel="Product status indicator">
2+
Active
3+
</s-chip>

‎packages/ui-extensions/src/surfaces/admin/components/Chip/examples/color-variants.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<s-stack direction="inline" gap="base">
2+
<s-chip color="subdued" accessibilityLabel="Secondary information">
3+
Draft
4+
</s-chip>
5+
<s-chip color="base" accessibilityLabel="Standard information">
6+
Published
7+
</s-chip>
8+
<s-chip color="strong" accessibilityLabel="Important status">
9+
<s-icon slot="graphic" type="check" size="small"></s-icon>
10+
Verified
11+
</s-chip>
12+
</s-stack>

‎packages/ui-extensions/src/surfaces/admin/components/Chip/examples/product-status.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<s-stack direction="inline" gap="base">
2+
<s-chip color="base" accessibilityLabel="Product status">Active</s-chip>
3+
<s-chip color="subdued" accessibilityLabel="Product status">Draft</s-chip>
4+
<s-chip color="strong" accessibilityLabel="Product status">
5+
<s-icon slot="graphic" type="check" size="small"></s-icon>
6+
Published
7+
</s-chip>
8+
</s-stack>

‎packages/ui-extensions/src/surfaces/admin/components/Chip/examples/text-truncation.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<s-box maxInlineSize="200px">
2+
<s-stack gap="base">
3+
<s-chip color="base" accessibilityLabel="Long product name">
4+
This is a very long product name that will be truncated with ellipsis when
5+
it exceeds the container width
6+
</s-chip>
7+
<s-chip color="strong" accessibilityLabel="Long category name">
8+
<s-icon slot="graphic" type="catalog-product" size="small"></s-icon>
9+
Electronics and computer accessories category with extended description
10+
</s-chip>
11+
</s-stack>
12+
</s-box>

0 commit comments

Comments
 (0)