npm - @shopify/ui-extensions - Versions diffs - 2026.1.2 → 2026.1.3 - Mend

@shopify/ui-extensions 2026.1.2 → 2026.1.3

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 (1049) hide show

package/src/surfaces/admin/components/Modal/examples/form-modal.jsx DELETED Viewed

@@ -1,52 +0,0 @@
-<s-stack gap="base">
-  <s-button variant="primary" commandFor="edit-modal" command="--show">
-    Edit customer
-  </s-button>
-  <s-modal id="edit-modal" heading="Edit customer information" size="large">
-    <s-stack gap="base">
-      <s-text-field
-        label="Customer name"
-        name="name"
-        value="Sarah Johnson"
-       />
-      <s-email-field
-        label="Email address"
-        name="email"
-        value="sarah@example.com"
-       />
-      <s-text-field
-        label="Phone number"
-        name="phone"
-        value="+1 555-0123"
-       />
-      <s-select label="Customer group" name="group">
-        <s-option value="retail">Retail</s-option>
-        <s-option value="wholesale" selected>
-          Wholesale
-        </s-option>
-        <s-option value="vip">VIP</s-option>
-      </s-select>
-    </s-stack>
-    <s-button
-      slot="primary-action"
-      variant="primary"
-      commandFor="edit-modal"
-      command="--hide"
-    >
-      Save changes
-    </s-button>
-    <s-button
-      slot="secondary-actions"
-      variant="secondary"
-      commandFor="edit-modal"
-      command="--hide"
-    >
-      Cancel
-    </s-button>
-  </s-modal>
-</s-stack>

package/src/surfaces/admin/components/Modal/examples/modal-without-padding.jsx DELETED Viewed

@@ -1,20 +0,0 @@
-<s-stack gap="base">
-  <s-button commandFor="image-modal" command="--show">
-    View product image
-  </s-button>
-  <s-modal id="image-modal" heading="Product image" padding="none">
-    <s-box background="subdued" padding="base">
-      <s-text>Image would display here with full width</s-text>
-    </s-box>
-    <s-button
-      slot="secondary-actions"
-      variant="secondary"
-      commandFor="image-modal"
-      command="--hide"
-    >
-      Close
-    </s-button>
-  </s-modal>
-</s-stack>

package/src/surfaces/admin/components/NumberField/examples/basic-usage.jsx DELETED Viewed

@@ -1,7 +0,0 @@
-<s-number-field
-  label="Order quantity"
-  value="5"
-  min={1}
-  max={999}
-  step={1}
- />

package/src/surfaces/admin/components/NumberField/examples/default.jsx DELETED Viewed

@@ -1,8 +0,0 @@
-<s-number-field
-  label="Quantity"
-  details="Number of items in stock"
-  placeholder="0"
-  step={5}
-  min={0}
-  max={100}
-/>

package/src/surfaces/admin/components/NumberField/examples/multiple-examples.html DELETED Viewed

@@ -1,29 +0,0 @@
-<s-stack gap="base">
-  <s-number-field
-    label="Inventory count"
-    value="150"
-    min="0"
-    step="1"
-    inputMode="numeric"
-    details="Current stock available for sale"
-  ></s-number-field>
-  <s-number-field
-    label="Discount percentage"
-    value="15"
-    suffix="%"
-    min="0"
-    max="100"
-    step="0.1"
-    inputMode="decimal"
-  ></s-number-field>
-  <s-number-field
-    label="Shipping weight"
-    value="2.5"
-    suffix="kg"
-    min="0.1"
-    step="0.1"
-    inputMode="decimal"
-  ></s-number-field>
-</s-stack>

package/src/surfaces/admin/components/NumberField/examples/multiple-examples.jsx DELETED Viewed

@@ -1,29 +0,0 @@
-<s-stack gap="base">
-  <s-number-field
-    label="Inventory count"
-    value="150"
-    min={0}
-    step={1}
-    inputMode="numeric"
-    details="Current stock available for sale"
-   />
-  <s-number-field
-    label="Discount percentage"
-    value="15"
-    suffix="%"
-    min={0}
-    max={100}
-    step={0.1}
-    inputMode="decimal"
-   />
-  <s-number-field
-    label="Shipping weight"
-    value="2.5"
-    suffix="kg"
-    min={0.1}
-    step={0.1}
-    inputMode="decimal"
-   />
-</s-stack>

package/src/surfaces/admin/components/NumberField/examples/with-prefix-and-suffix.jsx DELETED Viewed

@@ -1,9 +0,0 @@
-<s-number-field
-  label="Product price"
-  value="29.99"
-  prefix="$"
-  suffix="CAD"
-  inputMode="decimal"
-  step={0.01}
-  min={0}
- />

package/src/surfaces/admin/components/OrderedList/examples/basic-usage.html DELETED Viewed

@@ -1,5 +0,0 @@
-<s-ordered-list>
-  <s-list-item>Add products to your catalog</s-list-item>
-  <s-list-item>Set up payment methods</s-list-item>
-  <s-list-item>Configure shipping zones</s-list-item>
-</s-ordered-list>

package/src/surfaces/admin/components/OrderedList/examples/basic-usage.jsx DELETED Viewed

@@ -1,5 +0,0 @@
-<s-ordered-list>
-  <s-list-item>Add products to your catalog</s-list-item>
-  <s-list-item>Set up payment methods</s-list-item>
-  <s-list-item>Configure shipping zones</s-list-item>
-</s-ordered-list>

package/src/surfaces/admin/components/OrderedList/examples/default.jsx DELETED Viewed

@@ -1,5 +0,0 @@
-<s-ordered-list>
-  <s-list-item>Red shirt</s-list-item>
-  <s-list-item>Green shirt</s-list-item>
-  <s-list-item>Blue shirt</s-list-item>
-</s-ordered-list>

package/src/surfaces/admin/components/OrderedList/examples/fulfillment-process.html DELETED Viewed

@@ -1,18 +0,0 @@
-<s-ordered-list>
-  <s-list-item>
-    Process payment
-    <s-ordered-list>
-      <s-list-item>Verify card details</s-list-item>
-      <s-list-item>Apply discount codes</s-list-item>
-      <s-list-item>Calculate taxes</s-list-item>
-    </s-ordered-list>
-  </s-list-item>
-  <s-list-item>
-    Prepare shipment
-    <s-ordered-list>
-      <s-list-item>Print shipping label</s-list-item>
-      <s-list-item>Pack items securely</s-list-item>
-    </s-ordered-list>
-  </s-list-item>
-  <s-list-item>Update customer with tracking info</s-list-item>
-</s-ordered-list>

package/src/surfaces/admin/components/OrderedList/examples/fulfillment-process.jsx DELETED Viewed

@@ -1,18 +0,0 @@
-<s-ordered-list>
-  <s-list-item>
-    Process payment
-    <s-ordered-list>
-      <s-list-item>Verify card details</s-list-item>
-      <s-list-item>Apply discount codes</s-list-item>
-      <s-list-item>Calculate taxes</s-list-item>
-    </s-ordered-list>
-  </s-list-item>
-  <s-list-item>
-    Prepare shipment
-    <s-ordered-list>
-      <s-list-item>Print shipping label</s-list-item>
-      <s-list-item>Pack items securely</s-list-item>
-    </s-ordered-list>
-  </s-list-item>
-  <s-list-item>Update customer with tracking info</s-list-item>
-</s-ordered-list>

package/src/surfaces/admin/components/OrderedList/examples/order-processing-steps.html DELETED Viewed

@@ -1,8 +0,0 @@
-<s-ordered-list>
-  <s-list-item>Review order details and customer information</s-list-item>
-  <s-list-item>Verify payment and billing address</s-list-item>
-  <s-list-item>Check inventory availability for all items</s-list-item>
-  <s-list-item>Generate fulfillment labels and packing slip</s-list-item>
-  <s-list-item>Package items and update tracking information</s-list-item>
-  <s-list-item>Send shipment confirmation to customer</s-list-item>
-</s-ordered-list>

package/src/surfaces/admin/components/OrderedList/examples/order-processing-steps.jsx DELETED Viewed

@@ -1,8 +0,0 @@
-<s-ordered-list>
-  <s-list-item>Review order details and customer information</s-list-item>
-  <s-list-item>Verify payment and billing address</s-list-item>
-  <s-list-item>Check inventory availability for all items</s-list-item>
-  <s-list-item>Generate fulfillment labels and packing slip</s-list-item>
-  <s-list-item>Package items and update tracking information</s-list-item>
-  <s-list-item>Send shipment confirmation to customer</s-list-item>
-</s-ordered-list>

package/src/surfaces/admin/components/OrderedList/examples/product-setup-instructions.jsx DELETED Viewed

@@ -1,13 +0,0 @@
-<s-ordered-list>
-  <s-list-item>
-    Create product listing with title and description
-    <s-ordered-list>
-      <s-list-item>Add high-quality product images</s-list-item>
-      <s-list-item>Set SEO title and meta description</s-list-item>
-    </s-ordered-list>
-  </s-list-item>
-  <s-list-item>Configure pricing and inventory tracking</s-list-item>
-  <s-list-item>Set up product variants (size, color, material)</s-list-item>
-  <s-list-item>Enable inventory tracking and set stock levels</s-list-item>
-  <s-list-item>Review and publish product to storefront</s-list-item>
-</s-ordered-list>

package/src/surfaces/admin/components/Page/examples/default.jsx DELETED Viewed

@@ -1,5 +0,0 @@
-<s-page heading="Products">
-  <s-section>
-    <s-text>Hello World</s-text>
-  </s-section>
-</s-page>

package/src/surfaces/admin/components/Page/examples/large-inline-size-for-wide-content.jsx DELETED Viewed

@@ -1,33 +0,0 @@
-<s-page heading="Store analytics" inlineSize="large">
-  <s-section>
-    <s-stack gap="base">
-      <s-text>Monitor your store performance across all channels.</s-text>
-      <s-grid>
-        <s-grid-item>
-          <s-box
-            padding="base"
-            background="base"
-            borderWidth="base"
-            borderColor="base"
-            borderRadius="base"
-          >
-            <s-heading>Sales</s-heading>
-            <s-text type="strong">$12,456</s-text>
-          </s-box>
-        </s-grid-item>
-        <s-grid-item>
-          <s-box
-            padding="base"
-            background="base"
-            borderWidth="base"
-            borderColor="base"
-            borderRadius="base"
-          >
-            <s-heading>Orders</s-heading>
-            <s-text type="strong">145</s-text>
-          </s-box>
-        </s-grid-item>
-      </s-grid>
-    </s-stack>
-  </s-section>
-</s-page>

package/src/surfaces/admin/components/Page/examples/page-with-breadcrumbs-and-title.jsx DELETED Viewed

@@ -1,7 +0,0 @@
-<s-page heading="Edit Product" inlineSize="base">
-  <s-link slot="breadcrumb-actions" href="/products">Products</s-link>
-  <s-link slot="breadcrumb-actions" href="/products/123">Acme Widget</s-link>
-  <s-section>
-    <s-text>Update your product information and settings.</s-text>
-  </s-section>
-</s-page>

package/src/surfaces/admin/components/Page/examples/page-with-heading.jsx DELETED Viewed

@@ -1,5 +0,0 @@
-<s-page heading="Product catalog" inlineSize="base">
-  <s-section>
-    <s-text>Manage your product catalog and inventory.</s-text>
-  </s-section>
-</s-page>

package/src/surfaces/admin/components/Page/examples/page-with-secondary-actions.jsx DELETED Viewed

@@ -1,8 +0,0 @@
-<s-page heading="Products" inlineSize="base">
-  <s-button slot="secondary-actions">Preview</s-button>
-  <s-button slot="secondary-actions">Duplicate</s-button>
-  <s-button slot="primary-action" variant="primary">Save</s-button>
-  <s-section>
-    <s-text>Manage your products and organize your catalog.</s-text>
-  </s-section>
-</s-page>

package/src/surfaces/admin/components/Page/examples/small-inline-size-for-focused-content.jsx DELETED Viewed

@@ -1,9 +0,0 @@
-<s-page heading="Store settings" inlineSize="small">
-  <s-section>
-    <s-stack gap="base">
-      <s-text>Configure your basic store preferences.</s-text>
-      <s-text-field label="Store name" />
-      <s-button variant="primary">Save</s-button>
-    </s-stack>
-  </s-section>
-</s-page>

package/src/surfaces/admin/components/Paragraph/examples/admin-ui-patterns.html DELETED Viewed

@@ -1,21 +0,0 @@
-<s-section>
-  <s-paragraph tone="success" color="base">
-    Payment successfully processed and order confirmed.
-  </s-paragraph>
-  <s-paragraph tone="warning" color="base">
-    Inventory levels are running low for this product.
-  </s-paragraph>
-  <s-paragraph tone="critical" color="base">
-    This order requires immediate attention due to shipping delays.
-  </s-paragraph>
-  <s-paragraph tone="info" color="base">
-    Customer requested gift wrapping for this order.
-  </s-paragraph>
-  <s-paragraph tone="caution" color="base">
-    Review shipping address before processing.
-  </s-paragraph>
-</s-section>

package/src/surfaces/admin/components/Paragraph/examples/admin-ui-patterns.jsx DELETED Viewed

@@ -1,21 +0,0 @@
-<s-section>
-  <s-paragraph tone="success" color="base">
-    Payment successfully processed and order confirmed.
-  </s-paragraph>
-  <s-paragraph tone="warning" color="base">
-    Inventory levels are running low for this product.
-  </s-paragraph>
-  <s-paragraph tone="critical" color="base">
-    This order requires immediate attention due to shipping delays.
-  </s-paragraph>
-  <s-paragraph tone="info" color="base">
-    Customer requested gift wrapping for this order.
-  </s-paragraph>
-  <s-paragraph tone="caution" color="base">
-    Review shipping address before processing.
-  </s-paragraph>
-</s-section>

package/src/surfaces/admin/components/Paragraph/examples/basic-usage.html DELETED Viewed

@@ -1,3 +0,0 @@
-<s-paragraph>
-  Track inventory across all your retail locations in real-time.
-</s-paragraph>

package/src/surfaces/admin/components/Paragraph/examples/basic-usage.jsx DELETED Viewed

@@ -1,3 +0,0 @@
-<s-paragraph>
-  Track inventory across all your retail locations in real-time.
-</s-paragraph>

package/src/surfaces/admin/components/Paragraph/examples/default.jsx DELETED Viewed

@@ -1,4 +0,0 @@
-<s-paragraph>
-  Shopify POS is the easiest way to sell your products in person. Available for
-  iPad, iPhone, and Android.
-</s-paragraph>

package/src/surfaces/admin/components/Paragraph/examples/line-clamping.jsx DELETED Viewed

@@ -1,8 +0,0 @@
-<s-box inlineSize="300px">
-  <s-paragraph lineClamp={1}>
-    Premium organic cotton t-shirt featuring sustainable manufacturing
-    processes, ethically sourced materials, and carbon-neutral shipping.
-    Available in multiple colors and sizes with customization options for your
-    brand.
-  </s-paragraph>
-</s-box>

package/src/surfaces/admin/components/Paragraph/examples/rtl-support.jsx DELETED Viewed

@@ -1,3 +0,0 @@
-<s-paragraph dir="rtl">
-  محتوى النص باللغة العربية
-</s-paragraph>

package/src/surfaces/admin/components/Paragraph/examples/screen-reader-text.jsx DELETED Viewed

@@ -1,3 +0,0 @@
-<s-paragraph accessibilityVisibility="exclusive">
-  Table sorted by date, newest first.
-</s-paragraph>

package/src/surfaces/admin/components/Paragraph/examples/tabular-numbers.jsx DELETED Viewed

@@ -1,3 +0,0 @@
-<s-paragraph fontVariantNumeric="tabular-nums">
-  Orders: 1,234 Revenue: $45,678.90 Customers: 890
-</s-paragraph>

package/src/surfaces/admin/components/Paragraph/examples/with-tone-and-color.jsx DELETED Viewed

@@ -1,9 +0,0 @@
-<s-section>
-  <s-paragraph tone="info" color="base">
-    Your order will be processed within 2-3 business days.
-  </s-paragraph>
-  <s-paragraph tone="success" color="subdued">
-    Payment successfully processed.
-  </s-paragraph>
-</s-section>

package/src/surfaces/admin/components/Popover/examples/default.jsx DELETED Viewed

@@ -1,10 +0,0 @@
-<>
-  <s-button commandFor="product-options-popover">Product options</s-button>
-  <s-popover id="product-options-popover">
-    <s-stack direction="block">
-      <s-button variant="tertiary">Import</s-button>
-      <s-button variant="tertiary">Export</s-button>
-    </s-stack>
-  </s-popover>
-</>

package/src/surfaces/admin/components/Popover/examples/inventory-stock-details.jsx DELETED Viewed

@@ -1,37 +0,0 @@
-<>
-  <s-button commandFor="stock-popover" icon="info">
-    Stock details
-  </s-button>
-  <s-popover id="stock-popover">
-    <s-box padding="base">
-      <s-stack gap="small">
-        <s-stack gap="small-200">
-          <s-stack direction="inline" justifyContent="space-between">
-            <s-text color="subdued">Available</s-text>
-            <s-text>127 units</s-text>
-          </s-stack>
-          <s-stack direction="inline" justifyContent="space-between">
-            <s-text color="subdued">Reserved</s-text>
-            <s-text>15 units</s-text>
-          </s-stack>
-          <s-stack direction="inline" justifyContent="space-between">
-            <s-text color="subdued">In transit</s-text>
-            <s-text>50 units</s-text>
-          </s-stack>
-        </s-stack>
-        <s-divider />
-        <s-stack direction="inline" justifyContent="space-between">
-          <s-text>Total stock</s-text>
-          <s-text>192 units</s-text>
-        </s-stack>
-        <s-button variant="secondary">View full inventory report</s-button>
-      </s-stack>
-    </s-box>
-  </s-popover>
-</>

package/src/surfaces/admin/components/Popover/examples/notifications.jsx DELETED Viewed

@@ -1,30 +0,0 @@
-<>
-  <s-button commandFor="notifications-popover" icon="notification">
-    Notifications
-  </s-button>
-  <s-popover id="notifications-popover">
-    <s-box padding="base">
-      <s-stack gap="small-200">
-        <s-stack gap="small">
-          <s-heading>New order received</s-heading>
-          <s-paragraph color="subdued">Order #1234 was placed 5 minutes ago</s-paragraph>
-        </s-stack>
-        <s-divider />
-        <s-stack gap="small">
-          <s-heading>Low inventory alert</s-heading>
-          <s-paragraph color="subdued">3 products are running low on stock</s-paragraph>
-        </s-stack>
-        <s-divider />
-        <s-stack gap="small">
-          <s-heading>Payment processed</s-heading>
-          <s-paragraph color="subdued">$250.00 payment confirmed for order #1230</s-paragraph>
-        </s-stack>
-      </s-stack>
-    </s-box>
-  </s-popover>
-</>

package/src/surfaces/admin/components/Popover/examples/table-display-options.jsx DELETED Viewed

@@ -1,29 +0,0 @@
-<>
-  <s-button commandFor="table-settings-popover" icon="settings">
-    Columns
-  </s-button>
-  <s-popover id="table-settings-popover">
-    <s-box padding="base">
-      <s-stack gap="small-200">
-        <s-stack gap="small">
-          <s-heading>Choose columns to display</s-heading>
-          <s-choice-list label="Select columns to display">
-            <s-choice value="sku" selected>
-              Sku
-            </s-choice>
-            <s-choice value="inventory" selected>
-              Inventory
-            </s-choice>
-            <s-choice value="price" selected>
-              Price
-            </s-choice>
-            <s-choice value="vendor">Vendor</s-choice>
-            <s-choice value="type">Product type</s-choice>
-          </s-choice-list>
-        </s-stack>
-        <s-button variant="primary">Apply changes</s-button>
-      </s-stack>
-    </s-box>
-  </s-popover>
-</>

package/src/surfaces/admin/components/QueryContainer/examples/basic-usage.jsx DELETED Viewed

@@ -1,17 +0,0 @@
-<>
-<s-box inlineSize="375px">
-  <s-query-container id="product-section" containerName="product">
-    <s-box padding="@container product (inline-size > 400px) large-500, none" borderWidth="base" borderColor="base" borderRadius="base">
-      <s-text>Padding is different depending on the container size</s-text>
-    </s-box>
-  </s-query-container>
-</s-box>
-<s-box inlineSize="450px">
-  <s-query-container id="product-section" containerName="product">
-    <s-box padding="@container product (inline-size > 400px) large-500, none" borderWidth="base" borderColor="base" borderRadius="base">
-      <s-text>Padding is different depending on the container size</s-text>
-    </s-box>
-  </s-query-container>
-</s-box>
-</>

package/src/surfaces/admin/components/SearchField/examples/basic-usage.html DELETED Viewed

@@ -1,5 +0,0 @@
-<s-search-field
-  label="Search products"
-  name="search"
-  placeholder="Search products..."
-></s-search-field>

package/src/surfaces/admin/components/SearchField/examples/basic-usage.jsx DELETED Viewed

@@ -1,5 +0,0 @@
-<s-search-field
-  label="Search products"
-  name="search"
-  placeholder="Search products..."
- />

package/src/surfaces/admin/components/SearchField/examples/default.jsx DELETED Viewed

@@ -1,5 +0,0 @@
-<s-search-field
-  label="Search"
-  labelAccessibilityVisibility="exclusive"
-  placeholder="Search items"
- />

package/src/surfaces/admin/components/SearchField/examples/disabled-state.jsx DELETED Viewed

@@ -1,6 +0,0 @@
-<s-search-field
-  label="Search customers"
-  name="customerSearch"
-  disabled
-  placeholder="Search is currently unavailable"
- />

package/src/surfaces/admin/components/SearchField/examples/with-character-limits.jsx DELETED Viewed

@@ -1,7 +0,0 @@
-<s-search-field
-  label="Search collections"
-  name="collectionSearch"
-  minLength={3}
-  maxLength={50}
-  placeholder="Enter at least 3 characters"
- />

package/src/surfaces/admin/components/SearchField/examples/with-error-state.jsx DELETED Viewed

@@ -1,6 +0,0 @@
-<s-search-field
-  label="Search orders"
-  name="orderSearch"
-  error="No results found"
-  value="xyz123"
- />

package/src/surfaces/admin/components/Section/examples/default.jsx DELETED Viewed

@@ -1,3 +0,0 @@
-<s-section heading="Online store dashboard">
-  <s-paragraph>View a summary of your online store’s performance.</s-paragraph>
-</s-section>

package/src/surfaces/admin/components/Section/examples/full-width-content-layout.jsx DELETED Viewed

@@ -1,18 +0,0 @@
-<s-section padding="none">
-  <s-table>
-    <s-table-header-row>
-      <s-table-header listSlot="primary">Product</s-table-header>
-      <s-table-header listSlot="labeled">Price</s-table-header>
-      <s-table-header listSlot="inline">Status</s-table-header>
-    </s-table-header-row>
-    <s-table-body>
-      <s-table-row>
-        <s-table-cell>Cotton t-shirt</s-table-cell>
-        <s-table-cell>$29.99</s-table-cell>
-        <s-table-cell>
-          <s-badge tone="success">Active</s-badge>
-        </s-table-cell>
-      </s-table-row>
-    </s-table-body>
-  </s-table>
-</s-section>