@shopify/ui-extensions 2026.1.2 → 2026.1.3

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

@@ -0,0 +1,56 @@
+<s-grid justifyItems="center" alignItems="center" minBlockSize="300px">
+  <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-image>
+    </s-clickable>
+    <s-divider></s-divider>
+    <s-grid
+      gridTemplateColumns="1fr auto 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-button
+        tone="critical"
+        variant="tertiary"
+        icon="delete"
+        accessibilityLabel="Delete 4-pieces puzzle"
+        commandFor="delete-modal"
+        command="--show"
+      ></s-button>
+    </s-grid>
+
+    <s-modal id="delete-modal" heading="Delete template?">
+      <s-stack direction="block" gap="base">
+        <s-text>
+          Are you sure you want to delete the 4-Pieces template? This action cannot be undone.
+        </s-text>
+      </s-stack>
+      <s-button
+        slot="primary-action"
+        variant="primary"
+        tone="critical"
+        commandFor="delete-modal"
+        command="--hide"
+      >Delete</s-button>
+      <s-button
+        slot="secondary-actions"
+        commandFor="delete-modal"
+        command="--hide"
+      >Cancel</s-button>
+    </s-modal>
+  </s-box>
+</s-grid>

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

@@ -0,0 +1,62 @@
+<s-grid justifyItems="center" alignItems="center" minBlockSize="300px">
+  <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 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-button
+        tone="critical"
+        variant="tertiary"
+        icon="delete"
+        accessibilityLabel="Delete 4-pieces puzzle"
+        commandFor="delete-modal"
+        command="--show"
+      />
+    </s-grid>
+
+    <s-modal id="delete-modal" heading="Delete template?">
+      <s-stack direction="block" gap="base">
+        <s-text>
+          Are you sure you want to delete the 4-Pieces template? This action cannot be undone.
+        </s-text>
+      </s-stack>
+      <s-button
+        slot="primary-action"
+        variant="primary"
+        tone="critical"
+        commandFor="delete-modal"
+        command="--hide"
+      >
+        Delete
+      </s-button>
+      <s-button
+        slot="secondary-actions"
+        commandFor="delete-modal"
+        command="--hide"
+      >
+        Cancel
+      </s-button>
+    </s-modal>
+  </s-box>
+</s-grid>

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

@@ -0,0 +1,43 @@
+<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-image>
+  </s-clickable>
+  <s-divider></s-divider>
+  <s-grid
+    gridTemplateColumns="1fr auto 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-button
+      variant="tertiary"
+      icon="share"
+      accessibilityLabel="Share 4-pieces puzzle template"
+    ></s-button>
+  </s-grid>
+</s-box>
+
+<!-- 
+Share handler:
+try {
+  await navigator.share({
+    text: 'Check out this puzzle template!',
+    url: 'https://example.com/puzzles/4-pieces',
+  });
+} catch (err) {
+  console.log('Share cancelled or failed');
+}
+-->

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

@@ -0,0 +1,43 @@
+<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 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-button
+      variant="tertiary"
+      icon="share"
+      accessibilityLabel="Share 4-pieces puzzle template"
+      onClick={async () => {
+        try {
+          await navigator.share({
+            text: 'Check out this puzzle template!',
+            url: 'https://example.com/puzzles/4-pieces',
+          });
+        } catch (err) {
+          console.log('Share cancelled or failed');
+        }
+      }}
+    />
+  </s-grid>
+</s-box>

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

@@ -0,0 +1,36 @@
+<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-image>
+  </s-clickable>
+  <s-divider></s-divider>
+  <s-grid
+    gridTemplateColumns="1fr auto 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-button
+      variant="tertiary"
+      icon="link"
+      accessibilityLabel="Copy link to 4-pieces puzzle template"
+    ></s-button>
+  </s-grid>
+</s-box>
+
+<!-- 
+Copy link handler:
+shopify.toast.show('Link copied to clipboard');
+-->

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

@@ -0,0 +1,36 @@
+<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 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-button
+      variant="tertiary"
+      icon="link"
+      accessibilityLabel="Copy link to 4-pieces puzzle template"
+      onClick={() => {
+        shopify.toast.show('Link copied to clipboard');
+      }}
+    />
+  </s-grid>
+</s-box>

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

@@ -1,23 +1,25 @@
-<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-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>
+<s-grid justifyItems="center" alignItems="center" minBlockSize="300px">
+  <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-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>
+</s-grid>

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

@@ -1,28 +1,30 @@
-<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-grid justifyItems="center" alignItems="center" minBlockSize="300px">
+  <s-box
+    border="base"
+    borderRadius="base"
+    overflow="hidden"
+    maxInlineSize="216px"
   >
-    <s-heading>4-Pieces</s-heading>
-    <s-button href="" accessibilityLabel="View 4-pieces puzzle template">
-      View
-    </s-button>
-  </s-grid>
-</s-box>
+    <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>
+</s-grid>

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

@@ -0,0 +1,51 @@
+<s-section padding="base">
+  <s-grid
+    gridTemplateColumns="@container (inline-size <= 400px) 1fr, 1fr auto 1fr auto 1fr"
+    gap="small"
+  >
+    <s-clickable
+      href="/app/analytics/designs"
+      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="/app/analytics/sales"
+      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="/app/analytics/returns"
+      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/metricsCard-nav.jsx

@@ -0,0 +1,51 @@
+<s-section padding="base">
+  <s-grid
+    gridTemplateColumns="@container (inline-size <= 400px) 1fr, 1fr auto 1fr auto 1fr"
+    gap="small"
+  >
+    <s-clickable
+      href="/app/analytics/designs"
+      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="/app/analytics/sales"
+      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="/app/analytics/returns"
+      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-modal.html

@@ -0,0 +1,78 @@
+<s-section padding="none">
+  <s-stack gap="small-200">
+    <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center" paddingInline="base" paddingBlockStart="base">
+      <s-text-field icon="search" placeholder="Filter customers"></s-text-field>
+    </s-grid>
+    
+    <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="delete"
+            variant="tertiary"
+            tone="critical"
+            accessibilityLabel="Delete Mae Jemison"
+            commandFor="delete-modal"
+            command="--show"
+          ></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="delete"
+            variant="tertiary"
+            tone="critical"
+            accessibilityLabel="Delete Ellen Ochoa"
+            commandFor="delete-modal"
+            command="--show"
+          ></s-button>
+        </s-grid>
+      </s-clickable>
+    </s-stack>
+  </s-stack>
+
+  <s-modal id="delete-modal" heading="Delete customer?">
+    <s-stack direction="block" gap="base">
+      <s-text>
+        Are you sure you want to delete this customer? This action cannot be undone.
+      </s-text>
+    </s-stack>
+    <s-button
+      slot="primary-action"
+      variant="primary"
+      tone="critical"
+      commandFor="delete-modal"
+      command="--hide"
+    >Delete</s-button>
+    <s-button
+      slot="secondary-actions"
+      commandFor="delete-modal"
+      command="--hide"
+    >Cancel</s-button>
+  </s-modal>
+</s-section>

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

@@ -0,0 +1,82 @@
+<s-section padding="none">
+  <s-stack gap="small-200">
+    <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center" paddingInline="base" paddingBlockStart="base">
+      <s-text-field icon="search" placeholder="Filter customers"></s-text-field>
+    </s-grid>
+    
+    <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="delete"
+            variant="tertiary"
+            tone="critical"
+            accessibilityLabel="Delete Mae Jemison"
+            commandFor="delete-modal"
+            command="--show"
+          />
+        </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="delete"
+            variant="tertiary"
+            tone="critical"
+            accessibilityLabel="Delete Ellen Ochoa"
+            commandFor="delete-modal"
+            command="--show"
+          />
+        </s-grid>
+      </s-clickable>
+    </s-stack>
+  </s-stack>
+
+  <s-modal id="delete-modal" heading="Delete customer?">
+    <s-stack direction="block" gap="base">
+      <s-text>
+        Are you sure you want to delete this customer? This action cannot be undone.
+      </s-text>
+    </s-stack>
+    <s-button
+      slot="primary-action"
+      variant="primary"
+      tone="critical"
+      commandFor="delete-modal"
+      command="--hide"
+    >
+      Delete
+    </s-button>
+    <s-button
+      slot="secondary-actions"
+      commandFor="delete-modal"
+      command="--hide"
+    >
+      Cancel
+    </s-button>
+  </s-modal>
+</s-section>