@shopify/ui-extensions 2025.10.2 → 2025.10.4

package/src/surfaces/admin/components/patterns/examples/indexTable.jsx

@@ -0,0 +1,140 @@
+<s-section padding="none" accessibilityLabel="Puzzles table section">
+  <s-table>
+    <s-grid slot="filters" gap="small-200" gridTemplateColumns="1fr auto">
+      <s-text-field
+        label="Search puzzles"
+        labelAccessibilityVisibility="exclusive"
+        icon="search"
+        placeholder="Searching all puzzles"
+       />
+      <s-button
+        icon="sort"
+        variant="secondary"
+        accessibilityLabel="Sort"
+        interestFor="sort-tooltip"
+        commandFor="sort-actions"
+       />
+      <s-tooltip id="sort-tooltip">
+        <s-text>Sort</s-text>
+      </s-tooltip>
+      <s-popover id="sort-actions">
+        <s-stack gap="none">
+          <s-box padding="small">
+            <s-choice-list label="Sort by" name="Sort by">
+              <s-choice value="puzzle-name" selected>
+                Puzzle name
+              </s-choice>
+              <s-choice value="pieces">Pieces</s-choice>
+              <s-choice value="created">Created</s-choice>
+              <s-choice value="status">Status</s-choice>
+            </s-choice-list>
+          </s-box>
+          <s-divider />
+          <s-box padding="small">
+            <s-choice-list label="Order by" name="Order by">
+              <s-choice value="product-title" selected>
+                A-Z
+              </s-choice>
+              <s-choice value="created">Z-A</s-choice>
+            </s-choice-list>
+          </s-box>
+        </s-stack>
+      </s-popover>
+    </s-grid>
+    <s-table-header-row>
+      <s-table-header listSlot="primary">Puzzle</s-table-header>
+      <s-table-header format="numeric">Pieces</s-table-header>
+      <s-table-header>Created</s-table-header>
+      <s-table-header listSlot="secondary">Status</s-table-header>
+    </s-table-header-row>
+    <s-table-body>
+      <s-table-row clickDelegate="mountain-view-checkbox">
+        <s-table-cell>
+          <s-stack direction="inline" gap="small" alignItems="center">
+            <s-checkbox id="mountain-view-checkbox" />
+            <s-clickable
+              href=""
+              accessibilityLabel="Mountain View puzzle thumbnail"
+              border="base"
+              borderRadius="base"
+              overflow="hidden"
+              inlineSize="40px"
+              blockSize="40px"
+            >
+              <s-image
+                objectFit="cover"
+                src="https://picsum.photos/id/29/80/80"
+               />
+            </s-clickable>
+            <s-link href="">Mountain View</s-link>
+          </s-stack>
+        </s-table-cell>
+        <s-table-cell>16</s-table-cell>
+        <s-table-cell>Today</s-table-cell>
+        <s-table-cell>
+          <s-badge color="base" tone="success">
+            Active
+          </s-badge>
+        </s-table-cell>
+      </s-table-row>
+      <s-table-row clickDelegate="ocean-sunset-checkbox">
+        <s-table-cell>
+          <s-stack direction="inline" gap="small" alignItems="center">
+            <s-checkbox id="ocean-sunset-checkbox" />
+            <s-clickable
+              href=""
+              accessibilityLabel="Ocean Sunset puzzle thumbnail"
+              border="base"
+              borderRadius="base"
+              overflow="hidden"
+              inlineSize="40px"
+              blockSize="40px"
+            >
+              <s-image
+                objectFit="cover"
+                src="https://picsum.photos/id/12/80/80"
+               />
+            </s-clickable>
+            <s-link href="">Ocean Sunset</s-link>
+          </s-stack>
+        </s-table-cell>
+        <s-table-cell>9</s-table-cell>
+        <s-table-cell>Yesterday</s-table-cell>
+        <s-table-cell>
+          <s-badge color="base" tone="success">
+            Active
+          </s-badge>
+        </s-table-cell>
+      </s-table-row>
+      <s-table-row clickDelegate="forest-animals-checkbox">
+        <s-table-cell>
+          <s-stack direction="inline" gap="small" alignItems="center">
+            <s-checkbox id="forest-animals-checkbox" />
+            <s-clickable
+              href=""
+              accessibilityLabel="Forest Animals puzzle thumbnail"
+              border="base"
+              borderRadius="base"
+              overflow="hidden"
+              inlineSize="40px"
+              blockSize="40px"
+            >
+              <s-image
+                objectFit="cover"
+                src="https://picsum.photos/id/324/80/80"
+               />
+            </s-clickable>
+            <s-link href="">Forest Animals</s-link>
+          </s-stack>
+        </s-table-cell>
+        <s-table-cell>25</s-table-cell>
+        <s-table-cell>Last week</s-table-cell>
+        <s-table-cell>
+          <s-badge color="base" tone="neutral">
+            Draft
+          </s-badge>
+        </s-table-cell>
+      </s-table-row>
+    </s-table-body>
+  </s-table>
+</s-section>

package/src/surfaces/admin/components/patterns/examples/interstitialNav.jsx

@@ -0,0 +1,55 @@
+<s-section heading="Preferences">
+  <s-box border="base" borderRadius="base">
+    <s-clickable
+      padding="small-100"
+      href="#"
+      accessibilityLabel="Configure shipping methods, rates, and fulfillment options"
+    >
+      <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
+        <s-box>
+          <s-heading>Shipping & fulfillment</s-heading>
+          <s-paragraph color="subdued">
+            Shipping methods, rates, zones, and fulfillment preferences.
+          </s-paragraph>
+        </s-box>
+        <s-icon type="chevron-right" />
+      </s-grid>
+    </s-clickable>
+    <s-box paddingInline="small-100">
+      <s-divider />
+    </s-box>
+    <s-clickable
+      padding="small-100"
+      href="#"
+      accessibilityLabel="Configure product defaults, customer experience, and catalog settings"
+    >
+      <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
+        <s-box>
+          <s-heading>Products & catalog</s-heading>
+          <s-paragraph color="subdued">
+            Product defaults, customer experience, and catalog display options.
+          </s-paragraph>
+        </s-box>
+        <s-icon type="chevron-right" />
+      </s-grid>
+    </s-clickable>
+    <s-box paddingInline="small-100">
+      <s-divider />
+    </s-box>
+    <s-clickable
+      padding="small-100"
+      href="#"
+      accessibilityLabel="Manage customer support settings and help resources"
+    >
+      <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
+        <s-box>
+          <s-heading>Customer support</s-heading>
+          <s-paragraph color="subdued">
+            Support settings, help resources, and customer service tools.
+          </s-paragraph>
+        </s-box>
+        <s-icon type="chevron-right" />
+      </s-grid>
+    </s-clickable>
+  </s-box>
+</s-section>

package/src/surfaces/admin/components/patterns/examples/mediaCard.html

@@ -1,5 +1,5 @@
 <s-box border="base" borderRadius="base" overflow="hidden" maxInlineSize="216px">
-  <s-clickable href="" accessibilityLabel="4-pieces puzzle template">
+  <s-clickable href="">
     <s-image
       aspectRatio="1/1"
       objectFit="cover"

package/src/surfaces/admin/components/patterns/examples/mediaCard.jsx

@@ -0,0 +1,28 @@
+<s-box
+  border="base"
+  borderRadius="base"
+  overflow="hidden"
+  maxInlineSize="216px"
+>
+  <s-clickable href="">
+    <s-image
+      aspectRatio="1/1"
+      objectFit="cover"
+      alt="Illustration of characters with a 4-piece puzzle"
+      src="https://cdn.shopify.com/static/images/polaris/patterns/4-pieces.png"
+     />
+  </s-clickable>
+  <s-divider />
+  <s-grid
+    gridTemplateColumns="1fr auto"
+    background="base"
+    padding="small"
+    gap="small"
+    alignItems="center"
+  >
+    <s-heading>4-Pieces</s-heading>
+    <s-button href="" accessibilityLabel="View 4-pieces puzzle template">
+      View
+    </s-button>
+  </s-grid>
+</s-box>

package/src/surfaces/admin/components/patterns/examples/metricsCard.jsx

@@ -0,0 +1,57 @@
+<s-section padding="base">
+  <s-grid
+    gridTemplateColumns="@container (inline-size <= 400px) 1fr, 1fr auto 1fr auto 1fr"
+    gap="small"
+  >
+    <s-clickable
+      href=""
+      paddingBlock="small-400"
+      paddingInline="small-100"
+      borderRadius="base"
+    >
+      <s-grid gap="small-300">
+        <s-heading>Total Designs</s-heading>
+        <s-stack direction="inline" gap="small-200">
+          <s-text>156</s-text>
+          <s-badge tone="success" icon="arrow-up">
+            {" "}
+            12%{" "}
+          </s-badge>
+        </s-stack>
+      </s-grid>
+    </s-clickable>
+    <s-divider direction="block" />
+    <s-clickable
+      href=""
+      paddingBlock="small-400"
+      paddingInline="small-100"
+      borderRadius="base"
+    >
+      <s-grid gap="small-300">
+        <s-heading>Units Sold</s-heading>
+        <s-stack direction="inline" gap="small-200">
+          <s-text>2,847</s-text>
+          <s-badge tone="warning">0%</s-badge>
+        </s-stack>
+      </s-grid>
+    </s-clickable>
+    <s-divider direction="block" />
+    <s-clickable
+      href=""
+      paddingBlock="small-400"
+      paddingInline="small-100"
+      borderRadius="base"
+    >
+      <s-grid gap="small-300">
+        <s-heading>Return Rate</s-heading>
+        <s-stack direction="inline" gap="small-200">
+          <s-text>3.2%</s-text>
+          <s-badge tone="critical" icon="arrow-down">
+            {" "}
+            0.8%{" "}
+          </s-badge>
+        </s-stack>
+      </s-grid>
+    </s-clickable>
+  </s-grid>
+</s-section>

package/src/surfaces/admin/components/patterns/examples/resourceList.html

@@ -0,0 +1,58 @@
+<s-section padding="none">
+  <s-stack gap="small-200">
+    <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center" paddingInline="base" paddingBlockStart="base">
+      <s-grid gridTemplateColumns="1fr auto" gap="small-200" alignItems="center">
+        <s-text-field icon="search" placeholder="Filter customers"></s-text-field>
+        <s-button commandFor="tagged-with">Tagged with</s-button>
+        <s-popover id="tagged-with">
+          <s-stack gap="small-200" padding="small-200">
+            <s-text-field value="VIP" placeholder="Add tag"></s-text-field>
+            <s-link href="">Clear</s-link>
+          </s-stack>
+        </s-popover>
+      </s-grid>
+      <s-button variant="secondary">Save</s-button>
+    </s-grid>
+
+    <s-stack direction="inline"  gap="small-400" paddingInline="base">
+      <s-clickable-chip removable>Tagged with VIP</s-clickable-chip>
+    </s-stack>
+    
+    <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center" paddingInline="base">
+      <s-checkbox label="Showing 2 customers"></s-checkbox>
+      <s-select>
+        <s-option value="newest">Newest update</s-option>
+        <s-option value="oldest">Oldest update</s-option>
+      </s-select>
+    </s-grid>
+    
+    <s-stack>
+      <s-clickable borderStyle="solid none none none" border="base" paddingInline="base" paddingBlock="small">
+        <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
+          <s-stack direction="inline" gap="small" alignItems="center">
+            <s-checkbox></s-checkbox>
+            <s-avatar></s-avatar>
+            <s-stack>
+              <s-heading>Mae Jemison</s-heading>
+              <s-text>Decatur, USA</s-text>
+            </s-stack>
+          </s-stack>
+          <s-button icon="menu-horizontal" variant="tertiary" accessibilityLabel="Actions for Mae Jemison"></s-button>
+        </s-grid>
+      </s-clickable>
+      <s-clickable borderStyle="solid none none none" border="base" paddingInline="base" paddingBlock="small">
+        <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
+          <s-stack direction="inline" gap="small" alignItems="center">
+            <s-checkbox></s-checkbox>
+            <s-avatar></s-avatar>
+            <s-stack>
+              <s-heading>Ellen Ochoa</s-heading>
+              <s-text>Los Angeles, USA</s-text>
+            </s-stack>
+          </s-stack>
+          <s-button icon="menu-horizontal" variant="tertiary" accessibilityLabel="Actions for Ellen Ochoa"></s-button>
+        </s-grid>
+      </s-clickable>
+    </s-stack>
+  </s-stack>
+</s-section>

package/src/surfaces/admin/components/patterns/examples/resourceList.jsx

@@ -0,0 +1,58 @@
+<s-section padding="none">
+  <s-stack gap="small-200">
+    <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center" paddingInline="base" paddingBlockStart="base">
+      <s-grid gridTemplateColumns="1fr auto" gap="small-200" alignItems="center">
+        <s-text-field icon="search" placeholder="Filter customers"></s-text-field>
+        <s-button commandFor="tagged-with">Tagged with</s-button>
+        <s-popover id="tagged-with">
+          <s-stack gap="small-200" padding="small-200">
+            <s-text-field value="VIP" placeholder="Add tag"></s-text-field>
+            <s-link href="">Clear</s-link>
+          </s-stack>
+        </s-popover>
+      </s-grid>
+      <s-button variant="secondary">Save</s-button>
+    </s-grid>
+
+    <s-stack direction="inline"  gap="small-400" paddingInline="base">
+      <s-clickable-chip removable>Tagged with VIP</s-clickable-chip>
+    </s-stack>
+    
+    <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center" paddingInline="base">
+      <s-checkbox label="Showing 2 customers"></s-checkbox>
+      <s-select>
+        <s-option value="newest">Newest update</s-option>
+        <s-option value="oldest">Oldest update</s-option>
+      </s-select>
+    </s-grid>
+    
+    <s-stack>
+      <s-clickable borderStyle="solid none none none" border="base" paddingInline="base" paddingBlock="small">
+        <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
+          <s-stack direction="inline" gap="small" alignItems="center">
+            <s-checkbox></s-checkbox>
+            <s-avatar></s-avatar>
+            <s-stack>
+              <s-heading>Mae Jemison</s-heading>
+              <s-text>Decatur, USA</s-text>
+            </s-stack>
+          </s-stack>
+          <s-button icon="menu-horizontal" variant="tertiary" accessibilityLabel="Actions for Mae Jemison"></s-button>
+        </s-grid>
+      </s-clickable>
+      <s-clickable borderStyle="solid none none none" border="base" paddingInline="base" paddingBlock="small">
+        <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
+          <s-stack direction="inline" gap="small" alignItems="center">
+            <s-checkbox></s-checkbox>
+            <s-avatar></s-avatar>
+            <s-stack>
+              <s-heading>Ellen Ochoa</s-heading>
+              <s-text>Los Angeles, USA</s-text>
+            </s-stack>
+          </s-stack>
+          <s-button icon="menu-horizontal" variant="tertiary" accessibilityLabel="Actions for Ellen Ochoa"></s-button>
+        </s-grid>
+      </s-clickable>
+    </s-stack>
+  </s-stack>
+</s-section>

package/src/surfaces/admin/components/patterns/examples/settings.jsx

@@ -1,21 +1,15 @@
-// ===
-// Settings page pattern
-// ===
-
-export default function SettingsPage() {
-  const handleFormReset = (event) => {
-    console.log("Handle discarded changes if necessary");
-  };
-
-  const handleFormSubmit = (event) => {
+<form
+  data-save-bar
+  onSubmit={(event) => {
     event.preventDefault();
     const formData = new FormData(event.target);
     const formEntries = Object.fromEntries(formData);
     console.log("Form data", formEntries);
-  };
-
-  return (
-    <form data-save-bar onSubmit={handleFormSubmit} onReset={handleFormReset}>
+  }}
+  onReset={(event) => {
+    console.log("Handle discarded changes if necessary");
+  }}
+>
       <s-page heading="Settings" inlineSize="small">
         {/* === */}
         {/* Store Information */}
@@ -40,7 +34,9 @@ export default function SettingsPage() {
             placeholder="Enter phone number"
           />
           <s-choice-list label="Primary currency" name="currency">
-            <s-choice value="usd" selected>US Dollar ($)</s-choice>
+            <s-choice value="usd" selected>
+              US Dollar ($)
+            </s-choice>
             <s-choice value="cad">Canadian Dollar (CAD)</s-choice>
             <s-choice value="eur">Euro (€)</s-choice>
           </s-choice-list>
@@ -80,10 +76,7 @@ export default function SettingsPage() {
         {/* Preferences */}
         {/* === */}
         <s-section heading="Preferences">
-        <s-box
-            border="base"
-            borderRadius="base"
-          >
+          <s-box border="base" borderRadius="base">
             <s-clickable
               padding="small-100"
               href="/app/settings/shipping"
@@ -100,11 +93,11 @@ export default function SettingsPage() {
                     Shipping methods, rates, zones, and fulfillment preferences.
                   </s-paragraph>
                 </s-box>
-                <s-icon type="chevron-right"></s-icon>
+                <s-icon type="chevron-right" />
               </s-grid>
             </s-clickable>
             <s-box paddingInline="small-100">
-              <s-divider></s-divider>
+              <s-divider />
             </s-box>
 
             <s-clickable
@@ -124,11 +117,11 @@ export default function SettingsPage() {
                     options.
                   </s-paragraph>
                 </s-box>
-                <s-icon type="chevron-right"></s-icon>
+                <s-icon type="chevron-right" />
               </s-grid>
             </s-clickable>
             <s-box paddingInline="small-100">
-              <s-divider></s-divider>
+              <s-divider />
             </s-box>
 
             <s-clickable
@@ -148,7 +141,7 @@ export default function SettingsPage() {
                     tools.
                   </s-paragraph>
                 </s-box>
-                <s-icon type="chevron-right"></s-icon>
+                <s-icon type="chevron-right" />
               </s-grid>
             </s-clickable>
           </s-box>
@@ -181,7 +174,7 @@ export default function SettingsPage() {
               </s-grid>
             </s-box>
             <s-box paddingInline="small-100">
-              <s-divider></s-divider>
+              <s-divider />
             </s-box>
 
             <s-box padding="small-100">
@@ -200,8 +193,6 @@ export default function SettingsPage() {
               </s-grid>
             </s-box>
           </s-stack>
-        </s-section>
-      </s-page>
-    </form>
-  );
-}
+      </s-section>
+  </s-page>
+</form>

package/src/surfaces/admin/components/patterns/examples/setupGuide.jsx

@@ -0,0 +1,101 @@
+<s-section>
+  <s-grid gap="base">
+    <s-grid gap="small-200">
+      <s-grid
+        gridTemplateColumns="1fr auto auto"
+        gap="small-300"
+        alignItems="center"
+      >
+        <s-heading>Setup Guide</s-heading>
+        <s-button
+          accessibilityLabel="Dismiss Guide"
+          variant="tertiary"
+          tone="neutral"
+          icon="x"
+         />
+        <s-button
+          accessibilityLabel="Toggle setup guide"
+          variant="tertiary"
+          tone="neutral"
+          icon="chevron-up"
+         />
+      </s-grid>
+      <s-paragraph>
+        Use this personalized guide to get your store ready for sales.
+      </s-paragraph>
+      <s-paragraph color="subdued">0 out of 3 steps completed</s-paragraph>
+    </s-grid>
+    <s-box borderRadius="base" border="base" background="base">
+      <s-box>
+        <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
+          <s-checkbox label="Upload an image for your puzzle" />
+          <s-button
+            accessibilityLabel="Toggle step 1 details"
+            variant="tertiary"
+            icon="chevron-up"
+           />
+        </s-grid>
+        <s-box padding="small" paddingBlockStart="none">
+          <s-box padding="base" background="subdued" borderRadius="base">
+            <s-grid
+              gridTemplateColumns="1fr auto"
+              gap="base"
+              alignItems="center"
+            >
+              <s-grid gap="small-200">
+                <s-paragraph>
+                  Start by uploading a high-quality image that will be used to
+                  create your puzzle. For best results, use images that are at
+                  least 1200x1200 pixels.
+                </s-paragraph>
+                <s-stack direction="inline" gap="small-200">
+                  <s-button variant="primary">Upload image</s-button>
+                  <s-button variant="tertiary" tone="neutral">
+                    {" "}
+                    Image requirements{" "}
+                  </s-button>
+                </s-stack>
+              </s-grid>
+              <s-box maxBlockSize="80px" maxInlineSize="80px">
+                <s-image
+                  src="https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg"
+                  alt="Customize checkout illustration"
+                 />
+              </s-box>
+            </s-grid>
+          </s-box>
+        </s-box>
+      </s-box>
+      <s-divider />
+      <s-box>
+        <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
+          <s-checkbox label="Choose a puzzle template" />
+          <s-button
+            accessibilityLabel="Toggle step 2 details"
+            variant="tertiary"
+            icon="chevron-down"
+           />
+        </s-grid>
+        <s-box
+          padding="small"
+          paddingBlockStart="none"
+         />
+      </s-box>
+      <s-divider />
+      <s-box>
+        <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
+          <s-checkbox label="Customize puzzle piece shapes" />
+          <s-button
+            accessibilityLabel="Toggle step 3 details"
+            variant="tertiary"
+            icon="chevron-down"
+           />
+        </s-grid>
+        <s-box
+          padding="small"
+          paddingBlockStart="none"
+         />
+      </s-box>
+    </s-box>
+  </s-grid>
+</s-section>

package/src/surfaces/admin/components/patterns/index.ab.doc.ts

@@ -54,15 +54,15 @@ const data: ReferenceEntityTemplateSchema = {
       title: 'Index',
       tabs: [
         {
-          title: 'JSX',
-          code: './examples/index.jsx',
-          language: 'jsx',
-        },
-        {
-          title: 'HTML',
+          title: 'html',
           code: './examples/index.html',
           language: 'html',
         },
+        {
+          title: 'jsx',
+          code: './examples/index.jsx',
+          language: 'preview-jsx',
+        },
       ],
     },
   },