@shopify/ui-extensions 2026.1.1 → 2026.1.3

package/src/surfaces/admin/components/patterns/examples/emptyState-nav.html

@@ -0,0 +1,16 @@
+<s-section>
+  <s-stack alignItems="center" padding="large-600">
+    <s-box maxInlineSize="200px">
+      <s-image
+        src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
+        alt="No puzzles illustration"
+        aspectRatio="1/0.5"
+      ></s-image>
+    </s-box>
+    <s-heading>Create your first puzzle</s-heading>
+    <s-paragraph>
+      Get started by creating a puzzle template. You can customize the number of pieces, shape, and difficulty level.
+    </s-paragraph>
+    <s-button href="/app/puzzles/new">Create puzzle</s-button>
+  </s-stack>
+</s-section>

package/src/surfaces/admin/components/patterns/examples/emptyState-nav.jsx

@@ -0,0 +1,16 @@
+<s-section>
+  <s-stack alignItems="center" padding="large-600">
+    <s-box maxInlineSize="200px">
+      <s-image
+        src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
+        alt="No puzzles illustration"
+        aspectRatio="1/0.5"
+      />
+    </s-box>
+    <s-heading>Create your first puzzle</s-heading>
+    <s-paragraph>
+      Get started by creating a puzzle template. You can customize the number of pieces, shape, and difficulty level.
+    </s-paragraph>
+    <s-button href="/app/puzzles/new">Create puzzle</s-button>
+  </s-stack>
+</s-section>

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

@@ -549,6 +549,11 @@
           </s-clickable>
         </s-grid>
       </s-section>
-    </s-page>
+    
+    <!-- Footer help -->
+    <s-stack alignItems="center" paddingBlock="large">
+      <s-text color="subdued">Learn more about <s-link href="https://help.shopify.com" target="_blank">creating engaging puzzles</s-link>.</s-text>
+    </s-stack>
+</s-page>
   </body>
 </html>

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

@@ -662,5 +662,12 @@ return (
           </s-grid>
         </s-section>
       )}
+
+    {/* Footer help */}
+    <s-stack alignItems="center" paddingBlock="large">
+      <s-text color="subdued">
+        Learn more about <s-link href="https://help.shopify.com" target="_blank">creating engaging puzzles</s-link>.
+      </s-text>
+    </s-stack>
 </s-page>
 )

package/src/surfaces/admin/components/patterns/examples/index-intents.html

@@ -0,0 +1,39 @@
+<!-- Empty state with Intents API actions -->
+<!-- Note: Intents require JavaScript to invoke. This HTML shows the UI structure. -->
+<s-section accessibilityLabel="Empty state with intents">
+  <s-grid gap="base" justifyItems="center" paddingBlock="large-400">
+    <s-box maxInlineSize="200px" maxBlockSize="200px">
+      <s-image
+        aspectRatio="1/0.5"
+        src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
+        alt="Illustration showing product creation"
+      ></s-image>
+    </s-box>
+    <s-grid justifyItems="center" maxInlineSize="450px" gap="base">
+      <s-stack alignItems="center">
+        <s-heading>No products yet</s-heading>
+        <s-paragraph>
+          Add products from your Shopify catalog to get started with quality auditing.
+        </s-paragraph>
+      </s-stack>
+      <s-button-group>
+        <s-button slot="secondary-actions">Browse products</s-button>
+        <s-button slot="primary-action">Create product</s-button>
+      </s-button-group>
+    </s-grid>
+  </s-grid>
+</s-section>
+
+<!-- 
+JavaScript usage for the buttons:
+
+// Browse products
+shopify.intents.invoke('browse:shopify/Product');
+
+// Create product
+const activity = await shopify.intents.invoke('create:shopify/Product');
+const response = await activity.complete;
+if (response.code === 'ok') {
+  shopify.toast.show('Product created');
+}
+-->

package/src/surfaces/admin/components/patterns/examples/index-intents.jsx

@@ -0,0 +1,41 @@
+<s-section accessibilityLabel="Empty state with intents">
+  <s-grid gap="base" justifyItems="center" paddingBlock="large-400">
+    <s-box maxInlineSize="200px" maxBlockSize="200px">
+      <s-image
+        aspectRatio="1/0.5"
+        src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
+        alt="Illustration showing product creation"
+      />
+    </s-box>
+    <s-grid justifyItems="center" maxInlineSize="450px" gap="base">
+      <s-stack alignItems="center">
+        <s-heading>No products yet</s-heading>
+        <s-paragraph>
+          Add products from your Shopify catalog to get started with quality auditing.
+        </s-paragraph>
+      </s-stack>
+      <s-button-group>
+        <s-button
+          slot="secondary-actions"
+          onClick={() => {
+            shopify.intents.invoke('browse:shopify/Product');
+          }}
+        >
+          Browse products
+        </s-button>
+        <s-button
+          slot="primary-action"
+          onClick={async () => {
+            const activity = await shopify.intents.invoke('create:shopify/Product');
+            const response = await activity.complete;
+            if (response.code === 'ok') {
+              shopify.toast.show('Product created');
+            }
+          }}
+        >
+          Create product
+        </s-button>
+      </s-button-group>
+    </s-grid>
+  </s-grid>
+</s-section>

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

@@ -61,7 +61,7 @@
               <s-table-cell>
                 <s-stack direction="inline" gap="small" alignItems="center">
                   <s-clickable
-                    href="/app/details"
+                    href="#"
                     accessibilityLabel="Mountain View puzzle thumbnail"
                     border="base"
                     borderRadius="base"
@@ -71,7 +71,7 @@
                   >
                     <s-image objectFit="cover" alt="Mountain View puzzle thumbnail" src="https://picsum.photos/id/29/80/80"></s-image>
                   </s-clickable>
-                  <s-link href="/app/details">Mountain View</s-link>
+                  <s-link href="#">Mountain View</s-link>
                 </s-stack>
               </s-table-cell>
               <s-table-cell>16</s-table-cell>
@@ -84,7 +84,7 @@
               <s-table-cell>
                 <s-stack direction="inline" gap="small" alignItems="center">
                   <s-clickable
-                    href="/app/details"
+                    href="#"
                     accessibilityLabel="Ocean Sunset puzzle thumbnail"
                     border="base"
                     borderRadius="base"
@@ -94,7 +94,7 @@
                   >
                     <s-image objectFit="cover" alt="Ocean Sunset puzzle thumbnail" src="https://picsum.photos/id/12/80/80"></s-image>
                   </s-clickable>
-                  <s-link href="/app/details">Ocean Sunset</s-link>
+                  <s-link href="#">Ocean Sunset</s-link>
                 </s-stack>
               </s-table-cell>
               <s-table-cell>9</s-table-cell>
@@ -107,7 +107,7 @@
               <s-table-cell>
                 <s-stack direction="inline" gap="small" alignItems="center">
                   <s-clickable
-                    href="/app/details"
+                    href="#"
                     accessibilityLabel="Forest Animals puzzle thumbnail"
                     border="base"
                     borderRadius="base"
@@ -117,7 +117,7 @@
                   >
                     <s-image objectFit="cover" alt="Forest Animals puzzle thumbnail" src="https://picsum.photos/id/324/80/80"></s-image>
                   </s-clickable>
-                  <s-link href="/app/details">Forest Animals</s-link>
+                  <s-link href="#">Forest Animals</s-link>
                 </s-stack>
               </s-table-cell>
               <s-table-cell>25</s-table-cell>
@@ -131,6 +131,11 @@
           </s-table-body>
         </s-table>
       </s-section>
-    </s-page>
+    
+    <!-- Footer help -->
+    <s-stack alignItems="center" paddingBlock="large">
+      <s-text color="subdued">Learn more about <s-link href="https://help.shopify.com" target="_blank">improving product quality</s-link>.</s-text>
+    </s-stack>
+</s-page>
   </body>
 </html>

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

@@ -64,7 +64,7 @@
               <s-table-cell>
                 <s-stack direction="inline" gap="small" alignItems="center">
                   <s-clickable
-                    href="/app/details"
+                    href="#"
                     accessibilityLabel="Mountain View puzzle thumbnail"
                     border="base"
                     borderRadius="base"
@@ -78,7 +78,7 @@
                       src="https://picsum.photos/id/29/80/80"
                      />
                   </s-clickable>
-                  <s-link href="/app/details">Mountain View</s-link>
+                  <s-link href="#">Mountain View</s-link>
                 </s-stack>
               </s-table-cell>
               <s-table-cell>16</s-table-cell>
@@ -93,7 +93,7 @@
               <s-table-cell>
                 <s-stack direction="inline" gap="small" alignItems="center">
                   <s-clickable
-                    href="/app/details"
+                    href="#"
                     accessibilityLabel="Ocean Sunset puzzle thumbnail"
                     border="base"
                     borderRadius="base"
@@ -107,7 +107,7 @@
                       src="https://picsum.photos/id/12/80/80"
                      />
                   </s-clickable>
-                  <s-link href="/app/details">Ocean Sunset</s-link>
+                  <s-link href="#">Ocean Sunset</s-link>
                 </s-stack>
               </s-table-cell>
               <s-table-cell>9</s-table-cell>
@@ -122,7 +122,7 @@
               <s-table-cell>
                 <s-stack direction="inline" gap="small" alignItems="center">
                   <s-clickable
-                    href="/app/details"
+                    href="#"
                     accessibilityLabel="Forest Animals puzzle thumbnail"
                     border="base"
                     borderRadius="base"
@@ -136,7 +136,7 @@
                       src="https://picsum.photos/id/324/80/80"
                      />
                   </s-clickable>
-                  <s-link href="/app/details">Forest Animals</s-link>
+                  <s-link href="#">Forest Animals</s-link>
                 </s-stack>
               </s-table-cell>
               <s-table-cell>25</s-table-cell>
@@ -152,4 +152,11 @@
           </s-table-body>
       </s-table>
     </s-section>
+
+    {/* Footer help */}
+    <s-stack alignItems="center" paddingBlock="large">
+      <s-text color="subdued">
+        Learn more about <s-link href="https://help.shopify.com" target="_blank">improving product quality</s-link>.
+      </s-text>
+    </s-stack>
 </s-page>

package/src/surfaces/admin/components/patterns/examples/indexTable-bulk-selection.html

@@ -0,0 +1,109 @@
+<!-- Index table with bulk selection pattern -->
+<!-- This example shows the bulk action bar visible (items selected state) -->
+<s-section padding="none" accessibilityLabel="Puzzles table with bulk selection">
+  <s-table>
+    <!-- Bulk action bar - shown when items are selected -->
+    <s-box slot="filters" padding="small" background="strong">
+      <s-stack direction="inline" gap="base" alignItems="center" justifyContent="space-between">
+        <s-text fontWeight="semibold">2 of 3 selected</s-text>
+        <s-stack direction="inline" gap="small">
+          <s-button variant="secondary">Bulk edit</s-button>
+          <s-button variant="secondary" tone="critical">Delete</s-button>
+        </s-stack>
+      </s-stack>
+    </s-box>
+
+    <s-table-header-row>
+      <s-table-header listSlot="primary">
+        <s-stack direction="inline" gap="small" alignItems="center">
+          <!-- Indeterminate state: some items selected -->
+          <s-checkbox indeterminate accessibilityLabel="Select all puzzles"></s-checkbox>
+          <s-text>Puzzle</s-text>
+        </s-stack>
+      </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>
+      <!-- Selected row -->
+      <s-table-row selected>
+        <s-table-cell>
+          <s-stack direction="inline" gap="small" alignItems="center">
+            <s-checkbox checked accessibilityLabel="Select Mountain View"></s-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-image>
+            </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>
+
+      <!-- Selected row -->
+      <s-table-row selected>
+        <s-table-cell>
+          <s-stack direction="inline" gap="small" alignItems="center">
+            <s-checkbox checked accessibilityLabel="Select Ocean Sunset"></s-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-image>
+            </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>
+
+      <!-- Unselected row -->
+      <s-table-row>
+        <s-table-cell>
+          <s-stack direction="inline" gap="small" alignItems="center">
+            <s-checkbox accessibilityLabel="Select Forest Animals"></s-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-image>
+            </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/indexTable-bulk-selection.jsx

@@ -0,0 +1,131 @@
+const puzzles = [
+  { id: 'mountain-view', name: 'Mountain View', pieces: 16, created: 'Today', status: 'Active', image: 'https://picsum.photos/id/29/80/80' },
+  { id: 'ocean-sunset', name: 'Ocean Sunset', pieces: 9, created: 'Yesterday', status: 'Active', image: 'https://picsum.photos/id/12/80/80' },
+  { id: 'forest-animals', name: 'Forest Animals', pieces: 25, created: 'Last week', status: 'Draft', image: 'https://picsum.photos/id/324/80/80' },
+];
+
+const [selectedIds, setSelectedIds] = useState([]);
+
+const allSelected = selectedIds.length === puzzles.length;
+const someSelected = selectedIds.length > 0 && selectedIds.length < puzzles.length;
+const noneSelected = selectedIds.length === 0;
+
+const handleSelectAll = () => {
+  if (allSelected) {
+    setSelectedIds([]);
+  } else {
+    setSelectedIds(puzzles.map(p => p.id));
+  }
+};
+
+const handleSelectRow = (id) => {
+  if (selectedIds.includes(id)) {
+    setSelectedIds(selectedIds.filter(i => i !== id));
+  } else {
+    setSelectedIds([...selectedIds, id]);
+  }
+};
+
+const handleBulkAction = (action) => {
+  console.log(`${action} items:`, selectedIds);
+  // Perform bulk action here
+};
+
+return (
+  <s-section padding="none" accessibilityLabel="Puzzles table with bulk selection">
+    <s-table>
+      {/* Bulk action bar - appears when items are selected */}
+      {!noneSelected && (
+        <s-box slot="filters" padding="small" background="strong">
+          <s-stack direction="inline" gap="base" alignItems="center" justifyContent="space-between">
+            <s-text fontWeight="semibold">
+              {selectedIds.length} of {puzzles.length} selected
+            </s-text>
+            <s-stack direction="inline" gap="small">
+              <s-button variant="secondary" onClick={() => handleBulkAction('edit')}>
+                Bulk edit
+              </s-button>
+              <s-button variant="secondary" tone="critical" onClick={() => handleBulkAction('delete')}>
+                Delete
+              </s-button>
+            </s-stack>
+          </s-stack>
+        </s-box>
+      )}
+
+      {/* Search filters - hidden when bulk action bar is visible */}
+      {noneSelected && (
+        <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">
+            Sort
+          </s-button>
+        </s-grid>
+      )}
+
+      <s-table-header-row>
+        <s-table-header listSlot="primary">
+          <s-stack direction="inline" gap="small" alignItems="center">
+            <s-checkbox
+              checked={allSelected}
+              indeterminate={someSelected}
+              onChange={handleSelectAll}
+              accessibilityLabel="Select all puzzles"
+            />
+            <s-text>Puzzle</s-text>
+          </s-stack>
+        </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>
+        {puzzles.map((puzzle) => (
+          <s-table-row
+            key={puzzle.id}
+            selected={selectedIds.includes(puzzle.id)}
+            onClick={() => handleSelectRow(puzzle.id)}
+          >
+            <s-table-cell>
+              <s-stack direction="inline" gap="small" alignItems="center">
+                <s-checkbox
+                  checked={selectedIds.includes(puzzle.id)}
+                  onChange={() => handleSelectRow(puzzle.id)}
+                  accessibilityLabel={`Select ${puzzle.name}`}
+                />
+                <s-clickable
+                  href=""
+                  accessibilityLabel={`${puzzle.name} puzzle thumbnail`}
+                  border="base"
+                  borderRadius="base"
+                  overflow="hidden"
+                  inlineSize="40px"
+                  blockSize="40px"
+                >
+                  <s-image objectFit="cover" src={puzzle.image} />
+                </s-clickable>
+                <s-link href="">{puzzle.name}</s-link>
+              </s-stack>
+            </s-table-cell>
+            <s-table-cell>{puzzle.pieces}</s-table-cell>
+            <s-table-cell>{puzzle.created}</s-table-cell>
+            <s-table-cell>
+              <s-badge
+                color="base"
+                tone={puzzle.status === 'Active' ? 'success' : 'neutral'}
+              >
+                {puzzle.status}
+              </s-badge>
+            </s-table-cell>
+          </s-table-row>
+        ))}
+      </s-table-body>
+    </s-table>
+  </s-section>
+);

package/src/surfaces/admin/components/patterns/examples/indexTable-nav.html

@@ -0,0 +1,85 @@
+<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-text-field>
+      <s-button
+        icon="sort"
+        variant="secondary"
+        accessibilityLabel="Sort"
+        commandFor="sort-actions"
+      ></s-button>
+      <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-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 listSlot="secondary">Status</s-table-header>
+    </s-table-header-row>
+    <s-table-body>
+      <s-table-row>
+        <s-table-cell>
+          <s-stack direction="inline" gap="small" alignItems="center">
+            <s-clickable
+              href="/app/puzzles/mountain-view"
+              accessibilityLabel="View Mountain View puzzle"
+              border="base"
+              borderRadius="base"
+              overflow="hidden"
+              inlineSize="40px"
+              blockSize="40px"
+            >
+              <s-image
+                objectFit="cover"
+                src="https://picsum.photos/id/29/80/80"
+              ></s-image>
+            </s-clickable>
+            <s-link href="/app/puzzles/mountain-view">Mountain View</s-link>
+          </s-stack>
+        </s-table-cell>
+        <s-table-cell>16</s-table-cell>
+        <s-table-cell>
+          <s-badge color="base" tone="success">Active</s-badge>
+        </s-table-cell>
+      </s-table-row>
+      <s-table-row>
+        <s-table-cell>
+          <s-stack direction="inline" gap="small" alignItems="center">
+            <s-clickable
+              href="/app/puzzles/ocean-sunset"
+              accessibilityLabel="View Ocean Sunset puzzle"
+              border="base"
+              borderRadius="base"
+              overflow="hidden"
+              inlineSize="40px"
+              blockSize="40px"
+            >
+              <s-image
+                objectFit="cover"
+                src="https://picsum.photos/id/12/80/80"
+              ></s-image>
+            </s-clickable>
+            <s-link href="/app/puzzles/ocean-sunset">Ocean Sunset</s-link>
+          </s-stack>
+        </s-table-cell>
+        <s-table-cell>9</s-table-cell>
+        <s-table-cell>
+          <s-badge color="base" tone="success">Active</s-badge>
+        </s-table-cell>
+      </s-table-row>
+    </s-table-body>
+  </s-table>
+</s-section>