From e123f2dd36755d45339b5d8ba3fbce47748e38c4 Mon Sep 17 00:00:00 2001 From: Steve Silliker Date: Tue, 24 Feb 2026 10:15:59 -0700 Subject: [PATCH] Admin UI component defaultExample descriptions Co-authored-by: Cursor --- .../surfaces/admin/components/AdminAction/AdminAction.doc.ts | 2 ++ .../src/surfaces/admin/components/AdminBlock/AdminBlock.doc.ts | 2 ++ .../admin/components/AdminPrintAction/AdminPrintAction.doc.ts | 2 ++ .../src/surfaces/admin/components/Badge/Badge.doc.ts | 2 ++ .../src/surfaces/admin/components/Banner/Banner.doc.ts | 2 ++ .../src/surfaces/admin/components/BlockStack/BlockStack.doc.ts | 2 ++ .../ui-extensions/src/surfaces/admin/components/Box/Box.doc.ts | 2 ++ .../src/surfaces/admin/components/Button/Button.doc.ts | 2 ++ .../src/surfaces/admin/components/Checkbox/Checkbox.doc.ts | 2 ++ .../src/surfaces/admin/components/ChoiceList/ChoiceList.doc.ts | 2 ++ .../surfaces/admin/components/ColorPicker/ColorPicker.doc.ts | 2 ++ .../CustomerSegmentTemplate/CustomerSegmentTemplate.doc.ts | 2 ++ .../src/surfaces/admin/components/DateField/DateField.doc.ts | 2 ++ .../src/surfaces/admin/components/DatePicker/DatePicker.doc.ts | 2 ++ .../src/surfaces/admin/components/Divider/Divider.doc.ts | 2 ++ .../src/surfaces/admin/components/EmailField/EmailField.doc.ts | 2 ++ .../src/surfaces/admin/components/Form/Form.doc.ts | 2 ++ .../admin/components/FunctionSettings/FunctionSettings.doc.ts | 2 ++ .../src/surfaces/admin/components/Heading/Heading.doc.ts | 2 ++ .../surfaces/admin/components/HeadingGroup/HeadingGroup.doc.ts | 2 ++ .../src/surfaces/admin/components/Icon/Icon.doc.ts | 2 ++ .../src/surfaces/admin/components/Image/Image.doc.ts | 2 ++ .../surfaces/admin/components/InlineStack/InlineStack.doc.ts | 2 ++ .../src/surfaces/admin/components/Link/Link.doc.ts | 2 ++ .../src/surfaces/admin/components/MoneyField/MoneyField.doc.ts | 2 ++ .../surfaces/admin/components/NumberField/NumberField.doc.ts | 2 ++ .../src/surfaces/admin/components/Paragraph/Paragraph.doc.ts | 2 ++ .../admin/components/PasswordField/PasswordField.doc.ts | 2 ++ .../src/surfaces/admin/components/Pressable/Pressable.doc.ts | 2 ++ .../admin/components/ProgressIndicator/ProgressIndicator.doc.ts | 2 ++ .../src/surfaces/admin/components/Section/Section.doc.ts | 2 ++ .../src/surfaces/admin/components/Select/Select.doc.ts | 2 ++ .../src/surfaces/admin/components/Text/Text.doc.ts | 2 ++ .../src/surfaces/admin/components/TextArea/TextArea.doc.ts | 2 ++ .../src/surfaces/admin/components/TextField/TextField.doc.ts | 2 ++ .../src/surfaces/admin/components/URLField/URLField.doc.ts | 2 ++ 36 files changed, 72 insertions(+) diff --git a/packages/ui-extensions/src/surfaces/admin/components/AdminAction/AdminAction.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/AdminAction/AdminAction.doc.ts index 603c33a29d..d2c375dd26 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/AdminAction/AdminAction.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/AdminAction/AdminAction.doc.ts @@ -21,6 +21,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Settings and templates', defaultExample: { image: 'adminaction-default.png', + description: + 'Sync product data to a warehouse system from a modal with primary and cancel actions. This example uses `AdminAction` with `primaryAction` and `secondaryAction` [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) props to confirm or dismiss the sync.', codeblock: { title: 'Configure action modal with buttons', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/AdminBlock/AdminBlock.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/AdminBlock/AdminBlock.doc.ts index 20b3f8b870..f06df99f69 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/AdminBlock/AdminBlock.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/AdminBlock/AdminBlock.doc.ts @@ -21,6 +21,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Settings and templates', defaultExample: { image: 'adminblock-default.png', + description: + "Show a warehouse connection status, sync timestamp, and inventory count in a product details block. This example renders an `AdminBlock` titled 'Warehouse integration' with a `success` tone [Badge](/docs/api/admin-extensions/{API_VERSION}/components/feedback-and-status-indicators/badge) and status lines inside a [BlockStack](/docs/api/admin-extensions/{API_VERSION}/components/layout-and-structure/blockstack).", codeblock: { title: 'Display warehouse status block', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.doc.ts index 341b3a1f79..82ee5d77b5 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.doc.ts @@ -21,6 +21,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Settings and templates', defaultExample: { image: 'adminprintaction-default.png', + description: + 'Generate a printable document from a product details page. This example configures an `AdminPrintAction` with a `src` prop that builds a packing slip URL from the selected product ID, and shows a status message while the document loads.', codeblock: { title: 'Generate product packing slip', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.doc.ts index 351ba40102..f5f029e1a5 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.doc.ts @@ -19,6 +19,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Feedback and status indicators', defaultExample: { image: 'badge-default.png', + description: + 'Indicate fulfilled, partially fulfilled, and unfulfilled order states with color-coded labels. This example renders three `Badge` components using `success`, `warning`, and `critical` tones to visually distinguish each state.', codeblock: { title: 'Display order fulfillment status', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/Banner/Banner.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Banner/Banner.doc.ts index c66648fec8..d1f2c0ec47 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Banner/Banner.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Banner/Banner.doc.ts @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Feedback and status indicators', defaultExample: { image: 'banner-default.png', + description: + 'Show a product sync failure with a retry action. This example renders a dismissible `Banner` with a `critical` tone, a primary action [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that retries the sync, and a message explaining the issue.', codeblock: { title: 'Warn about API sync failure', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/BlockStack/BlockStack.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/BlockStack/BlockStack.doc.ts index 59e5598c82..ad1d0bf781 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/BlockStack/BlockStack.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/BlockStack/BlockStack.doc.ts @@ -21,6 +21,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Layout and structure', defaultExample: { image: 'blockstack-default.png', + description: + 'Stack a sync status label, two detail lines, and an action button in a vertical column with consistent spacing. This example uses `BlockStack` with the `gap` prop to control the vertical rhythm, and includes a secondary [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) for viewing the sync log.', codeblock: { title: 'Stack extension content vertically', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/Box/Box.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Box/Box.doc.ts index 485b5eefd9..688693e8b2 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Box/Box.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Box/Box.doc.ts @@ -19,6 +19,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Layout and structure', defaultExample: { image: 'box-default.png', + description: + 'Add padding around a warehouse slot name, aisle reference, and unit count. This example uses `Box` with `padding` inside a [BlockStack](/docs/api/admin-extensions/{API_VERSION}/components/layout-and-structure/blockstack) to inset the slot details from the heading above.', codeblock: { title: 'Create a padded content container', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/Button/Button.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Button/Button.doc.ts index 671a9cfaea..eb50b0bcc7 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Button/Button.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Button/Button.doc.ts @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Actions', defaultExample: { image: 'button-default.png', + description: + 'Sync product data to a warehouse and close the action modal, or cancel. This example renders a `primary` `Button` that posts to a backend API and calls `close()`, alongside a `secondary` cancel button.', codeblock: { title: 'Sync product to backend', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/Checkbox/Checkbox.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Checkbox/Checkbox.doc.ts index 8b0e1f624b..0995063ba3 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Checkbox/Checkbox.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Checkbox/Checkbox.doc.ts @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Forms', defaultExample: { image: 'checkbox-default.png', + description: + 'Toggle automatic inventory sync on or off. This example uses `Checkbox` with a `checked` state, and a [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that saves the setting and closes the modal.', codeblock: { title: 'Toggle feature settings', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/ChoiceList/ChoiceList.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/ChoiceList/ChoiceList.doc.ts index 0635db6caa..f5799d8adc 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/ChoiceList/ChoiceList.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/ChoiceList/ChoiceList.doc.ts @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Forms', defaultExample: { image: 'choicelist-default.png', + description: + 'Pick a shipping speed from standard, express, and overnight radio options. This example renders a `ChoiceList` with three tiers as radio buttons, and a [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that saves the selected method.', codeblock: { title: 'Choose a shipping method', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/ColorPicker/ColorPicker.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/ColorPicker/ColorPicker.doc.ts index e5644fd5a9..09a04e5b3c 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/ColorPicker/ColorPicker.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/ColorPicker/ColorPicker.doc.ts @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Forms', defaultExample: { image: 'colorpicker-default.png', + description: + 'Pick a product accent color from a visual selector and save it. This example uses `ColorPicker` to capture the selected hex value, with a [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that saves the color.', codeblock: { title: 'Select product accent color', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.doc.ts index a3153f71a3..3da43ab9ea 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.doc.ts @@ -21,6 +21,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Settings and templates', defaultExample: { image: 'customersegmenttemplate-default', + description: + 'Define a reusable customer segment for high-value repeat buyers. This example creates a `CustomerSegmentTemplate` with a `query` that filters by order count and total spend, plus a `title`, `description`, and `createdOn` date.', codeblock: { title: 'Create a repeat buyer segment template', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/DateField/DateField.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/DateField/DateField.doc.ts index b575f2f1cd..9cdf8179ed 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/DateField/DateField.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/DateField/DateField.doc.ts @@ -21,6 +21,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Forms', defaultExample: { image: 'datefield-default.png', + description: + 'Schedule a product launch date and save it from an action modal. This example uses `DateField` to capture the date, with a [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that schedules the launch.', codeblock: { title: 'Schedule product launch date', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/DatePicker/DatePicker.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/DatePicker/DatePicker.doc.ts index c8dbe60456..42003d0fe3 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/DatePicker/DatePicker.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/DatePicker/DatePicker.doc.ts @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Forms', defaultExample: { image: 'datepicker-default.png', + description: + 'Schedule a promotion start date using an inline calendar. This example renders a `DatePicker` that captures the selected date, with a [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that schedules the promotion.', codeblock: { title: 'Schedule promotion start date', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.doc.ts index 0d34eccef4..f137cb416e 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.doc.ts @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Layout and structure', defaultExample: { image: 'divider-default.png', + description: + 'Separate a sync status summary from a recent changes list with a horizontal rule. This example places a `Divider` between two sections, each with its own [Heading](/docs/api/admin-extensions/{API_VERSION}/components/typography-and-content/heading) and detail text.', codeblock: { title: 'Separate content sections', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/EmailField/EmailField.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/EmailField/EmailField.doc.ts index ff42aabc27..6f91d2d77e 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/EmailField/EmailField.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/EmailField/EmailField.doc.ts @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Forms', defaultExample: { image: 'emailfield-default.png', + description: + 'Set a low-stock notification email address and save it. This example uses `EmailField` to capture the address, with a [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that saves the notification email.', codeblock: { title: 'Collect notification email', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/Form/Form.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Form/Form.doc.ts index 25df8ed5d1..3049b99ea1 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Form/Form.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Form/Form.doc.ts @@ -19,6 +19,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Forms', defaultExample: { image: 'form-default.png', + description: + 'Submit a warehouse SKU and storage location, or cancel to close the modal. This example uses `Form` with `onSubmit` and `onReset` callbacks around two [TextField](/docs/api/admin-extensions/{API_VERSION}/components/forms/textfield) inputs, where `onReset` calls `close()` to dismiss the modal.', codeblock: { title: 'Submit product metadata form', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/FunctionSettings.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/FunctionSettings.doc.ts index 25f4a41389..38511dcc0b 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/FunctionSettings.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/FunctionSettings.doc.ts @@ -21,6 +21,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Forms', defaultExample: { image: 'form-default.png', + description: + 'Build a settings page for a [Shopify Function](/docs/api/functions) that saves configuration as metafields. This example uses `FunctionSettings` with `applyMetafieldsChange` to save a validation rule name entered in a [TextField](/docs/api/admin-extensions/{API_VERSION}/components/forms/textfield).', codeblock: { title: 'Configure function validation settings', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.doc.ts index 72c0c3de42..7a4fe31643 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.doc.ts @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Typography and content', defaultExample: { image: 'heading-default.png', + description: + 'Add a title and description to a product analytics block. This example renders a `Heading` above descriptive [Text](/docs/api/admin-extensions/{API_VERSION}/components/typography-and-content/text) inside a [BlockStack](/docs/api/admin-extensions/{API_VERSION}/components/layout-and-structure/blockstack).', codeblock: { title: 'Label extension sections', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/HeadingGroup.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/HeadingGroup.doc.ts index 60f971d311..9796610dc9 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/HeadingGroup.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/HeadingGroup.doc.ts @@ -12,6 +12,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Typography and content', defaultExample: { image: 'headinggroup-default.png', + description: + 'Create a two-level title hierarchy for accessible screen reader navigation. This example uses `HeadingGroup` to nest a subsection under a parent [Heading](/docs/api/admin-extensions/{API_VERSION}/components/typography-and-content/heading), so screen readers announce the correct levels.', codeblock: { title: 'Group related heading content', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.doc.ts index 3b93f2fd3e..e1fcda94c5 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.doc.ts @@ -25,6 +25,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Media and visuals', defaultExample: { image: 'icon-default.png', + description: + 'Pair status icons with text labels to indicate sync success and pricing errors. This example uses `Icon` with `CircleTickMajor` and `CircleAlertMajor` names inside an [InlineStack](/docs/api/admin-extensions/{API_VERSION}/components/layout-and-structure/inlinestack), with `accessibilityLabel` props for screen readers.', codeblock: { title: 'Show action status indicators', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/Image/Image.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Image/Image.doc.ts index 7dc826185f..f0bcd3963b 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Image/Image.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Image/Image.doc.ts @@ -19,6 +19,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Media and visuals', defaultExample: { image: 'image-default.png', + description: + "Fetch a product's featured image from the [GraphQL Admin API](/docs/api/admin-graphql/) and show it with alt text. This example queries the `product.featuredImage` field and displays the result in an `Image` component with an `accessibilityLabel` that falls back to the product title.", codeblock: { title: 'Display product featured image', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/InlineStack/InlineStack.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/InlineStack/InlineStack.doc.ts index a8e041b113..4ca3c4d685 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/InlineStack/InlineStack.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/InlineStack/InlineStack.doc.ts @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Layout and structure', defaultExample: { image: 'inlinestack-default.png', + description: + 'Arrange metadata labels, values, and badges in a horizontal row. This example uses `InlineStack` with the `gap` prop to space product IDs, SKUs, weights, and a status [Badge](/docs/api/admin-extensions/{API_VERSION}/components/feedback-and-status-indicators/badge) side by side.', codeblock: { title: 'Arrange metadata in rows', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/Link.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Link/Link.doc.ts index 96418af6b0..083123f7c0 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Link/Link.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Link/Link.doc.ts @@ -19,6 +19,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Actions', defaultExample: { image: 'link-default.png', + description: + 'Navigate to extension settings and a sync dashboard without leaving the admin. This example uses `Link` with `extension://` URLs to open internal extension pages from a product details block.', codeblock: { title: 'Navigate to app pages', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/MoneyField/MoneyField.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/MoneyField/MoneyField.doc.ts index 89bd88498d..3050aea7cf 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/MoneyField/MoneyField.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/MoneyField/MoneyField.doc.ts @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Forms', defaultExample: { image: 'moneyfield-default.png', + description: + 'Set a cost-per-item price in USD and save it from an action modal. This example uses `MoneyField` with `currencyCode` set to USD, with a [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that saves the price and closes the modal.', codeblock: { title: 'Set product cost price', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/NumberField/NumberField.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/NumberField/NumberField.doc.ts index 3705690054..1bfe66cc95 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/NumberField/NumberField.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/NumberField/NumberField.doc.ts @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Forms', defaultExample: { image: 'numberfield-default.png', + description: + 'Specify a restock quantity between 1 and 10,000. This example uses `NumberField` with `min` and `max` props to constrain the input, and a [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that submits the restock and closes the modal.', codeblock: { title: 'Set inventory restock quantity', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/Paragraph/Paragraph.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Paragraph/Paragraph.doc.ts index 470d72493b..2d4808305f 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Paragraph/Paragraph.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Paragraph/Paragraph.doc.ts @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Typography and content', defaultExample: { image: 'paragraph-default.png', + description: + 'Show a sync status message with bolded key figures like the completion time and field count. This example nests [Text](/docs/api/admin-extensions/{API_VERSION}/components/typography-and-content/text) with `fontWeight` props inside a `Paragraph` to emphasize specific details within a sentence.', codeblock: { title: 'Display product sync summary', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/PasswordField/PasswordField.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/PasswordField/PasswordField.doc.ts index 96596a654c..e735a47166 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/PasswordField/PasswordField.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/PasswordField/PasswordField.doc.ts @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Forms', defaultExample: { image: 'passwordfield-default.png', + description: + 'Store a warehouse API key without exposing it on screen. This example uses `PasswordField` to mask the input, with a [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that saves the credentials.', codeblock: { title: 'Enter API credentials securely', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/Pressable/Pressable.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Pressable/Pressable.doc.ts index bd4c171980..37ef4bd3fa 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Pressable/Pressable.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Pressable/Pressable.doc.ts @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Actions', defaultExample: { image: 'pressable-default.png', + description: + 'Trigger an inventory sync or a data export from icon-labeled action rows. This example uses `Pressable` with `onPress` callbacks and [Icon](/docs/api/admin-extensions/{API_VERSION}/components/media-and-visuals/icon) labels to create clickable rows that call backend APIs without visible button styling.', codeblock: { title: 'Build custom action rows', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.doc.ts index 6f272f9542..bbed452fde 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.doc.ts @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Feedback and status indicators', defaultExample: { image: 'progressindicator-default.png', + description: + 'Show a loading indicator while querying product data from the [GraphQL Admin API](/docs/api/admin-graphql/), then replace it with the results. This example uses `ProgressIndicator` with `size` and `accessibilityLabel` props during the query, then displays the product title and inventory count.', codeblock: { title: 'Show loading during API query', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/Section/Section.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Section/Section.doc.ts index b02834769f..64f0651179 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Section/Section.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Section/Section.doc.ts @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Layout and structure', defaultExample: { image: 'section-default.png', + description: + 'Group warehouse location details under a labeled heading. This example uses `Section` with a `heading` prop to bundle a warehouse name, storage slot, and stock count into one content area.', codeblock: { title: 'Group content with a heading', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/Select/Select.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Select/Select.doc.ts index 9a41d34a5f..e30f2d75e7 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Select/Select.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Select/Select.doc.ts @@ -21,6 +21,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Forms', defaultExample: { image: 'select-default.png', + description: + 'Assign a product to a warehouse location from a dropdown of four regions. This example uses `Select` with four warehouse options, and a [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that assigns the warehouse and closes the modal.', codeblock: { title: 'Assign warehouse location', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/Text/Text.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Text/Text.doc.ts index a5abf97495..50640e6e2a 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Text/Text.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Text/Text.doc.ts @@ -19,6 +19,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Typography and content', defaultExample: { image: 'text-default.png', + description: + 'Differentiate a current price from a compare-at price with bold and italic styling. This example uses `Text` with `fontWeight` for the current price and `fontStyle` for the compare-at value, showing how props change the visual weight of inline content.', codeblock: { title: 'Highlight product pricing', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/TextArea/TextArea.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/TextArea/TextArea.doc.ts index 9cc9ef3353..279da27a35 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/TextArea/TextArea.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/TextArea/TextArea.doc.ts @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Forms', defaultExample: { image: 'textarea-default.png', + description: + 'Write internal product notes and save them from an action modal. This example uses `TextArea` with a `rows` prop to set the input height, and a [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that saves the notes.', codeblock: { title: 'Collect internal product notes', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/TextField/TextField.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/TextField/TextField.doc.ts index 3923b8ab2a..21bba73589 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/TextField/TextField.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/TextField/TextField.doc.ts @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Forms', defaultExample: { image: 'textfield-default.png', + description: + 'Tag a product with a custom warehouse label and save it from an action modal. This example uses `TextField` to capture the value, with a [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that saves the label.', codeblock: { title: 'Collect product metadata', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/URLField/URLField.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/URLField/URLField.doc.ts index 3b60f3af7e..68f3f896a1 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/URLField/URLField.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/URLField/URLField.doc.ts @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = { subCategory: 'Forms', defaultExample: { image: 'urlfield-default.png', + description: + 'Record an external product source URL and save it from an action modal. This example uses `URLField` to capture the address, with a [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that saves the source URL.', codeblock: { title: 'Set external product source URL', tabs: [