@shopify/ui-extensions 2025.10.13 → 2025.10.15

package/src/surfaces/admin/components/Clickable/examples/section-with-clickable-action.jsx

@@ -1,9 +0,0 @@
-<s-box padding="large-400" background="base" borderRadius="small-200">
-  <s-stack gap="large-300">
-    <s-heading>Product settings</s-heading>
-    <s-text>Configure your product inventory and pricing settings.</s-text>
-    <s-clickable background="base" padding="base" borderRadius="small">
-      <s-text type="strong">Configure settings</s-text>
-    </s-clickable>
-  </s-stack>
-</s-box>

package/src/surfaces/admin/components/ClickableChip/examples/as-a-link.jsx

@@ -1,8 +0,0 @@
-<s-clickable-chip
-  color="subdued"
-  href="javascript:void(0)"
-  accessibilityLabel="View T-shirt product"
->
-  <s-icon slot="graphic" type="product" />
-  T-shirt
-</s-clickable-chip>

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

@@ -1,17 +0,0 @@
-<s-stack direction="inline" gap="base">
-  <s-clickable-chip color="base" accessibilityLabel="Filter by active products">
-    Active
-  </s-clickable-chip>
-  <s-clickable-chip
-    color="subdued"
-    accessibilityLabel="Filter by draft products"
-  >
-    Draft
-  </s-clickable-chip>
-  <s-clickable-chip
-    color="strong"
-    accessibilityLabel="Filter by archived products"
-  >
-    Archived
-  </s-clickable-chip>
-</s-stack>

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

@@ -1 +0,0 @@
-<s-clickable-chip>Clickable chip</s-clickable-chip>

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

@@ -1,7 +0,0 @@
-<s-clickable-chip
-  color="base"
-  disabled
-  accessibilityLabel="Status filter (disabled)"
->
-  Inactive
-</s-clickable-chip>

package/src/surfaces/admin/components/ClickableChip/examples/multiple-chips-with-proper-spacing.html

@@ -1,17 +0,0 @@
-<s-stack direction="inline" gap="base">
-  <s-clickable-chip accessibilityLabel="Filter by status">
-    Active
-  </s-clickable-chip>
-  <s-clickable-chip
-    color="strong"
-    accessibilityLabel="Remove status filter"
-    removable
-  >
-    <s-icon slot="graphic" type="check-circle"></s-icon>
-    In progress
-  </s-clickable-chip>
-  <s-clickable-chip color="subdued" accessibilityLabel="Filter by category">
-    <s-icon slot="graphic" type="filter"></s-icon>
-    Category
-  </s-clickable-chip>
-</s-stack>

package/src/surfaces/admin/components/ClickableChip/examples/multiple-chips-with-proper-spacing.jsx

@@ -1,17 +0,0 @@
-<s-stack direction="inline" gap="base">
-  <s-clickable-chip accessibilityLabel="Filter by status">
-    Active
-  </s-clickable-chip>
-  <s-clickable-chip
-    color="strong"
-    accessibilityLabel="Remove status filter"
-    removable
-  >
-    <s-icon slot="graphic" type="check-circle" />
-    In progress
-  </s-clickable-chip>
-  <s-clickable-chip color="subdued" accessibilityLabel="Filter by category">
-    <s-icon slot="graphic" type="filter" />
-    Category
-  </s-clickable-chip>
-</s-stack>

package/src/surfaces/admin/components/ClickableChip/examples/with-icon-and-remove-button.jsx

@@ -1,8 +0,0 @@
-<s-clickable-chip
-  color="strong"
-  accessibilityLabel="Remove status filter"
-  removable
->
-  <s-icon slot="graphic" type="check-circle" />
-  In progress
-</s-clickable-chip>

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

@@ -1,3 +0,0 @@
-<s-stack gap="base">
-  <s-color-field label="Brand color" value="#FF0000" required />
-</s-stack>

package/src/surfaces/admin/components/ColorField/examples/basic-usage-web-component.jsx

@@ -1,3 +0,0 @@
-<s-stack gap="base">
-  <s-color-field label="Brand color" name="brandColor" value="#FF0000" />
-</s-stack>

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

@@ -1 +0,0 @@
-<s-color-field placeholder="Select a color" value="#FF0000" />

package/src/surfaces/admin/components/ColorField/examples/form-integration.jsx

@@ -1,28 +0,0 @@
-<s-stack gap="base">
-  <s-section>
-    <s-heading>Theme settings</s-heading>
-    <s-stack gap="base">
-      <s-color-field
-        label="Primary brand color"
-        name="primaryColor"
-        value="#1a73e8"
-        defaultValue="#1a73e8"
-        details="This color will be used for buttons, links, and brand elements"
-        required
-       />
-      <s-color-field
-        label="Secondary color"
-        name="secondaryColor"
-        value="#34a853"
-        details="Used for secondary actions and accents"
-       />
-      <s-color-field
-        label="Background overlay"
-        name="overlayColor"
-        value="rgba(0, 0, 0, 0.5)"
-        alpha
-        details="Background color for modal overlays and dropdowns"
-       />
-    </s-stack>
-  </s-section>
-</s-stack>

package/src/surfaces/admin/components/ColorField/examples/read-only-state.jsx

@@ -1,3 +0,0 @@
-<s-stack gap="base">
-  <s-color-field label="System color" name="color" value="#1a73e8" readOnly />
-</s-stack>

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

@@ -1,21 +0,0 @@
-const [color, setColor] = useState('#invalid');
-const [error, setError] = useState('Please enter a valid color format');
-
-return (
-  <s-section>
-    <s-stack gap="base" justifyContent="start">
-      <s-text-field label="Theme name" />
-      <s-color-field
-        label="Brand color"
-        name="Color"
-        value={color}
-        error={error}
-        required
-        onInput={(e) => {
-          setColor(e.currentTarget.value);
-          setError(/^#([0-9A-F]{3}){1,2}$/i.test(e.currentTarget.value) ? '' : 'Please enter a valid color format');
-        }}
-      />
-    </s-stack>
-  </s-section>
-)

package/src/surfaces/admin/components/ColorField/examples/with-alpha-transparency.jsx

@@ -1,7 +0,0 @@
-<s-stack gap="base">
-  <s-color-field
-    label="Background color"
-    value="rgba(255, 0, 0, 0.5)"
-    alpha
-   />
-</s-stack>

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

@@ -1,9 +0,0 @@
-<s-stack gap="base">
-  <s-color-field
-    label="Brand color"
-    name="brandColor"
-    value="#invalid"
-    error="Please enter a valid color format (hex, rgb, or rgba)"
-    required
-  ></s-color-field>
-</s-stack>

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

@@ -1,7 +0,0 @@
-<s-stack gap="base">
-  <s-color-field
-    label="Primary color"
-    value="#1a73e8"
-    details="Main brand color used for buttons and links"
-   />
-</s-stack>

package/src/surfaces/admin/components/ColorField/examples/with-placeholder.html

@@ -1,7 +0,0 @@
-<s-stack gap="base">
-  <s-color-field
-    label="Theme color"
-    placeholder="Enter a hex color (e.g., #FF0000)"
-    value="#000000"
-  ></s-color-field>
-</s-stack>

package/src/surfaces/admin/components/ColorField/examples/with-placeholder.jsx

@@ -1,7 +0,0 @@
-<s-stack gap="base">
-  <s-color-field
-    label="Theme color"
-    placeholder="Enter a hex color (e.g., #FF0000)"
-    value="#000000"
-   />
-</s-stack>

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

@@ -1,3 +0,0 @@
-<s-box padding="large" border="base" borderRadius="base">
-  <s-color-picker value="#FF0000" name="primary-color"></s-color-picker>
-</s-box>

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

@@ -1,3 +0,0 @@
-<s-box padding="large" border="base" borderRadius="base">
-  <s-color-picker value="#FF0000" name="primary-color" />
-</s-box>

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

@@ -1 +0,0 @@
-<s-color-picker value="#FF0000" alpha />

package/src/surfaces/admin/components/ColorPicker/examples/with-alpha-transparency.jsx

@@ -1,7 +0,0 @@
-<s-box padding="large" border="base" borderRadius="base">
-  <s-color-picker
-    value="#FF0000FF"
-    alpha
-    name="color-with-alpha"
-   />
-</s-box>

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

@@ -1,5 +0,0 @@
-<s-date-field
-  label="Order date"
-  name="orderDate"
-  placeholder="Select date"
- />

package/src/surfaces/admin/components/DateField/examples/date-fields-with-validation.html

@@ -1,29 +0,0 @@
-<s-section>
-  <s-heading>Promotion settings</s-heading>
-  <s-stack gap="base">
-    <s-text-field
-      label="Promotion name"
-      name="promoName"
-      value="Spring sale"
-    ></s-text-field>
-
-    <s-date-field
-      label="Start date"
-      name="promoStart"
-      value="2024-04-01"
-      details="Promotion begins at midnight"
-    ></s-date-field>
-
-    <s-date-field
-      label="End date"
-      name="promoEnd"
-      value="2024-04-30"
-      details="Promotion ends at 11:59 PM"
-    ></s-date-field>
-
-    <s-checkbox
-      name="autoPublish"
-      label="Automatically publish on start date"
-    ></s-checkbox>
-  </s-stack>
-</s-section>

package/src/surfaces/admin/components/DateField/examples/date-fields-with-validation.jsx

@@ -1,29 +0,0 @@
-<s-section>
-  <s-heading>Promotion settings</s-heading>
-  <s-stack gap="base">
-    <s-text-field
-      label="Promotion name"
-      name="promoName"
-      value="Spring sale"
-     />
-
-    <s-date-field
-      label="Start date"
-      name="promoStart"
-      value="2024-04-01"
-      details="Promotion begins at midnight"
-     />
-
-    <s-date-field
-      label="End date"
-      name="promoEnd"
-      value="2024-04-30"
-      details="Promotion ends at 11:59 PM"
-     />
-
-    <s-checkbox
-      name="autoPublish"
-      label="Automatically publish on start date"
-     />
-  </s-stack>
-</s-section>

package/src/surfaces/admin/components/DateField/examples/date-range-selection.jsx

@@ -1,19 +0,0 @@
-<s-stack gap="base">
-  <s-heading>Sales report period</s-heading>
-
-  <s-stack direction="inline" gap="base">
-    <s-date-field
-      label="Start date"
-      name="startDate"
-      id="report-start"
-     />
-
-    <s-date-field
-      label="End date"
-      name="endDate"
-      id="report-end"
-     />
-  </s-stack>
-
-  <s-button variant="primary">Generate report</s-button>
-</s-stack>

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

@@ -1 +0,0 @@
-<s-date-field defaultView="2025-09" defaultValue="2025-09-01" />

package/src/surfaces/admin/components/DateField/examples/disabled-and-read-only-states.jsx

@@ -1,15 +0,0 @@
-<s-stack gap="base">
-  <s-date-field
-    label="Creation date"
-    name="createdDate"
-    value="2024-01-01"
-    readOnly
-   />
-
-  <s-date-field
-    label="Archived date"
-    name="archivedDate"
-    value="2024-02-15"
-    disabled
-   />
-</s-stack>

package/src/surfaces/admin/components/DateField/examples/form-integration.jsx

@@ -1,27 +0,0 @@
-<form>
-  <s-stack gap="base">
-    <s-text-field
-      label="Customer name"
-      name="customerName"
-      required
-     />
-
-    <s-date-field
-      label="Order date"
-      name="orderDate"
-      value="2024-03-15"
-      required
-     />
-
-    <s-date-field
-      label="Requested delivery date"
-      name="deliveryDate"
-      disallowDays="[0, 6]"
-      details="Weekdays only"
-     />
-
-    <s-button type="submit" variant="primary">
-      Process order
-    </s-button>
-  </s-stack>
-</form>

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

@@ -1,20 +0,0 @@
-const [date, setDate] = useState('');
-const [error, setError] = useState('Event date is required');
-
-return (
-  <s-section>
-    <s-stack gap="base" justifyContent="start">
-      <s-text-field label="Event name" />
-      <s-date-field
-        label="Event date"
-        value={date}
-        error={error}
-        required
-        onChange={(e) => {
-          setDate(e.currentTarget.value);
-          setError(e.currentTarget.value ? '' : 'Event date is required');
-        }}
-      />
-    </s-stack>
-  </s-section>
-)

package/src/surfaces/admin/components/DateField/examples/with-date-restrictions.jsx

@@ -1,6 +0,0 @@
-<s-date-field
-  label="Delivery date"
-  name="deliveryDate"
-  disallowDays="[0, 6]"
-  details="Delivery available Monday through Friday only"
- />

package/src/surfaces/admin/components/DateField/examples/with-default-value.jsx

@@ -1,5 +0,0 @@
-<s-date-field
-  label="Shipping date"
-  name="shippingDate"
-  value="2024-03-15"
- />

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

@@ -1,5 +0,0 @@
-<s-date-field
-  label="Event date"
-  error="Event date is required"
-  required
-/>

package/src/surfaces/admin/components/DateField/examples/with-specific-allowed-dates.jsx

@@ -1,6 +0,0 @@
-<s-date-field
-  label="Available appointment dates"
-  name="appointmentDate"
-  allow='["2024-03-20", "2024-03-22", "2024-03-25", "2024-03-27"]'
-  details="Select from available time slots"
- />

package/src/surfaces/admin/components/DatePicker/examples/analytics-dashboard.jsx

@@ -1,35 +0,0 @@
-const [value, setValue] = useState('2025-01-01--2025-01-31');
-
-const last7Days = () => {
-  setValue('2025-01-07--2025-01-13');
-}
-
-const last30Days = () => {
-  setValue('2024-12-14--2025-01-13');
-}
-
-const thisMonth = () => {
-  setValue('2025-01-01--2025-01-31');
-}
-
-return (
-  <s-stack gap="base">
-    <s-button-group>
-      <s-button slot="secondary-actions" onClick={last7Days}>Last 7 days</s-button>
-      <s-button slot="secondary-actions" onClick={last30Days}>Last 30 days</s-button>
-      <s-button slot="secondary-actions" onClick={thisMonth}>This month</s-button>
-    </s-button-group>
-    <s-date-picker
-      type="range"
-      name="analytics-period"
-      id="analytics-picker"
-      view="2025-01"
-      value={value}
-      onChange={(event) => {
-        console.log('Date range changed:', event.currentTarget.value);
-        setValue(event.currentTarget.value);
-      }}
-    />
-    <s-text>Selected range: {value}</s-text>
-  </s-stack>
-)

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

@@ -1,5 +0,0 @@
-<s-date-picker
-  view="2025-05"
-  type="range"
-  value="2025-05-28--2025-05-31"
- />

package/src/surfaces/admin/components/DatePicker/examples/form-integration.jsx

@@ -1,28 +0,0 @@
-const [dateRange, setDateRange] = useState('2024-01-01--2024-01-31');
-const [orderNumber, setOrderNumber] = useState('');
-
-const handleApplyFilters = () => {
-  console.log('Applying filters:', {
-    orderNumber,
-    dateRange
-  });
-}
-
-return (
-  <s-stack gap="base">
-    <s-text-field
-      label="Order number"
-      placeholder="Search orders..."
-      value={orderNumber}
-      onChange={(event) => setOrderNumber(event.currentTarget.value)}
-    />
-    <s-date-picker
-      type="range"
-      name="order-date-range"
-      value={dateRange}
-      onChange={(event) => setDateRange(event.currentTarget.value)}
-      view="2024-01"
-    />
-    <s-button onClick={handleApplyFilters}>Apply filters</s-button>
-  </s-stack>
-)

package/src/surfaces/admin/components/DatePicker/examples/single-date-selection.jsx

@@ -1,6 +0,0 @@
-<s-date-picker
-  type="single"
-  name="delivery-date"
-  value="2024-01-15"
-  view="2024-01"
- />

package/src/surfaces/admin/components/DatePicker/examples/with-date-restrictions.jsx

@@ -1,7 +0,0 @@
-<s-date-picker
-  type="single"
-  name="appointment-date"
-  disallow="past"
-  allow="2024-06-01--2024-06-31"
-  view="2024-06"
- />

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

@@ -1 +0,0 @@
-<s-divider />

package/src/surfaces/admin/components/Divider/examples/custom-color.jsx

@@ -1 +0,0 @@
-<s-divider color="strong" />

package/src/surfaces/admin/components/Divider/examples/custom-direction.jsx

@@ -1,5 +0,0 @@
-<s-stack direction="inline" gap="base">
-  <s-text>Item 1</s-text>
-  <s-divider direction="block" />
-  <s-text>Item 2</s-text>
-</s-stack>

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

@@ -1 +0,0 @@
-<s-divider />

package/src/surfaces/admin/components/Divider/examples/organizing-settings-panels.html

@@ -1,9 +0,0 @@
-<s-box padding="base">
-  <s-stack gap="base">
-    <s-switch label="Email notifications"></s-switch>
-    <s-switch label="Auto-save"></s-switch>
-    <s-divider></s-divider>
-    <s-switch label="Advanced settings"></s-switch>
-    <s-switch label="Developer tools"></s-switch>
-  </s-stack>
-</s-box>

package/src/surfaces/admin/components/Divider/examples/organizing-settings-panels.jsx

@@ -1,9 +0,0 @@
-<s-box padding="base">
-  <s-stack gap="base">
-    <s-switch label="Email notifications" />
-    <s-switch label="Auto-save" />
-    <s-divider />
-    <s-switch label="Advanced settings" />
-    <s-switch label="Developer tools" />
-  </s-stack>
-</s-box>

package/src/surfaces/admin/components/Divider/examples/separating-content-sections.html

@@ -1,13 +0,0 @@
-<s-stack gap="base">
-  <s-box padding="base">
-    <s-text>150 orders</s-text>
-  </s-box>
-  <s-divider></s-divider>
-  <s-box padding="base">
-    <s-text>$2,400 revenue</s-text>
-  </s-box>
-  <s-divider></s-divider>
-  <s-box padding="base">
-    <s-text>89 customers</s-text>
-  </s-box>
-</s-stack>

package/src/surfaces/admin/components/Divider/examples/separating-content-sections.jsx

@@ -1,13 +0,0 @@
-<s-stack gap="base">
-  <s-box padding="base">
-    <s-text>150 orders</s-text>
-  </s-box>
-  <s-divider />
-  <s-box padding="base">
-    <s-text>$2,400 revenue</s-text>
-  </s-box>
-  <s-divider />
-  <s-box padding="base">
-    <s-text>89 customers</s-text>
-  </s-box>
-</s-stack>

package/src/surfaces/admin/components/Divider/examples/separating-form-sections.jsx

@@ -1,7 +0,0 @@
-<s-stack gap="base">
-  <s-text-field label="Store name" />
-  <s-text-field label="Description" />
-  <s-divider />
-  <s-text-field label="Email address" />
-  <s-text-field label="Phone number" />
-</s-stack>

package/src/surfaces/admin/components/Divider/examples/visual-breaks-in-section-layouts.html

@@ -1,12 +0,0 @@
-<s-box padding="large-400" background="base">
-  <s-stack gap="base">
-    <s-heading>Order summary</s-heading>
-    <s-text>3 items</s-text>
-    <s-divider></s-divider>
-    <s-heading>Shipping address</s-heading>
-    <s-text>123 Main Street, Toronto ON</s-text>
-    <s-divider></s-divider>
-    <s-heading>Payment method</s-heading>
-    <s-text>•••• 4242</s-text>
-  </s-stack>
-</s-box>

package/src/surfaces/admin/components/Divider/examples/visual-breaks-in-section-layouts.jsx

@@ -1,12 +0,0 @@
-<s-box padding="large-400" background="base">
-  <s-stack gap="base">
-    <s-heading>Order summary</s-heading>
-    <s-text>3 items</s-text>
-    <s-divider />
-    <s-heading>Shipping address</s-heading>
-    <s-text>123 Main Street, Toronto ON</s-text>
-    <s-divider />
-    <s-heading>Payment method</s-heading>
-    <s-text>•••• 4242</s-text>
-  </s-stack>
-</s-box>

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

@@ -1 +0,0 @@
-<s-drop-zone label="Drop files to upload" multiple />

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

@@ -1,9 +0,0 @@
-<s-drop-zone
-  label="Upload"
-  accessibilityLabel="Upload image of type jpg, png, or gif"
-  accept=".jpg,.png,.gif"
-  multiple
-  onInput={(event) => console.log('onInput', event.currentTarget?.value)}
-  onChange={(event) => console.log('onChange', event.currentTarget?.value)}
-  onDropRejected={(event) => console.log('onDropRejected', event.currentTarget?.value)}
- />

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

@@ -1 +0,0 @@
-<s-drop-zone label="Upload not available" disabled />

package/src/surfaces/admin/components/DropZone/examples/file-type-restrictions.jsx

@@ -1,5 +0,0 @@
-<s-drop-zone
-  accept=".pdf,.doc,.docx"
-  label="Upload documents"
-  multiple
- />