@shopify/ui-extensions 2025.10.1 → 2025.10.3

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

@@ -0,0 +1,137 @@
+<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-button
+        icon="sort"
+        variant="secondary"
+        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.jsx

@@ -0,0 +1,28 @@
+<s-box
+  border="base"
+  borderRadius="base"
+  overflow="hidden"
+  maxInlineSize="216px"
+>
+  <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-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="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-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/settings.jsx

@@ -40,7 +40,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 +82,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 +99,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 +123,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 +147,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 +180,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">
@@ -204,4 +203,4 @@ export default function SettingsPage() {
       </s-page>
     </form>
   );
-}
+}

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

@@ -0,0 +1,103 @@
+<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 tone="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"
+          style="display: 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"
+          style="display: none;"
+         />
+      </s-box>
+    </s-box>
+  </s-grid>
+</s-section>

package/src/surfaces/admin/components/shared.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.20.0 **/
+/** VERSION: 1.22.1 **/
 
 /* eslint-disable @typescript-eslint/ban-types */
 
@@ -565,6 +565,7 @@ declare const privateIconArray: readonly [
   'metaobject-list',
   'metaobject-reference',
   'microphone',
+  'microphone-muted',
   'minimize',
   'minus',
   'minus-circle',
@@ -635,6 +636,8 @@ declare const privateIconArray: readonly [
   'personalized-text',
   'phablet',
   'phone',
+  'phone-down',
+  'phone-down-filled',
   'phone-in',
   'phone-out',
   'pin',
@@ -4069,6 +4072,7 @@ type IconType$1 =
   | 'metaobject-list'
   | 'metaobject-reference'
   | 'microphone'
+  | 'microphone-muted'
   | 'minimize'
   | 'minus'
   | 'minus-circle'
@@ -4131,6 +4135,8 @@ type IconType$1 =
   | 'person-segment'
   | 'personalized-text'
   | 'phone'
+  | 'phone-down'
+  | 'phone-down-filled'
   | 'phone-in'
   | 'phone-out'
   | 'pin'

package/src/surfaces/admin/components/using-polaris-web-components/examples/event-handling.jsx

@@ -1,3 +1,4 @@
+<>
 <s-button onClick={() => console.log('Clicked!')}>
   Click me
 </s-button>
@@ -8,3 +9,4 @@
   onFocus={() => console.log('Field focused')}
   onBlur={() => console.log('Field blurred')}
 />
+</>

package/src/surfaces/admin/components/using-polaris-web-components/examples/property-vs-attribute-2.jsx

@@ -1,3 +1,4 @@
+<>
 // This works - the "gap" property accepts string values
 <s-stack gap="base">...</s-stack>
 
@@ -6,3 +7,4 @@
 
 // This does not work - complex values are set as properties
 <s-choice-list values={['Shopify', 'Shopify Plus']}>...</s-choice-list>
+</>