From 4f8194b1f343fb48f5644f239201eda7c3c5152e Mon Sep 17 00:00:00 2001 From: Tim Trevor Date: Wed, 18 Feb 2026 16:27:33 -0800 Subject: [PATCH 01/21] Flatten examples into a single array removing default and groups (e.g. Basic Usage) --- .../components/ButtonGroup/ButtonGroup.doc.ts | 235 +++++------ .../components/Clickable/Clickable.doc.ts | 233 +++++----- .../ClickableChip/ClickableChip.doc.ts | 201 +++++---- .../admin/components/Link/Link.doc.ts | 398 +++++++++--------- .../admin/components/Menu/Menu.doc.ts | 296 +++++++------ 5 files changed, 652 insertions(+), 711 deletions(-) diff --git a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts index 02fe04bc3f..2354097630 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts @@ -32,138 +32,127 @@ const data: AdminReferenceEntityTemplateSchema = { type: 'ButtonGroupSlots', }, ], - defaultExample: { - image: 'button-default.png', - codeblock: { - title: 'Code', - tabs: [ - { - code: './examples/default.html', - language: 'html', - layout: 'inline', - }, - { - code: './examples/default.jsx', - language: 'preview-jsx', - layout: 'inline', - }, - ], - }, - }, examples: { description: 'Component examples', - exampleGroups: [ + examples: [ { - title: 'Basic usage', - examples: [ - { - description: - 'Standard button group with cancel and primary action for form workflows.', - codeblock: { - title: 'Basic usage', - tabs: [ - { - code: './examples/basic-usage.html', - language: 'html', - }, - - { - code: './examples/basic-usage.jsx', - language: 'preview-jsx', - }, - ], + image: 'button-default.png', + codeblock: { + title: 'Default', + tabs: [ + { + code: './examples/default.html', + language: 'html', + layout: 'inline', }, - }, - { - description: - 'Action buttons for selected items with destructive option.', - codeblock: { - title: 'Bulk action buttons', - tabs: [ - { - code: './examples/bulk-actions-in-data-tables.html', - language: 'html', - }, - - { - code: './examples/bulk-actions-in-data-tables.jsx', - language: 'preview-jsx', - }, - ], + { + code: './examples/default.jsx', + language: 'preview-jsx', + layout: 'inline', }, - }, - { - description: - 'Typical form completion actions with clear visual hierarchy.', - codeblock: { - title: 'Form action buttons', - tabs: [ - { - code: './examples/form-action-buttons.html', - language: 'html', - }, - - { - code: './examples/form-action-buttons.jsx', - language: 'preview-jsx', - }, - ], + ], + }, + }, + { + description: + 'Standard button group with cancel and primary action for form workflows.', + codeblock: { + title: 'Basic usage', + tabs: [ + { + code: './examples/basic-usage.html', + language: 'html', }, - }, - { - description: 'Icon-labeled buttons for common actions.', - codeblock: { - title: 'Buttons with icons', - tabs: [ - { - code: './examples/toolbar-buttons-with-icons.html', - language: 'html', - }, - - { - code: './examples/toolbar-buttons-with-icons.jsx', - language: 'preview-jsx', - }, - ], + { + code: './examples/basic-usage.jsx', + language: 'preview-jsx', }, - }, - { - description: - 'Tightly grouped buttons for view switching and filter options.', - codeblock: { - title: 'Segmented appearance', - tabs: [ - { - code: './examples/segmented-appearance.html', - language: 'html', - }, - - { - code: './examples/segmented-appearance.jsx', - language: 'preview-jsx', - }, - ], + ], + }, + }, + { + description: + 'Action buttons for selected items with destructive option.', + codeblock: { + title: 'Bulk action buttons', + tabs: [ + { + code: './examples/bulk-actions-in-data-tables.html', + language: 'html', }, - }, - { - description: - 'Confirmation dialog style with cancel option and destructive action.', - codeblock: { - title: 'Destructive actions pattern', - tabs: [ - { - code: './examples/destructive-actions-pattern.html', - language: 'html', - }, - - { - code: './examples/destructive-actions-pattern.jsx', - language: 'preview-jsx', - }, - ], + { + code: './examples/bulk-actions-in-data-tables.jsx', + language: 'preview-jsx', }, - }, - ], + ], + }, + }, + { + description: + 'Typical form completion actions with clear visual hierarchy.', + codeblock: { + title: 'Form action buttons', + tabs: [ + { + code: './examples/form-action-buttons.html', + language: 'html', + }, + { + code: './examples/form-action-buttons.jsx', + language: 'preview-jsx', + }, + ], + }, + }, + { + description: 'Icon-labeled buttons for common actions.', + codeblock: { + title: 'Buttons with icons', + tabs: [ + { + code: './examples/toolbar-buttons-with-icons.html', + language: 'html', + }, + { + code: './examples/toolbar-buttons-with-icons.jsx', + language: 'preview-jsx', + }, + ], + }, + }, + { + description: + 'Tightly grouped buttons for view switching and filter options.', + codeblock: { + title: 'Segmented appearance', + tabs: [ + { + code: './examples/segmented-appearance.html', + language: 'html', + }, + { + code: './examples/segmented-appearance.jsx', + language: 'preview-jsx', + }, + ], + }, + }, + { + description: + 'Confirmation dialog style with cancel option and destructive action.', + codeblock: { + title: 'Destructive actions pattern', + tabs: [ + { + code: './examples/destructive-actions-pattern.html', + language: 'html', + }, + { + code: './examples/destructive-actions-pattern.jsx', + language: 'preview-jsx', + }, + ], + }, }, ], }, diff --git a/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts index d2134ad7c7..f3af990d0b 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts @@ -36,137 +36,126 @@ const data: AdminReferenceEntityTemplateSchema = { type: 'ClickableSlots', }, ], - defaultExample: { - image: 'clickable-default.png', - codeblock: { - title: 'Code', - tabs: [ - { - code: './examples/default.html', - language: 'html', - }, - { - code: './examples/default.jsx', - language: 'preview-jsx', - }, - ], - }, - }, examples: { description: 'Component examples', - exampleGroups: [ + examples: [ { - title: 'Basic usage', - examples: [ - { - description: - 'A simple clickable button with a base border and padding, demonstrating the default button behavior of the clickable component.', - codeblock: { - title: 'Basic Button Usage', - tabs: [ - { - code: './examples/basic-button-usage.html', - language: 'html', - }, - - { - code: './examples/basic-button-usage.jsx', - language: 'preview-jsx', - }, - ], + image: 'clickable-default.png', + codeblock: { + title: 'Default', + tabs: [ + { + code: './examples/default.html', + language: 'html', }, - }, - { - description: - "Demonstrates the clickable component's ability to function as a link, opening the specified URL in a new browser tab when clicked.", - codeblock: { - title: 'Link Mode', - tabs: [ - { - code: './examples/link-mode.html', - language: 'html', - }, - - { - code: './examples/link-mode.jsx', - language: 'preview-jsx', - }, - ], + { + code: './examples/default.jsx', + language: 'preview-jsx', }, - }, - { - description: - "A disabled submit button that can be used within a form, showing the component's form integration capabilities and disabled state.", - codeblock: { - title: 'Form Submit Button', - tabs: [ - { - code: './examples/form-submit-button.html', - language: 'html', - }, - - { - code: './examples/form-submit-button.jsx', - language: 'preview-jsx', - }, - ], + ], + }, + }, + { + description: + 'A simple clickable button with a base border and padding, demonstrating the default button behavior of the clickable component.', + codeblock: { + title: 'Basic Button Usage', + tabs: [ + { + code: './examples/basic-button-usage.html', + language: 'html', }, - }, - { - description: - 'Illustrates how the clickable component can be integrated into a section layout to provide an interactive action button.', - codeblock: { - title: 'Section with Clickable Action', - tabs: [ - { - code: './examples/section-with-clickable-action.html', - language: 'html', - }, - - { - code: './examples/section-with-clickable-action.jsx', - language: 'preview-jsx', - }, - ], + { + code: './examples/basic-button-usage.jsx', + language: 'preview-jsx', }, - }, - { - description: - "Demonstrates the use of an accessibility label to provide context for screen readers, enhancing the component's usability for users with assistive technologies.", - codeblock: { - title: 'Accessibility with ARIA Attributes', - tabs: [ - { - code: './examples/accessibility-with-aria-attributes.html', - language: 'html', - }, - - { - code: './examples/accessibility-with-aria-attributes.jsx', - language: 'preview-jsx', - }, - ], + ], + }, + }, + { + description: + "Demonstrates the clickable component's ability to function as a link, opening the specified URL in a new browser tab when clicked.", + codeblock: { + title: 'Link Mode', + tabs: [ + { + code: './examples/link-mode.html', + language: 'html', }, - }, - { - description: - 'Shows a disabled link with an accessibility label, explaining the unavailability of a feature to users of assistive technologies.', - codeblock: { - title: 'Disabled Link with ARIA', - tabs: [ - { - code: './examples/disabled-link-with-aria.html', - language: 'html', - }, - - { - code: './examples/disabled-link-with-aria.jsx', - language: 'preview-jsx', - }, - ], + { + code: './examples/link-mode.jsx', + language: 'preview-jsx', }, - }, - ], + ], + }, + }, + { + description: + "A disabled submit button that can be used within a form, showing the component's form integration capabilities and disabled state.", + codeblock: { + title: 'Form Submit Button', + tabs: [ + { + code: './examples/form-submit-button.html', + language: 'html', + }, + { + code: './examples/form-submit-button.jsx', + language: 'preview-jsx', + }, + ], + }, + }, + { + description: + 'Illustrates how the clickable component can be integrated into a section layout to provide an interactive action button.', + codeblock: { + title: 'Section with Clickable Action', + tabs: [ + { + code: './examples/section-with-clickable-action.html', + language: 'html', + }, + { + code: './examples/section-with-clickable-action.jsx', + language: 'preview-jsx', + }, + ], + }, + }, + { + description: + "Demonstrates the use of an accessibility label to provide context for screen readers, enhancing the component's usability for users with assistive technologies.", + codeblock: { + title: 'Accessibility with ARIA Attributes', + tabs: [ + { + code: './examples/accessibility-with-aria-attributes.html', + language: 'html', + }, + { + code: './examples/accessibility-with-aria-attributes.jsx', + language: 'preview-jsx', + }, + ], + }, + }, + { + description: + 'Shows a disabled link with an accessibility label, explaining the unavailability of a feature to users of assistive technologies.', + codeblock: { + title: 'Disabled Link with ARIA', + tabs: [ + { + code: './examples/disabled-link-with-aria.html', + language: 'html', + }, + { + code: './examples/disabled-link-with-aria.jsx', + language: 'preview-jsx', + }, + ], + }, }, ], }, diff --git a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts index 7b30daf53b..b44851b364 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts @@ -37,119 +37,110 @@ const data: AdminReferenceEntityTemplateSchema = { type: 'ClickableChipSlots', }, ], - defaultExample: { - image: 'clickable-chip-default.png', - codeblock: { - title: 'Code', - tabs: [ - { - code: './examples/default.html', - language: 'html', - }, - { - code: './examples/default.jsx', - language: 'preview-jsx', - }, - ], - }, - }, examples: { description: 'Component examples', - exampleGroups: [ + examples: [ { - title: 'Basic usage', - examples: [ - { - description: - 'Demonstrates a simple clickable chip with a base color and interactive functionality.', - codeblock: { - title: 'Basic Usage', - tabs: [ - { - code: './examples/basic-usage.html', - language: 'html', - }, - - { - code: './examples/basic-usage.jsx', - language: 'preview-jsx', - }, - ], + description: 'Default clickable chip.', + image: 'clickable-chip-default.png', + codeblock: { + title: 'Default', + tabs: [ + { + code: './examples/default.html', + language: 'html', }, - }, - { - description: - 'Showcases a strong-colored clickable chip with a check circle icon and a removable state.', - codeblock: { - title: 'With Icon and Remove Button', - tabs: [ - { - code: './examples/with-icon-and-remove-button.html', - language: 'html', - }, - - { - code: './examples/with-icon-and-remove-button.jsx', - language: 'preview-jsx', - }, - ], + { + code: './examples/default.jsx', + language: 'preview-jsx', }, - }, - { - description: - 'Demonstrates a subdued clickable chip configured as a link with a product icon.', - codeblock: { - title: 'As a Link', - tabs: [ - { - code: './examples/as-a-link.html', - language: 'html', - }, - - { - code: './examples/as-a-link.jsx', - language: 'preview-jsx', - }, - ], + ], + }, + }, + { + description: + 'Demonstrates a simple clickable chip with a base color and interactive functionality.', + codeblock: { + title: 'Basic Usage', + tabs: [ + { + code: './examples/basic-usage.html', + language: 'html', }, - }, - { - description: - 'Illustrates a clickable chip in a disabled state, preventing interaction while displaying an inactive status.', - codeblock: { - title: 'Disabled State', - tabs: [ - { - code: './examples/disabled-state.html', - language: 'html', - }, - - { - code: './examples/disabled-state.jsx', - language: 'preview-jsx', - }, - ], + { + code: './examples/basic-usage.jsx', + language: 'preview-jsx', }, - }, - { - description: - 'Demonstrates how multiple clickable chips with different colors, icons, and states can be arranged using an inline stack for consistent layout and spacing.', - codeblock: { - title: 'Multiple Chips with Proper Spacing', - tabs: [ - { - code: './examples/multiple-chips-with-proper-spacing.html', - language: 'html', - }, - - { - code: './examples/multiple-chips-with-proper-spacing.jsx', - language: 'preview-jsx', - }, - ], + ], + }, + }, + { + description: + 'Showcases a strong-colored clickable chip with a check circle icon and a removable state.', + codeblock: { + title: 'With Icon and Remove Button', + tabs: [ + { + code: './examples/with-icon-and-remove-button.html', + language: 'html', + }, + { + code: './examples/with-icon-and-remove-button.jsx', + language: 'preview-jsx', }, - }, - ], + ], + }, + }, + { + description: + 'Demonstrates a subdued clickable chip configured as a link with a product icon.', + codeblock: { + title: 'As a Link', + tabs: [ + { + code: './examples/as-a-link.html', + language: 'html', + }, + { + code: './examples/as-a-link.jsx', + language: 'preview-jsx', + }, + ], + }, + }, + { + description: + 'Illustrates a clickable chip in a disabled state, preventing interaction while displaying an inactive status.', + codeblock: { + title: 'Disabled State', + tabs: [ + { + code: './examples/disabled-state.html', + language: 'html', + }, + { + code: './examples/disabled-state.jsx', + language: 'preview-jsx', + }, + ], + }, + }, + { + description: + 'Demonstrates how multiple clickable chips with different colors, icons, and states can be arranged using an inline stack for consistent layout and spacing.', + codeblock: { + title: 'Multiple Chips with Proper Spacing', + tabs: [ + { + code: './examples/multiple-chips-with-proper-spacing.html', + language: 'html', + }, + { + code: './examples/multiple-chips-with-proper-spacing.jsx', + language: 'preview-jsx', + }, + ], + }, }, ], }, 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 4002f59a8c..7bee3179a2 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 @@ -41,227 +41,211 @@ const data: AdminReferenceEntityTemplateSchema = { type: 'LinkSlots', }, ], - defaultExample: { - image: 'link-default.png', - codeblock: { - title: 'Code', - tabs: [ - { - code: './examples/default.html', - language: 'html', - }, - { - code: './examples/default.jsx', - language: 'preview-jsx', - }, - ], - }, - }, examples: { description: 'Component examples', - exampleGroups: [ + examples: [ { - title: 'Basic usage', - examples: [ - { - description: - 'Links automatically inherit the tone from their surrounding paragraph context.', - codeblock: { - title: 'Basic Links in Paragraph', - tabs: [ - { - code: './examples/basic-links-in-paragraph.html', - language: 'html', - }, - - { - code: './examples/basic-links-in-paragraph.jsx', - language: 'preview-jsx', - }, - ], + image: 'link-default.png', + codeblock: { + title: 'Default', + tabs: [ + { + code: './examples/default.html', + language: 'html', }, - }, - { - description: - 'Demonstrates links within subdued paragraph, showing how links can be used in less prominent paragraph contexts for additional guidance or support.', - codeblock: { - title: 'Links in Subdued Paragraph', - tabs: [ - { - code: './examples/links-in-subdued-paragraph.html', - language: 'html', - }, - - { - code: './examples/links-in-subdued-paragraph.jsx', - language: 'preview-jsx', - }, - ], + { + code: './examples/default.jsx', + language: 'preview-jsx', }, - }, - { - description: - 'Illustrates how links can be used in critical or urgent text contexts, drawing attention to important actions that require immediate user intervention.', - codeblock: { - title: 'Critical Context Links', - tabs: [ - { - code: './examples/critical-context-links.html', - language: 'html', - }, - - { - code: './examples/critical-context-links.jsx', - language: 'preview-jsx', - }, - ], + ], + }, + }, + { + description: + 'Links automatically inherit the tone from their surrounding paragraph context.', + codeblock: { + title: 'Basic Links in Paragraph', + tabs: [ + { + code: './examples/basic-links-in-paragraph.html', + language: 'html', }, - }, - { - description: - 'Shows how links automatically adapt their tone to the surrounding text context, maintaining visual consistency while providing navigation.', - codeblock: { - title: 'Links with Auto Tone', - tabs: [ - { - code: './examples/links-with-auto-tone.html', - language: 'html', - }, - - { - code: './examples/links-with-auto-tone.jsx', - language: 'preview-jsx', - }, - ], + { + code: './examples/basic-links-in-paragraph.jsx', + language: 'preview-jsx', }, - }, - { - description: - 'Demonstrates how links can be integrated within banner components to highlight important information and provide direct action paths.', - codeblock: { - title: 'Links in Banner', - tabs: [ - { - code: './examples/links-in-banner.html', - language: 'html', - }, - - { - code: './examples/links-in-banner.jsx', - language: 'preview-jsx', - }, - ], + ], + }, + }, + { + description: + 'Demonstrates links within subdued paragraph, showing how links can be used in less prominent paragraph contexts for additional guidance or support.', + codeblock: { + title: 'Links in Subdued Paragraph', + tabs: [ + { + code: './examples/links-in-subdued-paragraph.html', + language: 'html', }, - }, - { - description: - 'Illustrates using links within a box container to provide contextual navigation and additional information in a visually contained area.', - codeblock: { - title: 'Links in Box Container', - tabs: [ - { - code: './examples/links-in-box-container.html', - language: 'html', - }, - - { - code: './examples/links-in-box-container.jsx', - language: 'preview-jsx', - }, - ], + { + code: './examples/links-in-subdued-paragraph.jsx', + language: 'preview-jsx', }, - }, - { - description: - 'Shows how links can be used within warning banners to provide immediate actions related to critical notifications.', - codeblock: { - title: 'Links in Banner Context', - tabs: [ - { - code: './examples/links-in-banner-context.html', - language: 'html', - }, - - { - code: './examples/links-in-banner-context.jsx', - language: 'preview-jsx', - }, - ], + ], + }, + }, + { + description: + 'Illustrates how links can be used in critical or urgent text contexts, drawing attention to important actions that require immediate user intervention.', + codeblock: { + title: 'Critical Context Links', + tabs: [ + { + code: './examples/critical-context-links.html', + language: 'html', }, - }, - { - description: - 'Demonstrates how to create links that trigger file downloads, useful for exporting data or providing downloadable resources.', - codeblock: { - title: 'Download Links', - tabs: [ - { - code: './examples/download-links.html', - language: 'html', - }, - - { - code: './examples/download-links.jsx', - language: 'preview-jsx', - }, - ], + { + code: './examples/critical-context-links.jsx', + language: 'preview-jsx', }, - }, - { - description: - 'Illustrates linking to external resources with different targets, showing how to open links in new tabs and provide navigation to external documentation.', - codeblock: { - title: 'External Links', - tabs: [ - { - code: './examples/external-links.html', - language: 'html', - }, - - { - code: './examples/external-links.jsx', - language: 'preview-jsx', - }, - ], + ], + }, + }, + { + description: + 'Shows how links automatically adapt their tone to the surrounding text context, maintaining visual consistency while providing navigation.', + codeblock: { + title: 'Links with Auto Tone', + tabs: [ + { + code: './examples/links-with-auto-tone.html', + language: 'html', }, - }, - { - description: - 'Shows how to use the `lang` attribute to specify the language of a link, supporting internationalization and proper screen reader pronunciation.', - codeblock: { - title: 'Links with Language Attribute', - tabs: [ - { - code: './examples/links-with-language-attribute.html', - language: 'html', - }, - - { - code: './examples/links-with-language-attribute.jsx', - language: 'preview-jsx', - }, - ], + { + code: './examples/links-with-auto-tone.jsx', + language: 'preview-jsx', }, - }, - { - description: - 'Demonstrates how links can have different visual tones, including default, neutral, and critical, allowing for varied contextual styling.', - codeblock: { - title: 'Links with Different Tones', - tabs: [ - { - code: './examples/links-with-different-tones.html', - language: 'html', - }, - - { - code: './examples/links-with-different-tones.jsx', - language: 'preview-jsx', - }, - ], + ], + }, + }, + { + description: + 'Demonstrates how links can be integrated within banner components to highlight important information and provide direct action paths.', + codeblock: { + title: 'Links in Banner', + tabs: [ + { + code: './examples/links-in-banner.html', + language: 'html', + }, + { + code: './examples/links-in-banner.jsx', + language: 'preview-jsx', }, - }, - ], + ], + }, + }, + { + description: + 'Illustrates using links within a box container to provide contextual navigation and additional information in a visually contained area.', + codeblock: { + title: 'Links in Box Container', + tabs: [ + { + code: './examples/links-in-box-container.html', + language: 'html', + }, + { + code: './examples/links-in-box-container.jsx', + language: 'preview-jsx', + }, + ], + }, + }, + { + description: + 'Shows how links can be used within warning banners to provide immediate actions related to critical notifications.', + codeblock: { + title: 'Links in Banner Context', + tabs: [ + { + code: './examples/links-in-banner-context.html', + language: 'html', + }, + { + code: './examples/links-in-banner-context.jsx', + language: 'preview-jsx', + }, + ], + }, + }, + { + description: + 'Demonstrates how to create links that trigger file downloads, useful for exporting data or providing downloadable resources.', + codeblock: { + title: 'Download Links', + tabs: [ + { + code: './examples/download-links.html', + language: 'html', + }, + { + code: './examples/download-links.jsx', + language: 'preview-jsx', + }, + ], + }, + }, + { + description: + 'Illustrates linking to external resources with different targets, showing how to open links in new tabs and provide navigation to external documentation.', + codeblock: { + title: 'External Links', + tabs: [ + { + code: './examples/external-links.html', + language: 'html', + }, + { + code: './examples/external-links.jsx', + language: 'preview-jsx', + }, + ], + }, + }, + { + description: + 'Shows how to use the `lang` attribute to specify the language of a link, supporting internationalization and proper screen reader pronunciation.', + codeblock: { + title: 'Links with Language Attribute', + tabs: [ + { + code: './examples/links-with-language-attribute.html', + language: 'html', + }, + { + code: './examples/links-with-language-attribute.jsx', + language: 'preview-jsx', + }, + ], + }, + }, + { + description: + 'Demonstrates how links can have different visual tones, including default, neutral, and critical, allowing for varied contextual styling.', + codeblock: { + title: 'Links with Different Tones', + tabs: [ + { + code: './examples/links-with-different-tones.html', + language: 'html', + }, + { + code: './examples/links-with-different-tones.jsx', + language: 'preview-jsx', + }, + ], + }, }, ], }, diff --git a/packages/ui-extensions/src/surfaces/admin/components/Menu/Menu.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Menu/Menu.doc.ts index ff2fbe4b19..d747e529c5 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Menu/Menu.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Menu/Menu.doc.ts @@ -40,169 +40,157 @@ const data: AdminReferenceEntityTemplateSchema = { type: 'MenuSlots', }, ], - defaultExample: { - codeblock: { - title: 'Code', - tabs: [ - { - code: './examples/default.html', - language: 'html', - layout: 'alignStart', - customStyles: { - minHeight: '300px', - }, - }, - - { - code: './examples/default.jsx', - language: 'preview-jsx', - layout: 'alignStart', - customStyles: { - minHeight: '300px', - }, - }, - ], - }, - }, examples: { description: 'Component examples', - exampleGroups: [ + examples: [ { - title: 'Basic usage', - examples: [ - { - description: - 'Demonstrates a simple menu with basic action buttons and shows how to link it to a trigger button.', - codeblock: { - title: 'Basic Menu', - tabs: [ - { - code: './examples/basic-menu.html', - language: 'html', - }, - - { - code: './examples/basic-menu.jsx', - language: 'preview-jsx', - layout: 'alignStart', - customStyles: { - minHeight: '300px', - }, - }, - ], + codeblock: { + title: 'Default', + tabs: [ + { + code: './examples/default.html', + language: 'html', + layout: 'alignStart', + customStyles: { + minHeight: '300px', + }, }, - }, - { - description: - 'Illustrates a menu with icons for each action, providing visual context for different menu items and showing how to use the caret-down icon on the trigger button.', - codeblock: { - title: 'Menu with Icons', - tabs: [ - { - code: './examples/menu-with-icons.html', - language: 'html', - }, - - { - code: './examples/menu-with-icons.jsx', - language: 'preview-jsx', - layout: 'alignStart', - customStyles: { - minHeight: '300px', - }, - }, - ], + { + code: './examples/default.jsx', + language: 'preview-jsx', + layout: 'alignStart', + customStyles: { + minHeight: '300px', + }, }, - }, - { - description: - 'Shows how to organize menu items into logical sections with headings, helping to group related actions and improve menu readability.', - codeblock: { - title: 'Menu with Sections', - tabs: [ - { - code: './examples/menu-with-sections.html', - language: 'html', - }, - - { - code: './examples/menu-with-sections.jsx', - language: 'preview-jsx', - layout: 'alignStart', - customStyles: { - minHeight: '400px', - }, - }, - ], + ], + }, + }, + { + description: + 'Demonstrates a simple menu with basic action buttons and shows how to link it to a trigger button.', + codeblock: { + title: 'Basic Menu', + tabs: [ + { + code: './examples/basic-menu.html', + language: 'html', }, - }, - { - description: - "Demonstrates a menu with a mix of link-based buttons, standard buttons, and a disabled button, showcasing the menu's flexibility in handling different interaction states.", - codeblock: { - title: 'Menu with Links and Disabled Items', - tabs: [ - { - code: './examples/menu-with-links-and-disabled-items.html', - language: 'html', - }, - - { - code: './examples/menu-with-links-and-disabled-items.jsx', - language: 'preview-jsx', - layout: 'alignStart', - customStyles: { - minHeight: '300px', - }, - }, - ], + { + code: './examples/basic-menu.jsx', + language: 'preview-jsx', + layout: 'alignStart', + customStyles: { + minHeight: '300px', + }, }, - }, - { - description: - "Presents a comprehensive menu showing how to create sections with different action groups and include a critical action at the menu's root level.", - codeblock: { - title: 'Actions menu with sections', - tabs: [ - { - code: './examples/customer-actions-menu.html', - language: 'html', - }, - - { - code: './examples/customer-actions-menu.jsx', - language: 'preview-jsx', - layout: 'alignStart', - customStyles: { - minHeight: '300px', - }, - }, - ], + ], + }, + }, + { + description: + 'Illustrates a menu with icons for each action, providing visual context for different menu items and showing how to use the caret-down icon on the trigger button.', + codeblock: { + title: 'Menu with Icons', + tabs: [ + { + code: './examples/menu-with-icons.html', + language: 'html', }, - }, - { - description: - 'Illustrates a complex menu with nested sections, demonstrating how to organize multiple related actions with icons.', - codeblock: { - title: 'Menu with nested sections', - tabs: [ - { - code: './examples/settings-menu.html', - language: 'html', - }, - - { - code: './examples/settings-menu.jsx', - language: 'preview-jsx', - layout: 'alignStart', - customStyles: { - minHeight: '350px', - }, - }, - ], + { + code: './examples/menu-with-icons.jsx', + language: 'preview-jsx', + layout: 'alignStart', + customStyles: { + minHeight: '300px', + }, + }, + ], + }, + }, + { + description: + 'Shows how to organize menu items into logical sections with headings, helping to group related actions and improve menu readability.', + codeblock: { + title: 'Menu with Sections', + tabs: [ + { + code: './examples/menu-with-sections.html', + language: 'html', + }, + { + code: './examples/menu-with-sections.jsx', + language: 'preview-jsx', + layout: 'alignStart', + customStyles: { + minHeight: '400px', + }, + }, + ], + }, + }, + { + description: + "Demonstrates a menu with a mix of link-based buttons, standard buttons, and a disabled button, showcasing the menu's flexibility in handling different interaction states.", + codeblock: { + title: 'Menu with Links and Disabled Items', + tabs: [ + { + code: './examples/menu-with-links-and-disabled-items.html', + language: 'html', + }, + { + code: './examples/menu-with-links-and-disabled-items.jsx', + language: 'preview-jsx', + layout: 'alignStart', + customStyles: { + minHeight: '300px', + }, }, - }, - ], + ], + }, + }, + { + description: + "Presents a comprehensive menu showing how to create sections with different action groups and include a critical action at the menu's root level.", + codeblock: { + title: 'Actions menu with sections', + tabs: [ + { + code: './examples/customer-actions-menu.html', + language: 'html', + }, + { + code: './examples/customer-actions-menu.jsx', + language: 'preview-jsx', + layout: 'alignStart', + customStyles: { + minHeight: '300px', + }, + }, + ], + }, + }, + { + description: + 'Illustrates a complex menu with nested sections, demonstrating how to organize multiple related actions with icons.', + codeblock: { + title: 'Menu with nested sections', + tabs: [ + { + code: './examples/settings-menu.html', + language: 'html', + }, + { + code: './examples/settings-menu.jsx', + language: 'preview-jsx', + layout: 'alignStart', + customStyles: { + minHeight: '350px', + }, + }, + ], + }, }, ], }, From 980676b6887b28be9783bf303ca4d5656538e2a3 Mon Sep 17 00:00:00 2001 From: Tim Trevor Date: Wed, 18 Feb 2026 16:52:02 -0800 Subject: [PATCH 02/21] Delete redundant examples from ButtonGroup page --- .../components/ButtonGroup/ButtonGroup.doc.ts | 34 ------------------- .../ButtonGroup/examples/basic-usage.html | 4 --- .../ButtonGroup/examples/basic-usage.jsx | 6 ---- .../examples/form-action-buttons.html | 4 --- .../examples/form-action-buttons.jsx | 6 ---- 5 files changed, 54 deletions(-) delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/basic-usage.html delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/basic-usage.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/form-action-buttons.html delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/form-action-buttons.jsx diff --git a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts index 2354097630..27aee85dda 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts @@ -53,23 +53,6 @@ const data: AdminReferenceEntityTemplateSchema = { ], }, }, - { - description: - 'Standard button group with cancel and primary action for form workflows.', - codeblock: { - title: 'Basic usage', - tabs: [ - { - code: './examples/basic-usage.html', - language: 'html', - }, - { - code: './examples/basic-usage.jsx', - language: 'preview-jsx', - }, - ], - }, - }, { description: 'Action buttons for selected items with destructive option.', @@ -87,23 +70,6 @@ const data: AdminReferenceEntityTemplateSchema = { ], }, }, - { - description: - 'Typical form completion actions with clear visual hierarchy.', - codeblock: { - title: 'Form action buttons', - tabs: [ - { - code: './examples/form-action-buttons.html', - language: 'html', - }, - { - code: './examples/form-action-buttons.jsx', - language: 'preview-jsx', - }, - ], - }, - }, { description: 'Icon-labeled buttons for common actions.', codeblock: { diff --git a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/basic-usage.html b/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/basic-usage.html deleted file mode 100644 index f2a19b1e63..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/basic-usage.html +++ /dev/null @@ -1,4 +0,0 @@ - - Cancel - Save - diff --git a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/basic-usage.jsx b/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/basic-usage.jsx deleted file mode 100644 index ed8a199220..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/basic-usage.jsx +++ /dev/null @@ -1,6 +0,0 @@ - - Cancel - - Save - - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/form-action-buttons.html b/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/form-action-buttons.html deleted file mode 100644 index 8eedd6ab31..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/form-action-buttons.html +++ /dev/null @@ -1,4 +0,0 @@ - - Cancel - Save product - diff --git a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/form-action-buttons.jsx b/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/form-action-buttons.jsx deleted file mode 100644 index 1de4ebf6b4..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/form-action-buttons.jsx +++ /dev/null @@ -1,6 +0,0 @@ - - Cancel - - Save product - - \ No newline at end of file From 2a9cada20d493cceba9a8d306371878dbc139d48 Mon Sep 17 00:00:00 2001 From: Tim Trevor Date: Wed, 18 Feb 2026 16:56:29 -0800 Subject: [PATCH 03/21] Delete redundant examples from Clickable --- .../admin/components/Clickable/Clickable.doc.ts | 17 ----------------- .../Clickable/examples/basic-button-usage.html | 1 - .../Clickable/examples/basic-button-usage.jsx | 3 --- 3 files changed, 21 deletions(-) delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/basic-button-usage.html delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/basic-button-usage.jsx diff --git a/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts index f3af990d0b..698c190494 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts @@ -55,23 +55,6 @@ const data: AdminReferenceEntityTemplateSchema = { ], }, }, - { - description: - 'A simple clickable button with a base border and padding, demonstrating the default button behavior of the clickable component.', - codeblock: { - title: 'Basic Button Usage', - tabs: [ - { - code: './examples/basic-button-usage.html', - language: 'html', - }, - { - code: './examples/basic-button-usage.jsx', - language: 'preview-jsx', - }, - ], - }, - }, { description: "Demonstrates the clickable component's ability to function as a link, opening the specified URL in a new browser tab when clicked.", diff --git a/packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/basic-button-usage.html b/packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/basic-button-usage.html deleted file mode 100644 index 5434d68048..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/basic-button-usage.html +++ /dev/null @@ -1 +0,0 @@ -Click me diff --git a/packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/basic-button-usage.jsx b/packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/basic-button-usage.jsx deleted file mode 100644 index 1fa2e12673..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/basic-button-usage.jsx +++ /dev/null @@ -1,3 +0,0 @@ - - Click me - \ No newline at end of file From 263ff4af1edbb8411f6d95a7be8e5c4089695269 Mon Sep 17 00:00:00 2001 From: Tim Trevor Date: Wed, 18 Feb 2026 17:02:34 -0800 Subject: [PATCH 04/21] Delete redundant examples from ClickableChip --- .../ClickableChip/ClickableChip.doc.ts | 17 ----------------- .../multiple-chips-with-proper-spacing.html | 17 ----------------- .../multiple-chips-with-proper-spacing.jsx | 17 ----------------- 3 files changed, 51 deletions(-) delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/multiple-chips-with-proper-spacing.html delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/multiple-chips-with-proper-spacing.jsx diff --git a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts index b44851b364..0a5362cd91 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts @@ -125,23 +125,6 @@ const data: AdminReferenceEntityTemplateSchema = { ], }, }, - { - description: - 'Demonstrates how multiple clickable chips with different colors, icons, and states can be arranged using an inline stack for consistent layout and spacing.', - codeblock: { - title: 'Multiple Chips with Proper Spacing', - tabs: [ - { - code: './examples/multiple-chips-with-proper-spacing.html', - language: 'html', - }, - { - code: './examples/multiple-chips-with-proper-spacing.jsx', - language: 'preview-jsx', - }, - ], - }, - }, ], }, }; diff --git a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/multiple-chips-with-proper-spacing.html b/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/multiple-chips-with-proper-spacing.html deleted file mode 100644 index 12fd659751..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/multiple-chips-with-proper-spacing.html +++ /dev/null @@ -1,17 +0,0 @@ - - - Active - - - - In progress - - - - Category - - diff --git a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/multiple-chips-with-proper-spacing.jsx b/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/multiple-chips-with-proper-spacing.jsx deleted file mode 100644 index 68258b8106..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/multiple-chips-with-proper-spacing.jsx +++ /dev/null @@ -1,17 +0,0 @@ - - - Active - - - - In progress - - - - Category - - \ No newline at end of file From 7bb68f50fde708e7727c5c7fba02f03a47b0a976 Mon Sep 17 00:00:00 2001 From: Tim Trevor Date: Fri, 20 Feb 2026 11:27:56 -0800 Subject: [PATCH 05/21] Delete redundant code examples for Link component --- .../admin/components/Link/Link.doc.ts | 68 ------------------- .../Link/examples/critical-context-links.html | 3 - .../Link/examples/critical-context-links.jsx | 3 - .../examples/links-in-banner-context.html | 5 -- .../Link/examples/links-in-banner-context.jsx | 5 -- .../examples/links-in-subdued-paragraph.html | 3 - .../examples/links-in-subdued-paragraph.jsx | 3 - .../Link/examples/links-with-auto-tone.html | 3 - .../Link/examples/links-with-auto-tone.jsx | 3 - 9 files changed, 96 deletions(-) delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/examples/critical-context-links.html delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/examples/critical-context-links.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-in-banner-context.html delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-in-banner-context.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-in-subdued-paragraph.html delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-in-subdued-paragraph.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-with-auto-tone.html delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-with-auto-tone.jsx 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 7bee3179a2..325bc0a6bc 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 @@ -77,57 +77,6 @@ const data: AdminReferenceEntityTemplateSchema = { ], }, }, - { - description: - 'Demonstrates links within subdued paragraph, showing how links can be used in less prominent paragraph contexts for additional guidance or support.', - codeblock: { - title: 'Links in Subdued Paragraph', - tabs: [ - { - code: './examples/links-in-subdued-paragraph.html', - language: 'html', - }, - { - code: './examples/links-in-subdued-paragraph.jsx', - language: 'preview-jsx', - }, - ], - }, - }, - { - description: - 'Illustrates how links can be used in critical or urgent text contexts, drawing attention to important actions that require immediate user intervention.', - codeblock: { - title: 'Critical Context Links', - tabs: [ - { - code: './examples/critical-context-links.html', - language: 'html', - }, - { - code: './examples/critical-context-links.jsx', - language: 'preview-jsx', - }, - ], - }, - }, - { - description: - 'Shows how links automatically adapt their tone to the surrounding text context, maintaining visual consistency while providing navigation.', - codeblock: { - title: 'Links with Auto Tone', - tabs: [ - { - code: './examples/links-with-auto-tone.html', - language: 'html', - }, - { - code: './examples/links-with-auto-tone.jsx', - language: 'preview-jsx', - }, - ], - }, - }, { description: 'Demonstrates how links can be integrated within banner components to highlight important information and provide direct action paths.', @@ -162,23 +111,6 @@ const data: AdminReferenceEntityTemplateSchema = { ], }, }, - { - description: - 'Shows how links can be used within warning banners to provide immediate actions related to critical notifications.', - codeblock: { - title: 'Links in Banner Context', - tabs: [ - { - code: './examples/links-in-banner-context.html', - language: 'html', - }, - { - code: './examples/links-in-banner-context.jsx', - language: 'preview-jsx', - }, - ], - }, - }, { description: 'Demonstrates how to create links that trigger file downloads, useful for exporting data or providing downloadable resources.', diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/critical-context-links.html b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/critical-context-links.html deleted file mode 100644 index 5221cc801a..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/critical-context-links.html +++ /dev/null @@ -1,3 +0,0 @@ - - Your store will be suspended in 24 hours due to unpaid balance. Update payment method to avoid service interruption. - diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/critical-context-links.jsx b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/critical-context-links.jsx deleted file mode 100644 index bf6bb30c06..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/critical-context-links.jsx +++ /dev/null @@ -1,3 +0,0 @@ - - Your store will be suspended in 24 hours due to unpaid balance. Update payment method to avoid service interruption. - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-in-banner-context.html b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-in-banner-context.html deleted file mode 100644 index 6afd5cf4d6..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-in-banner-context.html +++ /dev/null @@ -1,5 +0,0 @@ - - - Your inventory for "Vintage t-shirt" is running low (3 remaining). Restock inventory - - diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-in-banner-context.jsx b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-in-banner-context.jsx deleted file mode 100644 index 1090e67562..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-in-banner-context.jsx +++ /dev/null @@ -1,5 +0,0 @@ - - - Your inventory for "Vintage t-shirt" is running low (3 remaining). Restock inventory - - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-in-subdued-paragraph.html b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-in-subdued-paragraph.html deleted file mode 100644 index 9d1cc904ed..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-in-subdued-paragraph.html +++ /dev/null @@ -1,3 +0,0 @@ - - Need help setting up shipping rates? View shipping guide or contact merchant support. - diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-in-subdued-paragraph.jsx b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-in-subdued-paragraph.jsx deleted file mode 100644 index 4a859976db..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-in-subdued-paragraph.jsx +++ /dev/null @@ -1,3 +0,0 @@ - - Need help setting up shipping rates? View shipping guide or contact merchant support. - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-with-auto-tone.html b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-with-auto-tone.html deleted file mode 100644 index d44fd5bf20..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-with-auto-tone.html +++ /dev/null @@ -1,3 +0,0 @@ - - You have 15 pending orders to fulfill. Review unfulfilled orders to keep customers happy. - diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-with-auto-tone.jsx b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-with-auto-tone.jsx deleted file mode 100644 index 4d91fefc7c..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-with-auto-tone.jsx +++ /dev/null @@ -1,3 +0,0 @@ - - You have 15 pending orders to fulfill. Review unfulfilled orders to keep customers happy. - \ No newline at end of file From 341d7218bf0dca1f748ebbe564c50a313a25020a Mon Sep 17 00:00:00 2001 From: Tim Trevor Date: Fri, 20 Feb 2026 11:31:19 -0800 Subject: [PATCH 06/21] Delete redundant code examples and add new example for Menu component --- .../admin/components/Menu/Menu.doc.ts | 63 +++++++------------ .../components/Menu/examples/basic-menu.html | 7 --- .../components/Menu/examples/basic-menu.jsx | 9 --- ...with-icons.html => icon-only-trigger.html} | 9 ++- ...u-with-icons.jsx => icon-only-trigger.jsx} | 13 ++-- 5 files changed, 36 insertions(+), 65 deletions(-) delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Menu/examples/basic-menu.html delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Menu/examples/basic-menu.jsx rename packages/ui-extensions/src/surfaces/admin/components/Menu/examples/{menu-with-icons.html => icon-only-trigger.html} (53%) rename packages/ui-extensions/src/surfaces/admin/components/Menu/examples/{menu-with-icons.jsx => icon-only-trigger.jsx} (55%) diff --git a/packages/ui-extensions/src/surfaces/admin/components/Menu/Menu.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Menu/Menu.doc.ts index d747e529c5..aaa2815a6b 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Menu/Menu.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Menu/Menu.doc.ts @@ -66,48 +66,6 @@ const data: AdminReferenceEntityTemplateSchema = { ], }, }, - { - description: - 'Demonstrates a simple menu with basic action buttons and shows how to link it to a trigger button.', - codeblock: { - title: 'Basic Menu', - tabs: [ - { - code: './examples/basic-menu.html', - language: 'html', - }, - { - code: './examples/basic-menu.jsx', - language: 'preview-jsx', - layout: 'alignStart', - customStyles: { - minHeight: '300px', - }, - }, - ], - }, - }, - { - description: - 'Illustrates a menu with icons for each action, providing visual context for different menu items and showing how to use the caret-down icon on the trigger button.', - codeblock: { - title: 'Menu with Icons', - tabs: [ - { - code: './examples/menu-with-icons.html', - language: 'html', - }, - { - code: './examples/menu-with-icons.jsx', - language: 'preview-jsx', - layout: 'alignStart', - customStyles: { - minHeight: '300px', - }, - }, - ], - }, - }, { description: 'Shows how to organize menu items into logical sections with headings, helping to group related actions and improve menu readability.', @@ -192,6 +150,27 @@ const data: AdminReferenceEntityTemplateSchema = { ], }, }, + { + description: + 'Use an icon-only button as the menu trigger for a compact "more actions" pattern commonly used in toolbars and table rows.', + codeblock: { + title: 'Icon-only trigger', + tabs: [ + { + code: './examples/icon-only-trigger.html', + language: 'html', + }, + { + code: './examples/icon-only-trigger.jsx', + language: 'preview-jsx', + layout: 'alignStart', + customStyles: { + minHeight: '300px', + }, + }, + ], + }, + }, ], }, }; diff --git a/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/basic-menu.html b/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/basic-menu.html deleted file mode 100644 index 4db91c4c47..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/basic-menu.html +++ /dev/null @@ -1,7 +0,0 @@ -Product actions - - - Edit product - Duplicate product - Archive product - diff --git a/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/basic-menu.jsx b/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/basic-menu.jsx deleted file mode 100644 index 0f941b0c03..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/basic-menu.jsx +++ /dev/null @@ -1,9 +0,0 @@ -<> - Product actions - - - Edit product - Duplicate product - Archive product - - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/menu-with-icons.html b/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/icon-only-trigger.html similarity index 53% rename from packages/ui-extensions/src/surfaces/admin/components/Menu/examples/menu-with-icons.html rename to packages/ui-extensions/src/surfaces/admin/components/Menu/examples/icon-only-trigger.html index 7f31330ef2..aacf8ba74e 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/menu-with-icons.html +++ b/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/icon-only-trigger.html @@ -1,6 +1,11 @@ -More actions + - + Edit product Duplicate product Archive product diff --git a/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/menu-with-icons.jsx b/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/icon-only-trigger.jsx similarity index 55% rename from packages/ui-extensions/src/surfaces/admin/components/Menu/examples/menu-with-icons.jsx rename to packages/ui-extensions/src/surfaces/admin/components/Menu/examples/icon-only-trigger.jsx index 57c897c4cd..e85d587c36 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/menu-with-icons.jsx +++ b/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/icon-only-trigger.jsx @@ -1,9 +1,12 @@ <> - - More actions - + - + Edit product Duplicate product Archive product @@ -11,4 +14,4 @@ Delete product - \ No newline at end of file + From 98703275be4dd345c097ba9845b0044f95cb19cf Mon Sep 17 00:00:00 2001 From: Tim Trevor Date: Fri, 20 Feb 2026 14:02:14 -0800 Subject: [PATCH 07/21] Update titles and descriptions for code examples --- .../components/ButtonGroup/ButtonGroup.doc.ts | 21 ++++++------ .../components/Clickable/Clickable.doc.ts | 24 +++++++------- .../ClickableChip/ClickableChip.doc.ts | 21 ++++++------ .../admin/components/Link/Link.doc.ts | 32 ++++++++++--------- .../admin/components/Menu/Menu.doc.ts | 24 +++++++------- 5 files changed, 66 insertions(+), 56 deletions(-) diff --git a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts index 27aee85dda..0819a45c81 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts @@ -37,8 +37,10 @@ const data: AdminReferenceEntityTemplateSchema = { examples: [ { image: 'button-default.png', + description: + 'Group related buttons together with a primary action and secondary options. This example shows a button group with a save button and a cancel button using the slot layout.', codeblock: { - title: 'Default', + title: 'Group a primary and secondary action', tabs: [ { code: './examples/default.html', @@ -55,9 +57,9 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Action buttons for selected items with destructive option.', + 'Present multiple secondary actions for operating on selected items. This example shows archive, export, and delete buttons grouped together for bulk operations.', codeblock: { - title: 'Bulk action buttons', + title: 'Add bulk action buttons', tabs: [ { code: './examples/bulk-actions-in-data-tables.html', @@ -71,9 +73,10 @@ const data: AdminReferenceEntityTemplateSchema = { }, }, { - description: 'Icon-labeled buttons for common actions.', + description: + 'Add icons to grouped buttons to help merchants quickly identify each action. This example shows duplicate, archive, and delete buttons with icons.', codeblock: { - title: 'Buttons with icons', + title: 'Add icons to grouped buttons', tabs: [ { code: './examples/toolbar-buttons-with-icons.html', @@ -88,9 +91,9 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Tightly grouped buttons for view switching and filter options.', + 'Remove the gap between buttons to create a segmented control for toggling between views or options. This example shows day, week, and month buttons joined together with no spacing.', codeblock: { - title: 'Segmented appearance', + title: 'Create a segmented button group', tabs: [ { code: './examples/segmented-appearance.html', @@ -105,9 +108,9 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Confirmation dialog style with cancel option and destructive action.', + 'Pair a cancel button with a critical action for destructive confirmation flows. This example shows a cancel and delete button grouped together for a confirmation dialog.', codeblock: { - title: 'Destructive actions pattern', + title: 'Confirm a destructive action', tabs: [ { code: './examples/destructive-actions-pattern.html', diff --git a/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts index 698c190494..f6b027d1ff 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts @@ -41,8 +41,10 @@ const data: AdminReferenceEntityTemplateSchema = { examples: [ { image: 'clickable-default.png', + description: + "Build custom interactive elements with flexible styling that Button or Link don't support. This example shows two clickable elements with different background and border styles.", codeblock: { - title: 'Default', + title: 'Create a custom interactive element', tabs: [ { code: './examples/default.html', @@ -57,9 +59,9 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - "Demonstrates the clickable component's ability to function as a link, opening the specified URL in a new browser tab when clicked.", + 'Set href to make a clickable element navigate like a link. This example shows a clickable that opens a URL in a new browser tab.', codeblock: { - title: 'Link Mode', + title: 'Navigate to a URL', tabs: [ { code: './examples/link-mode.html', @@ -74,9 +76,9 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - "A disabled submit button that can be used within a form, showing the component's form integration capabilities and disabled state.", + 'Use a clickable as a form submit button with a disabled state to prevent premature submission. This example shows a disabled submit-type clickable with border and padding.', codeblock: { - title: 'Form Submit Button', + title: 'Create a form submit button', tabs: [ { code: './examples/form-submit-button.html', @@ -91,9 +93,9 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Illustrates how the clickable component can be integrated into a section layout to provide an interactive action button.', + 'Embed a clickable element within a content section to provide an interactive action alongside text. This example shows a styled clickable button inside a box with a heading and description.', codeblock: { - title: 'Section with Clickable Action', + title: 'Add a clickable action to a section', tabs: [ { code: './examples/section-with-clickable-action.html', @@ -108,9 +110,9 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - "Demonstrates the use of an accessibility label to provide context for screen readers, enhancing the component's usability for users with assistive technologies.", + 'Add an accessibility label to provide screen readers with more context than the visible text alone. This example shows a clickable delete button with a descriptive label for assistive technologies.', codeblock: { - title: 'Accessibility with ARIA Attributes', + title: 'Add an accessibility label', tabs: [ { code: './examples/accessibility-with-aria-attributes.html', @@ -125,9 +127,9 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Shows a disabled link with an accessibility label, explaining the unavailability of a feature to users of assistive technologies.', + 'Disable a clickable link while providing an accessibility label that explains why the feature is unavailable. This example shows a disabled navigation element with a descriptive label for screen readers.', codeblock: { - title: 'Disabled Link with ARIA', + title: 'Describe a disabled link with an accessibility label', tabs: [ { code: './examples/disabled-link-with-aria.html', diff --git a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts index 0a5362cd91..22c1e451be 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts @@ -41,10 +41,11 @@ const data: AdminReferenceEntityTemplateSchema = { description: 'Component examples', examples: [ { - description: 'Default clickable chip.', + description: + 'Create an interactive chip that merchants can click to trigger an action. This example a clickable chip with default styling.', image: 'clickable-chip-default.png', codeblock: { - title: 'Default', + title: 'Add a clickable chip with default styling', tabs: [ { code: './examples/default.html', @@ -59,9 +60,9 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Demonstrates a simple clickable chip with a base color and interactive functionality.', + 'Use the `color` property to visually distinguish chips by importance or category. This example shows three chips with base, subdued, and strong color variants.', codeblock: { - title: 'Basic Usage', + title: 'Apply color variants to chips', tabs: [ { code: './examples/basic-usage.html', @@ -76,9 +77,9 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Showcases a strong-colored clickable chip with a check circle icon and a removable state.', + 'Add an icon and a remove button so merchants can see status at a glance and dismiss the chip. This example shows a removable chip with a check circle icon in the graphic slot.', codeblock: { - title: 'With Icon and Remove Button', + title: 'Add an icon and a remove button to a chip', tabs: [ { code: './examples/with-icon-and-remove-button.html', @@ -93,9 +94,9 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Demonstrates a subdued clickable chip configured as a link with a product icon.', + 'Set `href` to make a chip link to another page when clicked. This example shows a subdued chip with a product icon that acts as a link.', codeblock: { - title: 'As a Link', + title: 'Use a chip as a link', tabs: [ { code: './examples/as-a-link.html', @@ -110,9 +111,9 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Illustrates a clickable chip in a disabled state, preventing interaction while displaying an inactive status.', + 'Disable a chip to prevent interaction while keeping it visible. This example shows a disabled chip with an accessibility label explaining the inactive state.', codeblock: { - title: 'Disabled State', + title: 'Disable a clickable chip', tabs: [ { code: './examples/disabled-state.html', 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 325bc0a6bc..907a1e47a3 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 @@ -46,8 +46,10 @@ const data: AdminReferenceEntityTemplateSchema = { examples: [ { image: 'link-default.png', + description: + 'Add an inline link to let merchants navigate to another page. This example shows a basic text link with an `href` property.', codeblock: { - title: 'Default', + title: 'Add a basic link', tabs: [ { code: './examples/default.html', @@ -62,9 +64,9 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Links automatically inherit the tone from their surrounding paragraph context.', + 'Embed links within paragraph text so merchants can navigate to related content inline. This example shows two links inside a paragraph that inherit the surrounding text tone.', codeblock: { - title: 'Basic Links in Paragraph', + title: 'Embed links in paragraph text', tabs: [ { code: './examples/basic-links-in-paragraph.html', @@ -79,9 +81,9 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Demonstrates how links can be integrated within banner components to highlight important information and provide direct action paths.', + 'Place links inside banners to provide direct actions alongside important notifications. This example shows a link inside an info banner prompting merchants to create a campaign.', codeblock: { - title: 'Links in Banner', + title: 'Add links inside a banner', tabs: [ { code: './examples/links-in-banner.html', @@ -96,9 +98,9 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Illustrates using links within a box container to provide contextual navigation and additional information in a visually contained area.', + 'Place links inside a box container to provide navigation within a visually distinct content area. This example shows two links inside a bordered box with background and padding.', codeblock: { - title: 'Links in Box Container', + title: 'Add links inside a box container', tabs: [ { code: './examples/links-in-box-container.html', @@ -113,9 +115,9 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Demonstrates how to create links that trigger file downloads, useful for exporting data or providing downloadable resources.', + 'Use the download attribute to trigger a file download when the link is clicked. This example shows a link that downloads a CSV file for customer data export.', codeblock: { - title: 'Download Links', + title: 'Trigger a file download', tabs: [ { code: './examples/download-links.html', @@ -130,9 +132,9 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Illustrates linking to external resources with different targets, showing how to open links in new tabs and provide navigation to external documentation.', + 'Open external URLs in a new tab so merchants stay on the current page. This example shows two links with `target="_blank"` pointing to external documentation.', codeblock: { - title: 'External Links', + title: 'Open external links in a new tab', tabs: [ { code: './examples/external-links.html', @@ -147,9 +149,9 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Shows how to use the `lang` attribute to specify the language of a link, supporting internationalization and proper screen reader pronunciation.', + 'Set the `lang` attribute so screen readers pronounce the link text correctly. This example shows a French-language link with the `lang` attribute set.', codeblock: { - title: 'Links with Language Attribute', + title: 'Set the language for a link', tabs: [ { code: './examples/links-with-language-attribute.html', @@ -164,9 +166,9 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Demonstrates how links can have different visual tones, including default, neutral, and critical, allowing for varied contextual styling.', + 'Configure links to inherit the tone of their parent paragraph to match the surrounding context. This example shows links inside paragraphs with six different tones.', codeblock: { - title: 'Links with Different Tones', + title: 'Match link tone to surrounding context', tabs: [ { code: './examples/links-with-different-tones.html', diff --git a/packages/ui-extensions/src/surfaces/admin/components/Menu/Menu.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Menu/Menu.doc.ts index aaa2815a6b..7b7c56808b 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Menu/Menu.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Menu/Menu.doc.ts @@ -44,8 +44,10 @@ const data: AdminReferenceEntityTemplateSchema = { description: 'Component examples', examples: [ { + description: + 'Add a dropdown menu of actions triggered by a button. This example shows a menu with three icon buttons including a critical delete action.', codeblock: { - title: 'Default', + title: 'Add a basic actions menu', tabs: [ { code: './examples/default.html', @@ -68,9 +70,9 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Shows how to organize menu items into logical sections with headings, helping to group related actions and improve menu readability.', + 'Organize menu items into labeled groups so merchants can quickly find related actions. This example shows two sections with headings separating product actions from export options.', codeblock: { - title: 'Menu with Sections', + title: 'Organize items into sections', tabs: [ { code: './examples/menu-with-sections.html', @@ -89,9 +91,9 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - "Demonstrates a menu with a mix of link-based buttons, standard buttons, and a disabled button, showcasing the menu's flexibility in handling different interaction states.", + 'Mix link-based, standard, and disabled buttons in a single menu. This example shows a menu with a link that opens in a new tab, a disabled action, and a download link.', codeblock: { - title: 'Menu with Links and Disabled Items', + title: 'Add links and disabled items to a menu', tabs: [ { code: './examples/menu-with-links-and-disabled-items.html', @@ -110,9 +112,9 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - "Presents a comprehensive menu showing how to create sections with different action groups and include a critical action at the menu's root level.", + 'Combine sections with root-level items to separate grouped actions from standalone ones like a destructive action. This example shows two sections for customer management alongside a root-level delete button.', codeblock: { - title: 'Actions menu with sections', + title: 'Mix sections with root-level actions', tabs: [ { code: './examples/customer-actions-menu.html', @@ -131,9 +133,9 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Illustrates a complex menu with nested sections, demonstrating how to organize multiple related actions with icons.', + 'Build a settings-style menu with multiple sections and a standalone action at the bottom. This example shows account and store settings sections with a root-level sign-out link.', codeblock: { - title: 'Menu with nested sections', + title: 'Build a settings menu with sections', tabs: [ { code: './examples/settings-menu.html', @@ -152,9 +154,9 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Use an icon-only button as the menu trigger for a compact "more actions" pattern commonly used in toolbars and table rows.', + 'Use an icon-only button as the menu trigger for a compact "more actions" pattern. This example shows a three-dot icon button that opens a menu with common product actions.', codeblock: { - title: 'Icon-only trigger', + title: 'Trigger a menu from an icon-only button', tabs: [ { code: './examples/icon-only-trigger.html', From ec9f0a76b347bcc37c8c6cd2ee382bec14a5da34 Mon Sep 17 00:00:00 2001 From: Tim Trevor Date: Fri, 20 Feb 2026 16:28:25 -0800 Subject: [PATCH 08/21] Update packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts Co-authored-by: Michelle Vinci --- .../src/surfaces/admin/components/Clickable/Clickable.doc.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts index f6b027d1ff..3402724347 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts @@ -59,7 +59,7 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Set href to make a clickable element navigate like a link. This example shows a clickable that opens a URL in a new browser tab.', + 'Set the `href` property to make a clickable element navigate like a link. This example shows a clickable component that opens a URL in a new browser tab.', codeblock: { title: 'Navigate to a URL', tabs: [ From 72f6890883305a02cf30339ceeb20b4086046de0 Mon Sep 17 00:00:00 2001 From: Tim Trevor Date: Fri, 20 Feb 2026 16:28:43 -0800 Subject: [PATCH 09/21] Update packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts Co-authored-by: Michelle Vinci --- .../src/surfaces/admin/components/Clickable/Clickable.doc.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts index 3402724347..e59d1aaa73 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts @@ -76,7 +76,7 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Use a clickable as a form submit button with a disabled state to prevent premature submission. This example shows a disabled submit-type clickable with border and padding.', + 'Use a clickable component as a form submit button with a disabled state to prevent premature submission. This example shows a disabled submit-type clickable component with a border and padding.', codeblock: { title: 'Create a form submit button', tabs: [ From 32b1d1193e15b5818b3f2ef4e205b01879be1fa3 Mon Sep 17 00:00:00 2001 From: Tim Trevor Date: Fri, 20 Feb 2026 16:28:58 -0800 Subject: [PATCH 10/21] Update packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts Co-authored-by: Michelle Vinci --- .../src/surfaces/admin/components/Clickable/Clickable.doc.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts index e59d1aaa73..38e5af6a5d 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts @@ -93,7 +93,7 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Embed a clickable element within a content section to provide an interactive action alongside text. This example shows a styled clickable button inside a box with a heading and description.', + 'Embed a clickable component within a content section to provide an interactive action alongside text. This example shows a styled clickable button inside a box with a heading and description.', codeblock: { title: 'Add a clickable action to a section', tabs: [ From 0bf22fcfb74c57505a9429e930dcd363f93b160d Mon Sep 17 00:00:00 2001 From: Tim Trevor Date: Fri, 20 Feb 2026 16:29:49 -0800 Subject: [PATCH 11/21] Update packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts Co-authored-by: Michelle Vinci --- .../src/surfaces/admin/components/Clickable/Clickable.doc.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts index 38e5af6a5d..e69258b02b 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts @@ -42,7 +42,7 @@ const data: AdminReferenceEntityTemplateSchema = { { image: 'clickable-default.png', description: - "Build custom interactive elements with flexible styling that Button or Link don't support. This example shows two clickable elements with different background and border styles.", + "Build custom interactive elements with flexible styling that [button](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/actions/button) or [link](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/actions/link) don't support. This example shows two clickable elements with different background and border styles.", codeblock: { title: 'Create a custom interactive element', tabs: [ From a7668398649b44519d0c1b70d43d3c8fe02a713c Mon Sep 17 00:00:00 2001 From: Tim Trevor Date: Fri, 20 Feb 2026 16:30:02 -0800 Subject: [PATCH 12/21] Update packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts Co-authored-by: Michelle Vinci --- .../admin/components/ClickableChip/ClickableChip.doc.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts index 22c1e451be..a7a3a3e168 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts @@ -42,7 +42,7 @@ const data: AdminReferenceEntityTemplateSchema = { examples: [ { description: - 'Create an interactive chip that merchants can click to trigger an action. This example a clickable chip with default styling.', + 'Create an interactive chip that merchants can click to trigger an action. This example shows a clickable chip component with default styling.', image: 'clickable-chip-default.png', codeblock: { title: 'Add a clickable chip with default styling', From f7ad445723241fcf1f777dd6c3b08f04c24f9334 Mon Sep 17 00:00:00 2001 From: Tim Trevor Date: Fri, 20 Feb 2026 16:30:20 -0800 Subject: [PATCH 13/21] Update packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts Co-authored-by: Michelle Vinci --- .../admin/components/ClickableChip/ClickableChip.doc.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts index a7a3a3e168..d9050a311c 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts @@ -94,7 +94,7 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Set `href` to make a chip link to another page when clicked. This example shows a subdued chip with a product icon that acts as a link.', + 'Set the `href` property to make a chip link to another page when clicked. This example shows a subdued chip with a product icon that acts as a link.', codeblock: { title: 'Use a chip as a link', tabs: [ From 306e8ea39024916fe0aecfe3e6f09cca90e087ba Mon Sep 17 00:00:00 2001 From: Tim Trevor Date: Fri, 20 Feb 2026 16:30:33 -0800 Subject: [PATCH 14/21] Update packages/ui-extensions/src/surfaces/admin/components/Link/Link.doc.ts Co-authored-by: Michelle Vinci --- .../src/surfaces/admin/components/Link/Link.doc.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 907a1e47a3..8d881da93a 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 @@ -115,7 +115,7 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Use the download attribute to trigger a file download when the link is clicked. This example shows a link that downloads a CSV file for customer data export.', + 'Use the `download` property to trigger a file download when the link is clicked. This example shows a link that downloads a CSV file for customer data export.', codeblock: { title: 'Trigger a file download', tabs: [ From 86dcf48f5b1c3559caeffd4814cc22f35dc3c788 Mon Sep 17 00:00:00 2001 From: Tim Trevor Date: Fri, 20 Feb 2026 16:30:51 -0800 Subject: [PATCH 15/21] Update packages/ui-extensions/src/surfaces/admin/components/Link/Link.doc.ts Co-authored-by: Michelle Vinci --- .../src/surfaces/admin/components/Link/Link.doc.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 8d881da93a..774d8c4c31 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 @@ -149,7 +149,7 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Set the `lang` attribute so screen readers pronounce the link text correctly. This example shows a French-language link with the `lang` attribute set.', + 'Set the `lang` property so screen readers pronounce the link text correctly. This example shows a French-language link with the `lang` attribute set.', codeblock: { title: 'Set the language for a link', tabs: [ From 3eeeff5e00de75545211f40da4f41eb910327f2e Mon Sep 17 00:00:00 2001 From: Tim Trevor Date: Tue, 24 Feb 2026 10:24:16 -0800 Subject: [PATCH 16/21] Delete all jsx code examples for Polaris components leaving only HTML --- .../components/ButtonGroup/ButtonGroup.doc.ts | 21 -------- .../examples/bulk-actions-in-data-tables.jsx | 7 --- .../ButtonGroup/examples/default.jsx | 4 -- .../examples/destructive-actions-pattern.jsx | 6 --- .../examples/segmented-appearance.jsx | 5 -- .../examples/toolbar-buttons-with-icons.jsx | 11 ----- .../admin/components/Chip/Chip.doc.ts | 30 ------------ .../components/Chip/examples/basic-usage.jsx | 3 -- .../Chip/examples/color-variants.jsx | 12 ----- .../components/Chip/examples/default.jsx | 1 - .../Chip/examples/product-status.jsx | 12 ----- .../Chip/examples/text-truncation.jsx | 12 ----- .../Chip/examples/with-icon-graphic.jsx | 4 -- .../components/Clickable/Clickable.doc.ts | 24 ---------- .../accessibility-with-aria-attributes.jsx | 8 ---- .../components/Clickable/examples/default.jsx | 12 ----- .../examples/disabled-link-with-aria.jsx | 7 --- .../Clickable/examples/form-submit-button.jsx | 3 -- .../Clickable/examples/link-mode.jsx | 3 -- .../section-with-clickable-action.jsx | 9 ---- .../ClickableChip/ClickableChip.doc.ts | 20 -------- .../ClickableChip/examples/as-a-link.jsx | 8 ---- .../ClickableChip/examples/basic-usage.jsx | 17 ------- .../ClickableChip/examples/default.jsx | 1 - .../ClickableChip/examples/disabled-state.jsx | 7 --- .../examples/with-icon-and-remove-button.jsx | 8 ---- .../admin/components/Link/Link.doc.ts | 32 ------------- .../examples/basic-links-in-paragraph.jsx | 3 -- .../components/Link/examples/default.jsx | 1 - .../Link/examples/download-links.jsx | 3 -- .../Link/examples/external-links.jsx | 5 -- .../Link/examples/links-in-banner.jsx | 5 -- .../Link/examples/links-in-box-container.jsx | 5 -- .../examples/links-with-different-tones.jsx | 25 ---------- .../links-with-language-attribute.jsx | 3 -- .../admin/components/Menu/Menu.doc.ts | 48 ------------------- .../Menu/examples/customer-actions-menu.jsx | 18 ------- .../components/Menu/examples/default.jsx | 11 ----- .../Menu/examples/icon-only-trigger.jsx | 17 ------- .../menu-with-links-and-disabled-items.jsx | 13 ----- .../Menu/examples/menu-with-sections.jsx | 15 ------ .../Menu/examples/settings-menu.jsx | 19 -------- 42 files changed, 478 deletions(-) delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/bulk-actions-in-data-tables.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/default.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/destructive-actions-pattern.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/segmented-appearance.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/toolbar-buttons-with-icons.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Chip/examples/basic-usage.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Chip/examples/color-variants.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Chip/examples/default.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Chip/examples/product-status.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Chip/examples/text-truncation.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Chip/examples/with-icon-graphic.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/accessibility-with-aria-attributes.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/default.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/disabled-link-with-aria.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/form-submit-button.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/link-mode.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/section-with-clickable-action.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/as-a-link.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/basic-usage.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/default.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/disabled-state.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/with-icon-and-remove-button.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/examples/basic-links-in-paragraph.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/examples/default.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/examples/download-links.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/examples/external-links.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-in-banner.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-in-box-container.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-with-different-tones.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-with-language-attribute.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Menu/examples/customer-actions-menu.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Menu/examples/default.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Menu/examples/icon-only-trigger.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Menu/examples/menu-with-links-and-disabled-items.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Menu/examples/menu-with-sections.jsx delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Menu/examples/settings-menu.jsx diff --git a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts index 0819a45c81..fa03659838 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts @@ -47,11 +47,6 @@ const data: AdminReferenceEntityTemplateSchema = { language: 'html', layout: 'inline', }, - { - code: './examples/default.jsx', - language: 'preview-jsx', - layout: 'inline', - }, ], }, }, @@ -65,10 +60,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/bulk-actions-in-data-tables.html', language: 'html', }, - { - code: './examples/bulk-actions-in-data-tables.jsx', - language: 'preview-jsx', - }, ], }, }, @@ -82,10 +73,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/toolbar-buttons-with-icons.html', language: 'html', }, - { - code: './examples/toolbar-buttons-with-icons.jsx', - language: 'preview-jsx', - }, ], }, }, @@ -99,10 +86,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/segmented-appearance.html', language: 'html', }, - { - code: './examples/segmented-appearance.jsx', - language: 'preview-jsx', - }, ], }, }, @@ -116,10 +99,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/destructive-actions-pattern.html', language: 'html', }, - { - code: './examples/destructive-actions-pattern.jsx', - language: 'preview-jsx', - }, ], }, }, diff --git a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/bulk-actions-in-data-tables.jsx b/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/bulk-actions-in-data-tables.jsx deleted file mode 100644 index 6034c3bb65..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/bulk-actions-in-data-tables.jsx +++ /dev/null @@ -1,7 +0,0 @@ - - Archive - Export - - Delete - - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/default.jsx b/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/default.jsx deleted file mode 100644 index d3c6c7d089..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/default.jsx +++ /dev/null @@ -1,4 +0,0 @@ - - Save - Cancel - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/destructive-actions-pattern.jsx b/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/destructive-actions-pattern.jsx deleted file mode 100644 index a6a7e10594..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/destructive-actions-pattern.jsx +++ /dev/null @@ -1,6 +0,0 @@ - - Cancel - - Delete product - - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/segmented-appearance.jsx b/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/segmented-appearance.jsx deleted file mode 100644 index c28ccf8fef..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/segmented-appearance.jsx +++ /dev/null @@ -1,5 +0,0 @@ - - Day - Week - Month - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/toolbar-buttons-with-icons.jsx b/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/toolbar-buttons-with-icons.jsx deleted file mode 100644 index fd24aeff15..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/examples/toolbar-buttons-with-icons.jsx +++ /dev/null @@ -1,11 +0,0 @@ - - - Duplicate - - - Archive - - - Delete - - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Chip/Chip.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Chip/Chip.doc.ts index 413166a0ac..9c00f75293 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Chip/Chip.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Chip/Chip.doc.ts @@ -47,11 +47,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/default.html', language: 'html', }, - - { - code: './examples/default.jsx', - language: 'preview-jsx', - }, ], }, }, @@ -71,11 +66,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/basic-usage.html', language: 'html', }, - - { - code: './examples/basic-usage.jsx', - language: 'preview-jsx', - }, ], }, }, @@ -89,11 +79,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/with-icon-graphic.html', language: 'html', }, - - { - code: './examples/with-icon-graphic.jsx', - language: 'preview-jsx', - }, ], }, }, @@ -107,11 +92,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/color-variants.html', language: 'html', }, - - { - code: './examples/color-variants.jsx', - language: 'preview-jsx', - }, ], }, }, @@ -125,11 +105,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/product-status.html', language: 'html', }, - - { - code: './examples/product-status.jsx', - language: 'preview-jsx', - }, ], }, }, @@ -143,11 +118,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/text-truncation.html', language: 'html', }, - - { - code: './examples/text-truncation.jsx', - language: 'preview-jsx', - }, ], }, }, diff --git a/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/basic-usage.jsx b/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/basic-usage.jsx deleted file mode 100644 index 818a0232fa..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/basic-usage.jsx +++ /dev/null @@ -1,3 +0,0 @@ - - Active - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/color-variants.jsx b/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/color-variants.jsx deleted file mode 100644 index 45be795250..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/color-variants.jsx +++ /dev/null @@ -1,12 +0,0 @@ - - - Draft - - - Published - - - - Verified - - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/default.jsx b/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/default.jsx deleted file mode 100644 index 1f5df67ad4..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/default.jsx +++ /dev/null @@ -1 +0,0 @@ -Chip \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/product-status.jsx b/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/product-status.jsx deleted file mode 100644 index f98b217cc8..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/product-status.jsx +++ /dev/null @@ -1,12 +0,0 @@ - - - Active - - - Draft - - - - Published - - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/text-truncation.jsx b/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/text-truncation.jsx deleted file mode 100644 index ae45a1c046..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/text-truncation.jsx +++ /dev/null @@ -1,12 +0,0 @@ - - - - This is a very long product name that will be truncated with ellipsis when - it exceeds the container width - - - - Electronics and computer accessories category with extended description - - - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/with-icon-graphic.jsx b/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/with-icon-graphic.jsx deleted file mode 100644 index 588c69280c..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/with-icon-graphic.jsx +++ /dev/null @@ -1,4 +0,0 @@ - - - Electronics - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts index e69258b02b..b585b7e9dd 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts @@ -50,10 +50,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/default.html', language: 'html', }, - { - code: './examples/default.jsx', - language: 'preview-jsx', - }, ], }, }, @@ -67,10 +63,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/link-mode.html', language: 'html', }, - { - code: './examples/link-mode.jsx', - language: 'preview-jsx', - }, ], }, }, @@ -84,10 +76,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/form-submit-button.html', language: 'html', }, - { - code: './examples/form-submit-button.jsx', - language: 'preview-jsx', - }, ], }, }, @@ -101,10 +89,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/section-with-clickable-action.html', language: 'html', }, - { - code: './examples/section-with-clickable-action.jsx', - language: 'preview-jsx', - }, ], }, }, @@ -118,10 +102,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/accessibility-with-aria-attributes.html', language: 'html', }, - { - code: './examples/accessibility-with-aria-attributes.jsx', - language: 'preview-jsx', - }, ], }, }, @@ -135,10 +115,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/disabled-link-with-aria.html', language: 'html', }, - { - code: './examples/disabled-link-with-aria.jsx', - language: 'preview-jsx', - }, ], }, }, diff --git a/packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/accessibility-with-aria-attributes.jsx b/packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/accessibility-with-aria-attributes.jsx deleted file mode 100644 index a3d01c55d6..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/accessibility-with-aria-attributes.jsx +++ /dev/null @@ -1,8 +0,0 @@ - - Delete - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/default.jsx b/packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/default.jsx deleted file mode 100644 index 1380485bce..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/default.jsx +++ /dev/null @@ -1,12 +0,0 @@ -<> - Create Store - - - View Shipping Settings - - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/disabled-link-with-aria.jsx b/packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/disabled-link-with-aria.jsx deleted file mode 100644 index ebd5987e26..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/disabled-link-with-aria.jsx +++ /dev/null @@ -1,7 +0,0 @@ - - Unavailable feature - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/form-submit-button.jsx b/packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/form-submit-button.jsx deleted file mode 100644 index fd9a3363f7..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/form-submit-button.jsx +++ /dev/null @@ -1,3 +0,0 @@ - - Save changes - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/link-mode.jsx b/packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/link-mode.jsx deleted file mode 100644 index ba11a98e30..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/link-mode.jsx +++ /dev/null @@ -1,3 +0,0 @@ - - Visit Shopify - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/section-with-clickable-action.jsx b/packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/section-with-clickable-action.jsx deleted file mode 100644 index d275265ea2..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Clickable/examples/section-with-clickable-action.jsx +++ /dev/null @@ -1,9 +0,0 @@ - - - Product settings - Configure your product inventory and pricing settings. - - Configure settings - - - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts index d9050a311c..f4b33308b7 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts @@ -51,10 +51,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/default.html', language: 'html', }, - { - code: './examples/default.jsx', - language: 'preview-jsx', - }, ], }, }, @@ -68,10 +64,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/basic-usage.html', language: 'html', }, - { - code: './examples/basic-usage.jsx', - language: 'preview-jsx', - }, ], }, }, @@ -85,10 +77,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/with-icon-and-remove-button.html', language: 'html', }, - { - code: './examples/with-icon-and-remove-button.jsx', - language: 'preview-jsx', - }, ], }, }, @@ -102,10 +90,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/as-a-link.html', language: 'html', }, - { - code: './examples/as-a-link.jsx', - language: 'preview-jsx', - }, ], }, }, @@ -119,10 +103,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/disabled-state.html', language: 'html', }, - { - code: './examples/disabled-state.jsx', - language: 'preview-jsx', - }, ], }, }, diff --git a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/as-a-link.jsx b/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/as-a-link.jsx deleted file mode 100644 index c7923376db..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/as-a-link.jsx +++ /dev/null @@ -1,8 +0,0 @@ - - - T-shirt - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/basic-usage.jsx b/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/basic-usage.jsx deleted file mode 100644 index 113aaae90b..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/basic-usage.jsx +++ /dev/null @@ -1,17 +0,0 @@ - - - Active - - - Draft - - - Archived - - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/default.jsx b/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/default.jsx deleted file mode 100644 index 82016ddb53..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/default.jsx +++ /dev/null @@ -1 +0,0 @@ -Clickable chip \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/disabled-state.jsx b/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/disabled-state.jsx deleted file mode 100644 index 5a301b88da..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/disabled-state.jsx +++ /dev/null @@ -1,7 +0,0 @@ - - Inactive - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/with-icon-and-remove-button.jsx b/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/with-icon-and-remove-button.jsx deleted file mode 100644 index a3977fa640..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/examples/with-icon-and-remove-button.jsx +++ /dev/null @@ -1,8 +0,0 @@ - - - In progress - \ No newline at end of file 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 774d8c4c31..ab7d1d1513 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 @@ -55,10 +55,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/default.html', language: 'html', }, - { - code: './examples/default.jsx', - language: 'preview-jsx', - }, ], }, }, @@ -72,10 +68,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/basic-links-in-paragraph.html', language: 'html', }, - { - code: './examples/basic-links-in-paragraph.jsx', - language: 'preview-jsx', - }, ], }, }, @@ -89,10 +81,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/links-in-banner.html', language: 'html', }, - { - code: './examples/links-in-banner.jsx', - language: 'preview-jsx', - }, ], }, }, @@ -106,10 +94,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/links-in-box-container.html', language: 'html', }, - { - code: './examples/links-in-box-container.jsx', - language: 'preview-jsx', - }, ], }, }, @@ -123,10 +107,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/download-links.html', language: 'html', }, - { - code: './examples/download-links.jsx', - language: 'preview-jsx', - }, ], }, }, @@ -140,10 +120,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/external-links.html', language: 'html', }, - { - code: './examples/external-links.jsx', - language: 'preview-jsx', - }, ], }, }, @@ -157,10 +133,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/links-with-language-attribute.html', language: 'html', }, - { - code: './examples/links-with-language-attribute.jsx', - language: 'preview-jsx', - }, ], }, }, @@ -174,10 +146,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/links-with-different-tones.html', language: 'html', }, - { - code: './examples/links-with-different-tones.jsx', - language: 'preview-jsx', - }, ], }, }, diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/basic-links-in-paragraph.jsx b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/basic-links-in-paragraph.jsx deleted file mode 100644 index aba876b059..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/basic-links-in-paragraph.jsx +++ /dev/null @@ -1,3 +0,0 @@ - - Your product catalog is empty. Start by adding your first product or importing existing inventory. - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/default.jsx b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/default.jsx deleted file mode 100644 index 2ff4812f97..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/default.jsx +++ /dev/null @@ -1 +0,0 @@ -fufilling orders \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/download-links.jsx b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/download-links.jsx deleted file mode 100644 index d984b73e91..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/download-links.jsx +++ /dev/null @@ -1,3 +0,0 @@ - - Export your customer data for marketing analysis. Download customer list - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/external-links.jsx b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/external-links.jsx deleted file mode 100644 index ea12342afa..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/external-links.jsx +++ /dev/null @@ -1,5 +0,0 @@ - - - Need help with policies? Read our billing docs or review the terms of service. - - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-in-banner.jsx b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-in-banner.jsx deleted file mode 100644 index bcad9634b9..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-in-banner.jsx +++ /dev/null @@ -1,5 +0,0 @@ - - - Black Friday campaigns are now available! Create your campaign - - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-in-box-container.jsx b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-in-box-container.jsx deleted file mode 100644 index fe714dfd0c..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-in-box-container.jsx +++ /dev/null @@ -1,5 +0,0 @@ - - - Boost your store's conversion with professional themes. Browse theme store or customize your current theme. - - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-with-different-tones.jsx b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-with-different-tones.jsx deleted file mode 100644 index ce4a6c765c..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-with-different-tones.jsx +++ /dev/null @@ -1,25 +0,0 @@ - - - Default tone: View orders - - - - Success tone: Inventory help - - - - Critical tone: Close store - - - - Warning tone: Update billing info - - - - Info tone: Learn more about reports - - - - Caution tone: View archived products - - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-with-language-attribute.jsx b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-with-language-attribute.jsx deleted file mode 100644 index cfb48c5aa5..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/links-with-language-attribute.jsx +++ /dev/null @@ -1,3 +0,0 @@ - - Voir en français: Gérer les produits - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Menu/Menu.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Menu/Menu.doc.ts index 7b7c56808b..0bf668a120 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Menu/Menu.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Menu/Menu.doc.ts @@ -57,14 +57,6 @@ const data: AdminReferenceEntityTemplateSchema = { minHeight: '300px', }, }, - { - code: './examples/default.jsx', - language: 'preview-jsx', - layout: 'alignStart', - customStyles: { - minHeight: '300px', - }, - }, ], }, }, @@ -78,14 +70,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/menu-with-sections.html', language: 'html', }, - { - code: './examples/menu-with-sections.jsx', - language: 'preview-jsx', - layout: 'alignStart', - customStyles: { - minHeight: '400px', - }, - }, ], }, }, @@ -99,14 +83,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/menu-with-links-and-disabled-items.html', language: 'html', }, - { - code: './examples/menu-with-links-and-disabled-items.jsx', - language: 'preview-jsx', - layout: 'alignStart', - customStyles: { - minHeight: '300px', - }, - }, ], }, }, @@ -120,14 +96,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/customer-actions-menu.html', language: 'html', }, - { - code: './examples/customer-actions-menu.jsx', - language: 'preview-jsx', - layout: 'alignStart', - customStyles: { - minHeight: '300px', - }, - }, ], }, }, @@ -141,14 +109,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/settings-menu.html', language: 'html', }, - { - code: './examples/settings-menu.jsx', - language: 'preview-jsx', - layout: 'alignStart', - customStyles: { - minHeight: '350px', - }, - }, ], }, }, @@ -162,14 +122,6 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/icon-only-trigger.html', language: 'html', }, - { - code: './examples/icon-only-trigger.jsx', - language: 'preview-jsx', - layout: 'alignStart', - customStyles: { - minHeight: '300px', - }, - }, ], }, }, diff --git a/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/customer-actions-menu.jsx b/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/customer-actions-menu.jsx deleted file mode 100644 index 78075f10af..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/customer-actions-menu.jsx +++ /dev/null @@ -1,18 +0,0 @@ -<> - Edit customer - - - - Edit customer - Send email - View orders - - - Reset password - Disable account - - - Delete customer - - - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/default.jsx b/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/default.jsx deleted file mode 100644 index f56576b87a..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/default.jsx +++ /dev/null @@ -1,11 +0,0 @@ -<> - Edit customer - - - Merge customer - Request customer data - - Delete customer - - - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/icon-only-trigger.jsx b/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/icon-only-trigger.jsx deleted file mode 100644 index e85d587c36..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/icon-only-trigger.jsx +++ /dev/null @@ -1,17 +0,0 @@ -<> - - - - Edit product - Duplicate product - Archive product - - Delete product - - - diff --git a/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/menu-with-links-and-disabled-items.jsx b/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/menu-with-links-and-disabled-items.jsx deleted file mode 100644 index 8b00b58c58..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/menu-with-links-and-disabled-items.jsx +++ /dev/null @@ -1,13 +0,0 @@ -<> - Options - - - - View product page - - Unavailable action - - Download report - - - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/menu-with-sections.jsx b/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/menu-with-sections.jsx deleted file mode 100644 index 4ef7ca082b..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/menu-with-sections.jsx +++ /dev/null @@ -1,15 +0,0 @@ -<> - Bulk actions - - - - Edit selected - Duplicate selected - Archive selected - - - Export as CSV - Print barcodes - - - \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/settings-menu.jsx b/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/settings-menu.jsx deleted file mode 100644 index beb5e6d6b2..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/settings-menu.jsx +++ /dev/null @@ -1,19 +0,0 @@ -<> - - Settings - - - - - Profile settings - Security - Billing information - - - Store settings - Payment providers - Shipping rates - - Sign out - - \ No newline at end of file From a99ddaf624438d1a6e24259325838bc3fccbd8ce Mon Sep 17 00:00:00 2001 From: Tim Trevor Date: Tue, 24 Feb 2026 10:41:27 -0800 Subject: [PATCH 17/21] Delete image properties from default examples --- .../src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts | 1 - .../src/surfaces/admin/components/Clickable/Clickable.doc.ts | 1 - .../surfaces/admin/components/ClickableChip/ClickableChip.doc.ts | 1 - .../ui-extensions/src/surfaces/admin/components/Link/Link.doc.ts | 1 - 4 files changed, 4 deletions(-) diff --git a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts index fa03659838..e89c3bac4f 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts @@ -36,7 +36,6 @@ const data: AdminReferenceEntityTemplateSchema = { description: 'Component examples', examples: [ { - image: 'button-default.png', description: 'Group related buttons together with a primary action and secondary options. This example shows a button group with a save button and a cancel button using the slot layout.', codeblock: { diff --git a/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts index b585b7e9dd..4dcccac63c 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts @@ -40,7 +40,6 @@ const data: AdminReferenceEntityTemplateSchema = { description: 'Component examples', examples: [ { - image: 'clickable-default.png', description: "Build custom interactive elements with flexible styling that [button](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/actions/button) or [link](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/actions/link) don't support. This example shows two clickable elements with different background and border styles.", codeblock: { diff --git a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts index f4b33308b7..e1986fc49c 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts @@ -43,7 +43,6 @@ const data: AdminReferenceEntityTemplateSchema = { { description: 'Create an interactive chip that merchants can click to trigger an action. This example shows a clickable chip component with default styling.', - image: 'clickable-chip-default.png', codeblock: { title: 'Add a clickable chip with default styling', 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 ab7d1d1513..ee166d7f16 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 @@ -45,7 +45,6 @@ const data: AdminReferenceEntityTemplateSchema = { description: 'Component examples', examples: [ { - image: 'link-default.png', description: 'Add an inline link to let merchants navigate to another page. This example shows a basic text link with an `href` property.', codeblock: { From 707d6673094bc563872b2faf870e585c6d26711c Mon Sep 17 00:00:00 2001 From: Tim Trevor Date: Tue, 24 Feb 2026 14:59:03 -0800 Subject: [PATCH 18/21] Revert changes to Chip component --- .../admin/components/Chip/Chip.doc.ts | 67 +++++++++++++++---- .../components/Chip/examples/basic-usage.jsx | 3 + .../Chip/examples/color-variants.jsx | 12 ++++ .../components/Chip/examples/default.jsx | 1 + .../Chip/examples/product-status.jsx | 12 ++++ .../Chip/examples/text-truncation.jsx | 12 ++++ .../Chip/examples/with-icon-graphic.jsx | 4 ++ 7 files changed, 98 insertions(+), 13 deletions(-) create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Chip/examples/basic-usage.jsx create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Chip/examples/color-variants.jsx create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Chip/examples/default.jsx create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Chip/examples/product-status.jsx create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Chip/examples/text-truncation.jsx create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Chip/examples/with-icon-graphic.jsx diff --git a/packages/ui-extensions/src/surfaces/admin/components/Chip/Chip.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Chip/Chip.doc.ts index 9c00f75293..81a4a61b6c 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Chip/Chip.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Chip/Chip.doc.ts @@ -6,35 +6,46 @@ const data: AdminReferenceEntityTemplateSchema = { thumbnail: '/assets/templated-apis-screenshots/admin/components/chip.png', isVisualComponent: true, subSections: [ + { + title: 'Useful for', + type: 'Generic' as const, + anchorLink: 'useful-for', + sectionContent: `- Labeling, organizing, and categorizing objects +- Highlighting content attributes +- Enhancing discoverability by identifying items with similar properties`, + }, { title: 'Best practices', type: 'Generic' as const, anchorLink: 'best-practices', - sectionContent: `- **Use chips to label and categorize content:** [chip](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/typography-and-content/chip) works best for displaying tags, statuses, and categories that help merchants quickly understand content attributes. Don't use chips for actions—they're visual indicators, not buttons. -- **Keep chip text concise and scannable:** Short labels like "Featured" or "On sale" are instantly recognizable. Long chip text defeats the purpose of quick scanning and might truncate, hiding important information. -- **Choose the right visual weight:** Use subdued chips for secondary metadata, standard chips for typical tags and categories, and strong chips for important or verified information that needs emphasis. -- **Position chips near what they describe:** Place chips adjacent to the items they categorize for immediate context. In lists, position chips consistently to help merchants scan efficiently. -- **Add icons to reinforce meaning:** Icons can make chip meanings clearer at a glance, especially for status indicators or commonly recognized categories.`, + sectionContent: `- \`subdued\`: use for secondary or less important information +- \`base\`: use as default color +- \`strong\`: use for important or verified status +- Text truncates automatically, keep labels short to avoid truncation +- Chips are static indicators, not interactive or dismissible. For interactive chips, use ClickableChip +- Add icons to \`graphic\` slot to provide visual context +- Display chips near the content they classify`, }, { - title: 'Limitations', + title: 'Content guidelines', type: 'Generic' as const, - anchorLink: 'limitations', - sectionContent: `- Chip text is single-line only and truncates with an ellipsis when space is limited. There's no built-in way to show the full text on hover or through tooltips. -- Only predefined style variants are available. Custom colors, borders, or backgrounds can't be applied to chips. -- Icons in chips must come from the standard icon library. Custom icons, images, or other graphics aren't supported.`, + anchorLink: 'content-guidelines', + sectionContent: `Chip labels should: +- Be short and concise to avoid truncation +- Use \`accessibilityLabel\` to describe purpose for screen readers +- Common status labels: \`Active\`, \`Draft\`, \`Published\`, \`Verified\` +- Common category labels: \`Product type\`, \`Collection\`, \`Tag name\``, }, ], definitions: [ { title: 'Properties', - description: 'Configure the following properties on the chip component.', + description: '', type: 'Chip', }, { title: 'Slots', - description: - 'The chip component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).', + description: '', type: 'ChipSlots', }, ], @@ -47,6 +58,11 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/default.html', language: 'html', }, + + { + code: './examples/default.jsx', + language: 'preview-jsx', + }, ], }, }, @@ -66,6 +82,11 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/basic-usage.html', language: 'html', }, + + { + code: './examples/basic-usage.jsx', + language: 'preview-jsx', + }, ], }, }, @@ -79,6 +100,11 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/with-icon-graphic.html', language: 'html', }, + + { + code: './examples/with-icon-graphic.jsx', + language: 'preview-jsx', + }, ], }, }, @@ -92,6 +118,11 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/color-variants.html', language: 'html', }, + + { + code: './examples/color-variants.jsx', + language: 'preview-jsx', + }, ], }, }, @@ -105,6 +136,11 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/product-status.html', language: 'html', }, + + { + code: './examples/product-status.jsx', + language: 'preview-jsx', + }, ], }, }, @@ -118,6 +154,11 @@ const data: AdminReferenceEntityTemplateSchema = { code: './examples/text-truncation.html', language: 'html', }, + + { + code: './examples/text-truncation.jsx', + language: 'preview-jsx', + }, ], }, }, diff --git a/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/basic-usage.jsx b/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/basic-usage.jsx new file mode 100644 index 0000000000..818a0232fa --- /dev/null +++ b/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/basic-usage.jsx @@ -0,0 +1,3 @@ + + Active + \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/color-variants.jsx b/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/color-variants.jsx new file mode 100644 index 0000000000..45be795250 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/color-variants.jsx @@ -0,0 +1,12 @@ + + + Draft + + + Published + + + + Verified + + \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/default.jsx b/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/default.jsx new file mode 100644 index 0000000000..1f5df67ad4 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/default.jsx @@ -0,0 +1 @@ +Chip \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/product-status.jsx b/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/product-status.jsx new file mode 100644 index 0000000000..f98b217cc8 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/product-status.jsx @@ -0,0 +1,12 @@ + + + Active + + + Draft + + + + Published + + \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/text-truncation.jsx b/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/text-truncation.jsx new file mode 100644 index 0000000000..ae45a1c046 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/text-truncation.jsx @@ -0,0 +1,12 @@ + + + + This is a very long product name that will be truncated with ellipsis when + it exceeds the container width + + + + Electronics and computer accessories category with extended description + + + \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/with-icon-graphic.jsx b/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/with-icon-graphic.jsx new file mode 100644 index 0000000000..588c69280c --- /dev/null +++ b/packages/ui-extensions/src/surfaces/admin/components/Chip/examples/with-icon-graphic.jsx @@ -0,0 +1,4 @@ + + + Electronics + \ No newline at end of file From af1b40021384795c80282dc6959c65c332b7339c Mon Sep 17 00:00:00 2001 From: Tim Trevor Date: Tue, 24 Feb 2026 15:01:29 -0800 Subject: [PATCH 19/21] Revert changes to Chip.doc.ts --- .../admin/components/Chip/Chip.doc.ts | 37 +++++++------------ 1 file changed, 13 insertions(+), 24 deletions(-) diff --git a/packages/ui-extensions/src/surfaces/admin/components/Chip/Chip.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Chip/Chip.doc.ts index 81a4a61b6c..413166a0ac 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Chip/Chip.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Chip/Chip.doc.ts @@ -6,46 +6,35 @@ const data: AdminReferenceEntityTemplateSchema = { thumbnail: '/assets/templated-apis-screenshots/admin/components/chip.png', isVisualComponent: true, subSections: [ - { - title: 'Useful for', - type: 'Generic' as const, - anchorLink: 'useful-for', - sectionContent: `- Labeling, organizing, and categorizing objects -- Highlighting content attributes -- Enhancing discoverability by identifying items with similar properties`, - }, { title: 'Best practices', type: 'Generic' as const, anchorLink: 'best-practices', - sectionContent: `- \`subdued\`: use for secondary or less important information -- \`base\`: use as default color -- \`strong\`: use for important or verified status -- Text truncates automatically, keep labels short to avoid truncation -- Chips are static indicators, not interactive or dismissible. For interactive chips, use ClickableChip -- Add icons to \`graphic\` slot to provide visual context -- Display chips near the content they classify`, + sectionContent: `- **Use chips to label and categorize content:** [chip](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/typography-and-content/chip) works best for displaying tags, statuses, and categories that help merchants quickly understand content attributes. Don't use chips for actions—they're visual indicators, not buttons. +- **Keep chip text concise and scannable:** Short labels like "Featured" or "On sale" are instantly recognizable. Long chip text defeats the purpose of quick scanning and might truncate, hiding important information. +- **Choose the right visual weight:** Use subdued chips for secondary metadata, standard chips for typical tags and categories, and strong chips for important or verified information that needs emphasis. +- **Position chips near what they describe:** Place chips adjacent to the items they categorize for immediate context. In lists, position chips consistently to help merchants scan efficiently. +- **Add icons to reinforce meaning:** Icons can make chip meanings clearer at a glance, especially for status indicators or commonly recognized categories.`, }, { - title: 'Content guidelines', + title: 'Limitations', type: 'Generic' as const, - anchorLink: 'content-guidelines', - sectionContent: `Chip labels should: -- Be short and concise to avoid truncation -- Use \`accessibilityLabel\` to describe purpose for screen readers -- Common status labels: \`Active\`, \`Draft\`, \`Published\`, \`Verified\` -- Common category labels: \`Product type\`, \`Collection\`, \`Tag name\``, + anchorLink: 'limitations', + sectionContent: `- Chip text is single-line only and truncates with an ellipsis when space is limited. There's no built-in way to show the full text on hover or through tooltips. +- Only predefined style variants are available. Custom colors, borders, or backgrounds can't be applied to chips. +- Icons in chips must come from the standard icon library. Custom icons, images, or other graphics aren't supported.`, }, ], definitions: [ { title: 'Properties', - description: '', + description: 'Configure the following properties on the chip component.', type: 'Chip', }, { title: 'Slots', - description: '', + description: + 'The chip component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).', type: 'ChipSlots', }, ], From 9c2fddea199492700c3bd32fa8764455f8230498 Mon Sep 17 00:00:00 2001 From: Tim Trevor Date: Tue, 24 Feb 2026 16:15:37 -0800 Subject: [PATCH 20/21] Fix syntax for code examples so preview and code render properly --- .../components/ButtonGroup/ButtonGroup.doc.ts | 132 +++++------ .../components/Clickable/Clickable.doc.ts | 156 +++++++------ .../ClickableChip/ClickableChip.doc.ts | 131 ++++++----- .../admin/components/Link/Link.doc.ts | 206 ++++++++++-------- .../admin/components/Menu/Menu.doc.ts | 160 +++++++------- 5 files changed, 420 insertions(+), 365 deletions(-) diff --git a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts index e89c3bac4f..9ac04cbecd 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts @@ -32,74 +32,84 @@ const data: AdminReferenceEntityTemplateSchema = { type: 'ButtonGroupSlots', }, ], + defaultExample: { + image: 'buttongroup-default.png', + description: + 'Group related buttons together with a primary action and secondary options. This example shows a button group with a save button and a cancel button using the slot layout.', + codeblock: { + title: 'Group a primary and secondary action', + tabs: [ + { + code: './examples/default.html', + language: 'preview', + title: '', + }, + ], + }, + }, examples: { description: 'Component examples', - examples: [ + exampleGroups: [ { - description: - 'Group related buttons together with a primary action and secondary options. This example shows a button group with a save button and a cancel button using the slot layout.', - codeblock: { - title: 'Group a primary and secondary action', - tabs: [ - { - code: './examples/default.html', - language: 'html', - layout: 'inline', + title: '', + examples: [ + { + description: + 'Present multiple secondary actions for operating on selected items. This example shows archive, export, and delete buttons grouped together for bulk operations.', + codeblock: { + title: 'Add bulk action buttons', + tabs: [ + { + code: './examples/bulk-actions-in-data-tables.html', + language: 'preview', + title: '', + }, + ], }, - ], - }, - }, - { - description: - 'Present multiple secondary actions for operating on selected items. This example shows archive, export, and delete buttons grouped together for bulk operations.', - codeblock: { - title: 'Add bulk action buttons', - tabs: [ - { - code: './examples/bulk-actions-in-data-tables.html', - language: 'html', + }, + { + description: + 'Add icons to grouped buttons to help merchants quickly identify each action. This example shows duplicate, archive, and delete buttons with icons.', + codeblock: { + title: 'Add icons to grouped buttons', + tabs: [ + { + code: './examples/toolbar-buttons-with-icons.html', + language: 'preview', + title: '', + }, + ], }, - ], - }, - }, - { - description: - 'Add icons to grouped buttons to help merchants quickly identify each action. This example shows duplicate, archive, and delete buttons with icons.', - codeblock: { - title: 'Add icons to grouped buttons', - tabs: [ - { - code: './examples/toolbar-buttons-with-icons.html', - language: 'html', + }, + { + description: + 'Remove the gap between buttons to create a segmented control for toggling between views or options. This example shows day, week, and month buttons joined together with no spacing.', + codeblock: { + title: 'Create a segmented button group', + tabs: [ + { + code: './examples/segmented-appearance.html', + language: 'preview', + title: '', + }, + ], }, - ], - }, - }, - { - description: - 'Remove the gap between buttons to create a segmented control for toggling between views or options. This example shows day, week, and month buttons joined together with no spacing.', - codeblock: { - title: 'Create a segmented button group', - tabs: [ - { - code: './examples/segmented-appearance.html', - language: 'html', - }, - ], - }, - }, - { - description: - 'Pair a cancel button with a critical action for destructive confirmation flows. This example shows a cancel and delete button grouped together for a confirmation dialog.', - codeblock: { - title: 'Confirm a destructive action', - tabs: [ - { - code: './examples/destructive-actions-pattern.html', - language: 'html', + }, + { + description: + 'Pair a cancel button with a critical action for destructive confirmation flows. This example shows a cancel and delete button grouped together for a confirmation dialog.', + codeblock: { + title: 'Confirm a destructive action', + tabs: [ + { + code: './examples/destructive-actions-pattern.html', + language: 'preview', + title: '', + }, + ], }, - ], - }, + }, + ], }, ], }, diff --git a/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts index 4dcccac63c..1fccfac890 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts @@ -36,86 +36,98 @@ const data: AdminReferenceEntityTemplateSchema = { type: 'ClickableSlots', }, ], + defaultExample: { + image: 'clickable-default.png', + description: + "Build custom interactive elements with flexible styling that [button](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/actions/button) or [link](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/actions/link) don't support. This example shows two clickable elements with different background and border styles.", + codeblock: { + title: 'Create a custom interactive element', + tabs: [ + { + code: './examples/default.html', + language: 'preview', + title: '', + }, + ], + }, + }, examples: { description: 'Component examples', - examples: [ - { - description: - "Build custom interactive elements with flexible styling that [button](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/actions/button) or [link](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/actions/link) don't support. This example shows two clickable elements with different background and border styles.", - codeblock: { - title: 'Create a custom interactive element', - tabs: [ - { - code: './examples/default.html', - language: 'html', - }, - ], - }, - }, + exampleGroups: [ { - description: - 'Set the `href` property to make a clickable element navigate like a link. This example shows a clickable component that opens a URL in a new browser tab.', - codeblock: { - title: 'Navigate to a URL', - tabs: [ - { - code: './examples/link-mode.html', - language: 'html', + title: '', + examples: [ + { + description: + 'Set the `href` property to make a clickable element navigate like a link. This example shows a clickable component that opens a URL in a new browser tab.', + codeblock: { + title: 'Navigate to a URL', + tabs: [ + { + code: './examples/link-mode.html', + language: 'preview', + title: '', + }, + ], }, - ], - }, - }, - { - description: - 'Use a clickable component as a form submit button with a disabled state to prevent premature submission. This example shows a disabled submit-type clickable component with a border and padding.', - codeblock: { - title: 'Create a form submit button', - tabs: [ - { - code: './examples/form-submit-button.html', - language: 'html', + }, + { + description: + 'Use a clickable component as a form submit button with a disabled state to prevent premature submission. This example shows a disabled submit-type clickable component with a border and padding.', + codeblock: { + title: 'Create a form submit button', + tabs: [ + { + code: './examples/form-submit-button.html', + language: 'preview', + title: '', + }, + ], }, - ], - }, - }, - { - description: - 'Embed a clickable component within a content section to provide an interactive action alongside text. This example shows a styled clickable button inside a box with a heading and description.', - codeblock: { - title: 'Add a clickable action to a section', - tabs: [ - { - code: './examples/section-with-clickable-action.html', - language: 'html', + }, + { + description: + 'Embed a clickable component within a content section to provide an interactive action alongside text. This example shows a styled clickable button inside a box with a heading and description.', + codeblock: { + title: 'Add a clickable action to a section', + tabs: [ + { + code: './examples/section-with-clickable-action.html', + language: 'preview', + title: '', + }, + ], }, - ], - }, - }, - { - description: - 'Add an accessibility label to provide screen readers with more context than the visible text alone. This example shows a clickable delete button with a descriptive label for assistive technologies.', - codeblock: { - title: 'Add an accessibility label', - tabs: [ - { - code: './examples/accessibility-with-aria-attributes.html', - language: 'html', + }, + { + description: + 'Add an accessibility label to provide screen readers with more context than the visible text alone. This example shows a clickable delete button with a descriptive label for assistive technologies.', + codeblock: { + title: 'Add an accessibility label', + tabs: [ + { + code: './examples/accessibility-with-aria-attributes.html', + language: 'preview', + title: '', + }, + ], }, - ], - }, - }, - { - description: - 'Disable a clickable link while providing an accessibility label that explains why the feature is unavailable. This example shows a disabled navigation element with a descriptive label for screen readers.', - codeblock: { - title: 'Describe a disabled link with an accessibility label', - tabs: [ - { - code: './examples/disabled-link-with-aria.html', - language: 'html', + }, + { + description: + 'Disable a clickable link while providing an accessibility label that explains why the feature is unavailable. This example shows a disabled navigation element with a descriptive label for screen readers.', + codeblock: { + title: 'Describe a disabled link with an accessibility label', + tabs: [ + { + code: './examples/disabled-link-with-aria.html', + language: 'preview', + title: '', + }, + ], }, - ], - }, + }, + ], }, ], }, diff --git a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts index e1986fc49c..5d6b8776ae 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts @@ -37,73 +37,84 @@ const data: AdminReferenceEntityTemplateSchema = { type: 'ClickableChipSlots', }, ], + defaultExample: { + image: 'clickablechip-default.png', + description: + 'Create an interactive chip that merchants can click to trigger an action. This example shows a clickable chip component with default styling.', + codeblock: { + title: 'Add a clickable chip with default styling', + tabs: [ + { + code: './examples/default.html', + language: 'preview', + title: '', + }, + ], + }, + }, examples: { description: 'Component examples', - examples: [ + exampleGroups: [ { - description: - 'Create an interactive chip that merchants can click to trigger an action. This example shows a clickable chip component with default styling.', - codeblock: { - title: 'Add a clickable chip with default styling', - tabs: [ - { - code: './examples/default.html', - language: 'html', + title: '', + examples: [ + { + description: + 'Use the `color` property to visually distinguish chips by importance or category. This example shows three chips with base, subdued, and strong color variants.', + codeblock: { + title: 'Apply color variants to chips', + tabs: [ + { + code: './examples/basic-usage.html', + language: 'preview', + title: '', + }, + ], }, - ], - }, - }, - { - description: - 'Use the `color` property to visually distinguish chips by importance or category. This example shows three chips with base, subdued, and strong color variants.', - codeblock: { - title: 'Apply color variants to chips', - tabs: [ - { - code: './examples/basic-usage.html', - language: 'html', + }, + { + description: + 'Add an icon and a remove button so merchants can see status at a glance and dismiss the chip. This example shows a removable chip with a check circle icon in the graphic slot.', + codeblock: { + title: 'Add an icon and a remove button to a chip', + tabs: [ + { + code: './examples/with-icon-and-remove-button.html', + language: 'preview', + title: '', + }, + ], }, - ], - }, - }, - { - description: - 'Add an icon and a remove button so merchants can see status at a glance and dismiss the chip. This example shows a removable chip with a check circle icon in the graphic slot.', - codeblock: { - title: 'Add an icon and a remove button to a chip', - tabs: [ - { - code: './examples/with-icon-and-remove-button.html', - language: 'html', + }, + { + description: + 'Set the `href` property to make a chip link to another page when clicked. This example shows a subdued chip with a product icon that acts as a link.', + codeblock: { + title: 'Use a chip as a link', + tabs: [ + { + code: './examples/as-a-link.html', + language: 'preview', + title: '', + }, + ], }, - ], - }, - }, - { - description: - 'Set the `href` property to make a chip link to another page when clicked. This example shows a subdued chip with a product icon that acts as a link.', - codeblock: { - title: 'Use a chip as a link', - tabs: [ - { - code: './examples/as-a-link.html', - language: 'html', - }, - ], - }, - }, - { - description: - 'Disable a chip to prevent interaction while keeping it visible. This example shows a disabled chip with an accessibility label explaining the inactive state.', - codeblock: { - title: 'Disable a clickable chip', - tabs: [ - { - code: './examples/disabled-state.html', - language: 'html', + }, + { + description: + 'Disable a chip to prevent interaction while keeping it visible. This example shows a disabled chip with an accessibility label explaining the inactive state.', + codeblock: { + title: 'Disable a clickable chip', + tabs: [ + { + code: './examples/disabled-state.html', + language: 'preview', + title: '', + }, + ], }, - ], - }, + }, + ], }, ], }, 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 ee166d7f16..6c493d527e 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 @@ -41,112 +41,126 @@ const data: AdminReferenceEntityTemplateSchema = { type: 'LinkSlots', }, ], + defaultExample: { + image: 'link-default.png', + description: + 'Add an inline link to let merchants navigate to another page. This example shows a basic text link with an `href` property.', + codeblock: { + title: 'Add a basic link', + tabs: [ + { + code: './examples/default.html', + language: 'preview', + title: '', + }, + ], + }, + }, examples: { description: 'Component examples', - examples: [ + exampleGroups: [ { - description: - 'Add an inline link to let merchants navigate to another page. This example shows a basic text link with an `href` property.', - codeblock: { - title: 'Add a basic link', - tabs: [ - { - code: './examples/default.html', - language: 'html', + title: '', + examples: [ + { + description: + 'Embed links within paragraph text so merchants can navigate to related content inline. This example shows two links inside a paragraph that inherit the surrounding text tone.', + codeblock: { + title: 'Embed links in paragraph text', + tabs: [ + { + code: './examples/basic-links-in-paragraph.html', + language: 'preview', + title: '', + }, + ], }, - ], - }, - }, - { - description: - 'Embed links within paragraph text so merchants can navigate to related content inline. This example shows two links inside a paragraph that inherit the surrounding text tone.', - codeblock: { - title: 'Embed links in paragraph text', - tabs: [ - { - code: './examples/basic-links-in-paragraph.html', - language: 'html', + }, + { + description: + 'Place links inside banners to provide direct actions alongside important notifications. This example shows a link inside an info banner prompting merchants to create a campaign.', + codeblock: { + title: 'Add links inside a banner', + tabs: [ + { + code: './examples/links-in-banner.html', + language: 'preview', + title: '', + }, + ], }, - ], - }, - }, - { - description: - 'Place links inside banners to provide direct actions alongside important notifications. This example shows a link inside an info banner prompting merchants to create a campaign.', - codeblock: { - title: 'Add links inside a banner', - tabs: [ - { - code: './examples/links-in-banner.html', - language: 'html', - }, - ], - }, - }, - { - description: - 'Place links inside a box container to provide navigation within a visually distinct content area. This example shows two links inside a bordered box with background and padding.', - codeblock: { - title: 'Add links inside a box container', - tabs: [ - { - code: './examples/links-in-box-container.html', - language: 'html', + }, + { + description: + 'Place links inside a box container to provide navigation within a visually distinct content area. This example shows two links inside a bordered box with background and padding.', + codeblock: { + title: 'Add links inside a box container', + tabs: [ + { + code: './examples/links-in-box-container.html', + language: 'preview', + title: '', + }, + ], }, - ], - }, - }, - { - description: - 'Use the `download` property to trigger a file download when the link is clicked. This example shows a link that downloads a CSV file for customer data export.', - codeblock: { - title: 'Trigger a file download', - tabs: [ - { - code: './examples/download-links.html', - language: 'html', + }, + { + description: + 'Use the `download` property to trigger a file download when the link is clicked. This example shows a link that downloads a CSV file for customer data export.', + codeblock: { + title: 'Trigger a file download', + tabs: [ + { + code: './examples/download-links.html', + language: 'preview', + title: '', + }, + ], }, - ], - }, - }, - { - description: - 'Open external URLs in a new tab so merchants stay on the current page. This example shows two links with `target="_blank"` pointing to external documentation.', - codeblock: { - title: 'Open external links in a new tab', - tabs: [ - { - code: './examples/external-links.html', - language: 'html', + }, + { + description: + 'Open external URLs in a new tab so merchants stay on the current page. This example shows two links with `target="_blank"` pointing to external documentation.', + codeblock: { + title: 'Open external links in a new tab', + tabs: [ + { + code: './examples/external-links.html', + language: 'preview', + title: '', + }, + ], }, - ], - }, - }, - { - description: - 'Set the `lang` property so screen readers pronounce the link text correctly. This example shows a French-language link with the `lang` attribute set.', - codeblock: { - title: 'Set the language for a link', - tabs: [ - { - code: './examples/links-with-language-attribute.html', - language: 'html', + }, + { + description: + 'Set the `lang` property so screen readers pronounce the link text correctly. This example shows a French-language link with the `lang` attribute set.', + codeblock: { + title: 'Set the language for a link', + tabs: [ + { + code: './examples/links-with-language-attribute.html', + language: 'preview', + title: '', + }, + ], }, - ], - }, - }, - { - description: - 'Configure links to inherit the tone of their parent paragraph to match the surrounding context. This example shows links inside paragraphs with six different tones.', - codeblock: { - title: 'Match link tone to surrounding context', - tabs: [ - { - code: './examples/links-with-different-tones.html', - language: 'html', + }, + { + description: + 'Configure links to inherit the tone of their parent paragraph to match the surrounding context. This example shows links inside paragraphs with six different tones.', + codeblock: { + title: 'Match link tone to surrounding context', + tabs: [ + { + code: './examples/links-with-different-tones.html', + language: 'preview', + title: '', + }, + ], }, - ], - }, + }, + ], }, ], }, diff --git a/packages/ui-extensions/src/surfaces/admin/components/Menu/Menu.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Menu/Menu.doc.ts index 0bf668a120..e0d6f11deb 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Menu/Menu.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Menu/Menu.doc.ts @@ -40,90 +40,98 @@ const data: AdminReferenceEntityTemplateSchema = { type: 'MenuSlots', }, ], + defaultExample: { + image: 'menu-default.png', + description: + 'Add a dropdown menu of actions triggered by a button. This example shows a menu with three icon buttons including a critical delete action.', + codeblock: { + title: 'Add a basic actions menu', + tabs: [ + { + code: './examples/default.html', + language: 'preview', + title: '', + }, + ], + }, + }, examples: { description: 'Component examples', - examples: [ - { - description: - 'Add a dropdown menu of actions triggered by a button. This example shows a menu with three icon buttons including a critical delete action.', - codeblock: { - title: 'Add a basic actions menu', - tabs: [ - { - code: './examples/default.html', - language: 'html', - layout: 'alignStart', - customStyles: { - minHeight: '300px', - }, - }, - ], - }, - }, + exampleGroups: [ { - description: - 'Organize menu items into labeled groups so merchants can quickly find related actions. This example shows two sections with headings separating product actions from export options.', - codeblock: { - title: 'Organize items into sections', - tabs: [ - { - code: './examples/menu-with-sections.html', - language: 'html', + title: '', + examples: [ + { + description: + 'Organize menu items into labeled groups so merchants can quickly find related actions. This example shows two sections with headings separating product actions from export options.', + codeblock: { + title: 'Organize items into sections', + tabs: [ + { + code: './examples/menu-with-sections.html', + language: 'preview', + title: '', + }, + ], }, - ], - }, - }, - { - description: - 'Mix link-based, standard, and disabled buttons in a single menu. This example shows a menu with a link that opens in a new tab, a disabled action, and a download link.', - codeblock: { - title: 'Add links and disabled items to a menu', - tabs: [ - { - code: './examples/menu-with-links-and-disabled-items.html', - language: 'html', + }, + { + description: + 'Mix link-based, standard, and disabled buttons in a single menu. This example shows a menu with a link that opens in a new tab, a disabled action, and a download link.', + codeblock: { + title: 'Add links and disabled items to a menu', + tabs: [ + { + code: './examples/menu-with-links-and-disabled-items.html', + language: 'preview', + title: '', + }, + ], }, - ], - }, - }, - { - description: - 'Combine sections with root-level items to separate grouped actions from standalone ones like a destructive action. This example shows two sections for customer management alongside a root-level delete button.', - codeblock: { - title: 'Mix sections with root-level actions', - tabs: [ - { - code: './examples/customer-actions-menu.html', - language: 'html', + }, + { + description: + 'Combine sections with root-level items to separate grouped actions from standalone ones like a destructive action. This example shows two sections for customer management alongside a root-level delete button.', + codeblock: { + title: 'Mix sections with root-level actions', + tabs: [ + { + code: './examples/customer-actions-menu.html', + language: 'preview', + title: '', + }, + ], }, - ], - }, - }, - { - description: - 'Build a settings-style menu with multiple sections and a standalone action at the bottom. This example shows account and store settings sections with a root-level sign-out link.', - codeblock: { - title: 'Build a settings menu with sections', - tabs: [ - { - code: './examples/settings-menu.html', - language: 'html', + }, + { + description: + 'Build a settings-style menu with multiple sections and a standalone action at the bottom. This example shows account and store settings sections with a root-level sign-out link.', + codeblock: { + title: 'Build a settings menu with sections', + tabs: [ + { + code: './examples/settings-menu.html', + language: 'preview', + title: '', + }, + ], }, - ], - }, - }, - { - description: - 'Use an icon-only button as the menu trigger for a compact "more actions" pattern. This example shows a three-dot icon button that opens a menu with common product actions.', - codeblock: { - title: 'Trigger a menu from an icon-only button', - tabs: [ - { - code: './examples/icon-only-trigger.html', - language: 'html', + }, + { + description: + 'Use an icon-only button as the menu trigger for a compact "more actions" pattern. This example shows a three-dot icon button that opens a menu with common product actions.', + codeblock: { + title: 'Trigger a menu from an icon-only button', + tabs: [ + { + code: './examples/icon-only-trigger.html', + language: 'preview', + title: '', + }, + ], }, - ], - }, + }, + ], }, ], }, From 44a141ee044e819ef49d78c6257af10c779455c9 Mon Sep 17 00:00:00 2001 From: Tim Trevor Date: Tue, 24 Feb 2026 17:08:03 -0800 Subject: [PATCH 21/21] Incorporate review feedback from @SteveSill --- .../surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts | 4 ++-- .../src/surfaces/admin/components/Clickable/Clickable.doc.ts | 2 +- .../admin/components/ClickableChip/ClickableChip.doc.ts | 4 ++-- .../src/surfaces/admin/components/Link/Link.doc.ts | 4 ++-- .../src/surfaces/admin/components/Link/examples/default.html | 2 +- .../src/surfaces/admin/components/Menu/Menu.doc.ts | 2 +- 6 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts index 9ac04cbecd..22526fbf6c 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts @@ -35,7 +35,7 @@ const data: AdminReferenceEntityTemplateSchema = { defaultExample: { image: 'buttongroup-default.png', description: - 'Group related buttons together with a primary action and secondary options. This example shows a button group with a save button and a cancel button using the slot layout.', + 'Group related buttons together with a primary action and secondary options. This example shows a button group with a save button and a cancel button.', codeblock: { title: 'Group a primary and secondary action', tabs: [ @@ -69,7 +69,7 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Add icons to grouped buttons to help merchants quickly identify each action. This example shows duplicate, archive, and delete buttons with icons.', + 'Add icons to grouped buttons to help merchants identify each action. This example shows duplicate, archive, and delete buttons with icons.', codeblock: { title: 'Add icons to grouped buttons', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts index 1fccfac890..76b48539dd 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts @@ -87,7 +87,7 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Embed a clickable component within a content section to provide an interactive action alongside text. This example shows a styled clickable button inside a box with a heading and description.', + 'Add a clickable button alongside descriptive content in a section. This example shows a styled clickable button inside a box with a heading and description.', codeblock: { title: 'Add a clickable action to a section', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts index 5d6b8776ae..a07de1639f 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts @@ -60,7 +60,7 @@ const data: AdminReferenceEntityTemplateSchema = { examples: [ { description: - 'Use the `color` property to visually distinguish chips by importance or category. This example shows three chips with base, subdued, and strong color variants.', + 'Use the `color` property to visually distinguish chips by importance or category. This example shows three chips with `base`, `subdued`, and `strong` color variants.', codeblock: { title: 'Apply color variants to chips', tabs: [ @@ -74,7 +74,7 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Add an icon and a remove button so merchants can see status at a glance and dismiss the chip. This example shows a removable chip with a check circle icon in the graphic slot.', + 'Add an icon and a remove button so merchants can see the status and dismiss the chip. This example shows a removable chip with a check circle icon in the graphic slot.', codeblock: { title: 'Add an icon and a remove button to a chip', 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 6c493d527e..8a63a89532 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 @@ -64,7 +64,7 @@ const data: AdminReferenceEntityTemplateSchema = { examples: [ { description: - 'Embed links within paragraph text so merchants can navigate to related content inline. This example shows two links inside a paragraph that inherit the surrounding text tone.', + 'Embed links within a [Paragraph](/docs/api/app-home/polaris-web-components/typography-and-content/paragraph) so merchants can navigate to related content inline. This example shows two links inside a paragraph that inherit the surrounding text tone.', codeblock: { title: 'Embed links in paragraph text', tabs: [ @@ -148,7 +148,7 @@ const data: AdminReferenceEntityTemplateSchema = { }, { description: - 'Configure links to inherit the tone of their parent paragraph to match the surrounding context. This example shows links inside paragraphs with six different tones.', + 'Configure links that inherit the tone of their parent paragraph and match the surrounding context. This example shows links inside paragraphs with six different tones.', codeblock: { title: 'Match link tone to surrounding context', tabs: [ diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/default.html b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/default.html index fbb5b57b54..4ae2685161 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/default.html +++ b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/default.html @@ -1 +1 @@ -fufilling orders +fulfilling orders \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/admin/components/Menu/Menu.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Menu/Menu.doc.ts index e0d6f11deb..a4f512830d 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Menu/Menu.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Menu/Menu.doc.ts @@ -63,7 +63,7 @@ const data: AdminReferenceEntityTemplateSchema = { examples: [ { description: - 'Organize menu items into labeled groups so merchants can quickly find related actions. This example shows two sections with headings separating product actions from export options.', + 'Organize menu items into labeled groups so merchants can find related actions. This example shows two sections with headings separating product actions from export options.', codeblock: { title: 'Organize items into sections', tabs: [