Merge pull request #3962 from Shopify/2024-07-default-example-descriptions

SteveSill · web-flow · commit 64b94ccf3933 · 2026-02-24T12:39:52.000-07:00
[Components content]: Default example descriptions for 2024-07
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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: [
