From b0042c24e06beaa644f27caaf54f7eb03ed03d6c Mon Sep 17 00:00:00 2001 From: Michelle Vinci Date: Mon, 9 Mar 2026 22:37:53 -0700 Subject: [PATCH 1/2] Generate shared component docs for customer account UI extensions Previously, customer account UI extensions only generated docs for 7 surface-specific components (Avatar, ButtonGroup, CustomerAccountAction, ImageGroup, Menu, Page, Section) and linked to checkout for the rest. This adds .doc.ts files for all ~55 shared checkout components so they are generated directly in the customer account reference. Updates the build script to resolve checkout component types, copies examples from checkout, updates the category page, and aligns subcategories across shared content to match the new sidebar IA. Made-with: Cursor Linting sentence case names Name updates and generated docs script optimizations Remove unnecessary file Render visual for clipboard item component Remove category doc Sidebar configuration for 2026-04-rc Fix syntax Generate docs --- .../surfaces/customer-account/build-docs.mjs | 197 ++++++++++++++---- .../categories/components.doc.ts | 24 --- .../2026-04-rc/generated_category_pages.json | 21 -- .../docs/shared/components/ClipboardItem.ts | 2 +- .../src/docs/shared/components/Details.ts | 2 +- .../src/docs/shared/components/GridItem.ts | 2 +- .../src/docs/shared/components/ListItem.ts | 2 +- .../src/docs/shared/components/Map.ts | 2 +- .../src/docs/shared/components/MapMarker.ts | 4 +- .../src/docs/shared/components/OptionGroup.ts | 2 +- .../src/docs/shared/components/OrderedList.ts | 2 +- .../src/docs/shared/components/QRCode.ts | 4 +- .../shared/components/SkeletonParagraph.ts | 2 +- .../src/docs/shared/components/Summary.ts | 2 +- .../src/docs/shared/components/Tooltip.ts | 2 +- .../docs/shared/components/UnorderedList.ts | 2 +- .../Abbreviation/Abbreviation.doc.ts | 11 + .../examples/basic-abbreviation.example.html | 1 + .../Announcement/Announcement.doc.ts | 14 ++ .../examples/basic-announcement.example.html | 16 ++ .../components/Badge/Badge.doc.ts | 11 + .../Badge/examples/basic-badge.example.html | 3 + .../components/Banner/Banner.doc.ts | 18 ++ .../Banner/examples/basic-banner.example.html | 1 + .../components/Box/Box.doc.ts | 16 ++ .../Box/examples/basic-box.example.html | 11 + .../components/Button/Button.doc.ts | 31 +++ .../Button/examples/basic-button.example.html | 2 + .../components/Checkbox/Checkbox.doc.ts | 11 + .../examples/basic-checkbox.example.html | 1 + .../components/Chip/Chip.doc.ts | 11 + .../Chip/examples/basic-chip.example.html | 1 + .../components/ChoiceList/ChoiceList.doc.ts | 16 ++ .../examples/basic-choice-list.example.html | 7 + .../block-choice-variant.example.html | 47 +++++ .../examples/grid-choice-variant.example.html | 5 + .../inline-choice-variant.example.html | 6 + .../examples/list-choice-variant.example.html | 5 + .../components/Clickable/Clickable.doc.ts | 11 + .../examples/basic-clickable.example.html | 3 + .../ClickableChip/ClickableChip.doc.ts | 11 + .../basic-clickable-chip.example.html | 1 + .../ClipboardItem/ClipboardItem.doc.ts | 12 ++ .../basic-clipboard-item.example.html | 2 + .../ConsentCheckbox/ConsentCheckbox.doc.ts | 13 ++ .../basic-consent-checkbox.example.html | 5 + .../ConsentPhoneField.doc.ts | 13 ++ .../basic-consent-phone-field.example.html | 5 + .../components/DateField/DateField.doc.ts | 11 + .../examples/basic-date-field.example.html | 1 + .../components/DatePicker/DatePicker.doc.ts | 11 + .../examples/basic-date-picker.example.html | 1 + .../components/Details/Details.doc.ts | 16 ++ .../examples/basic-details.example.html | 6 + .../components/Divider/Divider.doc.ts | 11 + .../examples/basic-divider.example.html | 1 + .../components/DropZone/DropZone.doc.ts | 14 ++ .../examples/basic-drop-zone.example.html | 1 + .../components/EmailField/EmailField.doc.ts | 11 + .../examples/basic-email-field.example.html | 1 + .../components/Form/Form.doc.ts | 13 ++ .../Form/examples/basic-form.example.html | 4 + .../components/Grid/Grid.doc.ts | 16 ++ .../Grid/examples/basic-grid.example.html | 11 + .../components/Heading/Heading.doc.ts | 20 ++ .../examples/basic-heading.example.html | 1 + .../components/Icon/Icon.doc.ts | 11 + .../Icon/examples/basic-icon.example.html | 4 + .../components/Image/Image.doc.ts | 14 ++ .../Image/examples/basic-image.example.html | 1 + .../components/Link/Link.doc.ts | 13 ++ .../Link/examples/basic-link.example.html | 1 + .../components/Map/Map.doc.ts | 16 ++ .../Map/examples/basic-map.example.html | 3 + .../examples/map-marker-graphic.example.html | 14 ++ .../examples/map-marker-popover.example.html | 14 ++ .../components/Menu/Menu.doc.ts | 2 +- .../components/Modal/Modal.doc.ts | 11 + .../Modal/examples/basic-modal.example.html | 20 ++ .../components/MoneyField/MoneyField.doc.ts | 11 + .../examples/basic-money-field.example.html | 1 + .../components/NumberField/NumberField.doc.ts | 11 + .../examples/basic-number-field.example.html | 8 + .../components/OrderedList/OrderedList.doc.ts | 21 ++ .../examples/basic-ordered-list.example.html | 5 + .../components/Paragraph/Paragraph.doc.ts | 12 ++ .../examples/basic-paragraph.example.html | 1 + .../PasswordField/PasswordField.doc.ts | 11 + .../basic-password-field.example.html | 1 + .../components/PaymentIcon/PaymentIcon.doc.ts | 11 + .../examples/basic-payment-icon.example.html | 7 + .../components/PhoneField/PhoneField.doc.ts | 11 + .../examples/basic-phone-field.example.html | 2 + .../components/Popover/Popover.doc.ts | 11 + .../examples/basic-popover.example.html | 7 + .../components/PressButton/PressButton.doc.ts | 11 + .../examples/basic-press-button.example.html | 1 + .../ProductThumbnail/ProductThumbnail.doc.ts | 11 + .../basic-product-thumbnail.example.html | 4 + .../components/Progress/Progress.doc.ts | 15 ++ .../examples/basic-progress.example.html | 1 + .../components/QRCode/QRCode.doc.ts | 17 ++ .../examples/basic-qr-code.example.html | 4 + .../QueryContainer/QueryContainer.doc.ts | 19 ++ .../basic-query-container.example.html | 8 + .../components/ScrollBox/ScrollBox.doc.ts | 11 + .../examples/basic-scroll-box.example.html | 5 + .../components/Select/Select.doc.ts | 16 ++ .../Select/examples/basic-select.example.html | 5 + .../components/Sheet/Sheet.doc.ts | 13 ++ .../Sheet/examples/basic-sheet.example.html | 5 + .../SkeletonParagraph.doc.ts | 11 + .../basic-skeleton-paragraph.example.html | 2 + .../components/Spinner/Spinner.doc.ts | 11 + .../examples/basic-spinner.example.html | 1 + .../components/Stack/Stack.doc.ts | 17 ++ .../Stack/examples/basic-stack.example.html | 22 ++ .../components/Switch/Switch.doc.ts | 11 + .../Switch/examples/basic-switch.example.html | 1 + .../components/Text/Text.doc.ts | 17 ++ .../Text/examples/basic-text.example.html | 3 + .../components/TextArea/TextArea.doc.ts | 11 + .../examples/basic-text-area.example.html | 5 + .../components/TextField/TextField.doc.ts | 14 ++ .../examples/basic-text-field.example.html | 4 + .../components/Time/Time.doc.ts | 16 ++ .../Time/examples/basic-time.example.html | 1 + .../components/Tooltip/Tooltip.doc.ts | 11 + .../examples/basic-tooltip.example.html | 9 + .../components/URLField/URLField.doc.ts | 11 + .../examples/basic-url-field.example.html | 1 + .../UnorderedList/UnorderedList.doc.ts | 21 ++ .../basic-unordered-list.example.html | 5 + 133 files changed, 1247 insertions(+), 102 deletions(-) delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/categories/components.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/generated/customer_account_ui_extensions/2026-04-rc/generated_category_pages.json create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Abbreviation/Abbreviation.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Abbreviation/examples/basic-abbreviation.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Announcement/Announcement.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Announcement/examples/basic-announcement.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Badge/Badge.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Badge/examples/basic-badge.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Banner/Banner.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Banner/examples/basic-banner.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Box/Box.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Box/examples/basic-box.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Button/Button.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Button/examples/basic-button.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Checkbox/Checkbox.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Checkbox/examples/basic-checkbox.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Chip/Chip.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Chip/examples/basic-chip.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/ChoiceList/ChoiceList.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/ChoiceList/examples/basic-choice-list.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/ChoiceList/examples/block-choice-variant.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/ChoiceList/examples/grid-choice-variant.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/ChoiceList/examples/inline-choice-variant.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/ChoiceList/examples/list-choice-variant.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Clickable/Clickable.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Clickable/examples/basic-clickable.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/ClickableChip/ClickableChip.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/ClickableChip/examples/basic-clickable-chip.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/ClipboardItem/ClipboardItem.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/ClipboardItem/examples/basic-clipboard-item.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/ConsentCheckbox/ConsentCheckbox.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/ConsentCheckbox/examples/basic-consent-checkbox.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/ConsentPhoneField/ConsentPhoneField.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/ConsentPhoneField/examples/basic-consent-phone-field.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/DateField/DateField.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/DateField/examples/basic-date-field.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/DatePicker/DatePicker.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/DatePicker/examples/basic-date-picker.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Details/Details.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Details/examples/basic-details.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Divider/Divider.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Divider/examples/basic-divider.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/DropZone/DropZone.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/DropZone/examples/basic-drop-zone.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/EmailField/EmailField.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/EmailField/examples/basic-email-field.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Form/Form.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Form/examples/basic-form.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Grid/Grid.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Grid/examples/basic-grid.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Heading/Heading.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Heading/examples/basic-heading.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Icon/Icon.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Icon/examples/basic-icon.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Image/Image.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Image/examples/basic-image.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Link/Link.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Link/examples/basic-link.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Map/Map.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Map/examples/basic-map.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Map/examples/map-marker-graphic.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Map/examples/map-marker-popover.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Modal/Modal.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Modal/examples/basic-modal.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/MoneyField/MoneyField.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/MoneyField/examples/basic-money-field.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/NumberField/NumberField.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/NumberField/examples/basic-number-field.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/OrderedList/OrderedList.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/OrderedList/examples/basic-ordered-list.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Paragraph/Paragraph.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Paragraph/examples/basic-paragraph.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/PasswordField/PasswordField.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/PasswordField/examples/basic-password-field.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/PaymentIcon/PaymentIcon.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/PaymentIcon/examples/basic-payment-icon.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/PhoneField/PhoneField.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/PhoneField/examples/basic-phone-field.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Popover/Popover.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Popover/examples/basic-popover.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/PressButton/PressButton.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/PressButton/examples/basic-press-button.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/ProductThumbnail/ProductThumbnail.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/ProductThumbnail/examples/basic-product-thumbnail.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Progress/Progress.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Progress/examples/basic-progress.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/QRCode/QRCode.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/QRCode/examples/basic-qr-code.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/QueryContainer/QueryContainer.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/QueryContainer/examples/basic-query-container.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/ScrollBox/ScrollBox.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/ScrollBox/examples/basic-scroll-box.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Select/Select.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Select/examples/basic-select.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Sheet/Sheet.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Sheet/examples/basic-sheet.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/SkeletonParagraph/SkeletonParagraph.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/SkeletonParagraph/examples/basic-skeleton-paragraph.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Spinner/Spinner.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Spinner/examples/basic-spinner.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Stack/Stack.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Stack/examples/basic-stack.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Switch/Switch.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Switch/examples/basic-switch.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Text/Text.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Text/examples/basic-text.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/TextArea/TextArea.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/TextArea/examples/basic-text-area.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/TextField/TextField.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/TextField/examples/basic-text-field.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Time/Time.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Time/examples/basic-time.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Tooltip/Tooltip.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Tooltip/examples/basic-tooltip.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/URLField/URLField.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/URLField/examples/basic-url-field.example.html create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/UnorderedList/UnorderedList.doc.ts create mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/UnorderedList/examples/basic-unordered-list.example.html diff --git a/packages/ui-extensions/docs/surfaces/customer-account/build-docs.mjs b/packages/ui-extensions/docs/surfaces/customer-account/build-docs.mjs index 420a783788..f6be7d9259 100644 --- a/packages/ui-extensions/docs/surfaces/customer-account/build-docs.mjs +++ b/packages/ui-extensions/docs/surfaces/customer-account/build-docs.mjs @@ -1,16 +1,18 @@ /* eslint-disable no-undef, no-console */ -import childProcess from 'child_process'; +import {exec as execCb, execSync} from 'child_process'; import fs from 'fs/promises'; import {existsSync} from 'fs'; import path from 'path'; import {fileURLToPath} from 'url'; +import {promisify} from 'util'; import { - generateFiles, copyGeneratedToShopifyDev, replaceFileContent, } from '../build-doc-shared.mjs'; +const execAsync = promisify(execCb); + const EXTENSIONS_API_VERSION = process.argv[2] || 'unstable'; const __filename = fileURLToPath(import.meta.url); @@ -20,8 +22,12 @@ const rootPath = path.join(__dirname, '../../..'); const docsRelativePath = 'docs/surfaces/customer-account'; const docsGeneratedRelativePath = 'docs/surfaces/customer-account/generated'; const srcRelativePath = 'src/surfaces/customer-account'; +const checkoutSrcRelativePath = 'src/surfaces/checkout'; +const checkoutComponentsRelativePath = `${checkoutSrcRelativePath}/components`; const docsPath = path.join(rootPath, docsRelativePath); const srcPath = path.join(rootPath, srcRelativePath); +const checkoutSrcPath = path.join(rootPath, checkoutSrcRelativePath); +const checkoutComponentsDir = path.join(checkoutSrcPath, 'components'); const generatedDocsPath = path.join(docsPath, 'generated'); const shopifyDevPath = path.join(rootPath, '../../../shopify-dev'); const shopifyDevDBPath = path.join( @@ -37,11 +43,49 @@ const tempComponentDefs = path.join(srcPath, 'components.ts'); const tsconfig = 'tsconfig.docs.json'; -const transformJson = async (filePath) => { - let jsonData = JSON.parse((await fs.readFile(filePath, 'utf8')).toString()); +const maxBuffer = 50 * 1024 * 1024; + +const copyCheckoutTypesToTemp = async () => { + const files = await fs.readdir(checkoutComponentsDir); + return Promise.all( + files + .filter( + (file) => file.endsWith('.d.ts') && file !== 'components-shared.d.ts', + ) + .map(async (file) => { + const srcFile = path.join(checkoutComponentsDir, file); + const tempFile = path.join( + checkoutComponentsDir, + file.replace('.d.ts', '.ts'), + ); + await fs.copyFile(srcFile, tempFile); + return tempFile; + }), + ); +}; - jsonData = jsonData.filter(Boolean); - await fs.writeFile(filePath, JSON.stringify(jsonData, null, 2)); +const cleanupTempFiles = async (tempFiles) => { + await Promise.all( + tempFiles.filter((file) => existsSync(file)).map((file) => fs.rm(file)), + ); +}; + +const cleanupGeneratedJsFiles = async (directories) => { + await Promise.all( + directories.map(async (dir) => { + if (!existsSync(dir)) return; + const files = await fs.readdir(dir, {recursive: true}); + await Promise.all( + files + .filter((file) => file.endsWith('.js')) + .map((file) => { + const jsPath = path.join(dir, file); + const tsPath = path.join(dir, file.replace(/\.js$/, '.ts')); + return existsSync(tsPath) ? fs.rm(jsPath) : Promise.resolve(); + }), + ); + }), + ); }; const generateExtensionsDocs = async () => { @@ -56,23 +100,87 @@ const generateExtensionsDocs = async () => { } const outputDir = `${docsGeneratedRelativePath}/customer_account_ui_extensions/${EXTENSIONS_API_VERSION}`; + const tempRefOutputDir = `${outputDir}/_temp_ref`; + const tempCompOutputDir = `${outputDir}/_temp_comp`; + + await fs.mkdir(outputDir, {recursive: true}); + await fs.mkdir(tempRefOutputDir, {recursive: true}); + await fs.mkdir(tempCompOutputDir, {recursive: true}); + + // Single tsc step — tsconfig.docs.json already covers all .doc.ts files + // (reference, staticPages, categories, and component docs) + console.log('Compiling TypeScript...'); + execSync( + `yarn tsc --project ${docsRelativePath}/${tsconfig} --moduleResolution node --target esNext --module CommonJS`, + {stdio: 'pipe'}, + ); - const scripts = [ - `yarn tsc --project ${docsRelativePath}/${tsconfig} --moduleResolution node --target esNext --module CommonJS`, - `yarn generate-docs --overridePath ./${docsRelativePath}/typeOverride.json --input ./${docsRelativePath}/reference ./${srcRelativePath} --typesInput ./${srcRelativePath} --output ./${outputDir}`, - `yarn tsc ${docsRelativePath}/staticPages/*.doc.ts --moduleResolution node --target esNext --module CommonJS`, - `yarn generate-docs --isLandingPage --input ./${docsRelativePath}/staticPages --output ./${outputDir}`, - `yarn tsc ${docsRelativePath}/categories/*.doc.ts --moduleResolution node --target esNext --module CommonJS`, - `yarn generate-docs --isCategoryPage --input ./${docsRelativePath}/categories --output ./${outputDir}`, - ]; - - await generateFiles({ - scripts, - outputDir, - rootPath, - generatedDocsDataFile, - generatedStaticPagesFile, - transformJson, + // Split generate-docs into independent parallel commands. + // Internally, generate-docs creates a TypeScript program for every + // --typesInput directory × every --input directory. Splitting reference + // docs from component docs avoids redundant type parsing: + // - Reference docs (APIs/targets) only need customer-account types + // - Component docs only need checkout component types + // (customer-account types are included automatically as the base path) + console.log('Generating docs in parallel...'); + const overridePath = `./${docsRelativePath}/typeOverride.json`; + await Promise.all([ + execAsync( + `yarn generate-docs --overridePath ${overridePath} --input ./${docsRelativePath}/reference --typesInput ./${srcRelativePath} --output ./${tempRefOutputDir}`, + {maxBuffer}, + ), + execAsync( + `yarn generate-docs --overridePath ${overridePath} --input ./${srcRelativePath} --typesInput ./${checkoutComponentsRelativePath} --output ./${tempCompOutputDir}`, + {maxBuffer}, + ), + execAsync( + `yarn generate-docs --isLandingPage --input ./${docsRelativePath}/staticPages --output ./${outputDir}`, + {maxBuffer}, + ), + execAsync( + `yarn generate-docs --isCategoryPage --input ./${docsRelativePath}/categories --output ./${outputDir}`, + {maxBuffer}, + ), + ]); + + // Merge the two generated_docs_data.json files + const [refData, compData] = await Promise.all([ + fs + .readFile(path.join(tempRefOutputDir, generatedDocsDataFile), 'utf8') + .then(JSON.parse), + fs + .readFile(path.join(tempCompOutputDir, generatedDocsDataFile), 'utf8') + .then(JSON.parse), + ]); + const mergedData = [...refData, ...compData].filter(Boolean); + await fs.writeFile( + path.join(outputDir, generatedDocsDataFile), + JSON.stringify(mergedData, null, 2), + ); + + // Clean up temp directories + await Promise.all([ + fs.rm(tempRefOutputDir, {recursive: true}), + fs.rm(tempCompOutputDir, {recursive: true}), + ]); + + // Clean up .js files only in directories where tsc output lands + await cleanupGeneratedJsFiles([ + path.join(rootPath, docsRelativePath), + path.join(rootPath, srcRelativePath), + path.join(rootPath, 'src/docs/shared'), + ]); + + const generatedFiles = [path.join(outputDir, generatedDocsDataFile)]; + if (generatedStaticPagesFile) { + generatedFiles.push(path.join(outputDir, generatedStaticPagesFile)); + } + + // Make sure https://shopify.dev URLs are relative so they work in Spin + await replaceFileContent({ + filePaths: generatedFiles, + searchValue: 'https://shopify.dev', + replaceValue: '', }); // Replace 'unstable' with the exact API version in relative doc links @@ -91,15 +199,9 @@ const generateExtensionsDocs = async () => { ), {recursive: true}, ); - - // Generate targets.json (extension targets + APIs + components mapping) - const targetsScriptPath = path.join(__dirname, 'build-docs-targets-json.mjs'); - childProcess.execSync(`node ${targetsScriptPath}`, { - stdio: 'inherit', - cwd: rootPath, - }); }; +let checkoutTempFiles = []; try { if (existsSync(generatedDocsPath)) { await fs.rm(generatedDocsPath, {recursive: true}); @@ -110,18 +212,26 @@ try { searchValue: /typeof globalThis\.HTMLElement/g, replaceValue: 'any', }); + + console.log('Copying checkout .d.ts files to temporary .ts files...'); + checkoutTempFiles = await copyCheckoutTypesToTemp(); + await generateExtensionsDocs(); - const customerAccountOutputDir = path.join( - rootPath, - docsGeneratedRelativePath, - 'customer_account_ui_extensions', - EXTENSIONS_API_VERSION, - ); - const targetsJsonPath = path.join(customerAccountOutputDir, 'targets.json'); - console.log('\nGenerated docs at:'); - console.log(' Customer Account UI extensions:', customerAccountOutputDir); - console.log(' targets.json:', targetsJsonPath); + // Generate targets.json + console.log('Generating targets.json...'); + try { + execSync(`node ${path.join(docsPath, 'build-docs-targets-json.mjs')}`, { + stdio: 'inherit', + cwd: rootPath, + }); + console.log('✅ Generated targets.json'); + } catch (targetsError) { + console.warn( + 'Warning: Failed to generate targets.json:', + targetsError.message, + ); + } await copyGeneratedToShopifyDev({ generatedDocsPath, @@ -130,9 +240,14 @@ try { }); await fs.rm(tempComponentDefs); + await cleanupTempFiles(checkoutTempFiles); } catch (error) { + await cleanupTempFiles(checkoutTempFiles); + if (existsSync(tempComponentDefs)) { + await fs.rm(tempComponentDefs); + } console.error(error); - console.log(error.stdout.toString()); - console.log(error.stderr.toString()); + console.log(error.stdout?.toString?.() ?? ''); + console.log(error.stderr?.toString?.() ?? ''); process.exit(1); } diff --git a/packages/ui-extensions/docs/surfaces/customer-account/categories/components.doc.ts b/packages/ui-extensions/docs/surfaces/customer-account/categories/components.doc.ts deleted file mode 100644 index 6c30dc8a70..0000000000 --- a/packages/ui-extensions/docs/surfaces/customer-account/categories/components.doc.ts +++ /dev/null @@ -1,24 +0,0 @@ -import {CategoryTemplateSchema} from '@shopify/generate-docs'; - -const data: CategoryTemplateSchema = { - category: 'Polaris web components', - sections: [ - { - type: 'Generic', - anchorLink: 'additional-components', - title: 'Components for customer accounts', - sectionContent: - 'The components on this page are for customer account UI extensions. For more options, you can also use components from the larger checkout library.', - sectionCard: [ - { - type: 'blocks', - name: 'Checkout components', - subtitle: 'More components', - url: '/docs/api/checkout-ui-extensions/polaris-web-components', - }, - ], - }, - ], -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/customer-account/generated/customer_account_ui_extensions/2026-04-rc/generated_category_pages.json b/packages/ui-extensions/docs/surfaces/customer-account/generated/customer_account_ui_extensions/2026-04-rc/generated_category_pages.json deleted file mode 100644 index d14ea509d4..0000000000 --- a/packages/ui-extensions/docs/surfaces/customer-account/generated/customer_account_ui_extensions/2026-04-rc/generated_category_pages.json +++ /dev/null @@ -1,21 +0,0 @@ -[ - { - "category": "Polaris web components", - "sections": [ - { - "type": "Generic", - "anchorLink": "additional-components", - "title": "Components for customer accounts", - "sectionContent": "The components on this page are for customer account UI extensions. For more options, you can also use components from the larger checkout library.", - "sectionCard": [ - { - "type": "blocks", - "name": "Checkout components", - "subtitle": "More components", - "url": "/docs/api/checkout-ui-extensions/polaris-web-components" - } - ] - } - ] - } -] \ No newline at end of file diff --git a/packages/ui-extensions/src/docs/shared/components/ClipboardItem.ts b/packages/ui-extensions/src/docs/shared/components/ClipboardItem.ts index 9526949140..ac30c09e2a 100644 --- a/packages/ui-extensions/src/docs/shared/components/ClipboardItem.ts +++ b/packages/ui-extensions/src/docs/shared/components/ClipboardItem.ts @@ -5,7 +5,7 @@ const data: SharedReferenceEntityTemplateSchema = { description: 'Enables copying text to the user’s clipboard. Use alongside Button or Link components to let users easily copy content. `` doesn’t render visually.', category: 'Polaris web components', - subCategory: 'utilities', + subCategory: 'Actions', related: [], }; diff --git a/packages/ui-extensions/src/docs/shared/components/Details.ts b/packages/ui-extensions/src/docs/shared/components/Details.ts index a964e31a11..1af0b2186b 100644 --- a/packages/ui-extensions/src/docs/shared/components/Details.ts +++ b/packages/ui-extensions/src/docs/shared/components/Details.ts @@ -5,7 +5,7 @@ const data: SharedReferenceEntityTemplateSchema = { description: 'Creates a collapsible content area that can be expanded or collapsed by users. Use with Summary to provide expandable sections for additional information or settings.', category: 'Polaris web components', - subCategory: 'Interactive', + subCategory: 'Typography and content', related: [], }; diff --git a/packages/ui-extensions/src/docs/shared/components/GridItem.ts b/packages/ui-extensions/src/docs/shared/components/GridItem.ts index 566154a078..d27dbdbaec 100644 --- a/packages/ui-extensions/src/docs/shared/components/GridItem.ts +++ b/packages/ui-extensions/src/docs/shared/components/GridItem.ts @@ -6,7 +6,7 @@ const data: SharedReferenceEntityTemplateSchema = { 'The grid item component represents a single cell within a grid layout, allowing you to control how content is positioned and sized within the grid. Use grid item as a child of grid to specify column span, row span, and positioning for individual content areas.' + '\n\nGrid item supports precise placement control through column and row properties, enabling you to create complex layouts where different items occupy varying amounts of space or appear in specific grid positions.', category: 'Polaris web components', - subCategory: 'Structure', + subCategory: 'Layout and structure', related: [], }; diff --git a/packages/ui-extensions/src/docs/shared/components/ListItem.ts b/packages/ui-extensions/src/docs/shared/components/ListItem.ts index 18a2935075..25cf0a45c5 100644 --- a/packages/ui-extensions/src/docs/shared/components/ListItem.ts +++ b/packages/ui-extensions/src/docs/shared/components/ListItem.ts @@ -6,7 +6,7 @@ const data: SharedReferenceEntityTemplateSchema = { 'The list item component represents a single entry within an ordered list or unordered list. Use list item to structure individual points, steps, or items within a list, with each item automatically receiving appropriate list markers (bullets or numbers) from its parent list.' + '\n\nList item must be used as a direct child of ordered list or unordered list components. Each list item can contain text, inline formatting, or other components to create rich list content.', category: 'Polaris web components', - subCategory: 'Structure', + subCategory: 'Typography and content', related: [], }; diff --git a/packages/ui-extensions/src/docs/shared/components/Map.ts b/packages/ui-extensions/src/docs/shared/components/Map.ts index f7d57bcf1b..10f8eca127 100644 --- a/packages/ui-extensions/src/docs/shared/components/Map.ts +++ b/packages/ui-extensions/src/docs/shared/components/Map.ts @@ -5,7 +5,7 @@ const data: SharedReferenceEntityTemplateSchema = { description: 'Use Map to display a map on a page. This component is useful for displaying a map of a location, such as a store or a customer’s address.', category: 'Polaris web components', - subCategory: 'Interactive', + subCategory: 'Media and visuals', related: [], }; diff --git a/packages/ui-extensions/src/docs/shared/components/MapMarker.ts b/packages/ui-extensions/src/docs/shared/components/MapMarker.ts index 439ef88de6..7f8354814c 100644 --- a/packages/ui-extensions/src/docs/shared/components/MapMarker.ts +++ b/packages/ui-extensions/src/docs/shared/components/MapMarker.ts @@ -1,11 +1,11 @@ import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; const data: SharedReferenceEntityTemplateSchema = { - name: 'MapMarker', + name: 'Map marker', description: 'Use MapMarker to display a marker on a map. Use only as a child of `s-map` component.', category: 'Polaris web components', - subCategory: 'Interactive', + subCategory: 'Media and visuals', related: [], }; diff --git a/packages/ui-extensions/src/docs/shared/components/OptionGroup.ts b/packages/ui-extensions/src/docs/shared/components/OptionGroup.ts index a07c90a4a2..1f8934c9e1 100644 --- a/packages/ui-extensions/src/docs/shared/components/OptionGroup.ts +++ b/packages/ui-extensions/src/docs/shared/components/OptionGroup.ts @@ -1,7 +1,7 @@ import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; const data: SharedReferenceEntityTemplateSchema = { - name: 'OptionGroup', + name: 'Option group', description: 'Represents a group of options within a select component. Use only as a child of `s-select` components.', category: 'Polaris web components', diff --git a/packages/ui-extensions/src/docs/shared/components/OrderedList.ts b/packages/ui-extensions/src/docs/shared/components/OrderedList.ts index ef2dc350b8..a3d6fb9803 100644 --- a/packages/ui-extensions/src/docs/shared/components/OrderedList.ts +++ b/packages/ui-extensions/src/docs/shared/components/OrderedList.ts @@ -6,7 +6,7 @@ const data: SharedReferenceEntityTemplateSchema = { 'The ordered list component displays a numbered list of related items in a specific sequence. Use ordered list to present step-by-step instructions, ranked items, procedures, or any content where order and sequence matter to understanding.' + "\n\nOrdered lists automatically number items and support nested lists for hierarchical content organization. For items where order doesn't matter, use [unordered list](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/layout-and-structure/unordered-list).", category: 'Polaris web components', - subCategory: 'Layout and structure', + subCategory: 'Typography and content', related: [], }; diff --git a/packages/ui-extensions/src/docs/shared/components/QRCode.ts b/packages/ui-extensions/src/docs/shared/components/QRCode.ts index 38ddced93e..1d895fd2dc 100644 --- a/packages/ui-extensions/src/docs/shared/components/QRCode.ts +++ b/packages/ui-extensions/src/docs/shared/components/QRCode.ts @@ -1,11 +1,11 @@ import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; const data: SharedReferenceEntityTemplateSchema = { - name: 'QR Code', + name: 'QR code', description: 'Displays a scannable QR code representing data such as URLs or text. Use to let users quickly access information by scanning with a smartphone or other device.', category: 'Polaris web components', - subCategory: 'Other', + subCategory: 'Media and visuals', related: [], }; diff --git a/packages/ui-extensions/src/docs/shared/components/SkeletonParagraph.ts b/packages/ui-extensions/src/docs/shared/components/SkeletonParagraph.ts index a0876bfc82..4d958e00b1 100644 --- a/packages/ui-extensions/src/docs/shared/components/SkeletonParagraph.ts +++ b/packages/ui-extensions/src/docs/shared/components/SkeletonParagraph.ts @@ -5,7 +5,7 @@ const data: SharedReferenceEntityTemplateSchema = { description: 'Displays a placeholder representation of text content while it loads. Use to improve perceived performance by showing users where text will appear.', category: 'Polaris web components', - subCategory: 'Feedback and status indicators', + subCategory: 'Typography and content', related: [], }; diff --git a/packages/ui-extensions/src/docs/shared/components/Summary.ts b/packages/ui-extensions/src/docs/shared/components/Summary.ts index 84df760e6a..40e03de52a 100644 --- a/packages/ui-extensions/src/docs/shared/components/Summary.ts +++ b/packages/ui-extensions/src/docs/shared/components/Summary.ts @@ -5,7 +5,7 @@ const data: SharedReferenceEntityTemplateSchema = { description: 'Provides a clickable label for collapsible Details content. Use to create clear, accessible disclosure controls that show or hide additional information.', category: 'Polaris web components', - subCategory: 'Interactive', + subCategory: 'Typography and content', related: [], }; diff --git a/packages/ui-extensions/src/docs/shared/components/Tooltip.ts b/packages/ui-extensions/src/docs/shared/components/Tooltip.ts index d392a29e6e..5a77acb6a2 100644 --- a/packages/ui-extensions/src/docs/shared/components/Tooltip.ts +++ b/packages/ui-extensions/src/docs/shared/components/Tooltip.ts @@ -6,7 +6,7 @@ const data: SharedReferenceEntityTemplateSchema = { 'The tooltip component displays helpful information in a small overlay when users hover over or focus on an element. Use tooltip to provide additional context, explain functionality, or clarify terms without cluttering the interface with permanent text.' + '\n\nTooltips support keyboard accessibility, positioning options, and activation on both hover and focus for inclusive interaction patterns.', category: 'Polaris web components', - subCategory: 'Typography and content', + subCategory: 'Overlays', related: [], }; diff --git a/packages/ui-extensions/src/docs/shared/components/UnorderedList.ts b/packages/ui-extensions/src/docs/shared/components/UnorderedList.ts index 5ec26d03dc..07e4e446aa 100644 --- a/packages/ui-extensions/src/docs/shared/components/UnorderedList.ts +++ b/packages/ui-extensions/src/docs/shared/components/UnorderedList.ts @@ -6,7 +6,7 @@ const data: SharedReferenceEntityTemplateSchema = { "The unordered list component displays a bulleted list of related items where sequence isn't critical. Use unordered list to present collections of features, options, requirements, or any group of items where order doesn't affect meaning." + '\n\nUnordered lists automatically add bullet points and support nested lists for hierarchical content organization. For sequential items where order is important, use [ordered list](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/layout-and-structure/ordered-list).', category: 'Polaris web components', - subCategory: 'Layout and structure', + subCategory: 'Typography and content', related: [], }; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Abbreviation/Abbreviation.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Abbreviation/Abbreviation.doc.ts new file mode 100644 index 0000000000..28b2ff0930 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Abbreviation/Abbreviation.doc.ts @@ -0,0 +1,11 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Abbreviation'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Abbreviation/examples/basic-abbreviation.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Abbreviation/examples/basic-abbreviation.example.html new file mode 100644 index 0000000000..0eb211d967 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Abbreviation/examples/basic-abbreviation.example.html @@ -0,0 +1 @@ +USD diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Announcement/Announcement.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Announcement/Announcement.doc.ts new file mode 100644 index 0000000000..ae98a768a9 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Announcement/Announcement.doc.ts @@ -0,0 +1,14 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Announcement'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {events: true, methods: true}, + bestPractices: `- Prioritize the default state: The most effective use of the announcement bar is when content is short enough to display entirely in its default state, with no need for expansion. This provides the best user experience. +- Handle content truncation: The component has a strict maximum height. Content that exceeds the expanded state's height will be cut off with no scrolling capability. Ensure your application's logic handles excessively long content gracefully to prevent truncation. +- Provide a modal alternative: If your application needs to display more than a few lines of content, avoid cramming it into the announcement bar. Instead, use the bar as a teaser that links to a modal. This is the recommended pattern for displaying surveys, detailed offers, or other longer-form content.`, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Announcement/examples/basic-announcement.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Announcement/examples/basic-announcement.example.html new file mode 100644 index 0000000000..2fe3552d80 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Announcement/examples/basic-announcement.example.html @@ -0,0 +1,16 @@ + + + Check our latest offers + Fill out the survey + + + + We'd love to hear about your shopping experience + + Submit + + + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Badge/Badge.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Badge/Badge.doc.ts new file mode 100644 index 0000000000..219924bdee --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Badge/Badge.doc.ts @@ -0,0 +1,11 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Badge'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Badge/examples/basic-badge.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Badge/examples/basic-badge.example.html new file mode 100644 index 0000000000..1af0cfdcd1 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Badge/examples/basic-badge.example.html @@ -0,0 +1,3 @@ +Default +Expired +Free diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Banner/Banner.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Banner/Banner.doc.ts new file mode 100644 index 0000000000..482cb4a7e9 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Banner/Banner.doc.ts @@ -0,0 +1,18 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Banner'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, events: true}, + bestPractices: `- Use banners sparingly and only for important information. Too many banners can distract from the main content. +- Place banners at the top of a page or section, below the relevant header. +- Include a Button with a next step whenever possible. +- Make banners dismissible unless they are critical or require action. +- Use \`info\` for general updates or advice. +- Use \`warning\` to highlight things that need attention. Use sparingly as it can add stress. +- Use \`critical\` for problems that must be resolved.`, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Banner/examples/basic-banner.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Banner/examples/basic-banner.example.html new file mode 100644 index 0000000000..2b8ed8b6f4 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Banner/examples/basic-banner.example.html @@ -0,0 +1 @@ + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Box/Box.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Box/Box.doc.ts new file mode 100644 index 0000000000..95afbebff8 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Box/Box.doc.ts @@ -0,0 +1,16 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Box'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true}, + bestPractices: `- Use \`s-box\` when you need a container that preserves the natural size of its contents. +- Use \`s-box\` inside of layout components like \`s-stack\` to prevent children from stretching. +- \`s-box\` has \`display: block\` by default. +- Prefer \`s-box\` when you don't need the features of more specialized components like \`s-stack\`. +- Use \`s-box\` to group elements and apply styling or layout without changing their natural size.`, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Box/examples/basic-box.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Box/examples/basic-box.example.html new file mode 100644 index 0000000000..924f885446 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Box/examples/basic-box.example.html @@ -0,0 +1,11 @@ + + + Baked fresh to order. Please order 1-2 days before needed due to potential + shipping variations. + + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Button/Button.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Button/Button.doc.ts new file mode 100644 index 0000000000..304d31f3ee --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Button/Button.doc.ts @@ -0,0 +1,31 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Button'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, events: true}, + bestPractices: `**Content Best Practices** + +- Clearly label each button with what it does. Users should be able to predict the result of clicking the button. +- Start button text with a strong action verb that describes the action (e.g., "Add", "Save", "Apply"). + +**Hierarchy Best Practices** + +- Create a clear visual hierarchy by varying the emphasis level of the buttons. +- There should only be one high emphasis (primary) button per area. All the other buttons should be lower emphasis. +- Use primary buttons for the most important action in a given flow (e.g. "Pay now", "Apply"). +- Use secondary buttons for alternative actions (e.g. "Track your order"). + +**When to Use** + +- Use buttons when you want the user to take an action. +- Use buttons when you need a way to explicitly control user interaction (e.g. form submissions or toggle states). + +**When not to Use** + +- Don't use buttons for navigation. Use links instead.`, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Button/examples/basic-button.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Button/examples/basic-button.example.html new file mode 100644 index 0000000000..9b0d3e9965 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Button/examples/basic-button.example.html @@ -0,0 +1,2 @@ +Cancel +Save diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Checkbox/Checkbox.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Checkbox/Checkbox.doc.ts new file mode 100644 index 0000000000..35b48a36b7 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Checkbox/Checkbox.doc.ts @@ -0,0 +1,11 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Checkbox'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, events: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Checkbox/examples/basic-checkbox.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Checkbox/examples/basic-checkbox.example.html new file mode 100644 index 0000000000..0b7e4ae1eb --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Checkbox/examples/basic-checkbox.example.html @@ -0,0 +1 @@ + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Chip/Chip.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Chip/Chip.doc.ts new file mode 100644 index 0000000000..348d16fb9b --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Chip/Chip.doc.ts @@ -0,0 +1,11 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Chip'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, slots: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Chip/examples/basic-chip.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Chip/examples/basic-chip.example.html new file mode 100644 index 0000000000..d9c05c56bd --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Chip/examples/basic-chip.example.html @@ -0,0 +1 @@ +50% OFF diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/ChoiceList/ChoiceList.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/ChoiceList/ChoiceList.doc.ts new file mode 100644 index 0000000000..d56dfc7b5a --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/ChoiceList/ChoiceList.doc.ts @@ -0,0 +1,16 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/ChoiceList'; +import choiceSharedContent from '../../../../docs/shared/components/Choice'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, events: true}, + subcomponent: { + ...choiceSharedContent, + definitions: {properties: true, slots: true}, + }, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/ChoiceList/examples/basic-choice-list.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/ChoiceList/examples/basic-choice-list.example.html new file mode 100644 index 0000000000..0cdcc821ba --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/ChoiceList/examples/basic-choice-list.example.html @@ -0,0 +1,7 @@ + + Yonge-Dundas Square locations + Distillery District location + Yorkville location + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/ChoiceList/examples/block-choice-variant.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/ChoiceList/examples/block-choice-variant.example.html new file mode 100644 index 0000000000..2579ba3b77 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/ChoiceList/examples/block-choice-variant.example.html @@ -0,0 +1,47 @@ + + + + + Yonge-Dundas Square + 1 Dundas St E, Toronto ON + + 1.2 km + + + + + + Distillery District + 55 Mill St, Toronto ON + + 4 km + + + + + + Yorkville + 55 Avenue Rd, Toronto ON + + 6 km + + + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/ChoiceList/examples/grid-choice-variant.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/ChoiceList/examples/grid-choice-variant.example.html new file mode 100644 index 0000000000..cfafcf241b --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/ChoiceList/examples/grid-choice-variant.example.html @@ -0,0 +1,5 @@ + + Standard + Deluxe + Personalized + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/ChoiceList/examples/inline-choice-variant.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/ChoiceList/examples/inline-choice-variant.example.html new file mode 100644 index 0000000000..fb782e6858 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/ChoiceList/examples/inline-choice-variant.example.html @@ -0,0 +1,6 @@ + + $3.50 + $4.50 + $5.50 + Other + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/ChoiceList/examples/list-choice-variant.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/ChoiceList/examples/list-choice-variant.example.html new file mode 100644 index 0000000000..5f8b0829a6 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/ChoiceList/examples/list-choice-variant.example.html @@ -0,0 +1,5 @@ + + Yonge-Dundas Square + Distillery District + Yorkville + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Clickable/Clickable.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Clickable/Clickable.doc.ts new file mode 100644 index 0000000000..78ece2a01a --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Clickable/Clickable.doc.ts @@ -0,0 +1,11 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Clickable'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, events: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Clickable/examples/basic-clickable.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Clickable/examples/basic-clickable.example.html new file mode 100644 index 0000000000..41ab712dd8 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Clickable/examples/basic-clickable.example.html @@ -0,0 +1,3 @@ + + + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/ClickableChip/ClickableChip.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/ClickableChip/ClickableChip.doc.ts new file mode 100644 index 0000000000..b090055643 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/ClickableChip/ClickableChip.doc.ts @@ -0,0 +1,11 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/ClickableChip'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, events: true, slots: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/ClickableChip/examples/basic-clickable-chip.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/ClickableChip/examples/basic-clickable-chip.example.html new file mode 100644 index 0000000000..0f63e78f88 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/ClickableChip/examples/basic-clickable-chip.example.html @@ -0,0 +1 @@ +Shipping insurance diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/ClipboardItem/ClipboardItem.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/ClipboardItem/ClipboardItem.doc.ts new file mode 100644 index 0000000000..0912297196 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/ClipboardItem/ClipboardItem.doc.ts @@ -0,0 +1,12 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/ClipboardItem'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + isVisualComponent: true, + definitions: {properties: true, events: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/ClipboardItem/examples/basic-clipboard-item.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/ClipboardItem/examples/basic-clipboard-item.example.html new file mode 100644 index 0000000000..5891e82eca --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/ClipboardItem/examples/basic-clipboard-item.example.html @@ -0,0 +1,2 @@ +Copy discount code + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/ConsentCheckbox/ConsentCheckbox.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/ConsentCheckbox/ConsentCheckbox.doc.ts new file mode 100644 index 0000000000..8c08d9ceee --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/ConsentCheckbox/ConsentCheckbox.doc.ts @@ -0,0 +1,13 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/ConsentCheckbox'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + requires: + 'enabling of the `sms_marketing` capability of the [Customer Privacy](/docs/api/customer-account-ui-extensions/latest/configuration#collect-buyer-consent) capability group to work.', + definitions: {properties: true, events: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/ConsentCheckbox/examples/basic-consent-checkbox.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/ConsentCheckbox/examples/basic-consent-checkbox.example.html new file mode 100644 index 0000000000..f2b826b7f1 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/ConsentCheckbox/examples/basic-consent-checkbox.example.html @@ -0,0 +1,5 @@ + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/ConsentPhoneField/ConsentPhoneField.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/ConsentPhoneField/ConsentPhoneField.doc.ts new file mode 100644 index 0000000000..93243009be --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/ConsentPhoneField/ConsentPhoneField.doc.ts @@ -0,0 +1,13 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/ConsentPhoneField'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + requires: + 'enabling of the `sms_marketing` capability of the [Customer Privacy](/docs/api/customer-account-ui-extensions/latest/configuration#collect-buyer-consent) capability group to work.', + definitions: {properties: true, events: true, slots: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/ConsentPhoneField/examples/basic-consent-phone-field.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/ConsentPhoneField/examples/basic-consent-phone-field.example.html new file mode 100644 index 0000000000..9a24809029 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/ConsentPhoneField/examples/basic-consent-phone-field.example.html @@ -0,0 +1,5 @@ + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/DateField/DateField.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/DateField/DateField.doc.ts new file mode 100644 index 0000000000..a5d66d0205 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/DateField/DateField.doc.ts @@ -0,0 +1,11 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/DateField'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, events: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/DateField/examples/basic-date-field.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/DateField/examples/basic-date-field.example.html new file mode 100644 index 0000000000..a95fd92976 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/DateField/examples/basic-date-field.example.html @@ -0,0 +1 @@ + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/DatePicker/DatePicker.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/DatePicker/DatePicker.doc.ts new file mode 100644 index 0000000000..8701b6aed6 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/DatePicker/DatePicker.doc.ts @@ -0,0 +1,11 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/DatePicker'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, events: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/DatePicker/examples/basic-date-picker.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/DatePicker/examples/basic-date-picker.example.html new file mode 100644 index 0000000000..e02c6ae636 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/DatePicker/examples/basic-date-picker.example.html @@ -0,0 +1 @@ + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Details/Details.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Details/Details.doc.ts new file mode 100644 index 0000000000..56cca58a4a --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Details/Details.doc.ts @@ -0,0 +1,16 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Details'; +import summarySharedContent from '../../../../docs/shared/components/Summary'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, events: true}, + subcomponent: { + ...summarySharedContent, + definitions: {properties: true}, + }, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Details/examples/basic-details.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Details/examples/basic-details.example.html new file mode 100644 index 0000000000..c0f6a82a26 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Details/examples/basic-details.example.html @@ -0,0 +1,6 @@ + + Pickup instructions + + Curbside pickup is at the back of the warehouse. Park in a stall and follow the signs. + + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Divider/Divider.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Divider/Divider.doc.ts new file mode 100644 index 0000000000..6708444951 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Divider/Divider.doc.ts @@ -0,0 +1,11 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Divider'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Divider/examples/basic-divider.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Divider/examples/basic-divider.example.html new file mode 100644 index 0000000000..bfe01e4f23 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Divider/examples/basic-divider.example.html @@ -0,0 +1 @@ + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/DropZone/DropZone.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/DropZone/DropZone.doc.ts new file mode 100644 index 0000000000..faf396f21d --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/DropZone/DropZone.doc.ts @@ -0,0 +1,14 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/DropZone'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, events: true}, + bestPractices: `- **File storage:** Implement file storage separately. Use Metafields through the Checkout API or Customer Accounts API to store references to uploaded files. +- **Mobile considerations:** Drag and drop functionality is limited on mobile devices. Include a button to help guide users to select files. +- **Minimum size:** Keep the DropZone at least 100px × 100px to avoid cut-off text and spacing issues.`, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/DropZone/examples/basic-drop-zone.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/DropZone/examples/basic-drop-zone.example.html new file mode 100644 index 0000000000..bd8a03da61 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/DropZone/examples/basic-drop-zone.example.html @@ -0,0 +1 @@ + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/EmailField/EmailField.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/EmailField/EmailField.doc.ts new file mode 100644 index 0000000000..f3bf7bc357 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/EmailField/EmailField.doc.ts @@ -0,0 +1,11 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/EmailField'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, events: true, slots: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/EmailField/examples/basic-email-field.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/EmailField/examples/basic-email-field.example.html new file mode 100644 index 0000000000..77097c19ac --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/EmailField/examples/basic-email-field.example.html @@ -0,0 +1 @@ + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Form/Form.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Form/Form.doc.ts new file mode 100644 index 0000000000..9b6b5c242f --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Form/Form.doc.ts @@ -0,0 +1,13 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Form'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, events: true}, + bestPractices: `- Wrap all form input elements with the Form component. +- Each form should have only one submit button, placed at the end of the form.`, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Form/examples/basic-form.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Form/examples/basic-form.example.html new file mode 100644 index 0000000000..caad6b3274 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Form/examples/basic-form.example.html @@ -0,0 +1,4 @@ + + + Submit + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Grid/Grid.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Grid/Grid.doc.ts new file mode 100644 index 0000000000..56f059569c --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Grid/Grid.doc.ts @@ -0,0 +1,16 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Grid'; +import gridItemSharedContent from '../../../../docs/shared/components/GridItem'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true}, + subcomponent: { + ...gridItemSharedContent, + definitions: {properties: true}, + }, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Grid/examples/basic-grid.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Grid/examples/basic-grid.example.html new file mode 100644 index 0000000000..0521d962d2 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Grid/examples/basic-grid.example.html @@ -0,0 +1,11 @@ + + + Plants for sale + + + Pothos + + + $25.00 + + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Heading/Heading.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Heading/Heading.doc.ts new file mode 100644 index 0000000000..924c76d65c --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Heading/Heading.doc.ts @@ -0,0 +1,20 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Heading'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true}, + usefulFor: `- Creating consistent titles and subtitles throughout a page. +- Helping users with assistive technology (such as screen readers) navigate content.`, + considerations: `- The heading level is determined by the level of nesting, starting at h2. +- Prefer using the \`heading\` prop in \`s-section\`. Only use \`s-heading\` when you need a custom heading layout.`, + bestPractices: `- Use short headings for quick scanning. +- Use plain, clear terms. +- Avoid jargon and technical language. +- Avoid using different terms for the same concept. +- Avoid duplicating content from the surrounding context.`, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Heading/examples/basic-heading.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Heading/examples/basic-heading.example.html new file mode 100644 index 0000000000..1f7d06638e --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Heading/examples/basic-heading.example.html @@ -0,0 +1 @@ +Contact diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Icon/Icon.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Icon/Icon.doc.ts new file mode 100644 index 0000000000..eb38ee7980 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Icon/Icon.doc.ts @@ -0,0 +1,11 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Icon'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Icon/examples/basic-icon.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Icon/examples/basic-icon.example.html new file mode 100644 index 0000000000..96c6a175ef --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Icon/examples/basic-icon.example.html @@ -0,0 +1,4 @@ + + + + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Image/Image.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Image/Image.doc.ts new file mode 100644 index 0000000000..69bcc9e7e7 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Image/Image.doc.ts @@ -0,0 +1,14 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Image'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true}, + bestPractices: `- Use high-resolution images to ensure they look crisp on all devices. +- Optimize images for performance to reduce load times. +- Use images purposefully to add clarity and guide users through the experience.`, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Image/examples/basic-image.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Image/examples/basic-image.example.html new file mode 100644 index 0000000000..e098e7d37d --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Image/examples/basic-image.example.html @@ -0,0 +1 @@ + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Link/Link.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Link/Link.doc.ts new file mode 100644 index 0000000000..c9835de69e --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Link/Link.doc.ts @@ -0,0 +1,13 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Link'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, events: true}, + bestPractices: `- Use links for navigation and buttons for actions. +- \`s-button\` and \`s-link\` carry style and accessibility information. Use them consistently for better accessibility and visual coherence.`, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Link/examples/basic-link.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Link/examples/basic-link.example.html new file mode 100644 index 0000000000..c2ea8e8c6e --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Link/examples/basic-link.example.html @@ -0,0 +1 @@ +Privacy policy diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Map/Map.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Map/Map.doc.ts new file mode 100644 index 0000000000..749bb43c26 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Map/Map.doc.ts @@ -0,0 +1,16 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Map'; +import mapMarkerSharedContent from '../../../../docs/shared/components/MapMarker'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, events: true}, + subcomponent: { + ...mapMarkerSharedContent, + definitions: {properties: true, events: true, slots: true}, + }, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Map/examples/basic-map.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Map/examples/basic-map.example.html new file mode 100644 index 0000000000..9e18506dd8 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Map/examples/basic-map.example.html @@ -0,0 +1,3 @@ + + + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Map/examples/map-marker-graphic.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Map/examples/map-marker-graphic.example.html new file mode 100644 index 0000000000..0de86bad1d --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Map/examples/map-marker-graphic.example.html @@ -0,0 +1,14 @@ + + + + + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Map/examples/map-marker-popover.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Map/examples/map-marker-popover.example.html new file mode 100644 index 0000000000..ba1a46e4cc --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Map/examples/map-marker-popover.example.html @@ -0,0 +1,14 @@ + + + San Francisco + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Menu/Menu.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Menu/Menu.doc.ts index a0182de550..4a1f1a3874 100644 --- a/packages/ui-extensions/src/surfaces/customer-account/components/Menu/Menu.doc.ts +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Menu/Menu.doc.ts @@ -71,7 +71,7 @@ Use short labels (ideally two words) that start with a verb, use sentence case, { name: 'Popover', subtitle: 'Component', - url: '/docs/api/checkout-ui-extensions/polaris-web-components/overlays/popover', + url: '/docs/api/customer-account-ui-extensions/polaris-web-components/overlays/popover', type: 'Component', }, ], diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Modal/Modal.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Modal/Modal.doc.ts new file mode 100644 index 0000000000..1c54cbec0d --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Modal/Modal.doc.ts @@ -0,0 +1,11 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Modal'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, events: true, slots: true, methods: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Modal/examples/basic-modal.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Modal/examples/basic-modal.example.html new file mode 100644 index 0000000000..cff1b9d59e --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Modal/examples/basic-modal.example.html @@ -0,0 +1,20 @@ +Add Product + + + We have a 30-day return policy, which means you have 30 days after receiving + your item to request a return. + + + To be eligible for a return, your item must be in the same condition that + you received it, unworn or unused, with tags, and in its original packaging. + You’ll also need the receipt or proof of purchase. + + + Close + + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/MoneyField/MoneyField.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/MoneyField/MoneyField.doc.ts new file mode 100644 index 0000000000..082e698a68 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/MoneyField/MoneyField.doc.ts @@ -0,0 +1,11 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/MoneyField'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, events: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/MoneyField/examples/basic-money-field.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/MoneyField/examples/basic-money-field.example.html new file mode 100644 index 0000000000..9d4d8a905f --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/MoneyField/examples/basic-money-field.example.html @@ -0,0 +1 @@ + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/NumberField/NumberField.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/NumberField/NumberField.doc.ts new file mode 100644 index 0000000000..b728354864 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/NumberField/NumberField.doc.ts @@ -0,0 +1,11 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/NumberField'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, events: true, slots: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/NumberField/examples/basic-number-field.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/NumberField/examples/basic-number-field.example.html new file mode 100644 index 0000000000..af509ca46a --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/NumberField/examples/basic-number-field.example.html @@ -0,0 +1,8 @@ + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/OrderedList/OrderedList.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/OrderedList/OrderedList.doc.ts new file mode 100644 index 0000000000..4522b1065f --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/OrderedList/OrderedList.doc.ts @@ -0,0 +1,21 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/OrderedList'; +import listItemSharedContent from '../../../../docs/shared/components/ListItem'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true}, + subcomponent: { + ...listItemSharedContent, + definitions: {properties: true}, + }, + bestPractices: `- Use \`s-ordered-list\` when you need to present items in a specific sequence or order. +- Each item in the list should be wrapped in a \`s-list-item\` component. +- Keep list items concise and consistent in length when possible. +- Use \`s-ordered-list\` for step-by-step instructions, numbered procedures, or ranked items. +- Consider using \`s-ordered-list\` when the order of items is important for understanding.`, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/OrderedList/examples/basic-ordered-list.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/OrderedList/examples/basic-ordered-list.example.html new file mode 100644 index 0000000000..ab907b104f --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/OrderedList/examples/basic-ordered-list.example.html @@ -0,0 +1,5 @@ + + Add items to your cart + Review your order details + Complete your purchase + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Paragraph/Paragraph.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Paragraph/Paragraph.doc.ts new file mode 100644 index 0000000000..f7c802ef15 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Paragraph/Paragraph.doc.ts @@ -0,0 +1,12 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Paragraph'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true}, + bestPractices: `- Create contrast between more and less important text using properties such as \`color\` and \`tone\`.`, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Paragraph/examples/basic-paragraph.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Paragraph/examples/basic-paragraph.example.html new file mode 100644 index 0000000000..64c6a1bfd6 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Paragraph/examples/basic-paragraph.example.html @@ -0,0 +1 @@ +Ship in 1-2 business days. diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/PasswordField/PasswordField.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/PasswordField/PasswordField.doc.ts new file mode 100644 index 0000000000..ae04710e15 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/PasswordField/PasswordField.doc.ts @@ -0,0 +1,11 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/PasswordField'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, events: true, slots: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/PasswordField/examples/basic-password-field.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/PasswordField/examples/basic-password-field.example.html new file mode 100644 index 0000000000..38023d3a04 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/PasswordField/examples/basic-password-field.example.html @@ -0,0 +1 @@ + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/PaymentIcon/PaymentIcon.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/PaymentIcon/PaymentIcon.doc.ts new file mode 100644 index 0000000000..c29ccec3af --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/PaymentIcon/PaymentIcon.doc.ts @@ -0,0 +1,11 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/PaymentIcon'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/PaymentIcon/examples/basic-payment-icon.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/PaymentIcon/examples/basic-payment-icon.example.html new file mode 100644 index 0000000000..70c4b1ccbe --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/PaymentIcon/examples/basic-payment-icon.example.html @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/PhoneField/PhoneField.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/PhoneField/PhoneField.doc.ts new file mode 100644 index 0000000000..a3321688eb --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/PhoneField/PhoneField.doc.ts @@ -0,0 +1,11 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/PhoneField'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, events: true, slots: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/PhoneField/examples/basic-phone-field.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/PhoneField/examples/basic-phone-field.example.html new file mode 100644 index 0000000000..e8dc7b87bf --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/PhoneField/examples/basic-phone-field.example.html @@ -0,0 +1,2 @@ + + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Popover/Popover.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Popover/Popover.doc.ts new file mode 100644 index 0000000000..54b9531a22 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Popover/Popover.doc.ts @@ -0,0 +1,11 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Popover'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, events: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Popover/examples/basic-popover.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Popover/examples/basic-popover.example.html new file mode 100644 index 0000000000..b1c06f3979 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Popover/examples/basic-popover.example.html @@ -0,0 +1,7 @@ +Open Popover + + + + Validate + + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/PressButton/PressButton.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/PressButton/PressButton.doc.ts new file mode 100644 index 0000000000..97d228fa9a --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/PressButton/PressButton.doc.ts @@ -0,0 +1,11 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/PressButton'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, events: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/PressButton/examples/basic-press-button.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/PressButton/examples/basic-press-button.example.html new file mode 100644 index 0000000000..10797e2f35 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/PressButton/examples/basic-press-button.example.html @@ -0,0 +1 @@ +Add gift wrapping diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/ProductThumbnail/ProductThumbnail.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/ProductThumbnail/ProductThumbnail.doc.ts new file mode 100644 index 0000000000..0bcd05bc22 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/ProductThumbnail/ProductThumbnail.doc.ts @@ -0,0 +1,11 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/ProductThumbnail'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/ProductThumbnail/examples/basic-product-thumbnail.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/ProductThumbnail/examples/basic-product-thumbnail.example.html new file mode 100644 index 0000000000..da124bd774 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/ProductThumbnail/examples/basic-product-thumbnail.example.html @@ -0,0 +1,4 @@ + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Progress/Progress.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Progress/Progress.doc.ts new file mode 100644 index 0000000000..e0b7f47510 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Progress/Progress.doc.ts @@ -0,0 +1,15 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Progress'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true}, + bestPractices: `- Pair Progress with Paragraph or Text to communicate the current status of a process. +- **Loading states:** Add reassuring text to indicate the bar is still loading. +- **Error states:** Add text or a critical Banner to describe the error and next steps. Use the \`critical\` tone. +- **Goals:** Use Progress to visualize meaningful goals, such as rewards tiers or free shipping thresholds.`, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Progress/examples/basic-progress.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Progress/examples/basic-progress.example.html new file mode 100644 index 0000000000..34297d6536 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Progress/examples/basic-progress.example.html @@ -0,0 +1 @@ + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/QRCode/QRCode.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/QRCode/QRCode.doc.ts new file mode 100644 index 0000000000..307f582edd --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/QRCode/QRCode.doc.ts @@ -0,0 +1,17 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/QRCode'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, events: true}, + bestPractices: `- Always test that the QR code scans correctly from a smartphone. +- Use a square logo when customers expect one. +- Add a short text description of what the QR code does. +- Provide an alternative way to access the content: + - For URLs: add an \`s-link\` nearby. + - For data: add an \`s-button\` to copy to clipboard, or show it in a readonly \`s-text-field\`.`, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/QRCode/examples/basic-qr-code.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/QRCode/examples/basic-qr-code.example.html new file mode 100644 index 0000000000..1af3b82c3d --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/QRCode/examples/basic-qr-code.example.html @@ -0,0 +1,4 @@ + + + Scan to visit Shopify.com + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/QueryContainer/QueryContainer.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/QueryContainer/QueryContainer.doc.ts new file mode 100644 index 0000000000..c0a65838ab --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/QueryContainer/QueryContainer.doc.ts @@ -0,0 +1,19 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/QueryContainer'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true}, + related: [ + { + name: 'Responsive values', + subtitle: 'Utility', + url: '/docs/api/customer-account-ui-extensions/latest/using-polaris-components#responsive-values', + type: 'utility', + }, + ], +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/QueryContainer/examples/basic-query-container.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/QueryContainer/examples/basic-query-container.example.html new file mode 100644 index 0000000000..c33d42df2d --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/QueryContainer/examples/basic-query-container.example.html @@ -0,0 +1,8 @@ + + + Padding is applied when the inline-size '>' 500px + + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/ScrollBox/ScrollBox.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/ScrollBox/ScrollBox.doc.ts new file mode 100644 index 0000000000..db27f2da5e --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/ScrollBox/ScrollBox.doc.ts @@ -0,0 +1,11 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/ScrollBox'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/ScrollBox/examples/basic-scroll-box.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/ScrollBox/examples/basic-scroll-box.example.html new file mode 100644 index 0000000000..00b92d34f1 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/ScrollBox/examples/basic-scroll-box.example.html @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Select/Select.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Select/Select.doc.ts new file mode 100644 index 0000000000..f18caaf221 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Select/Select.doc.ts @@ -0,0 +1,16 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Select'; +import optionSharedContent from '../../../../docs/shared/components/Option'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, events: true}, + subcomponent: { + ...optionSharedContent, + definitions: {properties: true}, + }, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Select/examples/basic-select.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Select/examples/basic-select.example.html new file mode 100644 index 0000000000..d931b72cdf --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Select/examples/basic-select.example.html @@ -0,0 +1,5 @@ + + Canada + United States + United Kingdom + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Sheet/Sheet.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Sheet/Sheet.doc.ts new file mode 100644 index 0000000000..8d99d2c623 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Sheet/Sheet.doc.ts @@ -0,0 +1,13 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Sheet'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + requires: + 'configuration of the [Customer Privacy](/docs/api/customer-account-ui-extensions/latest/configuration#collect-buyer-consent) capability to be rendered.', + definitions: {properties: true, events: true, slots: true, methods: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Sheet/examples/basic-sheet.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Sheet/examples/basic-sheet.example.html new file mode 100644 index 0000000000..fccbe1fa29 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Sheet/examples/basic-sheet.example.html @@ -0,0 +1,5 @@ + +Open Sheet + + Sheet Content + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/SkeletonParagraph/SkeletonParagraph.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/SkeletonParagraph/SkeletonParagraph.doc.ts new file mode 100644 index 0000000000..d884dffbe2 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/SkeletonParagraph/SkeletonParagraph.doc.ts @@ -0,0 +1,11 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/SkeletonParagraph'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/SkeletonParagraph/examples/basic-skeleton-paragraph.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/SkeletonParagraph/examples/basic-skeleton-paragraph.example.html new file mode 100644 index 0000000000..ec3c0025ba --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/SkeletonParagraph/examples/basic-skeleton-paragraph.example.html @@ -0,0 +1,2 @@ + + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Spinner/Spinner.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Spinner/Spinner.doc.ts new file mode 100644 index 0000000000..e7a2d0941c --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Spinner/Spinner.doc.ts @@ -0,0 +1,11 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Spinner'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Spinner/examples/basic-spinner.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Spinner/examples/basic-spinner.example.html new file mode 100644 index 0000000000..a88e0b1710 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Spinner/examples/basic-spinner.example.html @@ -0,0 +1 @@ + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Stack/Stack.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Stack/Stack.doc.ts new file mode 100644 index 0000000000..2a32c5a9a8 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Stack/Stack.doc.ts @@ -0,0 +1,17 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Stack'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true}, + usefulFor: `- Arranging items in rows or columns when sections don't quite fit. +- Controlling the spacing between elements.`, + considerations: `- Stack has no default padding. Use \`base\` padding if you need default padding. +- When space is limited, Stack wraps its children to a new line.`, + bestPractices: `- Use smaller gaps for smaller elements and larger gaps for bigger ones. +- Keep spacing consistent across the app.`, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Stack/examples/basic-stack.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Stack/examples/basic-stack.example.html new file mode 100644 index 0000000000..afd3d97751 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Stack/examples/basic-stack.example.html @@ -0,0 +1,22 @@ + + + + + + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Switch/Switch.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Switch/Switch.doc.ts new file mode 100644 index 0000000000..d0c57ad989 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Switch/Switch.doc.ts @@ -0,0 +1,11 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Switch'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, events: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Switch/examples/basic-switch.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Switch/examples/basic-switch.example.html new file mode 100644 index 0000000000..1fd09d257f --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Switch/examples/basic-switch.example.html @@ -0,0 +1 @@ + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Text/Text.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Text/Text.doc.ts new file mode 100644 index 0000000000..9e96316466 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Text/Text.doc.ts @@ -0,0 +1,17 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Text'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true}, + usefulFor: `- Inline text elements such as labels or line errors. +- Applying different tones and text styles (e.g. \`strong\`, \`critical\`) within a \`s-paragraph\`.`, + bestPractices: `- Use plain, clear terms. +- Avoid jargon and technical language. +- Avoid using different terms for the same concept. +- Avoid duplicating content from the surrounding context.`, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Text/examples/basic-text.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Text/examples/basic-text.example.html new file mode 100644 index 0000000000..409ac9c83e --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Text/examples/basic-text.example.html @@ -0,0 +1,3 @@ + + All transactions are secure and encrypted. + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/TextArea/TextArea.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/TextArea/TextArea.doc.ts new file mode 100644 index 0000000000..f0acbdb15f --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/TextArea/TextArea.doc.ts @@ -0,0 +1,11 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/TextArea'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, events: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/TextArea/examples/basic-text-area.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/TextArea/examples/basic-text-area.example.html new file mode 100644 index 0000000000..ae8ec53faa --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/TextArea/examples/basic-text-area.example.html @@ -0,0 +1,5 @@ + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/TextField/TextField.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/TextField/TextField.doc.ts new file mode 100644 index 0000000000..d5638c2207 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/TextField/TextField.doc.ts @@ -0,0 +1,14 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/TextField'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, events: true, slots: true}, + bestPractices: `- Label text fields clearly so it's obvious what information to enter. +- Label optional fields as optional (e.g. "First name (optional)"). +- Do not pass \`required: true\` for optional fields.`, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/TextField/examples/basic-text-field.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/TextField/examples/basic-text-field.example.html new file mode 100644 index 0000000000..4b30091bea --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/TextField/examples/basic-text-field.example.html @@ -0,0 +1,4 @@ + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Time/Time.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Time/Time.doc.ts new file mode 100644 index 0000000000..d8b1838341 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Time/Time.doc.ts @@ -0,0 +1,16 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Time'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true}, + bestPractices: `- Use the Time component for all time values to keep formatting consistent. +- Show times in a clear, readable format. +- Consider 24-hour format for international audiences. +- Include timezone information when relevant. +- Use the Time component for time-related content to maintain clear semantics.`, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Time/examples/basic-time.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Time/examples/basic-time.example.html new file mode 100644 index 0000000000..5c88562a8a --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Time/examples/basic-time.example.html @@ -0,0 +1 @@ +October 15, 2023 diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Tooltip/Tooltip.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Tooltip/Tooltip.doc.ts new file mode 100644 index 0000000000..32a3fa8534 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Tooltip/Tooltip.doc.ts @@ -0,0 +1,11 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/Tooltip'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Tooltip/examples/basic-tooltip.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/Tooltip/examples/basic-tooltip.example.html new file mode 100644 index 0000000000..c5703d057d --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Tooltip/examples/basic-tooltip.example.html @@ -0,0 +1,9 @@ + + 2600 Portland Street SE + + + + + Curbside pickup is at the back of the warehouse. + + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/URLField/URLField.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/URLField/URLField.doc.ts new file mode 100644 index 0000000000..642200e136 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/URLField/URLField.doc.ts @@ -0,0 +1,11 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/URLField'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true, events: true, slots: true}, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/URLField/examples/basic-url-field.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/URLField/examples/basic-url-field.example.html new file mode 100644 index 0000000000..4feb7599a1 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/URLField/examples/basic-url-field.example.html @@ -0,0 +1 @@ + diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/UnorderedList/UnorderedList.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/UnorderedList/UnorderedList.doc.ts new file mode 100644 index 0000000000..9756c11565 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/UnorderedList/UnorderedList.doc.ts @@ -0,0 +1,21 @@ +import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +import sharedContent from '../../../../docs/shared/components/UnorderedList'; +import listItemSharedContent from '../../../../docs/shared/components/ListItem'; +import {createComponentDoc} from '../../../../docs/shared/component-definitions'; + +const data: ReferenceEntityTemplateSchema = createComponentDoc({ + ...sharedContent, + definitions: {properties: true}, + subcomponent: { + ...listItemSharedContent, + definitions: {properties: true}, + }, + bestPractices: `- Use \`s-unordered-list\` when you need to present a list of related items or options. +- Each item in the list should be wrapped in a \`s-list-item\` component. +- Keep list items concise and consistent in length when possible. +- Use \`s-unordered-list\` for navigation menus, feature lists, or any collection of related items. +- Consider using \`s-unordered-list\` when you want to present information in a clear, scannable format.`, +}); + +export default data; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/UnorderedList/examples/basic-unordered-list.example.html b/packages/ui-extensions/src/surfaces/customer-account/components/UnorderedList/examples/basic-unordered-list.example.html new file mode 100644 index 0000000000..397c4800f9 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/customer-account/components/UnorderedList/examples/basic-unordered-list.example.html @@ -0,0 +1,5 @@ + + Free shipping on orders over $50 + 30-day money-back guarantee + Secure payment processing + From 2a70864ccb162336be0c2d216b302e8b2968fb81 Mon Sep 17 00:00:00 2001 From: Michelle Vinci Date: Wed, 11 Mar 2026 10:10:43 -0700 Subject: [PATCH 2/2] Regenerate docs --- .../2026-04-rc/generated_docs_data.json | 8090 +++++++++++++++-- 1 file changed, 7272 insertions(+), 818 deletions(-) diff --git a/packages/ui-extensions/docs/surfaces/customer-account/generated/customer_account_ui_extensions/2026-04-rc/generated_docs_data.json b/packages/ui-extensions/docs/surfaces/customer-account/generated/customer_account_ui_extensions/2026-04-rc/generated_docs_data.json index 0f8ac511c5..a2dc5f2b04 100644 --- a/packages/ui-extensions/docs/surfaces/customer-account/generated/customer_account_ui_extensions/2026-04-rc/generated_docs_data.json +++ b/packages/ui-extensions/docs/surfaces/customer-account/generated/customer_account_ui_extensions/2026-04-rc/generated_docs_data.json @@ -64,7 +64,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "Indicates that the visitor information was validated and submitted." } ], @@ -86,7 +86,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "Indicates that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property." } ], @@ -416,7 +416,7 @@ "name": "Promise", "value": "Promise" }, - "value": "(\n visitorConsent: VisitorConsentChange,\n) => Promise" + "value": "export type ApplyTrackingConsentChangeType = (\n visitorConsent: VisitorConsentChange,\n) => Promise;" }, "VisitorConsentChange": { "filePath": "src/surfaces/customer-account/api/shared.ts", @@ -479,7 +479,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'changeVisitorConsent'", + "value": "\"changeVisitorConsent\"", "description": "" } ], @@ -575,7 +575,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "The type of the `TrackingConsentChangeResultSuccess` API." } ], @@ -597,7 +597,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "The type of the `TrackingConsentChangeResultError` API." } ], @@ -1070,7 +1070,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -1219,7 +1219,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'ok'", + "value": "\"ok\"", "description": "" }, { @@ -1241,7 +1241,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'error'", + "value": "\"error\"", "description": "", "isOptional": true }, @@ -1273,7 +1273,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'closed'", + "value": "\"closed\"", "description": "" } ], @@ -1438,7 +1438,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'ok'", + "value": "\"ok\"", "description": "" }, { @@ -1460,7 +1460,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'error'", + "value": "\"error\"", "description": "", "isOptional": true }, @@ -1492,7 +1492,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'closed'", + "value": "\"closed\"", "description": "" } ], @@ -1521,7 +1521,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'ok'", + "value": "\"ok\"", "description": "" }, { @@ -1543,7 +1543,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'error'", + "value": "\"error\"", "description": "", "isOptional": true }, @@ -1575,7 +1575,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'closed'", + "value": "\"closed\"", "description": "" } ], @@ -3139,7 +3139,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'code'", + "value": "\"code\"", "description": "The type of the code discount" } ], @@ -3168,7 +3168,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'automatic'", + "value": "\"automatic\"", "description": "The type of the automatic discount" } ], @@ -3197,7 +3197,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'custom'", + "value": "\"custom\"", "description": "The type of the custom discount" } ], @@ -3271,7 +3271,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'bundle'", + "value": "\"bundle\"", "description": "" } ], @@ -3367,7 +3367,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'variant'", + "value": "\"variant\"", "description": "" } ] @@ -5415,7 +5415,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "Indicates that the visitor information was validated and submitted." } ], @@ -5437,7 +5437,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "Indicates that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property." } ], @@ -5461,7 +5461,7 @@ "name": "Promise", "value": "Promise" }, - "value": "(\n visitorConsent: VisitorConsentChange,\n) => Promise" + "value": "export type ApplyTrackingConsentChangeType = (\n visitorConsent: VisitorConsentChange,\n) => Promise;" }, "VisitorConsentChange": { "filePath": "src/surfaces/customer-account/api/shared.ts", @@ -5524,7 +5524,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'changeVisitorConsent'", + "value": "\"changeVisitorConsent\"", "description": "" } ], @@ -5620,7 +5620,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "The type of the `TrackingConsentChangeResultSuccess` API." } ], @@ -5642,7 +5642,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "The type of the `TrackingConsentChangeResultError` API." } ], @@ -6118,7 +6118,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -6280,7 +6280,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'ok'", + "value": "\"ok\"", "description": "" }, { @@ -6302,7 +6302,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'error'", + "value": "\"error\"", "description": "", "isOptional": true }, @@ -6334,7 +6334,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'closed'", + "value": "\"closed\"", "description": "" } ], @@ -7660,7 +7660,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'code'", + "value": "\"code\"", "description": "The type of the code discount" } ], @@ -7689,7 +7689,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'automatic'", + "value": "\"automatic\"", "description": "The type of the automatic discount" } ], @@ -7718,7 +7718,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'custom'", + "value": "\"custom\"", "description": "The type of the custom discount" } ], @@ -7857,7 +7857,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -8015,7 +8015,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'bundle'", + "value": "\"bundle\"", "description": "" } ], @@ -8111,7 +8111,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'variant'", + "value": "\"variant\"", "description": "" } ] @@ -8639,7 +8639,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "Indicates that the visitor information was validated and submitted." } ], @@ -8661,7 +8661,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "Indicates that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property." } ], @@ -8685,7 +8685,7 @@ "name": "Promise", "value": "Promise" }, - "value": "(\n visitorConsent: VisitorConsentChange,\n) => Promise" + "value": "export type ApplyTrackingConsentChangeType = (\n visitorConsent: VisitorConsentChange,\n) => Promise;" }, "VisitorConsentChange": { "filePath": "src/surfaces/customer-account/api/shared.ts", @@ -8748,7 +8748,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'changeVisitorConsent'", + "value": "\"changeVisitorConsent\"", "description": "" } ], @@ -8844,7 +8844,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "The type of the `TrackingConsentChangeResultSuccess` API." } ], @@ -8866,7 +8866,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "The type of the `TrackingConsentChangeResultError` API." } ], @@ -9342,7 +9342,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -9504,7 +9504,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'ok'", + "value": "\"ok\"", "description": "" }, { @@ -9526,7 +9526,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'error'", + "value": "\"error\"", "description": "", "isOptional": true }, @@ -9558,7 +9558,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'closed'", + "value": "\"closed\"", "description": "" } ], @@ -9990,7 +9990,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "Indicates that the visitor information was validated and submitted." } ], @@ -10012,7 +10012,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "Indicates that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property." } ], @@ -10036,7 +10036,7 @@ "name": "Promise", "value": "Promise" }, - "value": "(\n visitorConsent: VisitorConsentChange,\n) => Promise" + "value": "export type ApplyTrackingConsentChangeType = (\n visitorConsent: VisitorConsentChange,\n) => Promise;" }, "VisitorConsentChange": { "filePath": "src/surfaces/customer-account/api/shared.ts", @@ -10099,7 +10099,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'changeVisitorConsent'", + "value": "\"changeVisitorConsent\"", "description": "" } ], @@ -10195,7 +10195,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "The type of the `TrackingConsentChangeResultSuccess` API." } ], @@ -10217,7 +10217,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "The type of the `TrackingConsentChangeResultError` API." } ], @@ -10693,7 +10693,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -10855,7 +10855,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'ok'", + "value": "\"ok\"", "description": "" }, { @@ -10877,7 +10877,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'error'", + "value": "\"error\"", "description": "", "isOptional": true }, @@ -10909,7 +10909,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'closed'", + "value": "\"closed\"", "description": "" } ], @@ -12234,7 +12234,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'code'", + "value": "\"code\"", "description": "The type of the code discount" } ], @@ -12263,7 +12263,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'automatic'", + "value": "\"automatic\"", "description": "The type of the automatic discount" } ], @@ -12292,7 +12292,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'custom'", + "value": "\"custom\"", "description": "The type of the custom discount" } ], @@ -12431,7 +12431,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -12589,7 +12589,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'bundle'", + "value": "\"bundle\"", "description": "" } ], @@ -12685,7 +12685,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'variant'", + "value": "\"variant\"", "description": "" } ] @@ -13213,7 +13213,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "Indicates that the visitor information was validated and submitted." } ], @@ -13235,7 +13235,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "Indicates that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property." } ], @@ -13259,7 +13259,7 @@ "name": "Promise", "value": "Promise" }, - "value": "(\n visitorConsent: VisitorConsentChange,\n) => Promise" + "value": "export type ApplyTrackingConsentChangeType = (\n visitorConsent: VisitorConsentChange,\n) => Promise;" }, "VisitorConsentChange": { "filePath": "src/surfaces/customer-account/api/shared.ts", @@ -13322,7 +13322,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'changeVisitorConsent'", + "value": "\"changeVisitorConsent\"", "description": "" } ], @@ -13418,7 +13418,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "The type of the `TrackingConsentChangeResultSuccess` API." } ], @@ -13440,7 +13440,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "The type of the `TrackingConsentChangeResultError` API." } ], @@ -13916,7 +13916,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -14078,7 +14078,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'ok'", + "value": "\"ok\"", "description": "" }, { @@ -14100,7 +14100,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'error'", + "value": "\"error\"", "description": "", "isOptional": true }, @@ -14132,7 +14132,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'closed'", + "value": "\"closed\"", "description": "" } ], @@ -15461,7 +15461,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'code'", + "value": "\"code\"", "description": "The type of the code discount" } ], @@ -15490,7 +15490,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'automatic'", + "value": "\"automatic\"", "description": "The type of the automatic discount" } ], @@ -15519,7 +15519,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'custom'", + "value": "\"custom\"", "description": "The type of the custom discount" } ], @@ -15658,7 +15658,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -15816,7 +15816,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'bundle'", + "value": "\"bundle\"", "description": "" } ], @@ -15912,7 +15912,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'variant'", + "value": "\"variant\"", "description": "" } ] @@ -16440,7 +16440,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "Indicates that the visitor information was validated and submitted." } ], @@ -16462,7 +16462,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "Indicates that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property." } ], @@ -16486,7 +16486,7 @@ "name": "Promise", "value": "Promise" }, - "value": "(\n visitorConsent: VisitorConsentChange,\n) => Promise" + "value": "export type ApplyTrackingConsentChangeType = (\n visitorConsent: VisitorConsentChange,\n) => Promise;" }, "VisitorConsentChange": { "filePath": "src/surfaces/customer-account/api/shared.ts", @@ -16549,7 +16549,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'changeVisitorConsent'", + "value": "\"changeVisitorConsent\"", "description": "" } ], @@ -16645,7 +16645,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "The type of the `TrackingConsentChangeResultSuccess` API." } ], @@ -16667,7 +16667,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "The type of the `TrackingConsentChangeResultError` API." } ], @@ -17143,7 +17143,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -17305,7 +17305,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'ok'", + "value": "\"ok\"", "description": "" }, { @@ -17327,7 +17327,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'error'", + "value": "\"error\"", "description": "", "isOptional": true }, @@ -17359,7 +17359,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'closed'", + "value": "\"closed\"", "description": "" } ], @@ -17844,7 +17844,7 @@ "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'code'", + "value": "\"code\"", "description": "The type of the code discount" } ], @@ -17873,7 +17873,7 @@ "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'automatic'", + "value": "\"automatic\"", "description": "The type of the automatic discount" } ], @@ -17902,7 +17902,7 @@ "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'custom'", + "value": "\"custom\"", "description": "The type of the custom discount" } ], @@ -17976,7 +17976,7 @@ "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'bundle'", + "value": "\"bundle\"", "description": "" } ], @@ -18072,7 +18072,7 @@ "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'variant'", + "value": "\"variant\"", "description": "" } ] @@ -19281,7 +19281,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'code'", + "value": "\"code\"", "description": "The type of the code discount" } ], @@ -19310,7 +19310,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'automatic'", + "value": "\"automatic\"", "description": "The type of the automatic discount" } ], @@ -19339,7 +19339,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'custom'", + "value": "\"custom\"", "description": "The type of the custom discount" } ], @@ -19478,7 +19478,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -19636,7 +19636,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'bundle'", + "value": "\"bundle\"", "description": "" } ], @@ -19732,7 +19732,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'variant'", + "value": "\"variant\"", "description": "" } ] @@ -20260,7 +20260,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "Indicates that the visitor information was validated and submitted." } ], @@ -20282,7 +20282,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "Indicates that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property." } ], @@ -20306,7 +20306,7 @@ "name": "Promise", "value": "Promise" }, - "value": "(\n visitorConsent: VisitorConsentChange,\n) => Promise" + "value": "export type ApplyTrackingConsentChangeType = (\n visitorConsent: VisitorConsentChange,\n) => Promise;" }, "VisitorConsentChange": { "filePath": "src/surfaces/customer-account/api/shared.ts", @@ -20369,7 +20369,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'changeVisitorConsent'", + "value": "\"changeVisitorConsent\"", "description": "" } ], @@ -20465,7 +20465,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "The type of the `TrackingConsentChangeResultSuccess` API." } ], @@ -20487,7 +20487,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "The type of the `TrackingConsentChangeResultError` API." } ], @@ -20963,7 +20963,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -21125,7 +21125,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'ok'", + "value": "\"ok\"", "description": "" }, { @@ -21147,7 +21147,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'error'", + "value": "\"error\"", "description": "", "isOptional": true }, @@ -21179,7 +21179,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'closed'", + "value": "\"closed\"", "description": "" } ], @@ -22501,7 +22501,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'code'", + "value": "\"code\"", "description": "The type of the code discount" } ], @@ -22530,7 +22530,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'automatic'", + "value": "\"automatic\"", "description": "The type of the automatic discount" } ], @@ -22559,7 +22559,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'custom'", + "value": "\"custom\"", "description": "The type of the custom discount" } ], @@ -22698,7 +22698,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -22856,7 +22856,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'bundle'", + "value": "\"bundle\"", "description": "" } ], @@ -22952,7 +22952,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'variant'", + "value": "\"variant\"", "description": "" } ] @@ -23480,7 +23480,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "Indicates that the visitor information was validated and submitted." } ], @@ -23502,7 +23502,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "Indicates that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property." } ], @@ -23526,7 +23526,7 @@ "name": "Promise", "value": "Promise" }, - "value": "(\n visitorConsent: VisitorConsentChange,\n) => Promise" + "value": "export type ApplyTrackingConsentChangeType = (\n visitorConsent: VisitorConsentChange,\n) => Promise;" }, "VisitorConsentChange": { "filePath": "src/surfaces/customer-account/api/shared.ts", @@ -23589,7 +23589,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'changeVisitorConsent'", + "value": "\"changeVisitorConsent\"", "description": "" } ], @@ -23685,7 +23685,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "The type of the `TrackingConsentChangeResultSuccess` API." } ], @@ -23707,7 +23707,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "The type of the `TrackingConsentChangeResultError` API." } ], @@ -24183,7 +24183,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -24345,7 +24345,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'ok'", + "value": "\"ok\"", "description": "" }, { @@ -24367,7 +24367,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'error'", + "value": "\"error\"", "description": "", "isOptional": true }, @@ -24399,7 +24399,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'closed'", + "value": "\"closed\"", "description": "" } ], @@ -25721,7 +25721,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'code'", + "value": "\"code\"", "description": "The type of the code discount" } ], @@ -25750,7 +25750,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'automatic'", + "value": "\"automatic\"", "description": "The type of the automatic discount" } ], @@ -25779,7 +25779,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'custom'", + "value": "\"custom\"", "description": "The type of the custom discount" } ], @@ -25918,7 +25918,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -26076,7 +26076,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'bundle'", + "value": "\"bundle\"", "description": "" } ], @@ -26172,7 +26172,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'variant'", + "value": "\"variant\"", "description": "" } ] @@ -26700,7 +26700,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "Indicates that the visitor information was validated and submitted." } ], @@ -26722,7 +26722,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "Indicates that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property." } ], @@ -26746,7 +26746,7 @@ "name": "Promise", "value": "Promise" }, - "value": "(\n visitorConsent: VisitorConsentChange,\n) => Promise" + "value": "export type ApplyTrackingConsentChangeType = (\n visitorConsent: VisitorConsentChange,\n) => Promise;" }, "VisitorConsentChange": { "filePath": "src/surfaces/customer-account/api/shared.ts", @@ -26809,7 +26809,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'changeVisitorConsent'", + "value": "\"changeVisitorConsent\"", "description": "" } ], @@ -26905,7 +26905,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "The type of the `TrackingConsentChangeResultSuccess` API." } ], @@ -26927,7 +26927,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "The type of the `TrackingConsentChangeResultError` API." } ], @@ -27403,7 +27403,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -27565,7 +27565,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'ok'", + "value": "\"ok\"", "description": "" }, { @@ -27587,7 +27587,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'error'", + "value": "\"error\"", "description": "", "isOptional": true }, @@ -27619,7 +27619,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'closed'", + "value": "\"closed\"", "description": "" } ], @@ -28941,7 +28941,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'code'", + "value": "\"code\"", "description": "The type of the code discount" } ], @@ -28970,7 +28970,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'automatic'", + "value": "\"automatic\"", "description": "The type of the automatic discount" } ], @@ -28999,7 +28999,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'custom'", + "value": "\"custom\"", "description": "The type of the custom discount" } ], @@ -29138,7 +29138,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -29296,7 +29296,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'bundle'", + "value": "\"bundle\"", "description": "" } ], @@ -29392,7 +29392,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'variant'", + "value": "\"variant\"", "description": "" } ] @@ -29920,7 +29920,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "Indicates that the visitor information was validated and submitted." } ], @@ -29942,7 +29942,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "Indicates that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property." } ], @@ -29966,7 +29966,7 @@ "name": "Promise", "value": "Promise" }, - "value": "(\n visitorConsent: VisitorConsentChange,\n) => Promise" + "value": "export type ApplyTrackingConsentChangeType = (\n visitorConsent: VisitorConsentChange,\n) => Promise;" }, "VisitorConsentChange": { "filePath": "src/surfaces/customer-account/api/shared.ts", @@ -30029,7 +30029,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'changeVisitorConsent'", + "value": "\"changeVisitorConsent\"", "description": "" } ], @@ -30125,7 +30125,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "The type of the `TrackingConsentChangeResultSuccess` API." } ], @@ -30147,7 +30147,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "The type of the `TrackingConsentChangeResultError` API." } ], @@ -30623,7 +30623,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -30785,7 +30785,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'ok'", + "value": "\"ok\"", "description": "" }, { @@ -30807,7 +30807,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'error'", + "value": "\"error\"", "description": "", "isOptional": true }, @@ -30839,7 +30839,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'closed'", + "value": "\"closed\"", "description": "" } ], @@ -32183,7 +32183,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'code'", + "value": "\"code\"", "description": "The type of the code discount" } ], @@ -32212,7 +32212,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'automatic'", + "value": "\"automatic\"", "description": "The type of the automatic discount" } ], @@ -32241,7 +32241,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'custom'", + "value": "\"custom\"", "description": "The type of the custom discount" } ], @@ -32380,7 +32380,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -32538,7 +32538,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'bundle'", + "value": "\"bundle\"", "description": "" } ], @@ -32634,7 +32634,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'variant'", + "value": "\"variant\"", "description": "" } ] @@ -33162,7 +33162,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "Indicates that the visitor information was validated and submitted." } ], @@ -33184,7 +33184,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "Indicates that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property." } ], @@ -33208,7 +33208,7 @@ "name": "Promise", "value": "Promise" }, - "value": "(\n visitorConsent: VisitorConsentChange,\n) => Promise" + "value": "export type ApplyTrackingConsentChangeType = (\n visitorConsent: VisitorConsentChange,\n) => Promise;" }, "VisitorConsentChange": { "filePath": "src/surfaces/customer-account/api/shared.ts", @@ -33271,7 +33271,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'changeVisitorConsent'", + "value": "\"changeVisitorConsent\"", "description": "" } ], @@ -33367,7 +33367,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "The type of the `TrackingConsentChangeResultSuccess` API." } ], @@ -33389,7 +33389,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "The type of the `TrackingConsentChangeResultError` API." } ], @@ -33865,7 +33865,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -34027,7 +34027,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'ok'", + "value": "\"ok\"", "description": "" }, { @@ -34049,7 +34049,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'error'", + "value": "\"error\"", "description": "", "isOptional": true }, @@ -34081,7 +34081,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'closed'", + "value": "\"closed\"", "description": "" } ], @@ -35403,7 +35403,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'code'", + "value": "\"code\"", "description": "The type of the code discount" } ], @@ -35432,7 +35432,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'automatic'", + "value": "\"automatic\"", "description": "The type of the automatic discount" } ], @@ -35461,7 +35461,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'custom'", + "value": "\"custom\"", "description": "The type of the custom discount" } ], @@ -35600,7 +35600,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -35758,7 +35758,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'bundle'", + "value": "\"bundle\"", "description": "" } ], @@ -35854,7 +35854,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'variant'", + "value": "\"variant\"", "description": "" } ] @@ -36382,7 +36382,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "Indicates that the visitor information was validated and submitted." } ], @@ -36404,7 +36404,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "Indicates that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property." } ], @@ -36428,7 +36428,7 @@ "name": "Promise", "value": "Promise" }, - "value": "(\n visitorConsent: VisitorConsentChange,\n) => Promise" + "value": "export type ApplyTrackingConsentChangeType = (\n visitorConsent: VisitorConsentChange,\n) => Promise;" }, "VisitorConsentChange": { "filePath": "src/surfaces/customer-account/api/shared.ts", @@ -36491,7 +36491,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'changeVisitorConsent'", + "value": "\"changeVisitorConsent\"", "description": "" } ], @@ -36587,7 +36587,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "The type of the `TrackingConsentChangeResultSuccess` API." } ], @@ -36609,7 +36609,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "The type of the `TrackingConsentChangeResultError` API." } ], @@ -37085,7 +37085,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -37247,7 +37247,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'ok'", + "value": "\"ok\"", "description": "" }, { @@ -37269,7 +37269,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'error'", + "value": "\"error\"", "description": "", "isOptional": true }, @@ -37301,7 +37301,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'closed'", + "value": "\"closed\"", "description": "" } ], @@ -38623,7 +38623,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'code'", + "value": "\"code\"", "description": "The type of the code discount" } ], @@ -38652,7 +38652,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'automatic'", + "value": "\"automatic\"", "description": "The type of the automatic discount" } ], @@ -38681,7 +38681,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'custom'", + "value": "\"custom\"", "description": "The type of the custom discount" } ], @@ -38820,7 +38820,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -38978,7 +38978,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'bundle'", + "value": "\"bundle\"", "description": "" } ], @@ -39074,7 +39074,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'variant'", + "value": "\"variant\"", "description": "" } ] @@ -39602,7 +39602,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "Indicates that the visitor information was validated and submitted." } ], @@ -39624,7 +39624,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "Indicates that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property." } ], @@ -39648,7 +39648,7 @@ "name": "Promise", "value": "Promise" }, - "value": "(\n visitorConsent: VisitorConsentChange,\n) => Promise" + "value": "export type ApplyTrackingConsentChangeType = (\n visitorConsent: VisitorConsentChange,\n) => Promise;" }, "VisitorConsentChange": { "filePath": "src/surfaces/customer-account/api/shared.ts", @@ -39711,7 +39711,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'changeVisitorConsent'", + "value": "\"changeVisitorConsent\"", "description": "" } ], @@ -39807,7 +39807,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "The type of the `TrackingConsentChangeResultSuccess` API." } ], @@ -39829,7 +39829,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "The type of the `TrackingConsentChangeResultError` API." } ], @@ -40305,7 +40305,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -40467,7 +40467,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'ok'", + "value": "\"ok\"", "description": "" }, { @@ -40489,7 +40489,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'error'", + "value": "\"error\"", "description": "", "isOptional": true }, @@ -40521,7 +40521,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'closed'", + "value": "\"closed\"", "description": "" } ], @@ -40993,7 +40993,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "Indicates that the visitor information was validated and submitted." } ], @@ -41015,7 +41015,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "Indicates that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property." } ], @@ -41039,7 +41039,7 @@ "name": "Promise", "value": "Promise" }, - "value": "(\n visitorConsent: VisitorConsentChange,\n) => Promise" + "value": "export type ApplyTrackingConsentChangeType = (\n visitorConsent: VisitorConsentChange,\n) => Promise;" }, "VisitorConsentChange": { "filePath": "src/surfaces/customer-account/api/shared.ts", @@ -41102,7 +41102,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'changeVisitorConsent'", + "value": "\"changeVisitorConsent\"", "description": "" } ], @@ -41198,7 +41198,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "The type of the `TrackingConsentChangeResultSuccess` API." } ], @@ -41220,7 +41220,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "The type of the `TrackingConsentChangeResultError` API." } ], @@ -41696,7 +41696,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -41858,7 +41858,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'ok'", + "value": "\"ok\"", "description": "" }, { @@ -41880,7 +41880,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'error'", + "value": "\"error\"", "description": "", "isOptional": true }, @@ -41912,7 +41912,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'closed'", + "value": "\"closed\"", "description": "" } ], @@ -42173,6 +42173,14 @@ "value": "string", "description": "Destination URL to link to.\n\nE.g. `extension:/` to navigate to the Full-page extension." }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "href", + "value": "string", + "description": "The URL to link to.\n\n- If set, it will navigate to the location specified by `href` after executing the `onClick` callback.\n- If a `commandFor` is set, the `command` will be executed instead of the navigation.", + "isOptional": true + }, { "filePath": "src/surfaces/customer-account/api/docs.ts", "syntaxKind": "PropertySignature", @@ -42459,7 +42467,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "Indicates that the visitor information was validated and submitted." } ], @@ -42481,7 +42489,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "Indicates that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property." } ], @@ -42505,7 +42513,7 @@ "name": "Promise", "value": "Promise" }, - "value": "(\n visitorConsent: VisitorConsentChange,\n) => Promise" + "value": "export type ApplyTrackingConsentChangeType = (\n visitorConsent: VisitorConsentChange,\n) => Promise;" }, "VisitorConsentChange": { "filePath": "src/surfaces/customer-account/api/shared.ts", @@ -42568,7 +42576,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'changeVisitorConsent'", + "value": "\"changeVisitorConsent\"", "description": "" } ], @@ -42664,7 +42672,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "The type of the `TrackingConsentChangeResultSuccess` API." } ], @@ -42686,7 +42694,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "The type of the `TrackingConsentChangeResultError` API." } ], @@ -43162,7 +43170,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -43324,7 +43332,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'ok'", + "value": "\"ok\"", "description": "" }, { @@ -43346,7 +43354,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'error'", + "value": "\"error\"", "description": "", "isOptional": true }, @@ -43378,7 +43386,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'closed'", + "value": "\"closed\"", "description": "" } ], @@ -44687,7 +44695,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'code'", + "value": "\"code\"", "description": "The type of the code discount" } ], @@ -44716,7 +44724,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'automatic'", + "value": "\"automatic\"", "description": "The type of the automatic discount" } ], @@ -44745,7 +44753,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'custom'", + "value": "\"custom\"", "description": "The type of the custom discount" } ], @@ -44884,7 +44892,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -45042,7 +45050,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'bundle'", + "value": "\"bundle\"", "description": "" } ], @@ -45138,7 +45146,7 @@ "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'variant'", + "value": "\"variant\"", "description": "" } ] @@ -45666,7 +45674,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "Indicates that the visitor information was validated and submitted." } ], @@ -45688,7 +45696,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "Indicates that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property." } ], @@ -45712,7 +45720,7 @@ "name": "Promise", "value": "Promise" }, - "value": "(\n visitorConsent: VisitorConsentChange,\n) => Promise" + "value": "export type ApplyTrackingConsentChangeType = (\n visitorConsent: VisitorConsentChange,\n) => Promise;" }, "VisitorConsentChange": { "filePath": "src/surfaces/customer-account/api/shared.ts", @@ -45775,7 +45783,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'changeVisitorConsent'", + "value": "\"changeVisitorConsent\"", "description": "" } ], @@ -45871,7 +45879,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "The type of the `TrackingConsentChangeResultSuccess` API." } ], @@ -45893,7 +45901,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "The type of the `TrackingConsentChangeResultError` API." } ], @@ -46369,7 +46377,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -46531,7 +46539,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'ok'", + "value": "\"ok\"", "description": "" }, { @@ -46553,7 +46561,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'error'", + "value": "\"error\"", "description": "", "isOptional": true }, @@ -46585,7 +46593,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'closed'", + "value": "\"closed\"", "description": "" } ], @@ -46996,7 +47004,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "Indicates that the visitor information was validated and submitted." } ], @@ -47018,7 +47026,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "Indicates that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property." } ], @@ -47042,7 +47050,7 @@ "name": "Promise", "value": "Promise" }, - "value": "(\n visitorConsent: VisitorConsentChange,\n) => Promise" + "value": "export type ApplyTrackingConsentChangeType = (\n visitorConsent: VisitorConsentChange,\n) => Promise;" }, "VisitorConsentChange": { "filePath": "src/surfaces/customer-account/api/shared.ts", @@ -47105,7 +47113,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'changeVisitorConsent'", + "value": "\"changeVisitorConsent\"", "description": "" } ], @@ -47201,7 +47209,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "The type of the `TrackingConsentChangeResultSuccess` API." } ], @@ -47223,7 +47231,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "The type of the `TrackingConsentChangeResultError` API." } ], @@ -47699,7 +47707,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -47861,7 +47869,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'ok'", + "value": "\"ok\"", "description": "" }, { @@ -47883,7 +47891,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'error'", + "value": "\"error\"", "description": "", "isOptional": true }, @@ -47915,7 +47923,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'closed'", + "value": "\"closed\"", "description": "" } ], @@ -48338,7 +48346,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "Indicates that the visitor information was validated and submitted." } ], @@ -48360,7 +48368,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "Indicates that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property." } ], @@ -48384,7 +48392,7 @@ "name": "Promise", "value": "Promise" }, - "value": "(\n visitorConsent: VisitorConsentChange,\n) => Promise" + "value": "export type ApplyTrackingConsentChangeType = (\n visitorConsent: VisitorConsentChange,\n) => Promise;" }, "VisitorConsentChange": { "filePath": "src/surfaces/customer-account/api/shared.ts", @@ -48447,7 +48455,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'changeVisitorConsent'", + "value": "\"changeVisitorConsent\"", "description": "" } ], @@ -48543,7 +48551,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "The type of the `TrackingConsentChangeResultSuccess` API." } ], @@ -48565,7 +48573,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "The type of the `TrackingConsentChangeResultError` API." } ], @@ -49041,7 +49049,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -49203,7 +49211,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'ok'", + "value": "\"ok\"", "description": "" }, { @@ -49225,7 +49233,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'error'", + "value": "\"error\"", "description": "", "isOptional": true }, @@ -49257,7 +49265,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'closed'", + "value": "\"closed\"", "description": "" } ], @@ -49684,7 +49692,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "Indicates that the visitor information was validated and submitted." } ], @@ -49706,7 +49714,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "Indicates that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property." } ], @@ -49730,7 +49738,7 @@ "name": "Promise", "value": "Promise" }, - "value": "(\n visitorConsent: VisitorConsentChange,\n) => Promise" + "value": "export type ApplyTrackingConsentChangeType = (\n visitorConsent: VisitorConsentChange,\n) => Promise;" }, "VisitorConsentChange": { "filePath": "src/surfaces/customer-account/api/shared.ts", @@ -49793,7 +49801,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'changeVisitorConsent'", + "value": "\"changeVisitorConsent\"", "description": "" } ], @@ -49889,7 +49897,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "The type of the `TrackingConsentChangeResultSuccess` API." } ], @@ -49911,7 +49919,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "The type of the `TrackingConsentChangeResultError` API." } ], @@ -50387,7 +50395,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -50549,7 +50557,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'ok'", + "value": "\"ok\"", "description": "" }, { @@ -50571,7 +50579,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'error'", + "value": "\"error\"", "description": "", "isOptional": true }, @@ -50603,7 +50611,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'closed'", + "value": "\"closed\"", "description": "" } ], @@ -51033,7 +51041,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "Indicates that the visitor information was validated and submitted." } ], @@ -51055,7 +51063,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "Indicates that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property." } ], @@ -51079,7 +51087,7 @@ "name": "Promise", "value": "Promise" }, - "value": "(\n visitorConsent: VisitorConsentChange,\n) => Promise" + "value": "export type ApplyTrackingConsentChangeType = (\n visitorConsent: VisitorConsentChange,\n) => Promise;" }, "VisitorConsentChange": { "filePath": "src/surfaces/customer-account/api/shared.ts", @@ -51142,7 +51150,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'changeVisitorConsent'", + "value": "\"changeVisitorConsent\"", "description": "" } ], @@ -51238,7 +51246,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "The type of the `TrackingConsentChangeResultSuccess` API." } ], @@ -51260,7 +51268,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "The type of the `TrackingConsentChangeResultError` API." } ], @@ -51736,7 +51744,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -51898,7 +51906,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'ok'", + "value": "\"ok\"", "description": "" }, { @@ -51920,7 +51928,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'error'", + "value": "\"error\"", "description": "", "isOptional": true }, @@ -51952,7 +51960,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'closed'", + "value": "\"closed\"", "description": "" } ], @@ -52375,7 +52383,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "Indicates that the visitor information was validated and submitted." } ], @@ -52397,7 +52405,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "Indicates that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property." } ], @@ -52421,7 +52429,7 @@ "name": "Promise", "value": "Promise" }, - "value": "(\n visitorConsent: VisitorConsentChange,\n) => Promise" + "value": "export type ApplyTrackingConsentChangeType = (\n visitorConsent: VisitorConsentChange,\n) => Promise;" }, "VisitorConsentChange": { "filePath": "src/surfaces/customer-account/api/shared.ts", @@ -52484,7 +52492,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'changeVisitorConsent'", + "value": "\"changeVisitorConsent\"", "description": "" } ], @@ -52580,7 +52588,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "The type of the `TrackingConsentChangeResultSuccess` API." } ], @@ -52602,7 +52610,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "The type of the `TrackingConsentChangeResultError` API." } ], @@ -53078,7 +53086,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -53240,7 +53248,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'ok'", + "value": "\"ok\"", "description": "" }, { @@ -53262,7 +53270,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'error'", + "value": "\"error\"", "description": "", "isOptional": true }, @@ -53294,7 +53302,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'closed'", + "value": "\"closed\"", "description": "" } ], @@ -53739,7 +53747,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "Indicates that the visitor information was validated and submitted." } ], @@ -53761,7 +53769,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "Indicates that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property." } ], @@ -53785,7 +53793,7 @@ "name": "Promise", "value": "Promise" }, - "value": "(\n visitorConsent: VisitorConsentChange,\n) => Promise" + "value": "export type ApplyTrackingConsentChangeType = (\n visitorConsent: VisitorConsentChange,\n) => Promise;" }, "VisitorConsentChange": { "filePath": "src/surfaces/customer-account/api/shared.ts", @@ -53848,7 +53856,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'changeVisitorConsent'", + "value": "\"changeVisitorConsent\"", "description": "" } ], @@ -53944,7 +53952,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "The type of the `TrackingConsentChangeResultSuccess` API." } ], @@ -53966,7 +53974,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "The type of the `TrackingConsentChangeResultError` API." } ], @@ -54442,7 +54450,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -54604,7 +54612,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'ok'", + "value": "\"ok\"", "description": "" }, { @@ -54626,7 +54634,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'error'", + "value": "\"error\"", "description": "", "isOptional": true }, @@ -54658,7 +54666,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'closed'", + "value": "\"closed\"", "description": "" } ], @@ -55103,7 +55111,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "Indicates that the visitor information was validated and submitted." } ], @@ -55125,7 +55133,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "Indicates that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property." } ], @@ -55149,7 +55157,7 @@ "name": "Promise", "value": "Promise" }, - "value": "(\n visitorConsent: VisitorConsentChange,\n) => Promise" + "value": "export type ApplyTrackingConsentChangeType = (\n visitorConsent: VisitorConsentChange,\n) => Promise;" }, "VisitorConsentChange": { "filePath": "src/surfaces/customer-account/api/shared.ts", @@ -55212,7 +55220,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'changeVisitorConsent'", + "value": "\"changeVisitorConsent\"", "description": "" } ], @@ -55308,7 +55316,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "The type of the `TrackingConsentChangeResultSuccess` API." } ], @@ -55330,7 +55338,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "The type of the `TrackingConsentChangeResultError` API." } ], @@ -55806,7 +55814,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -55968,7 +55976,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'ok'", + "value": "\"ok\"", "description": "" }, { @@ -55990,7 +55998,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'error'", + "value": "\"error\"", "description": "", "isOptional": true }, @@ -56022,7 +56030,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'closed'", + "value": "\"closed\"", "description": "" } ], @@ -56467,7 +56475,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "Indicates that the visitor information was validated and submitted." } ], @@ -56489,7 +56497,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "Indicates that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property." } ], @@ -56513,7 +56521,7 @@ "name": "Promise", "value": "Promise" }, - "value": "(\n visitorConsent: VisitorConsentChange,\n) => Promise" + "value": "export type ApplyTrackingConsentChangeType = (\n visitorConsent: VisitorConsentChange,\n) => Promise;" }, "VisitorConsentChange": { "filePath": "src/surfaces/customer-account/api/shared.ts", @@ -56576,7 +56584,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'changeVisitorConsent'", + "value": "\"changeVisitorConsent\"", "description": "" } ], @@ -56672,7 +56680,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'success'", + "value": "\"success\"", "description": "The type of the `TrackingConsentChangeResultSuccess` API." } ], @@ -56694,7 +56702,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'error'", + "value": "\"error\"", "description": "The type of the `TrackingConsentChangeResultError` API." } ], @@ -57170,7 +57178,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'checkout'", + "value": "\"checkout\"", "description": "Indicates whether the extension is rendering in the checkout editor." } ], @@ -57332,7 +57340,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'ok'", + "value": "\"ok\"", "description": "" }, { @@ -57354,7 +57362,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'error'", + "value": "\"error\"", "description": "", "isOptional": true }, @@ -57386,7 +57394,7 @@ "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "code", - "value": "'closed'", + "value": "\"closed\"", "description": "" } ], @@ -57608,6 +57616,185 @@ ], "type": "Target" }, + { + "name": "Abbreviation", + "description": "Displays abbreviated text or acronyms, revealing their full meaning or additional context through a tooltip on hover or focus. Use to clarify shortened terms, initialisms, or technical language without interrupting the reading flow.", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "abbreviation-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Typography and content", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "AbbreviationElementProps", + "typeDefinitions": { + "AbbreviationElementProps": { + "filePath": "src/surfaces/checkout/components/Abbreviation.ts", + "name": "AbbreviationElementProps", + "description": "", + "members": [], + "value": "export interface AbbreviationElementProps extends Pick {\n}" + } + } + } + ], + "defaultExample": { + "image": "abbreviation-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-abbreviation title=\"United States Dollar\">USD</s-abbreviation>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Announcement", + "description": "The Announcement component provides a less disruptive alternative to auto-open modals for capturing user attention. It provides a standardized way to engage users without being too intrusive.", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "announcement-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Feedback and status indicators", + "definitions": [ + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "AnnouncementElementEvents", + "typeDefinitions": { + "AnnouncementElementEvents": { + "filePath": "src/surfaces/checkout/components/Announcement.ts", + "name": "AnnouncementElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Announcement.ts", + "syntaxKind": "PropertySignature", + "name": "aftertoggle", + "value": "CallbackEventListener", + "description": "Callback fired when the element state changes **after** any animations have finished.\n\n- If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Announcement.ts", + "syntaxKind": "PropertySignature", + "name": "dismiss", + "value": "CallbackEventListener", + "description": "Callback fired when the announcement is dismissed by the user (either via the built-in dismiss button or programmatically).", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Announcement.ts", + "syntaxKind": "PropertySignature", + "name": "toggle", + "value": "CallbackEventListener", + "description": "Callback straight after the element state changes.\n\n- If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element is transitioning from showing to hidden, then `oldState` property will be set to `open` and the `newState` will be `closed`.", + "isOptional": true + } + ], + "value": "export interface AnnouncementElementEvents {\n /**\n * Callback fired when the element state changes **after** any animations have finished.\n *\n * - If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the\n * `newState` property will be set to `open`.\n * - If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the\n * `newState` will be `closed`.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState\n * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState\n */\n aftertoggle?: CallbackEventListener;\n /**\n * Callback fired when the announcement is dismissed by the user\n * (either via the built-in dismiss button or programmatically).\n */\n dismiss?: CallbackEventListener;\n /**\n * Callback straight after the element state changes.\n *\n * - If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the\n * `newState` property will be set to `open`.\n * - If the element is transitioning from showing to hidden, then `oldState` property will be set to `open` and the\n * `newState` will be `closed`.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event\n * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState\n * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState\n */\n toggle?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/Announcement.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/Announcement.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + }, + "ToggleArgumentsEvent": { + "filePath": "src/surfaces/checkout/components/Announcement.ts", + "name": "ToggleArgumentsEvent", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Announcement.ts", + "syntaxKind": "PropertySignature", + "name": "newState", + "value": "ToggleState", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Announcement.ts", + "syntaxKind": "PropertySignature", + "name": "oldState", + "value": "ToggleState", + "description": "", + "isOptional": true + } + ], + "value": "export interface ToggleArgumentsEvent {\n oldState?: ToggleState;\n newState?: ToggleState;\n}" + }, + "ToggleState": { + "filePath": "src/surfaces/checkout/components/Announcement.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ToggleState", + "value": "'open' | 'closed'", + "description": "" + } + } + }, + { + "title": "Methods", + "description": "Learn more about [component methods](/docs/api/checkout-ui-extensions/latest/using-polaris-components#methods).", + "type": "AnnouncementElementMethods", + "typeDefinitions": { + "AnnouncementElementMethods": { + "filePath": "src/surfaces/checkout/components/Announcement.ts", + "name": "AnnouncementElementMethods", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Announcement.ts", + "syntaxKind": "PropertySignature", + "name": "dismiss", + "value": "() => void", + "description": "" + } + ], + "value": "export interface AnnouncementElementMethods {\n dismiss: AnnouncementMethods['dismiss'];\n}" + } + } + } + ], + "defaultExample": { + "image": "announcement-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-announcement>\n <s-stack direction=\"inline\" gap=\"base\">\n <s-text>Check our latest offers</s-text>\n <s-link commandFor=\"modal\" command=\"--show\"> Fill out the survey </s-link>\n </s-stack>\n <s-modal id=\"modal\" heading=\"Tell us about your shopping experience\">\n <s-stack gap=\"base\">\n <s-text>We'd love to hear about your shopping experience</s-text>\n <s-text-area\n rows=\"4\"\n label=\"How can we make your shopping experience better?\"\n ></s-text-area>\n <s-button>Submit</s-button>\n </s-stack>\n </s-modal>\n</s-announcement>\n", + "language": "html" + } + ] + } + }, + "subSections": [ + { + "type": "Generic", + "anchorLink": "best-practices", + "title": "Best Practices", + "sectionContent": "- Prioritize the default state: The most effective use of the announcement bar is when content is short enough to display entirely in its default state, with no need for expansion. This provides the best user experience.\n- Handle content truncation: The component has a strict maximum height. Content that exceeds the expanded state's height will be cut off with no scrolling capability. Ensure your application's logic handles excessively long content gracefully to prevent truncation.\n- Provide a modal alternative: If your application needs to display more than a few lines of content, avoid cramming it into the announcement bar. Instead, use the bar as a teaser that links to a modal. This is the recommended pattern for displaying surveys, detailed offers, or other longer-form content." + } + ] + }, { "name": "Avatar", "description": "Avatar component is used to show a thumbnail representation of an individual or business in the interface. It can be a graphical representation or visual depiction, such as an image, initials, or an icon.", @@ -57656,7 +57843,7 @@ "filePath": "src/surfaces/customer-account/components.ts", "syntaxKind": "PropertySignature", "name": "size", - "value": "'small' | 'large' | 'base' | 'small-200' | 'large-200'", + "value": "Extract<\n SizeKeyword,\n 'small-200' | 'small' | 'base' | 'large' | 'large-200'\n >", "description": "Size of the avatar.", "isOptional": true, "defaultValue": "'base'" @@ -57702,35 +57889,414 @@ "isOptional": true } ] + } + } + } + ], + "category": "Polaris web components", + "subCategory": "Media and visuals", + "defaultExample": { + "image": "avatar-default.png", + "altText": "An example of the Avatar component shows the initials of the user.", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-avatar\n alt=\"Avery Brown\"\n initials=\"AB\"\n></s-avatar>", + "language": "jsx" + } + ] + } + }, + "subSections": [ + { + "type": "Generic", + "anchorLink": "best-practices", + "title": "Best practices", + "sectionContent": "\nUse these best practices to deliver a clear and accessible experience in your extensions.\n\n### Show initials by default\n\nWhen no first or last name is provided, display the placeholder icon. If either name exists, show one or two initials.\n\n### Choose an appropriate size\n\nSelect a size based on context: \n- small‑200 (21×21) for tight tables or lists\n- small (26×26) when slightly larger is needed\n- base (32×32) as the default\n- large (39×39) when the avatar is a focal point (for example, a customer card)\n- large‑200 (47×47) when extra emphasis is required\n\n### Provide descriptive alt text\n\nWrite alt text that meaningfully describes the avatar so assistive technologies can convey the same context.\n\n### Keep sizes consistent on a page\n\nUse the same style and size for multiple avatars in one view to create a unified visual pattern and avoid mixing sizes.\n " + } + ], + "related": [] + }, + { + "name": "Badge", + "description": "The badge component displays status information or indicates completed actions through compact visual indicators. Use badge to communicate object states, order statuses, or system-generated classifications that help users quickly understand item conditions.\n\nBadges support multiple tones and sizes, with optional icons to reinforce status meaning and improve scannability in lists and tables. For user-created labels, categories, or tags, use [chip](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/typography-and-content/chip) instead.", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "badge-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Feedback and status indicators", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "BadgeElementProps", + "typeDefinitions": { + "BadgeElementProps": { + "filePath": "src/surfaces/checkout/components/Badge.ts", + "name": "BadgeElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Badge.ts", + "syntaxKind": "PropertySignature", + "name": "color", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Badge.ts", + "syntaxKind": "PropertySignature", + "name": "icon", + "value": "'' | ReducedIconTypes", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Badge.ts", + "syntaxKind": "PropertySignature", + "name": "size", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Badge.ts", + "syntaxKind": "PropertySignature", + "name": "tone", + "value": "Extract", + "description": "", + "isOptional": true + } + ], + "value": "export interface BadgeElementProps extends Pick {\n size?: Extract;\n tone?: Extract;\n color?: Extract;\n icon?: '' | ReducedIconTypes;\n}" + }, + "BadgeProps": { + "filePath": "src/surfaces/checkout/components/Badge.ts", + "name": "BadgeProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Badge.ts", + "syntaxKind": "PropertySignature", + "name": "color", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Badge.ts", + "syntaxKind": "PropertySignature", + "name": "icon", + "value": "'' | ReducedIconTypes", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Badge.ts", + "syntaxKind": "PropertySignature", + "name": "size", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Badge.ts", + "syntaxKind": "PropertySignature", + "name": "tone", + "value": "Extract", + "description": "", + "isOptional": true + } + ], + "value": "export interface BadgeProps extends BadgeElementProps {\n}" + }, + "ReducedIconTypes": { + "filePath": "src/surfaces/checkout/components/Badge.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedIconTypes", + "value": "(typeof CHECKOUT_AVAILABLE_ICONS)[number]", + "description": "" + } + } + } + ], + "defaultExample": { + "image": "badge-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-badge>Default</s-badge>\n<s-badge tone=\"critical\">Expired</s-badge>\n<s-badge color=\"subdued\">Free</s-badge>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Banner", + "description": "The banner component highlights important information or required actions prominently within the interface. Use banner to communicate statuses, provide feedback, draw attention to critical updates, or guide users toward necessary actions.\n\nBanners support multiple tones to convey urgency levels, optional actions for next steps, and can be positioned contextually within sections or page-wide at the top. For inline status indicators on individual items, use [badge](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/feedback-and-status-indicators/badge).", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "banner-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Feedback and status indicators", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "BannerElementProps", + "typeDefinitions": { + "BannerElementProps": { + "filePath": "src/surfaces/checkout/components/Banner.ts", + "name": "BannerElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Banner.ts", + "syntaxKind": "PropertySignature", + "name": "tone", + "value": "Extract", + "description": "", + "isOptional": true + } + ], + "value": "export interface BannerElementProps extends Pick {\n tone?: Extract;\n}" + }, + "BannerProps": { + "filePath": "src/surfaces/checkout/components/Banner.ts", + "name": "BannerProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Banner.ts", + "syntaxKind": "PropertySignature", + "name": "tone", + "value": "Extract", + "description": "", + "isOptional": true + } + ], + "value": "export interface BannerProps extends BannerElementProps, BannerEvents {\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "BannerElementEvents", + "typeDefinitions": { + "BannerElementEvents": { + "filePath": "src/surfaces/checkout/components/Banner.ts", + "name": "BannerElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Banner.ts", + "syntaxKind": "PropertySignature", + "name": "afterhide", + "value": "CallbackEventListener", + "description": "Event handler when the banner has fully hidden.\n\nThe `hidden` property will be `true` when this event fires.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Banner.ts", + "syntaxKind": "PropertySignature", + "name": "dismiss", + "value": "CallbackEventListener", + "description": "Event handler when the banner is dismissed by the user.\n\nThis does not fire when setting `hidden` manually.\n\nThe `hidden` property will be `false` when this event fires.", + "isOptional": true + } + ], + "value": "export interface BannerElementEvents {\n /**\n * Event handler when the banner has fully hidden.\n *\n * The `hidden` property will be `true` when this event fires.\n *\n * @implementation If implementations animate the hiding of the banner,\n * this event must fire after the banner has fully hidden.\n * We can add an `onHide` event in future if we want to provide a hook for the start of the animation.\n */\n afterhide?: CallbackEventListener;\n /**\n * Event handler when the banner is dismissed by the user.\n *\n * This does not fire when setting `hidden` manually.\n *\n * The `hidden` property will be `false` when this event fires.\n */\n dismiss?: CallbackEventListener;\n}" }, "CallbackEventListener": { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/Banner.ts", "syntaxKind": "TypeAliasDeclaration", "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", "description": "" }, "CallbackEvent": { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/Banner.ts", "syntaxKind": "TypeAliasDeclaration", "name": "CallbackEvent", - "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", "description": "" } } } ], + "defaultExample": { + "image": "banner-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-banner heading=\"Free shipping on all orders.\" tone=\"info\"></s-banner>\n", + "language": "html" + } + ] + } + }, + "subSections": [ + { + "type": "Generic", + "anchorLink": "best-practices", + "title": "Best Practices", + "sectionContent": "- Use banners sparingly and only for important information. Too many banners can distract from the main content.\n- Place banners at the top of a page or section, below the relevant header.\n- Include a Button with a next step whenever possible.\n- Make banners dismissible unless they are critical or require action.\n- Use `info` for general updates or advice.\n- Use `warning` to highlight things that need attention. Use sparingly as it can add stress.\n- Use `critical` for problems that must be resolved." + } + ] + }, + { + "name": "Box", + "description": "The box component provides a generic, flexible container for custom designs and layouts. Use box to apply styling like backgrounds, padding, borders, or border radius when existing components don't meet your needs, or to nest and group other components.\n\nBox contents maintain their natural size, making it especially useful within layout components that would otherwise stretch their children. For structured layouts, use [stack](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/layout-and-structure/stack) or [grid](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/layout-and-structure/grid).", "category": "Polaris web components", - "subCategory": "Media and visuals", + "related": [], + "isVisualComponent": true, + "thumbnail": "box-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Layout and structure", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "BoxElementProps", + "typeDefinitions": { + "BoxElementProps": { + "filePath": "src/surfaces/checkout/components/Box.ts", + "name": "BoxElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "background", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "border", + "value": "BorderShorthand", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "", + "isOptional": true + } + ], + "value": "export interface BoxElementProps extends Pick {\n background?: Extract;\n border?: BorderShorthand;\n borderWidth?: MaybeAllValuesShorthandProperty | '';\n borderRadius?: MaybeAllValuesShorthandProperty>;\n}" + }, + "BoxProps": { + "filePath": "src/surfaces/checkout/components/Box.ts", + "name": "BoxProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "background", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "border", + "value": "BorderShorthand", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "", + "isOptional": true + } + ], + "value": "export interface BoxProps extends BoxElementProps {\n}" + }, + "BorderShorthand": { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "BorderShorthand", + "value": "ReducedBorderSizeKeyword | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword}` | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword} ${BorderStyleKeyword}`", + "description": "" + }, + "ReducedBorderSizeKeyword": { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedBorderSizeKeyword", + "value": "any", + "description": "" + }, + "ReducedColorKeyword": { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedColorKeyword", + "value": "any", + "description": "" + }, + "BorderStyleKeyword": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "BorderStyleKeyword", + "value": "\"none\" | \"solid\" | \"dashed\" | \"dotted\" | \"auto\"", + "description": "" + }, + "MaybeAllValuesShorthandProperty": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "MaybeAllValuesShorthandProperty", + "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", + "description": "" + } + } + } + ], "defaultExample": { - "image": "avatar-default.png", - "altText": "An example of the Avatar component shows the initials of the user.", + "image": "box-default.png", "codeblock": { "title": "Code", "tabs": [ { - "code": "<s-avatar\n alt=\"Avery Brown\"\n initials=\"AB\"\n></s-avatar>", - "language": "jsx" + "code": "<s-box\n background=\"subdued\"\n borderRadius=\"base\"\n borderWidth=\"base\"\n padding=\"base\"\n>\n <s-paragraph>\n Baked fresh to order. Please order 1-2 days before needed due to potential\n shipping variations.\n </s-paragraph>\n</s-box>\n", + "language": "html" } ] } @@ -57739,11 +58305,167 @@ { "type": "Generic", "anchorLink": "best-practices", - "title": "Best practices", - "sectionContent": "\nUse these best practices to deliver a clear and accessible experience in your extensions.\n\n### Show initials by default\n\nWhen no first or last name is provided, display the placeholder icon. If either name exists, show one or two initials.\n\n### Choose an appropriate size\n\nSelect a size based on context: \n- small‑200 (21×21) for tight tables or lists\n- small (26×26) when slightly larger is needed\n- base (32×32) as the default\n- large (39×39) when the avatar is a focal point (for example, a customer card)\n- large‑200 (47×47) when extra emphasis is required\n\n### Provide descriptive alt text\n\nWrite alt text that meaningfully describes the avatar so assistive technologies can convey the same context.\n\n### Keep sizes consistent on a page\n\nUse the same style and size for multiple avatars in one view to create a unified visual pattern and avoid mixing sizes.\n " + "title": "Best Practices", + "sectionContent": "- Use `s-box` when you need a container that preserves the natural size of its contents.\n- Use `s-box` inside of layout components like `s-stack` to prevent children from stretching.\n- `s-box` has `display: block` by default.\n- Prefer `s-box` when you don't need the features of more specialized components like `s-stack`.\n- Use `s-box` to group elements and apply styling or layout without changing their natural size." + } + ] + }, + { + "name": "Button", + "description": "The button component triggers actions or events, such as submitting forms, opening dialogs, or navigating to other pages. Use buttons to let users perform specific tasks or initiate interactions throughout the interface.\n\nButtons support various visual styles, tones, and interaction patterns to communicate intent and hierarchy. They can also function as links, guiding users to internal or external destinations. For navigation-focused interactions within text, use [link](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/actions/link). For grouping multiple related buttons, use [button group](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/actions/button-group).", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "button-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Actions", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "ButtonElementProps", + "typeDefinitions": { + "ButtonElementProps": { + "filePath": "src/surfaces/checkout/components/Button.ts", + "name": "ButtonElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Button.ts", + "syntaxKind": "PropertySignature", + "name": "target", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Button.ts", + "syntaxKind": "PropertySignature", + "name": "tone", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Button.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Button.ts", + "syntaxKind": "PropertySignature", + "name": "variant", + "value": "Extract", + "description": "", + "isOptional": true + } + ], + "value": "export interface ButtonElementProps extends Pick {\n target?: Extract;\n tone?: Extract;\n type?: Extract;\n variant?: Extract;\n}" + }, + "ButtonProps": { + "filePath": "src/surfaces/checkout/components/Button.ts", + "name": "ButtonProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Button.ts", + "syntaxKind": "PropertySignature", + "name": "target", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Button.ts", + "syntaxKind": "PropertySignature", + "name": "tone", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Button.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Button.ts", + "syntaxKind": "PropertySignature", + "name": "variant", + "value": "Extract", + "description": "", + "isOptional": true + } + ], + "value": "export interface ButtonProps extends ButtonElementProps, ButtonEvents {\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "ButtonElementEvents", + "typeDefinitions": { + "ButtonElementEvents": { + "filePath": "src/surfaces/checkout/components/Button.ts", + "name": "ButtonElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Button.ts", + "syntaxKind": "PropertySignature", + "name": "click", + "value": "CallbackEventListener", + "description": "Callback when the button is activated. This will be called before the action indicated by `type`.", + "isOptional": true + } + ], + "value": "export interface ButtonElementEvents {\n /**\n * Callback when the button is activated.\n * This will be called before the action indicated by `type`.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event\n */\n click?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/Button.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/Button.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } } ], - "related": [] + "defaultExample": { + "image": "button-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-button variant=\"secondary\">Cancel</s-button>\n<s-button variant=\"primary\">Save</s-button>\n", + "language": "html" + } + ] + } + }, + "subSections": [ + { + "type": "Generic", + "anchorLink": "best-practices", + "title": "Best Practices", + "sectionContent": "**Content Best Practices**\n\n- Clearly label each button with what it does. Users should be able to predict the result of clicking the button.\n- Start button text with a strong action verb that describes the action (e.g., \"Add\", \"Save\", \"Apply\").\n\n**Hierarchy Best Practices**\n\n- Create a clear visual hierarchy by varying the emphasis level of the buttons.\n- There should only be one high emphasis (primary) button per area. All the other buttons should be lower emphasis.\n- Use primary buttons for the most important action in a given flow (e.g. \"Pay now\", \"Apply\").\n- Use secondary buttons for alternative actions (e.g. \"Track your order\").\n\n**When to Use**\n\n- Use buttons when you want the user to take an action.\n- Use buttons when you need a way to explicitly control user interaction (e.g. form submissions or toggle states).\n\n**When not to Use**\n\n- Don't use buttons for navigation. Use links instead." + } + ] }, { "name": "Button group", @@ -57843,6 +58565,972 @@ ], "related": [] }, + { + "name": "Checkbox", + "description": "The checkbox component provides a clear way for users to make selections, such as agreeing to terms, enabling settings, or choosing multiple items from a list. Use checkbox to create binary on/off controls or multi-select interfaces where users can select any combination of options.\n\nCheckboxes support labels, help text, error states, and an indeterminate state for \"select all\" functionality when working with grouped selections. For settings that take effect immediately, use [switch](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/forms/switch) instead.", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "checkbox-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Forms", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "CheckboxElementProps", + "typeDefinitions": { + "CheckboxElementProps": { + "filePath": "src/surfaces/checkout/components/Checkbox.ts", + "name": "CheckboxElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Checkbox.ts", + "syntaxKind": "PropertySignature", + "name": "command", + "value": "Extract", + "description": "", + "isOptional": true + } + ], + "value": "export interface CheckboxElementProps extends Pick {\n command?: Extract;\n}" + }, + "CheckboxProps": { + "filePath": "src/surfaces/checkout/components/Checkbox.ts", + "name": "CheckboxProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Checkbox.ts", + "syntaxKind": "PropertySignature", + "name": "command", + "value": "Extract", + "description": "", + "isOptional": true + } + ], + "value": "export interface CheckboxProps extends CheckboxElementProps, CheckboxEvents {\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "CheckboxElementEvents", + "typeDefinitions": { + "CheckboxElementEvents": { + "filePath": "src/surfaces/checkout/components/Checkbox.ts", + "name": "CheckboxElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Checkbox.ts", + "syntaxKind": "PropertySignature", + "name": "change", + "value": "CallbackEventListener", + "description": "A callback that is run whenever the control is changed.", + "isOptional": true + } + ], + "value": "export interface CheckboxElementEvents {\n /**\n * A callback that is run whenever the control is changed.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n */\n change?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/Checkbox.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/Checkbox.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + } + ], + "defaultExample": { + "image": "checkbox-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-checkbox defaultChecked label=\"Email me with news and offers\"></s-checkbox>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Chip", + "description": "The chip component displays static labels, categories, or attributes that help classify and organize content. Use chip to show product tags, categories, or metadata near the items they describe, helping users identify items with similar properties.\n\nChips support multiple visual variants for different levels of emphasis and can include icons to provide additional visual context. For system-generated status indicators, use [badge](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/feedback-and-status-indicators/badge). For interactive or removable chips, use [clickable chip](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/actions/clickable-chip).", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "chip-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Typography and content", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "ChipElementProps", + "typeDefinitions": { + "ChipElementProps": { + "filePath": "src/surfaces/checkout/components/Chip.ts", + "name": "ChipElementProps", + "description": "", + "members": [], + "value": "export interface ChipElementProps extends Pick {\n}" + } + } + }, + { + "title": "Slots", + "description": "Learn more about [component slots](/docs/api/checkout-ui-extensions/latest/using-polaris-components#slots).", + "type": "ChipElementSlots", + "typeDefinitions": { + "ChipElementSlots": { + "filePath": "src/surfaces/checkout/components/Chip.ts", + "name": "ChipElementSlots", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Chip.ts", + "syntaxKind": "PropertySignature", + "name": "graphic", + "value": "HTMLElement", + "description": "The graphic to display inside of the chip.\n\nOnly `s-icon` element and its `type` attribute are supported.", + "isOptional": true + } + ], + "value": "export interface ChipElementSlots {\n /**\n * The graphic to display inside of the chip.\n *\n * Only `s-icon` element and its `type` attribute are supported.\n */\n graphic?: HTMLElement;\n}" + } + } + } + ], + "defaultExample": { + "image": "chip-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-chip>50% OFF</s-chip>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Choice list", + "description": "The choice list component presents multiple options for single or multiple selections. Use it when merchants need to choose from a defined set of options, such as filtering results or collecting preferences.\n\nThe component supports both single selection (radio button behavior) and multiple selection (checkbox behavior) modes. It includes configurable labels, help text, and validation. For compact dropdown selection with four or more options, use [select](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/forms/select).", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "choice-list-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Forms", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "ChoiceListElementProps", + "typeDefinitions": { + "ChoiceListElementProps": { + "filePath": "src/surfaces/checkout/components/ChoiceList.ts", + "name": "ChoiceListElementProps", + "description": "", + "members": [], + "value": "export interface ChoiceListElementProps extends Pick {\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "ChoiceListElementEvents", + "typeDefinitions": { + "ChoiceListElementEvents": { + "filePath": "src/surfaces/checkout/components/ChoiceList.ts", + "name": "ChoiceListElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/ChoiceList.ts", + "syntaxKind": "PropertySignature", + "name": "change", + "value": "CallbackEventListener", + "description": "A callback that is run whenever the control is changed.", + "isOptional": true + } + ], + "value": "export interface ChoiceListElementEvents {\n /**\n * A callback that is run whenever the control is changed.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n */\n change?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/ChoiceList.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/ChoiceList.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + }, + { + "title": "Choice", + "description": "The choice component creates individual selectable options within a choice list. Use choice to define each option that merchants can select, supporting both single selection (radio buttons) and multiple selection (checkboxes) modes.\n\nChoice components support labels, help text, and custom content through slots, providing flexible option presentation within choice lists.", + "type": "ChoiceElementProps", + "typeDefinitions": { + "ChoiceElementProps": { + "filePath": "src/surfaces/checkout/components/Choice.ts", + "name": "ChoiceElementProps", + "description": "", + "members": [], + "value": "export interface ChoiceElementProps extends Pick {\n}" + } + } + }, + { + "title": "Slots", + "description": "Learn more about [component slots](/docs/api/checkout-ui-extensions/latest/using-polaris-components#slots).", + "type": "ChoiceElementSlots", + "typeDefinitions": { + "ChoiceElementSlots": { + "filePath": "src/surfaces/checkout/components/Choice.ts", + "name": "ChoiceElementSlots", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Choice.ts", + "syntaxKind": "PropertySignature", + "name": "details", + "value": "HTMLElement", + "description": "Additional text to provide context or guidance for the input.\n\nThis text is displayed along with the input and its label to offer more information or instructions to the user.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Choice.ts", + "syntaxKind": "PropertySignature", + "name": "secondaryContent", + "value": "HTMLElement", + "description": "Secondary content for a choice.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Choice.ts", + "syntaxKind": "PropertySignature", + "name": "selectedContent", + "value": "HTMLElement", + "description": "Content to display when the option is selected.\n\nThis can be used to provide additional information or options related to the choice.", + "isOptional": true + } + ], + "value": "export interface ChoiceElementSlots {\n /**\n * Additional text to provide context or guidance for the input.\n *\n * This text is displayed along with the input and its label\n * to offer more information or instructions to the user.\n *\n * @implementation this content should be linked to the input with an `aria-describedby` attribute.\n */\n details?: HTMLElement;\n /**\n * Secondary content for a choice.\n */\n secondaryContent?: HTMLElement;\n /**\n * Content to display when the option is selected.\n *\n * This can be used to provide additional information or options related to the choice.\n */\n selectedContent?: HTMLElement;\n}" + } + } + } + ], + "defaultExample": { + "image": "choice-list-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-choice-list>\n <s-choice defaultSelected value=\"location-1\"\n >Yonge-Dundas Square locations</s-choice\n >\n <s-choice value=\"location-2\">Distillery District location</s-choice>\n <s-choice value=\"location-3\">Yorkville location</s-choice>\n</s-choice-list>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Clickable", + "description": "The clickable component wraps content to make it interactive and clickable. Use it when you need more styling control than [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) provide, such as custom backgrounds, padding, or borders around your clickable content.\n\nClickable supports button, link, and submit modes with built-in accessibility properties for keyboard navigation and screen reader support.", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "clickable-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Actions", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "ClickableElementProps", + "typeDefinitions": { + "ClickableElementProps": { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "name": "ClickableElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "background", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "border", + "value": "BorderShorthand", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "target", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "Extract", + "description": "", + "isOptional": true + } + ], + "value": "export interface ClickableElementProps extends Pick {\n background?: Extract;\n border?: BorderShorthand;\n borderWidth?: MaybeAllValuesShorthandProperty | '';\n borderRadius?: MaybeAllValuesShorthandProperty>;\n target?: Extract;\n type?: Extract;\n}" + }, + "ClickableProps": { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "name": "ClickableProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "background", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "border", + "value": "BorderShorthand", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "target", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "Extract", + "description": "", + "isOptional": true + } + ], + "value": "export interface ClickableProps extends ClickableElementProps, ClickableEvents {\n}" + }, + "BorderShorthand": { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "BorderShorthand", + "value": "ReducedBorderSizeKeyword | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword}` | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword} ${BorderStyleKeyword}`", + "description": "" + }, + "ReducedBorderSizeKeyword": { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedBorderSizeKeyword", + "value": "any", + "description": "" + }, + "ReducedColorKeyword": { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedColorKeyword", + "value": "any", + "description": "" + }, + "BorderStyleKeyword": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "BorderStyleKeyword", + "value": "\"none\" | \"solid\" | \"dashed\" | \"dotted\" | \"auto\"", + "description": "" + }, + "MaybeAllValuesShorthandProperty": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "MaybeAllValuesShorthandProperty", + "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", + "description": "" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "ClickableElementEvents", + "typeDefinitions": { + "ClickableElementEvents": { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "name": "ClickableElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "blur", + "value": "CallbackEventListener", + "description": "Callback when the element loses focus.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "click", + "value": "CallbackEventListener", + "description": "Callback when the button is activated. This will be called before the action indicated by `type`.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "focus", + "value": "CallbackEventListener", + "description": "Callback when the element receives focus.", + "isOptional": true + } + ], + "value": "export interface ClickableElementEvents {\n /**\n * Callback when the element loses focus.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event\n */\n blur?: CallbackEventListener;\n /**\n * Callback when the button is activated.\n * This will be called before the action indicated by `type`.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event\n */\n click?: CallbackEventListener;\n /**\n * Callback when the element receives focus.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event\n */\n focus?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + } + ], + "defaultExample": { + "image": "clickable-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-clickable>\n <s-product-thumbnail src=\"https://cdn.shopify.com/YOUR_IMAGE_HERE\"></s-product-thumbnail>\n</s-clickable>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Clickable chip", + "description": "The clickable chip component displays interactive labels or categories that users can click or remove. Use clickable chip to show filter tags, selected options, or merchant-created labels that users need to interact with or dismiss.\n\nClickable chips support multiple visual variants, optional icons, and can function as both clickable buttons and removable tags for flexible interaction patterns. For non-interactive labels, use [chip](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/typography-and-content/chip).", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "clickable-chip-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Actions", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "ClickableChipElementProps", + "typeDefinitions": { + "ClickableChipElementProps": { + "filePath": "src/surfaces/checkout/components/ClickableChip.ts", + "name": "ClickableChipElementProps", + "description": "", + "members": [], + "value": "export interface ClickableChipElementProps extends Pick {\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "ClickableChipElementEvents", + "typeDefinitions": { + "ClickableChipElementEvents": { + "filePath": "src/surfaces/checkout/components/ClickableChip.ts", + "name": "ClickableChipElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/ClickableChip.ts", + "syntaxKind": "PropertySignature", + "name": "afterhide", + "value": "CallbackEventListener", + "description": "Event handler when the chip has fully hidden.\n\nThe `hidden` property will be `true` when this event fires.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ClickableChip.ts", + "syntaxKind": "PropertySignature", + "name": "click", + "value": "CallbackEventListener", + "description": "Event handler when the chip is clicked.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ClickableChip.ts", + "syntaxKind": "PropertySignature", + "name": "remove", + "value": "CallbackEventListener", + "description": "Event handler when the chip is removed.", + "isOptional": true + } + ], + "value": "export interface ClickableChipElementEvents {\n /**\n * Event handler when the chip has fully hidden.\n *\n * The `hidden` property will be `true` when this event fires.\n */\n afterhide?: CallbackEventListener;\n /**\n * Event handler when the chip is clicked.\n */\n click?: CallbackEventListener;\n /**\n * Event handler when the chip is removed.\n */\n remove?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/ClickableChip.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/ClickableChip.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + }, + { + "title": "Slots", + "description": "Learn more about [component slots](/docs/api/checkout-ui-extensions/latest/using-polaris-components#slots).", + "type": "ClickableChipElementSlots", + "typeDefinitions": { + "ClickableChipElementSlots": { + "filePath": "src/surfaces/checkout/components/ClickableChip.ts", + "name": "ClickableChipElementSlots", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/ClickableChip.ts", + "syntaxKind": "PropertySignature", + "name": "graphic", + "value": "HTMLElement", + "description": "The graphic to display inside of the chip.\n\nOnly `s-icon` element and its `type` attribute are supported.", + "isOptional": true + } + ], + "value": "export interface ClickableChipElementSlots {\n /**\n * The graphic to display inside of the chip.\n *\n * Only `s-icon` element and its `type` attribute are supported.\n */\n graphic?: HTMLElement;\n}" + } + } + } + ], + "defaultExample": { + "image": "clickable-chip-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-clickable-chip removable>Shipping insurance</s-clickable-chip>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Clipboard item", + "description": "Enables copying text to the user’s clipboard. Use alongside Button or Link components to let users easily copy content. `` doesn’t render visually.", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "clipboard-item-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Actions", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "ClipboardItemElementProps", + "typeDefinitions": { + "ClipboardItemElementProps": { + "filePath": "src/surfaces/checkout/components/ClipboardItem.ts", + "name": "ClipboardItemElementProps", + "description": "", + "members": [], + "value": "export interface ClipboardItemElementProps extends Pick {\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "ClipboardItemElementEvents", + "typeDefinitions": { + "ClipboardItemElementEvents": { + "filePath": "src/surfaces/checkout/components/ClipboardItem.ts", + "name": "ClipboardItemElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/ClipboardItem.ts", + "syntaxKind": "PropertySignature", + "name": "copy", + "value": "CallbackEventListener", + "description": "Callback run when the copy to clipboard succeeds.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ClipboardItem.ts", + "syntaxKind": "PropertySignature", + "name": "copyerror", + "value": "CallbackEventListener", + "description": "Callback run when the copy to clipboard fails.", + "isOptional": true + } + ], + "value": "export interface ClipboardItemElementEvents {\n /**\n * Callback run when the copy to clipboard succeeds.\n */\n copy?: CallbackEventListener;\n /**\n * Callback run when the copy to clipboard fails.\n */\n copyerror?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/ClipboardItem.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/ClipboardItem.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + } + ], + "defaultExample": { + "image": "clipboard-item-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-button commandFor=\"discount-code\">Copy discount code</s-button>\n<s-clipboard-item id=\"discount-code\" text=\"SAVE 25\"></s-clipboard-item>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Consent checkbox", + "description": "Use buyer consent checkboxes for collecting the buyer’s approval for a given policy.", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "consent-checkbox-thumbnail.png", + "requires": "enabling of the `sms_marketing` capability of the [Customer Privacy](/docs/api/customer-account-ui-extensions/latest/configuration#collect-buyer-consent) capability group to work.", + "type": "", + "subCategory": "Forms", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "ConsentCheckboxElementProps", + "typeDefinitions": { + "ConsentCheckboxElementProps": { + "filePath": "src/surfaces/checkout/components/ConsentCheckbox.ts", + "name": "ConsentCheckboxElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/ConsentCheckbox.ts", + "syntaxKind": "PropertySignature", + "name": "command", + "value": "Extract", + "description": "", + "isOptional": true + } + ], + "value": "export interface ConsentCheckboxElementProps extends Pick {\n command?: Extract;\n}" + }, + "ConsentCheckboxProps": { + "filePath": "src/surfaces/checkout/components/ConsentCheckbox.ts", + "name": "ConsentCheckboxProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/ConsentCheckbox.ts", + "syntaxKind": "PropertySignature", + "name": "command", + "value": "Extract", + "description": "", + "isOptional": true + } + ], + "value": "export interface ConsentCheckboxProps extends ConsentCheckboxElementProps, ConsentCheckboxEvents {\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "ConsentCheckboxElementEvents", + "typeDefinitions": { + "ConsentCheckboxElementEvents": { + "filePath": "src/surfaces/checkout/components/ConsentCheckbox.ts", + "name": "ConsentCheckboxElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/ConsentCheckbox.ts", + "syntaxKind": "PropertySignature", + "name": "change", + "value": "CallbackEventListener", + "description": "A callback that is run whenever the control is changed.", + "isOptional": true + } + ], + "value": "export interface ConsentCheckboxElementEvents {\n /**\n * A callback that is run whenever the control is changed.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n */\n change?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/ConsentCheckbox.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/ConsentCheckbox.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + } + ], + "defaultExample": { + "image": "consent-checkbox-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-consent-checkbox\n defaultChecked\n label=\"Text me with news and offers\"\n policy=\"sms-marketing\"\n></s-consent-checkbox>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Consent phone field", + "description": "Display a phone field for customers to sign up for text message marketing, noting that the phone field value will be automatically saved during checkout.", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "consent-phone-field-thumbnail.png", + "requires": "enabling of the `sms_marketing` capability of the [Customer Privacy](/docs/api/customer-account-ui-extensions/latest/configuration#collect-buyer-consent) capability group to work.", + "type": "", + "subCategory": "Forms", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "ConsentPhoneFieldElementProps", + "typeDefinitions": { + "ConsentPhoneFieldElementProps": { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "name": "ConsentPhoneFieldElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "placeholder", + "value": "string", + "description": "", + "isOptional": true, + "deprecationMessage": "Use `label` instead.", + "isPrivate": true + } + ], + "value": "export interface ConsentPhoneFieldElementProps extends Pick {\n /**\n * @deprecated Use `label` instead.\n * @private\n */\n placeholder?: string;\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "ConsentPhoneFieldElementEvents", + "typeDefinitions": { + "ConsentPhoneFieldElementEvents": { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "name": "ConsentPhoneFieldElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "blur", + "value": "CallbackEventListener", + "description": "Callback when the element loses focus.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "change", + "value": "CallbackEventListener", + "description": "Callback when the user has **finished editing** a field, e.g. once they have blurred the field.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "focus", + "value": "CallbackEventListener", + "description": "Callback when the element receives focus.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "input", + "value": "CallbackEventListener", + "description": "Callback when the user makes any changes in the field.", + "isOptional": true + } + ], + "value": "export interface ConsentPhoneFieldElementEvents {\n /**\n * Callback when the element loses focus.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event\n */\n blur?: CallbackEventListener;\n /**\n * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n */\n change?: CallbackEventListener;\n /**\n * Callback when the element receives focus.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event\n */\n focus?: CallbackEventListener;\n /**\n * Callback when the user makes any changes in the field.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event\n */\n input?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + }, + { + "title": "Slots", + "description": "Learn more about [component slots](/docs/api/checkout-ui-extensions/latest/using-polaris-components#slots).", + "type": "ConsentPhoneFieldElementSlots", + "typeDefinitions": { + "ConsentPhoneFieldElementSlots": { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "name": "ConsentPhoneFieldElementSlots", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "accessory", + "value": "HTMLElement", + "description": "Additional content to be displayed in the field. Commonly used to display an icon that activates a tooltip providing more information.", + "isOptional": true + } + ], + "value": "export interface ConsentPhoneFieldElementSlots {\n /**\n * Additional content to be displayed in the field.\n * Commonly used to display an icon that activates a tooltip providing more information.\n */\n accessory?: HTMLElement;\n}" + } + } + } + ], + "defaultExample": { + "image": "consent-phone-field-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-consent-phone-field\n label=\"Phone\"\n policy=\"sms-marketing\"\n defaultValue=\"587-746-7439\"\n></s-consent-phone-field>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, { "name": "Customer account action", "description": "A modal to complete an order action flow. This component can only be used to populate the [customer-account.order.action.render](/docs/api/customer-account-ui-extensions/unstable/targets/order-action-menu/customer-account-order-action-render) extension target, which renders as a result of the customer clicking the order action button rendered via the [customer-account.order.action.menu-item.render](/docs/api/customer-account-ui-extensions/unstable/targets/order-action-menu/customer-account-order-action-menu-item-render) extension target.", @@ -57854,21 +59542,4255 @@ { "title": "Properties", "description": "", - "type": "CustomerAccountActionPropsDocs", + "type": "CustomerAccountActionPropsDocs", + "typeDefinitions": { + "CustomerAccountActionPropsDocs": { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CustomerAccountActionPropsDocs", + "value": "CustomerAccountActionProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "PropertySignature", + "name": "heading", + "value": "string", + "description": "Sets the heading of the action container." + }, + { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + } + ] + } + } + }, + { + "title": "Slots", + "description": "", + "type": "CustomerAccountActionElementSlotsDocs", + "typeDefinitions": { + "CustomerAccountActionElementSlotsDocs": { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CustomerAccountActionElementSlotsDocs", + "value": "CustomerAccountActionElementSlots", + "description": "", + "members": [ + { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "PropertySignature", + "name": "primary-action", + "value": "HTMLElement", + "description": "The primary action for the page. Accepts a single Button element with restricted properties (see below).", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "PropertySignature", + "name": "secondary-actions", + "value": "HTMLElement", + "description": "The secondary actions for the page. Accepts multiple Button elements with restricted properties (see below).", + "isOptional": true + } + ] + } + } + }, + { + "title": "Slot button properties", + "description": "Supported props for Buttons used inside CustomerAccountAction slots.

`children` only support text.", + "type": "Docs_CustomerAccountAction_SlotButton", + "typeDefinitions": { + "Docs_CustomerAccountAction_SlotButton": { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "name": "Docs_CustomerAccountAction_SlotButton", + "description": "", + "members": [ + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers.\n\nUse this when using only an icon or the button text is not enough context for users using assistive technologies.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "click", + "value": "((event: CallbackEventListener) => void) | null", + "description": "Callback when the button is activated. This will be called before the action indicated by `type`.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "command", + "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", + "description": "Sets the action the `commandFor` should take when this clickable is activated.\n\nSee the documentation of particular components for the actions they support.\n\n- `--auto`: a default action for the target component.\n- `--show`: shows the target component.\n- `--hide`: hides the target component.\n- `--toggle`: toggles the target component.\n- `--copy`: copies the target ClipboardItem.", + "isOptional": true, + "defaultValue": "'--auto'" + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "commandFor", + "value": "string", + "description": "ID of a component that should respond to activations (e.g. clicks) on this component.\n\nSee `command` for how to control the behavior of the target.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the button, disallowing any interaction.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "href", + "value": "string", + "description": "The URL to link to.\n\n- If set, it will navigate to the location specified by `href` after executing the `onClick` callback.\n- If a `commandFor` is set, the `command` will be executed instead of the navigation.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "loading", + "value": "boolean", + "description": "Replaces content with a loading indicator.", + "isOptional": true, + "defaultValue": "false" + } + ], + "value": "export interface Docs_CustomerAccountAction_SlotButton\n extends Pick<\n ButtonProps,\n | 'click'\n | 'loading'\n | 'disabled'\n | 'accessibilityLabel'\n | 'href'\n | 'command'\n | 'commandFor'\n > {}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + } + ], + "category": "Polaris web components", + "subCategory": "Actions", + "defaultExample": { + "image": "customeraccountaction-default.png", + "altText": "An example of the CustomerAccountAction component shows a dismissible modal with a header that says \"Edit order\", a field for adjusting quantities, and a Close button.", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-customer-account-action heading=\"Action title\">\n Modal content\n <s-button slot=\"primary-action\">\n Save\n </s-button>\n <s-button slot=\"secondary-actions\">\n Cancel\n </s-button>\n</s-customer-account-action>", + "language": "jsx" + } + ] + } + }, + "subSections": [ + { + "type": "Generic", + "anchorLink": "best-practices", + "title": "Best practices", + "sectionContent": "\nUse these best practices to deliver a clear and accessible experience in your extensions.\n\n### Highlight the key decision\n\nUse the component to present the essential details and actions needed to confirm or complete an order task.\n\n### Collect only what’s necessary\n\nRequest the minimum information required to finish the customer’s job so the flow stays quick and friction‑free.\n\n### Keep forms simple and predictable\n\nUse clear labels, intuitive actions, and concise copy so customers know what’s required and what happens next.\n\n### Choose a full‑page extension for complex flows\n\nIf the task spans multiple steps or needs a lot of input, switch to a full‑page extension instead of a modal.\n\n### Refer to Polaris guidance\n\nRefer to Polaris for additional best practices and content guidelines when designing [modals](https://polaris-react.shopify.com/components/deprecated/modal#best-practices).\n" + } + ], + "related": [] + }, + { + "name": "Date field", + "description": "The date field component captures date input with a consistent interface for date selection and proper validation. Use it to collect date information in forms, scheduling interfaces, or data entry workflows.\n\nThe component supports manual text entry. For visual calendar-based selection, consider using [date picker](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/forms/date-picker).", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "date-field-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Forms", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "DateFieldElementProps", + "typeDefinitions": { + "DateFieldElementProps": { + "filePath": "src/surfaces/checkout/components/DateField.ts", + "name": "DateFieldElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/DateField.ts", + "syntaxKind": "PropertySignature", + "name": "placeholder", + "value": "string", + "description": "", + "isOptional": true, + "deprecationMessage": "Use `label` instead.", + "isPrivate": true + } + ], + "value": "export interface DateFieldElementProps extends Pick {\n /**\n * @deprecated Use `label` instead.\n * @private\n */\n placeholder?: string;\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "DateFieldElementEvents", + "typeDefinitions": { + "DateFieldElementEvents": { + "filePath": "src/surfaces/checkout/components/DateField.ts", + "name": "DateFieldElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/DateField.ts", + "syntaxKind": "PropertySignature", + "name": "blur", + "value": "CallbackEventListener", + "description": "Callback when the element loses focus.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/DateField.ts", + "syntaxKind": "PropertySignature", + "name": "change", + "value": "CallbackEventListener", + "description": "Callback when the user has **finished editing** a field, e.g. once they have blurred the field.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/DateField.ts", + "syntaxKind": "PropertySignature", + "name": "focus", + "value": "CallbackEventListener", + "description": "Callback when the element receives focus.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/DateField.ts", + "syntaxKind": "PropertySignature", + "name": "input", + "value": "CallbackEventListener", + "description": "Callback when the user makes any changes in the field.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/DateField.ts", + "syntaxKind": "PropertySignature", + "name": "invalid", + "value": "CallbackEventListener", + "description": "Callback when the user enters an invalid date.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/DateField.ts", + "syntaxKind": "PropertySignature", + "name": "viewChange", + "value": "CallbackEventListener", + "description": "Callback when the view changes.", + "isOptional": true + } + ], + "value": "export interface DateFieldElementEvents {\n /**\n * Callback when the element loses focus.\n */\n blur?: CallbackEventListener;\n /**\n * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.\n */\n change?: CallbackEventListener;\n /**\n * Callback when the element receives focus.\n */\n focus?: CallbackEventListener;\n /**\n * Callback when the user makes any changes in the field.\n */\n input?: CallbackEventListener;\n /**\n * Callback when the user enters an invalid date.\n */\n invalid?: CallbackEventListener;\n /**\n * Callback when the view changes.\n */\n viewChange?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/DateField.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/DateField.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + } + ], + "defaultExample": { + "image": "date-field-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-date-field label=\"Pickup date\" defaultValue=\"2025-10-01\"></s-date-field>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Date picker", + "description": "The date picker component allows merchants to select dates using a calendar interface. Use it when merchants benefit from seeing dates in context of the full month, such as selecting dates relative to today or needing weekday context.\n\nThe component supports single dates, multiple dates, and date ranges. For text date entry, use [date field](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/forms/date-field).", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "date-picker-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Forms", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "DatePickerElementProps", + "typeDefinitions": { + "DatePickerElementProps": { + "filePath": "src/surfaces/checkout/components/DatePicker.ts", + "name": "DatePickerElementProps", + "description": "", + "members": [], + "value": "export interface DatePickerElementProps extends Pick {\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "DatePickerElementEvents", + "typeDefinitions": { + "DatePickerElementEvents": { + "filePath": "src/surfaces/checkout/components/DatePicker.ts", + "name": "DatePickerElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/DatePicker.ts", + "syntaxKind": "PropertySignature", + "name": "blur", + "value": "CallbackEventListener", + "description": "Callback when the element loses focus.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/DatePicker.ts", + "syntaxKind": "PropertySignature", + "name": "change", + "value": "CallbackEventListener", + "description": "Callback when the user has **finished editing** a field, e.g. once they have blurred the field.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/DatePicker.ts", + "syntaxKind": "PropertySignature", + "name": "focus", + "value": "CallbackEventListener", + "description": "Callback when the element receives focus.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/DatePicker.ts", + "syntaxKind": "PropertySignature", + "name": "input", + "value": "CallbackEventListener", + "description": "Callback when the user makes any changes in the field.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/DatePicker.ts", + "syntaxKind": "PropertySignature", + "name": "viewChange", + "value": "CallbackEventListener", + "description": "Callback when the view changes.", + "isOptional": true + } + ], + "value": "export interface DatePickerElementEvents {\n /**\n * Callback when the element loses focus.\n */\n blur?: CallbackEventListener;\n /**\n * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.\n */\n change?: CallbackEventListener;\n /**\n * Callback when the element receives focus.\n */\n focus?: CallbackEventListener;\n /**\n * Callback when the user makes any changes in the field.\n */\n input?: CallbackEventListener;\n /**\n * Callback when the view changes.\n */\n viewChange?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/DatePicker.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/DatePicker.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + } + ], + "defaultExample": { + "image": "date-picker-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-date-picker defaultView=\"2025-10\" defaultValue=\"2025-10-03\"></s-date-picker>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Details", + "description": "Creates a collapsible content area that can be expanded or collapsed by users. Use with Summary to provide expandable sections for additional information or settings.", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "details-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Typography and content", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "DetailsElementProps", + "typeDefinitions": { + "DetailsElementProps": { + "filePath": "src/surfaces/checkout/components/Details.ts", + "name": "DetailsElementProps", + "description": "", + "members": [], + "value": "export interface DetailsElementProps extends Pick {\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "DetailsElementEvents", + "typeDefinitions": { + "DetailsElementEvents": { + "filePath": "src/surfaces/checkout/components/Details.ts", + "name": "DetailsElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Details.ts", + "syntaxKind": "PropertySignature", + "name": "aftertoggle", + "value": "CallbackEventListener", + "description": "Callback fired when the element state changes **after** any animations have finished.\n\n- If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Details.ts", + "syntaxKind": "PropertySignature", + "name": "toggle", + "value": "CallbackEventListener", + "description": "Callback straight after the element state changes.\n\n- If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element is transitioning from showing to hidden, then `oldState` property will be set to `open` and the `newState` will be `closed`.", + "isOptional": true + } + ], + "value": "export interface DetailsElementEvents {\n /**\n * Callback straight after the element state changes.\n *\n * - If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the\n * `newState` property will be set to `open`.\n * - If the element is transitioning from showing to hidden, then `oldState` property will be set to `open` and the\n * `newState` will be `closed`.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event\n * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState\n * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState\n */\n toggle?: CallbackEventListener;\n /**\n * Callback fired when the element state changes **after** any animations have finished.\n *\n * - If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the\n * `newState` property will be set to `open`.\n * - If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the\n * `newState` will be `closed`.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState\n * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState\n */\n aftertoggle?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/Details.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/Details.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + }, + "ToggleArgumentsEvent": { + "filePath": "src/surfaces/checkout/components/Details.ts", + "name": "ToggleArgumentsEvent", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Details.ts", + "syntaxKind": "PropertySignature", + "name": "newState", + "value": "ToggleState", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Details.ts", + "syntaxKind": "PropertySignature", + "name": "oldState", + "value": "ToggleState", + "description": "", + "isOptional": true + } + ], + "value": "export interface ToggleArgumentsEvent {\n oldState?: ToggleState;\n newState?: ToggleState;\n}" + }, + "ToggleState": { + "filePath": "src/surfaces/checkout/components/Details.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ToggleState", + "value": "'open' | 'closed'", + "description": "" + } + } + }, + { + "title": "Summary", + "description": "Provides a clickable label for collapsible Details content. Use to create clear, accessible disclosure controls that show or hide additional information.", + "type": "SummaryElementProps", + "typeDefinitions": { + "SummaryElementProps": { + "filePath": "src/surfaces/checkout/components/Summary.ts", + "name": "SummaryElementProps", + "description": "", + "members": [], + "value": "export interface SummaryElementProps extends Pick {\n}" + } + } + } + ], + "defaultExample": { + "image": "details-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-details defaultOpen>\n <s-summary>Pickup instructions</s-summary>\n <s-text>\n Curbside pickup is at the back of the warehouse. Park in a stall and follow the signs.\n </s-text>\n</s-details>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Divider", + "description": "The divider component creates clear visual separation between elements in the interface. Use divider to separate distinct content groups in forms, settings panels, lists, or page sections, helping users scan and understand content organization.\n\nDividers support both horizontal and vertical orientations, along with different visual strengths for varying levels of emphasis. For more structured content grouping with headings, use [section](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/layout-and-structure/section).", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "divider-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Layout and structure", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "DividerElementProps", + "typeDefinitions": { + "DividerElementProps": { + "filePath": "src/surfaces/checkout/components/Divider.ts", + "name": "DividerElementProps", + "description": "", + "members": [], + "value": "export interface DividerElementProps extends Pick {\n}" + } + } + } + ], + "defaultExample": { + "image": "divider-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-divider></s-divider>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Drop zone", + "description": "The drop zone component lets users upload files through drag-and-drop or by clicking to browse. Use for file uploads such as images, documents, or CSV imports.\n\nThe component provides visual feedback during drag operations and supports file type validation through the `accept` property. Rejected files trigger the `droprejected` event for custom error handling.", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "drop-zone-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Forms", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "DropZoneElementProps", + "typeDefinitions": { + "DropZoneElementProps": { + "filePath": "src/surfaces/checkout/components/DropZone.ts", + "name": "DropZoneElementProps", + "description": "", + "members": [], + "value": "export interface DropZoneElementProps extends Pick {\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "DropZoneElementEvents", + "typeDefinitions": { + "DropZoneElementEvents": { + "filePath": "src/surfaces/checkout/components/DropZone.ts", + "name": "DropZoneElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/DropZone.ts", + "syntaxKind": "PropertySignature", + "name": "change", + "value": "CallbackEventListener", + "description": "Callback when the user has finished selecting a file or files.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/DropZone.ts", + "syntaxKind": "PropertySignature", + "name": "droprejected", + "value": "CallbackEventListener", + "description": "Callback when rejected files are dropped. Files are rejected based on the `accept` prop.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/DropZone.ts", + "syntaxKind": "PropertySignature", + "name": "input", + "value": "CallbackEventListener", + "description": "Callback when the user makes any changes in the field.", + "isOptional": true + } + ], + "value": "export interface DropZoneElementEvents {\n /**\n * Callback when rejected files are dropped. Files are rejected based on the `accept` prop.\n */\n droprejected?: CallbackEventListener;\n /**\n * Callback when the user makes any changes in the field.\n */\n input?: CallbackEventListener;\n /**\n * Callback when the user has finished selecting a file or files.\n */\n change?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/DropZone.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/DropZone.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + } + ], + "defaultExample": { + "image": "drop-zone-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-drop-zone accept=\"image/*\"></s-drop-zone>\n", + "language": "html" + } + ] + } + }, + "subSections": [ + { + "type": "Generic", + "anchorLink": "best-practices", + "title": "Best Practices", + "sectionContent": "- **File storage:** Implement file storage separately. Use Metafields through the Checkout API or Customer Accounts API to store references to uploaded files.\n- **Mobile considerations:** Drag and drop functionality is limited on mobile devices. Include a button to help guide users to select files.\n- **Minimum size:** Keep the DropZone at least 100px × 100px to avoid cut-off text and spacing issues." + } + ] + }, + { + "name": "Email field", + "description": "The email field component captures email address input. Use it to collect email information in forms, customer profiles, or contact workflows.\n\nEmail field doesn't perform automatic email validation. Implement your own validation logic, and use the `error` property to display validation results. For general text input, use [text field](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/forms/text-field).", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "email-field-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Forms", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "EmailFieldElementProps", + "typeDefinitions": { + "EmailFieldElementProps": { + "filePath": "src/surfaces/checkout/components/EmailField.ts", + "name": "EmailFieldElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/EmailField.ts", + "syntaxKind": "PropertySignature", + "name": "placeholder", + "value": "string", + "description": "", + "isOptional": true, + "deprecationMessage": "Use `label` instead.", + "isPrivate": true + } + ], + "value": "export interface EmailFieldElementProps extends Pick {\n /**\n * @deprecated Use `label` instead.\n * @private\n */\n placeholder?: string;\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "EmailFieldElementEvents", + "typeDefinitions": { + "EmailFieldElementEvents": { + "filePath": "src/surfaces/checkout/components/EmailField.ts", + "name": "EmailFieldElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/EmailField.ts", + "syntaxKind": "PropertySignature", + "name": "blur", + "value": "CallbackEventListener", + "description": "Callback when the element loses focus.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/EmailField.ts", + "syntaxKind": "PropertySignature", + "name": "change", + "value": "CallbackEventListener", + "description": "Callback when the user has **finished editing** a field, e.g. once they have blurred the field.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/EmailField.ts", + "syntaxKind": "PropertySignature", + "name": "focus", + "value": "CallbackEventListener", + "description": "Callback when the element receives focus.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/EmailField.ts", + "syntaxKind": "PropertySignature", + "name": "input", + "value": "CallbackEventListener", + "description": "Callback when the user makes any changes in the field.", + "isOptional": true + } + ], + "value": "export interface EmailFieldElementEvents {\n /**\n * Callback when the element loses focus.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event\n */\n blur?: CallbackEventListener;\n /**\n * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n */\n change?: CallbackEventListener;\n /**\n * Callback when the element receives focus.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event\n */\n focus?: CallbackEventListener;\n /**\n * Callback when the user makes any changes in the field.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event\n */\n input?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/EmailField.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/EmailField.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + }, + { + "title": "Slots", + "description": "Learn more about [component slots](/docs/api/checkout-ui-extensions/latest/using-polaris-components#slots).", + "type": "EmailFieldElementSlots", + "typeDefinitions": { + "EmailFieldElementSlots": { + "filePath": "src/surfaces/checkout/components/EmailField.ts", + "name": "EmailFieldElementSlots", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/EmailField.ts", + "syntaxKind": "PropertySignature", + "name": "accessory", + "value": "HTMLElement", + "description": "Additional content to be displayed in the field. Commonly used to display an icon that activates a tooltip providing more information.", + "isOptional": true + } + ], + "value": "export interface EmailFieldElementSlots {\n /**\n * Additional content to be displayed in the field.\n * Commonly used to display an icon that activates a tooltip providing more information.\n */\n accessory?: HTMLElement;\n}" + } + } + } + ], + "defaultExample": { + "image": "email-field-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-email-field label=\"Email\" defaultValue=\"snowdevil@shopify.com\"></s-email-field>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Form", + "description": "The form component wraps form controls and enables implicit submission, allowing users to submit from any input by pressing **Enter**. Use form to group related input fields and handle form submission through JavaScript event handlers.\n\nUnlike HTML forms, form doesn't automatically submit data using HTTP—you must register a `submit` event to process form data programmatically. For Shopify Functions configuration forms, use [function settings](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/forms/function-settings).", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "form-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Forms", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "FormElementProps", + "typeDefinitions": { + "FormElementProps": { + "filePath": "src/surfaces/checkout/components/Form.ts", + "name": "FormElementProps", + "description": "", + "members": [], + "value": "export interface FormElementProps extends Pick {\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "FormElementEvents", + "typeDefinitions": { + "FormElementEvents": { + "filePath": "src/surfaces/checkout/components/Form.ts", + "name": "FormElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Form.ts", + "syntaxKind": "PropertySignature", + "name": "submit", + "value": "CallbackEventListener", + "description": "A callback that is run when the form is submitted.", + "isOptional": true + } + ], + "value": "export interface FormElementEvents {\n /**\n * A callback that is run when the form is submitted.\n */\n submit?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/Form.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/Form.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + } + ], + "defaultExample": { + "image": "form-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-form>\n <s-text-field label=\"Email address\" />\n <s-button type=\"submit\" variant=\"primary\">Submit</s-button>\n</s-form>\n", + "language": "html" + } + ] + } + }, + "subSections": [ + { + "type": "Generic", + "anchorLink": "best-practices", + "title": "Best Practices", + "sectionContent": "- Wrap all form input elements with the Form component.\n- Each form should have only one submit button, placed at the end of the form." + } + ] + }, + { + "name": "Grid", + "description": "The grid component organizes content in a matrix of rows and columns to create responsive page layouts. Use grid to build complex, multi-column layouts that adapt to different screen sizes and maintain consistent alignment.\n\nGrid follows the CSS grid layout pattern and supports flexible column configurations, gap spacing, and alignment properties for precise layout control. For simpler linear layouts (horizontal or vertical), use [stack](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/layout-and-structure/stack).", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "grid-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Layout and structure", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "GridElementProps", + "typeDefinitions": { + "GridElementProps": { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "name": "GridElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "alignContent", + "value": "MaybeResponsive", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "alignItems", + "value": "MaybeResponsive", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "background", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "border", + "value": "BorderShorthand", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "borderColor", + "value": "ReducedColorKeyword | ''", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "justifyContent", + "value": "MaybeResponsive", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "justifyItems", + "value": "MaybeResponsive", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "placeContent", + "value": "MaybeResponsive<`${ReducedAlignContentKeyword} ${ReducedJustifyContentKeyword}` | ReducedAlignContentKeyword>", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "placeItems", + "value": "MaybeResponsive<`${ReducedAlignItemsKeyword} ${ReducedJustifyItemsKeyword}` | ReducedAlignItemsKeyword>", + "description": "", + "isOptional": true + } + ], + "value": "export interface GridElementProps extends Pick {\n alignContent?: MaybeResponsive;\n alignItems?: MaybeResponsive;\n background?: Extract;\n border?: BorderShorthand;\n borderColor?: ReducedColorKeyword | '';\n borderWidth?: MaybeAllValuesShorthandProperty | '';\n borderRadius?: MaybeAllValuesShorthandProperty>;\n justifyContent?: MaybeResponsive;\n justifyItems?: MaybeResponsive;\n placeContent?: MaybeResponsive<`${ReducedAlignContentKeyword} ${ReducedJustifyContentKeyword}` | ReducedAlignContentKeyword>;\n placeItems?: MaybeResponsive<`${ReducedAlignItemsKeyword} ${ReducedJustifyItemsKeyword}` | ReducedAlignItemsKeyword>;\n}" + }, + "MaybeResponsive": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "MaybeResponsive", + "value": "T | `@container${string}`", + "description": "" + }, + "ReducedAlignContentKeyword": { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedAlignContentKeyword", + "value": "any", + "description": "" + }, + "ReducedAlignItemsKeyword": { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedAlignItemsKeyword", + "value": "any", + "description": "" + }, + "GridProps": { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "name": "GridProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "alignContent", + "value": "MaybeResponsive", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "alignItems", + "value": "MaybeResponsive", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "background", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "border", + "value": "BorderShorthand", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "borderColor", + "value": "ReducedColorKeyword | ''", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "justifyContent", + "value": "MaybeResponsive", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "justifyItems", + "value": "MaybeResponsive", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "placeContent", + "value": "MaybeResponsive<`${ReducedAlignContentKeyword} ${ReducedJustifyContentKeyword}` | ReducedAlignContentKeyword>", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "placeItems", + "value": "MaybeResponsive<`${ReducedAlignItemsKeyword} ${ReducedJustifyItemsKeyword}` | ReducedAlignItemsKeyword>", + "description": "", + "isOptional": true + } + ], + "value": "export interface GridProps extends GridElementProps {\n}" + }, + "BorderShorthand": { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "BorderShorthand", + "value": "ReducedBorderSizeKeyword | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword}` | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword} ${BorderStyleKeyword}`", + "description": "" + }, + "ReducedBorderSizeKeyword": { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedBorderSizeKeyword", + "value": "any", + "description": "" + }, + "ReducedColorKeyword": { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedColorKeyword", + "value": "any", + "description": "" + }, + "BorderStyleKeyword": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "BorderStyleKeyword", + "value": "\"none\" | \"solid\" | \"dashed\" | \"dotted\" | \"auto\"", + "description": "" + }, + "MaybeAllValuesShorthandProperty": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "MaybeAllValuesShorthandProperty", + "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", + "description": "" + }, + "ReducedJustifyContentKeyword": { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedJustifyContentKeyword", + "value": "any", + "description": "" + }, + "ReducedJustifyItemsKeyword": { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedJustifyItemsKeyword", + "value": "any", + "description": "" + } + } + }, + { + "title": "Grid item", + "description": "The grid item component represents a single cell within a grid layout, allowing you to control how content is positioned and sized within the grid. Use grid item as a child of grid to specify column span, row span, and positioning for individual content areas.\n\nGrid item supports precise placement control through column and row properties, enabling you to create complex layouts where different items occupy varying amounts of space or appear in specific grid positions.", + "type": "GridItemElementProps", + "typeDefinitions": { + "GridItemElementProps": { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "name": "GridItemElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "background", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "border", + "value": "BorderShorthand", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "borderColor", + "value": "ReducedColorKeyword | ''", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "", + "isOptional": true + } + ], + "value": "export interface GridItemElementProps extends Pick {\n background?: Extract;\n border?: BorderShorthand;\n borderColor?: ReducedColorKeyword | '';\n borderWidth?: MaybeAllValuesShorthandProperty | '';\n borderRadius?: MaybeAllValuesShorthandProperty>;\n}" + }, + "GridItemProps": { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "name": "GridItemProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "background", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "border", + "value": "BorderShorthand", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "borderColor", + "value": "ReducedColorKeyword | ''", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "", + "isOptional": true + } + ], + "value": "export interface GridItemProps extends GridItemElementProps {\n}" + }, + "BorderShorthand": { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "BorderShorthand", + "value": "ReducedBorderSizeKeyword | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword}` | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword} ${BorderStyleKeyword}`", + "description": "" + }, + "ReducedBorderSizeKeyword": { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedBorderSizeKeyword", + "value": "any", + "description": "" + }, + "ReducedColorKeyword": { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedColorKeyword", + "value": "any", + "description": "" + }, + "BorderStyleKeyword": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "BorderStyleKeyword", + "value": "\"none\" | \"solid\" | \"dashed\" | \"dotted\" | \"auto\"", + "description": "" + }, + "MaybeAllValuesShorthandProperty": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "MaybeAllValuesShorthandProperty", + "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", + "description": "" + } + } + } + ], + "defaultExample": { + "image": "grid-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-grid gridTemplateColumns=\"1fr auto\" gap=\"base\">\n <s-grid-item gridColumn=\"span 2\" border=\"base\" borderStyle=\"dashed\">\n Plants for sale\n </s-grid-item>\n <s-grid-item border=\"base\" borderStyle=\"dashed\">\n Pothos\n </s-grid-item>\n <s-grid-item border=\"base\" borderStyle=\"dashed\">\n $25.00\n </s-grid-item>\n</s-grid>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Heading", + "description": "The heading component renders hierarchical titles to communicate the structure and organization of page content. Use heading to create section titles and content headers that help users understand information hierarchy and navigate content.\n\nHeading levels adjust automatically based on nesting within parent [section](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/layout-and-structure/section) components, ensuring meaningful and accessible page outlines without manual level management.", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "heading-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Typography and content", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "HeadingElementProps", + "typeDefinitions": { + "HeadingElementProps": { + "filePath": "src/surfaces/checkout/components/Heading.ts", + "name": "HeadingElementProps", + "description": "", + "members": [], + "value": "export interface HeadingElementProps extends Pick {\n}" + } + } + } + ], + "defaultExample": { + "image": "heading-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-heading>Contact</s-heading>\n", + "language": "html" + } + ] + } + }, + "subSections": [ + { + "title": "Useful for", + "type": "Generic", + "anchorLink": "useful-for", + "sectionContent": "- Creating consistent titles and subtitles throughout a page.\n- Helping users with assistive technology (such as screen readers) navigate content." + }, + { + "title": "Considerations", + "type": "Generic", + "anchorLink": "considerations", + "sectionContent": "- The heading level is determined by the level of nesting, starting at h2.\n- Prefer using the `heading` prop in `s-section`. Only use `s-heading` when you need a custom heading layout." + }, + { + "type": "Generic", + "anchorLink": "best-practices", + "title": "Best Practices", + "sectionContent": "- Use short headings for quick scanning.\n- Use plain, clear terms.\n- Avoid jargon and technical language.\n- Avoid using different terms for the same concept.\n- Avoid duplicating content from the surrounding context." + } + ] + }, + { + "name": "Icon", + "description": "The icon component renders graphic symbols to visually communicate actions, status, and navigation throughout the interface. Use icon to reinforce button actions, indicate status states, or provide wayfinding cues that help users understand available functionality.\n\nIcons support multiple sizes, tones for semantic meaning, and can be integrated with other components like [button](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/actions/button), [badge](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/feedback-and-status-indicators/badge), and [chip](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/typography-and-content/chip) to enhance visual communication.", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "icon-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Media and visuals", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "IconElementProps", + "typeDefinitions": { + "IconElementProps": { + "filePath": "src/surfaces/checkout/components/Icon.ts", + "name": "IconElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Icon.ts", + "syntaxKind": "PropertySignature", + "name": "size", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Icon.ts", + "syntaxKind": "PropertySignature", + "name": "tone", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Icon.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "'' | ReducedIconTypes", + "description": "", + "isOptional": true + } + ], + "value": "export interface IconElementProps extends Pick {\n tone?: Extract;\n size?: Extract;\n type?: '' | ReducedIconTypes;\n}" + }, + "IconProps": { + "filePath": "src/surfaces/checkout/components/Icon.ts", + "name": "IconProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Icon.ts", + "syntaxKind": "PropertySignature", + "name": "size", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Icon.ts", + "syntaxKind": "PropertySignature", + "name": "tone", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Icon.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "'' | ReducedIconTypes", + "description": "", + "isOptional": true + } + ], + "value": "export interface IconProps extends IconElementProps {\n}" + }, + "ReducedIconTypes": { + "filePath": "src/surfaces/checkout/components/Icon.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedIconTypes", + "value": "(typeof CHECKOUT_AVAILABLE_ICONS)[number]", + "description": "" + } + } + } + ], + "defaultExample": { + "image": "icon-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-icon type=\"store\" />\n<s-icon type=\"star\" />\n<s-icon type=\"settings\" />\n<s-icon type=\"image\" />\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Image", + "description": "The image component embeds images within the interface with control over presentation and loading behavior. Use image to visually illustrate concepts, showcase products, display user content, or support tasks and interactions with visual context.\n\nImages support responsive sizing, alt text for accessibility, aspect ratio control, and loading states for progressive enhancement. For small preview images in lists or tables, use [thumbnail](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/media-and-visuals/thumbnail). For profile images, use [avatar](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/media-and-visuals/avatar).", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "image-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Media and visuals", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "ImageElementProps", + "typeDefinitions": { + "ImageElementProps": { + "filePath": "src/surfaces/checkout/components/Image.ts", + "name": "ImageElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "border", + "value": "BorderShorthand", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "", + "isOptional": true + } + ], + "value": "export interface ImageElementProps extends Pick {\n border?: BorderShorthand;\n borderWidth?: MaybeAllValuesShorthandProperty | '';\n borderRadius?: MaybeAllValuesShorthandProperty>;\n}" + }, + "BorderShorthand": { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "BorderShorthand", + "value": "ReducedBorderSizeKeyword | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword}` | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword} ${BorderStyleKeyword}`", + "description": "" + }, + "ReducedBorderSizeKeyword": { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedBorderSizeKeyword", + "value": "any", + "description": "" + }, + "ReducedColorKeyword": { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedColorKeyword", + "value": "any", + "description": "" + }, + "BorderStyleKeyword": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "BorderStyleKeyword", + "value": "\"none\" | \"solid\" | \"dashed\" | \"dotted\" | \"auto\"", + "description": "" + }, + "MaybeAllValuesShorthandProperty": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "MaybeAllValuesShorthandProperty", + "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", + "description": "" + }, + "ImageProps": { + "filePath": "src/surfaces/checkout/components/Image.ts", + "name": "ImageProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "border", + "value": "BorderShorthand", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "", + "isOptional": true + } + ], + "value": "export interface ImageProps extends ImageElementProps {\n}" + } + } + } + ], + "defaultExample": { + "image": "image-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-image src=\"https://cdn.shopify.com/YOUR_IMAGE_HERE\" alt=\"Product image\"></s-image>\n", + "language": "html" + } + ] + } + }, + "subSections": [ + { + "type": "Generic", + "anchorLink": "best-practices", + "title": "Best Practices", + "sectionContent": "- Use high-resolution images to ensure they look crisp on all devices.\n- Optimize images for performance to reduce load times.\n- Use images purposefully to add clarity and guide users through the experience." + } + ] + }, + { + "name": "Image group", + "description": "Display up to 4 images in a grid or stacked layout. The images are displayed as a grid when used within a [Section](/docs/api/customer-account-ui-extensions/polaris-web-components/structure/section) component. For example, images of products in a wishlist or subscription. When there are more than 4 images, the component indicates how many more images are not displayed.", + "thumbnail": "imagegroup-thumbnail.png", + "requires": "", + "isVisualComponent": true, + "type": "", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "ImageGroupPropsDocs", + "typeDefinitions": { + "ImageGroupPropsDocs": { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ImageGroupPropsDocs", + "value": "ImageGroupProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "PropertySignature", + "name": "totalItems", + "value": "number", + "description": "Indicates the total number of items that could be displayed in the image group. It is used to determine the remaining number to show when all the available image slots have been filled.", + "isOptional": true + } + ] + } + } + } + ], + "category": "Polaris web components", + "subCategory": "Media and visuals", + "defaultExample": { + "image": "imagegroup-default.png", + "altText": "An example of the ImageGroup component shows a group of four images of plants, arranged in a 2x2 grid.", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-image-group>\n <s-image \n src=\"https://cdn.shopify.com/YOUR_IMAGE_HERE\"\n alt=\"Product image\"\n ></s-image>\n <s-image \n src=\"https://cdn.shopify.com/YOUR_IMAGE_HERE\"\n alt=\"Product image\"\n ></s-image>\n <s-image \n src=\"https://cdn.shopify.com/YOUR_IMAGE_HERE\"\n alt=\"Product image\"\n ></s-image>\n <s-image \n src=\"https://cdn.shopify.com/YOUR_IMAGE_HERE\"\n alt=\"Product image\"\n ></s-image>\n</s-image-group>\n", + "language": "jsx" + } + ] + } + }, + "subSections": [ + { + "type": "Generic", + "anchorLink": "best-practices", + "title": "Best practices", + "sectionContent": "\nUse these best practices to deliver a clear and accessible experience in your extensions.\n\n### Write concise alt text for each image\n\nDescribe what’s important about each image so all users can understand the content.\n\n### Optimize performance\n\nCompress images and use modern formats; consider lazy loading to reduce initial load times.\n\n### Preserve visual breathing room\n\nMaintain consistent spacing around the group so images don’t feel crowded or overwhelming.\n" + } + ], + "related": [] + }, + { + "name": "Link", + "description": "The link component makes text interactive, allowing users to navigate to other pages or perform specific actions. Use link for navigation, external references, or triggering actions while maintaining standard link semantics and accessibility.\n\nLinks support standard URLs, custom protocols, navigation within Shopify admin pages, and can open in new windows for external destinations. For prominent actions or form submissions, use [button](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/actions/button) instead.", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "link-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Actions", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "LinkElementProps", + "typeDefinitions": { + "LinkElementProps": { + "filePath": "src/surfaces/checkout/components/Link.ts", + "name": "LinkElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Link.ts", + "syntaxKind": "PropertySignature", + "name": "target", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Link.ts", + "syntaxKind": "PropertySignature", + "name": "tone", + "value": "Extract", + "description": "", + "isOptional": true + } + ], + "value": "export interface LinkElementProps extends Pick {\n target?: Extract;\n tone?: Extract;\n}" + }, + "LinkProps": { + "filePath": "src/surfaces/checkout/components/Link.ts", + "name": "LinkProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Link.ts", + "syntaxKind": "PropertySignature", + "name": "target", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Link.ts", + "syntaxKind": "PropertySignature", + "name": "tone", + "value": "Extract", + "description": "", + "isOptional": true + } + ], + "value": "export interface LinkProps extends LinkElementProps, LinkEvents {\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "LinkElementEvents", + "typeDefinitions": { + "LinkElementEvents": { + "filePath": "src/surfaces/checkout/components/Link.ts", + "name": "LinkElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Link.ts", + "syntaxKind": "PropertySignature", + "name": "click", + "value": "CallbackEventListener", + "description": "Callback when the link is activated. This will be called before navigating to the location specified by `href`.", + "isOptional": true + } + ], + "value": "export interface LinkElementEvents {\n /**\n * Callback when the link is activated.\n * This will be called before navigating to the location specified by `href`.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event\n */\n click?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/Link.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/Link.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + } + ], + "defaultExample": { + "image": "link-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-link href=\"https://www.shopify.com/ca/legal/privacy\">Privacy policy</s-link>\n", + "language": "html" + } + ] + } + }, + "subSections": [ + { + "type": "Generic", + "anchorLink": "best-practices", + "title": "Best Practices", + "sectionContent": "- Use links for navigation and buttons for actions.\n- `s-button` and `s-link` carry style and accessibility information. Use them consistently for better accessibility and visual coherence." + } + ] + }, + { + "name": "Map", + "description": "Use Map to display a map on a page. This component is useful for displaying a map of a location, such as a store or a customer’s address.", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "map-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Media and visuals", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "MapElementProps", + "typeDefinitions": { + "MapElementProps": { + "filePath": "src/surfaces/checkout/components/Map.ts", + "name": "MapElementProps", + "description": "", + "members": [], + "value": "export interface MapElementProps extends Pick {\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "MapElementEvents", + "typeDefinitions": { + "MapElementEvents": { + "filePath": "src/surfaces/checkout/components/Map.ts", + "name": "MapElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Map.ts", + "syntaxKind": "PropertySignature", + "name": "boundschange", + "value": "CallbackEventListener", + "description": "Callback when the viewport bounds have changed or the map is resized.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Map.ts", + "syntaxKind": "PropertySignature", + "name": "click", + "value": "CallbackEventListener", + "description": "Callback when the user clicks on the map.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Map.ts", + "syntaxKind": "PropertySignature", + "name": "dblclick", + "value": "CallbackEventListener", + "description": "Callback when the user double-clicks on the map.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Map.ts", + "syntaxKind": "PropertySignature", + "name": "viewchange", + "value": "CallbackEventListener", + "description": "Callback when the map view changes.", + "isOptional": true + } + ], + "value": "export interface MapElementEvents {\n /**\n * Callback when the viewport bounds have changed or the map is resized.\n */\n boundschange?: CallbackEventListener;\n /**\n * Callback when the user clicks on the map.\n */\n click?: CallbackEventListener;\n /**\n * Callback when the user double-clicks on the map.\n */\n dblclick?: CallbackEventListener;\n /**\n * Callback when the map view changes.\n */\n viewchange?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/Map.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/Map.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + }, + "MapBoundsEvent": { + "filePath": "src/surfaces/checkout/components/Map.ts", + "name": "MapBoundsEvent", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Map.ts", + "syntaxKind": "PropertySignature", + "name": "bounds", + "value": "{ northEast?: MapLocation; southWest?: MapLocation; }", + "description": "", + "isOptional": true + } + ], + "value": "export interface MapBoundsEvent {\n bounds?: {\n northEast?: MapLocation;\n southWest?: MapLocation;\n };\n}" + }, + "MapLocation": { + "filePath": "src/surfaces/checkout/components/Map.ts", + "name": "MapLocation", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Map.ts", + "syntaxKind": "PropertySignature", + "name": "latitude", + "value": "number", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Map.ts", + "syntaxKind": "PropertySignature", + "name": "longitude", + "value": "number", + "description": "", + "isOptional": true + } + ], + "value": "export interface MapLocation {\n latitude?: number;\n longitude?: number;\n}" + }, + "MapLocationEvent": { + "filePath": "src/surfaces/checkout/components/Map.ts", + "name": "MapLocationEvent", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Map.ts", + "syntaxKind": "PropertySignature", + "name": "location", + "value": "MapLocation", + "description": "", + "isOptional": true + } + ], + "value": "export interface MapLocationEvent {\n location?: MapLocation;\n}" + }, + "MapViewChangeEvent": { + "filePath": "src/surfaces/checkout/components/Map.ts", + "name": "MapViewChangeEvent", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Map.ts", + "syntaxKind": "PropertySignature", + "name": "location", + "value": "MapLocation", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Map.ts", + "syntaxKind": "PropertySignature", + "name": "zoom", + "value": "number", + "description": "", + "isOptional": true + } + ], + "value": "export interface MapViewChangeEvent extends MapLocationEvent {\n zoom?: number;\n}" + } + } + }, + { + "title": "Map marker", + "description": "Use MapMarker to display a marker on a map. Use only as a child of `s-map` component.", + "type": "MapMarkerElementProps", + "typeDefinitions": { + "MapMarkerElementProps": { + "filePath": "src/surfaces/checkout/components/MapMarker.ts", + "name": "MapMarkerElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/MapMarker.ts", + "syntaxKind": "PropertySignature", + "name": "command", + "value": "Extract", + "description": "", + "isOptional": true + } + ], + "value": "export interface MapMarkerElementProps extends Pick {\n command?: Extract;\n}" + }, + "MapMarkerProps": { + "filePath": "src/surfaces/checkout/components/MapMarker.ts", + "name": "MapMarkerProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/MapMarker.ts", + "syntaxKind": "PropertySignature", + "name": "command", + "value": "Extract", + "description": "", + "isOptional": true + } + ], + "value": "export interface MapMarkerProps extends MapMarkerElementProps, MapMarkerEvents {\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "MapMarkerElementEvents", + "typeDefinitions": { + "MapMarkerElementEvents": { + "filePath": "src/surfaces/checkout/components/MapMarker.ts", + "name": "MapMarkerElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/MapMarker.ts", + "syntaxKind": "PropertySignature", + "name": "click", + "value": "CallbackEventListener", + "description": "Callback when a marker is clicked.\n\nIt does not trigger a click event on the map itself.", + "isOptional": true + } + ], + "value": "export interface MapMarkerElementEvents {\n /**\n * Callback when a marker is clicked.\n *\n * It does not trigger a click event on the map itself.\n */\n click?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/MapMarker.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/MapMarker.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + }, + { + "title": "Slots", + "description": "Learn more about [component slots](/docs/api/checkout-ui-extensions/latest/using-polaris-components#slots).", + "type": "MapMarkerElementSlots", + "typeDefinitions": { + "MapMarkerElementSlots": { + "filePath": "src/surfaces/checkout/components/MapMarker.ts", + "name": "MapMarkerElementSlots", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/MapMarker.ts", + "syntaxKind": "PropertySignature", + "name": "graphic", + "value": "HTMLElement", + "description": "The graphic to use as the marker.\n\nIf unset, it will default to the provider’s default marker.", + "isOptional": true + } + ], + "value": "export interface MapMarkerElementSlots {\n /**\n * The graphic to use as the marker.\n *\n * If unset, it will default to the provider’s default marker.\n */\n graphic?: HTMLElement;\n}" + } + } + } + ], + "defaultExample": { + "image": "map-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-map apiKey=\"YOUR_API_KEY\" latitude={51.5074} longitude={-0.1278}>\n <s-map-marker latitude={51.5074} longitude={-0.1278}></s-map-marker>\n</s-map>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Menu", + "description": "Use a menu to display a list of actions in a popover. Actions can open a modal, trigger an event, or link to an external page.", + "thumbnail": "menu-thumbnail.png", + "requires": "", + "isVisualComponent": true, + "type": "", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "MenuPropsDocs", + "typeDefinitions": { + "MenuPropsDocs": { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "MenuPropsDocs", + "value": "MenuProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "A label to describe the purpose of the menu that is announced by screen readers.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + } + ] + } + } + }, + { + "title": "Children button properties", + "description": "The Menu component exclusively accepts Button elements with restricted props as its children. The `tone` prop will always be set to monochrome by default.", + "type": "Docs_Menu_Button_Action", + "typeDefinitions": { + "Docs_Menu_Button_Action": { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "name": "Docs_Menu_Button_Action", + "description": "", + "members": [ + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers.\n\nUse this when using only an icon or the button text is not enough context for users using assistive technologies.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "click", + "value": "((event: CallbackEventListener) => void) | null", + "description": "Callback when the button is activated. This will be called before the action indicated by `type`.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "command", + "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", + "description": "Sets the action the `commandFor` should take when this clickable is activated.\n\nSee the documentation of particular components for the actions they support.\n\n- `--auto`: a default action for the target component.\n- `--show`: shows the target component.\n- `--hide`: hides the target component.\n- `--toggle`: toggles the target component.\n- `--copy`: copies the target ClipboardItem.", + "isOptional": true, + "defaultValue": "'--auto'" + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "commandFor", + "value": "string", + "description": "ID of a component that should respond to activations (e.g. clicks) on this component.\n\nSee `command` for how to control the behavior of the target.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the button, disallowing any interaction.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "href", + "value": "string", + "description": "The URL to link to.\n\n- If set, it will navigate to the location specified by `href` after executing the `onClick` callback.\n- If a `commandFor` is set, the `command` will be executed instead of the navigation.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "loading", + "value": "boolean", + "description": "Replaces content with a loading indicator.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "target", + "value": "'auto' | '_self' | '_blank'", + "description": "Specifies where to display the linked URL", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "tone", + "value": "'auto' | 'neutral' | 'critical'", + "description": "Sets the tone of the Button, based on the intention of the information being conveyed.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "'button' | 'submit'", + "description": "The behavior of the button.\n\n- `'submit'` - Used to indicate the component acts as a submit button, meaning it submits the closest form.\n- `'button'` - Used to indicate the component acts as a button, meaning it has no default action.\n- `'reset'` - Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", + "isOptional": true, + "defaultValue": "'button'" + } + ], + "value": "export interface Docs_Menu_Button_Action\n extends Omit<\n ButtonProps,\n 'variant' | 'textDecoration' | 'inlineAlignment' | 'inlineSize' | 'size'\n > {}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + } + ], + "category": "Polaris web components", + "subCategory": "Actions", + "defaultExample": { + "image": "menu-default.png", + "altText": "An example of a Menu component shows three actions: Submit problem, Request return, and Cancel order.", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<>\n <s-button commandFor=\"order-actions-menu\">\n Manage\n </s-button>\n\n <s-menu\n id=\"order-actions-menu\"\n accessibilityLabel=\"List of order actions\"\n >\n <s-button>Submit problem</s-button>\n <s-button>Request return</s-button>\n <s-button tone=\"critical\">Cancel order</s-button>\n </s-menu>\n</>", + "language": "jsx" + } + ] + } + }, + "subSections": [ + { + "type": "Generic", + "anchorLink": "best-practices", + "title": "Best practices", + "sectionContent": "\nUse these best practices to deliver a clear and accessible experience in your extensions.\n\n### Place menus consistently\n\nPosition menus in the upper‑right of full‑page extensions to match account pages like order status.\n\n### Group page‑level actions\n\nKeep related actions in a single menu rather than scattering buttons across the page.\n\n### Limit items to what’s relevant\n\nInclude only actions that matter for the current page to reduce decision fatigue.\n\n### Order by frequency and risk\n\nList the most common or least risky actions at the top so they’re easy to reach.\n\n### Write concise, action‑first labels\n\nUse short labels (ideally two words) that start with a verb, use sentence case, avoid filler articles, and clearly state the outcome.\n" + } + ], + "related": [ + { + "name": "Popover", + "subtitle": "Component", + "url": "/docs/api/customer-account-ui-extensions/polaris-web-components/overlays/popover", + "type": "Component" + } + ] + }, + { + "name": "Modal", + "description": "Displays content in an overlay. Use to create a distraction-free experience such as a confirmation dialog or a settings panel.", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "modal-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Overlays", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "ModalElementProps", + "typeDefinitions": { + "ModalElementProps": { + "filePath": "src/surfaces/checkout/components/Modal.ts", + "name": "ModalElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Modal.ts", + "syntaxKind": "PropertySignature", + "name": "size", + "value": "Extract", + "description": "", + "isOptional": true + } + ], + "value": "export interface ModalElementProps extends Pick {\n size?: Extract;\n}" + }, + "ModalProps": { + "filePath": "src/surfaces/checkout/components/Modal.ts", + "name": "ModalProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Modal.ts", + "syntaxKind": "PropertySignature", + "name": "size", + "value": "Extract", + "description": "", + "isOptional": true + } + ], + "value": "export interface ModalProps extends ModalElementProps, ModalEvents {\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "ModalElementEvents", + "typeDefinitions": { + "ModalElementEvents": { + "filePath": "src/surfaces/checkout/components/Modal.ts", + "name": "ModalElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Modal.ts", + "syntaxKind": "PropertySignature", + "name": "afterhide", + "value": "CallbackEventListener", + "description": "Callback fired when the overlay is hidden **after** any animations to hide the overlay have finished.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Modal.ts", + "syntaxKind": "PropertySignature", + "name": "aftershow", + "value": "CallbackEventListener", + "description": "Callback fired when the overlay is shown **after** any animations to show the overlay have finished.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Modal.ts", + "syntaxKind": "PropertySignature", + "name": "hide", + "value": "CallbackEventListener", + "description": "Callback fired after the overlay is hidden.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Modal.ts", + "syntaxKind": "PropertySignature", + "name": "show", + "value": "CallbackEventListener", + "description": "Callback fired after the overlay is shown.", + "isOptional": true + } + ], + "value": "export interface ModalElementEvents {\n /**\n * Callback fired when the overlay is hidden **after** any animations to hide the overlay have finished.\n */\n afterhide?: CallbackEventListener;\n /**\n * Callback fired when the overlay is shown **after** any animations to show the overlay have finished.\n */\n aftershow?: CallbackEventListener;\n /**\n * Callback fired after the overlay is hidden.\n */\n hide?: CallbackEventListener;\n /**\n * Callback fired after the overlay is shown.\n */\n show?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/Modal.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/Modal.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + }, + { + "title": "Slots", + "description": "Learn more about [component slots](/docs/api/checkout-ui-extensions/latest/using-polaris-components#slots).", + "type": "ModalElementSlots", + "typeDefinitions": { + "ModalElementSlots": { + "filePath": "src/surfaces/checkout/components/Modal.ts", + "name": "ModalElementSlots", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Modal.ts", + "syntaxKind": "PropertySignature", + "name": "primary-action", + "value": "HTMLElement", + "description": "The primary action to perform, provided as a button type element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Modal.ts", + "syntaxKind": "PropertySignature", + "name": "secondary-actions", + "value": "HTMLElement", + "description": "The secondary actions to perform, provided as button type elements.", + "isOptional": true + } + ], + "value": "export interface ModalElementSlots {\n /**\n * The primary action to perform, provided as a button type element.\n */\n 'primary-action'?: HTMLElement;\n /**\n * The secondary actions to perform, provided as button type elements.\n */\n 'secondary-actions'?: HTMLElement;\n}" + } + } + }, + { + "title": "Methods", + "description": "Learn more about [component methods](/docs/api/checkout-ui-extensions/latest/using-polaris-components#methods).", + "type": "ModalElementMethods", + "typeDefinitions": { + "ModalElementMethods": { + "filePath": "src/surfaces/checkout/components/Modal.ts", + "name": "ModalElementMethods", + "description": "", + "members": [], + "value": "export interface ModalElementMethods extends Pick {\n}" + } + } + } + ], + "defaultExample": { + "image": "modal-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-button command=\"--show\" commandfor=\"modal-1\">Add Product</s-button>\n<s-modal id=\"modal-1\" heading=\"Return Policy\">\n <s-paragraph>\n We have a 30-day return policy, which means you have 30 days after receiving\n your item to request a return.\n </s-paragraph>\n <s-paragraph>\n To be eligible for a return, your item must be in the same condition that\n you received it, unworn or unused, with tags, and in its original packaging.\n You’ll also need the receipt or proof of purchase.\n </s-paragraph>\n <s-button\n variant=\"primary\"\n command=\"--hide\"\n commandfor=\"modal-1\"\n slot=\"primary-action\"\n >\n Close\n </s-button>\n</s-modal>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Money field", + "description": "The money field component collects monetary values from users with built-in currency formatting and validation. Use money field for prices, costs, or financial amounts to provide proper currency symbols, decimal handling, and numeric validation.\n\nMoney fields support currency codes, automatic formatting, and min/max constraints to ensure users enter valid monetary values. For non-currency numeric input, use [number field](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/forms/number-field).", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "money-field-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Forms", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "MoneyFieldElementProps", + "typeDefinitions": { + "MoneyFieldElementProps": { + "filePath": "src/surfaces/checkout/components/MoneyField.ts", + "name": "MoneyFieldElementProps", + "description": "", + "members": [], + "value": "export interface MoneyFieldElementProps extends Pick {\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "MoneyFieldElementEvents", + "typeDefinitions": { + "MoneyFieldElementEvents": { + "filePath": "src/surfaces/checkout/components/MoneyField.ts", + "name": "MoneyFieldElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/MoneyField.ts", + "syntaxKind": "PropertySignature", + "name": "blur", + "value": "CallbackEventListener", + "description": "Callback when the element loses focus.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/MoneyField.ts", + "syntaxKind": "PropertySignature", + "name": "change", + "value": "CallbackEventListener", + "description": "Callback when the user has **finished editing** a field, e.g. once they have blurred the field.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/MoneyField.ts", + "syntaxKind": "PropertySignature", + "name": "focus", + "value": "CallbackEventListener", + "description": "Callback when the element receives focus.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/MoneyField.ts", + "syntaxKind": "PropertySignature", + "name": "input", + "value": "CallbackEventListener", + "description": "Callback when the user makes any changes in the field.", + "isOptional": true + } + ], + "value": "export interface MoneyFieldElementEvents {\n /**\n * Callback when the element loses focus.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event\n */\n blur?: CallbackEventListener;\n /**\n * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n */\n change?: CallbackEventListener;\n /**\n * Callback when the element receives focus.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event\n */\n focus?: CallbackEventListener;\n /**\n * Callback when the user makes any changes in the field.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event\n */\n input?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/MoneyField.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/MoneyField.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + } + ], + "defaultExample": { + "image": "money-field-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-money-field label=\"Price\" defaultValue=\"9.99\"></s-money-field>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Number field", + "description": "The number field component captures numeric input with built-in number validation. Use it to collect quantities, prices, or other numeric information.\n\nThe component supports min/max constraints and step increments for guided numeric entry. For monetary values with currency formatting, use [money field](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/forms/money-field).", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "number-field-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Forms", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "NumberFieldElementProps", + "typeDefinitions": { + "NumberFieldElementProps": { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "name": "NumberFieldElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "PropertySignature", + "name": "icon", + "value": "\"\" | \"reset\" | \"map\" | \"menu\" | \"circle\" | \"filter\" | \"image\" | \"alert-circle\" | \"alert-triangle-filled\" | \"alert-triangle\" | \"arrow-down\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up-right\" | \"arrow-up\" | \"bag\" | \"bullet\" | \"calendar\" | \"camera\" | \"caret-down\" | \"cart\" | \"cash-dollar\" | \"categories\" | \"check-circle\" | \"check-circle-filled\" | \"check\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"clipboard\" | \"clock\" | \"credit-card\" | \"delete\" | \"delivered\" | \"delivery\" | \"disabled\" | \"discount\" | \"edit\" | \"email\" | \"empty\" | \"external\" | \"geolocation\" | \"gift-card\" | \"globe\" | \"grid\" | \"info-filled\" | \"info\" | \"list-bulleted\" | \"location\" | \"lock\" | \"menu-horizontal\" | \"menu-vertical\" | \"minus\" | \"mobile\" | \"note\" | \"order\" | \"organization\" | \"plus\" | \"profile\" | \"question-circle-filled\" | \"question-circle\" | \"reorder\" | \"return\" | \"savings\" | \"search\" | \"settings\" | \"star-filled\" | \"star-half\" | \"star\" | \"store\" | \"truck\" | \"upload\" | \"x-circle-filled\" | \"x-circle\" | \"x\"", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "PropertySignature", + "name": "placeholder", + "value": "string", + "description": "", + "isOptional": true, + "deprecationMessage": "Use `label` instead.", + "isPrivate": true + } + ], + "value": "export interface NumberFieldElementProps extends Pick {\n icon?: IconProps['type'];\n /**\n * @deprecated Use `label` instead.\n * @private\n */\n placeholder?: string;\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "NumberFieldElementEvents", + "typeDefinitions": { + "NumberFieldElementEvents": { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "name": "NumberFieldElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "PropertySignature", + "name": "blur", + "value": "CallbackEventListener", + "description": "Callback when the element loses focus.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "PropertySignature", + "name": "change", + "value": "CallbackEventListener", + "description": "Callback when the user has **finished editing** a field, e.g. once they have blurred the field.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "PropertySignature", + "name": "focus", + "value": "CallbackEventListener", + "description": "Callback when the element receives focus.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "PropertySignature", + "name": "input", + "value": "CallbackEventListener", + "description": "Callback when the user makes any changes in the field.", + "isOptional": true + } + ], + "value": "export interface NumberFieldElementEvents {\n /**\n * Callback when the element loses focus.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event\n */\n blur?: CallbackEventListener;\n /**\n * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n */\n change?: CallbackEventListener;\n /**\n * Callback when the element receives focus.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event\n */\n focus?: CallbackEventListener;\n /**\n * Callback when the user makes any changes in the field.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event\n */\n input?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + }, + { + "title": "Slots", + "description": "Learn more about [component slots](/docs/api/checkout-ui-extensions/latest/using-polaris-components#slots).", + "type": "NumberFieldElementSlots", + "typeDefinitions": { + "NumberFieldElementSlots": { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "name": "NumberFieldElementSlots", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "PropertySignature", + "name": "accessory", + "value": "HTMLElement", + "description": "Additional content to be displayed in the field. Commonly used to display an icon that activates a tooltip providing more information.", + "isOptional": true + } + ], + "value": "export interface NumberFieldElementSlots {\n /**\n * Additional content to be displayed in the field.\n * Commonly used to display an icon that activates a tooltip providing more information.\n */\n accessory?: HTMLElement;\n}" + } + } + } + ], + "defaultExample": { + "image": "number-field-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-number-field\n label=\"Quantity\"\n controls=\"stepper\"\n defaultValue=\"1\"\n step={1}\n min={0}\n max={100}\n></s-number-field>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Ordered list", + "description": "The ordered list component displays a numbered list of related items in a specific sequence. Use ordered list to present step-by-step instructions, ranked items, procedures, or any content where order and sequence matter to understanding.\n\nOrdered lists automatically number items and support nested lists for hierarchical content organization. For items where order doesn't matter, use [unordered list](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/layout-and-structure/unordered-list).", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "ordered-list-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Typography and content", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "OrderedListElementProps", + "typeDefinitions": { + "OrderedListElementProps": { + "filePath": "src/surfaces/checkout/components/OrderedList.ts", + "name": "OrderedListElementProps", + "description": "", + "members": [], + "value": "export interface OrderedListElementProps extends OrderedListProps$1 {\n}" + } + } + }, + { + "title": "List item", + "description": "The list item component represents a single entry within an ordered list or unordered list. Use list item to structure individual points, steps, or items within a list, with each item automatically receiving appropriate list markers (bullets or numbers) from its parent list.\n\nList item must be used as a direct child of ordered list or unordered list components. Each list item can contain text, inline formatting, or other components to create rich list content.", + "type": "ListItemElementProps", + "typeDefinitions": { + "ListItemElementProps": { + "filePath": "src/surfaces/checkout/components/ListItem.ts", + "name": "ListItemElementProps", + "description": "", + "members": [], + "value": "export interface ListItemElementProps extends Pick {\n}" + } + } + } + ], + "defaultExample": { + "image": "ordered-list-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-ordered-list>\n <s-list-item>Add items to your cart</s-list-item>\n <s-list-item>Review your order details</s-list-item>\n <s-list-item>Complete your purchase</s-list-item>\n</s-ordered-list>\n", + "language": "html" + } + ] + } + }, + "subSections": [ + { + "type": "Generic", + "anchorLink": "best-practices", + "title": "Best Practices", + "sectionContent": "- Use `s-ordered-list` when you need to present items in a specific sequence or order.\n- Each item in the list should be wrapped in a `s-list-item` component.\n- Keep list items concise and consistent in length when possible.\n- Use `s-ordered-list` for step-by-step instructions, numbered procedures, or ranked items.\n- Consider using `s-ordered-list` when the order of items is important for understanding." + } + ] + }, + { + "name": "Page", + "description": "The outer wrapper of the page—including the page title, subtitle, and page-level actions—displayed in a familiar and consistent style that sets expectations about the purpose of the page.", + "thumbnail": "page-thumbnail.png", + "requires": "", + "isVisualComponent": true, + "type": "", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "PagePropsDocs", + "typeDefinitions": { + "PagePropsDocs": { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "PagePropsDocs", + "value": "PageProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "PropertySignature", + "name": "heading", + "value": "string", + "description": "The main page heading", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "PropertySignature", + "name": "subheading", + "value": "string", + "description": "The text to be used as subheading.", + "isOptional": true + } + ] + } + } + }, + { + "title": "Slots", + "description": "", + "type": "PageElementSlotsDocs", + "typeDefinitions": { + "PageElementSlotsDocs": { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "PageElementSlotsDocs", + "value": "PageElementSlots", + "description": "", + "members": [ + { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "PropertySignature", + "name": "breadcrumb-actions", + "value": "HTMLElement", + "description": "The breadcrumb actions for the page. Accepts a single Button element with restricted properties (see below).", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "PropertySignature", + "name": "primary-action", + "value": "HTMLElement", + "description": "The primary action for the page. Accepts a single Button element with restricted properties (see below).", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "PropertySignature", + "name": "secondary-actions", + "value": "HTMLElement", + "description": "The secondary actions for the page. Accepts multiple Button elements with restricted properties (see below).", + "isOptional": true + } + ] + } + } + }, + { + "title": "Breadcrumb-actions slot button properties", + "description": "Supported props for Button used inside Page `breadcrumb-actions` slot.

`children` are not supported.
Use `accessibilityLabel` instead.", + "type": "Docs_Page_Button_BreadcrumbAction", + "typeDefinitions": { + "Docs_Page_Button_BreadcrumbAction": { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "name": "Docs_Page_Button_BreadcrumbAction", + "description": "", + "members": [ + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "A label used for buyers using assistive technologies. Needed because `children` passed to this component will be discarded." + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "click", + "value": "((event: CallbackEventListener) => void) | null", + "description": "Callback when the button is activated. This will be called before the action indicated by `type`.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "href", + "value": "string", + "description": "The URL to link to.\n\n- If set, it will navigate to the location specified by `href` after executing the `onClick` callback.\n- If a `commandFor` is set, the `command` will be executed instead of the navigation.", + "isOptional": true + } + ], + "value": "export interface Docs_Page_Button_BreadcrumbAction\n extends Pick {\n /**\n * A label used for buyers using assistive technologies. Needed because `children` passed to this component will be discarded.\n */\n accessibilityLabel: ButtonProps['accessibilityLabel'];\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + }, + { + "title": "Primary-action slot button properties", + "description": "Supported props for Buttons used inside Page `primary-action` slot.

`children` only support text.", + "type": "Docs_Page_Button_PrimaryAction", + "typeDefinitions": { + "Docs_Page_Button_PrimaryAction": { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "name": "Docs_Page_Button_PrimaryAction", + "description": "", + "members": [ + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers.\n\nUse this when using only an icon or the button text is not enough context for users using assistive technologies.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "click", + "value": "((event: CallbackEventListener) => void) | null", + "description": "Callback when the button is activated. This will be called before the action indicated by `type`.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "command", + "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", + "description": "Sets the action the `commandFor` should take when this clickable is activated.\n\nSee the documentation of particular components for the actions they support.\n\n- `--auto`: a default action for the target component.\n- `--show`: shows the target component.\n- `--hide`: hides the target component.\n- `--toggle`: toggles the target component.\n- `--copy`: copies the target ClipboardItem.", + "isOptional": true, + "defaultValue": "'--auto'" + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "commandFor", + "value": "string", + "description": "ID of a component that should respond to activations (e.g. clicks) on this component.\n\nSee `command` for how to control the behavior of the target.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the button, disallowing any interaction.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "href", + "value": "string", + "description": "The URL to link to.\n\n- If set, it will navigate to the location specified by `href` after executing the `onClick` callback.\n- If a `commandFor` is set, the `command` will be executed instead of the navigation.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "loading", + "value": "boolean", + "description": "Replaces content with a loading indicator.", + "isOptional": true, + "defaultValue": "false" + } + ], + "value": "export interface Docs_Page_Button_PrimaryAction\n extends Pick<\n ButtonProps,\n | 'click'\n | 'loading'\n | 'disabled'\n | 'accessibilityLabel'\n | 'href'\n | 'command'\n | 'commandFor'\n > {}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + }, + { + "title": "Secondary-actions slot button properties", + "description": "Supported props for Button used inside Page `secondary-actions` slot.

`children` only support text.", + "type": "Docs_Page_Button_SecondaryAction", + "typeDefinitions": { + "Docs_Page_Button_SecondaryAction": { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "name": "Docs_Page_Button_SecondaryAction", + "description": "", + "members": [ + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers.\n\nUse this when using only an icon or the button text is not enough context for users using assistive technologies.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "click", + "value": "((event: CallbackEventListener) => void) | null", + "description": "Callback when the button is activated. This will be called before the action indicated by `type`.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "command", + "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", + "description": "Sets the action the `commandFor` should take when this clickable is activated.\n\nSee the documentation of particular components for the actions they support.\n\n- `--auto`: a default action for the target component.\n- `--show`: shows the target component.\n- `--hide`: hides the target component.\n- `--toggle`: toggles the target component.\n- `--copy`: copies the target ClipboardItem.", + "isOptional": true, + "defaultValue": "'--auto'" + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "commandFor", + "value": "string", + "description": "ID of a component that should respond to activations (e.g. clicks) on this component.\n\nSee `command` for how to control the behavior of the target.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the button, disallowing any interaction.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "href", + "value": "string", + "description": "The URL to link to.\n\n- If set, it will navigate to the location specified by `href` after executing the `onClick` callback.\n- If a `commandFor` is set, the `command` will be executed instead of the navigation.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "loading", + "value": "boolean", + "description": "Replaces content with a loading indicator.", + "isOptional": true, + "defaultValue": "false" + } + ], + "value": "export interface Docs_Page_Button_SecondaryAction\n extends Pick<\n ButtonProps,\n | 'click'\n | 'loading'\n | 'disabled'\n | 'accessibilityLabel'\n | 'href'\n | 'command'\n | 'commandFor'\n > {}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + } + ], + "category": "Polaris web components", + "subCategory": "Layout and structure", + "defaultExample": { + "image": "page-default.png", + "altText": "An example of the Page component shows the page title, description, and order action buttons on the Order status page.", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-page\n heading=\"Order #1411\"\n subheading=\"Confirmed Oct 5\"\n>\n <s-button slot=\"primary-action\">\n Buy again\n </s-button>\n <s-button slot=\"secondary-actions\">\n Edit order\n </s-button>\n <s-button slot=\"secondary-actions\">\n Cancel order\n </s-button>\n <s-button\n slot=\"breadcrumb-actions\"\n accessibilityLabel=\"Back to orders\"\n ></s-button>\n Content\n</s-page>", + "language": "jsx" + } + ] + } + }, + "subSections": [ + { + "type": "Generic", + "anchorLink": "best-practices", + "title": "Best practices", + "sectionContent": "\nUse these best practices to deliver a clear and accessible experience in your extensions.\n\n### Write clear, focused headings\n\nState the main purpose of the page in a few words and use sentence case for readability.\n\n### Use subheadings only when they add value\n\nAdd a subheading when it provides helpful context that’s different from the heading. Keep it brief and use sparingly to avoid clutter.\n\n### Add page‑level actions thoughtfully\n\nInclude buttons in the header only for actions that affect the entire page or flow. Make the main action a primary button, keep lesser actions secondary, limit the total number, and follow established UX patterns—especially for order actions.\n" + } + ], + "related": [] + }, + { + "name": "Paragraph", + "description": "The paragraph component displays blocks of text content and can contain inline elements like buttons, links, or emphasized text. Use paragraph to present standalone blocks of readable content, descriptions, or explanatory text.\n\nParagraphs support alignment options and can wrap inline components to create rich, formatted content blocks. For inline text styling, use [text](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/typography-and-content/text).", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "paragraph-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Typography and content", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "ParagraphElementProps", + "typeDefinitions": { + "ParagraphElementProps": { + "filePath": "src/surfaces/checkout/components/Paragraph.ts", + "name": "ParagraphElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Paragraph.ts", + "syntaxKind": "PropertySignature", + "name": "color", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Paragraph.ts", + "syntaxKind": "PropertySignature", + "name": "tone", + "value": "Extract", + "description": "", + "isOptional": true + } + ], + "value": "export interface ParagraphElementProps extends Pick {\n color?: Extract;\n tone?: Extract;\n}" + }, + "ParagraphProps": { + "filePath": "src/surfaces/checkout/components/Paragraph.ts", + "name": "ParagraphProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Paragraph.ts", + "syntaxKind": "PropertySignature", + "name": "color", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Paragraph.ts", + "syntaxKind": "PropertySignature", + "name": "tone", + "value": "Extract", + "description": "", + "isOptional": true + } + ], + "value": "export interface ParagraphProps extends ParagraphElementProps {\n}" + } + } + } + ], + "defaultExample": { + "image": "paragraph-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-paragraph>Ship in 1-2 business days.</s-paragraph>\n", + "language": "html" + } + ] + } + }, + "subSections": [ + { + "type": "Generic", + "anchorLink": "best-practices", + "title": "Best Practices", + "sectionContent": "- Create contrast between more and less important text using properties such as `color` and `tone`." + } + ] + }, + { + "name": "Password field", + "description": "The password field component securely collects sensitive information from users. Use password field for password entry, where input characters are automatically masked for privacy.\n\nPassword fields support validation, help text, and accessibility features to create secure and user-friendly authentication experiences. For general text input, use [text field](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/forms/text-field).", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "password-field-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Forms", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "PasswordFieldElementProps", + "typeDefinitions": { + "PasswordFieldElementProps": { + "filePath": "src/surfaces/checkout/components/PasswordField.ts", + "name": "PasswordFieldElementProps", + "description": "", + "members": [], + "value": "export interface PasswordFieldElementProps extends Pick {\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "PasswordFieldElementEvents", + "typeDefinitions": { + "PasswordFieldElementEvents": { + "filePath": "src/surfaces/checkout/components/PasswordField.ts", + "name": "PasswordFieldElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/PasswordField.ts", + "syntaxKind": "PropertySignature", + "name": "blur", + "value": "CallbackEventListener", + "description": "Callback when the element loses focus.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/PasswordField.ts", + "syntaxKind": "PropertySignature", + "name": "change", + "value": "CallbackEventListener", + "description": "Callback when the user has **finished editing** a field, e.g. once they have blurred the field.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/PasswordField.ts", + "syntaxKind": "PropertySignature", + "name": "focus", + "value": "CallbackEventListener", + "description": "Callback when the element receives focus.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/PasswordField.ts", + "syntaxKind": "PropertySignature", + "name": "input", + "value": "CallbackEventListener", + "description": "Callback when the user makes any changes in the field.", + "isOptional": true + } + ], + "value": "export interface PasswordFieldElementEvents {\n /**\n * Callback when the element loses focus.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event\n */\n blur?: CallbackEventListener;\n /**\n * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n */\n change?: CallbackEventListener;\n /**\n * Callback when the element receives focus.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event\n */\n focus?: CallbackEventListener;\n /**\n * Callback when the user makes any changes in the field.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event\n */\n input?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/PasswordField.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/PasswordField.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + }, + { + "title": "Slots", + "description": "Learn more about [component slots](/docs/api/checkout-ui-extensions/latest/using-polaris-components#slots).", + "type": "PasswordFieldElementSlots", + "typeDefinitions": { + "PasswordFieldElementSlots": { + "filePath": "src/surfaces/checkout/components/PasswordField.ts", + "name": "PasswordFieldElementSlots", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/PasswordField.ts", + "syntaxKind": "PropertySignature", + "name": "accessory", + "value": "HTMLElement", + "description": "Additional content to be displayed in the field. Commonly used to display an icon that activates a tooltip providing more information.", + "isOptional": true + } + ], + "value": "export interface PasswordFieldElementSlots {\n /**\n * Additional content to be displayed in the field.\n * Commonly used to display an icon that activates a tooltip providing more information.\n */\n accessory?: HTMLElement;\n}" + } + } + } + ], + "defaultExample": { + "image": "password-field-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-password-field label=\"Password\" defaultValue=\"12345678\"></s-password-field>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Payment icon", + "description": "Displays icons representing payment methods. Use to visually communicate available or saved payment options clearly", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "payment-icon-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Media and visuals", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "PaymentIconElementProps", + "typeDefinitions": { + "PaymentIconElementProps": { + "filePath": "src/surfaces/checkout/components/PaymentIcon.ts", + "name": "PaymentIconElementProps", + "description": "", + "members": [], + "value": "export interface PaymentIconElementProps extends PaymentIconProps$1 {\n}" + } + } + } + ], + "defaultExample": { + "image": "payment-icon-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-payment-icon type=\"paypal\" />\n<s-payment-icon type=\"apple-pay\" />\n<s-payment-icon type=\"mastercard\" />\n<s-payment-icon type=\"shop-pay\" />\n<s-payment-icon type=\"visa\" />\n<s-payment-icon type=\"amex\" />\n<s-payment-icon type=\"klarna\" />\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Phone field", + "description": "Use PhoneField to allow users to enter phone numbers.", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "phone-field-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Forms", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "PhoneFieldElementProps", + "typeDefinitions": { + "PhoneFieldElementProps": { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "name": "PhoneFieldElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "placeholder", + "value": "string", + "description": "", + "isOptional": true, + "deprecationMessage": "Use `label` instead.", + "isPrivate": true + } + ], + "value": "export interface PhoneFieldElementProps extends Pick {\n /**\n * @deprecated Use `label` instead.\n * @private\n */\n placeholder?: string;\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "PhoneFieldElementEvents", + "typeDefinitions": { + "PhoneFieldElementEvents": { + "filePath": "src/surfaces/checkout/components/PhoneField.ts", + "name": "PhoneFieldElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/PhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "blur", + "value": "CallbackEventListener", + "description": "Callback when the element loses focus.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/PhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "change", + "value": "CallbackEventListener", + "description": "Callback when the user has **finished editing** a field, e.g. once they have blurred the field.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/PhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "focus", + "value": "CallbackEventListener", + "description": "Callback when the element receives focus.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/PhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "input", + "value": "CallbackEventListener", + "description": "Callback when the user makes any changes in the field.", + "isOptional": true + } + ], + "value": "export interface PhoneFieldElementEvents {\n /**\n * Callback when the element loses focus.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event\n */\n blur?: CallbackEventListener;\n /**\n * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n */\n change?: CallbackEventListener;\n /**\n * Callback when the element receives focus.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event\n */\n focus?: CallbackEventListener;\n /**\n * Callback when the user makes any changes in the field.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event\n */\n input?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/PhoneField.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/PhoneField.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + }, + { + "title": "Slots", + "description": "Learn more about [component slots](/docs/api/checkout-ui-extensions/latest/using-polaris-components#slots).", + "type": "PhoneFieldElementSlots", + "typeDefinitions": { + "PhoneFieldElementSlots": { + "filePath": "src/surfaces/checkout/components/PhoneField.ts", + "name": "PhoneFieldElementSlots", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/PhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "accessory", + "value": "HTMLElement", + "description": "Additional content to be displayed in the field. Commonly used to display an icon that activates a tooltip providing more information.", + "isOptional": true + } + ], + "value": "export interface PhoneFieldElementSlots {\n /**\n * Additional content to be displayed in the field.\n * Commonly used to display an icon that activates a tooltip providing more information.\n */\n accessory?: HTMLElement;\n}" + } + } + } + ], + "defaultExample": { + "image": "phone-field-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-phone-field label=\"Phone number\" defaultValue=\"888-746-7439\">\n</s-phone-field>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Popover", + "description": "Popovers are used to display content in an overlay that can be triggered by a button.", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "popover-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Overlays", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "PopoverElementProps", + "typeDefinitions": { + "PopoverElementProps": { + "filePath": "src/surfaces/checkout/components/Popover.ts", + "name": "PopoverElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Popover.ts", + "syntaxKind": "PropertySignature", + "name": "blockSize", + "value": "SizeUnitsOrAuto", + "description": "Adjust the block size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Popover.ts", + "syntaxKind": "PropertySignature", + "name": "inlineSize", + "value": "SizeUnitsOrAuto", + "description": "Adjust the inline size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Popover.ts", + "syntaxKind": "PropertySignature", + "name": "maxBlockSize", + "value": "SizeUnitsOrNone", + "description": "Adjust the maximum block size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Popover.ts", + "syntaxKind": "PropertySignature", + "name": "maxInlineSize", + "value": "SizeUnitsOrNone", + "description": "Adjust the maximum inline size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Popover.ts", + "syntaxKind": "PropertySignature", + "name": "minBlockSize", + "value": "SizeUnits", + "description": "Adjust the minimum block size.", + "isOptional": true, + "defaultValue": "'0'" + }, + { + "filePath": "src/surfaces/checkout/components/Popover.ts", + "syntaxKind": "PropertySignature", + "name": "minInlineSize", + "value": "SizeUnits", + "description": "Adjust the minimum inline size.", + "isOptional": true, + "defaultValue": "'0'" + } + ], + "value": "export interface PopoverElementProps extends Pick {\n /**\n * Adjust the block size.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/block-size\n *\n * @default 'auto'\n */\n blockSize?: SizeUnitsOrAuto;\n /**\n * Adjust the inline size.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size\n *\n * @default 'auto'\n */\n inlineSize?: SizeUnitsOrAuto;\n /**\n * Adjust the maximum block size.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size\n *\n * @default 'none'\n */\n maxBlockSize?: SizeUnitsOrNone;\n /**\n * Adjust the maximum inline size.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size\n *\n * @default 'none'\n */\n maxInlineSize?: SizeUnitsOrNone;\n /**\n * Adjust the minimum block size.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size\n *\n * @default '0'\n */\n minBlockSize?: SizeUnits;\n /**\n * Adjust the minimum inline size.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size\n *\n * @default '0'\n */\n minInlineSize?: SizeUnits;\n}" + }, + "SizeUnitsOrAuto": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "SizeUnitsOrAuto", + "value": "SizeUnits | \"auto\"", + "description": "" + }, + "SizeUnits": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "SizeUnits", + "value": "`${number}px` | `${number}%` | `0`", + "description": "" + }, + "SizeUnitsOrNone": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "SizeUnitsOrNone", + "value": "SizeUnits | \"none\"", + "description": "" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "PopoverElementEvents", + "typeDefinitions": { + "PopoverElementEvents": { + "filePath": "src/surfaces/checkout/components/Popover.ts", + "name": "PopoverElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Popover.ts", + "syntaxKind": "PropertySignature", + "name": "hide", + "value": "CallbackEventListener", + "description": "Callback fired after the overlay is hidden.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Popover.ts", + "syntaxKind": "PropertySignature", + "name": "show", + "value": "CallbackEventListener", + "description": "Callback fired after the overlay is shown.", + "isOptional": true + } + ], + "value": "export interface PopoverElementEvents {\n /**\n * Callback fired after the overlay is hidden.\n */\n hide?: CallbackEventListener;\n /**\n * Callback fired after the overlay is shown.\n */\n show?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/Popover.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/Popover.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + } + ], + "defaultExample": { + "image": "popover-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-button commandFor=\"popover-veteran-id\">Open Popover</s-button>\n<s-popover id=\"popover-veteran-id\">\n <s-stack gap=\"base\" padding=\"base\" direction=\"inline\">\n <s-text-field label=\"Veteran ID\"></s-text-field>\n <s-button variant=\"primary\">Validate</s-button>\n </s-stack>\n</s-popover>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Press button", + "description": "Allows users to toggle between active/inactive states. Use to represent a persistent on/off or selected/unselected status.", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "press-button-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Actions", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "PressButtonElementProps", + "typeDefinitions": { + "PressButtonElementProps": { + "filePath": "src/surfaces/checkout/components/PressButton.ts", + "name": "PressButtonElementProps", + "description": "", + "members": [], + "value": "export interface PressButtonElementProps extends Pick {\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "PressButtonElementEvents", + "typeDefinitions": { + "PressButtonElementEvents": { + "filePath": "src/surfaces/checkout/components/PressButton.ts", + "name": "PressButtonElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/PressButton.ts", + "syntaxKind": "PropertySignature", + "name": "blur", + "value": "CallbackEventListener", + "description": "Callback when the button has lost focus.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/PressButton.ts", + "syntaxKind": "PropertySignature", + "name": "click", + "value": "CallbackEventListener", + "description": "Callback when the button is activated.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/PressButton.ts", + "syntaxKind": "PropertySignature", + "name": "focus", + "value": "CallbackEventListener", + "description": "Callback when the button has received focus.", + "isOptional": true + } + ], + "value": "export interface PressButtonElementEvents {\n /**\n * Callback when the button is activated.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event\n */\n click?: CallbackEventListener;\n /**\n * Callback when the button has lost focus.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event\n */\n blur?: CallbackEventListener;\n /**\n * Callback when the button has received focus.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event\n */\n focus?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/PressButton.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/PressButton.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + } + ], + "defaultExample": { + "image": "press-button-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-press-button>Add gift wrapping</s-press-button>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Product thumbnail", + "description": "Use ProductThumbnail to display a product thumbnail", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "product-thumbnail-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Media and visuals", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "ProductThumbnailElementProps", + "typeDefinitions": { + "ProductThumbnailElementProps": { + "filePath": "src/surfaces/checkout/components/ProductThumbnail.ts", + "name": "ProductThumbnailElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/ProductThumbnail.ts", + "syntaxKind": "PropertySignature", + "name": "size", + "value": "Extract", + "description": "", + "isOptional": true + } + ], + "value": "export interface ProductThumbnailElementProps extends Pick {\n size?: Extract;\n}" + }, + "ProductThumbnailProps": { + "filePath": "src/surfaces/checkout/components/ProductThumbnail.ts", + "name": "ProductThumbnailProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/ProductThumbnail.ts", + "syntaxKind": "PropertySignature", + "name": "size", + "value": "Extract", + "description": "", + "isOptional": true + } + ], + "value": "export interface ProductThumbnailProps extends ProductThumbnailElementProps {\n}" + } + } + } + ], + "defaultExample": { + "image": "product-thumbnail-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-product-thumbnail\n src=\"https://cdn.shopify.com/YOUR_IMAGE_HERE\"\n totalItems={2}\n></s-product-thumbnail>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Progress", + "description": "Displays an indicator showing the completion status of a task. Use to visually communicate progress in either determinate (known percentage) or indeterminate (unknown duration) states.", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "progress-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Feedback and status indicators", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "ProgressElementProps", + "typeDefinitions": { + "ProgressElementProps": { + "filePath": "src/surfaces/checkout/components/Progress.ts", + "name": "ProgressElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Progress.ts", + "syntaxKind": "PropertySignature", + "name": "tone", + "value": "Extract", + "description": "", + "isOptional": true + } + ], + "value": "export interface ProgressElementProps extends Pick {\n tone?: Extract;\n}" + }, + "ProgressProps": { + "filePath": "src/surfaces/checkout/components/Progress.ts", + "name": "ProgressProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Progress.ts", + "syntaxKind": "PropertySignature", + "name": "tone", + "value": "Extract", + "description": "", + "isOptional": true + } + ], + "value": "export interface ProgressProps extends ProgressElementProps {\n}" + } + } + } + ], + "defaultExample": { + "image": "progress-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-progress value={0.5}></s-progress>\n", + "language": "html" + } + ] + } + }, + "subSections": [ + { + "type": "Generic", + "anchorLink": "best-practices", + "title": "Best Practices", + "sectionContent": "- Pair Progress with Paragraph or Text to communicate the current status of a process.\n- **Loading states:** Add reassuring text to indicate the bar is still loading.\n- **Error states:** Add text or a critical Banner to describe the error and next steps. Use the `critical` tone.\n- **Goals:** Use Progress to visualize meaningful goals, such as rewards tiers or free shipping thresholds." + } + ] + }, + { + "name": "QR code", + "description": "Displays a scannable QR code representing data such as URLs or text. Use to let users quickly access information by scanning with a smartphone or other device.", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "qr-code-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Media and visuals", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "QRCodeElementProps", + "typeDefinitions": { + "QRCodeElementProps": { + "filePath": "src/surfaces/checkout/components/QRCode.ts", + "name": "QRCodeElementProps", + "description": "", + "members": [], + "value": "export interface QRCodeElementProps extends QRCodeProps$1 {\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "QRCodeElementEvents", + "typeDefinitions": { + "QRCodeElementEvents": { + "filePath": "src/surfaces/checkout/components/QRCode.ts", + "name": "QRCodeElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/QRCode.ts", + "syntaxKind": "PropertySignature", + "name": "error", + "value": "CallbackEventListener", + "description": "Invoked when the conversion of `content` to a QR code fails. If an error occurs, the QR code and its child elements will not be displayed.", + "isOptional": true + } + ], + "value": "export interface QRCodeElementEvents {\n /**\n * Invoked when the conversion of `content` to a QR code fails.\n * If an error occurs, the QR code and its child elements will not be displayed.\n */\n error?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/QRCode.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/QRCode.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + } + ], + "defaultExample": { + "image": "qr-code-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-qr-code content=\"https://shopify.com\"></s-qr-code>\n<s-paragraph>\n Scan to visit <s-link href=\"https://shopify.com\">Shopify.com</s-link>\n</s-paragraph>\n", + "language": "html" + } + ] + } + }, + "subSections": [ + { + "type": "Generic", + "anchorLink": "best-practices", + "title": "Best Practices", + "sectionContent": "- Always test that the QR code scans correctly from a smartphone.\n- Use a square logo when customers expect one.\n- Add a short text description of what the QR code does.\n- Provide an alternative way to access the content:\n - For URLs: add an `s-link` nearby.\n - For data: add an `s-button` to copy to clipboard, or show it in a readonly `s-text-field`." + } + ] + }, + { + "name": "Query container", + "description": "The query container component establishes a container query context for responsive design. Use query container to define an element as a containment context, enabling child components or styles to adapt based on the container's size rather than viewport width.\n\nQuery containers support modern responsive patterns where components respond to their container dimensions, creating more flexible and reusable layouts.", + "category": "Polaris web components", + "related": [ + { + "name": "Responsive values", + "subtitle": "Utility", + "url": "/docs/api/customer-account-ui-extensions/latest/using-polaris-components#responsive-values", + "type": "utility" + } + ], + "isVisualComponent": true, + "thumbnail": "query-container-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Layout and structure", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "QueryContainerElementProps", + "typeDefinitions": { + "QueryContainerElementProps": { + "filePath": "src/surfaces/checkout/components/QueryContainer.ts", + "name": "QueryContainerElementProps", + "description": "", + "members": [], + "value": "export interface QueryContainerElementProps extends Pick {\n}" + } + } + } + ], + "defaultExample": { + "image": "query-container-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-query-container>\n <s-box\n padding=\"@container (inline-size > 500px) large-500, none\"\n background=\"subdued\"\n >\n Padding is applied when the inline-size '>' 500px\n </s-box>\n</s-query-container>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Scroll box", + "description": "Provides a scrollable container for long content that exceeds the available space. Use to display lists, order summaries, or other lengthy content while maintaining a constrained layout.", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "scroll-box-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Layout and structure", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "ScrollBoxElementProps", + "typeDefinitions": { + "ScrollBoxElementProps": { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "name": "ScrollBoxElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "background", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "border", + "value": "BorderShorthand", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "borderColor", + "value": "ReducedColorKeyword | ''", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "", + "isOptional": true + } + ], + "value": "export interface ScrollBoxElementProps extends Pick {\n background?: Extract;\n border?: BorderShorthand;\n borderColor?: ReducedColorKeyword | '';\n borderRadius?: MaybeAllValuesShorthandProperty>;\n borderWidth?: MaybeAllValuesShorthandProperty | '';\n}" + }, + "ScrollBoxProps": { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "name": "ScrollBoxProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "background", + "value": "Extract", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "border", + "value": "BorderShorthand", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "borderColor", + "value": "ReducedColorKeyword | ''", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "", + "isOptional": true + } + ], + "value": "export interface ScrollBoxProps extends ScrollBoxElementProps {\n}" + }, + "BorderShorthand": { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "BorderShorthand", + "value": "ReducedBorderSizeKeyword | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword}` | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword} ${BorderStyleKeyword}`", + "description": "" + }, + "ReducedBorderSizeKeyword": { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedBorderSizeKeyword", + "value": "any", + "description": "" + }, + "ReducedColorKeyword": { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedColorKeyword", + "value": "any", + "description": "" + }, + "BorderStyleKeyword": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "BorderStyleKeyword", + "value": "\"none\" | \"solid\" | \"dashed\" | \"dotted\" | \"auto\"", + "description": "" + }, + "MaybeAllValuesShorthandProperty": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "MaybeAllValuesShorthandProperty", + "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", + "description": "" + } + } + } + ], + "defaultExample": { + "image": "scroll-box-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-scroll-box maxBlockSize=\"100px\">\n <s-box background=\"subdued\" border=\"base\" minBlockSize=\"50px\"></s-box>\n <s-box background=\"subdued\" border=\"base\" minBlockSize=\"50px\"></s-box>\n <s-box background=\"subdued\" border=\"base\" minBlockSize=\"50px\"></s-box>\n</s-scroll-box>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Section", + "description": "The section component groups related content into clearly-defined thematic areas with consistent styling and structure. Use section to organize page content into logical blocks, each with its own heading and visual container.\n\nSections automatically adapt their styling based on nesting depth and adjust heading levels to maintain meaningful, accessible page hierarchies. For simple visual separation without headings, use [divider](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/layout-and-structure/divider).", + "category": "Polaris web components", + "subCategory": "Layout and structure", + "related": [], + "thumbnail": "section-thumbnail.png", + "isVisualComponent": true, + "subSections": [ + { + "title": "Useful for", + "type": "Generic", + "anchorLink": "useful-for", + "sectionContent": "- Organizing your page in a logical structure based on nesting levels.\n- Creating consistency across pages." + }, + { + "title": "Considerations", + "type": "Generic", + "anchorLink": "considerations", + "sectionContent": "- When adding headings inside sections they automatically use a specific style, which helps keep the content organized and clear." + }, + { + "type": "Generic", + "anchorLink": "best-practices", + "title": "Best practices", + "sectionContent": "\nUse these best practices to deliver a clear and accessible experience in your extensions.\n\n### Describe each section with a clear heading\n\nUse concise, sentence‑case headings that reflect the section’s purpose.\n\n### Provide an accessible name when no heading exists\n\nIf a visual heading isn’t present, set an accessibilityLabel so assistive technologies can identify the section.\n\n### Align actions to the section’s content\n\nOnly include primary and secondary actions that relate directly to what’s in the section.\n\n### Limit and prioritize actions\n\nKeep the number of actions small to reduce noise and emphasize what matters most.\n\n### Keep layout and styling consistent\n\nMaintain consistent spacing, typography, and alignment between sections for a coherent experience.\n" + } + ], + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "SectionPropsDocs", "typeDefinitions": { - "CustomerAccountActionPropsDocs": { + "SectionPropsDocs": { "filePath": "src/surfaces/customer-account/components.ts", "syntaxKind": "TypeAliasDeclaration", - "name": "CustomerAccountActionPropsDocs", - "value": "CustomerAccountActionProps", + "name": "SectionPropsDocs", + "value": "SectionProps", "description": "", "members": [ + { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "A label used to describe the section that will be announced by assistive technologies.\n\nWhen no `heading` property is provided or included as a children of the Section, you **must** provide an `accessibilityLabel` to describe the Section. This is important as it allows assistive technologies to provide the right context to users.", + "isOptional": true + }, { "filePath": "src/surfaces/customer-account/components.ts", "syntaxKind": "PropertySignature", "name": "heading", "value": "string", - "description": "Sets the heading of the action container." + "description": "A title that describes the content of the section.", + "isOptional": true }, { "filePath": "src/surfaces/customer-account/components.ts", @@ -57885,13 +63807,13 @@ { "title": "Slots", "description": "", - "type": "CustomerAccountActionElementSlotsDocs", + "type": "SectionElementSlotsDocs", "typeDefinitions": { - "CustomerAccountActionElementSlotsDocs": { + "SectionElementSlotsDocs": { "filePath": "src/surfaces/customer-account/components.ts", "syntaxKind": "TypeAliasDeclaration", - "name": "CustomerAccountActionElementSlotsDocs", - "value": "CustomerAccountActionElementSlots", + "name": "SectionElementSlotsDocs", + "value": "SectionElementSlots", "description": "", "members": [ { @@ -57899,7 +63821,7 @@ "syntaxKind": "PropertySignature", "name": "primary-action", "value": "HTMLElement", - "description": "The primary action for the page. Accepts a single Button element with restricted properties (see below).", + "description": "The primary action for the section. Accepts a single [Button](/docs/api/checkout-ui-extensions/polaris-web-components/actions/button) element.", "isOptional": true }, { @@ -57907,717 +63829,1094 @@ "syntaxKind": "PropertySignature", "name": "secondary-actions", "value": "HTMLElement", - "description": "The secondary actions for the page. Accepts multiple Button elements with restricted properties (see below).", + "description": "The secondary actions for the section. Accepts multiple [Button](/docs/api/checkout-ui-extensions/polaris-web-components/actions/button) elements.", "isOptional": true } ] } } + } + ], + "defaultExample": { + "image": "section-default.png", + "altText": "An example of the Section component shows a header, some text, a primary action, and a secondary action.", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-section heading=\"Rewards\">\n <s-button slot=\"primary-action\" variant=\"primary\">\n Redeem\n </s-button>\n <s-button slot=\"secondary-actions\" variant=\"secondary\">\n My rewards\n </s-button>\n <s-paragraph>\n Earn 10 points for every $1 spent. Redeem 100 points for $10 off your\n next purchase.\n </s-paragraph>\n</s-section>\n", + "language": "jsx" + } + ] + } + } + }, + { + "name": "Select", + "description": "The select component allows users to choose one option from a dropdown menu. Use select when presenting four or more choices to keep interfaces uncluttered and scannable, or when space is limited.\n\nSelect components support option grouping, placeholder text, help text, and validation states to create clear selection interfaces. For more visual selection layouts with radio buttons or checkboxes, use [choice list](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/forms/choice-list).", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "select-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Forms", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "SelectElementProps", + "typeDefinitions": { + "SelectElementProps": { + "filePath": "src/surfaces/checkout/components/Select.ts", + "name": "SelectElementProps", + "description": "", + "members": [], + "value": "export interface SelectElementProps extends Pick {\n}" + } + } }, { - "title": "Slot button properties", - "description": "Supported props for Buttons used inside CustomerAccountAction slots.

`children` only support text.", - "type": "Docs_CustomerAccountAction_SlotButton", + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "SelectElementEvents", "typeDefinitions": { - "Docs_CustomerAccountAction_SlotButton": { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "name": "Docs_CustomerAccountAction_SlotButton", + "SelectElementEvents": { + "filePath": "src/surfaces/checkout/components/Select.ts", + "name": "SelectElementEvents", "description": "", "members": [ { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/Select.ts", "syntaxKind": "PropertySignature", - "name": "accessibilityLabel", - "value": "string", - "description": "A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers.\n\nUse this when using only an icon or the button text is not enough context for users using assistive technologies.", + "name": "blur", + "value": "CallbackEventListener", + "description": "Callback when the element loses focus.", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/Select.ts", "syntaxKind": "PropertySignature", - "name": "click", - "value": "((event: CallbackEventListener) => void) | null", - "description": "Callback when the button is activated. This will be called before the action indicated by `type`.", + "name": "change", + "value": "CallbackEventListener", + "description": "Callback when the user has **finished editing** a field, e.g. once they have blurred the field.", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/Select.ts", "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", - "description": "Sets the action the `commandFor` should take when this clickable is activated.\n\nSee the documentation of particular components for the actions they support.\n\n- `--auto`: a default action for the target component.\n- `--show`: shows the target component.\n- `--hide`: hides the target component.\n- `--toggle`: toggles the target component.\n- `--copy`: copies the target ClipboardItem.", - "isOptional": true, - "defaultValue": "'--auto'" - }, + "name": "focus", + "value": "CallbackEventListener", + "description": "Callback when the element receives focus.", + "isOptional": true + } + ], + "value": "export interface SelectElementEvents {\n /**\n * Callback when the element loses focus.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event\n */\n blur?: CallbackEventListener;\n /**\n * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n */\n change?: CallbackEventListener;\n /**\n * Callback when the element receives focus.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event\n */\n focus?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/Select.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/Select.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + }, + { + "title": "Option", + "description": "Represents a single option within a select component. Use only as a child of `s-select` components.", + "type": "OptionElementProps", + "typeDefinitions": { + "OptionElementProps": { + "filePath": "src/surfaces/checkout/components/Option.ts", + "name": "OptionElementProps", + "description": "", + "members": [], + "value": "export interface OptionElementProps extends Pick {\n}" + } + } + } + ], + "defaultExample": { + "image": "select-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-select label=\"Country/region\">\n <s-option defaultSelected value=\"CA\">Canada</s-option>\n <s-option value=\"US\">United States</s-option>\n <s-option value=\"UK\">United Kingdom</s-option>\n</s-select>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Sheet", + "description": "\nThe Sheet component displays essential information for customers at the bottom of the screen, appearing above other elements. Use it sparingly to avoid distracting customers during checkout. This component requires access to [Customer Privacy API](/docs/api/checkout-ui-extensions/latest/configuration#collect-buyer-consent) to be rendered.\n\nThe library automatically applies the [WAI-ARIA Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) to both the activator and the sheet content.", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "sheet-thumbnail.png", + "requires": "configuration of the [Customer Privacy](/docs/api/customer-account-ui-extensions/latest/configuration#collect-buyer-consent) capability to be rendered.", + "type": "", + "subCategory": "Overlays", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "SheetElementProps", + "typeDefinitions": { + "SheetElementProps": { + "filePath": "src/surfaces/checkout/components/Sheet.ts", + "name": "SheetElementProps", + "description": "", + "members": [ { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/Sheet.ts", "syntaxKind": "PropertySignature", - "name": "commandFor", + "name": "accessibilityLabel", "value": "string", - "description": "ID of a component that should respond to activations (e.g. clicks) on this component.\n\nSee `command` for how to control the behavior of the target.", + "description": "A label that describes the purpose of the modal. When set, it will be announced to users using assistive technologies and will provide them with more context.\n\nThis overrides the `heading` prop for screen readers.", + "isOptional": true + } + ], + "value": "export interface SheetElementProps extends Pick {\n /**\n * A label that describes the purpose of the modal. When set,\n * it will be announced to users using assistive technologies and will\n * provide them with more context.\n *\n * This overrides the `heading` prop for screen readers.\n */\n accessibilityLabel?: string;\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "SheetElementEvents", + "typeDefinitions": { + "SheetElementEvents": { + "filePath": "src/surfaces/checkout/components/Sheet.ts", + "name": "SheetElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Sheet.ts", + "syntaxKind": "PropertySignature", + "name": "afterhide", + "value": "CallbackEventListener", + "description": "Callback fired when the overlay is hidden **after** any animations to hide the overlay have finished.", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/Sheet.ts", "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Disables the button, disallowing any interaction.", - "isOptional": true, - "defaultValue": "false" + "name": "aftershow", + "value": "CallbackEventListener", + "description": "Callback fired when the overlay is shown **after** any animations to show the overlay have finished.", + "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/Sheet.ts", "syntaxKind": "PropertySignature", - "name": "href", - "value": "string", - "description": "The URL to link to.\n\n- If set, it will navigate to the location specified by `href` after executing the `onClick` callback.\n- If a `commandFor` is set, the `command` will be executed instead of the navigation.", + "name": "hide", + "value": "CallbackEventListener", + "description": "Callback fired after the overlay is hidden.", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/Sheet.ts", "syntaxKind": "PropertySignature", - "name": "loading", - "value": "boolean", - "description": "Replaces content with a loading indicator.", - "isOptional": true, - "defaultValue": "false" + "name": "show", + "value": "CallbackEventListener", + "description": "Callback fired after the overlay is shown.", + "isOptional": true } ], - "value": "export interface Docs_CustomerAccountAction_SlotButton\n extends Pick<\n ButtonProps,\n | 'click'\n | 'loading'\n | 'disabled'\n | 'accessibilityLabel'\n | 'href'\n | 'command'\n | 'commandFor'\n > {}" + "value": "export interface SheetElementEvents {\n /**\n * Callback fired when the overlay is hidden **after** any animations to hide the overlay have finished.\n */\n afterhide?: CallbackEventListener;\n /**\n * Callback fired when the overlay is shown **after** any animations to show the overlay have finished.\n */\n aftershow?: CallbackEventListener;\n /**\n * Callback fired after the overlay is hidden.\n */\n hide?: CallbackEventListener;\n /**\n * Callback fired after the overlay is shown.\n */\n show?: CallbackEventListener;\n}" }, "CallbackEventListener": { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/Sheet.ts", "syntaxKind": "TypeAliasDeclaration", "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", "description": "" }, "CallbackEvent": { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/Sheet.ts", "syntaxKind": "TypeAliasDeclaration", "name": "CallbackEvent", - "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", "description": "" } } + }, + { + "title": "Slots", + "description": "Learn more about [component slots](/docs/api/checkout-ui-extensions/latest/using-polaris-components#slots).", + "type": "SheetElementSlots", + "typeDefinitions": { + "SheetElementSlots": { + "filePath": "src/surfaces/checkout/components/Sheet.ts", + "name": "SheetElementSlots", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Sheet.ts", + "syntaxKind": "PropertySignature", + "name": "primary-action", + "value": "HTMLElement", + "description": "The primary action to perform, provided as a button type element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Sheet.ts", + "syntaxKind": "PropertySignature", + "name": "secondary-actions", + "value": "HTMLElement", + "description": "The secondary actions to perform, provided as a button type element.", + "isOptional": true + } + ], + "value": "export interface SheetElementSlots {\n /**\n * The primary action to perform, provided as a button type element.\n */\n 'primary-action'?: HTMLElement;\n /**\n * The secondary actions to perform, provided as a button type element.\n */\n 'secondary-actions'?: HTMLElement;\n}" + } + } + }, + { + "title": "Methods", + "description": "Learn more about [component methods](/docs/api/checkout-ui-extensions/latest/using-polaris-components#methods).", + "type": "SheetElementMethods", + "typeDefinitions": { + "SheetElementMethods": { + "filePath": "src/surfaces/checkout/components/Sheet.ts", + "name": "SheetElementMethods", + "description": "", + "members": [], + "value": "export interface SheetElementMethods extends Pick {\n}" + } + } } ], - "category": "Polaris web components", - "subCategory": "Actions", "defaultExample": { - "image": "customeraccountaction-default.png", - "altText": "An example of the CustomerAccountAction component shows a dismissible modal with a header that says \"Edit order\", a field for adjusting quantities, and a Close button.", + "image": "sheet-default.png", "codeblock": { "title": "Code", "tabs": [ { - "code": "<s-customer-account-action heading=\"Action title\">\n Modal content\n <s-button slot=\"primary-action\">\n Save\n </s-button>\n <s-button slot=\"secondary-actions\">\n Cancel\n </s-button>\n</s-customer-account-action>", - "language": "jsx" + "code": "<!-- This component requires access to Customer Privacy API to be rendered. -->\n<s-button commandFor=\"consent-sheet\">Open Sheet</s-button>\n<s-sheet id=\"consent-sheet\" heading=\"Sheet\" accessibilityLabel=\"A sheet with text content\">\n <s-text>Sheet Content</s-text>\n</s-sheet>\n", + "language": "html" } ] } }, - "subSections": [ + "subSections": [] + }, + { + "name": "Skeleton paragraph", + "description": "Displays a placeholder representation of text content while it loads. Use to improve perceived performance by showing users where text will appear.", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "skeleton-paragraph-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Typography and content", + "definitions": [ { - "type": "Generic", - "anchorLink": "best-practices", - "title": "Best practices", - "sectionContent": "\nUse these best practices to deliver a clear and accessible experience in your extensions.\n\n### Highlight the key decision\n\nUse the component to present the essential details and actions needed to confirm or complete an order task.\n\n### Collect only what’s necessary\n\nRequest the minimum information required to finish the customer’s job so the flow stays quick and friction‑free.\n\n### Keep forms simple and predictable\n\nUse clear labels, intuitive actions, and concise copy so customers know what’s required and what happens next.\n\n### Choose a full‑page extension for complex flows\n\nIf the task spans multiple steps or needs a lot of input, switch to a full‑page extension instead of a modal.\n\n### Refer to Polaris guidance\n\nRefer to Polaris for additional best practices and content guidelines when designing [modals](https://polaris-react.shopify.com/components/deprecated/modal#best-practices).\n" + "title": "Properties", + "description": "", + "type": "SkeletonParagraphElementProps", + "typeDefinitions": { + "SkeletonParagraphElementProps": { + "filePath": "src/surfaces/checkout/components/SkeletonParagraph.ts", + "name": "SkeletonParagraphElementProps", + "description": "", + "members": [], + "value": "export interface SkeletonParagraphElementProps extends SkeletonParagraphProps$1 {\n}" + } + } } ], - "related": [] + "defaultExample": { + "image": "skeleton-paragraph-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-skeleton-paragraph></s-skeleton-paragraph>\n\n", + "language": "html" + } + ] + } + }, + "subSections": [] }, { - "name": "Image group", - "description": "Display up to 4 images in a grid or stacked layout. The images are displayed as a grid when used within a [Section](/docs/api/customer-account-ui-extensions/polaris-web-components/structure/section) component. For example, images of products in a wishlist or subscription. When there are more than 4 images, the component indicates how many more images are not displayed.", - "thumbnail": "imagegroup-thumbnail.png", - "requires": "", + "name": "Spinner", + "description": "The spinner component displays an animated indicator showing users that content or actions are loading. Use spinner to communicate ongoing processes like fetching data, processing requests, or waiting for operations to complete.\n\nSpinners support multiple sizes and should be used for page or section loading states. For button loading states, use the `loading` property on the [button](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/actions/button) component instead.", + "category": "Polaris web components", + "related": [], "isVisualComponent": true, + "thumbnail": "spinner-thumbnail.png", + "requires": "", "type": "", + "subCategory": "Feedback and status indicators", "definitions": [ { "title": "Properties", "description": "", - "type": "ImageGroupPropsDocs", + "type": "SpinnerElementProps", "typeDefinitions": { - "ImageGroupPropsDocs": { - "filePath": "src/surfaces/customer-account/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ImageGroupPropsDocs", - "value": "ImageGroupProps", + "SpinnerElementProps": { + "filePath": "src/surfaces/checkout/components/Spinner.ts", + "name": "SpinnerElementProps", "description": "", "members": [ { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/Spinner.ts", "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "A unique identifier for the element.", + "name": "size", + "value": "Extract", + "description": "", "isOptional": true - }, + } + ], + "value": "export interface SpinnerElementProps extends SpinnerProps$1 {\n size?: Extract;\n}" + }, + "SpinnerProps": { + "filePath": "src/surfaces/checkout/components/Spinner.ts", + "name": "SpinnerProps", + "description": "", + "members": [ { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/Spinner.ts", "syntaxKind": "PropertySignature", - "name": "totalItems", - "value": "number", - "description": "Indicates the total number of items that could be displayed in the image group. It is used to determine the remaining number to show when all the available image slots have been filled.", + "name": "size", + "value": "Extract", + "description": "", "isOptional": true } - ] + ], + "value": "export interface SpinnerProps extends SpinnerElementProps {\n}" } } } ], - "category": "Polaris web components", - "subCategory": "Media and visuals", "defaultExample": { - "image": "imagegroup-default.png", - "altText": "An example of the ImageGroup component shows a group of four images of plants, arranged in a 2x2 grid.", + "image": "spinner-default.png", "codeblock": { "title": "Code", "tabs": [ { - "code": "<s-image-group>\n <s-image \n src=\"https://cdn.shopify.com/YOUR_IMAGE_HERE\"\n alt=\"Product image\"\n ></s-image>\n <s-image \n src=\"https://cdn.shopify.com/YOUR_IMAGE_HERE\"\n alt=\"Product image\"\n ></s-image>\n <s-image \n src=\"https://cdn.shopify.com/YOUR_IMAGE_HERE\"\n alt=\"Product image\"\n ></s-image>\n <s-image \n src=\"https://cdn.shopify.com/YOUR_IMAGE_HERE\"\n alt=\"Product image\"\n ></s-image>\n</s-image-group>\n", - "language": "jsx" + "code": "<s-spinner></s-spinner>\n", + "language": "html" } ] } }, - "subSections": [ - { - "type": "Generic", - "anchorLink": "best-practices", - "title": "Best practices", - "sectionContent": "\nUse these best practices to deliver a clear and accessible experience in your extensions.\n\n### Write concise alt text for each image\n\nDescribe what’s important about each image so all users can understand the content.\n\n### Optimize performance\n\nCompress images and use modern formats; consider lazy loading to reduce initial load times.\n\n### Preserve visual breathing room\n\nMaintain consistent spacing around the group so images don’t feel crowded or overwhelming.\n" - } - ], - "related": [] + "subSections": [] }, { - "name": "Menu", - "description": "Use a menu to display a list of actions in a popover. Actions can open a modal, trigger an event, or link to an external page.", - "thumbnail": "menu-thumbnail.png", - "requires": "", + "name": "Stack", + "description": "The stack component organizes elements horizontally or vertically along the block or inline axis. Use stack to structure layouts, group related components, control spacing between elements, or create flexible arrangements that adapt to content.\n\nStacks support gap spacing, alignment, wrapping, and distribution properties to create consistent, responsive layouts without custom CSS. For complex multi-column layouts with precise grid positioning, use [grid](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/layout-and-structure/grid).", + "category": "Polaris web components", + "related": [], "isVisualComponent": true, + "thumbnail": "stack-thumbnail.png", + "requires": "", "type": "", + "subCategory": "Layout and structure", "definitions": [ { "title": "Properties", "description": "", - "type": "MenuPropsDocs", + "type": "StackElementProps", "typeDefinitions": { - "MenuPropsDocs": { - "filePath": "src/surfaces/customer-account/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MenuPropsDocs", - "value": "MenuProps", + "StackElementProps": { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "name": "StackElementProps", "description": "", "members": [ { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/Stack.ts", "syntaxKind": "PropertySignature", - "name": "accessibilityLabel", - "value": "string", - "description": "A label to describe the purpose of the menu that is announced by screen readers.", + "name": "accessibilityRole", + "value": "Extract", + "description": "", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/Stack.ts", "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "A unique identifier for the element.", + "name": "alignContent", + "value": "MaybeResponsive>", + "description": "", "isOptional": true - } - ] - } - } - }, - { - "title": "Children button properties", - "description": "The Menu component exclusively accepts Button elements with restricted props as its children. The `tone` prop will always be set to monochrome by default.", - "type": "Docs_Menu_Button_Action", - "typeDefinitions": { - "Docs_Menu_Button_Action": { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "name": "Docs_Menu_Button_Action", - "description": "", - "members": [ + }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/Stack.ts", "syntaxKind": "PropertySignature", - "name": "accessibilityLabel", - "value": "string", - "description": "A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers.\n\nUse this when using only an icon or the button text is not enough context for users using assistive technologies.", + "name": "alignItems", + "value": "MaybeResponsive>", + "description": "", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/Stack.ts", "syntaxKind": "PropertySignature", - "name": "click", - "value": "((event: CallbackEventListener) => void) | null", - "description": "Callback when the button is activated. This will be called before the action indicated by `type`.", + "name": "background", + "value": "Extract", + "description": "", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/Stack.ts", "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", - "description": "Sets the action the `commandFor` should take when this clickable is activated.\n\nSee the documentation of particular components for the actions they support.\n\n- `--auto`: a default action for the target component.\n- `--show`: shows the target component.\n- `--hide`: hides the target component.\n- `--toggle`: toggles the target component.\n- `--copy`: copies the target ClipboardItem.", - "isOptional": true, - "defaultValue": "'--auto'" + "name": "border", + "value": "BorderShorthand", + "description": "", + "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/Stack.ts", "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "ID of a component that should respond to activations (e.g. clicks) on this component.\n\nSee `command` for how to control the behavior of the target.", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/Stack.ts", "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Disables the button, disallowing any interaction.", - "isOptional": true, - "defaultValue": "false" + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "", + "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/Stack.ts", "syntaxKind": "PropertySignature", - "name": "href", - "value": "string", - "description": "The URL to link to.\n\n- If set, it will navigate to the location specified by `href` after executing the `onClick` callback.\n- If a `commandFor` is set, the `command` will be executed instead of the navigation.", + "name": "justifyContent", + "value": "MaybeResponsive>", + "description": "", + "isOptional": true + } + ], + "value": "export interface StackElementProps extends Pick {\n accessibilityRole?: Extract;\n background?: Extract;\n border?: BorderShorthand;\n borderWidth?: MaybeAllValuesShorthandProperty | '';\n borderRadius?: MaybeAllValuesShorthandProperty>;\n alignContent?: MaybeResponsive>;\n alignItems?: MaybeResponsive>;\n justifyContent?: MaybeResponsive>;\n}" + }, + "StackProps": { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "name": "StackProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityRole", + "value": "Extract", + "description": "", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/Stack.ts", "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "A unique identifier for the element.", + "name": "alignContent", + "value": "MaybeResponsive>", + "description": "", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/Stack.ts", "syntaxKind": "PropertySignature", - "name": "loading", - "value": "boolean", - "description": "Replaces content with a loading indicator.", - "isOptional": true, - "defaultValue": "false" + "name": "alignItems", + "value": "MaybeResponsive>", + "description": "", + "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/Stack.ts", "syntaxKind": "PropertySignature", - "name": "target", - "value": "'auto' | '_self' | '_blank'", - "description": "Specifies where to display the linked URL", - "isOptional": true, - "defaultValue": "'auto'" + "name": "background", + "value": "Extract", + "description": "", + "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/Stack.ts", "syntaxKind": "PropertySignature", - "name": "tone", - "value": "'auto' | 'neutral' | 'critical'", - "description": "Sets the tone of the Button, based on the intention of the information being conveyed.", - "isOptional": true, - "defaultValue": "'auto'" + "name": "border", + "value": "BorderShorthand", + "description": "", + "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/Stack.ts", "syntaxKind": "PropertySignature", - "name": "type", - "value": "'button' | 'submit'", - "description": "The behavior of the button.\n\n- `'submit'` - Used to indicate the component acts as a submit button, meaning it submits the closest form.\n- `'button'` - Used to indicate the component acts as a button, meaning it has no default action.\n- `'reset'` - Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", - "isOptional": true, - "defaultValue": "'button'" + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "justifyContent", + "value": "MaybeResponsive>", + "description": "", + "isOptional": true } ], - "value": "export interface Docs_Menu_Button_Action\n extends Omit<\n ButtonProps,\n 'variant' | 'textDecoration' | 'inlineAlignment' | 'inlineSize' | 'size'\n > {}" + "value": "export interface StackProps extends StackElementProps {\n}" + }, + "MaybeResponsive": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "MaybeResponsive", + "value": "T | `@container${string}`", + "description": "" + }, + "BorderShorthand": { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "BorderShorthand", + "value": "ReducedBorderSizeKeyword | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword}` | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword} ${BorderStyleKeyword}`", + "description": "" + }, + "ReducedBorderSizeKeyword": { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedBorderSizeKeyword", + "value": "any", + "description": "" + }, + "ReducedColorKeyword": { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedColorKeyword", + "value": "any", + "description": "" + }, + "BorderStyleKeyword": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "BorderStyleKeyword", + "value": "\"none\" | \"solid\" | \"dashed\" | \"dotted\" | \"auto\"", + "description": "" + }, + "MaybeAllValuesShorthandProperty": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "MaybeAllValuesShorthandProperty", + "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", + "description": "" + } + } + } + ], + "defaultExample": { + "image": "stack-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-image\n src=\"https://cdn.shopify.com/plant-1\"\n alt=\"Areca palm in a gray pot\"\n inlineSize=\"auto\"\n />\n <s-image\n src=\"https://cdn.shopify.com/plant-2\"\n alt=\"Fiddle leaf fig in a gray pot\"\n inlineSize=\"auto\"\n />\n <s-image\n src=\"https://cdn.shopify.com/plant-3\"\n alt=\"Snake plant in a gray pot\"\n inlineSize=\"auto\"\n />\n <s-image\n src=\"https://cdn.shopify.com/plant-4\"\n alt=\"Monstera deliciosa in a gray pot\"\n inlineSize=\"auto\"\n />\n</s-stack>\n", + "language": "html" + } + ] + } + }, + "subSections": [ + { + "title": "Useful for", + "type": "Generic", + "anchorLink": "useful-for", + "sectionContent": "- Arranging items in rows or columns when sections don't quite fit.\n- Controlling the spacing between elements." + }, + { + "title": "Considerations", + "type": "Generic", + "anchorLink": "considerations", + "sectionContent": "- Stack has no default padding. Use `base` padding if you need default padding.\n- When space is limited, Stack wraps its children to a new line." + }, + { + "type": "Generic", + "anchorLink": "best-practices", + "title": "Best Practices", + "sectionContent": "- Use smaller gaps for smaller elements and larger gaps for bigger ones.\n- Keep spacing consistent across the app." + } + ] + }, + { + "name": "Switch", + "description": "The switch component provides a clear way for users to toggle options or settings on and off. Use switch for binary controls that take effect immediately, like enabling features, activating settings, or controlling visibility.\n\nSwitches provide instant visual feedback and are ideal for settings that don't require a save action to apply changes. For selections that require explicit submission, use [checkbox](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/forms/checkbox) instead.", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "switch-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Forms", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "SwitchElementProps", + "typeDefinitions": { + "SwitchElementProps": { + "filePath": "src/surfaces/checkout/components/Switch.ts", + "name": "SwitchElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Switch.ts", + "syntaxKind": "PropertySignature", + "name": "command", + "value": "Extract", + "description": "", + "isOptional": true + } + ], + "value": "export interface SwitchElementProps extends Pick {\n command?: Extract;\n}" + }, + "SwitchProps": { + "filePath": "src/surfaces/checkout/components/Switch.ts", + "name": "SwitchProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Switch.ts", + "syntaxKind": "PropertySignature", + "name": "command", + "value": "Extract", + "description": "", + "isOptional": true + } + ], + "value": "export interface SwitchProps extends SwitchElementProps, SwitchEvents {\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "SwitchElementEvents", + "typeDefinitions": { + "SwitchElementEvents": { + "filePath": "src/surfaces/checkout/components/Switch.ts", + "name": "SwitchElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Switch.ts", + "syntaxKind": "PropertySignature", + "name": "change", + "value": "CallbackEventListener", + "description": "A callback that is run whenever the control is changed.", + "isOptional": true + } + ], + "value": "export interface SwitchElementEvents {\n /**\n * A callback that is run whenever the control is changed.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n */\n change?: CallbackEventListener;\n}" }, "CallbackEventListener": { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/Switch.ts", "syntaxKind": "TypeAliasDeclaration", "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", "description": "" }, "CallbackEvent": { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/Switch.ts", "syntaxKind": "TypeAliasDeclaration", "name": "CallbackEvent", - "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", "description": "" } } } ], - "category": "Polaris web components", - "subCategory": "Actions", "defaultExample": { - "image": "menu-default.png", - "altText": "An example of a Menu component shows three actions: Submit problem, Request return, and Cancel order.", + "image": "switch-default.png", "codeblock": { "title": "Code", "tabs": [ { - "code": "<>\n <s-button commandFor=\"order-actions-menu\">\n Manage\n </s-button>\n\n <s-menu\n id=\"order-actions-menu\"\n accessibilityLabel=\"List of order actions\"\n >\n <s-button>Submit problem</s-button>\n <s-button>Request return</s-button>\n <s-button tone=\"critical\">Cancel order</s-button>\n </s-menu>\n</>", - "language": "jsx" + "code": "<s-switch label=\"Shipping insurance\"></s-switch>\n", + "language": "html" } ] } }, - "subSections": [ - { - "type": "Generic", - "anchorLink": "best-practices", - "title": "Best practices", - "sectionContent": "\nUse these best practices to deliver a clear and accessible experience in your extensions.\n\n### Place menus consistently\n\nPosition menus in the upper‑right of full‑page extensions to match account pages like order status.\n\n### Group page‑level actions\n\nKeep related actions in a single menu rather than scattering buttons across the page.\n\n### Limit items to what’s relevant\n\nInclude only actions that matter for the current page to reduce decision fatigue.\n\n### Order by frequency and risk\n\nList the most common or least risky actions at the top so they’re easy to reach.\n\n### Write concise, action‑first labels\n\nUse short labels (ideally two words) that start with a verb, use sentence case, avoid filler articles, and clearly state the outcome.\n" - } - ], - "related": [ - { - "name": "Popover", - "subtitle": "Component", - "url": "/docs/api/checkout-ui-extensions/polaris-web-components/overlays/popover", - "type": "Component" - } - ] + "subSections": [] }, { - "name": "Page", - "description": "The outer wrapper of the page—including the page title, subtitle, and page-level actions—displayed in a familiar and consistent style that sets expectations about the purpose of the page.", - "thumbnail": "page-thumbnail.png", - "requires": "", + "name": "Text", + "description": "The text component displays inline text with specific visual styles or tones. Use text to emphasize or differentiate words or phrases within paragraphs or other block-level components, applying weight, color, or semantic styling.\n\nText supports multiple visual variants, alignment options, and line clamping for flexible inline typography control. For block-level text content, use [paragraph](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/typography-and-content/paragraph).", + "category": "Polaris web components", + "related": [], "isVisualComponent": true, + "thumbnail": "text-thumbnail.png", + "requires": "", "type": "", + "subCategory": "Typography and content", "definitions": [ { "title": "Properties", "description": "", - "type": "PagePropsDocs", + "type": "TextElementProps", "typeDefinitions": { - "PagePropsDocs": { - "filePath": "src/surfaces/customer-account/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PagePropsDocs", - "value": "PageProps", + "TextElementProps": { + "filePath": "src/surfaces/checkout/components/Text.ts", + "name": "TextElementProps", "description": "", "members": [ { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/Text.ts", "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The main page heading", + "name": "color", + "value": "Extract", + "description": "", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/Text.ts", "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "A unique identifier for the element.", + "name": "tone", + "value": "Extract", + "description": "", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/Text.ts", "syntaxKind": "PropertySignature", - "name": "subheading", - "value": "string", - "description": "The text to be used as subheading.", + "name": "type", + "value": "Extract", + "description": "", "isOptional": true } - ] - } - } - }, - { - "title": "Slots", - "description": "", - "type": "PageElementSlotsDocs", - "typeDefinitions": { - "PageElementSlotsDocs": { - "filePath": "src/surfaces/customer-account/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PageElementSlotsDocs", - "value": "PageElementSlots", + ], + "value": "export interface TextElementProps extends Pick {\n color?: Extract;\n tone?: Extract;\n type?: Extract;\n}" + }, + "TextProps": { + "filePath": "src/surfaces/checkout/components/Text.ts", + "name": "TextProps", "description": "", "members": [ { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/Text.ts", "syntaxKind": "PropertySignature", - "name": "breadcrumb-actions", - "value": "HTMLElement", - "description": "The breadcrumb actions for the page. Accepts a single Button element with restricted properties (see below).", + "name": "color", + "value": "Extract", + "description": "", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/Text.ts", "syntaxKind": "PropertySignature", - "name": "primary-action", - "value": "HTMLElement", - "description": "The primary action for the page. Accepts a single Button element with restricted properties (see below).", + "name": "tone", + "value": "Extract", + "description": "", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/Text.ts", "syntaxKind": "PropertySignature", - "name": "secondary-actions", - "value": "HTMLElement", - "description": "The secondary actions for the page. Accepts multiple Button elements with restricted properties (see below).", + "name": "type", + "value": "Extract", + "description": "", "isOptional": true } - ] + ], + "value": "export interface TextProps extends TextElementProps {\n}" } } + } + ], + "defaultExample": { + "image": "text-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-text type=\"small\" color=\"subdued\">\n All transactions are secure and encrypted.\n</s-text>\n", + "language": "html" + } + ] + } + }, + "subSections": [ + { + "title": "Useful for", + "type": "Generic", + "anchorLink": "useful-for", + "sectionContent": "- Inline text elements such as labels or line errors.\n- Applying different tones and text styles (e.g. `strong`, `critical`) within a `s-paragraph`." }, { - "title": "Breadcrumb-actions slot button properties", - "description": "Supported props for Button used inside Page `breadcrumb-actions` slot.

`children` are not supported.
Use `accessibilityLabel` instead.", - "type": "Docs_Page_Button_BreadcrumbAction", + "type": "Generic", + "anchorLink": "best-practices", + "title": "Best Practices", + "sectionContent": "- Use plain, clear terms.\n- Avoid jargon and technical language.\n- Avoid using different terms for the same concept.\n- Avoid duplicating content from the surrounding context." + } + ] + }, + { + "name": "Text area", + "description": "The text area component captures multi-line text input. Use it to collect descriptions, notes, comments, or other extended text content.\n\nThe component supports configurable height, character limits, and validation. For single-line text input, use [text field](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/forms/text-field).", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "text-area-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Forms", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "TextAreaElementProps", "typeDefinitions": { - "Docs_Page_Button_BreadcrumbAction": { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "name": "Docs_Page_Button_BreadcrumbAction", + "TextAreaElementProps": { + "filePath": "src/surfaces/checkout/components/TextArea.ts", + "name": "TextAreaElementProps", "description": "", "members": [ { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "accessibilityLabel", - "value": "string", - "description": "A label used for buyers using assistive technologies. Needed because `children` passed to this component will be discarded." - }, - { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "click", - "value": "((event: CallbackEventListener) => void) | null", - "description": "Callback when the button is activated. This will be called before the action indicated by `type`.", - "isOptional": true - }, - { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/TextArea.ts", "syntaxKind": "PropertySignature", - "name": "href", + "name": "placeholder", "value": "string", - "description": "The URL to link to.\n\n- If set, it will navigate to the location specified by `href` after executing the `onClick` callback.\n- If a `commandFor` is set, the `command` will be executed instead of the navigation.", - "isOptional": true + "description": "", + "isOptional": true, + "deprecationMessage": "Use `label` instead.", + "isPrivate": true } ], - "value": "export interface Docs_Page_Button_BreadcrumbAction\n extends Pick {\n /**\n * A label used for buyers using assistive technologies. Needed because `children` passed to this component will be discarded.\n */\n accessibilityLabel: ButtonProps['accessibilityLabel'];\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "" - }, - "CallbackEvent": { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", - "description": "" + "value": "export interface TextAreaElementProps extends Pick {\n /**\n * @deprecated Use `label` instead.\n * @private\n */\n placeholder?: string;\n}" } } }, { - "title": "Primary-action slot button properties", - "description": "Supported props for Buttons used inside Page `primary-action` slot.

`children` only support text.", - "type": "Docs_Page_Button_PrimaryAction", + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "TextAreaElementEvents", "typeDefinitions": { - "Docs_Page_Button_PrimaryAction": { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "name": "Docs_Page_Button_PrimaryAction", + "TextAreaElementEvents": { + "filePath": "src/surfaces/checkout/components/TextArea.ts", + "name": "TextAreaElementEvents", "description": "", "members": [ { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/TextArea.ts", "syntaxKind": "PropertySignature", - "name": "accessibilityLabel", - "value": "string", - "description": "A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers.\n\nUse this when using only an icon or the button text is not enough context for users using assistive technologies.", + "name": "blur", + "value": "CallbackEventListener", + "description": "Callback when the element loses focus.", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/TextArea.ts", "syntaxKind": "PropertySignature", - "name": "click", - "value": "((event: CallbackEventListener) => void) | null", - "description": "Callback when the button is activated. This will be called before the action indicated by `type`.", + "name": "change", + "value": "CallbackEventListener", + "description": "Callback when the user has **finished editing** a field, e.g. once they have blurred the field.", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", - "description": "Sets the action the `commandFor` should take when this clickable is activated.\n\nSee the documentation of particular components for the actions they support.\n\n- `--auto`: a default action for the target component.\n- `--show`: shows the target component.\n- `--hide`: hides the target component.\n- `--toggle`: toggles the target component.\n- `--copy`: copies the target ClipboardItem.", - "isOptional": true, - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/TextArea.ts", "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "ID of a component that should respond to activations (e.g. clicks) on this component.\n\nSee `command` for how to control the behavior of the target.", + "name": "focus", + "value": "CallbackEventListener", + "description": "Callback when the element receives focus.", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Disables the button, disallowing any interaction.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/TextArea.ts", "syntaxKind": "PropertySignature", - "name": "href", - "value": "string", - "description": "The URL to link to.\n\n- If set, it will navigate to the location specified by `href` after executing the `onClick` callback.\n- If a `commandFor` is set, the `command` will be executed instead of the navigation.", + "name": "input", + "value": "CallbackEventListener", + "description": "Callback when the user makes any changes in the field.", "isOptional": true - }, - { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "loading", - "value": "boolean", - "description": "Replaces content with a loading indicator.", - "isOptional": true, - "defaultValue": "false" } ], - "value": "export interface Docs_Page_Button_PrimaryAction\n extends Pick<\n ButtonProps,\n | 'click'\n | 'loading'\n | 'disabled'\n | 'accessibilityLabel'\n | 'href'\n | 'command'\n | 'commandFor'\n > {}" + "value": "export interface TextAreaElementEvents {\n /**\n * Callback when the element loses focus.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event\n */\n blur?: CallbackEventListener;\n /**\n * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n */\n change?: CallbackEventListener;\n /**\n * Callback when the element receives focus.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event\n */\n focus?: CallbackEventListener;\n /**\n * Callback when the user makes any changes in the field.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event\n */\n input?: CallbackEventListener;\n}" }, "CallbackEventListener": { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/TextArea.ts", "syntaxKind": "TypeAliasDeclaration", "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", "description": "" }, "CallbackEvent": { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/TextArea.ts", "syntaxKind": "TypeAliasDeclaration", "name": "CallbackEvent", - "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", "description": "" } } - }, + } + ], + "defaultExample": { + "image": "text-area-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-text-area\n label=\"Gift message\"\n value=\"Hope you enjoy this gift!\"\n rows={3}\n></s-text-area>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "Text field", + "description": "The text field component captures single-line text input. Use it to collect short, free-form information like names, titles, or identifiers.\n\nThe component supports various input configurations including placeholders, character limits, and validation. For multi-line text entry, use [text area](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/forms/text-area). For specialized input types, use [email field](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/forms/email-field), [URL field](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/forms/url-field), [password field](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/forms/password-field), or [search field](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/forms/search-field).", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "text-field-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Forms", + "definitions": [ { - "title": "Secondary-actions slot button properties", - "description": "Supported props for Button used inside Page `secondary-actions` slot.

`children` only support text.", - "type": "Docs_Page_Button_SecondaryAction", + "title": "Properties", + "description": "", + "type": "TextFieldElementProps", "typeDefinitions": { - "Docs_Page_Button_SecondaryAction": { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "name": "Docs_Page_Button_SecondaryAction", + "TextFieldElementProps": { + "filePath": "src/surfaces/checkout/components/TextField.ts", + "name": "TextFieldElementProps", "description": "", "members": [ { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "accessibilityLabel", - "value": "string", - "description": "A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers.\n\nUse this when using only an icon or the button text is not enough context for users using assistive technologies.", - "isOptional": true - }, - { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/TextField.ts", "syntaxKind": "PropertySignature", - "name": "click", - "value": "((event: CallbackEventListener) => void) | null", - "description": "Callback when the button is activated. This will be called before the action indicated by `type`.", + "name": "icon", + "value": "\"\" | \"reset\" | \"map\" | \"menu\" | \"circle\" | \"filter\" | \"image\" | \"alert-circle\" | \"alert-triangle-filled\" | \"alert-triangle\" | \"arrow-down\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up-right\" | \"arrow-up\" | \"bag\" | \"bullet\" | \"calendar\" | \"camera\" | \"caret-down\" | \"cart\" | \"cash-dollar\" | \"categories\" | \"check-circle\" | \"check-circle-filled\" | \"check\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"clipboard\" | \"clock\" | \"credit-card\" | \"delete\" | \"delivered\" | \"delivery\" | \"disabled\" | \"discount\" | \"edit\" | \"email\" | \"empty\" | \"external\" | \"geolocation\" | \"gift-card\" | \"globe\" | \"grid\" | \"info-filled\" | \"info\" | \"list-bulleted\" | \"location\" | \"lock\" | \"menu-horizontal\" | \"menu-vertical\" | \"minus\" | \"mobile\" | \"note\" | \"order\" | \"organization\" | \"plus\" | \"profile\" | \"question-circle-filled\" | \"question-circle\" | \"reorder\" | \"return\" | \"savings\" | \"search\" | \"settings\" | \"star-filled\" | \"star-half\" | \"star\" | \"store\" | \"truck\" | \"upload\" | \"x-circle-filled\" | \"x-circle\" | \"x\"", + "description": "", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/TextField.ts", "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", - "description": "Sets the action the `commandFor` should take when this clickable is activated.\n\nSee the documentation of particular components for the actions they support.\n\n- `--auto`: a default action for the target component.\n- `--show`: shows the target component.\n- `--hide`: hides the target component.\n- `--toggle`: toggles the target component.\n- `--copy`: copies the target ClipboardItem.", + "name": "placeholder", + "value": "string", + "description": "", "isOptional": true, - "defaultValue": "'--auto'" - }, + "deprecationMessage": "Use `label` instead.", + "isPrivate": true + } + ], + "value": "export interface TextFieldElementProps extends Pick {\n icon?: IconProps['type'];\n /**\n * @deprecated Use `label` instead.\n * @private\n */\n placeholder?: string;\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "TextFieldElementEvents", + "typeDefinitions": { + "TextFieldElementEvents": { + "filePath": "src/surfaces/checkout/components/TextField.ts", + "name": "TextFieldElementEvents", + "description": "", + "members": [ { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/TextField.ts", "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "ID of a component that should respond to activations (e.g. clicks) on this component.\n\nSee `command` for how to control the behavior of the target.", + "name": "blur", + "value": "CallbackEventListener", + "description": "Callback when the element loses focus.", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/TextField.ts", "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Disables the button, disallowing any interaction.", - "isOptional": true, - "defaultValue": "false" + "name": "change", + "value": "CallbackEventListener", + "description": "Callback when the user has **finished editing** a field, e.g. once they have blurred the field.", + "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/TextField.ts", "syntaxKind": "PropertySignature", - "name": "href", - "value": "string", - "description": "The URL to link to.\n\n- If set, it will navigate to the location specified by `href` after executing the `onClick` callback.\n- If a `commandFor` is set, the `command` will be executed instead of the navigation.", + "name": "focus", + "value": "CallbackEventListener", + "description": "Callback when the element receives focus.", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/TextField.ts", "syntaxKind": "PropertySignature", - "name": "loading", - "value": "boolean", - "description": "Replaces content with a loading indicator.", - "isOptional": true, - "defaultValue": "false" + "name": "input", + "value": "CallbackEventListener", + "description": "Callback when the user makes any changes in the field.", + "isOptional": true } ], - "value": "export interface Docs_Page_Button_SecondaryAction\n extends Pick<\n ButtonProps,\n | 'click'\n | 'loading'\n | 'disabled'\n | 'accessibilityLabel'\n | 'href'\n | 'command'\n | 'commandFor'\n > {}" + "value": "export interface TextFieldElementEvents {\n /**\n * Callback when the element loses focus.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event\n */\n blur?: CallbackEventListener;\n /**\n * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n */\n change?: CallbackEventListener;\n /**\n * Callback when the element receives focus.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event\n */\n focus?: CallbackEventListener;\n /**\n * Callback when the user makes any changes in the field.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event\n */\n input?: CallbackEventListener;\n}" }, "CallbackEventListener": { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/TextField.ts", "syntaxKind": "TypeAliasDeclaration", "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", "description": "" }, "CallbackEvent": { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/TextField.ts", "syntaxKind": "TypeAliasDeclaration", "name": "CallbackEvent", - "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", "description": "" } } + }, + { + "title": "Slots", + "description": "Learn more about [component slots](/docs/api/checkout-ui-extensions/latest/using-polaris-components#slots).", + "type": "TextFieldElementSlots", + "typeDefinitions": { + "TextFieldElementSlots": { + "filePath": "src/surfaces/checkout/components/TextField.ts", + "name": "TextFieldElementSlots", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/TextField.ts", + "syntaxKind": "PropertySignature", + "name": "accessory", + "value": "HTMLElement", + "description": "Additional content to be displayed in the field. Commonly used to display an icon that activates a tooltip providing more information.", + "isOptional": true + } + ], + "value": "export interface TextFieldElementSlots {\n /**\n * Additional content to be displayed in the field.\n * Commonly used to display an icon that activates a tooltip providing more information.\n */\n accessory?: HTMLElement;\n}" + } + } } ], - "category": "Polaris web components", - "subCategory": "Layout and structure", "defaultExample": { - "image": "page-default.png", - "altText": "An example of the Page component shows the page title, description, and order action buttons on the Order status page.", + "image": "text-field-default.png", "codeblock": { "title": "Code", "tabs": [ { - "code": "<s-page\n heading=\"Order #1411\"\n subheading=\"Confirmed Oct 5\"\n>\n <s-button slot=\"primary-action\">\n Buy again\n </s-button>\n <s-button slot=\"secondary-actions\">\n Edit order\n </s-button>\n <s-button slot=\"secondary-actions\">\n Cancel order\n </s-button>\n <s-button\n slot=\"breadcrumb-actions\"\n accessibilityLabel=\"Back to orders\"\n ></s-button>\n Content\n</s-page>", - "language": "jsx" + "code": "<s-text-field\n label=\"First name (optional)\"\n defaultValue=\"Taylor\"\n></s-text-field>\n", + "language": "html" } ] } @@ -58626,126 +64925,281 @@ { "type": "Generic", "anchorLink": "best-practices", - "title": "Best practices", - "sectionContent": "\nUse these best practices to deliver a clear and accessible experience in your extensions.\n\n### Write clear, focused headings\n\nState the main purpose of the page in a few words and use sentence case for readability.\n\n### Use subheadings only when they add value\n\nAdd a subheading when it provides helpful context that’s different from the heading. Keep it brief and use sparingly to avoid clutter.\n\n### Add page‑level actions thoughtfully\n\nInclude buttons in the header only for actions that affect the entire page or flow. Make the main action a primary button, keep lesser actions secondary, limit the total number, and follow established UX patterns—especially for order actions.\n" + "title": "Best Practices", + "sectionContent": "- Label text fields clearly so it's obvious what information to enter.\n- Label optional fields as optional (e.g. \"First name (optional)\").\n- Do not pass `required: true` for optional fields." } - ], - "related": [] + ] }, { - "name": "Section", - "description": "The section component groups related content into clearly-defined thematic areas with consistent styling and structure. Use section to organize page content into logical blocks, each with its own heading and visual container.\n\nSections automatically adapt their styling based on nesting depth and adjust heading levels to maintain meaningful, accessible page hierarchies. For simple visual separation without headings, use [divider](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/layout-and-structure/divider).", + "name": "Time", + "description": "Represents a specific point or duration in time. Use to display dates, times, or durations clearly and consistently. May include a machine-readable `datetime` attribute for improved accessibility and functionality.", "category": "Polaris web components", - "subCategory": "Layout and structure", "related": [], - "thumbnail": "section-thumbnail.png", "isVisualComponent": true, - "subSections": [ - { - "title": "Useful for", - "type": "Generic", - "anchorLink": "useful-for", - "sectionContent": "- Organizing your page in a logical structure based on nesting levels.\n- Creating consistency across pages." - }, + "thumbnail": "time-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Typography and content", + "definitions": [ { - "title": "Considerations", - "type": "Generic", - "anchorLink": "considerations", - "sectionContent": "- When adding headings inside sections they automatically use a specific style, which helps keep the content organized and clear." - }, + "title": "Properties", + "description": "", + "type": "TimeElementProps", + "typeDefinitions": { + "TimeElementProps": { + "filePath": "src/surfaces/checkout/components/Time.ts", + "name": "TimeElementProps", + "description": "", + "members": [], + "value": "export interface TimeElementProps extends Pick {\n}" + } + } + } + ], + "defaultExample": { + "image": "time-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-time dateTime=\"2023-10-15\">October 15, 2023</s-time>\n", + "language": "html" + } + ] + } + }, + "subSections": [ { "type": "Generic", "anchorLink": "best-practices", - "title": "Best practices", - "sectionContent": "\nUse these best practices to deliver a clear and accessible experience in your extensions.\n\n### Describe each section with a clear heading\n\nUse concise, sentence‑case headings that reflect the section’s purpose.\n\n### Provide an accessible name when no heading exists\n\nIf a visual heading isn’t present, set an accessibilityLabel so assistive technologies can identify the section.\n\n### Align actions to the section’s content\n\nOnly include primary and secondary actions that relate directly to what’s in the section.\n\n### Limit and prioritize actions\n\nKeep the number of actions small to reduce noise and emphasize what matters most.\n\n### Keep layout and styling consistent\n\nMaintain consistent spacing, typography, and alignment between sections for a coherent experience.\n" + "title": "Best Practices", + "sectionContent": "- Use the Time component for all time values to keep formatting consistent.\n- Show times in a clear, readable format.\n- Consider 24-hour format for international audiences.\n- Include timezone information when relevant.\n- Use the Time component for time-related content to maintain clear semantics." + } + ] + }, + { + "name": "Tooltip", + "description": "The tooltip component displays helpful information in a small overlay when users hover over or focus on an element. Use tooltip to provide additional context, explain functionality, or clarify terms without cluttering the interface with permanent text.\n\nTooltips support keyboard accessibility, positioning options, and activation on both hover and focus for inclusive interaction patterns.", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "tooltip-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Overlays", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "TooltipElementProps", + "typeDefinitions": { + "TooltipElementProps": { + "filePath": "src/surfaces/checkout/components/Tooltip.ts", + "name": "TooltipElementProps", + "description": "", + "members": [], + "value": "export interface TooltipElementProps extends Pick {\n}" + } + } } ], + "defaultExample": { + "image": "tooltip-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-stack direction=\"inline\" gap=\"small-400\" alignItems=\"center\">\n <s-text color=\"subdued\">2600 Portland Street SE</s-text>\n <s-clickable interestFor=\"curbside-pickup-1\">\n <s-icon type=\"info-filled\" />\n </s-clickable>\n <s-tooltip id=\"curbside-pickup-1\">\n Curbside pickup is at the back of the warehouse.\n </s-tooltip>\n</s-stack>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "name": "URL field", + "description": "The URL field component collects URLs from users with built-in formatting and validation. Use URL field for website addresses, link destinations, or any URL input to provide URL-specific keyboard layouts and automatic validation.\n\nURL fields support protocol prefixing, validation, and help text to guide users toward entering properly formatted web addresses. For general text input, use [text field](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/forms/text-field).", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "url-field-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Forms", "definitions": [ { "title": "Properties", "description": "", - "type": "SectionPropsDocs", + "type": "URLFieldElementProps", "typeDefinitions": { - "SectionPropsDocs": { - "filePath": "src/surfaces/customer-account/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SectionPropsDocs", - "value": "SectionProps", + "URLFieldElementProps": { + "filePath": "src/surfaces/checkout/components/UrlField.ts", + "name": "URLFieldElementProps", + "description": "", + "members": [], + "value": "export interface URLFieldElementProps extends Pick {\n}" + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "URLFieldElementEvents", + "typeDefinitions": { + "URLFieldElementEvents": { + "filePath": "src/surfaces/checkout/components/UrlField.ts", + "name": "URLFieldElementEvents", "description": "", "members": [ { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/UrlField.ts", "syntaxKind": "PropertySignature", - "name": "accessibilityLabel", - "value": "string", - "description": "A label used to describe the section that will be announced by assistive technologies.\n\nWhen no `heading` property is provided or included as a children of the Section, you **must** provide an `accessibilityLabel` to describe the Section. This is important as it allows assistive technologies to provide the right context to users.", + "name": "blur", + "value": "CallbackEventListener", + "description": "Callback when the element loses focus.", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/UrlField.ts", "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "A title that describes the content of the section.", + "name": "change", + "value": "CallbackEventListener", + "description": "Callback when the user has **finished editing** a field, e.g. once they have blurred the field.", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/UrlField.ts", "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "A unique identifier for the element.", + "name": "focus", + "value": "CallbackEventListener", + "description": "Callback when the element receives focus.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/UrlField.ts", + "syntaxKind": "PropertySignature", + "name": "input", + "value": "CallbackEventListener", + "description": "Callback when the user makes any changes in the field.", "isOptional": true } - ] + ], + "value": "export interface URLFieldElementEvents {\n /**\n * Callback when the element loses focus.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event\n */\n blur?: CallbackEventListener;\n /**\n * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n */\n change?: CallbackEventListener;\n /**\n * Callback when the element receives focus.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event\n */\n focus?: CallbackEventListener;\n /**\n * Callback when the user makes any changes in the field.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event\n */\n input?: CallbackEventListener;\n}" + }, + "CallbackEventListener": { + "filePath": "src/surfaces/checkout/components/UrlField.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/UrlField.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" } } }, { "title": "Slots", - "description": "", - "type": "SectionElementSlotsDocs", + "description": "Learn more about [component slots](/docs/api/checkout-ui-extensions/latest/using-polaris-components#slots).", + "type": "URLFieldElementSlots", "typeDefinitions": { - "SectionElementSlotsDocs": { - "filePath": "src/surfaces/customer-account/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SectionElementSlotsDocs", - "value": "SectionElementSlots", + "URLFieldElementSlots": { + "filePath": "src/surfaces/checkout/components/UrlField.ts", + "name": "URLFieldElementSlots", "description": "", "members": [ { - "filePath": "src/surfaces/customer-account/components.ts", - "syntaxKind": "PropertySignature", - "name": "primary-action", - "value": "HTMLElement", - "description": "The primary action for the section. Accepts a single [Button](/docs/api/checkout-ui-extensions/polaris-web-components/actions/button) element.", - "isOptional": true - }, - { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/UrlField.ts", "syntaxKind": "PropertySignature", - "name": "secondary-actions", + "name": "accessory", "value": "HTMLElement", - "description": "The secondary actions for the section. Accepts multiple [Button](/docs/api/checkout-ui-extensions/polaris-web-components/actions/button) elements.", + "description": "Additional content to be displayed in the field. Commonly used to display an icon that activates a tooltip providing more information.", "isOptional": true } - ] + ], + "value": "export interface URLFieldElementSlots {\n /**\n * Additional content to be displayed in the field.\n * Commonly used to display an icon that activates a tooltip providing more information.\n */\n accessory?: HTMLElement;\n}" } } } ], "defaultExample": { - "image": "section-default.png", - "altText": "An example of the Section component shows a header, some text, a primary action, and a secondary action.", + "image": "url-field-default.png", "codeblock": { "title": "Code", "tabs": [ { - "code": "<s-section heading=\"Rewards\">\n <s-button slot=\"primary-action\" variant=\"primary\">\n Redeem\n </s-button>\n <s-button slot=\"secondary-actions\" variant=\"secondary\">\n My rewards\n </s-button>\n <s-paragraph>\n Earn 10 points for every $1 spent. Redeem 100 points for $10 off your\n next purchase.\n </s-paragraph>\n</s-section>\n", - "language": "jsx" + "code": "<s-url-field label=\"Website\" defaultValue=\"https://shopify.com\"></s-url-field>\n", + "language": "html" } ] } - } + }, + "subSections": [] + }, + { + "name": "Unordered list", + "description": "The unordered list component displays a bulleted list of related items where sequence isn't critical. Use unordered list to present collections of features, options, requirements, or any group of items where order doesn't affect meaning.\n\nUnordered lists automatically add bullet points and support nested lists for hierarchical content organization. For sequential items where order is important, use [ordered list](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/layout-and-structure/ordered-list).", + "category": "Polaris web components", + "related": [], + "isVisualComponent": true, + "thumbnail": "unordered-list-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Typography and content", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "UnorderedListElementProps", + "typeDefinitions": { + "UnorderedListElementProps": { + "filePath": "src/surfaces/checkout/components/UnorderedList.ts", + "name": "UnorderedListElementProps", + "description": "", + "members": [], + "value": "export interface UnorderedListElementProps extends UnorderedListProps$1 {\n}" + } + } + }, + { + "title": "List item", + "description": "The list item component represents a single entry within an ordered list or unordered list. Use list item to structure individual points, steps, or items within a list, with each item automatically receiving appropriate list markers (bullets or numbers) from its parent list.\n\nList item must be used as a direct child of ordered list or unordered list components. Each list item can contain text, inline formatting, or other components to create rich list content.", + "type": "ListItemElementProps", + "typeDefinitions": { + "ListItemElementProps": { + "filePath": "src/surfaces/checkout/components/ListItem.ts", + "name": "ListItemElementProps", + "description": "", + "members": [], + "value": "export interface ListItemElementProps extends Pick {\n}" + } + } + } + ], + "defaultExample": { + "image": "unordered-list-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-unordered-list>\n <s-list-item>Free shipping on orders over $50</s-list-item>\n <s-list-item>30-day money-back guarantee</s-list-item>\n <s-list-item>Secure payment processing</s-list-item>\n</s-unordered-list>\n", + "language": "html" + } + ] + } + }, + "subSections": [ + { + "type": "Generic", + "anchorLink": "best-practices", + "title": "Best Practices", + "sectionContent": "- Use `s-unordered-list` when you need to present a list of related items or options.\n- Each item in the list should be wrapped in a `s-list-item` component.\n- Keep list items concise and consistent in length when possible.\n- Use `s-unordered-list` for navigation menus, feature lists, or any collection of related items.\n- Consider using `s-unordered-list` when you want to present information in a clear, scannable format." + } + ] } ] \ No newline at end of file