@shopify/ui-extensions 2025.10.13 → 2025.10.14

package/src/surfaces/admin/components/Badge/examples/order-status-badges.html

@@ -1,6 +0,0 @@
-<s-stack direction="inline" gap="base">
-  <s-badge tone="success">Fulfilled</s-badge>
-  <s-badge tone="warning">Partially fulfilled</s-badge>
-  <s-badge tone="neutral">Unfulfilled</s-badge>
-  <s-badge tone="critical">Cancelled</s-badge>
-</s-stack>

package/src/surfaces/admin/components/Badge/examples/order-status-badges.jsx

@@ -1,6 +0,0 @@
-<s-stack direction="inline" gap="base">
-  <s-badge tone="success">Fulfilled</s-badge>
-  <s-badge tone="warning">Partially fulfilled</s-badge>
-  <s-badge tone="neutral">Unfulfilled</s-badge>
-  <s-badge tone="critical">Cancelled</s-badge>
-</s-stack>

package/src/surfaces/admin/components/Badge/examples/status-indicators-with-icons.jsx

@@ -1,21 +0,0 @@
-<s-stack gap="base">
-  {/* Product status */}
-  <s-stack direction="inline" gap="base">
-    <s-badge tone="success" icon="view">
-      Active
-    </s-badge>
-    <s-badge tone="warning" icon="clock">
-      Scheduled
-    </s-badge>
-    <s-badge tone="critical">Archived</s-badge>
-  </s-stack>
-
-  {/* Inventory status */}
-  <s-stack direction="inline" gap="base">
-    <s-badge tone="success">In stock</s-badge>
-    <s-badge tone="warning" icon="alert-triangle">
-      Low stock
-    </s-badge>
-    <s-badge tone="critical">Out of stock</s-badge>
-  </s-stack>
-</s-stack>

package/src/surfaces/admin/components/Badge/examples/within-table-context.jsx

@@ -1,18 +0,0 @@
-<s-table>
-  <s-table-header-row>
-    <s-table-header>Order</s-table-header>
-    <s-table-header>Fulfillment</s-table-header>
-    <s-table-header>Payment</s-table-header>
-  </s-table-header-row>
-  <s-table-body>
-    <s-table-row>
-      <s-table-cell>#1001</s-table-cell>
-      <s-table-cell>
-        <s-badge tone="success">Fulfilled</s-badge>
-      </s-table-cell>
-      <s-table-cell>
-        <s-badge tone="success">Paid</s-badge>
-      </s-table-cell>
-    </s-table-row>
-  </s-table-body>
-</s-table>

package/src/surfaces/admin/components/Banner/examples/basic-information-banner.html

@@ -1,3 +0,0 @@
-<s-banner heading="Order archived">
-  This order was archived on March 7, 2017 at 3:12pm EDT.
-</s-banner>

package/src/surfaces/admin/components/Banner/examples/basic-information-banner.jsx

@@ -1,3 +0,0 @@
-<s-banner heading="Order archived">
-  This order was archived on March 7, 2017 at 3:12pm EDT.
-</s-banner>

package/src/surfaces/admin/components/Banner/examples/critical-banner-with-clear-next-steps.jsx

@@ -1,18 +0,0 @@
-<s-banner heading="Order #1024 flagged for fraud review" tone="critical">
-  This order shows multiple risk indicators and cannot be auto-fulfilled. Review
-  required within 24 hours to prevent automatic cancellation.
-  <s-button
-    slot="secondary-actions"
-    variant="secondary"
-    href="/admin/orders/1024/risk"
-  >
-    Review order details
-  </s-button>
-  <s-button
-    slot="secondary-actions"
-    variant="secondary"
-    href="/admin/settings/payments/fraud"
-  >
-    Adjust fraud settings
-  </s-button>
-</s-banner>

package/src/surfaces/admin/components/Banner/examples/default.jsx

@@ -1,3 +0,0 @@
-<s-banner heading="Order archived" tone="info" dismissible>
-  This order was archived on March 7, 2017 at 3:12pm EDT.
-</s-banner>

package/src/surfaces/admin/components/Banner/examples/dismissible-success-banner.jsx

@@ -1,3 +0,0 @@
-<s-banner heading="Products imported" tone="success" dismissible={true}>
-  Successfully imported 50 products to your store.
-</s-banner>

package/src/surfaces/admin/components/Banner/examples/info-banner-with-clear-value-proposition.html

@@ -1,14 +0,0 @@
-<s-banner heading="Point of Sale v2.4 available" tone="info" dismissible>
-  New version includes faster checkout processing and inventory sync
-  improvements.
-  <s-button
-    slot="secondary-actions"
-    variant="secondary"
-    href="/admin/apps/pos/changelog"
-  >
-    View changes
-  </s-button>
-  <s-button slot="secondary-actions" variant="secondary">
-    Install update
-  </s-button>
-</s-banner>

package/src/surfaces/admin/components/Banner/examples/info-banner-with-clear-value-proposition.jsx

@@ -1,14 +0,0 @@
-<s-banner heading="Point of Sale v2.4 available" tone="info" dismissible>
-  New version includes faster checkout processing and inventory sync
-  improvements.
-  <s-button
-    slot="secondary-actions"
-    variant="secondary"
-    href="/admin/apps/pos/changelog"
-  >
-    View changes
-  </s-button>
-  <s-button slot="secondary-actions" variant="secondary">
-    Install update
-  </s-button>
-</s-banner>

package/src/surfaces/admin/components/Banner/examples/warning-banner-with-specific-actions.jsx

@@ -1,18 +0,0 @@
-<s-banner heading="127 products missing shipping weights" tone="warning">
-  Products without weights may show inaccurate shipping rates, leading to
-  checkout abandonment.
-  <s-button
-    slot="secondary-actions"
-    variant="secondary"
-    href="/admin/products?filter=missing-weights"
-  >
-    Review products
-  </s-button>
-  <s-button
-    slot="secondary-actions"
-    variant="secondary"
-    href="javascript:void(0)"
-  >
-    Setup guide
-  </s-button>
-</s-banner>

package/src/surfaces/admin/components/Box/examples/accessible-status-messages.jsx

@@ -1,14 +0,0 @@
-<s-stack gap="base">
-  <s-box
-    accessibilityRole="status"
-    padding="base"
-    background="strong"
-    borderRadius="base"
-  >
-    <s-paragraph>Payment failed</s-paragraph>
-  </s-box>
-
-  <s-box accessibilityVisibility="exclusive">
-    <s-paragraph>Price includes tax and shipping</s-paragraph>
-  </s-box>
-</s-stack>

package/src/surfaces/admin/components/Box/examples/basic-container.html

@@ -1,9 +0,0 @@
-<s-box
-  padding="base"
-  background="base"
-  borderWidth="base"
-  borderColor="base"
-  borderRadius="base"
->
-  <s-paragraph>Product information</s-paragraph>
-</s-box>

package/src/surfaces/admin/components/Box/examples/basic-container.jsx

@@ -1,9 +0,0 @@
-<s-box
-  padding="base"
-  background="base"
-  borderWidth="base"
-  borderColor="base"
-  borderRadius="base"
->
-  <s-paragraph>Product information</s-paragraph>
-</s-box>

package/src/surfaces/admin/components/Box/examples/complex-merchant-dashboard-layout.jsx

@@ -1,34 +0,0 @@
-<s-stack gap="base">
-  {/* Inventory status section */}
-  <s-box
-    padding="base"
-    background="base"
-    borderRadius="base"
-    borderWidth="base"
-    borderColor="base"
-  >
-    <s-stack gap="base">
-      <s-box padding="small-100" background="subdued" borderRadius="small">
-        <s-paragraph>In stock: 45 units</s-paragraph>
-      </s-box>
-      <s-box padding="small-100" background="subdued" borderRadius="small">
-        <s-paragraph>Low stock alert: 5 units</s-paragraph>
-      </s-box>
-    </s-stack>
-  </s-box>
-
-  {/* Product information section */}
-  <s-box
-    padding="base"
-    background="base"
-    borderRadius="base"
-    borderWidth="base"
-    borderColor="base"
-  >
-    <s-stack gap="base">
-      <s-heading>Product sales</s-heading>
-      <s-paragraph color="subdued">No recent sales of this product</s-paragraph>
-      <s-link>View details</s-link>
-    </s-stack>
-  </s-box>
-</s-stack>

package/src/surfaces/admin/components/Box/examples/default.jsx

@@ -1,7 +0,0 @@
-<>
-  <s-box padding="base">Available for iPad, iPhone, and Android.</s-box>
-
-  <s-box padding="base" background="subdued" border="base" borderRadius="base">
-    Available for iPad, iPhone, and Android.
-  </s-box>
-</>

package/src/surfaces/admin/components/Box/examples/responsive-shipping-notice.jsx

@@ -1,10 +0,0 @@
-<s-query-container>
-  <s-box
-    padding="@container (inline-size > 400px) base, large-200"
-    background="base"
-    borderWidth="base"
-    borderColor="base"
-  >
-    <s-text>Your order will be processed within 2-3 business days</s-text>
-  </s-box>
-</s-query-container>

package/src/surfaces/admin/components/Button/examples/basic-usage.jsx

@@ -1 +0,0 @@
-<s-button>Save</s-button>

package/src/surfaces/admin/components/Button/examples/bulk-actions.html

@@ -1,4 +0,0 @@
-<s-stack direction="inline" gap="base">
-  <s-button variant="secondary">Export selected</s-button>
-  <s-button variant="primary" tone="critical">Delete selected</s-button>
-</s-stack>

package/src/surfaces/admin/components/Button/examples/bulk-actions.jsx

@@ -1,6 +0,0 @@
-<s-stack direction="inline" gap="base">
-  <s-button variant="secondary">Export selected</s-button>
-  <s-button variant="primary" tone="critical">
-    Delete selected
-  </s-button>
-</s-stack>

package/src/surfaces/admin/components/Button/examples/component-interactions.jsx

@@ -1,7 +0,0 @@
-<s-stack direction="inline" gap="base">
-  {/* Button that navigates using Shopify's navigation system. Use shopify:navigate for navigation. Refer to [handling navigation events](/docs/api/app-home?accordionItem=getting-started-existing-remix-application) for implementation details and framework-specific examples. */}
-  <s-button href="javascript:void(0)">Edit details</s-button>
-
-  {/* Button that expresses interest in specific data */}
-  <s-button interestFor="selected-products">Bulk edit</s-button>
-</s-stack>

package/src/surfaces/admin/components/Button/examples/default.jsx

@@ -1,4 +0,0 @@
-<>
-  <s-button variant="primary">Add Product</s-button>
-  <s-button variant="secondary">Save Theme</s-button>
-</>

package/src/surfaces/admin/components/Button/examples/delete-confirmation.jsx

@@ -1,6 +0,0 @@
-<s-stack direction="inline" gap="base">
-  <s-button variant="secondary">Cancel</s-button>
-  <s-button variant="primary" tone="critical">
-    Delete variant
-  </s-button>
-</s-stack>

package/src/surfaces/admin/components/Button/examples/form-states.jsx

@@ -1,6 +0,0 @@
-<s-stack direction="inline" gap="base">
-  <s-button disabled>Save draft</s-button>
-  <s-button type="submit" variant="primary">
-    Save product
-  </s-button>
-</s-stack>

package/src/surfaces/admin/components/Button/examples/icon-only-button.jsx

@@ -1 +0,0 @@
-<s-button icon="plus" accessibilityLabel="Add product" />

package/src/surfaces/admin/components/Button/examples/link-buttons.jsx

@@ -1,9 +0,0 @@
-<s-stack direction="inline" gap="base">
-  <s-button href="javascript:void(0)">View products</s-button>
-  <s-button href="javascript:void(0)" target="_blank">
-    Help docs
-  </s-button>
-  <s-button href="javascript:void(0)" download="sales-report.csv">
-    Export data
-  </s-button>
-</s-stack>

package/src/surfaces/admin/components/Button/examples/loading-state-for-merchant-actions.jsx

@@ -1,11 +0,0 @@
-<s-stack direction="inline" gap="base">
-  <s-button loading variant="primary">
-    Saving product...
-  </s-button>
-  <s-button loading variant="secondary">
-    Updating 247 variants...
-  </s-button>
-  <s-button loading tone="neutral">
-    Processing shipment...
-  </s-button>
-</s-stack>

package/src/surfaces/admin/components/Button/examples/navigation-to-admin-sections.html

@@ -1,2 +0,0 @@
-<!-- Button that navigates using Shopify's navigation system. Use shopify:navigate for navigation. Refer to [handling navigation events](/docs/api/app-home?accordionItem=getting-started-existing-remix-application) for implementation details and framework-specific examples. -->
-<s-button href="javascript:void(0)" icon="order">View orders</s-button>

package/src/surfaces/admin/components/Button/examples/navigation-to-admin-sections.jsx

@@ -1,3 +0,0 @@
-<s-button href="javascript:void(0)" icon="order">
-  View orders
-</s-button>

package/src/surfaces/admin/components/Button/examples/product-save-form.html

@@ -1,4 +0,0 @@
-<s-stack direction="inline" gap="base" justifyContent="end">
-  <s-button variant="secondary">Cancel</s-button>
-  <s-button variant="primary" type="submit">Save product</s-button>
-</s-stack>

package/src/surfaces/admin/components/Button/examples/product-save-form.jsx

@@ -1,6 +0,0 @@
-<s-stack direction="inline" gap="base" justifyContent="end">
-  <s-button variant="secondary">Cancel</s-button>
-  <s-button variant="primary" type="submit">
-    Save product
-  </s-button>
-</s-stack>

package/src/surfaces/admin/components/Button/examples/tones.jsx

@@ -1,5 +0,0 @@
-<s-stack direction="inline" gap="base">
-  <s-button tone="critical">Delete</s-button>
-  <s-button tone="neutral">Save draft</s-button>
-  <s-button>Continue</s-button>
-</s-stack>

package/src/surfaces/admin/components/Button/examples/toolbar-icon-buttons.html

@@ -1,17 +0,0 @@
-<s-stack direction="inline" gap="base">
-  <s-button
-    icon="duplicate"
-    variant="tertiary"
-    accessibilityLabel="Duplicate product"
-  ></s-button>
-  <s-button
-    icon="view"
-    variant="tertiary"
-    accessibilityLabel="Preview product"
-  ></s-button>
-  <s-button
-    icon="menu-horizontal"
-    variant="tertiary"
-    accessibilityLabel="More actions"
-  ></s-button>
-</s-stack>

package/src/surfaces/admin/components/Button/examples/toolbar-icon-buttons.jsx

@@ -1,17 +0,0 @@
-<s-stack direction="inline" gap="base">
-  <s-button
-    icon="duplicate"
-    variant="tertiary"
-    accessibilityLabel="Duplicate product"
-   />
-  <s-button
-    icon="view"
-    variant="tertiary"
-    accessibilityLabel="Preview product"
-   />
-  <s-button
-    icon="menu-horizontal"
-    variant="tertiary"
-    accessibilityLabel="More actions"
-   />
-</s-stack>

package/src/surfaces/admin/components/Button/examples/variants.jsx

@@ -1,6 +0,0 @@
-<s-stack direction="inline" gap="base">
-  <s-button variant="primary">Primary</s-button>
-  <s-button variant="secondary">Secondary</s-button>
-  <s-button variant="tertiary">Tertiary</s-button>
-  <s-button variant="auto">Auto</s-button>
-</s-stack>

package/src/surfaces/admin/components/Button/examples/with-icon.jsx

@@ -1 +0,0 @@
-<s-button icon="plus">Add product</s-button>

package/src/surfaces/admin/components/ButtonGroup/examples/basic-usage.html

@@ -1,4 +0,0 @@
-<s-button-group>
-  <s-button slot="secondary-actions">Cancel</s-button>
-  <s-button slot="primary-action" variant="primary">Save</s-button>
-</s-button-group>

package/src/surfaces/admin/components/ButtonGroup/examples/basic-usage.jsx

@@ -1,6 +0,0 @@
-<s-button-group>
-  <s-button slot="secondary-actions">Cancel</s-button>
-  <s-button slot="primary-action" variant="primary">
-    Save
-  </s-button>
-</s-button-group>

package/src/surfaces/admin/components/ButtonGroup/examples/bulk-actions-in-data-tables.jsx

@@ -1,7 +0,0 @@
-<s-button-group>
-  <s-button slot="secondary-actions">Archive</s-button>
-  <s-button slot="secondary-actions">Export</s-button>
-  <s-button slot="secondary-actions" tone="critical">
-    Delete
-  </s-button>
-</s-button-group>

package/src/surfaces/admin/components/ButtonGroup/examples/destructive-actions-pattern.jsx

@@ -1,6 +0,0 @@
-<s-button-group>
-  <s-button slot="secondary-actions">Cancel</s-button>
-  <s-button slot="secondary-actions" tone="critical">
-    Delete product
-  </s-button>
-</s-button-group>

package/src/surfaces/admin/components/ButtonGroup/examples/form-action-buttons.html

@@ -1,4 +0,0 @@
-<s-button-group>
-  <s-button slot="secondary-actions">Cancel</s-button>
-  <s-button slot="primary-action" variant="primary">Save product</s-button>
-</s-button-group>

package/src/surfaces/admin/components/ButtonGroup/examples/form-action-buttons.jsx

@@ -1,6 +0,0 @@
-<s-button-group>
-  <s-button slot="secondary-actions">Cancel</s-button>
-  <s-button slot="primary-action" variant="primary">
-    Save product
-  </s-button>
-</s-button-group>

package/src/surfaces/admin/components/ButtonGroup/examples/segmented-appearance.jsx

@@ -1,5 +0,0 @@
-<s-button-group gap="none">
-  <s-button slot="secondary-actions">Day</s-button>
-  <s-button slot="secondary-actions">Week</s-button>
-  <s-button slot="secondary-actions">Month</s-button>
-</s-button-group>

package/src/surfaces/admin/components/ButtonGroup/examples/toolbar-buttons-with-icons.jsx

@@ -1,11 +0,0 @@
-<s-button-group>
-  <s-button slot="secondary-actions" icon="duplicate">
-    Duplicate
-  </s-button>
-  <s-button slot="secondary-actions" icon="archive">
-    Archive
-  </s-button>
-  <s-button slot="secondary-actions" icon="delete" tone="critical">
-    Delete
-  </s-button>
-</s-button-group>

package/src/surfaces/admin/components/Checkbox/examples/default.jsx

@@ -1,4 +0,0 @@
-<s-checkbox
-  label="Require a confirmation step"
-  details="Ensure all criteria are met before proceeding"
- />

package/src/surfaces/admin/components/Checkbox/examples/disabled-state.jsx

@@ -1,5 +0,0 @@
-<s-checkbox
-  label="Advanced settings"
-  disabled
-  details="Contact your administrator to enable advanced settings"
- />

package/src/surfaces/admin/components/Checkbox/examples/error-state.jsx

@@ -1,4 +0,0 @@
-<s-checkbox
-  label="I agree to the terms"
-  error="You must accept the terms to continue"
-/>

package/src/surfaces/admin/components/Checkbox/examples/help-text.html

@@ -1,4 +0,0 @@
-<s-checkbox
-  label="Send order notifications"
-  details="You'll receive emails when orders are placed, fulfilled, or cancelled"
-></s-checkbox>

package/src/surfaces/admin/components/Checkbox/examples/help-text.jsx

@@ -1,4 +0,0 @@
-<s-checkbox
-  label="Send order notifications"
-  details="You'll receive emails when orders are placed, fulfilled, or cancelled"
- />

package/src/surfaces/admin/components/Checkbox/examples/indeterminate-state.jsx

@@ -1,21 +0,0 @@
-const [selectedItems, setSelectedItems] = useState([]);
-const items = ['Item 1', 'Item 2', 'Item 3'];
-
-const toggleItem = (value, checked) => setSelectedItems(checked ? [...selectedItems, value] : selectedItems.filter(item => item !== value));
-const toggleAll = (checked) => setSelectedItems(checked ? items : []);
-const isSelected = (item) => selectedItems.includes(item);
-
-return (
-  <s-stack gap="small">
-    <s-checkbox
-      label="Select all items"
-      indeterminate={selectedItems.length !== 0 && selectedItems.length !== items.length}
-      checked={selectedItems.length === items.length}
-      onChange={e => toggleAll(e.currentTarget.checked)}
-    />
-    <s-divider />
-    {items.map(i => (
-      <s-checkbox key={i} label={i} checked={isSelected(i)} onChange={e => toggleItem(i, e.currentTarget.checked)} />
-    ))}
-  </s-stack>
-);

package/src/surfaces/admin/components/Checkbox/examples/settings-group.jsx

@@ -1,12 +0,0 @@
-<s-stack gap="base">
-  <s-checkbox label="Show only published products" checked />
-  <s-checkbox
-    label="Enable inventory tracking"
-    details="Track inventory levels and receive low stock alerts"
-    checked
-   />
-  <s-checkbox
-    label="View customer data"
-    details="Allow staff to access customer contact information and order history"
-   />
-</s-stack>

package/src/surfaces/admin/components/Checkbox/examples/validation-example.jsx

@@ -1,20 +0,0 @@
-const [checked, setChecked] = useState(false);
-const errorMessage = 'You must accept the terms to continue';
-const [error, setError] = useState(errorMessage);
-
-return (
-  <s-section>
-    <s-stack gap="base" justifyContent="start">
-      <s-text-field label="Name" />
-      <s-checkbox
-        label="I agree to the terms"
-        checked={checked}
-        error={error}
-        onChange={(e) => {
-          setChecked(e.currentTarget.checked);
-          setError(e.currentTarget.checked ? '' : errorMessage);
-        }}
-      />
-    </s-stack>
-  </s-section>
-)

package/src/surfaces/admin/components/Chip/examples/basic-usage.html

@@ -1,3 +0,0 @@
-<s-chip color="base" accessibilityLabel="Product status indicator">
-  Active
-</s-chip>

package/src/surfaces/admin/components/Chip/examples/basic-usage.jsx

@@ -1,3 +0,0 @@
-<s-chip color="base" accessibilityLabel="Product status indicator">
-  Active
-</s-chip>

package/src/surfaces/admin/components/Chip/examples/color-variants.jsx

@@ -1,12 +0,0 @@
-<s-stack direction="inline" gap="base">
-  <s-chip color="subdued" accessibilityLabel="Secondary information">
-    Draft
-  </s-chip>
-  <s-chip color="base" accessibilityLabel="Standard information">
-    Published
-  </s-chip>
-  <s-chip color="strong" accessibilityLabel="Important status">
-    <s-icon slot="graphic" type="check" size="small" />
-    Verified
-  </s-chip>
-</s-stack>

package/src/surfaces/admin/components/Chip/examples/default.jsx

@@ -1 +0,0 @@
-<s-chip>Chip</s-chip>

package/src/surfaces/admin/components/Chip/examples/product-status.html

@@ -1,8 +0,0 @@
-<s-stack direction="inline" gap="base">
-  <s-chip color="base" accessibilityLabel="Product status">Active</s-chip>
-  <s-chip color="subdued" accessibilityLabel="Product status">Draft</s-chip>
-  <s-chip color="strong" accessibilityLabel="Product status">
-    <s-icon slot="graphic" type="check" size="small"></s-icon>
-    Published
-  </s-chip>
-</s-stack>

package/src/surfaces/admin/components/Chip/examples/product-status.jsx

@@ -1,12 +0,0 @@
-<s-stack direction="inline" gap="base">
-  <s-chip color="base" accessibilityLabel="Product status">
-    Active
-  </s-chip>
-  <s-chip color="subdued" accessibilityLabel="Product status">
-    Draft
-  </s-chip>
-  <s-chip color="strong" accessibilityLabel="Product status">
-    <s-icon slot="graphic" type="check" size="small" />
-    Published
-  </s-chip>
-</s-stack>

package/src/surfaces/admin/components/Chip/examples/text-truncation.jsx

@@ -1,12 +0,0 @@
-<s-box maxInlineSize="200px">
-  <s-stack gap="base">
-    <s-chip color="base" accessibilityLabel="Long product name">
-      This is a very long product name that will be truncated with ellipsis when
-      it exceeds the container width
-    </s-chip>
-    <s-chip color="strong" accessibilityLabel="Long category name">
-      <s-icon slot="graphic" type="catalog-product" size="small" />
-      Electronics and computer accessories category with extended description
-    </s-chip>
-  </s-stack>
-</s-box>

package/src/surfaces/admin/components/Chip/examples/with-icon-graphic.jsx

@@ -1,4 +0,0 @@
-<s-chip color="strong" accessibilityLabel="Product category">
-  <s-icon slot="graphic" type="catalog-product" size="small" />
-  Electronics
-</s-chip>