npm - @shopify/ui-extensions - Versions diffs - 2025.10.0-rc.36 → 2025.10.0-rc.38 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (215) hide show

package/src/surfaces/admin/components/Table.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/** VERSION: 1.18.0 **/
+/** VERSION: 1.19.0 **/
 /* eslint-disable import/extensions */
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -26,7 +26,8 @@ export type HeaderFormat = Extract<
   TableHeaderProps$1['format'],
   'base' | 'currency' | 'numeric'
 >;
-export interface TableHeaderProps extends Pick<TableHeaderProps$1, 'listSlot'> {
+export interface TableHeaderProps
+  extends Pick<TableHeaderProps$1, 'listSlot' | 'format'> {
   listSlot: Extract<
     TableHeaderProps$1['listSlot'],
     'primary' | 'secondary' | 'labeled' | 'kicker' | 'inline'

package/src/surfaces/admin/components/TableBody.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/** VERSION: 1.18.0 **/
+/** VERSION: 1.19.0 **/
 /* eslint-disable import/extensions */
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/TableCell.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/** VERSION: 1.18.0 **/
+/** VERSION: 1.19.0 **/
 /* eslint-disable import/extensions */
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/TableHeader.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/** VERSION: 1.18.0 **/
+/** VERSION: 1.19.0 **/
 /* eslint-disable import/extensions */
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -12,7 +12,8 @@ export type HeaderFormat = Extract<
   TableHeaderProps$1['format'],
   'base' | 'currency' | 'numeric'
 >;
-export interface TableHeaderProps extends Pick<TableHeaderProps$1, 'listSlot'> {
+export interface TableHeaderProps
+  extends Pick<TableHeaderProps$1, 'listSlot' | 'format'> {
   listSlot: Extract<
     TableHeaderProps$1['listSlot'],
     'primary' | 'secondary' | 'labeled' | 'kicker' | 'inline'

package/src/surfaces/admin/components/TableHeaderRow.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/** VERSION: 1.18.0 **/
+/** VERSION: 1.19.0 **/
 /* eslint-disable import/extensions */
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/TableRow.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/** VERSION: 1.18.0 **/
+/** VERSION: 1.19.0 **/
 /* eslint-disable import/extensions */
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/Text.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/** VERSION: 1.18.0 **/
+/** VERSION: 1.19.0 **/
 /* eslint-disable import/extensions */
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/TextArea.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/** VERSION: 1.18.0 **/
+/** VERSION: 1.19.0 **/
 /* eslint-disable import/extensions */
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/TextField.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/** VERSION: 1.18.0 **/
+/** VERSION: 1.19.0 **/
 /* eslint-disable import/extensions */
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/Thumbnail.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/** VERSION: 1.18.0 **/
+/** VERSION: 1.19.0 **/
 /* eslint-disable import/extensions */
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/Tooltip.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/** VERSION: 1.18.0 **/
+/** VERSION: 1.19.0 **/
 /* eslint-disable import/extensions */
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/URLField.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/** VERSION: 1.18.0 **/
+/** VERSION: 1.19.0 **/
 /* eslint-disable import/extensions */
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/UnorderedList.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/** VERSION: 1.18.0 **/
+/** VERSION: 1.19.0 **/
 /* eslint-disable import/extensions */
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/patterns/examples/details.html CHANGED Viewed

@@ -11,16 +11,10 @@
     <!-- Details page pattern -->
     <!-- === -->
     <form data-save-bar>
-      <s-page>
-        <!-- === -->
-        <!-- Title Bar -->
-        <!-- Note: ui-title-bar requires AppBridge to render correctly -->
-        <!-- === -->
-        <ui-title-bar title="Mountain view">
-          <button variant="breadcrumb" href="/app/puzzles">Puzzles</button>
-          <button>Duplicate</button>
-          <button tone="critical">Delete</button>
-        </ui-title-bar>
+      <s-page heading="Mountain view">
+        <s-link slot="breadcrumb-actions" href="/app/puzzles">Puzzles</s-link>
+        <s-button slot="secondary-actions">Duplicate</s-button>
+        <s-button slot="secondary-actions">Delete</s-button>
         <!-- === -->
         <!-- Puzzle information -->
         <!-- === -->
@@ -83,7 +77,7 @@
               borderStyle="solid"
               overflow="hidden"
             >
-              <s-table fullwidth border="base" borderRadius="base" borderStyle="solid">
+              <s-table border="base" borderRadius="base" borderStyle="solid">
                 <s-table-header-row>
                   <s-table-header listSlot="primary">Template</s-table-header>
                   <s-table-header>

package/src/surfaces/admin/components/patterns/examples/details.jsx CHANGED Viewed

@@ -16,18 +16,10 @@ export default function DetailsPage() {
   return (
     <form data-save-bar onSubmit={handleFormSubmit} onReset={handleFormReset}>
-      <s-page>
-        {/* === */}
-        {/* Title Bar */}
-        {/* Note: ui-title-bar requires AppBridge to render correctly */}
-        {/* === */}
-        <ui-title-bar title="Mountain view">
-          <button variant="breadcrumb" href="/app/puzzles">
-            Puzzles
-          </button>
-          <button>Duplicate</button>
-          <button tone="critical">Delete</button>
-        </ui-title-bar>
+      <s-page heading="Mountain view">
+        <s-link slot="breadcrumb-actions" href="/app/puzzles">Puzzles</s-link>
+        <s-button slot="secondary-actions">Duplicate</s-button>
+        <s-button slot="secondary-actions">Delete</s-button>
         {/* === */}
         {/* Puzzle information */}
         {/* === */}
@@ -96,7 +88,6 @@ export default function DetailsPage() {
               overflow="hidden"
             >
               <s-table
-                fullwidth
                 border="base"
                 borderRadius="base"
                 borderStyle="solid"

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

@@ -63,18 +63,9 @@
     <!-- Home page pattern -->
     <!-- === -->
     <s-page>
-      <!-- === -->
-      <!-- Title Bar -->
-      <!-- The ui-title-bar on the homepage should not have a title attribute -->
-      <!-- Note: ui-title-bar requires AppBridge to render correctly -->
-      <!-- === -->
-      <ui-title-bar>
-        <button variant="primary">Create puzzle</button>
-        <section>
-          <button>Browse templates</button>
-          <button>Import image</button>
-        </section>
-      </ui-title-bar>
+      <s-button slot="primary-action">Create puzzle</s-button>
+      <s-button slot="secondary-actions">Browse templates</s-button>
+      <s-button slot="secondary-actions">Import image</s-button>
       <!-- === -->
       <!-- Banner -->
       <!-- Use banners sparingly. Only one banner should be visible at a time. -->

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

@@ -20,18 +20,9 @@ export default function HomePage() {
   const [progress, setProgress] = useState(0);
   return (
     <s-page>
-      {/* === */}
-      {/* Title Bar */}
-      {/* The ui-title-bar on the homepage should not have a title attribute */}
-      {/* Note: ui-title-bar requires AppBridge to render correctly */}
-      {/* === */}
-      <ui-title-bar>
-        <button variant="primary">Create puzzle</button>
-        <section>
-          <button>Browse templates</button>
-          <button>Import image</button>
-        </section>
-      </ui-title-bar>
+      <s-button slot="primary-action">Create puzzle</s-button>
+      <s-button slot="secondary-actions">Browse templates</s-button>
+      <s-button slot="secondary-actions">Import image</s-button>
       {/* === */}
       {/* Banner */}

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

@@ -10,16 +10,10 @@
     <!-- === -->
     <!-- Index page pattern -->
     <!-- === -->
-    <s-page>
-      <!-- === -->
-      <!-- Title Bar -->
-      <!-- Note: ui-title-bar requires AppBridge to render correctly -->
-      <!-- === -->
-      <ui-title-bar title="Puzzles">
-        <button variant="primary">Create puzzle</button>
-        <button>Export puzzles</button>
-        <button>Import puzzles</button>
-      </ui-title-bar>
+    <s-page heading="Puzzles">
+      <s-button slot="primary-action" variant="primary">Create puzzle</s-button>
+      <s-button slot="secondary-actions" variant="secondary">Export puzzles</s-button>
+      <s-button slot="secondary-actions" variant="secondary">Import puzzles</s-button>
       <!-- === -->
       <!-- Empty state -->
       <!-- This should only be visible if the merchant has not created any puzzles yet. -->

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

@@ -4,17 +4,10 @@
 export default function IndexPage() {
   return (
-    <s-page>
-      {/* === */}
-      {/* Title Bar */}
-      {/* Note: ui-title-bar requires AppBridge to render correctly */}
-      {/* === */}
-      <ui-title-bar title="Puzzles">
-        <button variant="primary">Create puzzle</button>
-        <button>Export puzzles</button>
-        <button>Import puzzles</button>
-      </ui-title-bar>
+    <s-page heading="Puzzles">
+      <s-button slot="primary-action" variant="primary">Create puzzle</s-button>
+      <s-button slot="secondary-actions" variant="secondary">Export puzzles</s-button>
+      <s-button slot="secondary-actions" variant="secondary">Import puzzles</s-button>
       {/* === */}
       {/* Empty state */}
       {/* This should only be visible if the merchant has not created any puzzles yet. */}

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

@@ -35,18 +35,13 @@
       </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 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-row clickDelegate="mountain-view-checkbox">
         <s-table-cell>
           <s-stack direction="inline" gap="small" alignItems="center">
             <s-checkbox id="mountain-view-checkbox"></s-checkbox>
@@ -73,7 +68,7 @@
           <s-badge color="base" tone="success">Active</s-badge>
         </s-table-cell>
       </s-table-row>
-      <s-table-row clickdelegate="ocean-sunset-checkbox">
+      <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>
@@ -100,7 +95,7 @@
           <s-badge color="base" tone="success">Active</s-badge>
         </s-table-cell>
       </s-table-row>
-      <s-table-row clickdelegate="forest-animals-checkbox">
+      <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>

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

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

package/src/surfaces/admin/components/patterns/examples/settings.html CHANGED Viewed

@@ -11,8 +11,7 @@
     <!-- Settings page pattern -->
     <!-- === -->
     <form data-save-bar onSubmit="" onReset="">
-      <s-page inlineSize="small">
-        <ui-title-bar title="Settings"></ui-title-bar>
+      <s-page heading="Settings" inlineSize="small">
         <!-- === -->
         <!-- Store Information -->
         <!-- === -->

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

@@ -16,9 +16,7 @@ export default function SettingsPage() {
   return (
     <form data-save-bar onSubmit={handleFormSubmit} onReset={handleFormReset}>
-      <s-page inlineSize="small">
-        <ui-title-bar title="Settings"></ui-title-bar>
+      <s-page heading="Settings" inlineSize="small">
         {/* === */}
         {/* Store Information */}
         {/* === */}
@@ -42,9 +40,7 @@ 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>