@shopify/ui-extensions 2025.10.0-rc.35 → 2025.10.0-rc.36

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

@@ -30,27 +30,19 @@ export default function IndexPage() {
           </s-box>
           <s-grid
             justifyItems="center"
-            maxBlockSize="450px"
             maxInlineSize="450px"
+            gap="base"
           >
-            <s-heading>Start creating puzzles</s-heading>
-            <s-paragraph>
-              Create and manage your collection of puzzles for players to enjoy.
-            </s-paragraph>
-            <s-stack
-              gap="small-200"
-              justifyContent="center"
-              padding="base"
-              paddingBlockEnd="none"
-              direction="inline"
-            >
-              <s-button aria-label="Learn more about creating puzzles">
-                Learn more
-              </s-button>
-              <s-button variant="primary" aria-label="Add a new puzzle">
-                Create puzzle
-              </s-button>
+            <s-stack alignItems="center">
+              <s-heading>Start creating puzzles</s-heading>
+              <s-paragraph>
+                Create and manage your collection of puzzles for players to enjoy.
+              </s-paragraph>
             </s-stack>
+            <s-button-group>
+              <s-button aria-label="Learn more about creating puzzles"> Learn more </s-button>
+              <s-button variant="primary" aria-label="Add a new puzzle"> Create puzzle </s-button>
+            </s-button-group>
           </s-grid>
         </s-grid>
       </s-section>
@@ -60,10 +52,10 @@ export default function IndexPage() {
       {/* This should only be visible if the merchant has created one or more puzzles. */}
       {/* === */}
       <s-section padding="none" accessibilityLabel="Puzzles table section">
-        <s-table fullwidth>
+        <s-table>
           <s-table-header-row>
             <s-table-header listSlot="primary">Puzzle</s-table-header>
-            <s-table-header>Type</s-table-header>
+            <s-table-header format="numeric">Pieces</s-table-header>
             <s-table-header>Created</s-table-header>
             <s-table-header>Status</s-table-header>
           </s-table-header-row>
@@ -82,13 +74,14 @@ export default function IndexPage() {
                   >
                     <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-stack>
               </s-table-cell>
-              <s-table-cell>16-piece</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">
@@ -110,13 +103,14 @@ export default function IndexPage() {
                   >
                     <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-stack>
               </s-table-cell>
-              <s-table-cell>9-piece</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">
@@ -138,13 +132,14 @@ export default function IndexPage() {
                   >
                     <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-stack>
               </s-table-cell>
-              <s-table-cell>25-piece</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">
@@ -159,4 +154,4 @@ export default function IndexPage() {
       </s-section>
     </s-page>
   );
-}
+}

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

@@ -0,0 +1,132 @@
+<s-section padding="none" accessibilityLabel="Puzzles table section">
+  <s-table>
+    <s-grid slot="filters" gap="small-200" gridTemplateColumns="1fr auto">
+      <s-text-field
+        icon="search"
+        placeholder="Searching all puzzles"
+      ></s-text-field>
+      <s-button
+        icon="sort"
+        variant="secondary"
+        interestFor="sort-tooltip"
+        commandFor="sort-actions"
+      ></s-button>
+      <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-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">
+        <s-stack direction="inline" gap="small-200" alignItems="center">
+          <s-checkbox 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>
+      <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-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>
+      <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-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>
+      <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-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/interstitialNav.html

@@ -0,0 +1,72 @@
+<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-icon>
+      </s-grid>
+    </s-clickable>
+    <s-box paddingInline="small-100">
+      <s-divider></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-icon>
+      </s-grid>
+    </s-clickable>
+    <s-box paddingInline="small-100">
+      <s-divider></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-icon>
+      </s-grid>
+    </s-clickable>
+  </s-box>
+</s-section>

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

@@ -0,0 +1,23 @@
+<s-box border="base" borderRadius="base" overflow="hidden" maxInlineSize="320px">
+  <s-clickable href="" accessibilityLabel="4-pieces puzzle template">
+    <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-image>
+  </s-clickable>
+  <s-divider></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.html

@@ -0,0 +1,51 @@
+<s-section padding="small">
+    <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-divider>
+      <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-divider>
+      <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/settings.html

@@ -1,10 +1,9 @@
-
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script src="https://cdn.shopify.com/shopifycloud/app-bridge-ui-experimental.js"></script>
+    <script src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>
     <title>Pattern</title>
   </head>
   <body>
@@ -18,57 +17,75 @@
         <!-- Store Information -->
         <!-- === -->
         <s-section heading="Store Information">
-            <s-text-field
-              label="Store name"
-              name="store-name"
-              value="Puzzlify Store"
-              placeholder="Enter store name"
-            ></s-text-field>
-            <s-text-field
-              label="Business address"
-              name="business-address"
-              value="123 Main St, Anytown, USA"
-              placeholder="Enter business address"
-            ></s-text-field>
-            <s-text-field
-              label="Store phone"
-              name="store-phone"
-              value="+1 (555) 123-4567"
-              placeholder="Enter phone number"
-            ></s-text-field>
-            <s-choice-list label="Primary currency" name="currency">
-              <s-choice label="US Dollar ($)" value="usd" selected></s-choice>
-              <s-choice label="Canadian Dollar (CAD)" value="cad"></s-choice>
-              <s-choice label="Euro (€)" value="eur"></s-choice>
-            </s-choice-list>
+          <s-text-field
+            label="Store name"
+            name="store-name"
+            value="Puzzlify Store"
+            placeholder="Enter store name"
+          ></s-text-field>
+          <s-text-field
+            label="Business address"
+            name="business-address"
+            value="123 Main St, Anytown, USA"
+            placeholder="Enter business address"
+          ></s-text-field>
+          <s-text-field
+            label="Store phone"
+            name="store-phone"
+            value="+1 (555) 123-4567"
+            placeholder="Enter phone number"
+          ></s-text-field>
+          <s-choice-list label="Primary currency" name="currency">
+            <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>
         </s-section>
         <!-- === -->
         <!-- Notifications -->
         <!-- === -->
         <s-section heading="Notifications">
-            <s-select label="Notification frequency" name="notification-frequency">
-              <s-option value="immediately" selected>Immediately</s-option>
-              <s-option value="hourly">Hourly digest</s-option>
-              <s-option value="daily">Daily digest</s-option>
-            </s-select>
-            <s-choice-list label="Notification types" name="notifications-type" multiple>
-              <s-choice label="New order notifications" value="new-order" selected></s-choice>
-              <s-choice label="Low stock alerts" value="low-stock"></s-choice>
-              <s-choice label="Customer review notifications" value="customer-review"></s-choice>
-              <s-choice label="Shipping updates" value="shipping-updates"></s-choice>
-            </s-choice-list>
+          <s-select
+            label="Notification frequency"
+            name="notification-frequency"
+          >
+            <s-option value="immediately" selected>Immediately</s-option>
+            <s-option value="hourly">Hourly digest</s-option>
+            <s-option value="daily">Daily digest</s-option>
+          </s-select>
+          <s-choice-list
+            label="Notification types"
+            name="notifications-type"
+            multiple
+          >
+            <s-choice value="new-order" selected
+              >New order notifications</s-choice
+            >
+            <s-choice value="low-stock">Low stock alerts</s-choice>
+            <s-choice value="customer-review"
+              >Customer review notifications</s-choice
+            >
+            <s-choice value="shipping-updates">Shipping updates</s-choice>
+          </s-choice-list>
         </s-section>
         <!-- === -->
         <!-- Preferences -->
         <!-- === -->
         <s-section heading="Preferences">
-          <s-stack gap="none" border="base" borderRadius="base" overflow="hidden">
+          <s-box
+            border="base"
+            borderRadius="base"
+          >
             <s-clickable
               padding="small-100"
               href="/app/settings/shipping"
               accessibilityLabel="Configure shipping methods, rates, and fulfillment options"
             >
-              <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
+              <s-grid
+                gridTemplateColumns="1fr auto"
+                alignItems="center"
+                gap="base"
+              >
                 <s-box>
                   <s-heading>Shipping & fulfillment</s-heading>
                   <s-paragraph color="subdued">
@@ -86,11 +103,16 @@
               href="/app/settings/products_catalog"
               accessibilityLabel="Configure product defaults, customer experience, and catalog settings"
             >
-              <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
+              <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.
+                    Product defaults, customer experience, and catalog display
+                    options.
                   </s-paragraph>
                 </s-box>
                 <s-icon type="chevron-right"></s-icon>
@@ -104,29 +126,44 @@
               href="/app/settings/customer_support"
               accessibilityLabel="Manage customer support settings and help resources"
             >
-              <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
+              <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.
+                    Support settings, help resources, and customer service
+                    tools.
                   </s-paragraph>
                 </s-box>
                 <s-icon type="chevron-right"></s-icon>
               </s-grid>
             </s-clickable>
-          </s-stack>
+          </s-box>
         </s-section>
         <!-- === -->
         <!-- Tools -->
         <!-- === -->
         <s-section heading="Tools">
-          <s-stack gap="none" border="base" borderRadius="base" overflow="hidden">
+          <s-stack
+            gap="none"
+            border="base"
+            borderRadius="base"
+            overflow="hidden"
+          >
             <s-box padding="small-100">
-              <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
+              <s-grid
+                gridTemplateColumns="1fr auto"
+                alignItems="center"
+                gap="base"
+              >
                 <s-box>
                   <s-heading>Reset app settings</s-heading>
                   <s-paragraph color="subdued">
-                    Reset all settings to their default values. This action cannot be undone.
+                    Reset all settings to their default values. This action
+                    cannot be undone.
                   </s-paragraph>
                 </s-box>
                 <s-button tone="critical">Reset</s-button>
@@ -136,7 +173,11 @@
               <s-divider></s-divider>
             </s-box>
             <s-box padding="small-100">
-              <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
+              <s-grid
+                gridTemplateColumns="1fr auto"
+                alignItems="center"
+                gap="base"
+              >
                 <s-box>
                   <s-heading>Export settings</s-heading>
                   <s-paragraph color="subdued">
@@ -151,4 +192,4 @@
       </s-page>
     </form>
   </body>
-</html>
+</html>