@shopify/ui-extensions 2025.10.2 → 2025.10.4

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

@@ -0,0 +1,9 @@
+<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.html

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

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

@@ -0,0 +1,7 @@
+<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

@@ -0,0 +1,7 @@
+<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

@@ -0,0 +1,7 @@
+<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/ColorField.d.ts

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

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

@@ -0,0 +1,3 @@
+<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

@@ -0,0 +1,3 @@
+<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.html

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+<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/ColorPicker.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.20.0 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -16,6 +16,15 @@ export type CallbackEventListener<T extends keyof HTMLElementTagNameMap> =
       (event: CallbackEvent<T>): void;
     })
   | null;
+/** Used when an element does not have children. */
+export interface PreactBaseElementProps<TClass extends HTMLElement> {
+  /** Assigns a unique key to this element. */
+  key?: preact.Key;
+  /** Assigns a ref (generally from `useRef()`) to this element. */
+  ref?: preact.Ref<TClass>;
+  /** Assigns this element to a parent's slot. */
+  slot?: Lowercase<string>;
+}
 
 export interface ColorPickerProps
   extends Required<
@@ -108,7 +117,7 @@ declare global {
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: ColorPickerJSXProps;
+      [tagName]: ColorPickerJSXProps & PreactBaseElementProps<ColorPicker>;
     }
   }
 }

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

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

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

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

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

@@ -0,0 +1,29 @@
+<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

@@ -0,0 +1,29 @@
+<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.html

@@ -0,0 +1,19 @@
+<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>
+
+    <s-date-field
+      label="End date"
+      name="endDate"
+      id="report-end"
+    ></s-date-field>
+  </s-stack>
+
+  <s-button variant="primary">Generate report</s-button>
+</s-stack>

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

@@ -0,0 +1,19 @@
+<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

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

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

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

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

@@ -0,0 +1,15 @@
+<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.html

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

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

@@ -0,0 +1,27 @@
+<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.html

@@ -0,0 +1,6 @@
+<s-date-field
+  label="Event date"
+  name="eventDate"
+  required
+  error="Select a valid event date"
+></s-date-field>

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

@@ -0,0 +1,20 @@
+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.html

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

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

@@ -0,0 +1,6 @@
+<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.html

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

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

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

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

@@ -0,0 +1,6 @@
+<s-date-field
+  label="Event date"
+  name="eventDate"
+  required
+  error="Select a valid event date"
+></s-date-field>

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

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

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

@@ -0,0 +1,6 @@
+<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"
+></s-date-field>

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

@@ -0,0 +1,6 @@
+<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/DateField.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.20.0 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -21,6 +21,15 @@ export type CallbackEventListener<T extends keyof HTMLElementTagNameMap> =
       (event: CallbackEvent<T>): void;
     })
   | null;
+/** Used when an element does not have children. */
+export interface PreactBaseElementProps<TClass extends HTMLElement> {
+  /** Assigns a unique key to this element. */
+  key?: preact.Key;
+  /** Assigns a ref (generally from `useRef()`) to this element. */
+  ref?: preact.Ref<TClass>;
+  /** Assigns this element to a parent's slot. */
+  slot?: Lowercase<string>;
+}
 
 export type Styles = string;
 export type RenderImpl = Omit<ShadowRootInit, 'mode'> & {
@@ -221,7 +230,7 @@ declare global {
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: DateFieldJSXProps;
+      [tagName]: DateFieldJSXProps & PreactBaseElementProps<DateField>;
     }
   }
 }

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

@@ -0,0 +1,45 @@
+<!-- Quick date selection with onChange callback -->
+<s-stack gap="base">
+  <s-button-group>
+    <s-button slot="secondary-actions" id="last-7-days">Last 7 days</s-button>
+    <s-button slot="secondary-actions" id="last-30-days">Last 30 days</s-button>
+    <s-button slot="secondary-actions" id="this-month">This month</s-button>
+  </s-button-group>
+  <s-date-picker
+    type="range"
+    name="analytics-period"
+    id="analytics-picker"
+    value="2025-01-01--2025-01-31"
+    view="2025-01"
+    onchange="console.log('Date range changed:', event.target.value)"
+  ></s-date-picker>
+  <s-text id="selected-range">
+    Selected range: 2025-01-01--2025-01-31
+  </s-text>
+</s-stack>
+
+<script>
+  const picker = document.getElementById('analytics-picker');
+  const display = document.getElementById('selected-range');
+
+  // Handle picker changes
+  picker.addEventListener('change', (event) => {
+    display.textContent = `Selected range: ${event.target.value}`;
+  });
+
+  // Quick selection buttons
+  document.getElementById('last-7-days').addEventListener('click', () => {
+    picker.value = '2025-01-07--2025-01-13';
+    display.textContent = 'Selected range: 2025-01-07--2025-01-13';
+  });
+
+  document.getElementById('last-30-days').addEventListener('click', () => {
+    picker.value = '2024-12-14--2025-01-13';
+    display.textContent = 'Selected range: 2024-12-14--2025-01-13';
+  });
+
+  document.getElementById('this-month').addEventListener('click', () => {
+    picker.value = '2025-01-01--2025-01-31';
+    display.textContent = 'Selected range: 2025-01-01--2025-01-31';
+  });
+</script>

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

@@ -0,0 +1,35 @@
+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 +1,5 @@
-  <s-date-picker></s-date-picker>
+<s-date-picker
+  view="2025-05"
+  type="range"
+  value="2025-05-28--2025-05-31"
+ />

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

@@ -0,0 +1,13 @@
+<form>
+  <s-text-field
+    label="Order number"
+    placeholder="Search orders..."
+  ></s-text-field>
+  <s-date-picker
+    type="range"
+    name="order-date-range"
+    value="2024-01-01--2024-01-31"
+    view="2024-01"
+  ></s-date-picker>
+  <s-button type="submit">Apply filters</s-button>
+</form>

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

@@ -0,0 +1,28 @@
+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.html

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

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

@@ -0,0 +1,6 @@
+<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.html

@@ -0,0 +1,8 @@
+<!-- Disable past dates and far future dates -->
+<s-date-picker
+  type="single"
+  name="appointment-date"
+  disallow="past"
+  allow="2024-06-01--2024-06-31"
+  view="2024-06"
+></s-date-picker>

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

@@ -0,0 +1,7 @@
+<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/DatePicker.d.ts

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

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

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

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

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

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

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

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

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

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

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