@shopify/ui-extensions 2025.10.1 → 2025.10.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/README.md +16 -34
  2. package/build/ts/surfaces/admin/components/Avatar/Avatar.doc.d.ts.map +1 -1
  3. package/build/ts/surfaces/admin/components/Badge/Badge.doc.d.ts.map +1 -1
  4. package/build/ts/surfaces/admin/components/Chip/Chip.doc.d.ts.map +1 -1
  5. package/build/ts/surfaces/admin/components/Heading/Heading.doc.d.ts.map +1 -1
  6. package/build/ts/surfaces/admin/components/Icon/Icon.doc.d.ts.map +1 -1
  7. package/build/ts/surfaces/admin/components/Image/Image.doc.d.ts.map +1 -1
  8. package/build/ts/surfaces/admin/components/Paragraph/Paragraph.doc.d.ts.map +1 -1
  9. package/build/ts/surfaces/admin/components/Text/Text.doc.d.ts.map +1 -1
  10. package/build/ts/surfaces/admin/components/Thumbnail/Thumbnail.doc.d.ts.map +1 -1
  11. package/build/ts/surfaces/admin/docs-types.d.ts +26 -10
  12. package/build/ts/surfaces/admin/docs-types.d.ts.map +1 -1
  13. package/build/ts/surfaces/customer-account/api/standard-api/standard-api.d.ts +1 -1
  14. package/build/ts/surfaces/point-of-sale/api/navigation-api/navigation-api.d.ts +0 -11
  15. package/build/ts/surfaces/point-of-sale/api/navigation-api/navigation-api.d.ts.map +1 -1
  16. package/build/ts/surfaces/point-of-sale/api/pin-pad-api.d.ts +12 -5
  17. package/build/ts/surfaces/point-of-sale/api/pin-pad-api.d.ts.map +1 -1
  18. package/build/ts/surfaces/point-of-sale/types/pin-pad.d.ts +13 -4
  19. package/build/ts/surfaces/point-of-sale/types/pin-pad.d.ts.map +1 -1
  20. package/build/tsconfig.tsbuildinfo +1 -1
  21. package/package.json +1 -1
  22. package/src/surfaces/admin/components/Avatar/examples/basic-usage.html +1 -0
  23. package/src/surfaces/admin/components/Avatar/examples/color-consistency-demo.html +7 -0
  24. package/src/surfaces/admin/components/Avatar/examples/default-avatar-no-props.html +1 -0
  25. package/src/surfaces/admin/components/Avatar/examples/default.html +1 -4
  26. package/src/surfaces/admin/components/Avatar/examples/error-handling-example.html +6 -0
  27. package/src/surfaces/admin/components/Avatar/examples/fulfillment-partner-avatars.html +14 -0
  28. package/src/surfaces/admin/components/Avatar/examples/in-customer-list-context.html +24 -0
  29. package/src/surfaces/admin/components/Avatar/examples/long-initials-handling.html +5 -0
  30. package/src/surfaces/admin/components/Avatar/examples/size-variations.html +7 -0
  31. package/src/surfaces/admin/components/Avatar/examples/staff-member-profiles.html +10 -0
  32. package/src/surfaces/admin/components/Avatar/examples/with-image-source-and-fallback.html +6 -0
  33. package/src/surfaces/admin/components/Avatar/examples/with-section-component.html +17 -0
  34. package/src/surfaces/admin/components/Badge/examples/different-sizes-for-emphasis.html +4 -0
  35. package/src/surfaces/admin/components/Badge/examples/order-status-badges.html +6 -0
  36. package/src/surfaces/admin/components/Badge/examples/status-indicators-with-icons.html +15 -0
  37. package/src/surfaces/admin/components/Badge/examples/within-table-context.html +18 -0
  38. package/src/surfaces/admin/components/Chip/examples/basic-usage.html +3 -0
  39. package/src/surfaces/admin/components/Chip/examples/color-variants.html +12 -0
  40. package/src/surfaces/admin/components/Chip/examples/product-status.html +8 -0
  41. package/src/surfaces/admin/components/Chip/examples/text-truncation.html +12 -0
  42. package/src/surfaces/admin/components/Chip/examples/with-icon-graphic.html +4 -0
  43. package/src/surfaces/admin/components/Heading/examples/basic-heading.html +1 -0
  44. package/src/surfaces/admin/components/Heading/examples/heading-with-custom-accessibility.html +3 -0
  45. package/src/surfaces/admin/components/Heading/examples/heading-with-line-clamping.html +5 -0
  46. package/src/surfaces/admin/components/Heading/examples/heading-within-section-hierarchy.html +12 -0
  47. package/src/surfaces/admin/components/Icon/examples/basic-usage.html +7 -0
  48. package/src/surfaces/admin/components/Icon/examples/in-badge-components.html +4 -0
  49. package/src/surfaces/admin/components/Icon/examples/in-button-components.html +6 -0
  50. package/src/surfaces/admin/components/Icon/examples/small-size.html +1 -0
  51. package/src/surfaces/admin/components/Icon/examples/subdued-color.html +1 -0
  52. package/src/surfaces/admin/components/Icon/examples/with-id-property.html +1 -0
  53. package/src/surfaces/admin/components/Icon/examples/with-interest-relationship.html +1 -0
  54. package/src/surfaces/admin/components/Icon/examples/with-semantic-tone.html +6 -0
  55. package/src/surfaces/admin/components/Image/examples/auto-sized-image.html +5 -0
  56. package/src/surfaces/admin/components/Image/examples/basic-usage.html +1 -0
  57. package/src/surfaces/admin/components/Image/examples/decorative-image.html +7 -0
  58. package/src/surfaces/admin/components/Image/examples/responsive-images-with-srcset.html +9 -0
  59. package/src/surfaces/admin/components/Image/examples/responsive-layout-with-aspect-ratio.html +7 -0
  60. package/src/surfaces/admin/components/Image/examples/with-border-styling.html +12 -0
  61. package/src/surfaces/admin/components/Image/examples/within-layout-components.html +26 -0
  62. package/src/surfaces/admin/components/Paragraph/examples/admin-ui-patterns.html +21 -0
  63. package/src/surfaces/admin/components/Paragraph/examples/basic-usage.html +3 -0
  64. package/src/surfaces/admin/components/Paragraph/examples/line-clamping.html +8 -0
  65. package/src/surfaces/admin/components/Paragraph/examples/rtl-support.html +1 -0
  66. package/src/surfaces/admin/components/Paragraph/examples/screen-reader-text.html +3 -0
  67. package/src/surfaces/admin/components/Paragraph/examples/tabular-numbers.html +3 -0
  68. package/src/surfaces/admin/components/Paragraph/examples/with-tone-and-color.html +9 -0
  69. package/src/surfaces/admin/components/Text/examples/accessibility-hidden-text.html +1 -0
  70. package/src/surfaces/admin/components/Text/examples/basic-usage.html +1 -0
  71. package/src/surfaces/admin/components/Text/examples/interest-for-association.html +6 -0
  72. package/src/surfaces/admin/components/Text/examples/right-to-left-text.html +1 -0
  73. package/src/surfaces/admin/components/Text/examples/semantic-address.html +1 -0
  74. package/src/surfaces/admin/components/Text/examples/status-tones.html +5 -0
  75. package/src/surfaces/admin/components/Text/examples/strong-text.html +1 -0
  76. package/src/surfaces/admin/components/Text/examples/subdued-color.html +1 -0
  77. package/src/surfaces/admin/components/Text/examples/tabular-numbers.html +1 -0
  78. package/src/surfaces/admin/components/Thumbnail/examples/basic-usage.html +5 -0
  79. package/src/surfaces/admin/components/Thumbnail/examples/different-sizes.html +17 -0
  80. package/src/surfaces/admin/components/Thumbnail/examples/empty-state.html +1 -0
  81. package/src/surfaces/admin/components/Thumbnail/examples/with-event-handling.html +6 -0
  82. package/src/surfaces/admin/docs-types.ts +33 -12
  83. package/src/surfaces/customer-account/api/standard-api/standard-api.ts +1 -1
  84. package/src/surfaces/point-of-sale/api/navigation-api/navigation-api.ts +0 -18
  85. package/src/surfaces/point-of-sale/api/pin-pad-api.ts +12 -5
  86. package/src/surfaces/point-of-sale/types/pin-pad.ts +13 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@shopify/ui-extensions",
3
- "version": "2025.10.1",
3
+ "version": "2025.10.2",
4
4
  "scripts": {
5
5
  "docs:admin": "node ./docs/surfaces/admin/build-docs.mjs",
6
6
  "docs:checkout": "bash ./docs/surfaces/checkout/build-docs.sh",
@@ -0,0 +1 @@
1
+ <s-avatar initials="SC" alt="Sarah Chen"></s-avatar>
@@ -0,0 +1,7 @@
1
+ <s-stack direction="inline" gap="base">
2
+ <s-avatar initials="AB" alt="Apparel boutique" size="base"></s-avatar>
3
+ <s-avatar initials="CD" alt="Coffee direct" size="base"></s-avatar>
4
+ <s-avatar initials="EF" alt="Electronics franchise" size="base"></s-avatar>
5
+ <s-avatar initials="AB" alt="Art books store" size="base"></s-avatar>
6
+ <!-- Note: Both AB avatars will have the same color -->
7
+ </s-stack>
@@ -0,0 +1 @@
1
+ <s-avatar alt="Customer"></s-avatar>
@@ -1,4 +1 @@
1
- <s-avatar
2
- alt="John Doe"
3
- initials="JD"
4
- ></s-avatar>
1
+ <s-avatar alt="John Doe" initials="JD"></s-avatar>
@@ -0,0 +1,6 @@
1
+ <s-avatar
2
+ src="/invalid-customer-photo.jpg"
3
+ initials="CS"
4
+ alt="Customer support"
5
+ ></s-avatar>
6
+ <!-- Will display "CS" initials when image fails -->
@@ -0,0 +1,14 @@
1
+ <s-stack gap="small">
2
+ <s-stack direction="inline" gap="small">
3
+ <s-avatar initials="3P" alt="3PL partner" size="small"></s-avatar>
4
+ <s-text>Third-party logistics</s-text>
5
+ </s-stack>
6
+ <s-stack direction="inline" gap="small">
7
+ <s-avatar initials="DS" alt="Dropship supplier" size="small"></s-avatar>
8
+ <s-text>Dropship supplier</s-text>
9
+ </s-stack>
10
+ <s-stack direction="inline" gap="small">
11
+ <s-avatar initials="WH" alt="Warehouse hub" size="small"></s-avatar>
12
+ <s-text>Warehouse hub</s-text>
13
+ </s-stack>
14
+ </s-stack>
@@ -0,0 +1,24 @@
1
+ <s-stack gap="base">
2
+ <s-stack direction="inline" gap="small">
3
+ <s-avatar
4
+ src="/customers/merchant-alice.jpg"
5
+ initials="AJ"
6
+ alt="Alice's jewelry store"
7
+ size="small"
8
+ ></s-avatar>
9
+ <s-text>Alice's jewelry store</s-text>
10
+ </s-stack>
11
+ <s-stack direction="inline" gap="small">
12
+ <s-avatar initials="BP" alt="Bob's pet supplies" size="small"></s-avatar>
13
+ <s-text>Bob's pet supplies</s-text>
14
+ </s-stack>
15
+ <s-stack direction="inline" gap="small">
16
+ <s-avatar
17
+ src="/customers/charlie-cafe.jpg"
18
+ initials="CC"
19
+ alt="Charlie's coffee corner"
20
+ size="small"
21
+ ></s-avatar>
22
+ <s-text>Charlie's coffee corner</s-text>
23
+ </s-stack>
24
+ </s-stack>
@@ -0,0 +1,5 @@
1
+ <s-stack direction="inline" gap="base">
2
+ <s-avatar initials="TC" alt="Tech customer" size="base"></s-avatar>
3
+ <s-avatar initials="VIP" alt="VIP customer store" size="base"></s-avatar>
4
+ <s-avatar initials="SHOP" alt="Shopify partner store" size="base"></s-avatar>
5
+ </s-stack>
@@ -0,0 +1,7 @@
1
+ <s-stack direction="inline" gap="base">
2
+ <s-avatar initials="SC" alt="Store customer" size="small-200"></s-avatar>
3
+ <s-avatar initials="MR" alt="Merchant representative" size="small"></s-avatar>
4
+ <s-avatar initials="SM" alt="Store manager" size="base"></s-avatar>
5
+ <s-avatar initials="SF" alt="Staff member" size="large"></s-avatar>
6
+ <s-avatar initials="SO" alt="Store owner" size="large-200"></s-avatar>
7
+ </s-stack>
@@ -0,0 +1,10 @@
1
+ <s-stack direction="inline" gap="large">
2
+ <s-avatar
3
+ src="/staff/manager-profile.jpg"
4
+ initials="SM"
5
+ alt="Store manager"
6
+ size="large"
7
+ ></s-avatar>
8
+ <s-avatar initials="CS" alt="Customer service rep" size="base"></s-avatar>
9
+ <s-avatar initials="FT" alt="Fulfillment team lead" size="small"></s-avatar>
10
+ </s-stack>
@@ -0,0 +1,6 @@
1
+ <s-avatar
2
+ src="/customers/profile-123.jpg"
3
+ initials="MR"
4
+ alt="Maria Rodriguez"
5
+ size="base"
6
+ ></s-avatar>
@@ -0,0 +1,17 @@
1
+ <s-section>
2
+ <s-stack gap="base">
3
+ <s-stack direction="inline" gap="small">
4
+ <s-avatar
5
+ src="/merchants/premium-store.jpg"
6
+ initials="PS"
7
+ alt="Premium store"
8
+ size="base"
9
+ ></s-avatar>
10
+ <s-stack gap="small-400">
11
+ <s-heading>Premium store</s-heading>
12
+ <s-text color="subdued">Shopify Plus merchant</s-text>
13
+ </s-stack>
14
+ </s-stack>
15
+ <s-text>Monthly revenue: $45,000</s-text>
16
+ </s-stack>
17
+ </s-section>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -0,0 +1,3 @@
1
+ <s-chip color="base" accessibilityLabel="Product status indicator">
2
+ Active
3
+ </s-chip>
@@ -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>
@@ -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>
@@ -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,0 +1,4 @@
1
+ <s-chip color="strong" accessibilityLabel="Product category">
2
+ <s-icon slot="graphic" type="catalog-product" size="small"></s-icon>
3
+ Electronics
4
+ </s-chip>
@@ -0,0 +1 @@
1
+ <s-heading>Product details</s-heading>
@@ -0,0 +1,3 @@
1
+ <s-heading accessibilityRole="presentation" accessibilityVisibility="hidden">
2
+ Sale badge
3
+ </s-heading>
@@ -0,0 +1,5 @@
1
+ <s-box inlineSize="200px">
2
+ <s-heading lineClamp="2">
3
+ Premium organic cotton t-shirt with sustainable manufacturing practices
4
+ </s-heading>
5
+ </s-box>
@@ -0,0 +1,12 @@
1
+ <s-section>
2
+ <s-heading>Order information</s-heading>
3
+ <!-- Renders as h2 -->
4
+ <s-section>
5
+ <s-heading>Shipping details</s-heading>
6
+ <!-- Renders as h3 -->
7
+ <s-section>
8
+ <s-heading>Tracking updates</s-heading>
9
+ <!-- Renders as h4 -->
10
+ </s-section>
11
+ </s-section>
12
+ </s-section>
@@ -0,0 +1,7 @@
1
+ <s-stack direction="inline" gap="base">
2
+ <s-icon type="home"></s-icon>
3
+ <s-icon type="edit"></s-icon>
4
+ <s-icon type="duplicate"></s-icon>
5
+ <s-icon type="save"></s-icon>
6
+ <s-icon type="export"></s-icon>
7
+ </s-stack>
@@ -0,0 +1,4 @@
1
+ <s-stack direction="inline" gap="base">
2
+ <s-badge tone="success" icon="check-circle">Active</s-badge>
3
+ <s-badge tone="warning" icon="alert-triangle">Pending</s-badge>
4
+ </s-stack>
@@ -0,0 +1,6 @@
1
+ <s-button-group>
2
+ <s-button slot="secondary-actions" icon="plus">Add product</s-button>
3
+ <s-button slot="secondary-actions" icon="delete" tone="critical">
4
+ Delete
5
+ </s-button>
6
+ </s-button-group>
@@ -0,0 +1 @@
1
+ <s-icon type="search" size="small"></s-icon>
@@ -0,0 +1 @@
1
+ <s-icon type="question-circle" color="subdued"></s-icon>
@@ -0,0 +1 @@
1
+ <s-icon type="settings" id="settings-icon"></s-icon>
@@ -0,0 +1 @@
1
+ <s-icon type="delete" tone="critical" interestFor="delete-button-1"></s-icon>
@@ -0,0 +1,6 @@
1
+ <s-stack direction="inline" gap="base">
2
+ <s-icon type="alert-circle" tone="warning"></s-icon>
3
+ <s-icon type="check-circle" tone="success"></s-icon>
4
+ <s-icon type="info" tone="info"></s-icon>
5
+ <s-icon type="alert-triangle" tone="caution"></s-icon>
6
+ </s-stack>
@@ -0,0 +1,5 @@
1
+ <s-image
2
+ src="/images/product.webp"
3
+ alt="Product image"
4
+ inlineSize="auto"
5
+ ></s-image>
@@ -0,0 +1 @@
1
+ <s-image src="/images/product.webp" alt="Product image"></s-image>
@@ -0,0 +1,7 @@
1
+ <!-- This image will be ignored by screen readers -->
2
+ <s-image
3
+ src="/images/product.webp"
4
+ alt=""
5
+ accessibilityRole="presentation"
6
+ objectFit="cover"
7
+ ></s-image>
@@ -0,0 +1,9 @@
1
+ <s-image
2
+ src="/images/product.webp"
3
+ srcSet="/images/product.webp 400w,
4
+ /images/product.webp 800w"
5
+ sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 400px"
6
+ alt="Product detail"
7
+ aspectRatio="16/9"
8
+ objectFit="cover"
9
+ ></s-image>
@@ -0,0 +1,7 @@
1
+ <s-image
2
+ src="/images/product.webp"
3
+ alt="Featured product"
4
+ aspectRatio="16/9"
5
+ objectFit="cover"
6
+ loading="lazy"
7
+ ></s-image>
@@ -0,0 +1,12 @@
1
+ <s-box inlineSize="300px">
2
+ <s-image
3
+ src="/images/product.webp"
4
+ alt="Product thumbnail"
5
+ borderWidth="large"
6
+ borderStyle="solid"
7
+ borderColor="strong"
8
+ borderRadius="large"
9
+ objectFit="cover"
10
+ aspectRatio="1/1"
11
+ ></s-image>
12
+ </s-box>
@@ -0,0 +1,26 @@
1
+ <s-grid gridTemplateColumns="repeat(3, 150px)" gap="base" alignItems="center">
2
+ <s-image
3
+ src="/images/product.webp"
4
+ alt="Main view"
5
+ aspectRatio="1/1"
6
+ objectFit="cover"
7
+ borderRadius="base"
8
+ inlineSize="fill"
9
+ ></s-image>
10
+ <s-image
11
+ src="/images/product.webp"
12
+ alt="Side view"
13
+ aspectRatio="1/1"
14
+ objectFit="cover"
15
+ borderRadius="base"
16
+ inlineSize="fill"
17
+ ></s-image>
18
+ <s-image
19
+ src="/images/product.webp"
20
+ alt="Detail view"
21
+ aspectRatio="1/1"
22
+ objectFit="cover"
23
+ borderRadius="base"
24
+ inlineSize="fill"
25
+ ></s-image>
26
+ </s-grid>
@@ -0,0 +1,21 @@
1
+ <s-section>
2
+ <s-paragraph tone="success" color="base">
3
+ Payment successfully processed and order confirmed.
4
+ </s-paragraph>
5
+
6
+ <s-paragraph tone="warning" color="base">
7
+ Inventory levels are running low for this product.
8
+ </s-paragraph>
9
+
10
+ <s-paragraph tone="critical" color="base">
11
+ This order requires immediate attention due to shipping delays.
12
+ </s-paragraph>
13
+
14
+ <s-paragraph tone="info" color="base">
15
+ Customer requested gift wrapping for this order.
16
+ </s-paragraph>
17
+
18
+ <s-paragraph tone="caution" color="base">
19
+ Review shipping address before processing.
20
+ </s-paragraph>
21
+ </s-section>
@@ -0,0 +1,3 @@
1
+ <s-paragraph>
2
+ Track inventory across all your retail locations in real-time.
3
+ </s-paragraph>
@@ -0,0 +1,8 @@
1
+ <s-box inlineSize="300px">
2
+ <s-paragraph lineClamp="1">
3
+ Premium organic cotton t-shirt featuring sustainable manufacturing
4
+ processes, ethically sourced materials, and carbon-neutral shipping.
5
+ Available in multiple colors and sizes with customization options for your
6
+ brand.
7
+ </s-paragraph>
8
+ </s-box>
@@ -0,0 +1 @@
1
+ <s-paragraph dir="rtl">محتوى النص باللغة العربية</s-paragraph>
@@ -0,0 +1,3 @@
1
+ <s-paragraph accessibilityVisibility="exclusive">
2
+ Table sorted by date, newest first.
3
+ </s-paragraph>
@@ -0,0 +1,3 @@
1
+ <s-paragraph fontVariantNumeric="tabular-nums">
2
+ Orders: 1,234 Revenue: $45,678.90 Customers: 890
3
+ </s-paragraph>
@@ -0,0 +1,9 @@
1
+ <s-section>
2
+ <s-paragraph tone="info" color="base">
3
+ Your order will be processed within 2-3 business days.
4
+ </s-paragraph>
5
+
6
+ <s-paragraph tone="success" color="subdued">
7
+ Payment successfully processed.
8
+ </s-paragraph>
9
+ </s-section>
@@ -0,0 +1 @@
1
+ <s-text accessibility-visibility="exclusive">Product prices include tax</s-text>
@@ -0,0 +1 @@
1
+ <s-text>Manage your products and inventory from one dashboard.</s-text>
@@ -0,0 +1,6 @@
1
+ <s-tooltip id="sku-tooltip">
2
+ SKU must be unique across all products and cannot be changed after creation
3
+ </s-tooltip>
4
+ <s-text color="subdued" interestFor="sku-tooltip">
5
+ What is a product SKU?
6
+ </s-text>
@@ -0,0 +1 @@
1
+ <s-text dir="rtl">محتوى النص باللغة العربية</s-text>
@@ -0,0 +1 @@
1
+ <s-text type="address">123 Commerce Street, Toronto, ON M5V 2H1</s-text>
@@ -0,0 +1,5 @@
1
+ <s-stack gap="small">
2
+ <s-text tone="success">Order fulfilled</s-text>
3
+ <s-text tone="critical">Payment failed</s-text>
4
+ <s-text tone="warning">Low inventory</s-text>
5
+ </s-stack>
@@ -0,0 +1 @@
1
+ <s-text type="strong">Free shipping on orders over $50</s-text>
@@ -0,0 +1 @@
1
+ <s-text color="subdued">Last updated 2 hours ago</s-text>
@@ -0,0 +1 @@
1
+ <s-text fontVariantNumeric="tabular-nums">$1,234.56</s-text>
@@ -0,0 +1,5 @@
1
+ <s-thumbnail
2
+ src="https://fakestoreapi.com/img/61U7T1koQqL._AC_SX679_t.png"
3
+ alt="Product preview"
4
+ size="base"
5
+ ></s-thumbnail>
@@ -0,0 +1,17 @@
1
+ <s-stack gap="large-100">
2
+ <s-thumbnail
3
+ src="https://fakestoreapi.com/img/61U7T1koQqL._AC_SX679_t.png"
4
+ alt="Small thumbnail"
5
+ size="small-200"
6
+ ></s-thumbnail>
7
+ <s-thumbnail
8
+ src="https://fakestoreapi.com/img/61U7T1koQqL._AC_SX679_t.png"
9
+ alt="Base thumbnail"
10
+ size="base"
11
+ ></s-thumbnail>
12
+ <s-thumbnail
13
+ src="https://fakestoreapi.com/img/61U7T1koQqL._AC_SX679_t.png"
14
+ alt="Large thumbnail"
15
+ size="large"
16
+ ></s-thumbnail>
17
+ </s-stack>
@@ -0,0 +1 @@
1
+ <s-thumbnail alt="No image available" size="base"></s-thumbnail>
@@ -0,0 +1,6 @@
1
+ <!-- Event handlers can be attached via JavaScript -->
2
+ <s-thumbnail
3
+ src="https://fakestoreapi.com/img/61U7T1koQqL._AC_SX679_t.png"
4
+ alt="Product"
5
+ size="base"
6
+ ></s-thumbnail>
@@ -2,23 +2,44 @@ import type {CSSProperties} from 'react';
2
2
  import {
3
3
  ReferenceEntityTemplateSchema,
4
4
  CodeTabType,
5
+ ExampleType,
6
+ ExampleSectionSchema,
7
+ ExampleGroupType,
5
8
  } from '@shopify/generate-docs';
6
9
 
7
10
  // Don't allow all CSS properties to be used in the customStyles property
8
11
  type AllowedCSSProperties = Pick<CSSProperties, 'minHeight' | 'minBlockSize'>;
9
12
 
13
+ type AdminCodeTabType = CodeTabType & {
14
+ layout?: string;
15
+ customStyles?: AllowedCSSProperties;
16
+ };
17
+
18
+ interface CodeLinkType {
19
+ name: string;
20
+ url: string;
21
+ icon: string;
22
+ }
23
+
24
+ interface AdminCodeblockType {
25
+ title: string;
26
+ tabs: AdminCodeTabType[];
27
+ links?: CodeLinkType[];
28
+ }
29
+
30
+ type AdminExampleType = Omit<ExampleType, 'codeblock'> & {
31
+ codeblock: AdminCodeblockType | AdminCodeblockType[];
32
+ };
33
+
34
+ type AdminExampleGroupType = Omit<ExampleGroupType, 'examples'> & {
35
+ examples: AdminExampleType[];
36
+ };
37
+
10
38
  export interface AdminReferenceEntityTemplateSchema
11
- extends Omit<ReferenceEntityTemplateSchema, 'defaultExample'> {
12
- defaultExample?: Omit<
13
- NonNullable<ReferenceEntityTemplateSchema['defaultExample']>,
14
- 'codeblock'
15
- > & {
16
- codeblock?: {
17
- title: string;
18
- tabs: (CodeTabType & {
19
- layout?: string;
20
- customStyles?: AllowedCSSProperties;
21
- })[];
22
- };
39
+ extends Omit<ReferenceEntityTemplateSchema, 'defaultExample' | 'examples'> {
40
+ defaultExample?: AdminExampleType;
41
+ examples?: Omit<ExampleSectionSchema, 'exampleGroups' | 'examples'> & {
42
+ exampleGroups?: AdminExampleGroupType[] | null;
43
+ examples?: AdminExampleType[] | null;
23
44
  };
24
45
  }
@@ -111,7 +111,7 @@ export interface StandardApi<Target extends ExtensionTarget = ExtensionTarget> {
111
111
  *
112
112
  * - Use noun + past tense verb format. For example, \`Changes saved\`.
113
113
  *
114
- * For errors, or information that needs to persist on the page, use a [banner](/docs/api/checkout-ui-extensions/unstable/components/feedback/banner) component.
114
+ * For errors, or information that needs to persist on the page, use a [banner](/docs/api/checkout-ui-extensions/polaris-web-components/feedback/banner) component.
115
115
  */
116
116
  toast: ToastApi;
117
117
 
@@ -21,16 +21,6 @@ export interface NavigationHistoryEntry {
21
21
  getState(): unknown;
22
22
  }
23
23
 
24
- /**
25
- * The NavigationCurrentEntryChangeEvent interface of the Navigation API is the event object for the currententrychange event, which fires when the Navigation.currentEntry has changed.
26
- */
27
- export interface NavigationCurrentEntryChangeEvent {
28
- /**
29
- * Returns the NavigationHistoryEntry that was navigated from.
30
- */
31
- from: NavigationHistoryEntry;
32
- }
33
-
34
24
  export interface Navigation {
35
25
  /**
36
26
  * The navigate() method navigates to a specific URL, updating any provided state in the history entries list.
@@ -44,12 +34,4 @@ export interface Navigation {
44
34
  * The back() method of the Navigation interface navigates to the previous entry in the history list.
45
35
  */
46
36
  back(): void;
47
- addEventListener(
48
- type: 'currententrychange',
49
- cb: (event: NavigationCurrentEntryChangeEvent) => void,
50
- ): void;
51
- removeEventListener(
52
- type: 'currententrychange',
53
- cb: (event: NavigationCurrentEntryChangeEvent) => void,
54
- ): void;
55
37
  }