@shopify/ui-extensions 2025.10.0-rc.2 → 2025.10.0-rc.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/ui-extensions",
-  "version": "2025.10.0-rc.2",
+  "version": "2025.10.0-rc.3",
   "scripts": {
     "docs:admin": "node ./docs/surfaces/admin/build-docs.mjs",
     "docs:checkout": "bash ./docs/surfaces/checkout/build-docs.sh",
@@ -106,7 +106,7 @@
   ],
   "devDependencies": {
     "@remote-ui/async-subscription": "^2.1.16",
-    "@shopify/generate-docs": "0.16.4",
+    "@shopify/generate-docs": "0.17.1",
     "typescript": "^4.9.0",
     "@faker-js/faker": "^8.4.1"
   },

package/src/docs/shared/components/Abbreviation.ts

@@ -6,23 +6,7 @@ const data: SharedReferenceEntityTemplateSchema = {
     'Displays abbreviated text or acronyms, revealing their full meaning or additional context through a tooltip on hover or focus. Use to clarify shortened terms, initialisms, or technical language without interrupting the reading flow.',
   category: 'Polaris web components',
   subCategory: 'Titles and text',
-  related: [
-    {
-      name: 'Text',
-      url: 'text',
-      type: 'Component',
-    },
-    {
-      name: 'Paragraph',
-      url: 'paragraph',
-      type: 'Component',
-    },
-    {
-      name: 'Time',
-      url: 'time',
-      type: 'Component',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/Badge.ts

@@ -3,21 +3,10 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'Badge',
   description:
-    "Use `s-badge` to inform merchants of the status of an object or of an action that's been taken.",
+    'Inform users about the status of an object or indicate that an action has been completed.',
   category: 'Polaris web components',
   subCategory: 'Titles and text',
-  related: [
-    {
-      type: 'component',
-      name: 'Banner',
-      url: 'banner',
-    },
-    {
-      type: 'component',
-      name: 'Text',
-      url: 'text',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/Button.ts

@@ -6,13 +6,7 @@ const data: SharedReferenceEntityTemplateSchema = {
     'Triggers actions or events, such as submitting forms, opening dialogs, or navigating to other pages. Use Button to let users perform specific tasks or initiate interactions throughout the interface. Buttons can also function as links, guiding users to internal or external destinations.',
   category: 'Polaris web components',
   subCategory: 'Actions',
-  related: [
-    {
-      name: 'Link',
-      url: 'link',
-      type: 'Component',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/Checkbox.ts

@@ -3,26 +3,10 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'Checkbox',
   description:
-    'Use `s-checkbox` when you want to provide users with a clear selection option, such as for agreeing to terms and conditions or selecting multiple options from a list.',
+    'Give users a clear way to make selections, such as agreeing to terms or choosing multiple items from a list.',
   category: 'Polaris web components',
   subCategory: 'Forms',
-  related: [
-    {
-      type: 'component',
-      name: 'Switch',
-      url: 'switch',
-    },
-    {
-      type: 'component',
-      name: 'Select',
-      url: 'select',
-    },
-    {
-      type: 'component',
-      name: 'ChoiceList',
-      url: 'choice-list',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/Choice.ts

@@ -0,0 +1,12 @@
+import {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'Choice',
+  description:
+    'Create options that let users select one or multiple items from a list of choices.',
+  category: 'Polaris web components',
+  subCategory: 'Forms',
+  related: [],
+};
+
+export default data;

package/src/docs/shared/components/ChoiceList.ts

@@ -3,21 +3,10 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'ChoiceList',
   description:
-    'Use `s-choice-list` to present multiple options to merchants. Choice lists can present options with either radio buttons for single selection or checkboxes for multiple selection.',
+    'Present multiple options to users, allowing either single selections with radio buttons or multiple selections with checkboxes.',
   category: 'Polaris web components',
   subCategory: 'Forms',
-  related: [
-    {
-      type: 'component',
-      name: 'Select',
-      url: 'select',
-    },
-    {
-      type: 'component',
-      name: 'Checkbox',
-      url: 'checkbox',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/Clickable.ts

@@ -3,21 +3,10 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'Clickable',
   description:
-    'The `s-clickable` component is an escape hatch for when `s-button` and `s-link` are not sufficient to create an interactive element.',
+    'A generic interactive container component that provides a flexible alternative for custom interactive elements not achievable with existing components like Button or Link. Use it to apply specific styling such as backgrounds, padding, or borders.',
   category: 'Polaris web components',
   subCategory: 'Actions',
-  related: [
-    {
-      type: 'component',
-      name: 'Button',
-      url: 'button',
-    },
-    {
-      type: 'component',
-      name: 'Link',
-      url: 'link',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/ClipboardItem.ts

@@ -6,18 +6,7 @@ const data: SharedReferenceEntityTemplateSchema = {
     'Enables copying text to the user’s clipboard. Use alongside Button or Link components to let users easily copy content. `<s-clipboard-item>` doesn’t render visually.',
   category: 'Polaris web components',
   subCategory: 'utilities',
-  related: [
-    {
-      name: 'Button',
-      url: 'button',
-      type: 'Component',
-    },
-    {
-      name: 'Link',
-      url: 'link',
-      type: 'Component',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/DatePicker.ts

@@ -2,8 +2,7 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'DatePicker',
-  description:
-    'Use a date picker to allow merchants to select a date or a date range.',
+  description: 'Allow users to select a specific date or date range.',
   category: 'Polaris web components',
   subCategory: 'Forms',
   related: [],

package/src/docs/shared/components/Divider.ts

@@ -3,21 +3,10 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'Divider',
   description:
-    'Use `s-divider` to create a clear visual separation between different elements in your user interface.',
+    'Create clear visual separation between elements in your user interface.',
   category: 'Polaris web components',
   subCategory: 'Structure',
-  related: [
-    {
-      type: 'component',
-      name: 'Section',
-      url: 'section',
-    },
-    {
-      type: 'component',
-      name: 'Stack',
-      url: 'stack',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/EmailField.ts

@@ -3,21 +3,10 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'EmailField',
   description:
-    'Use `s-email-field` to allow merchants to input email addresses. This component provides built-in email validation and appropriate keyboard settings.',
+    'Let users enter email addresses with built-in validation and optimized keyboard settings.',
   category: 'Polaris web components',
   subCategory: 'Forms',
-  related: [
-    {
-      type: 'component',
-      name: 'TextField',
-      url: 'textfield',
-    },
-    {
-      type: 'component',
-      name: 'TextArea',
-      url: 'textarea',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/Grid.ts

@@ -6,18 +6,7 @@ const data: SharedReferenceEntityTemplateSchema = {
     'Use `s-grid` to organize your content in a matrix of rows and columns and make responsive layouts for pages. Grid follows the same pattern as the [CSS grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout).',
   category: 'Polaris web components',
   subCategory: 'Structure',
-  related: [
-    {
-      type: 'component',
-      name: 'Box',
-      url: 'box',
-    },
-    {
-      type: 'component',
-      name: 'Stack',
-      url: 'stack',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/GridItem.ts

@@ -0,0 +1,11 @@
+import {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'GridItem',
+  description: 'Display content within a single item of a grid layout.',
+  category: 'Polaris web components',
+  subCategory: 'Structure',
+  related: [],
+};
+
+export default data;

package/src/docs/shared/components/Heading.ts

@@ -6,23 +6,7 @@ const data: SharedReferenceEntityTemplateSchema = {
     'Renders hierarchical titles to communicate the structure and organization of page content. Heading levels adjust automatically based on nesting within parent Section components, ensuring a meaningful and accessible page outline.',
   category: 'Polaris web components',
   subCategory: 'Titles and text',
-  related: [
-    {
-      name: 'Text',
-      url: 'text',
-      type: 'Component',
-    },
-    {
-      name: 'Paragraph',
-      url: 'paragraph',
-      type: 'Component',
-    },
-    {
-      name: 'Section',
-      url: 'section',
-      type: 'Component',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/Icon.ts

@@ -6,13 +6,7 @@ const data: SharedReferenceEntityTemplateSchema = {
     'Renders a graphic symbol to visually communicate core parts of the product and available actions. Icons can act as wayfinding tools to help users quickly understand their location within the interface and common interaction patterns.',
   category: 'Polaris web components',
   subCategory: 'Media',
-  related: [
-    {
-      name: 'PaymentIcon',
-      url: 'paymenticon',
-      type: 'Component',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/Link.ts

@@ -6,13 +6,7 @@ const data: SharedReferenceEntityTemplateSchema = {
     'Makes text interactive, allowing users to navigate to other pages or perform specific actions. Supports standard URLs, custom protocols, and navigation within Shopify or app pages.',
   category: 'Polaris web components',
   subCategory: 'Actions',
-  related: [
-    {
-      name: 'Button',
-      url: 'button',
-      type: 'Component',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/MoneyField.ts

@@ -3,21 +3,10 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'MoneyField',
   description:
-    'Use `s-money-field` when you need to collect monetary values from merchants. It provides appropriate formatting and validation for currency amounts.',
+    'Collect monetary values from users with built-in currency formatting and validation.',
   category: 'Polaris web components',
   subCategory: 'Forms',
-  related: [
-    {
-      type: 'component',
-      name: 'NumberField',
-      url: 'numberfield',
-    },
-    {
-      type: 'component',
-      name: 'TextField',
-      url: 'textfield',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/NumberField.ts

@@ -3,21 +3,10 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'NumberField',
   description:
-    'Use `s-number-field` when you need to collect numerical input from merchants. It provides appropriate keyboard settings and validation for numerical values.',
+    'Collect numerical values from users with optimized keyboard settings and built-in validation.',
   category: 'Polaris web components',
   subCategory: 'Forms',
-  related: [
-    {
-      type: 'component',
-      name: 'TextField',
-      url: 'textfield',
-    },
-    {
-      type: 'component',
-      name: 'MoneyField',
-      url: 'moneyfield',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/OrderedList.ts

@@ -6,13 +6,7 @@ const data: SharedReferenceEntityTemplateSchema = {
     'Displays a numbered list of related items in a specific sequence. Use to present step-by-step instructions, ranked items, or procedures where order matters.',
   category: 'Polaris web components',
   subCategory: 'Structure',
-  related: [
-    {
-      name: 'UnorderedList',
-      url: 'unorderedlist',
-      type: 'component',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/Page.ts

@@ -0,0 +1,12 @@
+import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'Page',
+  description:
+    ' Use `s-page` as the main container for placing content in your app. Page comes with preset layouts and automatically adds spacing between elements.',
+  category: 'Polaris web components',
+  subCategory: 'Structure',
+  related: [],
+};
+
+export default data;

package/src/docs/shared/components/Paragraph.ts

@@ -6,18 +6,7 @@ const data: SharedReferenceEntityTemplateSchema = {
     'Displays a block of text, and can contain inline elements such as buttons, links, or emphasized text. Use to present standalone blocks of content, as opposed to inline text.',
   category: 'Polaris web components',
   subCategory: 'Titles and text',
-  related: [
-    {
-      name: 'Heading',
-      url: 'heading',
-      type: 'Component',
-    },
-    {
-      name: 'Text',
-      url: 'text',
-      type: 'Component',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/PasswordField.ts

@@ -2,22 +2,10 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'PasswordField',
-  description:
-    'Use `s-password-field` when you need to collect sensitive information from merchants.',
+  description: 'Securely collect sensitive information from users.',
   category: 'Polaris web components',
   subCategory: 'Forms',
-  related: [
-    {
-      type: 'component',
-      name: 'TextField',
-      url: 'textfield',
-    },
-    {
-      type: 'component',
-      name: 'EmailField',
-      url: 'emailfield',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/PaymentIcon.ts

@@ -6,13 +6,7 @@ const data: SharedReferenceEntityTemplateSchema = {
     'Displays icons representing payment methods. Use to visually communicate available or saved payment options clearly',
   category: 'Polaris web components',
   subCategory: 'Media',
-  related: [
-    {
-      name: 'Icon',
-      url: 'icon',
-      type: 'Component',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/Progress.ts

@@ -6,13 +6,7 @@ const data: SharedReferenceEntityTemplateSchema = {
     'Displays an indicator showing the completion status of a task. Use to visually communicate progress in either determinate (known percentage) or indeterminate (unknown duration) states.',
   category: 'Polaris web components',
   subCategory: 'Feedback',
-  related: [
-    {
-      name: 'Spinner',
-      url: 'spinner',
-      type: 'Component',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/QRCode.ts

@@ -6,13 +6,7 @@ const data: SharedReferenceEntityTemplateSchema = {
     'Displays a scannable QR code representing data such as URLs or text. Use to let users quickly access information by scanning with a smartphone or other device.',
   category: 'Polaris web components',
   subCategory: 'Other',
-  related: [
-    {
-      name: 'ClipboardItem',
-      url: 'clipboarditem',
-      type: 'Component',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/SearchField.ts

@@ -3,26 +3,10 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'SearchField',
   description:
-    'Use a search field to allow merchants to search for a specific item or search term. Search fields provide a single-line input area for collecting string values from users.',
+    'Let users enter search terms or find specific items using a single-line input field.',
   category: 'Polaris web components',
   subCategory: 'Forms',
-  related: [
-    {
-      type: 'component',
-      name: 'TextField',
-      url: 'textfield',
-    },
-    {
-      type: 'component',
-      name: 'EmailField',
-      url: 'emailfield',
-    },
-    {
-      type: 'component',
-      name: 'NumberField',
-      url: 'numberfield',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/Section.ts

@@ -3,26 +3,10 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'Section',
   description:
-    'Use `s-section` to organize your page content. Sections have defined styling, and will display differently depending on how deeply they are nested in the page.',
+    'Groups related content into clearly-defined thematic areas. Sections have contextual styling that automatically adapts based on nesting depth. They also adjust heading levels to maintain a meaningful and accessible page structure.',
   category: 'Polaris web components',
   subCategory: 'Structure',
-  related: [
-    {
-      type: 'component',
-      name: 'Box',
-      url: 'box',
-    },
-    {
-      type: 'component',
-      name: 'Stack',
-      url: 'stack',
-    },
-    {
-      type: 'component',
-      name: 'Heading',
-      url: 'heading',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/Select.ts

@@ -3,21 +3,10 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'Select',
   description:
-    '`s-select` lets merchants choose one option from an options menu. Consider `s-select` when you have 4 or more options, to avoid cluttering the interface.',
+    'Allow users to pick one option from a menu. Ideal when presenting four or more choices to keep interfaces uncluttered.',
   category: 'Polaris web components',
   subCategory: 'Forms',
-  related: [
-    {
-      type: 'component',
-      name: 'ChoiceList',
-      url: 'choice-list',
-    },
-    {
-      type: 'component',
-      name: 'Checkbox',
-      url: 'checkbox',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/Spinner.ts

@@ -6,13 +6,7 @@ const data: SharedReferenceEntityTemplateSchema = {
     'Displays an animated indicator showing users that content or actions are loading. Use to communicate ongoing processes, such as fetching data from a server. For loading states on buttons, use the “loading” property on the Button component instead.',
   category: 'Polaris web components',
   subCategory: 'Feedback',
-  related: [
-    {
-      name: 'Progress',
-      url: 'progress',
-      type: 'Component',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/Switch.ts

@@ -2,27 +2,10 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'Switch',
-  description:
-    'Use `s-switch` when you want to provide users with a clear selection option, such as toggling options on/off.',
+  description: 'Give users a clear way to toggle options on or off.',
   category: 'Polaris web components',
   subCategory: 'Forms',
-  related: [
-    {
-      type: 'component',
-      name: 'Checkbox',
-      url: 'checkbox',
-    },
-    {
-      type: 'component',
-      name: 'Select',
-      url: 'select',
-    },
-    {
-      type: 'component',
-      name: 'ChoiceList',
-      url: 'choice-list',
-    },
-  ],
+  related: [],
 };
 
 export default data;