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..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 @@ -33,19 +33,16 @@ const data: AdminReferenceEntityTemplateSchema = { }, ], defaultExample: { - image: 'button-default.png', + 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.', codeblock: { - title: 'Code', + title: 'Group a primary and secondary action', tabs: [ { code: './examples/default.html', - language: 'html', - layout: 'inline', - }, - { - code: './examples/default.jsx', - language: 'preview-jsx', - layout: 'inline', + language: 'preview', + title: '', }, ], }, @@ -54,111 +51,60 @@ const data: AdminReferenceEntityTemplateSchema = { description: 'Component examples', exampleGroups: [ { - title: 'Basic usage', + title: '', examples: [ { description: - 'Standard button group with cancel and primary action for form workflows.', + 'Present multiple secondary actions for operating on selected items. This example shows archive, export, and delete buttons grouped together for bulk operations.', 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.', - codeblock: { - title: 'Bulk action buttons', + title: 'Add 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', + language: 'preview', + title: '', }, ], }, }, { description: - 'Typical form completion actions with clear visual hierarchy.', + 'Add icons to grouped buttons to help merchants identify each action. This example shows duplicate, archive, and delete buttons with icons.', 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', + title: 'Add icons to grouped buttons', tabs: [ { code: './examples/toolbar-buttons-with-icons.html', - language: 'html', - }, - - { - code: './examples/toolbar-buttons-with-icons.jsx', - language: 'preview-jsx', + language: 'preview', + title: '', }, ], }, }, { 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', - language: 'html', - }, - - { - code: './examples/segmented-appearance.jsx', - language: 'preview-jsx', + language: 'preview', + title: '', }, ], }, }, { 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', - language: 'html', - }, - - { - code: './examples/destructive-actions-pattern.jsx', - language: 'preview-jsx', + language: 'preview', + title: '', }, ], }, 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/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/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 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/Clickable/Clickable.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts index d2134ad7c7..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 @@ -38,16 +38,15 @@ const data: AdminReferenceEntityTemplateSchema = { ], 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: 'Code', + title: 'Create a custom interactive element', tabs: [ { code: './examples/default.html', - language: 'html', - }, - { - code: './examples/default.jsx', - language: 'preview-jsx', + language: 'preview', + title: '', }, ], }, @@ -56,112 +55,74 @@ const data: AdminReferenceEntityTemplateSchema = { description: 'Component examples', exampleGroups: [ { - title: 'Basic usage', + title: '', examples: [ { description: - 'A simple clickable button with a base border and padding, demonstrating the default button behavior of the clickable component.', + '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: '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.", - codeblock: { - title: 'Link Mode', + title: 'Navigate to a URL', tabs: [ { code: './examples/link-mode.html', - language: 'html', - }, - - { - code: './examples/link-mode.jsx', - language: 'preview-jsx', + language: 'preview', + title: '', }, ], }, }, { 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 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: 'Form Submit Button', + title: 'Create a form submit button', tabs: [ { code: './examples/form-submit-button.html', - language: 'html', - }, - - { - code: './examples/form-submit-button.jsx', - language: 'preview-jsx', + language: 'preview', + title: '', }, ], }, }, { description: - 'Illustrates how the clickable component can be integrated into a section layout to provide an interactive action button.', + '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: 'Section with Clickable Action', + title: 'Add a clickable action to a section', tabs: [ { code: './examples/section-with-clickable-action.html', - language: 'html', - }, - - { - code: './examples/section-with-clickable-action.jsx', - language: 'preview-jsx', + language: 'preview', + title: '', }, ], }, }, { 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', - language: 'html', - }, - - { - code: './examples/accessibility-with-aria-attributes.jsx', - language: 'preview-jsx', + language: 'preview', + title: '', }, ], }, }, { 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', - language: 'html', - }, - - { - code: './examples/disabled-link-with-aria.jsx', - language: 'preview-jsx', + language: 'preview', + title: '', }, ], }, 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/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 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 7b30daf53b..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 @@ -38,17 +38,16 @@ const data: AdminReferenceEntityTemplateSchema = { }, ], defaultExample: { - image: 'clickable-chip-default.png', + 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: 'Code', + title: 'Add a clickable chip with default styling', tabs: [ { code: './examples/default.html', - language: 'html', - }, - { - code: './examples/default.jsx', - language: 'preview-jsx', + language: 'preview', + title: '', }, ], }, @@ -57,94 +56,60 @@ const data: AdminReferenceEntityTemplateSchema = { description: 'Component examples', exampleGroups: [ { - title: 'Basic usage', + title: '', examples: [ { 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', - language: 'html', - }, - - { - code: './examples/basic-usage.jsx', - language: 'preview-jsx', + language: 'preview', + title: '', }, ], }, }, { 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 the status 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', - language: 'html', - }, - - { - code: './examples/with-icon-and-remove-button.jsx', - language: 'preview-jsx', + language: 'preview', + title: '', }, ], }, }, { description: - 'Demonstrates a subdued clickable chip configured as a link with a product icon.', + '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: 'As a Link', + title: 'Use a chip as a link', tabs: [ { code: './examples/as-a-link.html', - language: 'html', - }, - - { - code: './examples/as-a-link.jsx', - language: 'preview-jsx', + language: 'preview', + title: '', }, ], }, }, { 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', - 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', + language: 'preview', + title: '', }, ], }, 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/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 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 4002f59a8c..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 @@ -43,16 +43,15 @@ const data: AdminReferenceEntityTemplateSchema = { ], 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: 'Code', + title: 'Add a basic link', tabs: [ { code: './examples/default.html', - language: 'html', - }, - { - code: './examples/default.jsx', - language: 'preview-jsx', + language: 'preview', + title: '', }, ], }, @@ -61,202 +60,102 @@ const data: AdminReferenceEntityTemplateSchema = { description: 'Component examples', exampleGroups: [ { - title: 'Basic usage', + title: '', examples: [ { description: - 'Links automatically inherit the tone from their surrounding paragraph context.', + '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: 'Basic Links in Paragraph', + title: 'Embed links in paragraph text', tabs: [ { code: './examples/basic-links-in-paragraph.html', - language: 'html', - }, - - { - code: './examples/basic-links-in-paragraph.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', - }, - - { - 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', + language: 'preview', + title: '', }, ], }, }, { description: - 'Shows how links automatically adapt their tone to the surrounding text context, maintaining visual consistency while providing navigation.', + '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 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.', - codeblock: { - title: 'Links in Banner', + title: 'Add links inside a banner', tabs: [ { code: './examples/links-in-banner.html', - language: 'html', - }, - - { - code: './examples/links-in-banner.jsx', - language: 'preview-jsx', + language: 'preview', + title: '', }, ], }, }, { 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', - language: 'html', - }, - - { - code: './examples/links-in-box-container.jsx', - language: 'preview-jsx', + language: 'preview', + title: '', }, ], }, }, { description: - 'Shows how links can be used within warning banners to provide immediate actions related to critical notifications.', + '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: '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', + title: 'Trigger a file download', tabs: [ { code: './examples/download-links.html', - language: 'html', - }, - - { - code: './examples/download-links.jsx', - language: 'preview-jsx', + language: 'preview', + title: '', }, ], }, }, { 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', - language: 'html', - }, - - { - code: './examples/external-links.jsx', - language: 'preview-jsx', + language: 'preview', + title: '', }, ], }, }, { 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` property 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', - language: 'html', - }, - - { - code: './examples/links-with-language-attribute.jsx', - language: 'preview-jsx', + language: 'preview', + title: '', }, ], }, }, { description: - 'Demonstrates how links can have different visual tones, including default, neutral, and critical, allowing for varied contextual styling.', + '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: 'Links with Different Tones', + title: 'Match link tone to surrounding context', tabs: [ { code: './examples/links-with-different-tones.html', - language: 'html', - }, - - { - code: './examples/links-with-different-tones.jsx', - language: 'preview-jsx', + language: 'preview', + title: '', }, ], }, 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/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/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/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-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-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-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 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 ff2fbe4b19..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 @@ -41,25 +41,16 @@ const data: AdminReferenceEntityTemplateSchema = { }, ], 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: 'Code', + title: 'Add a basic actions menu', tabs: [ { code: './examples/default.html', - language: 'html', - layout: 'alignStart', - customStyles: { - minHeight: '300px', - }, - }, - - { - code: './examples/default.jsx', - language: 'preview-jsx', - layout: 'alignStart', - customStyles: { - minHeight: '300px', - }, + language: 'preview', + title: '', }, ], }, @@ -68,136 +59,74 @@ const data: AdminReferenceEntityTemplateSchema = { description: 'Component examples', exampleGroups: [ { - title: 'Basic usage', + title: '', 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', - }, - }, - ], - }, - }, - { - 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.', + '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: 'Menu with Icons', + title: 'Organize items into sections', 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/menu-with-sections.html', + language: 'preview', + title: '', }, ], }, }, { description: - 'Shows how to organize menu items into logical sections with headings, helping to group related actions and improve menu readability.', + '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 Sections', + title: 'Add links and disabled items to a menu', tabs: [ { - code: './examples/menu-with-sections.html', - language: 'html', - }, - - { - code: './examples/menu-with-sections.jsx', - language: 'preview-jsx', - layout: 'alignStart', - customStyles: { - minHeight: '400px', - }, + code: './examples/menu-with-links-and-disabled-items.html', + language: 'preview', + title: '', }, ], }, }, { 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.", + '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: 'Menu with Links and Disabled Items', + title: 'Mix sections with root-level actions', 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/customer-actions-menu.html', + language: 'preview', + title: '', }, ], }, }, { 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.", + '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: 'Actions menu with sections', + title: 'Build a settings 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', - }, + code: './examples/settings-menu.html', + language: 'preview', + title: '', }, ], }, }, { description: - 'Illustrates a complex menu with nested sections, demonstrating how to organize multiple related actions with icons.', + '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: 'Menu with nested sections', + title: 'Trigger a menu from an icon-only button', tabs: [ { - code: './examples/settings-menu.html', - language: 'html', - }, - - { - code: './examples/settings-menu.jsx', - language: 'preview-jsx', - layout: 'alignStart', - customStyles: { - minHeight: '350px', - }, + code: './examples/icon-only-trigger.html', + language: 'preview', + title: '', }, ], }, 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/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/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/menu-with-icons.jsx deleted file mode 100644 index 57c897c4cd..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Menu/examples/menu-with-icons.jsx +++ /dev/null @@ -1,14 +0,0 @@ -<> - - More actions - - - - Edit product - Duplicate product - Archive product - - Delete product - - - \ No newline at end of file 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