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

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

@@ -1,4 +1,3 @@
-
 // ===
 // Settings page pattern
 // ===
@@ -24,59 +23,81 @@ export default function SettingsPage() {
         {/* Store Information */}
         {/* === */}
         <s-section heading="Store Information">
-            <s-text-field
-              label="Store name"
-              name="store-name"
-              value="Puzzlify Store"
-              placeholder="Enter store name"
-            />
-            <s-text-field
-              label="Business address"
-              name="business-address"
-              value="123 Main St, Anytown, USA"
-              placeholder="Enter business address"
-            />
-            <s-text-field
-              label="Store phone"
-              name="store-phone"
-              value="+1 (555) 123-4567"
-              placeholder="Enter phone number"
-            />
-            <s-choice-list label="Primary currency" name="currency">
-              <s-choice label="US Dollar ($)" value="usd" selected></s-choice>
-              <s-choice label="Canadian Dollar (CAD)" value="cad"></s-choice>
-              <s-choice label="Euro (€)" value="eur"></s-choice>
-            </s-choice-list>
+          <s-text-field
+            label="Store name"
+            name="store-name"
+            value="Puzzlify Store"
+            placeholder="Enter store name"
+          />
+          <s-text-field
+            label="Business address"
+            name="business-address"
+            value="123 Main St, Anytown, USA"
+            placeholder="Enter business address"
+          />
+          <s-text-field
+            label="Store phone"
+            name="store-phone"
+            value="+1 (555) 123-4567"
+            placeholder="Enter phone number"
+          />
+          <s-choice-list label="Primary currency" name="currency">
+            <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>
         </s-section>
 
         {/* === */}
         {/* Notifications */}
         {/* === */}
         <s-section heading="Notifications">
-            <s-select label="Notification frequency" name="notification-frequency">
-              <s-option value="immediately" selected>Immediately</s-option>
-              <s-option value="hourly">Hourly digest</s-option>
-              <s-option value="daily">Daily digest</s-option>
-            </s-select>
-            <s-choice-list label="Notification types" name="notifications-type" multiple>
-              <s-choice label="New order notifications" value="new-order" selected></s-choice>
-              <s-choice label="Low stock alerts" value="low-stock"></s-choice>
-              <s-choice label="Customer review notifications" value="customer-review"></s-choice>
-              <s-choice label="Shipping updates" value="shipping-updates"></s-choice>
-            </s-choice-list>
+          <s-select
+            label="Notification frequency"
+            name="notification-frequency"
+          >
+            <s-option value="immediately" selected>
+              Immediately
+            </s-option>
+            <s-option value="hourly">Hourly digest</s-option>
+            <s-option value="daily">Daily digest</s-option>
+          </s-select>
+          <s-choice-list
+            label="Notification types"
+            name="notifications-type"
+            multiple
+          >
+            <s-choice value="new-order" selected>
+              New order notifications
+            </s-choice>
+            <s-choice value="low-stock">Low stock alerts</s-choice>
+            <s-choice value="customer-review">
+              Customer review notifications
+            </s-choice>
+            <s-choice value="shipping-updates">Shipping updates</s-choice>
+          </s-choice-list>
         </s-section>
 
         {/* === */}
         {/* Preferences */}
         {/* === */}
         <s-section heading="Preferences">
-          <s-stack gap="none" border="base" borderRadius="base" overflow="hidden">
+        <s-box
+            border="base"
+            borderRadius="base"
+          >
             <s-clickable
               padding="small-100"
               href="/app/settings/shipping"
               accessibilityLabel="Configure shipping methods, rates, and fulfillment options"
             >
-              <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
+              <s-grid
+                gridTemplateColumns="1fr auto"
+                alignItems="center"
+                gap="base"
+              >
                 <s-box>
                   <s-heading>Shipping & fulfillment</s-heading>
                   <s-paragraph color="subdued">
@@ -95,11 +116,16 @@ export default function SettingsPage() {
               href="/app/settings/products_catalog"
               accessibilityLabel="Configure product defaults, customer experience, and catalog settings"
             >
-              <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
+              <s-grid
+                gridTemplateColumns="1fr auto"
+                alignItems="center"
+                gap="base"
+              >
                 <s-box>
                   <s-heading>Products & catalog</s-heading>
                   <s-paragraph color="subdued">
-                    Product defaults, customer experience, and catalog display options.
+                    Product defaults, customer experience, and catalog display
+                    options.
                   </s-paragraph>
                 </s-box>
                 <s-icon type="chevron-right"></s-icon>
@@ -114,30 +140,45 @@ export default function SettingsPage() {
               href="/app/settings/customer_support"
               accessibilityLabel="Manage customer support settings and help resources"
             >
-              <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
+              <s-grid
+                gridTemplateColumns="1fr auto"
+                alignItems="center"
+                gap="base"
+              >
                 <s-box>
                   <s-heading>Customer support</s-heading>
                   <s-paragraph color="subdued">
-                    Support settings, help resources, and customer service tools.
+                    Support settings, help resources, and customer service
+                    tools.
                   </s-paragraph>
                 </s-box>
                 <s-icon type="chevron-right"></s-icon>
               </s-grid>
             </s-clickable>
-          </s-stack>
+          </s-box>
         </s-section>
 
         {/* === */}
         {/* Tools */}
         {/* === */}
         <s-section heading="Tools">
-          <s-stack gap="none" border="base" borderRadius="base" overflow="hidden">
+          <s-stack
+            gap="none"
+            border="base"
+            borderRadius="base"
+            overflow="hidden"
+          >
             <s-box padding="small-100">
-              <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
+              <s-grid
+                gridTemplateColumns="1fr auto"
+                alignItems="center"
+                gap="base"
+              >
                 <s-box>
                   <s-heading>Reset app settings</s-heading>
                   <s-paragraph color="subdued">
-                    Reset all settings to their default values. This action cannot be undone.
+                    Reset all settings to their default values. This action
+                    cannot be undone.
                   </s-paragraph>
                 </s-box>
                 <s-button tone="critical">Reset</s-button>
@@ -148,7 +189,11 @@ export default function SettingsPage() {
             </s-box>
 
             <s-box padding="small-100">
-              <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
+              <s-grid
+                gridTemplateColumns="1fr auto"
+                alignItems="center"
+                gap="base"
+              >
                 <s-box>
                   <s-heading>Export settings</s-heading>
                   <s-paragraph color="subdued">
@@ -163,4 +208,4 @@ export default function SettingsPage() {
       </s-page>
     </form>
   );
-}
+}

package/src/surfaces/admin/components/patterns/examples/setupGuide.html

@@ -0,0 +1,91 @@
+<s-section>
+  <s-grid gap="base">
+    <s-grid gap="small-200">
+      <s-grid gridTemplateColumns="1fr auto auto" gap="small-300" alignItems="center">
+        <s-heading>Setup Guide</s-heading>
+        <s-button
+          accessibilityLabel="Dismiss Guide"
+          variant="tertiary"
+          tone="neutral"
+          icon="x"
+        ></s-button>
+        <s-button
+          accessibilityLabel="Toggle setup guide"
+          variant="tertiary"
+          tone="neutral"
+          icon="chevron-up"
+        ></s-button>
+      </s-grid>
+      <s-paragraph>
+        Use this personalized guide to get your store ready for sales.
+      </s-paragraph>
+        <s-paragraph tone="subdued">0 out of 3 steps completed</s-paragraph>
+    </s-grid>
+    <s-box borderRadius="base" border="base" background="base">
+      <s-box>
+          <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
+            <s-checkbox
+              label="Upload an image for your puzzle"
+            ></s-checkbox>
+            <s-button
+              accessibilityLabel="Toggle step 1 details"
+              variant="tertiary"
+              icon="chevron-up"
+            ></s-button>
+          </s-grid>
+        <s-box padding="small" paddingBlockStart="none">
+          <s-box padding="base" background="subdued" borderRadius="base">
+            <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
+              <s-grid gap="small-200">
+                <s-paragraph>
+                  Start by uploading a high-quality image that will be used to create your
+                  puzzle. For best results, use images that are at least 1200x1200 pixels.
+                </s-paragraph>
+                <s-stack direction="inline" gap="small-200">
+                  <s-button variant="primary">
+                    Upload image
+                  </s-button>
+                  <s-button variant="tertiary" tone="neutral"> Image requirements </s-button>
+                </s-stack>
+              </s-grid>
+              <s-box maxBlockSize="80px" maxInlineSize="80px">
+                <s-image
+                  src="https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg"
+                  alt="Customize checkout illustration"
+                ></s-image>
+              </s-box>
+            </s-grid>
+          </s-box>
+        </s-box>
+      </s-box>
+      <s-divider></s-divider>
+      <s-box>
+          <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
+            <s-checkbox
+              label="Choose a puzzle template"
+            ></s-checkbox>
+            <s-button
+              accessibilityLabel="Toggle step 2 details"
+              variant="tertiary"
+              icon="chevron-down"
+            ></s-button>
+          </s-grid>
+        <s-box padding="small" paddingBlockStart="none" style="display: none;"></s-box>
+      </s-box>
+      <s-divider></s-divider>
+      <s-box>
+          <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
+            <s-checkbox
+              label="Customize puzzle piece shapes"
+            ></s-checkbox>
+            <s-button
+              accessibilityLabel="Toggle step 3 details"
+              variant="tertiary"
+              icon="chevron-down"
+            ></s-button>
+          </s-grid>
+        <s-box padding="small" paddingBlockStart="none" style="display: none;"></s-box>
+      </s-box>
+    </s-box>
+  </s-grid>
+</s-section>

package/src/surfaces/admin/components/patterns/index.ab.doc.ts

@@ -6,10 +6,10 @@ const data: ReferenceEntityTemplateSchema = {
     'Manage objects efficiently with dynamic table actions.',
   description: `The index layout lets merchants view and manage all their objects at once in a table format. They can filter, sort and do quick actions on their objects. To prevent tables from becoming visually cluttered, reveal actions only when the row is hovered over or selected
 
-  | Used to    | Examples |
-| -------- | ------- |
-| View all objects at once  | Products, orders, customers, discounts    |
-| Perform bulk actions | Delete products, pause/activate campaigns      |
+  | Used to | Examples |
+  | --- | --- |
+  | View all objects at once | Products, orders, customers, discounts |
+  | Perform bulk actions | Delete products, pause/activate campaigns |
 
   ![Preview of the index pattern](/assets/templated-apis-screenshots/admin/patterns/index-example.png)
 
@@ -47,6 +47,7 @@ const data: ReferenceEntityTemplateSchema = {
   </style>`,
   isVisualComponent: true,
   category: 'Patterns',
+  subCategory: 'Templates',
   thumbnail: '/assets/templated-apis-screenshots/admin/patterns/index.png',
   defaultExample: {
     codeblock: {

package/src/surfaces/admin/components/shared.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.12.0 **/
+/** VERSION: 1.18.0 **/
 
 /* eslint-disable @typescript-eslint/ban-types */
 
@@ -8,7 +8,7 @@
  * TODO: Update `any` type here after this is resolved
  * https://github.com/Shopify/ui-api-design/issues/139
  */
-type ComponentChildren = any;
+export type ComponentChildren = any;
 export type StringChildren = string;
 export interface GlobalProps {
   /**
@@ -2979,6 +2979,49 @@ interface MenuProps$1 extends GlobalProps {
    */
   children?: ComponentChildren;
 }
+interface ModalProps$1
+  extends GlobalProps,
+    BaseOverlayProps,
+    BaseOverlayMethods,
+    ActionSlots {
+  /**
+   * A label that describes the purpose of the modal. When set,
+   * it will be announced to users using assistive technologies and will
+   * provide them with more context.
+   *
+   * This overrides the `heading` prop for screen readers.
+   */
+  accessibilityLabel?: string;
+  /**
+   * A title that describes the content of the Modal.
+   *
+   */
+  heading?: string;
+  /**
+   * Adjust the padding around the Modal content.
+   *
+   * `base`: applies padding that is appropriate for the element.
+   *
+   * `none`: removes all padding from the element. This can be useful when elements inside the Modal need to span
+   * to the edge of the Modal. For example, a full-width image. In this case, rely on `Box` with a padding of 'base'
+   * to bring back the desired padding for the rest of the content.
+   *
+   * @default 'base'
+   */
+  padding?: 'base' | 'none';
+  /**
+   * Adjust the size of the Modal.
+   *
+   * `max`: expands the Modal to its maximum size as defined by the host application, on both the horizontal and vertical axes.
+   *
+   * @default 'base'
+   */
+  size?: SizeKeyword | 'max';
+  /**
+   * The content of the Modal.
+   */
+  children?: ComponentChildren;
+}
 interface MoneyFieldProps$1
   extends GlobalProps,
     BaseTextFieldProps,