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 dcd5a80459..685411350c 100644 --- a/packages/ui-extensions/docs/surfaces/customer-account/build-docs.mjs +++ b/packages/ui-extensions/docs/surfaces/customer-account/build-docs.mjs @@ -1,15 +1,18 @@ /* eslint-disable no-undef, no-console */ +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); @@ -19,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( @@ -36,11 +43,51 @@ 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; + }), + ); +}; + +const cleanupTempFiles = async (tempFiles) => { + await Promise.all( + tempFiles + .filter((file) => existsSync(file)) + .map((file) => fs.rm(file)), + ); +}; - jsonData = jsonData.filter(Boolean); - await fs.writeFile(filePath, JSON.stringify(jsonData, null, 2)); +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 () => { @@ -55,23 +102,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 @@ -92,6 +203,7 @@ const generateExtensionsDocs = async () => { ); }; +let checkoutTempFiles = []; try { if (existsSync(generatedDocsPath)) { await fs.rm(generatedDocsPath, {recursive: true}); @@ -102,21 +214,27 @@ try { searchValue: /typeof globalThis\.HTMLElement/g, replaceValue: 'any', }); + + console.log('Copying checkout .d.ts files to temporary .ts files...'); + checkoutTempFiles = await copyCheckoutTypesToTemp(); + await generateExtensionsDocs(); - + // Generate targets.json console.log('Generating targets.json...'); try { - const {execSync} = await import('child_process'); 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); + console.warn( + 'Warning: Failed to generate targets.json:', + targetsError.message, + ); } - + await copyGeneratedToShopifyDev({ generatedDocsPath, shopifyDevPath, @@ -124,9 +242,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-01/generated_category_pages.json b/packages/ui-extensions/docs/surfaces/customer-account/generated/customer_account_ui_extensions/2026-01/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-01/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/docs/surfaces/customer-account/generated/customer_account_ui_extensions/2026-01/generated_docs_data.json b/packages/ui-extensions/docs/surfaces/customer-account/generated/customer_account_ui_extensions/2026-01/generated_docs_data.json index aaab63095f..434f510b62 100644 --- a/packages/ui-extensions/docs/surfaces/customer-account/generated/customer_account_ui_extensions/2026-01/generated_docs_data.json +++ b/packages/ui-extensions/docs/surfaces/customer-account/generated/customer_account_ui_extensions/2026-01/generated_docs_data.json @@ -58136,6 +58136,203 @@ ], "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": [ + { + "filePath": "src/surfaces/checkout/components/Abbreviation.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Abbreviation.ts", + "syntaxKind": "PropertySignature", + "name": "title", + "value": "string", + "description": "Defines the full expansion of the abbreviation or acronym.\n\nHelps user agents and users understand the meaning of the abbreviated text.", + "isOptional": true, + "defaultValue": "''" + } + ], + "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.", @@ -58230,26 +58427,12 @@ "isOptional": true } ] - }, - "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": "Media", + "subCategory": "Media and visuals", "defaultExample": { "image": "avatar-default.png", "altText": "An example of the Avatar component shows the initials of the user.", @@ -58274,529 +58457,12967 @@ "related": [] }, { - "name": "ButtonGroup", - "description": "ButtonGroup is used to display multiple buttons in a layout that is contextual based on the screen width or parent component. When there is more than one secondary action, they get collapsed.\n \nWhen used within a [Section](/docs/api/customer-account-ui-extensions/polaris-web-components/structure/section) component, the buttons will fill the width of the section.\n", - "thumbnail": "buttongroup-thumbnail.png", - "requires": "", + "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": "ButtonGroupPropsDocs", + "type": "BadgeElementProps", "typeDefinitions": { - "ButtonGroupPropsDocs": { - "filePath": "src/surfaces/customer-account/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ButtonGroupPropsDocs", - "value": "ButtonGroupProps", + "BadgeElementProps": { + "filePath": "src/surfaces/checkout/components/Badge.ts", + "name": "BadgeElementProps", "description": "", "members": [ { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/Badge.ts", "syntaxKind": "PropertySignature", - "name": "accessibilityLabel", - "value": "string", - "description": "Label for the button group that describes the content of the group for screen reader users to understand what's included.", + "name": "color", + "value": "'base' | 'subdued'", + "description": "Modify the color to be more or less intense.", + "isOptional": true, + "defaultValue": "'base'" + }, + { + "filePath": "src/surfaces/checkout/components/Badge.ts", + "syntaxKind": "PropertySignature", + "name": "icon", + "value": "'' | ReducedIconTypes", + "description": "The type of icon to be displayed in the badge.", + "isOptional": true, + "defaultValue": "''" + }, + { + "filePath": "src/surfaces/checkout/components/Badge.ts", + "syntaxKind": "PropertySignature", + "name": "iconPosition", + "value": "'start' | 'end'", + "description": "The position of the icon in relation to the text.", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/Badge.ts", "syntaxKind": "PropertySignature", "name": "id", "value": "string", "description": "A unique identifier for the element.", "isOptional": true - } - ] - } - } - }, - { - "title": "Slots", - "description": "", - "type": "ButtonGroupElementSlotsDocs", - "typeDefinitions": { - "ButtonGroupElementSlotsDocs": { - "filePath": "src/surfaces/customer-account/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ButtonGroupElementSlotsDocs", - "value": "ButtonGroupElementSlots", - "description": "", - "members": [ + }, { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/Badge.ts", "syntaxKind": "PropertySignature", - "name": "primary-action", - "value": "HTMLElement", - "description": "The primary action for the group. Accepts a single [Button](/docs/api/checkout-ui-extensions/polaris-web-components/actions/button) element.", - "isOptional": true + "name": "size", + "value": "'base' | 'small' | 'small-100'", + "description": "Adjusts the size.", + "isOptional": true, + "defaultValue": "'base'" }, { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/Badge.ts", "syntaxKind": "PropertySignature", - "name": "secondary-actions", - "value": "HTMLElement", - "description": "The secondary actions for the group. Accepts multiple [Button](/docs/api/checkout-ui-extensions/polaris-web-components/actions/button) elements.", - "isOptional": true + "name": "tone", + "value": "'auto' | 'neutral' | 'critical'", + "description": "Sets the tone of the Badge, based on the intention of the information being conveyed.", + "isOptional": true, + "defaultValue": "'auto'" } - ] + ], + "value": "export interface BadgeElementProps extends Pick {\n size?: Extract;\n tone?: Extract;\n color?: Extract;\n icon?: '' | ReducedIconTypes;\n}" + }, + "ReducedIconTypes": { + "filePath": "src/surfaces/checkout/components/Badge.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedIconTypes", + "value": "'reset' | 'map' | 'menu' | 'search' | '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' | 'settings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x'", + "description": "" } } } ], - "category": "Polaris web components", - "subCategory": "Actions", "defaultExample": { - "image": "buttongroup-default.png", - "altText": "An example of the ButtonGroup component shows a primary action and multiple collapsed secondary actions.", + "image": "badge-default.png", "codeblock": { "title": "Code", "tabs": [ { - "code": "<s-button-group>\n <s-button slot=\"primary-action\" variant=\"primary\">\n Pay now\n </s-button>\n <s-button slot=\"secondary-actions\" variant=\"secondary\">\n Edit order\n </s-button>\n <s-button slot=\"secondary-actions\" variant=\"secondary\">\n Cancel order\n </s-button>\n</s-button-group>\n", - "language": "jsx" + "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": [ - { - "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### Prioritize and group related actions\n\nCluster actions by purpose and place the most important or common action first to set a clear default.\n\n### Use a single primary action\n\nReserve the primary style for one action only. Keep all other actions secondary to reinforce hierarchy.\n\n### Reduce clutter in secondary options\n\nLimit the number of secondary actions and collapse extras into menus or overflow to keep the interface clean.\n\n### Write short, scannable labels\n\nUse verbs and nouns in sentence cases. For example, “Edit address”. Keep styling consistent across actions.\n\n### Support accessibility and responsiveness\n\nProvide an accessible label for the group and ensure the layout adapts well across screen sizes.\n" - } - ], - "related": [] + "subSections": [] }, { - "name": "CustomerAccountAction", - "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.", - "thumbnail": "customeraccountaction-thumbnail.png", - "requires": "", + "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": "CustomerAccountActionPropsDocs", + "type": "BannerElementProps", "typeDefinitions": { - "CustomerAccountActionPropsDocs": { - "filePath": "src/surfaces/customer-account/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CustomerAccountActionPropsDocs", - "value": "CustomerAccountActionProps", + "BannerElementProps": { + "filePath": "src/surfaces/checkout/components/Banner.ts", + "name": "BannerElementProps", "description": "", "members": [ { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/Banner.ts", + "syntaxKind": "PropertySignature", + "name": "collapsible", + "value": "boolean", + "description": "Makes the content collapsible. A collapsible banner will conceal child elements initially, but allow the user to expand the banner to see them.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Banner.ts", + "syntaxKind": "PropertySignature", + "name": "dismissible", + "value": "boolean", + "description": "Determines whether the close button of the banner is present.\n\nWhen the close button is pressed, the `dismiss` event will fire, then `hidden` will be true, any animation will complete, and the `afterhide` event will fire.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Banner.ts", "syntaxKind": "PropertySignature", "name": "heading", "value": "string", - "description": "Sets the heading of the action container." + "description": "The title of the banner.", + "isOptional": true, + "defaultValue": "''" }, { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/Banner.ts", + "syntaxKind": "PropertySignature", + "name": "hidden", + "value": "boolean", + "description": "Determines whether the banner is hidden.\n\nIf this property is being set on each framework render (as in 'controlled' usage), and the banner is `dismissible`, ensure you update app state for this property when the `dismiss` event fires.\n\nIf the banner is not `dismissible`, it can still be hidden by setting this property.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Banner.ts", "syntaxKind": "PropertySignature", "name": "id", "value": "string", "description": "A unique identifier for the element.", "isOptional": true - } + }, + { + "filePath": "src/surfaces/checkout/components/Banner.ts", + "syntaxKind": "PropertySignature", + "name": "tone", + "value": "'info' | 'auto' | 'success' | 'warning' | 'critical'", + "description": "Sets the tone of the Banner, based on the intention of the information being conveyed.\n\nThe banner is a live region and the type of status will be dictated by the Tone selected.\n\n- `critical` creates an [assertive live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) that is announced by screen readers immediately.\n- `neutral`, `info`, `success`, `warning` and `caution` creates an [informative live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role) that is announced by screen readers after the current message.", + "isOptional": true, + "defaultValue": "'auto'" + } + ], + "value": "export interface BannerElementProps extends Pick {\n tone?: Extract;\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/checkout/components/Banner.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/Banner.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "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", + "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": "accessibilityLabel", + "value": "string", + "description": "A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context.\n\nOnly use this when the element's content is not enough context for users using assistive technologies.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityRole", + "value": "AccessibilityRole", + "description": "Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.", + "isOptional": true, + "defaultValue": "'generic'" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityVisibility", + "value": "'visible' | 'hidden' | 'exclusive'", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "background", + "value": "'base' | 'subdued' | 'transparent'", + "description": "Adjust the background of the element.", + "isOptional": true, + "defaultValue": "'transparent'" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "blockSize", + "value": "MaybeResponsive", + "description": "Adjust the block size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "border", + "value": "BorderShorthand", + "description": "Set the border via the shorthand property.\n\nThis can be a size, optionally followed by a color, optionally followed by a style.\n\nIf the color is not specified, it will be `base`.\n\nIf the style is not specified, it will be `auto`.\n\nValues can be overridden by `borderWidth`, `borderStyle`, and `borderColor`.", + "isOptional": true, + "defaultValue": "'none' - equivalent to `none base auto`.", + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "// The following are equivalent:\n\n", + "title": "Example" + } + ] + } + ] + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "Set the radius of the border.\n\n[1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 4 values: `start-start start-end end-end end-start`\n- 3 values: `start-start (start-end & end-start) start-end`\n- 2 values: `(start-start & end-end) (start-end & end-start)`\n\nFor example:\n- `small-100` means start-start, start-end, end-end and end-start border radii are `small-100`.\n- `small-100 none` means start-start and end-end border radii are `small-100`, start-end and end-start border radii are `none`.\n- `small-100 none large-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `none`.\n- `small-100 none large-100 small-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `small-100`.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "borderStyle", + "value": "MaybeAllValuesShorthandProperty | \"\"", + "description": "Set the style of the border.\n\nIf set, it takes precedence over the `border` property's style.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "Set the width of the border.\n\nIf set, it takes precedence over the `border` property's width.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "display", + "value": "MaybeResponsive<\"auto\" | \"none\">", + "description": "Sets the outer display type of the component. The outer type sets a component’s participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "inlineSize", + "value": "MaybeResponsive", + "description": "Adjust the inline size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "maxBlockSize", + "value": "MaybeResponsive", + "description": "Adjust the maximum block size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "maxInlineSize", + "value": "MaybeResponsive", + "description": "Adjust the maximum inline size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "minBlockSize", + "value": "MaybeResponsive", + "description": "Adjust the minimum block size.", + "isOptional": true, + "defaultValue": "'0'" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "minInlineSize", + "value": "MaybeResponsive", + "description": "Adjust the minimum inline size.", + "isOptional": true, + "defaultValue": "'0'" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "overflow", + "value": "'hidden' | 'visible'", + "description": "Sets the overflow behavior of the element.\n\n- `hidden`: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse.\n- `visible`: the content that extends beyond the element’s container is visible.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "padding", + "value": "MaybeResponsive>", + "description": "Adjust the padding of all edges.\n\n[1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 4 values: `block-start inline-end block-end inline-start`\n- 3 values: `block-start inline block-end`\n- 2 values: `block inline`\n\nFor example:\n- `large` means block-start, inline-end, block-end and inline-start paddings are `large`.\n- `large none` means block-start and block-end paddings are `large`, inline-start and inline-end paddings are `none`.\n- `large none large` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`.\n- `large none large small` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`.\n\nA padding value of `auto` will use the default padding for the closest container that has had its usual padding removed.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlock", + "value": "MaybeResponsive | \"\">", + "description": "Adjust the block-padding.\n\n- `large none` means block-start padding is `large`, block-end padding is `none`.\n\nThis overrides the block value of `padding`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlockEnd", + "value": "MaybeResponsive", + "description": "Adjust the block-end padding.\n\nThis overrides the block-end value of `paddingBlock`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlockStart", + "value": "MaybeResponsive", + "description": "Adjust the block-start padding.\n\nThis overrides the block-start value of `paddingBlock`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInline", + "value": "MaybeResponsive | \"\">", + "description": "Adjust the inline padding.\n\n- `large none` means inline-start padding is `large`, inline-end padding is `none`.\n\nThis overrides the inline value of `padding`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInlineEnd", + "value": "MaybeResponsive", + "description": "Adjust the inline-end padding.\n\nThis overrides the inline-end value of `paddingInline`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInlineStart", + "value": "MaybeResponsive", + "description": "Adjust the inline-start padding.\n\nThis overrides the inline-start value of `paddingInline`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + } + ], + "value": "export interface BoxElementProps extends Pick {\n background?: Extract;\n border?: BorderShorthand;\n borderWidth?: MaybeAllValuesShorthandProperty | '';\n borderRadius?: MaybeAllValuesShorthandProperty>;\n}" + }, + "AccessibilityRole": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "AccessibilityRole", + "value": "\"main\" | \"header\" | \"footer\" | \"section\" | \"aside\" | \"navigation\" | \"ordered-list\" | \"list-item\" | \"list-item-separator\" | \"unordered-list\" | \"separator\" | \"status\" | \"alert\" | \"generic\" | \"presentation\" | \"none\"", + "description": "" + }, + "MaybeResponsive": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "MaybeResponsive", + "value": "T | `@container${string}`", + "description": "" + }, + "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": "" + }, + "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": "'base' | 'large' | 'large-100' | 'large-200' | 'none'", + "description": "" + }, + "ReducedColorKeyword": { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedColorKeyword", + "value": "'base'", + "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": "" + }, + "BoxProps": { + "filePath": "src/surfaces/checkout/components/Box.ts", + "name": "BoxProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context.\n\nOnly use this when the element's content is not enough context for users using assistive technologies.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityRole", + "value": "AccessibilityRole", + "description": "Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.", + "isOptional": true, + "defaultValue": "'generic'" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityVisibility", + "value": "'visible' | 'hidden' | 'exclusive'", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "background", + "value": "'base' | 'subdued' | 'transparent'", + "description": "Adjust the background of the element.", + "isOptional": true, + "defaultValue": "'transparent'" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "blockSize", + "value": "MaybeResponsive", + "description": "Adjust the block size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "border", + "value": "BorderShorthand", + "description": "Set the border via the shorthand property.\n\nThis can be a size, optionally followed by a color, optionally followed by a style.\n\nIf the color is not specified, it will be `base`.\n\nIf the style is not specified, it will be `auto`.\n\nValues can be overridden by `borderWidth`, `borderStyle`, and `borderColor`.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "Set the radius of the border.\n\n[1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 4 values: `start-start start-end end-end end-start`\n- 3 values: `start-start (start-end & end-start) start-end`\n- 2 values: `(start-start & end-end) (start-end & end-start)`\n\nFor example:\n- `small-100` means start-start, start-end, end-end and end-start border radii are `small-100`.\n- `small-100 none` means start-start and end-end border radii are `small-100`, start-end and end-start border radii are `none`.\n- `small-100 none large-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `none`.\n- `small-100 none large-100 small-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `small-100`.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "borderStyle", + "value": "MaybeAllValuesShorthandProperty | \"\"", + "description": "Set the style of the border.\n\nIf set, it takes precedence over the `border` property's style.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "Set the width of the border.\n\nIf set, it takes precedence over the `border` property's width.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "display", + "value": "MaybeResponsive<\"auto\" | \"none\">", + "description": "Sets the outer display type of the component. The outer type sets a component’s participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "inlineSize", + "value": "MaybeResponsive", + "description": "Adjust the inline size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "maxBlockSize", + "value": "MaybeResponsive", + "description": "Adjust the maximum block size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "maxInlineSize", + "value": "MaybeResponsive", + "description": "Adjust the maximum inline size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "minBlockSize", + "value": "MaybeResponsive", + "description": "Adjust the minimum block size.", + "isOptional": true, + "defaultValue": "'0'" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "minInlineSize", + "value": "MaybeResponsive", + "description": "Adjust the minimum inline size.", + "isOptional": true, + "defaultValue": "'0'" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "overflow", + "value": "'hidden' | 'visible'", + "description": "Sets the overflow behavior of the element.\n\n- `hidden`: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse.\n- `visible`: the content that extends beyond the element’s container is visible.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "padding", + "value": "MaybeResponsive>", + "description": "Adjust the padding of all edges.\n\n[1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 4 values: `block-start inline-end block-end inline-start`\n- 3 values: `block-start inline block-end`\n- 2 values: `block inline`\n\nFor example:\n- `large` means block-start, inline-end, block-end and inline-start paddings are `large`.\n- `large none` means block-start and block-end paddings are `large`, inline-start and inline-end paddings are `none`.\n- `large none large` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`.\n- `large none large small` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`.\n\nA padding value of `auto` will use the default padding for the closest container that has had its usual padding removed.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlock", + "value": "MaybeResponsive | \"\">", + "description": "Adjust the block-padding.\n\n- `large none` means block-start padding is `large`, block-end padding is `none`.\n\nThis overrides the block value of `padding`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlockEnd", + "value": "MaybeResponsive", + "description": "Adjust the block-end padding.\n\nThis overrides the block-end value of `paddingBlock`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlockStart", + "value": "MaybeResponsive", + "description": "Adjust the block-start padding.\n\nThis overrides the block-start value of `paddingBlock`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInline", + "value": "MaybeResponsive | \"\">", + "description": "Adjust the inline padding.\n\n- `large none` means inline-start padding is `large`, inline-end padding is `none`.\n\nThis overrides the inline value of `padding`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInlineEnd", + "value": "MaybeResponsive", + "description": "Adjust the inline-end padding.\n\nThis overrides the inline-end value of `paddingInline`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Box.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInlineStart", + "value": "MaybeResponsive", + "description": "Adjust the inline-start padding.\n\nThis overrides the inline-start value of `paddingInline`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + } + ], + "value": "export interface BoxProps extends BoxElementProps {\n}" + }, + "SizeUnitsOrNone": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "SizeUnitsOrNone", + "value": "SizeUnits | \"none\"", + "description": "" + }, + "PaddingKeyword": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "PaddingKeyword", + "value": "SizeKeyword | \"none\"", + "description": "" + }, + "SizeKeyword": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "SizeKeyword", + "value": "\"small-500\" | \"small-400\" | \"small-300\" | \"small-200\" | \"small-100\" | \"small\" | \"base\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"large-500\"", + "description": "" + }, + "MaybeTwoValuesShorthandProperty": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "MaybeTwoValuesShorthandProperty", + "value": "T | `${T} ${T}`", + "description": "" + } + } + } + ], + "defaultExample": { + "image": "box-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "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" + } + ] + } + }, + "subSections": [ + { + "type": "Generic", + "anchorLink": "best-practices", + "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": "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/checkout/components/Button.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/checkout/components/Button.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/checkout/components/Button.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the Button meaning it cannot be clicked or receive focus.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Button.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 `click` event.\n- If a `commandFor` is set, the `command` will be executed instead of the navigation.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Button.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Button.ts", + "syntaxKind": "PropertySignature", + "name": "inlineSize", + "value": "'auto' | 'fill' | 'fit-content'", + "description": "The displayed inline width of the Button.\n\n- `auto`: the size of the button depends on the surface and context.\n- `fill`: the button will takes up 100% of the available inline size.\n- `fit-content`: the button will take up the minimum inline-size required to fit its content.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Button.ts", + "syntaxKind": "PropertySignature", + "name": "interestFor", + "value": "string", + "description": "ID of a component that should respond to interest (e.g. hover and focus) on this component.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Button.ts", + "syntaxKind": "PropertySignature", + "name": "loading", + "value": "boolean", + "description": "Replaces content with a loading indicator while a background action is being performed.\n\nThis also disables the Button.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Button.ts", + "syntaxKind": "PropertySignature", + "name": "target", + "value": "'auto' | '_blank'", + "description": "Specifies where to display the linked URL.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Button.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/checkout/components/Button.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "'submit' | 'button'", + "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'" + }, + { + "filePath": "src/surfaces/checkout/components/Button.ts", + "syntaxKind": "PropertySignature", + "name": "variant", + "value": "'auto' | 'primary' | 'secondary'", + "description": "Changes the visual appearance of the Button.", + "isOptional": true, + "defaultValue": "'auto' - the variant is automatically determined by the Button's context" + } + ], + "value": "export interface ButtonElementProps extends Pick {\n target?: Extract;\n tone?: Extract;\n type?: Extract;\n variant?: Extract;\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": "" + } + } + } + ], + "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", + "description": "ButtonGroup is used to display multiple buttons in a layout that is contextual based on the screen width or parent component. When there is more than one secondary action, they get collapsed.\n \nWhen used within a [Section](/docs/api/customer-account-ui-extensions/polaris-web-components/structure/section) component, the buttons will fill the width of the section.\n", + "thumbnail": "buttongroup-thumbnail.png", + "requires": "", + "isVisualComponent": true, + "type": "", + "definitions": [ + { + "title": "Properties", + "description": "", + "type": "ButtonGroupPropsDocs", + "typeDefinitions": { + "ButtonGroupPropsDocs": { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ButtonGroupPropsDocs", + "value": "ButtonGroupProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "Label for the button group that describes the content of the group for screen reader users to understand what's included.", + "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": "Slots", + "description": "", + "type": "ButtonGroupElementSlotsDocs", + "typeDefinitions": { + "ButtonGroupElementSlotsDocs": { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ButtonGroupElementSlotsDocs", + "value": "ButtonGroupElementSlots", + "description": "", + "members": [ + { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "PropertySignature", + "name": "primary-action", + "value": "HTMLElement", + "description": "The primary action for the group. Accepts a single [Button](/docs/api/checkout-ui-extensions/polaris-web-components/actions/button) element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "PropertySignature", + "name": "secondary-actions", + "value": "HTMLElement", + "description": "The secondary actions for the group. Accepts multiple [Button](/docs/api/checkout-ui-extensions/polaris-web-components/actions/button) elements.", + "isOptional": true + } + ] + } + } + } + ], + "category": "Polaris web components", + "subCategory": "Actions", + "defaultExample": { + "image": "buttongroup-default.png", + "altText": "An example of the ButtonGroup component shows a primary action and multiple collapsed secondary actions.", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-button-group>\n <s-button slot=\"primary-action\" variant=\"primary\">\n Pay now\n </s-button>\n <s-button slot=\"secondary-actions\" variant=\"secondary\">\n Edit order\n </s-button>\n <s-button slot=\"secondary-actions\" variant=\"secondary\">\n Cancel order\n </s-button>\n</s-button-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### Prioritize and group related actions\n\nCluster actions by purpose and place the most important or common action first to set a clear default.\n\n### Use a single primary action\n\nReserve the primary style for one action only. Keep all other actions secondary to reinforce hierarchy.\n\n### Reduce clutter in secondary options\n\nLimit the number of secondary actions and collapse extras into menus or overflow to keep the interface clean.\n\n### Write short, scannable labels\n\nUse verbs and nouns in sentence cases. For example, “Edit address”. Keep styling consistent across actions.\n\n### Support accessibility and responsiveness\n\nProvide an accessible label for the group and ensure the layout adapts well across screen sizes.\n" + } + ], + "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": "accessibilityLabel", + "value": "string", + "description": "A label used for users using assistive technologies like screen readers. When set, any children or `label` supplied will not be announced. This can also be used to display a control without a visual label, while still providing context to users using screen readers.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Checkbox.ts", + "syntaxKind": "PropertySignature", + "name": "checked", + "value": "boolean", + "description": "Whether the control is active.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Checkbox.ts", + "syntaxKind": "PropertySignature", + "name": "command", + "value": "'--auto' | '--show' | '--hide' | '--toggle'", + "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/checkout/components/Checkbox.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/checkout/components/Checkbox.ts", + "syntaxKind": "PropertySignature", + "name": "defaultChecked", + "value": "boolean", + "description": "Whether the control is active by default.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Checkbox.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the control, disallowing any interaction.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Checkbox.ts", + "syntaxKind": "PropertySignature", + "name": "error", + "value": "string", + "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Checkbox.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Checkbox.ts", + "syntaxKind": "PropertySignature", + "name": "label", + "value": "string", + "description": "Visual content to use as the control label.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Checkbox.ts", + "syntaxKind": "PropertySignature", + "name": "name", + "value": "string", + "description": "An identifier for the control that is unique within the nearest containing `Form` component.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Checkbox.ts", + "syntaxKind": "PropertySignature", + "name": "required", + "value": "boolean", + "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Checkbox.ts", + "syntaxKind": "PropertySignature", + "name": "value", + "value": "string", + "description": "The value used in form data when the control is checked.", + "isOptional": true + } + ], + "value": "export interface CheckboxElementProps extends Pick {\n command?: Extract;\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": [ + { + "filePath": "src/surfaces/checkout/components/Chip.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "A label that describes the purpose or contents of the Chip. It will be read to users using assistive technologies such as screen readers.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Chip.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + } + ], + "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": [ + { + "filePath": "src/surfaces/checkout/components/ChoiceList.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the field, disallowing any interaction.\n\n`disabled` on any child choices is ignored when this is true.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/ChoiceList.ts", + "syntaxKind": "PropertySignature", + "name": "error", + "value": "string", + "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ChoiceList.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ChoiceList.ts", + "syntaxKind": "PropertySignature", + "name": "label", + "value": "string", + "description": "Content to use as the field label.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ChoiceList.ts", + "syntaxKind": "PropertySignature", + "name": "labelAccessibilityVisibility", + "value": "'visible' | 'exclusive'", + "description": "Changes the visibility of the component's label.\n\n- `visible`: the label is visible to all users.\n- `exclusive`: the label is visually hidden but remains in the accessibility tree.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/ChoiceList.ts", + "syntaxKind": "PropertySignature", + "name": "multiple", + "value": "boolean", + "description": "Whether multiple choices can be selected.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/ChoiceList.ts", + "syntaxKind": "PropertySignature", + "name": "name", + "value": "string", + "description": "An identifier for the field that is unique within the nearest containing form.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ChoiceList.ts", + "syntaxKind": "PropertySignature", + "name": "values", + "value": "string[]", + "description": "An array of the `value`s of the selected options.\n\nThis is a convenience prop for setting the `selected` prop on child options.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ChoiceList.ts", + "syntaxKind": "PropertySignature", + "name": "variant", + "value": "'auto' | 'list' | 'inline' | 'block' | 'grid'", + "description": "The variant of the choice grid.\n\n- `auto`: The variant is determined by the context.\n- `list`: The choices are displayed in a list.\n- `inline`: The choices are displayed on the inline axis.\n- `block`: The choices are displayed on the block axis.\n- `grid`: The choices are displayed in a grid.", + "isOptional": true, + "defaultValue": "'auto'" + } + ], + "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": [ + { + "filePath": "src/surfaces/checkout/components/Choice.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "A label used for users using assistive technologies like screen readers. When set, any children or `label` supplied will not be announced. This can also be used to display a control without a visual label, while still providing context to users using screen readers.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Choice.ts", + "syntaxKind": "PropertySignature", + "name": "defaultSelected", + "value": "boolean", + "description": "Whether the control is active by default.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Choice.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the control, disallowing any interaction.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Choice.ts", + "syntaxKind": "PropertySignature", + "name": "error", + "value": "boolean", + "description": "Set to `true` to associate a choice with the error passed to `ChoiceList`", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Choice.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Choice.ts", + "syntaxKind": "PropertySignature", + "name": "selected", + "value": "boolean", + "description": "Whether the control is active.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Choice.ts", + "syntaxKind": "PropertySignature", + "name": "value", + "value": "string", + "description": "The value used in form data when the control is checked.", + "isOptional": true + } + ], + "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": "accessibilityLabel", + "value": "string", + "description": "A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context.\n\nOnly use this when the element's content is not enough context for users using assistive technologies.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityVisibility", + "value": "'visible' | 'hidden' | 'exclusive'", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "background", + "value": "'base' | 'subdued' | 'transparent'", + "description": "Adjust the background of the element.", + "isOptional": true, + "defaultValue": "'transparent'" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "blockSize", + "value": "MaybeResponsive", + "description": "Adjust the block size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "border", + "value": "BorderShorthand", + "description": "Set the border via the shorthand property.\n\nThis can be a size, optionally followed by a color, optionally followed by a style.\n\nIf the color is not specified, it will be `base`.\n\nIf the style is not specified, it will be `auto`.\n\nValues can be overridden by `borderWidth`, `borderStyle`, and `borderColor`.", + "isOptional": true, + "defaultValue": "'none' - equivalent to `none base auto`.", + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "// The following are equivalent:\n\n", + "title": "Example" + } + ] + } + ] + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "Set the radius of the border.\n\n[1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 4 values: `start-start start-end end-end end-start`\n- 3 values: `start-start (start-end & end-start) start-end`\n- 2 values: `(start-start & end-end) (start-end & end-start)`\n\nFor example:\n- `small-100` means start-start, start-end, end-end and end-start border radii are `small-100`.\n- `small-100 none` means start-start and end-end border radii are `small-100`, start-end and end-start border radii are `none`.\n- `small-100 none large-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `none`.\n- `small-100 none large-100 small-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `small-100`.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "borderStyle", + "value": "MaybeAllValuesShorthandProperty | \"\"", + "description": "Set the style of the border.\n\nIf set, it takes precedence over the `border` property's style.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "Set the width of the border.\n\nIf set, it takes precedence over the `border` property's width.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.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/checkout/components/Clickable.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/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the clickable, meaning it cannot be clicked or receive focus.\n\nIn this state, onClick will not fire. If the click event originates from a child element, the event will immediately stop propagating from this element.\n\nHowever, items within the clickable can still receive focus and be interacted with.\n\nThis has no impact on the visual state by default, but developers are encouraged to style the clickable accordingly.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "display", + "value": "MaybeResponsive<\"auto\" | \"none\">", + "description": "Sets the outer display type of the component. The outer type sets a component’s participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.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 `click` event.\n- If a `commandFor` is set, the `command` will be executed instead of the navigation.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "inlineSize", + "value": "MaybeResponsive", + "description": "Adjust the inline size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "interestFor", + "value": "string", + "description": "ID of a component that should respond to interest (e.g. hover and focus) on this component.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "lang", + "value": "string", + "description": "Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. [Reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) (\"subtag\" label)", + "isOptional": true, + "defaultValue": "''" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "loading", + "value": "boolean", + "description": "Disables the clickable, and indicates to assistive technology that the loading is in progress.\n\nThis also disables the clickable.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "maxBlockSize", + "value": "MaybeResponsive", + "description": "Adjust the maximum block size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "maxInlineSize", + "value": "MaybeResponsive", + "description": "Adjust the maximum inline size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "minBlockSize", + "value": "MaybeResponsive", + "description": "Adjust the minimum block size.", + "isOptional": true, + "defaultValue": "'0'" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "minInlineSize", + "value": "MaybeResponsive", + "description": "Adjust the minimum inline size.", + "isOptional": true, + "defaultValue": "'0'" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "overflow", + "value": "'hidden' | 'visible'", + "description": "Sets the overflow behavior of the element.\n\n- `hidden`: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse.\n- `visible`: the content that extends beyond the element’s container is visible.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "padding", + "value": "MaybeResponsive>", + "description": "Adjust the padding of all edges.\n\n[1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 4 values: `block-start inline-end block-end inline-start`\n- 3 values: `block-start inline block-end`\n- 2 values: `block inline`\n\nFor example:\n- `large` means block-start, inline-end, block-end and inline-start paddings are `large`.\n- `large none` means block-start and block-end paddings are `large`, inline-start and inline-end paddings are `none`.\n- `large none large` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`.\n- `large none large small` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`.\n\nA padding value of `auto` will use the default padding for the closest container that has had its usual padding removed.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlock", + "value": "MaybeResponsive | \"\">", + "description": "Adjust the block-padding.\n\n- `large none` means block-start padding is `large`, block-end padding is `none`.\n\nThis overrides the block value of `padding`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlockEnd", + "value": "MaybeResponsive", + "description": "Adjust the block-end padding.\n\nThis overrides the block-end value of `paddingBlock`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlockStart", + "value": "MaybeResponsive", + "description": "Adjust the block-start padding.\n\nThis overrides the block-start value of `paddingBlock`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInline", + "value": "MaybeResponsive | \"\">", + "description": "Adjust the inline padding.\n\n- `large none` means inline-start padding is `large`, inline-end padding is `none`.\n\nThis overrides the inline value of `padding`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInlineEnd", + "value": "MaybeResponsive", + "description": "Adjust the inline-end padding.\n\nThis overrides the inline-end value of `paddingInline`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInlineStart", + "value": "MaybeResponsive", + "description": "Adjust the inline-start padding.\n\nThis overrides the inline-start value of `paddingInline`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "target", + "value": "'auto' | '_blank'", + "description": "Specifies where to display the linked URL.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "'submit' | 'button'", + "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 ClickableElementProps extends Pick {\n background?: Extract;\n border?: BorderShorthand;\n borderWidth?: MaybeAllValuesShorthandProperty | '';\n borderRadius?: MaybeAllValuesShorthandProperty>;\n target?: Extract;\n type?: Extract;\n}" + }, + "MaybeResponsive": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "MaybeResponsive", + "value": "T | `@container${string}`", + "description": "" + }, + "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": "" + }, + "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": "'base' | 'large' | 'large-100' | 'large-200' | 'none'", + "description": "" + }, + "ReducedColorKeyword": { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedColorKeyword", + "value": "'base'", + "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": "" + }, + "ClickableProps": { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "name": "ClickableProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context.\n\nOnly use this when the element's content is not enough context for users using assistive technologies.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityVisibility", + "value": "'visible' | 'hidden' | 'exclusive'", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "background", + "value": "'base' | 'subdued' | 'transparent'", + "description": "Adjust the background of the element.", + "isOptional": true, + "defaultValue": "'transparent'" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "blockSize", + "value": "MaybeResponsive", + "description": "Adjust the block size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "border", + "value": "BorderShorthand", + "description": "Set the border via the shorthand property.\n\nThis can be a size, optionally followed by a color, optionally followed by a style.\n\nIf the color is not specified, it will be `base`.\n\nIf the style is not specified, it will be `auto`.\n\nValues can be overridden by `borderWidth`, `borderStyle`, and `borderColor`.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "Set the radius of the border.\n\n[1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 4 values: `start-start start-end end-end end-start`\n- 3 values: `start-start (start-end & end-start) start-end`\n- 2 values: `(start-start & end-end) (start-end & end-start)`\n\nFor example:\n- `small-100` means start-start, start-end, end-end and end-start border radii are `small-100`.\n- `small-100 none` means start-start and end-end border radii are `small-100`, start-end and end-start border radii are `none`.\n- `small-100 none large-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `none`.\n- `small-100 none large-100 small-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `small-100`.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "borderStyle", + "value": "MaybeAllValuesShorthandProperty | \"\"", + "description": "Set the style of the border.\n\nIf set, it takes precedence over the `border` property's style.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "Set the width of the border.\n\nIf set, it takes precedence over the `border` property's width.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.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/checkout/components/Clickable.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/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the clickable, meaning it cannot be clicked or receive focus.\n\nIn this state, onClick will not fire. If the click event originates from a child element, the event will immediately stop propagating from this element.\n\nHowever, items within the clickable can still receive focus and be interacted with.\n\nThis has no impact on the visual state by default, but developers are encouraged to style the clickable accordingly.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "display", + "value": "MaybeResponsive<\"auto\" | \"none\">", + "description": "Sets the outer display type of the component. The outer type sets a component’s participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.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 `click` event.\n- If a `commandFor` is set, the `command` will be executed instead of the navigation.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "inlineSize", + "value": "MaybeResponsive", + "description": "Adjust the inline size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "interestFor", + "value": "string", + "description": "ID of a component that should respond to interest (e.g. hover and focus) on this component.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "lang", + "value": "string", + "description": "Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. [Reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) (\"subtag\" label)", + "isOptional": true, + "defaultValue": "''" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "loading", + "value": "boolean", + "description": "Disables the clickable, and indicates to assistive technology that the loading is in progress.\n\nThis also disables the clickable.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "maxBlockSize", + "value": "MaybeResponsive", + "description": "Adjust the maximum block size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "maxInlineSize", + "value": "MaybeResponsive", + "description": "Adjust the maximum inline size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "minBlockSize", + "value": "MaybeResponsive", + "description": "Adjust the minimum block size.", + "isOptional": true, + "defaultValue": "'0'" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "minInlineSize", + "value": "MaybeResponsive", + "description": "Adjust the minimum inline size.", + "isOptional": true, + "defaultValue": "'0'" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "onBlur", + "value": "(event: FocusEvent) => void", + "description": "Callback when the element loses focus.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "onClick", + "value": "(event: Event) => void", + "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": "onFocus", + "value": "(event: FocusEvent) => void", + "description": "Callback when the element receives focus.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "overflow", + "value": "'hidden' | 'visible'", + "description": "Sets the overflow behavior of the element.\n\n- `hidden`: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse.\n- `visible`: the content that extends beyond the element’s container is visible.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "padding", + "value": "MaybeResponsive>", + "description": "Adjust the padding of all edges.\n\n[1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 4 values: `block-start inline-end block-end inline-start`\n- 3 values: `block-start inline block-end`\n- 2 values: `block inline`\n\nFor example:\n- `large` means block-start, inline-end, block-end and inline-start paddings are `large`.\n- `large none` means block-start and block-end paddings are `large`, inline-start and inline-end paddings are `none`.\n- `large none large` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`.\n- `large none large small` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`.\n\nA padding value of `auto` will use the default padding for the closest container that has had its usual padding removed.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlock", + "value": "MaybeResponsive | \"\">", + "description": "Adjust the block-padding.\n\n- `large none` means block-start padding is `large`, block-end padding is `none`.\n\nThis overrides the block value of `padding`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlockEnd", + "value": "MaybeResponsive", + "description": "Adjust the block-end padding.\n\nThis overrides the block-end value of `paddingBlock`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlockStart", + "value": "MaybeResponsive", + "description": "Adjust the block-start padding.\n\nThis overrides the block-start value of `paddingBlock`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInline", + "value": "MaybeResponsive | \"\">", + "description": "Adjust the inline padding.\n\n- `large none` means inline-start padding is `large`, inline-end padding is `none`.\n\nThis overrides the inline value of `padding`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInlineEnd", + "value": "MaybeResponsive", + "description": "Adjust the inline-end padding.\n\nThis overrides the inline-end value of `paddingInline`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInlineStart", + "value": "MaybeResponsive", + "description": "Adjust the inline-start padding.\n\nThis overrides the inline-start value of `paddingInline`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "target", + "value": "'auto' | '_blank'", + "description": "Specifies where to display the linked URL.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Clickable.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "'submit' | 'button'", + "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 ClickableProps extends ClickableElementProps, ClickableEvents {\n}" + }, + "SizeUnitsOrNone": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "SizeUnitsOrNone", + "value": "SizeUnits | \"none\"", + "description": "" + }, + "PaddingKeyword": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "PaddingKeyword", + "value": "SizeKeyword | \"none\"", + "description": "" + }, + "SizeKeyword": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "SizeKeyword", + "value": "\"small-500\" | \"small-400\" | \"small-300\" | \"small-200\" | \"small-100\" | \"small\" | \"base\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"large-500\"", + "description": "" + }, + "MaybeTwoValuesShorthandProperty": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "MaybeTwoValuesShorthandProperty", + "value": "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": [ + { + "filePath": "src/surfaces/checkout/components/ClickableChip.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "A label that describes the purpose or contents of the Chip. It will be read to users using assistive technologies such as screen readers.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ClickableChip.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the chip, disallowing any interaction.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/ClickableChip.ts", + "syntaxKind": "PropertySignature", + "name": "hidden", + "value": "boolean", + "description": "Determines whether the chip is hidden.\n\nIf this property is being set on each framework render (as in 'controlled' usage), and the chip is `removable`, ensure you update app state for this property when the `remove` event fires.\n\nIf the chip is not `removable`, it can still be hidden by setting this property.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/ClickableChip.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 `click` event.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ClickableChip.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ClickableChip.ts", + "syntaxKind": "PropertySignature", + "name": "removable", + "value": "boolean", + "description": "Whether the chip is removable.", + "isOptional": true, + "defaultValue": "false" + } + ], + "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": [ + { + "filePath": "src/surfaces/checkout/components/ClipboardItem.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ClipboardItem.ts", + "syntaxKind": "PropertySignature", + "name": "text", + "value": "string", + "description": "Plain text to be written to the clipboard.", + "isOptional": true, + "defaultValue": "''" + } + ], + "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": "accessibilityLabel", + "value": "string", + "description": "A label used for users using assistive technologies like screen readers. When set, any children or `label` supplied will not be announced. This can also be used to display a control without a visual label, while still providing context to users using screen readers.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentCheckbox.ts", + "syntaxKind": "PropertySignature", + "name": "checked", + "value": "boolean", + "description": "Whether the control is active.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/ConsentCheckbox.ts", + "syntaxKind": "PropertySignature", + "name": "command", + "value": "'--auto' | '--show' | '--hide' | '--toggle'", + "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/checkout/components/ConsentCheckbox.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/checkout/components/ConsentCheckbox.ts", + "syntaxKind": "PropertySignature", + "name": "defaultChecked", + "value": "boolean", + "description": "Whether the control is active by default.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/ConsentCheckbox.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the control, disallowing any interaction.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/ConsentCheckbox.ts", + "syntaxKind": "PropertySignature", + "name": "error", + "value": "string", + "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentCheckbox.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentCheckbox.ts", + "syntaxKind": "PropertySignature", + "name": "label", + "value": "string", + "description": "Visual content to use as the control label.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentCheckbox.ts", + "syntaxKind": "PropertySignature", + "name": "name", + "value": "string", + "description": "An identifier for the control that is unique within the nearest containing `Form` component.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentCheckbox.ts", + "syntaxKind": "PropertySignature", + "name": "policy", + "value": "ConsentPolicy", + "description": "The policy for which user consent is being collected for.\n\n`sms-marketing`: Represents the policy for SMS marketing consent.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentCheckbox.ts", + "syntaxKind": "PropertySignature", + "name": "value", + "value": "string", + "description": "The value used in form data when the control is checked.", + "isOptional": true + } + ], + "value": "export interface ConsentCheckboxElementProps extends Pick {\n command?: Extract;\n}" + }, + "ConsentPolicy": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ConsentPolicy", + "value": "\"sms-marketing\"", + "description": "" + } + } + }, + { + "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": "autocomplete", + "value": "AutocompleteField | `${AutocompleteSection} ${AutocompleteField}` | `${AutocompleteGroup} ${AutocompleteField}` | `${AutocompleteSection} ${AutocompleteGroup} ${AutocompleteField}` | \"on\" | \"off\"", + "description": "A hint as to the intended content of the field.\n\nWhen set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents.\n\nWhen set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes.\n\nAlternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill.", + "isOptional": true, + "defaultValue": "'on' for everything else" + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "defaultValue", + "value": "string", + "description": "The default value for the field.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the field, disallowing any interaction.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "error", + "value": "string", + "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "label", + "value": "string", + "description": "Content to use as the field label.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "labelAccessibilityVisibility", + "value": "'visible' | 'exclusive'", + "description": "Changes the visibility of the component's label.\n\n- `visible`: the label is visible to all users.\n- `exclusive`: the label is visually hidden but remains in the accessibility tree.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "name", + "value": "string", + "description": "An identifier for the field that is unique within the nearest containing form.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "placeholder", + "value": "string", + "description": "", + "isOptional": true, + "deprecationMessage": "Use `label` instead.", + "isPrivate": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "policy", + "value": "ConsentPolicy", + "description": "The policy for which user consent is being collected for.\n\n`sms-marketing`: Represents the policy for SMS marketing consent.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "readOnly", + "value": "boolean", + "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "required", + "value": "boolean", + "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "'mobile' | ''", + "description": "The type of number to collect.\n\nSpecific style may be applied to each type to provide extra guidance to users. Note that no extra validation is performed based on the type.", + "isOptional": true, + "defaultValue": "'' meaning no specific kind of phone number" + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "value", + "value": "string", + "description": "The current value for the field. If omitted, the field will be empty.", + "isOptional": true + } + ], + "value": "export interface ConsentPhoneFieldElementProps extends Pick {\n /**\n * @deprecated Use `label` instead.\n * @private\n */\n placeholder?: string;\n}" + }, + "AutocompleteSection": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "AutocompleteSection", + "value": "`section-${string}`", + "description": "The “section” scopes the autocomplete data that should be inserted to a specific area of the page.\n\nCommonly used when there are multiple fields with the same autocomplete needs in the same page. For example: 2 shipping address forms in the same page." + }, + "AutocompleteGroup": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "AutocompleteGroup", + "value": "\"shipping\" | \"billing\"", + "description": "The contact information group the autocomplete data should be sourced from." + }, + "ConsentPolicy": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ConsentPolicy", + "value": "\"sms-marketing\"", + "description": "" + } + } + }, + { + "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.", + "thumbnail": "customeraccountaction-thumbnail.png", + "requires": "", + "isVisualComponent": true, + "type": "", + "definitions": [ + { + "title": "Properties", + "description": "", + "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": "allow", + "value": "string", + "description": "Dates that can be selected.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` allows all dates.\n\n- Dates in `YYYY-MM-DD` format allow a single date.\n- Dates in `YYYY-MM` format allow a whole month.\n- Dates in `YYYY` format allow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", + "isOptional": true, + "defaultValue": "\"\"", + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "`2024-02--2025` // allow any date from February 2024 to the end of 2025\n`2024-02--` // allow any date from February 2024 to the end of the month\n`2024-05-09, 2024-05-11` // allow only the 9th and 11th of May 2024", + "title": "Example" + } + ] + } + ] + }, + { + "filePath": "src/surfaces/checkout/components/DateField.ts", + "syntaxKind": "PropertySignature", + "name": "allowDays", + "value": "string", + "description": "Days of the week that can be selected. These intersect with the result of `allow` and `disallow`.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on the result of `allow` and `disallow`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", + "isOptional": true, + "defaultValue": "\"\"", + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "'saturday, sunday' // allow only weekends within the result of `allow` and `disallow`.", + "title": "Example" + } + ] + } + ] + }, + { + "filePath": "src/surfaces/checkout/components/DateField.ts", + "syntaxKind": "PropertySignature", + "name": "autocomplete", + "value": "AutocompleteField | `${AutocompleteSection} ${AutocompleteField}` | `${AutocompleteGroup} ${AutocompleteField}` | `${AutocompleteSection} ${AutocompleteGroup} ${AutocompleteField}` | \"on\" | \"off\"", + "description": "A hint as to the intended content of the field.\n\nWhen set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents.\n\nWhen set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes.\n\nAlternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill.", + "isOptional": true, + "defaultValue": "'on' for everything else" + }, + { + "filePath": "src/surfaces/checkout/components/DateField.ts", + "syntaxKind": "PropertySignature", + "name": "defaultValue", + "value": "string", + "description": "The default value for the field.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/DateField.ts", + "syntaxKind": "PropertySignature", + "name": "defaultView", + "value": "string", + "description": "Default month to display in `YYYY-MM` format.\n\nThis value is used until `view` is set, either directly or as a result of user interaction.\n\nDefaults to the current month in the user's locale.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/DateField.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the field, disallowing any interaction.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/DateField.ts", + "syntaxKind": "PropertySignature", + "name": "disallow", + "value": "string", + "description": "Dates that cannot be selected. These subtract from `allow`.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allow`.\n\n- Dates in `YYYY-MM-DD` format disallow a single date.\n- Dates in `YYYY-MM` format disallow a whole month.\n- Dates in `YYYY` format disallow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", + "isOptional": true, + "defaultValue": "\"\"", + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "`--2024-02` // disallow any date before February 2024\n`2024-05-09, 2024-05-11` // disallow the 9th and 11th of May 2024", + "title": "Example" + } + ] + } + ] + }, + { + "filePath": "src/surfaces/checkout/components/DateField.ts", + "syntaxKind": "PropertySignature", + "name": "disallowDays", + "value": "string", + "description": "Days of the week that cannot be selected. This subtracts from `allowDays`, and intersects with the result of `allow` and `disallow`.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allowDays`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", + "isOptional": true, + "defaultValue": "\"\"", + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "'saturday, sunday' // disallow weekends within the result of `allow` and `disallow`.", + "title": "Example" + } + ] + } + ] + }, + { + "filePath": "src/surfaces/checkout/components/DateField.ts", + "syntaxKind": "PropertySignature", + "name": "error", + "value": "string", + "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/DateField.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/DateField.ts", + "syntaxKind": "PropertySignature", + "name": "label", + "value": "string", + "description": "Content to use as the field label.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/DateField.ts", + "syntaxKind": "PropertySignature", + "name": "name", + "value": "string", + "description": "An identifier for the field that is unique within the nearest containing form.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/DateField.ts", + "syntaxKind": "PropertySignature", + "name": "placeholder", + "value": "string", + "description": "", + "isOptional": true, + "deprecationMessage": "Use `label` instead.", + "isPrivate": true + }, + { + "filePath": "src/surfaces/checkout/components/DateField.ts", + "syntaxKind": "PropertySignature", + "name": "readOnly", + "value": "boolean", + "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/DateField.ts", + "syntaxKind": "PropertySignature", + "name": "required", + "value": "boolean", + "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/DateField.ts", + "syntaxKind": "PropertySignature", + "name": "value", + "value": "string", + "description": "The current value for the field. If omitted, the field will be empty.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/DateField.ts", + "syntaxKind": "PropertySignature", + "name": "view", + "value": "string", + "description": "Displayed month in `YYYY-MM` format.\n\n`onViewChange` is called when this value changes.\n\nDefaults to `defaultView`.", + "isOptional": true + } + ], + "value": "export interface DateFieldElementProps extends Pick {\n /**\n * @deprecated Use `label` instead.\n * @private\n */\n placeholder?: string;\n}" + }, + "AutocompleteSection": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "AutocompleteSection", + "value": "`section-${string}`", + "description": "The “section” scopes the autocomplete data that should be inserted to a specific area of the page.\n\nCommonly used when there are multiple fields with the same autocomplete needs in the same page. For example: 2 shipping address forms in the same page." + }, + "AutocompleteGroup": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "AutocompleteGroup", + "value": "\"shipping\" | \"billing\"", + "description": "The contact information group the autocomplete data should be sourced from." + } + } + }, + { + "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": [ + { + "filePath": "src/surfaces/checkout/components/DatePicker.ts", + "syntaxKind": "PropertySignature", + "name": "allow", + "value": "string", + "description": "Dates that can be selected.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` allows all dates.\n\n- Dates in `YYYY-MM-DD` format allow a single date.\n- Dates in `YYYY-MM` format allow a whole month.\n- Dates in `YYYY` format allow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", + "isOptional": true, + "defaultValue": "\"\"", + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "`2024-02--2025` // allow any date from February 2024 to the end of 2025\n`2024-02--` // allow any date from February 2024 to the end of the month\n`2024-05-09, 2024-05-11` // allow only the 9th and 11th of May 2024", + "title": "Example" + } + ] + } + ] + }, + { + "filePath": "src/surfaces/checkout/components/DatePicker.ts", + "syntaxKind": "PropertySignature", + "name": "allowDays", + "value": "string", + "description": "Days of the week that can be selected. These intersect with the result of `allow` and `disallow`.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on the result of `allow` and `disallow`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", + "isOptional": true, + "defaultValue": "\"\"", + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "'saturday, sunday' // allow only weekends within the result of `allow` and `disallow`.", + "title": "Example" + } + ] + } + ] + }, + { + "filePath": "src/surfaces/checkout/components/DatePicker.ts", + "syntaxKind": "PropertySignature", + "name": "defaultValue", + "value": "string", + "description": "Default selected value.\n\nThe default means no date is selected.\n\nIf the provided value is invalid, no date is selected.\n\n- If `type=\"single\"`, this is a date in `YYYY-MM-DD` format.\n- If `type=\"multiple\"`, this is a comma-separated list of dates in `YYYY-MM-DD` format.\n- If `type=\"range\"`, this is a range in `YYYY-MM-DD--YYYY-MM-DD` format. The range is inclusive.", + "isOptional": true, + "defaultValue": "\"\"" + }, + { + "filePath": "src/surfaces/checkout/components/DatePicker.ts", + "syntaxKind": "PropertySignature", + "name": "defaultView", + "value": "string", + "description": "Default month to display in `YYYY-MM` format.\n\nThis value is used until `view` is set, either directly or as a result of user interaction.\n\nDefaults to the current month in the user's locale.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/DatePicker.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the field, disallowing any interaction.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/DatePicker.ts", + "syntaxKind": "PropertySignature", + "name": "disallow", + "value": "string", + "description": "Dates that cannot be selected. These subtract from `allow`.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allow`.\n\n- Dates in `YYYY-MM-DD` format disallow a single date.\n- Dates in `YYYY-MM` format disallow a whole month.\n- Dates in `YYYY` format disallow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", + "isOptional": true, + "defaultValue": "\"\"", + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "`--2024-02` // disallow any date before February 2024\n`2024-05-09, 2024-05-11` // disallow the 9th and 11th of May 2024", + "title": "Example" + } + ] + } + ] + }, + { + "filePath": "src/surfaces/checkout/components/DatePicker.ts", + "syntaxKind": "PropertySignature", + "name": "disallowDays", + "value": "string", + "description": "Days of the week that cannot be selected. This subtracts from `allowDays`, and intersects with the result of `allow` and `disallow`.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allowDays`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", + "isOptional": true, + "defaultValue": "\"\"", + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "'saturday, sunday' // disallow weekends within the result of `allow` and `disallow`.", + "title": "Example" + } + ] + } + ] + }, + { + "filePath": "src/surfaces/checkout/components/DatePicker.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/DatePicker.ts", + "syntaxKind": "PropertySignature", + "name": "name", + "value": "string", + "description": "An identifier for the field that is unique within the nearest containing form.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/DatePicker.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "'single' | 'multiple' | 'range'", + "description": "The type of selection the date picker allows.\n\n- `single` allows selecting a single date.\n- `multiple` allows selecting multiple non-contiguous dates.\n- `range` allows selecting a single range of dates.", + "isOptional": true, + "defaultValue": "\"single\"" + }, + { + "filePath": "src/surfaces/checkout/components/DatePicker.ts", + "syntaxKind": "PropertySignature", + "name": "value", + "value": "string", + "description": "Current selected value.\n\nThe default means no date is selected.\n\nIf the provided value is invalid, no date is selected.\n\nOtherwise:\n\n- If `type=\"single\"`, this is a date in `YYYY-MM-DD` format.\n- If `type=\"multiple\"`, this is a comma-separated list of dates in `YYYY-MM-DD` format.\n- If `type=\"range\"`, this is a range in `YYYY-MM-DD--YYYY-MM-DD` format. The range is inclusive.", + "isOptional": true, + "defaultValue": "\"\"" + }, + { + "filePath": "src/surfaces/checkout/components/DatePicker.ts", + "syntaxKind": "PropertySignature", + "name": "view", + "value": "string", + "description": "Displayed month in `YYYY-MM` format.\n\n`onViewChange` is called when this value changes.\n\nDefaults to `defaultView`.", + "isOptional": true + } + ], + "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": [ + { + "filePath": "src/surfaces/checkout/components/Details.ts", + "syntaxKind": "PropertySignature", + "name": "defaultOpen", + "value": "boolean", + "description": "Indicates whether the element should be open by default.\n\nThis reflects to the `open` attribute.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Details.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Details.ts", + "syntaxKind": "PropertySignature", + "name": "open", + "value": "boolean", + "description": "Whether the element is open.\n\nThis does not reflect to any attribute.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Details.ts", + "syntaxKind": "PropertySignature", + "name": "toggleTransition", + "value": "'none' | 'auto'", + "description": "Sets the transition between the two states.", + "isOptional": true, + "defaultValue": "'auto'" + } + ], + "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": [ + { + "filePath": "src/surfaces/checkout/components/Summary.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + } + ], + "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": [ + { + "filePath": "src/surfaces/checkout/components/Divider.ts", + "syntaxKind": "PropertySignature", + "name": "direction", + "value": "'inline' | 'block'", + "description": "Specify the direction of the divider. This uses [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).", + "isOptional": true, + "defaultValue": "'inline'" + }, + { + "filePath": "src/surfaces/checkout/components/Divider.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + } + ], + "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": [ + { + "filePath": "src/surfaces/checkout/components/DropZone.ts", + "syntaxKind": "PropertySignature", + "name": "accept", + "value": "string", + "description": "A string representing the types of files that are accepted by the drop zone. This string is a comma-separated list of unique file type specifiers which can be one of the following:\n- A file extension starting with a period (\".\") character (e.g. .jpg, .pdf, .doc)\n- A valid MIME type string with no extensions\n\nIf omitted, all file types are accepted.", + "isOptional": true, + "defaultValue": "''" + }, + { + "filePath": "src/surfaces/checkout/components/DropZone.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "A label that describes the purpose or contents of the item. When set, it will be announced to buyers using assistive technologies and will provide them with more context.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/DropZone.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the field, disallowing any interaction.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/DropZone.ts", + "syntaxKind": "PropertySignature", + "name": "error", + "value": "string", + "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/DropZone.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/DropZone.ts", + "syntaxKind": "PropertySignature", + "name": "label", + "value": "string", + "description": "Content to use as the field label.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/DropZone.ts", + "syntaxKind": "PropertySignature", + "name": "multiple", + "value": "boolean", + "description": "Whether multiple files can be selected or dropped at once.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/DropZone.ts", + "syntaxKind": "PropertySignature", + "name": "name", + "value": "string", + "description": "An identifier for the field that is unique within the nearest containing form.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/DropZone.ts", + "syntaxKind": "PropertySignature", + "name": "required", + "value": "boolean", + "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/DropZone.ts", + "syntaxKind": "PropertySignature", + "name": "value", + "value": "string", + "description": "A string that represents the path to the selected file(s). If no file is selected yet, the value is an empty string (\"\"). When the user selected multiple files, the value represents the first file in the list of files they selected. The value is always the file's name prefixed with \"C:\\fakepath\\\", which isn't the real path of the file.", + "isOptional": true, + "defaultValue": "''" + } + ], + "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": "autocomplete", + "value": "AutocompleteField | `${AutocompleteSection} ${AutocompleteField}` | `${AutocompleteGroup} ${AutocompleteField}` | `${AutocompleteSection} ${AutocompleteGroup} ${AutocompleteField}` | \"on\" | \"off\"", + "description": "A hint as to the intended content of the field.\n\nWhen set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents.\n\nWhen set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes.\n\nAlternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill.", + "isOptional": true, + "defaultValue": "'on' for everything else" + }, + { + "filePath": "src/surfaces/checkout/components/EmailField.ts", + "syntaxKind": "PropertySignature", + "name": "defaultValue", + "value": "string", + "description": "The default value for the field.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/EmailField.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the field, disallowing any interaction.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/EmailField.ts", + "syntaxKind": "PropertySignature", + "name": "error", + "value": "string", + "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/EmailField.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/EmailField.ts", + "syntaxKind": "PropertySignature", + "name": "label", + "value": "string", + "description": "Content to use as the field label.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/EmailField.ts", + "syntaxKind": "PropertySignature", + "name": "labelAccessibilityVisibility", + "value": "'visible' | 'exclusive'", + "description": "Changes the visibility of the component's label.\n\n- `visible`: the label is visible to all users.\n- `exclusive`: the label is visually hidden but remains in the accessibility tree.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/EmailField.ts", + "syntaxKind": "PropertySignature", + "name": "maxLength", + "value": "number", + "description": "Specifies the maximum number of characters allowed.", + "isOptional": true, + "defaultValue": "Infinity" + }, + { + "filePath": "src/surfaces/checkout/components/EmailField.ts", + "syntaxKind": "PropertySignature", + "name": "minLength", + "value": "number", + "description": "Specifies the min number of characters allowed.", + "isOptional": true, + "defaultValue": "0" + }, + { + "filePath": "src/surfaces/checkout/components/EmailField.ts", + "syntaxKind": "PropertySignature", + "name": "name", + "value": "string", + "description": "An identifier for the field that is unique within the nearest containing form.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/EmailField.ts", + "syntaxKind": "PropertySignature", + "name": "placeholder", + "value": "string", + "description": "", + "isOptional": true, + "deprecationMessage": "Use `label` instead.", + "isPrivate": true + }, + { + "filePath": "src/surfaces/checkout/components/EmailField.ts", + "syntaxKind": "PropertySignature", + "name": "readOnly", + "value": "boolean", + "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/EmailField.ts", + "syntaxKind": "PropertySignature", + "name": "required", + "value": "boolean", + "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/EmailField.ts", + "syntaxKind": "PropertySignature", + "name": "value", + "value": "string", + "description": "The current value for the field. If omitted, the field will be empty.", + "isOptional": true + } + ], + "value": "export interface EmailFieldElementProps extends Pick {\n /**\n * @deprecated Use `label` instead.\n * @private\n */\n placeholder?: string;\n}" + }, + "AutocompleteSection": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "AutocompleteSection", + "value": "`section-${string}`", + "description": "The “section” scopes the autocomplete data that should be inserted to a specific area of the page.\n\nCommonly used when there are multiple fields with the same autocomplete needs in the same page. For example: 2 shipping address forms in the same page." + }, + "AutocompleteGroup": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "AutocompleteGroup", + "value": "\"shipping\" | \"billing\"", + "description": "The contact information group the autocomplete data should be sourced from." + } + } + }, + { + "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": [ + { + "filePath": "src/surfaces/checkout/components/Form.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Whether the form is able to be submitted.\n\nWhen set to `true`, this will also disable the implicit submit behavior of the form.", + "isOptional": true, + "deprecationMessage": "Prevent default within the onSubmit callback using a local state instead. Deprecated in v1.6.0", + "isPrivate": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Form.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + } + ], + "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": "accessibilityLabel", + "value": "string", + "description": "A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context.\n\nOnly use this when the element's content is not enough context for users using assistive technologies.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityRole", + "value": "AccessibilityRole", + "description": "Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.", + "isOptional": true, + "defaultValue": "'generic'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityVisibility", + "value": "'visible' | 'hidden' | 'exclusive'", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "alignContent", + "value": "MaybeResponsive", + "description": "Aligns the grid along the block (column) axis.\n\nThis overrides the block value of `placeContent`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "alignItems", + "value": "MaybeResponsive", + "description": "Aligns the grid items along the block (column) axis.\n\nThis overrides the block value of `placeItems`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "background", + "value": "'base' | 'subdued' | 'transparent'", + "description": "Adjust the background of the element.", + "isOptional": true, + "defaultValue": "'transparent'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "blockSize", + "value": "MaybeResponsive", + "description": "Adjust the block size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "border", + "value": "BorderShorthand", + "description": "Set the border via the shorthand property.\n\nThis can be a size, optionally followed by a color, optionally followed by a style.\n\nIf the color is not specified, it will be `base`.\n\nIf the style is not specified, it will be `auto`.\n\nValues can be overridden by `borderWidth`, `borderStyle`, and `borderColor`.", + "isOptional": true, + "defaultValue": "'none' - equivalent to `none base auto`.", + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "// The following are equivalent:\n\n", + "title": "Example" + } + ] + } + ] + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "borderColor", + "value": "'' | 'base'", + "description": "Set the color of the border.\n\nIf set, it takes precedence over the `border` property's color.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "Set the radius of the border.\n\n[1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 4 values: `start-start start-end end-end end-start`\n- 3 values: `start-start (start-end & end-start) start-end`\n- 2 values: `(start-start & end-end) (start-end & end-start)`\n\nFor example:\n- `small-100` means start-start, start-end, end-end and end-start border radii are `small-100`.\n- `small-100 none` means start-start and end-end border radii are `small-100`, start-end and end-start border radii are `none`.\n- `small-100 none large-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `none`.\n- `small-100 none large-100 small-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `small-100`.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "borderStyle", + "value": "MaybeAllValuesShorthandProperty | \"\"", + "description": "Set the style of the border.\n\nIf set, it takes precedence over the `border` property's style.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "Set the width of the border.\n\nIf set, it takes precedence over the `border` property's width.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "columnGap", + "value": "MaybeResponsive", + "description": "Adjust spacing between elements in the inline axis.\n\nThis overrides the column value of `gap`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "display", + "value": "MaybeResponsive<\"auto\" | \"none\">", + "description": "Sets the outer display type of the component. The outer type sets a component’s participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "gap", + "value": "MaybeResponsive>", + "description": "Adjust spacing between elements.\n\nA single value applies to both axes. A pair of values (eg `large-100 large-500`) can be used to set the inline and block axes respectively.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "gridTemplateColumns", + "value": "MaybeResponsive", + "description": "Define columns and specify their size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "gridTemplateRows", + "value": "MaybeResponsive", + "description": "Define rows and specify their size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "inlineSize", + "value": "MaybeResponsive", + "description": "Adjust the inline size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "justifyContent", + "value": "MaybeResponsive", + "description": "Aligns the grid along the inline (row) axis.\n\nThis overrides the inline value of `placeContent`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "justifyItems", + "value": "MaybeResponsive", + "description": "Aligns the grid items along the inline (row) axis.\n\nThis overrides the inline value of `placeItems`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "maxBlockSize", + "value": "MaybeResponsive", + "description": "Adjust the maximum block size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "maxInlineSize", + "value": "MaybeResponsive", + "description": "Adjust the maximum inline size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "minBlockSize", + "value": "MaybeResponsive", + "description": "Adjust the minimum block size.", + "isOptional": true, + "defaultValue": "'0'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "minInlineSize", + "value": "MaybeResponsive", + "description": "Adjust the minimum inline size.", + "isOptional": true, + "defaultValue": "'0'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "overflow", + "value": "'hidden' | 'visible'", + "description": "Sets the overflow behavior of the element.\n\n- `hidden`: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse.\n- `visible`: the content that extends beyond the element’s container is visible.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "padding", + "value": "MaybeResponsive>", + "description": "Adjust the padding of all edges.\n\n[1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 4 values: `block-start inline-end block-end inline-start`\n- 3 values: `block-start inline block-end`\n- 2 values: `block inline`\n\nFor example:\n- `large` means block-start, inline-end, block-end and inline-start paddings are `large`.\n- `large none` means block-start and block-end paddings are `large`, inline-start and inline-end paddings are `none`.\n- `large none large` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`.\n- `large none large small` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`.\n\nA padding value of `auto` will use the default padding for the closest container that has had its usual padding removed.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlock", + "value": "MaybeResponsive | \"\">", + "description": "Adjust the block-padding.\n\n- `large none` means block-start padding is `large`, block-end padding is `none`.\n\nThis overrides the block value of `padding`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlockEnd", + "value": "MaybeResponsive", + "description": "Adjust the block-end padding.\n\nThis overrides the block-end value of `paddingBlock`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlockStart", + "value": "MaybeResponsive", + "description": "Adjust the block-start padding.\n\nThis overrides the block-start value of `paddingBlock`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInline", + "value": "MaybeResponsive | \"\">", + "description": "Adjust the inline padding.\n\n- `large none` means inline-start padding is `large`, inline-end padding is `none`.\n\nThis overrides the inline value of `padding`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInlineEnd", + "value": "MaybeResponsive", + "description": "Adjust the inline-end padding.\n\nThis overrides the inline-end value of `paddingInline`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInlineStart", + "value": "MaybeResponsive", + "description": "Adjust the inline-start padding.\n\nThis overrides the inline-start value of `paddingInline`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "placeContent", + "value": "MaybeResponsive<`${ReducedAlignContentKeyword} ${ReducedJustifyContentKeyword}` | ReducedAlignContentKeyword>", + "description": "A shorthand property for `justify-content` and `align-content`.", + "isOptional": true, + "defaultValue": "'normal normal'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "placeItems", + "value": "MaybeResponsive<`${ReducedAlignItemsKeyword} ${ReducedJustifyItemsKeyword}` | ReducedAlignItemsKeyword>", + "description": "A shorthand property for `justify-items` and `align-items`.", + "isOptional": true, + "defaultValue": "'normal normal'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "rowGap", + "value": "MaybeResponsive", + "description": "Adjust spacing between elements in the block axis.\n\nThis overrides the row value of `gap`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + } + ], + "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}" + }, + "AccessibilityRole": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "AccessibilityRole", + "value": "\"main\" | \"header\" | \"footer\" | \"section\" | \"aside\" | \"navigation\" | \"ordered-list\" | \"list-item\" | \"list-item-separator\" | \"unordered-list\" | \"separator\" | \"status\" | \"alert\" | \"generic\" | \"presentation\" | \"none\"", + "description": "" + }, + "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": "'center' | 'start' | 'end' | 'normal' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch'", + "description": "" + }, + "ReducedAlignItemsKeyword": { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedAlignItemsKeyword", + "value": "'center' | 'start' | 'end' | 'normal' | 'baseline' | 'stretch'", + "description": "" + }, + "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": "" + }, + "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": "'base' | 'large' | 'large-100' | 'large-200' | 'none'", + "description": "" + }, + "ReducedColorKeyword": { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedColorKeyword", + "value": "'base'", + "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": "" + }, + "GridProps": { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "name": "GridProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context.\n\nOnly use this when the element's content is not enough context for users using assistive technologies.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityRole", + "value": "AccessibilityRole", + "description": "Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.", + "isOptional": true, + "defaultValue": "'generic'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityVisibility", + "value": "'visible' | 'hidden' | 'exclusive'", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "alignContent", + "value": "MaybeResponsive", + "description": "Aligns the grid along the block (column) axis.\n\nThis overrides the block value of `placeContent`.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "alignItems", + "value": "MaybeResponsive", + "description": "Aligns the grid items along the block (column) axis.\n\nThis overrides the block value of `placeItems`.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "background", + "value": "'base' | 'subdued' | 'transparent'", + "description": "Adjust the background of the element.", + "isOptional": true, + "defaultValue": "'transparent'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "blockSize", + "value": "MaybeResponsive", + "description": "Adjust the block size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "border", + "value": "BorderShorthand", + "description": "Set the border via the shorthand property.\n\nThis can be a size, optionally followed by a color, optionally followed by a style.\n\nIf the color is not specified, it will be `base`.\n\nIf the style is not specified, it will be `auto`.\n\nValues can be overridden by `borderWidth`, `borderStyle`, and `borderColor`.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "borderColor", + "value": "'' | 'base'", + "description": "Set the color of the border.\n\nIf set, it takes precedence over the `border` property's color.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "Set the radius of the border.\n\n[1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 4 values: `start-start start-end end-end end-start`\n- 3 values: `start-start (start-end & end-start) start-end`\n- 2 values: `(start-start & end-end) (start-end & end-start)`\n\nFor example:\n- `small-100` means start-start, start-end, end-end and end-start border radii are `small-100`.\n- `small-100 none` means start-start and end-end border radii are `small-100`, start-end and end-start border radii are `none`.\n- `small-100 none large-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `none`.\n- `small-100 none large-100 small-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `small-100`.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "borderStyle", + "value": "MaybeAllValuesShorthandProperty | \"\"", + "description": "Set the style of the border.\n\nIf set, it takes precedence over the `border` property's style.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "Set the width of the border.\n\nIf set, it takes precedence over the `border` property's width.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "columnGap", + "value": "MaybeResponsive", + "description": "Adjust spacing between elements in the inline axis.\n\nThis overrides the column value of `gap`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "display", + "value": "MaybeResponsive<\"auto\" | \"none\">", + "description": "Sets the outer display type of the component. The outer type sets a component’s participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "gap", + "value": "MaybeResponsive>", + "description": "Adjust spacing between elements.\n\nA single value applies to both axes. A pair of values (eg `large-100 large-500`) can be used to set the inline and block axes respectively.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "gridTemplateColumns", + "value": "MaybeResponsive", + "description": "Define columns and specify their size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "gridTemplateRows", + "value": "MaybeResponsive", + "description": "Define rows and specify their size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "inlineSize", + "value": "MaybeResponsive", + "description": "Adjust the inline size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "justifyContent", + "value": "MaybeResponsive", + "description": "Aligns the grid along the inline (row) axis.\n\nThis overrides the inline value of `placeContent`.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "justifyItems", + "value": "MaybeResponsive", + "description": "Aligns the grid items along the inline (row) axis.\n\nThis overrides the inline value of `placeItems`.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "maxBlockSize", + "value": "MaybeResponsive", + "description": "Adjust the maximum block size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "maxInlineSize", + "value": "MaybeResponsive", + "description": "Adjust the maximum inline size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "minBlockSize", + "value": "MaybeResponsive", + "description": "Adjust the minimum block size.", + "isOptional": true, + "defaultValue": "'0'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "minInlineSize", + "value": "MaybeResponsive", + "description": "Adjust the minimum inline size.", + "isOptional": true, + "defaultValue": "'0'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "overflow", + "value": "'hidden' | 'visible'", + "description": "Sets the overflow behavior of the element.\n\n- `hidden`: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse.\n- `visible`: the content that extends beyond the element’s container is visible.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "padding", + "value": "MaybeResponsive>", + "description": "Adjust the padding of all edges.\n\n[1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 4 values: `block-start inline-end block-end inline-start`\n- 3 values: `block-start inline block-end`\n- 2 values: `block inline`\n\nFor example:\n- `large` means block-start, inline-end, block-end and inline-start paddings are `large`.\n- `large none` means block-start and block-end paddings are `large`, inline-start and inline-end paddings are `none`.\n- `large none large` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`.\n- `large none large small` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`.\n\nA padding value of `auto` will use the default padding for the closest container that has had its usual padding removed.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlock", + "value": "MaybeResponsive | \"\">", + "description": "Adjust the block-padding.\n\n- `large none` means block-start padding is `large`, block-end padding is `none`.\n\nThis overrides the block value of `padding`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlockEnd", + "value": "MaybeResponsive", + "description": "Adjust the block-end padding.\n\nThis overrides the block-end value of `paddingBlock`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlockStart", + "value": "MaybeResponsive", + "description": "Adjust the block-start padding.\n\nThis overrides the block-start value of `paddingBlock`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInline", + "value": "MaybeResponsive | \"\">", + "description": "Adjust the inline padding.\n\n- `large none` means inline-start padding is `large`, inline-end padding is `none`.\n\nThis overrides the inline value of `padding`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInlineEnd", + "value": "MaybeResponsive", + "description": "Adjust the inline-end padding.\n\nThis overrides the inline-end value of `paddingInline`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInlineStart", + "value": "MaybeResponsive", + "description": "Adjust the inline-start padding.\n\nThis overrides the inline-start value of `paddingInline`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "placeContent", + "value": "MaybeResponsive<`${ReducedAlignContentKeyword} ${ReducedJustifyContentKeyword}` | ReducedAlignContentKeyword>", + "description": "A shorthand property for `justify-content` and `align-content`.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "placeItems", + "value": "MaybeResponsive<`${ReducedAlignItemsKeyword} ${ReducedJustifyItemsKeyword}` | ReducedAlignItemsKeyword>", + "description": "A shorthand property for `justify-items` and `align-items`.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "PropertySignature", + "name": "rowGap", + "value": "MaybeResponsive", + "description": "Adjust spacing between elements in the block axis.\n\nThis overrides the row value of `gap`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + } + ], + "value": "export interface GridProps extends GridElementProps {\n}" + }, + "SpacingKeyword": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "SpacingKeyword", + "value": "SizeKeyword | \"none\"", + "description": "" + }, + "SizeKeyword": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "SizeKeyword", + "value": "\"small-500\" | \"small-400\" | \"small-300\" | \"small-200\" | \"small-100\" | \"small\" | \"base\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"large-500\"", + "description": "" + }, + "MaybeTwoValuesShorthandProperty": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "MaybeTwoValuesShorthandProperty", + "value": "T | `${T} ${T}`", + "description": "" + }, + "ReducedJustifyContentKeyword": { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedJustifyContentKeyword", + "value": "'center' | 'start' | 'end' | 'normal' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch'", + "description": "" + }, + "ReducedJustifyItemsKeyword": { + "filePath": "src/surfaces/checkout/components/Grid.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedJustifyItemsKeyword", + "value": "'center' | 'start' | 'end' | 'normal' | 'baseline' | 'stretch'", + "description": "" + }, + "SizeUnitsOrNone": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "SizeUnitsOrNone", + "value": "SizeUnits | \"none\"", + "description": "" + }, + "PaddingKeyword": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "PaddingKeyword", + "value": "SizeKeyword | \"none\"", + "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": "accessibilityLabel", + "value": "string", + "description": "A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context.\n\nOnly use this when the element's content is not enough context for users using assistive technologies.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityRole", + "value": "AccessibilityRole", + "description": "Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.", + "isOptional": true, + "defaultValue": "'generic'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityVisibility", + "value": "'visible' | 'hidden' | 'exclusive'", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "background", + "value": "'base' | 'subdued' | 'transparent'", + "description": "Adjust the background of the element.", + "isOptional": true, + "defaultValue": "'transparent'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "blockSize", + "value": "MaybeResponsive", + "description": "Adjust the block size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "border", + "value": "BorderShorthand", + "description": "Set the border via the shorthand property.\n\nThis can be a size, optionally followed by a color, optionally followed by a style.\n\nIf the color is not specified, it will be `base`.\n\nIf the style is not specified, it will be `auto`.\n\nValues can be overridden by `borderWidth`, `borderStyle`, and `borderColor`.", + "isOptional": true, + "defaultValue": "'none' - equivalent to `none base auto`.", + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "// The following are equivalent:\n\n", + "title": "Example" + } + ] + } + ] + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "borderColor", + "value": "'' | 'base'", + "description": "Set the color of the border.\n\nIf set, it takes precedence over the `border` property's color.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "Set the radius of the border.\n\n[1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 4 values: `start-start start-end end-end end-start`\n- 3 values: `start-start (start-end & end-start) start-end`\n- 2 values: `(start-start & end-end) (start-end & end-start)`\n\nFor example:\n- `small-100` means start-start, start-end, end-end and end-start border radii are `small-100`.\n- `small-100 none` means start-start and end-end border radii are `small-100`, start-end and end-start border radii are `none`.\n- `small-100 none large-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `none`.\n- `small-100 none large-100 small-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `small-100`.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "borderStyle", + "value": "MaybeAllValuesShorthandProperty | \"\"", + "description": "Set the style of the border.\n\nIf set, it takes precedence over the `border` property's style.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "Set the width of the border.\n\nIf set, it takes precedence over the `border` property's width.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "display", + "value": "MaybeResponsive<\"auto\" | \"none\">", + "description": "Sets the outer display type of the component. The outer type sets a component’s participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "gridColumn", + "value": "`span ${number}` | \"auto\"", + "description": "Number of columns the item will span across", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "gridRow", + "value": "`span ${number}` | \"auto\"", + "description": "Number of rows the item will span across", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "inlineSize", + "value": "MaybeResponsive", + "description": "Adjust the inline size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "maxBlockSize", + "value": "MaybeResponsive", + "description": "Adjust the maximum block size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "maxInlineSize", + "value": "MaybeResponsive", + "description": "Adjust the maximum inline size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "minBlockSize", + "value": "MaybeResponsive", + "description": "Adjust the minimum block size.", + "isOptional": true, + "defaultValue": "'0'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "minInlineSize", + "value": "MaybeResponsive", + "description": "Adjust the minimum inline size.", + "isOptional": true, + "defaultValue": "'0'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "overflow", + "value": "'hidden' | 'visible'", + "description": "Sets the overflow behavior of the element.\n\n- `hidden`: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse.\n- `visible`: the content that extends beyond the element’s container is visible.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "padding", + "value": "MaybeResponsive>", + "description": "Adjust the padding of all edges.\n\n[1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 4 values: `block-start inline-end block-end inline-start`\n- 3 values: `block-start inline block-end`\n- 2 values: `block inline`\n\nFor example:\n- `large` means block-start, inline-end, block-end and inline-start paddings are `large`.\n- `large none` means block-start and block-end paddings are `large`, inline-start and inline-end paddings are `none`.\n- `large none large` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`.\n- `large none large small` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`.\n\nA padding value of `auto` will use the default padding for the closest container that has had its usual padding removed.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlock", + "value": "MaybeResponsive | \"\">", + "description": "Adjust the block-padding.\n\n- `large none` means block-start padding is `large`, block-end padding is `none`.\n\nThis overrides the block value of `padding`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlockEnd", + "value": "MaybeResponsive", + "description": "Adjust the block-end padding.\n\nThis overrides the block-end value of `paddingBlock`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlockStart", + "value": "MaybeResponsive", + "description": "Adjust the block-start padding.\n\nThis overrides the block-start value of `paddingBlock`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInline", + "value": "MaybeResponsive | \"\">", + "description": "Adjust the inline padding.\n\n- `large none` means inline-start padding is `large`, inline-end padding is `none`.\n\nThis overrides the inline value of `padding`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInlineEnd", + "value": "MaybeResponsive", + "description": "Adjust the inline-end padding.\n\nThis overrides the inline-end value of `paddingInline`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInlineStart", + "value": "MaybeResponsive", + "description": "Adjust the inline-start padding.\n\nThis overrides the inline-start value of `paddingInline`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + } + ], + "value": "export interface GridItemElementProps extends Pick {\n background?: Extract;\n border?: BorderShorthand;\n borderColor?: ReducedColorKeyword | '';\n borderWidth?: MaybeAllValuesShorthandProperty | '';\n borderRadius?: MaybeAllValuesShorthandProperty>;\n}" + }, + "AccessibilityRole": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "AccessibilityRole", + "value": "\"main\" | \"header\" | \"footer\" | \"section\" | \"aside\" | \"navigation\" | \"ordered-list\" | \"list-item\" | \"list-item-separator\" | \"unordered-list\" | \"separator\" | \"status\" | \"alert\" | \"generic\" | \"presentation\" | \"none\"", + "description": "" + }, + "MaybeResponsive": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "MaybeResponsive", + "value": "T | `@container${string}`", + "description": "" + }, + "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": "" + }, + "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": "'base' | 'large' | 'large-100' | 'large-200' | 'none'", + "description": "" + }, + "ReducedColorKeyword": { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedColorKeyword", + "value": "'base'", + "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": "" + }, + "GridItemProps": { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "name": "GridItemProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context.\n\nOnly use this when the element's content is not enough context for users using assistive technologies.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityRole", + "value": "AccessibilityRole", + "description": "Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.", + "isOptional": true, + "defaultValue": "'generic'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityVisibility", + "value": "'visible' | 'hidden' | 'exclusive'", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "background", + "value": "'base' | 'subdued' | 'transparent'", + "description": "Adjust the background of the element.", + "isOptional": true, + "defaultValue": "'transparent'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "blockSize", + "value": "MaybeResponsive", + "description": "Adjust the block size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "border", + "value": "BorderShorthand", + "description": "Set the border via the shorthand property.\n\nThis can be a size, optionally followed by a color, optionally followed by a style.\n\nIf the color is not specified, it will be `base`.\n\nIf the style is not specified, it will be `auto`.\n\nValues can be overridden by `borderWidth`, `borderStyle`, and `borderColor`.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "borderColor", + "value": "'' | 'base'", + "description": "Set the color of the border.\n\nIf set, it takes precedence over the `border` property's color.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "Set the radius of the border.\n\n[1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 4 values: `start-start start-end end-end end-start`\n- 3 values: `start-start (start-end & end-start) start-end`\n- 2 values: `(start-start & end-end) (start-end & end-start)`\n\nFor example:\n- `small-100` means start-start, start-end, end-end and end-start border radii are `small-100`.\n- `small-100 none` means start-start and end-end border radii are `small-100`, start-end and end-start border radii are `none`.\n- `small-100 none large-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `none`.\n- `small-100 none large-100 small-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `small-100`.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "borderStyle", + "value": "MaybeAllValuesShorthandProperty | \"\"", + "description": "Set the style of the border.\n\nIf set, it takes precedence over the `border` property's style.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "Set the width of the border.\n\nIf set, it takes precedence over the `border` property's width.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "display", + "value": "MaybeResponsive<\"auto\" | \"none\">", + "description": "Sets the outer display type of the component. The outer type sets a component’s participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "gridColumn", + "value": "`span ${number}` | \"auto\"", + "description": "Number of columns the item will span across", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "gridRow", + "value": "`span ${number}` | \"auto\"", + "description": "Number of rows the item will span across", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "inlineSize", + "value": "MaybeResponsive", + "description": "Adjust the inline size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "maxBlockSize", + "value": "MaybeResponsive", + "description": "Adjust the maximum block size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "maxInlineSize", + "value": "MaybeResponsive", + "description": "Adjust the maximum inline size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "minBlockSize", + "value": "MaybeResponsive", + "description": "Adjust the minimum block size.", + "isOptional": true, + "defaultValue": "'0'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "minInlineSize", + "value": "MaybeResponsive", + "description": "Adjust the minimum inline size.", + "isOptional": true, + "defaultValue": "'0'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "overflow", + "value": "'hidden' | 'visible'", + "description": "Sets the overflow behavior of the element.\n\n- `hidden`: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse.\n- `visible`: the content that extends beyond the element’s container is visible.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "padding", + "value": "MaybeResponsive>", + "description": "Adjust the padding of all edges.\n\n[1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 4 values: `block-start inline-end block-end inline-start`\n- 3 values: `block-start inline block-end`\n- 2 values: `block inline`\n\nFor example:\n- `large` means block-start, inline-end, block-end and inline-start paddings are `large`.\n- `large none` means block-start and block-end paddings are `large`, inline-start and inline-end paddings are `none`.\n- `large none large` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`.\n- `large none large small` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`.\n\nA padding value of `auto` will use the default padding for the closest container that has had its usual padding removed.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlock", + "value": "MaybeResponsive | \"\">", + "description": "Adjust the block-padding.\n\n- `large none` means block-start padding is `large`, block-end padding is `none`.\n\nThis overrides the block value of `padding`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlockEnd", + "value": "MaybeResponsive", + "description": "Adjust the block-end padding.\n\nThis overrides the block-end value of `paddingBlock`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlockStart", + "value": "MaybeResponsive", + "description": "Adjust the block-start padding.\n\nThis overrides the block-start value of `paddingBlock`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInline", + "value": "MaybeResponsive | \"\">", + "description": "Adjust the inline padding.\n\n- `large none` means inline-start padding is `large`, inline-end padding is `none`.\n\nThis overrides the inline value of `padding`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInlineEnd", + "value": "MaybeResponsive", + "description": "Adjust the inline-end padding.\n\nThis overrides the inline-end value of `paddingInline`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/GridItem.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInlineStart", + "value": "MaybeResponsive", + "description": "Adjust the inline-start padding.\n\nThis overrides the inline-start value of `paddingInline`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + } + ], + "value": "export interface GridItemProps extends GridItemElementProps {\n}" + }, + "SizeUnitsOrNone": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "SizeUnitsOrNone", + "value": "SizeUnits | \"none\"", + "description": "" + }, + "PaddingKeyword": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "PaddingKeyword", + "value": "SizeKeyword | \"none\"", + "description": "" + }, + "SizeKeyword": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "SizeKeyword", + "value": "\"small-500\" | \"small-400\" | \"small-300\" | \"small-200\" | \"small-100\" | \"small\" | \"base\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"large-500\"", + "description": "" + }, + "MaybeTwoValuesShorthandProperty": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "MaybeTwoValuesShorthandProperty", + "value": "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": [ + { + "filePath": "src/surfaces/checkout/components/Heading.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityRole", + "value": "'heading' | 'none' | 'presentation'", + "description": "Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.\n\n- `heading`: defines the element as a heading to a page or section.\n- `presentation`: the heading level will be stripped, and will prevent the element’s implicit ARIA semantics from being exposed to the accessibility tree.\n- `none`: a synonym for the `presentation` role.", + "isOptional": true, + "defaultValue": "'heading'" + }, + { + "filePath": "src/surfaces/checkout/components/Heading.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + } + ], + "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": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Icon.ts", + "syntaxKind": "PropertySignature", + "name": "size", + "value": "'base' | 'small' | 'small-200' | 'small-100' | 'large' | 'large-100'", + "description": "Adjusts the size of the icon.", + "isOptional": true, + "defaultValue": "'base'" + }, + { + "filePath": "src/surfaces/checkout/components/Icon.ts", + "syntaxKind": "PropertySignature", + "name": "tone", + "value": "'info' | 'auto' | 'neutral' | 'success' | 'warning' | 'critical' | 'custom'", + "description": "Sets the tone of the icon, based on the intention of the information being conveyed.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "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}" + }, + "ReducedIconTypes": { + "filePath": "src/surfaces/checkout/components/Icon.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedIconTypes", + "value": "'reset' | 'map' | 'menu' | 'search' | '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' | 'settings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x'", + "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": "accessibilityRole", + "value": "'img' | 'none' | 'presentation'", + "description": "Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.", + "isOptional": true, + "defaultValue": "'img'" + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "alt", + "value": "string", + "description": "An alternative text description that describe the image for the reader to understand what it is about. It is extremely useful for both users using assistive technology and sighted users. A well written description provides people with visual impairments the ability to participate in consuming non-text content. When a screen readers encounters an `s-image`, the description is read and announced aloud. If an image fails to load, potentially due to a poor connection, the `alt` is displayed on screen instead. This has the benefit of letting a sighted buyer know an image was meant to load here, but as an alternative, they’re still able to consume the text content. Read [considerations when writing alternative text](https://www.shopify.com/ca/blog/image-alt-text#4) to learn more.", + "isOptional": true, + "defaultValue": "`''`" + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "aspectRatio", + "value": "`${number}${optionalSpace}/${optionalSpace}${number}` | `${number}`", + "description": "The aspect ratio of the image.\n\nThe rendering of the image will depend on the `inlineSize` value:\n\n- `inlineSize=\"fill\"`: the aspect ratio will be respected and the image will take the necessary space.\n- `inlineSize=\"auto\"`: the image will not render until it has loaded and the aspect ratio will be ignored.\n\nFor example, if the value is set as `50 / 100`, the getter returns `50 / 100`. If the value is set as `0.5`, the getter returns `0.5 / 1`.", + "isOptional": true, + "defaultValue": "'1/1'" + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "border", + "value": "BorderShorthand", + "description": "Set the border via the shorthand property.\n\nThis can be a size, optionally followed by a color, optionally followed by a style.\n\nIf the color is not specified, it will be `base`.\n\nIf the style is not specified, it will be `auto`.\n\nValues can be overridden by `borderWidth`, `borderStyle`, and `borderColor`.", + "isOptional": true, + "defaultValue": "'none' - equivalent to `none base auto`.", + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "// The following are equivalent:\n\n", + "title": "Example" + } + ] + } + ] + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "Set the radius of the border.\n\n[1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 4 values: `start-start start-end end-end end-start`\n- 3 values: `start-start (start-end & end-start) start-end`\n- 2 values: `(start-start & end-end) (start-end & end-start)`\n\nFor example:\n- `small-100` means start-start, start-end, end-end and end-start border radii are `small-100`.\n- `small-100 none` means start-start and end-end border radii are `small-100`, start-end and end-start border radii are `none`.\n- `small-100 none large-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `none`.\n- `small-100 none large-100 small-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `small-100`.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "borderStyle", + "value": "MaybeAllValuesShorthandProperty | \"\"", + "description": "Set the style of the border.\n\nIf set, it takes precedence over the `border` property's style.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "Set the width of the border.\n\nIf set, it takes precedence over the `border` property's width.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "inlineSize", + "value": "'fill' | 'auto'", + "description": "The displayed inline width of the image.\n\n- `fill`: the image will takes up 100% of the available inline size.\n- `auto`: the image will be displayed at its natural size.", + "isOptional": true, + "defaultValue": "'fill'" + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "loading", + "value": "'eager' | 'lazy'", + "description": "Determines the loading behavior of the image:\n- `eager`: Immediately loads the image, irrespective of its position within the visible viewport.\n- `lazy`: Delays loading the image until it approaches a specified distance from the viewport.", + "isOptional": true, + "defaultValue": "'eager'" + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "objectFit", + "value": "'contain' | 'cover'", + "description": "Determines how the content of the image is resized to fit its container. The image is positioned in the center of the container.", + "isOptional": true, + "defaultValue": "'contain'" + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "sizes", + "value": "string", + "description": "A set of media conditions and their corresponding sizes.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "src", + "value": "string", + "description": "The image source (either a remote URL or a local file resource).\n\nWhen the image is loading or no `src` is provided, a placeholder will be rendered.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "srcSet", + "value": "string", + "description": "A set of image sources and their width or pixel density descriptors.\n\nThis overrides the `src` property.", + "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": "'base' | 'large' | 'large-100' | 'large-200' | 'none'", + "description": "" + }, + "ReducedColorKeyword": { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedColorKeyword", + "value": "'base'", + "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": "accessibilityRole", + "value": "'img' | 'none' | 'presentation'", + "description": "Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.", + "isOptional": true, + "defaultValue": "'img'" + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "alt", + "value": "string", + "description": "An alternative text description that describe the image for the reader to understand what it is about. It is extremely useful for both users using assistive technology and sighted users. A well written description provides people with visual impairments the ability to participate in consuming non-text content. When a screen readers encounters an `s-image`, the description is read and announced aloud. If an image fails to load, potentially due to a poor connection, the `alt` is displayed on screen instead. This has the benefit of letting a sighted buyer know an image was meant to load here, but as an alternative, they’re still able to consume the text content. Read [considerations when writing alternative text](https://www.shopify.com/ca/blog/image-alt-text#4) to learn more.", + "isOptional": true, + "defaultValue": "`''`" + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "aspectRatio", + "value": "`${number}${optionalSpace}/${optionalSpace}${number}` | `${number}`", + "description": "The aspect ratio of the image.\n\nThe rendering of the image will depend on the `inlineSize` value:\n\n- `inlineSize=\"fill\"`: the aspect ratio will be respected and the image will take the necessary space.\n- `inlineSize=\"auto\"`: the image will not render until it has loaded and the aspect ratio will be ignored.\n\nFor example, if the value is set as `50 / 100`, the getter returns `50 / 100`. If the value is set as `0.5`, the getter returns `0.5 / 1`.", + "isOptional": true, + "defaultValue": "'1/1'" + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "border", + "value": "BorderShorthand", + "description": "Set the border via the shorthand property.\n\nThis can be a size, optionally followed by a color, optionally followed by a style.\n\nIf the color is not specified, it will be `base`.\n\nIf the style is not specified, it will be `auto`.\n\nValues can be overridden by `borderWidth`, `borderStyle`, and `borderColor`.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "Set the radius of the border.\n\n[1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 4 values: `start-start start-end end-end end-start`\n- 3 values: `start-start (start-end & end-start) start-end`\n- 2 values: `(start-start & end-end) (start-end & end-start)`\n\nFor example:\n- `small-100` means start-start, start-end, end-end and end-start border radii are `small-100`.\n- `small-100 none` means start-start and end-end border radii are `small-100`, start-end and end-start border radii are `none`.\n- `small-100 none large-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `none`.\n- `small-100 none large-100 small-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `small-100`.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "borderStyle", + "value": "MaybeAllValuesShorthandProperty | \"\"", + "description": "Set the style of the border.\n\nIf set, it takes precedence over the `border` property's style.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "Set the width of the border.\n\nIf set, it takes precedence over the `border` property's width.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "inlineSize", + "value": "'fill' | 'auto'", + "description": "The displayed inline width of the image.\n\n- `fill`: the image will takes up 100% of the available inline size.\n- `auto`: the image will be displayed at its natural size.", + "isOptional": true, + "defaultValue": "'fill'" + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "loading", + "value": "'eager' | 'lazy'", + "description": "Determines the loading behavior of the image:\n- `eager`: Immediately loads the image, irrespective of its position within the visible viewport.\n- `lazy`: Delays loading the image until it approaches a specified distance from the viewport.", + "isOptional": true, + "defaultValue": "'eager'" + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "objectFit", + "value": "'contain' | 'cover'", + "description": "Determines how the content of the image is resized to fit its container. The image is positioned in the center of the container.", + "isOptional": true, + "defaultValue": "'contain'" + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "sizes", + "value": "string", + "description": "A set of media conditions and their corresponding sizes.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "src", + "value": "string", + "description": "The image source (either a remote URL or a local file resource).\n\nWhen the image is loading or no `src` is provided, a placeholder will be rendered.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Image.ts", + "syntaxKind": "PropertySignature", + "name": "srcSet", + "value": "string", + "description": "A set of image sources and their width or pixel density descriptors.\n\nThis overrides the `src` property.", + "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": "accessibilityLabel", + "value": "string", + "description": "A label that describes the purpose or contents of the Link. It will be read to users using assistive technologies such as screen readers.\n\nUse this when using only an icon or the content of the link is not enough context for users using assistive technologies.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Link.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/checkout/components/Link.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/checkout/components/Link.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 `click` event.\n- If a `commandFor` is set, the `command` will be executed instead of the navigation.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Link.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Link.ts", + "syntaxKind": "PropertySignature", + "name": "interestFor", + "value": "string", + "description": "ID of a component that should respond to interest (e.g. hover and focus) on this component.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Link.ts", + "syntaxKind": "PropertySignature", + "name": "lang", + "value": "string", + "description": "Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. [Reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) (\"subtag\" label)", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Link.ts", + "syntaxKind": "PropertySignature", + "name": "target", + "value": "'auto' | '_blank'", + "description": "Specifies where to display the linked URL.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Link.ts", + "syntaxKind": "PropertySignature", + "name": "tone", + "value": "'auto' | 'neutral'", + "description": "Sets the tone of the Link, based on the intention of the information being conveyed.", + "isOptional": true, + "defaultValue": "'auto'" + } + ], + "value": "export interface LinkElementProps extends Pick {\n target?: Extract;\n tone?: Extract;\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": [ + { + "filePath": "src/surfaces/checkout/components/Map.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "A label that describes the purpose or contents of the map.\n\nWhen set, it will be announced to users using assistive technologies and will provide them with more context.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Map.ts", + "syntaxKind": "PropertySignature", + "name": "apiKey", + "value": "string", + "description": "A valid API key for the map service provider.\n\nThe map service provider may require an API key. Without an API key the map could be hidden or render in a limited developer mode.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Map.ts", + "syntaxKind": "PropertySignature", + "name": "blockSize", + "value": "MaybeResponsive", + "description": "Adjust the block size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Map.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Map.ts", + "syntaxKind": "PropertySignature", + "name": "inlineSize", + "value": "MaybeResponsive", + "description": "Adjust the inline size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Map.ts", + "syntaxKind": "PropertySignature", + "name": "latitude", + "value": "number", + "description": "Map center’s latitude in degrees.", + "isOptional": true, + "defaultValue": "0" + }, + { + "filePath": "src/surfaces/checkout/components/Map.ts", + "syntaxKind": "PropertySignature", + "name": "longitude", + "value": "number", + "description": "Map center’s longitude in degrees.", + "isOptional": true, + "defaultValue": "0" + }, + { + "filePath": "src/surfaces/checkout/components/Map.ts", + "syntaxKind": "PropertySignature", + "name": "maxBlockSize", + "value": "MaybeResponsive", + "description": "Adjust the maximum block size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Map.ts", + "syntaxKind": "PropertySignature", + "name": "maxInlineSize", + "value": "MaybeResponsive", + "description": "Adjust the maximum inline size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Map.ts", + "syntaxKind": "PropertySignature", + "name": "maxZoom", + "value": "number", + "description": "The maximum zoom level which will be displayed on the map.\n\nValid zoom values are numbers from zero up to 18.", + "isOptional": true, + "defaultValue": "18" + }, + { + "filePath": "src/surfaces/checkout/components/Map.ts", + "syntaxKind": "PropertySignature", + "name": "minBlockSize", + "value": "MaybeResponsive", + "description": "Adjust the minimum block size.", + "isOptional": true, + "defaultValue": "'0'" + }, + { + "filePath": "src/surfaces/checkout/components/Map.ts", + "syntaxKind": "PropertySignature", + "name": "minInlineSize", + "value": "MaybeResponsive", + "description": "Adjust the minimum inline size.", + "isOptional": true, + "defaultValue": "'0'" + }, + { + "filePath": "src/surfaces/checkout/components/Map.ts", + "syntaxKind": "PropertySignature", + "name": "minZoom", + "value": "number", + "description": "The minimum zoom level which will be displayed on the map.\n\nValid zoom values are numbers from zero up to 18.", + "isOptional": true, + "defaultValue": "0" + }, + { + "filePath": "src/surfaces/checkout/components/Map.ts", + "syntaxKind": "PropertySignature", + "name": "zoom", + "value": "number", + "description": "The initial Map zoom level.\n\nValid zoom values are numbers from zero up to 18. Larger zoom values correspond to a higher resolution.", + "isOptional": true, + "defaultValue": "4" + } + ], + "value": "export interface MapElementProps extends Pick {\n}" + }, + "MaybeResponsive": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "MaybeResponsive", + "value": "T | `@container${string}`", + "description": "" + }, + "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": "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": "accessibilityLabel", + "value": "string", + "description": "A label that describes the purpose of the marker. When set, it will be announced to users using assistive technologies and will provide them with more context.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/MapMarker.ts", + "syntaxKind": "PropertySignature", + "name": "blockSize", + "value": "MaybeResponsive", + "description": "Adjust the block size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/MapMarker.ts", + "syntaxKind": "PropertySignature", + "name": "clusterable", + "value": "boolean", + "description": "Allows grouping the marker in clusters when zoomed out.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/MapMarker.ts", + "syntaxKind": "PropertySignature", + "name": "command", + "value": "'--auto' | '--show' | '--hide' | '--toggle'", + "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/checkout/components/MapMarker.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/checkout/components/MapMarker.ts", + "syntaxKind": "PropertySignature", + "name": "inlineSize", + "value": "MaybeResponsive", + "description": "Adjust the inline size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/MapMarker.ts", + "syntaxKind": "PropertySignature", + "name": "latitude", + "value": "number", + "description": "Marker’s location latitude in degrees.", + "isOptional": true, + "defaultValue": "0" + }, + { + "filePath": "src/surfaces/checkout/components/MapMarker.ts", + "syntaxKind": "PropertySignature", + "name": "longitude", + "value": "number", + "description": "Marker’s longitude latitude in degrees.", + "isOptional": true, + "defaultValue": "0" + } + ], + "value": "export interface MapMarkerElementProps extends Pick {\n command?: Extract;\n}" + }, + "MaybeResponsive": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "MaybeResponsive", + "value": "T | `@container${string}`", + "description": "" + }, + "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": "" + } + } + }, + { + "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": "The modal component displays content in an overlay. Use to create a distraction-free experience such as a confirmation dialog or a settings panel.\n\nA button triggers the modal using the `commandFor` attribute. Content within the modal scrolls if it exceeds available height.", + "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": "accessibilityLabel", + "value": "string", + "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 + }, + { + "filePath": "src/surfaces/checkout/components/Modal.ts", + "syntaxKind": "PropertySignature", + "name": "heading", + "value": "string", + "description": "A title that describes the content of the Modal.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Modal.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Modal.ts", + "syntaxKind": "PropertySignature", + "name": "padding", + "value": "'base' | 'none'", + "description": "Adjust the padding around the Modal content.\n\n`base`: applies padding that is appropriate for the element.\n\n`none`: removes all padding from the element. This can be useful when elements inside the Modal need to span to the edge of the Modal. For example, a full-width image. In this case, rely on `Box` with a padding of 'base' to bring back the desired padding for the rest of the content.", + "isOptional": true, + "defaultValue": "'base'" + }, + { + "filePath": "src/surfaces/checkout/components/Modal.ts", + "syntaxKind": "PropertySignature", + "name": "size", + "value": "'base' | 'small' | 'small-100' | 'large' | 'large-100' | 'max'", + "description": "Adjust the size of the Modal.\n\n`max`: expands the Modal to its maximum size as defined by the host application, on both the horizontal and vertical axes.", + "isOptional": true, + "defaultValue": "'base'" + } + ], + "value": "export interface ModalElementProps extends Pick {\n size?: Extract;\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": [ + { + "filePath": "src/surfaces/checkout/components/Modal.ts", + "syntaxKind": "PropertySignature", + "name": "hideOverlay", + "value": "() => void", + "description": "Method to hide an overlay." + } + ], + "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": [ + { + "filePath": "src/surfaces/checkout/components/MoneyField.ts", + "syntaxKind": "PropertySignature", + "name": "autocomplete", + "value": "AutocompleteField | `${AutocompleteSection} ${AutocompleteField}` | `${AutocompleteGroup} ${AutocompleteField}` | `${AutocompleteSection} ${AutocompleteGroup} ${AutocompleteField}` | \"on\" | \"off\"", + "description": "A hint as to the intended content of the field.\n\nWhen set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents.\n\nWhen set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes.\n\nAlternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill.", + "isOptional": true, + "defaultValue": "'on' for everything else" + }, + { + "filePath": "src/surfaces/checkout/components/MoneyField.ts", + "syntaxKind": "PropertySignature", + "name": "defaultValue", + "value": "string", + "description": "The default value for the field.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/MoneyField.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the field, disallowing any interaction.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/MoneyField.ts", + "syntaxKind": "PropertySignature", + "name": "error", + "value": "string", + "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/MoneyField.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/MoneyField.ts", + "syntaxKind": "PropertySignature", + "name": "label", + "value": "string", + "description": "Content to use as the field label.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/MoneyField.ts", + "syntaxKind": "PropertySignature", + "name": "labelAccessibilityVisibility", + "value": "'visible' | 'exclusive'", + "description": "Changes the visibility of the component's label.\n\n- `visible`: the label is visible to all users.\n- `exclusive`: the label is visually hidden but remains in the accessibility tree.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/MoneyField.ts", + "syntaxKind": "PropertySignature", + "name": "max", + "value": "number", + "description": "The highest decimal or integer to be accepted for the field. When used with `step` the value will round down to the max number.\n\nNote: a user will still be able to use the keyboard to input a number higher than the max. It is up to the developer to add appropriate validation.", + "isOptional": true, + "defaultValue": "Infinity" + }, + { + "filePath": "src/surfaces/checkout/components/MoneyField.ts", + "syntaxKind": "PropertySignature", + "name": "min", + "value": "number", + "description": "The lowest decimal or integer to be accepted for the field. When used with `step` the value will round up to the min number.\n\nNote: a user will still be able to use the keyboard to input a number lower than the min. It is up to the developer to add appropriate validation.", + "isOptional": true, + "defaultValue": "-Infinity" + }, + { + "filePath": "src/surfaces/checkout/components/MoneyField.ts", + "syntaxKind": "PropertySignature", + "name": "name", + "value": "string", + "description": "An identifier for the field that is unique within the nearest containing form.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/MoneyField.ts", + "syntaxKind": "PropertySignature", + "name": "readOnly", + "value": "boolean", + "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/MoneyField.ts", + "syntaxKind": "PropertySignature", + "name": "required", + "value": "boolean", + "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/MoneyField.ts", + "syntaxKind": "PropertySignature", + "name": "step", + "value": "number", + "description": "The amount the value can increase or decrease by. This can be an integer or decimal. If a `max` or `min` is specified with `step` when increasing/decreasing the value via the buttons, the final value will always round to the `max` or `min` rather than the closest valid amount.", + "isOptional": true, + "defaultValue": "1" + }, + { + "filePath": "src/surfaces/checkout/components/MoneyField.ts", + "syntaxKind": "PropertySignature", + "name": "value", + "value": "string", + "description": "The current value for the field. If omitted, the field will be empty.", + "isOptional": true + } + ], + "value": "export interface MoneyFieldElementProps extends Pick {\n}" + }, + "AutocompleteSection": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "AutocompleteSection", + "value": "`section-${string}`", + "description": "The “section” scopes the autocomplete data that should be inserted to a specific area of the page.\n\nCommonly used when there are multiple fields with the same autocomplete needs in the same page. For example: 2 shipping address forms in the same page." + }, + "AutocompleteGroup": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "AutocompleteGroup", + "value": "\"shipping\" | \"billing\"", + "description": "The contact information group the autocomplete data should be sourced from." + } + } + }, + { + "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": "autocomplete", + "value": "AutocompleteField | `${AutocompleteSection} ${AutocompleteField}` | `${AutocompleteGroup} ${AutocompleteField}` | `${AutocompleteSection} ${AutocompleteGroup} ${AutocompleteField}` | \"on\" | \"off\"", + "description": "A hint as to the intended content of the field.\n\nWhen set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents.\n\nWhen set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes.\n\nAlternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill.", + "isOptional": true, + "defaultValue": "'on' for everything else" + }, + { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "PropertySignature", + "name": "controls", + "value": "'auto' | 'stepper' | 'none'", + "description": "Sets the type of controls displayed in the field.\n\n- `stepper`: displays buttons to increase or decrease the value of the field by the stepping interval defined in the `step` property. Appropriate mouse and [keyboard interactions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role#keyboard_interactions) to control the value of the field are enabled.\n- `none`: no controls are displayed and users must input the value manually. Arrow keys and scroll wheels can’t be used either to avoid accidental changes.\n- `auto`: the presence of the controls depends on the surface and context.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "PropertySignature", + "name": "defaultValue", + "value": "string", + "description": "The default value for the field.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the field, disallowing any interaction.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "PropertySignature", + "name": "error", + "value": "string", + "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "PropertySignature", + "name": "icon", + "value": "'' | 'reset' | 'map' | 'menu' | 'search' | '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' | 'settings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x'", + "description": "The type of icon to be displayed in the field.", + "isOptional": true, + "defaultValue": "''" + }, + { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "PropertySignature", + "name": "inputMode", + "value": "'decimal' | 'numeric'", + "description": "Sets the virtual keyboard.", + "isOptional": true, + "defaultValue": "'decimal'" + }, + { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "PropertySignature", + "name": "label", + "value": "string", + "description": "Content to use as the field label.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "PropertySignature", + "name": "labelAccessibilityVisibility", + "value": "'visible' | 'exclusive'", + "description": "Changes the visibility of the component's label.\n\n- `visible`: the label is visible to all users.\n- `exclusive`: the label is visually hidden but remains in the accessibility tree.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "PropertySignature", + "name": "max", + "value": "number", + "description": "The highest decimal or integer to be accepted for the field. When used with `step` the value will round down to the max number.\n\nNote: a user will still be able to use the keyboard to input a number higher than the max. It is up to the developer to add appropriate validation.", + "isOptional": true, + "defaultValue": "Infinity" + }, + { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "PropertySignature", + "name": "min", + "value": "number", + "description": "The lowest decimal or integer to be accepted for the field. When used with `step` the value will round up to the min number.\n\nNote: a user will still be able to use the keyboard to input a number lower than the min. It is up to the developer to add appropriate validation.", + "isOptional": true, + "defaultValue": "-Infinity" + }, + { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "PropertySignature", + "name": "name", + "value": "string", + "description": "An identifier for the field that is unique within the nearest containing form.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "PropertySignature", + "name": "placeholder", + "value": "string", + "description": "", + "isOptional": true, + "deprecationMessage": "Use `label` instead.", + "isPrivate": true + }, + { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "PropertySignature", + "name": "prefix", + "value": "string", + "description": "A value to be displayed immediately before the editable portion of the field.\n\nThis is useful for displaying an implied part of the value, such as \"https://\" or \"+353\".\n\nThis cannot be edited by the user, and it isn't included in the value of the field.\n\nIt may not be displayed until the user has interacted with the input. For example, an inline label may take the place of the prefix until the user focuses the input.", + "isOptional": true, + "defaultValue": "''" + }, + { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "PropertySignature", + "name": "readOnly", + "value": "boolean", + "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "PropertySignature", + "name": "required", + "value": "boolean", + "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "PropertySignature", + "name": "step", + "value": "number", + "description": "The amount the value can increase or decrease by. This can be an integer or decimal. If a `max` or `min` is specified with `step` when increasing/decreasing the value via the buttons, the final value will always round to the `max` or `min` rather than the closest valid amount.", + "isOptional": true, + "defaultValue": "1" + }, + { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "PropertySignature", + "name": "suffix", + "value": "string", + "description": "A value to be displayed immediately after the editable portion of the field.\n\nThis is useful for displaying an implied part of the value, such as \"@shopify.com\", or \"%\".\n\nThis cannot be edited by the user, and it isn't included in the value of the field.\n\nIt may not be displayed until the user has interacted with the input. For example, an inline label may take the place of the suffix until the user focuses the input.", + "isOptional": true, + "defaultValue": "''" + }, + { + "filePath": "src/surfaces/checkout/components/NumberField.ts", + "syntaxKind": "PropertySignature", + "name": "value", + "value": "string", + "description": "The current value for the field. If omitted, the field will be empty.", + "isOptional": true + } + ], + "value": "export interface NumberFieldElementProps extends Pick {\n icon?: IconProps['type'];\n /**\n * @deprecated Use `label` instead.\n * @private\n */\n placeholder?: string;\n}" + }, + "AutocompleteSection": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "AutocompleteSection", + "value": "`section-${string}`", + "description": "The “section” scopes the autocomplete data that should be inserted to a specific area of the page.\n\nCommonly used when there are multiple fields with the same autocomplete needs in the same page. For example: 2 shipping address forms in the same page." + }, + "AutocompleteGroup": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "AutocompleteGroup", + "value": "\"shipping\" | \"billing\"", + "description": "The contact information group the autocomplete data should be sourced from." + } + } + }, + { + "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": [ + { + "filePath": "src/surfaces/checkout/components/OrderedList.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + } + ], + "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": [ + { + "filePath": "src/surfaces/checkout/components/ListItem.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + } + ], + "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": "accessibilityVisibility", + "value": "'visible' | 'hidden' | 'exclusive'", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/Paragraph.ts", + "syntaxKind": "PropertySignature", + "name": "color", + "value": "'base' | 'subdued'", + "description": "Modify the color to be more or less intense.", + "isOptional": true, + "defaultValue": "'base'" + }, + { + "filePath": "src/surfaces/checkout/components/Paragraph.ts", + "syntaxKind": "PropertySignature", + "name": "dir", + "value": "'ltr' | 'rtl' | 'auto' | ''", + "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: languages written from left to right (e.g. English)\n- `rtl`: languages written from right to left (e.g. Arabic)\n- `auto`: the user agent determines the direction based on the content\n- `''`: direction is inherited from parent elements (equivalent to not setting the attribute)", + "isOptional": true, + "defaultValue": "''" + }, + { + "filePath": "src/surfaces/checkout/components/Paragraph.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Paragraph.ts", + "syntaxKind": "PropertySignature", + "name": "lang", + "value": "string", + "description": "Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. [Reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) (\"subtag\" label)\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", + "isOptional": true, + "defaultValue": "''" + }, + { + "filePath": "src/surfaces/checkout/components/Paragraph.ts", + "syntaxKind": "PropertySignature", + "name": "tone", + "value": "'info' | 'auto' | 'neutral' | 'success' | 'warning' | 'critical' | 'custom'", + "description": "Sets the tone of the component, based on the intention of the information being conveyed.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Paragraph.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "ParagraphType", + "description": "Provide semantic meaning and default styling to the paragraph.\n\nOther presentation properties on `s-paragraph` override the default styling.", + "isOptional": true, + "defaultValue": "'paragraph'" + } + ], + "value": "export interface ParagraphElementProps extends Pick {\n color?: Extract;\n tone?: Extract;\n}" + }, + "ParagraphType": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ParagraphType", + "value": "\"paragraph\" | \"small\"", + "description": "" + } + } + } + ], + "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": [ + { + "filePath": "src/surfaces/checkout/components/PasswordField.ts", + "syntaxKind": "PropertySignature", + "name": "autocomplete", + "value": "AutocompleteField | `${AutocompleteSection} ${AutocompleteField}` | `${AutocompleteGroup} ${AutocompleteField}` | `${AutocompleteSection} ${AutocompleteGroup} ${AutocompleteField}` | \"on\" | \"off\"", + "description": "A hint as to the intended content of the field.\n\nWhen set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents.\n\nWhen set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes.\n\nAlternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill.", + "isOptional": true, + "defaultValue": "'on' for everything else" + }, + { + "filePath": "src/surfaces/checkout/components/PasswordField.ts", + "syntaxKind": "PropertySignature", + "name": "defaultValue", + "value": "string", + "description": "The default value for the field.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/PasswordField.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the field, disallowing any interaction.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/PasswordField.ts", + "syntaxKind": "PropertySignature", + "name": "error", + "value": "string", + "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/PasswordField.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/PasswordField.ts", + "syntaxKind": "PropertySignature", + "name": "label", + "value": "string", + "description": "Content to use as the field label.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/PasswordField.ts", + "syntaxKind": "PropertySignature", + "name": "labelAccessibilityVisibility", + "value": "'visible' | 'exclusive'", + "description": "Changes the visibility of the component's label.\n\n- `visible`: the label is visible to all users.\n- `exclusive`: the label is visually hidden but remains in the accessibility tree.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/PasswordField.ts", + "syntaxKind": "PropertySignature", + "name": "maxLength", + "value": "number", + "description": "Specifies the maximum number of characters allowed.", + "isOptional": true, + "defaultValue": "Infinity" + }, + { + "filePath": "src/surfaces/checkout/components/PasswordField.ts", + "syntaxKind": "PropertySignature", + "name": "minLength", + "value": "number", + "description": "Specifies the min number of characters allowed.", + "isOptional": true, + "defaultValue": "0" + }, + { + "filePath": "src/surfaces/checkout/components/PasswordField.ts", + "syntaxKind": "PropertySignature", + "name": "name", + "value": "string", + "description": "An identifier for the field that is unique within the nearest containing form.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/PasswordField.ts", + "syntaxKind": "PropertySignature", + "name": "readOnly", + "value": "boolean", + "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/PasswordField.ts", + "syntaxKind": "PropertySignature", + "name": "required", + "value": "boolean", + "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/PasswordField.ts", + "syntaxKind": "PropertySignature", + "name": "value", + "value": "string", + "description": "The current value for the field. If omitted, the field will be empty.", + "isOptional": true + } + ], + "value": "export interface PasswordFieldElementProps extends Pick {\n}" + }, + "AutocompleteSection": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "AutocompleteSection", + "value": "`section-${string}`", + "description": "The “section” scopes the autocomplete data that should be inserted to a specific area of the page.\n\nCommonly used when there are multiple fields with the same autocomplete needs in the same page. For example: 2 shipping address forms in the same page." + }, + "AutocompleteGroup": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "AutocompleteGroup", + "value": "\"shipping\" | \"billing\"", + "description": "The contact information group the autocomplete data should be sourced from." + } + } + }, + { + "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": [ + { + "filePath": "src/surfaces/checkout/components/PaymentIcon.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "A label that describes the purpose or contents of the icon.\n\nWhen set, it will be announced to users using assistive technologies and will provide them with more context. This should only be used if the icon requires an alternative internationalised label or if it is otherwise inappropriate to make use of the default label included with the icon.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/PaymentIcon.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/PaymentIcon.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "PaymentIconName | AnyString", + "description": "The icon type of the payment method", + "isOptional": true, + "defaultValue": "''" + } + ], + "value": "export interface PaymentIconElementProps extends PaymentIconProps$1 {\n}" + }, + "PaymentIconName": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "PaymentIconName", + "value": "\"abn\" | \"acima-leasing\" | \"acuotaz\" | \"ada\" | \"addi\" | \"adyen\" | \"aeropay\" | \"affin-bank\" | \"affirm\" | \"aftee\" | \"afterpay-paynl-version\" | \"afterpay\" | \"airtel-money\" | \"airteltigo-mobile-money\" | \"aktia\" | \"akulaku-paylater\" | \"akulaku\" | \"alandsbanken\" | \"alfamart\" | \"alfamidi\" | \"alipay-hk\" | \"alipay-paynl-version\" | \"alipay\" | \"alliance-bank\" | \"alma\" | \"aman\" | \"amazon\" | \"ambank\" | \"american-express\" | \"amex\" | \"ansa-stored-value\" | \"ansa\" | \"anyday\" | \"apecoin\" | \"aplazo\" | \"apple-pay\" | \"aqsat\" | \"arbitrum\" | \"arhaus\" | \"arvato\" | \"ashley-plcc\" | \"ask\" | \"astrapay\" | \"atm-bersama\" | \"atobaraidotcom\" | \"atome\" | \"atone\" | \"atrato\" | \"au-kantan-kessai\" | \"au-pay\" | \"authorize-net\" | \"avalanche\" | \"axs\" | \"bancnet\" | \"banco-azteca\" | \"bancomat\" | \"bancontact\" | \"bangkok-bank\" | \"bank-islam\" | \"bank-muamalat\" | \"bank-rakyat\" | \"barclays\" | \"base\" | \"bbva-cie\" | \"bc-card\" | \"bca-klikpay\" | \"bca\" | \"bdo\" | \"belfius\" | \"benefit\" | \"best-buy-card\" | \"biercheque-paynl-version\" | \"bigc\" | \"billease\" | \"biller-paynl-version\" | \"billie\" | \"billink-method\" | \"billink\" | \"bitcoin-cash\" | \"bitcoin\" | \"bizum\" | \"blik\" | \"bnbchain\" | \"bni\" | \"bnp\" | \"bogus-app-coin\" | \"bogus\" | \"boleto\" | \"boodil\" | \"boost\" | \"bpi\" | \"braintree\" | \"bread-pay\" | \"bread\" | \"bri-direct-debit\" | \"bri\" | \"brimo\" | \"bsi\" | \"bsn\" | \"bss\" | \"busd\" | \"careem-pay\" | \"cartes-bancaires\" | \"cash-app-pay\" | \"cash\" | \"cashew\" | \"cashinvoice-latin-america\" | \"catch-payments\" | \"cebuana\" | \"cembrapay\" | \"centi\" | \"cetelem\" | \"checkout-finance\" | \"chinabank\" | \"cimb-clicks\" | \"cimb\" | \"circle-k\" | \"citadele\" | \"citi-pay\" | \"clave-telered\" | \"clearpay\" | \"clerq\" | \"cleverpay\" | \"clip\" | \"cliq\" | \"codensa\" | \"coinsph\" | \"collector-bank\" | \"coop\" | \"coppel-pay\" | \"credit-agricole\" | \"credit-key\" | \"creditclick-paynl-version\" | \"credix\" | \"cuotas\" | \"d-barai\" | \"dai\" | \"daily-yamazaki\" | \"dan-dan\" | \"dana\" | \"danamon-online\" | \"dankort\" | \"danske-bank\" | \"dappmx\" | \"dash\" | \"daviplata\" | \"de-cadeaukaart\" | \"depay\" | \"deutsche-bank\" | \"dinacard\" | \"diners-club\" | \"direct-bank-transfer-latin-america\" | \"directa24\" | \"directpay\" | \"discover\" | \"divido\" | \"dnb\" | \"docomo-barai\" | \"dogecoin\" | \"dropp\" | \"duitnow\" | \"duologi\" | \"dwolla\" | \"easywallet\" | \"ebucks\" | \"echelon-financing\" | \"ecpay\" | \"edenred\" | \"efecty\" | \"eft-secure\" | \"eftpos-au\" | \"eghl\" | \"elo\" | \"elv\" | \"empty\" | \"enets\" | \"eos\" | \"epayments\" | \"epospay\" | \"eps\" | \"erste\" | \"escrowcom\" | \"esr-paymentslip-switzerland\" | \"ethereum\" | \"etihad-guest-pay\" | \"etika\" | \"ewallet-indonesia\" | \"ewallet-philippines\" | \"ewallet-southkorea\" | \"facebook-pay\" | \"fairstone-payments\" | \"fam\" | \"familymart\" | \"fantom\" | \"farmlands\" | \"fashion-giftcard-paynlversion\" | \"fashioncheque\" | \"favepay\" | \"fawry\" | \"finloup\" | \"fintecture\" | \"fintoc\" | \"flexiti\" | \"float-payments\" | \"flying-blue-plus\" | \"forbrugsforeningen\" | \"forsa\" | \"fortiva\" | \"fps\" | \"fpx\" | \"freecharge\" | \"freedompay\" | \"futurepay-mytab\" | \"gcash\" | \"generalfinancing\" | \"generic\" | \"genoapay\" | \"gezondheidsbon-paynl-version\" | \"giftcard\" | \"giropay\" | \"givacard\" | \"glbe-paypal\" | \"glbe-plus\" | \"gmo-atokara\" | \"gmo-bank-transfer\" | \"gmo-postpay\" | \"gmo-virtualaccount\" | \"gnosis\" | \"google-pay\" | \"google-wallet\" | \"gopay\" | \"grabpay\" | \"grailpay\" | \"gusd\" | \"hana-card\" | \"handelsbanken\" | \"happy-pay\" | \"hello-clever\" | \"heylight\" | \"hitrustpay-transfer\" | \"home-credit\" | \"hong-leong-bank\" | \"hong-leong-connect\" | \"hsbc\" | \"huis-tuin-cadeau\" | \"humm\" | \"hyper\" | \"hypercard\" | \"hypercash\" | \"hyundai-card\" | \"ibexpay\" | \"ideal\" | \"in3-via-ideal\" | \"in3\" | \"inbank\" | \"indomaret\" | \"ing-homepay\" | \"interac\" | \"ivy\" | \"iwocapay-pay-later\" | \"jcb\" | \"jenius\" | \"jko\" | \"jousto\" | \"kakao-pay\" | \"kakebaraidotcom\" | \"kasikornbank\" | \"kasssh\" | \"katapult\" | \"kb-card\" | \"kbc-cbc\" | \"kcp-credit-card\" | \"kfast\" | \"khqr\" | \"klarna-pay-later\" | \"klarna-pay-now\" | \"klarna-slice-it\" | \"klarna\" | \"knaken-settle\" | \"knet\" | \"koalafi\" | \"koin\" | \"krediidipank\" | \"kredivo\" | \"krungsri\" | \"krungthai-bank\" | \"kueski-pay\" | \"kunst-en-cultuur-cadeaukaart\" | \"kuwait-finance-house\" | \"land-bank\" | \"laser\" | \"latitude-creditline-au\" | \"latitude-gem-au\" | \"latitude-gem-nz\" | \"latitude-go-au\" | \"latitudepay\" | \"lawson\" | \"laybuy-heart\" | \"laybuy\" | \"lbc\" | \"lhv\" | \"line-pay\" | \"linkaja\" | \"linkpay\" | \"litecoin\" | \"lku\" | \"lloyds\" | \"lotte-card\" | \"lpb\" | \"luminor\" | \"lunch-check\" | \"lydia\" | \"mach\" | \"mada\" | \"maestro\" | \"mandiri\" | \"mash\" | \"master\" | \"mastercard\" | \"masterpass\" | \"maxima\" | \"maya-bank\" | \"maya\" | \"maybank-qrpay\" | \"maybank\" | \"maybankm2u\" | \"mb-way\" | \"mb\" | \"mcash\" | \"medicinos-bankas\" | \"meeza\" | \"mercado-credito\" | \"mercado-pago\" | \"merpay\" | \"meta-pay\" | \"metro-bank\" | \"military-starcard\" | \"minicuotas\" | \"ministop\" | \"mobicred\" | \"mobikwik\" | \"mobilepay\" | \"mode\" | \"mokka\" | \"momopay\" | \"mondido\" | \"monero\" | \"monzo\" | \"mpesa\" | \"mtn-mobile-money\" | \"multisafepay\" | \"mybank\" | \"myfatoorah\" | \"n26\" | \"naps\" | \"nationale-bioscoopbon\" | \"nationale-entertainmentcard\" | \"natwest\" | \"naver-pay\" | \"nelo\" | \"nequi\" | \"netbanking\" | \"neteller\" | \"nh-card\" | \"nordea\" | \"notyd\" | \"novuna\" | \"npatobarai\" | \"npkakebarai\" | \"oca\" | \"ocbc-bank\" | \"octo-clicks\" | \"octopus\" | \"offline-bank-transfer-latin-america\" | \"ola-money\" | \"omannet\" | \"omasp\" | \"oney\" | \"online-banking\" | \"online-banktransfer\" | \"op\" | \"opay\" | \"openpay\" | \"optimism\" | \"orange-mobile-money\" | \"overstock-citicobrand\" | \"overstock-citiplcc\" | \"ovo\" | \"oxxo\" | \"ozow\" | \"pagoefectivo\" | \"paid\" | \"paidy\" | \"palawa\" | \"palawan\" | \"pastpay\" | \"pay-after-delivery-instalments\" | \"pay-by-bank-us\" | \"pay-by-bank\" | \"pay-easy\" | \"pay-pay\" | \"paybylink\" | \"paycash\" | \"payco\" | \"payconiq\" | \"payd\" | \"payfast-instant-eft\" | \"payflex\" | \"payid\" | \"payitmonthly\" | \"payjustnow\" | \"paymark-online-eftpos\" | \"paymaya\" | \"payme\" | \"paynow-mbank\" | \"paynow\" | \"payoo-qr\" | \"payoo\" | \"paypal\" | \"payplan\" | \"paypo\" | \"payrexx-bank-transfer\" | \"payright\" | \"paysafecard-paynl-version\" | \"paysafecard\" | \"paysafecash\" | \"paysera\" | \"paysquad\" | \"paytm\" | \"payto\" | \"paytomorrow\" | \"payu\" | \"payzapp\" | \"pei\" | \"perlasfinance\" | \"permata\" | \"pf-pay\" | \"pivo\" | \"pix\" | \"podium-cadeaukaart\" | \"pointspay\" | \"poli\" | \"polygon\" | \"poppankki\" | \"postfinance-card\" | \"postfinance-efinance\" | \"postpay\" | \"powered-by-ansa-stored-value\" | \"powered-by-ansa\" | \"powerpay\" | \"pps\" | \"prepaysolutions\" | \"progressive-leasing\" | \"przelew24\" | \"przelewy24-paynl-version\" | \"przelewy24\" | \"pse\" | \"public-bank\" | \"publicbank-pbe\" | \"qasitli\" | \"qliro\" | \"qr-promptpay\" | \"qris\" | \"qrph\" | \"rabbit-line-pay\" | \"rabobank\" | \"rakuten-pay\" | \"rapid-transfer\" | \"ratepay\" | \"raty-pekao\" | \"rcbc\" | \"rcs\" | \"reka\" | \"resolve-pay\" | \"revolut\" | \"rhb-bank\" | \"rhb-now\" | \"rietumu\" | \"riverty-paynl-version\" | \"riverty\" | \"rupay\" | \"saastopankki\" | \"sadad\" | \"sam\" | \"samsung-card\" | \"samsung-pay\" | \"santander\" | \"satisfi\" | \"satispay\" | \"sbpl\" | \"scalapay\" | \"scream-truck-wallet\" | \"scream-truck\" | \"seb\" | \"seicomart\" | \"sepa-bank-transfer\" | \"sepa-direct-debit\" | \"sequra\" | \"seven-eleven\" | \"sezzle\" | \"shib\" | \"shinhan-card\" | \"shop-pay\" | \"shopeepay\" | \"shopify-pay\" | \"siam-commercial\" | \"siauliu-bankas\" | \"siirto\" | \"sika-fsa\" | \"sika-hsa\" | \"sika\" | \"simpl\" | \"simple-pay\" | \"sinpe-movil\" | \"sistecredito\" | \"skeps\" | \"skrill-digital-wallet\" | \"slice-fnbo\" | \"smartpay\" | \"snap-checkout\" | \"snapmint\" | \"societe-generale\" | \"sofort\" | \"softbank\" | \"solana-pay-helio\" | \"solana-pay\" | \"solana\" | \"souhoola\" | \"spankki\" | \"sparkasse\" | \"spei\" | \"splitit\" | \"spotii\" | \"spraypay\" | \"standard-chartered\" | \"stc-pay\" | \"stoov\" | \"store-credit\" | \"stripe\" | \"sunkus\" | \"super-payments\" | \"svea-b2b-faktura\" | \"svea-b2b-invoice\" | \"svea-checkout\" | \"svea-credit-account\" | \"svea-delbetalning\" | \"svea-faktura\" | \"svea-invoice\" | \"svea-lasku\" | \"svea-ostukonto\" | \"svea-part-payment\" | \"svea-yrityslasku\" | \"sveaeramaksu\" | \"swedbank\" | \"swiftpay\" | \"swish\" | \"swissbilling\" | \"sympl\" | \"synchrony-pay\" | \"synchrony\" | \"tabby\" | \"tabit\" | \"taly\" | \"tamara\" | \"tandympayment\" | \"tasa-cero\" | \"tbi-bank\" | \"tcf\" | \"tendopay\" | \"tensile\" | \"tesco-lotus\" | \"thanachart-bank\" | \"timepayment\" | \"tiptop\" | \"todopay\" | \"toss\" | \"touch-n-go\" | \"tpay\" | \"trevipay\" | \"truelayer\" | \"truemoney-pay\" | \"trustly\" | \"twig-pay\" | \"twint\" | \"twoinvoice\" | \"uae-visa\" | \"uangme\" | \"ubp\" | \"underpay\" | \"unionpay\" | \"unipay\" | \"uob-ez-pay\" | \"uob-thai\" | \"uob\" | \"upi\" | \"urbo\" | \"urpay\" | \"usdc\" | \"usdp\" | \"v-pay\" | \"valu\" | \"venmo\" | \"ventipay\" | \"venus-plcc\" | \"viabill\" | \"vipps\" | \"visa-electron\" | \"visa\" | \"volksbank\" | \"volt\" | \"vvv-cadeaukaart-paynl-version\" | \"vvv-giftcard\" | \"waave-pay-by-bank\" | \"wallet\" | \"walley\" | \"wbtc\" | \"webshop-giftcard\" | \"wechat-pay\" | \"wechat-paynl-version\" | \"wegetfinancing\" | \"whish-checkout\" | \"whish-pay\" | \"wise\" | \"wissel\" | \"world-chain\" | \"xrp\" | \"yape\" | \"yappy\" | \"ymobile\" | \"younited-pay\" | \"zalopay\" | \"zapper\" | \"zingala\" | \"zinia\" | \"zip\" | \"zoodpay\" | \"zulily-credit-card\" | \"zustaina\"", + "description": "" + }, + "AnyString": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "AnyString", + "value": "string & {}", + "description": "Prevents widening string literal types in a union to `string`." + } + } + } + ], + "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": "autocomplete", + "value": "AutocompleteField | `${AutocompleteSection} ${AutocompleteField}` | `${AutocompleteGroup} ${AutocompleteField}` | `${AutocompleteSection} ${AutocompleteGroup} ${AutocompleteField}` | \"on\" | \"off\"", + "description": "A hint as to the intended content of the field.\n\nWhen set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents.\n\nWhen set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes.\n\nAlternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill.", + "isOptional": true, + "defaultValue": "'on' for everything else" + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "defaultValue", + "value": "string", + "description": "The default value for the field.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the field, disallowing any interaction.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "error", + "value": "string", + "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "label", + "value": "string", + "description": "Content to use as the field label.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "labelAccessibilityVisibility", + "value": "'visible' | 'exclusive'", + "description": "Changes the visibility of the component's label.\n\n- `visible`: the label is visible to all users.\n- `exclusive`: the label is visually hidden but remains in the accessibility tree.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "name", + "value": "string", + "description": "An identifier for the field that is unique within the nearest containing form.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "placeholder", + "value": "string", + "description": "", + "isOptional": true, + "deprecationMessage": "Use `label` instead.", + "isPrivate": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "readOnly", + "value": "boolean", + "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "required", + "value": "boolean", + "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "'mobile' | ''", + "description": "The type of number to collect.\n\nSpecific style may be applied to each type to provide extra guidance to users. Note that no extra validation is performed based on the type.", + "isOptional": true, + "defaultValue": "'' meaning no specific kind of phone number" + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "value", + "value": "string", + "description": "The current value for the field. If omitted, the field will be empty.", + "isOptional": true + } + ], + "value": "export interface PhoneFieldElementProps extends Pick {\n /**\n * @deprecated Use `label` instead.\n * @private\n */\n placeholder?: string;\n}" + }, + "AutocompleteSection": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "AutocompleteSection", + "value": "`section-${string}`", + "description": "The “section” scopes the autocomplete data that should be inserted to a specific area of the page.\n\nCommonly used when there are multiple fields with the same autocomplete needs in the same page. For example: 2 shipping address forms in the same page." + }, + "AutocompleteGroup": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "AutocompleteGroup", + "value": "\"shipping\" | \"billing\"", + "description": "The contact information group the autocomplete data should be sourced from." + } + } + }, + { + "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": "The popover component displays contextual content in an overlay triggered by a button using the [`commandFor`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#commandfor) attribute. Use for secondary actions, settings, or information that doesn't require a full modal.\n\nFor interactions that need more space or user focus, such as confirmations or complex forms, use [modal](/docs/api/{API_NAME}/{API_VERSION}/polaris-web-components/overlays/modal) instead.", + "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": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "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": [ + { + "filePath": "src/surfaces/checkout/components/PressButton.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/checkout/components/PressButton.ts", + "syntaxKind": "PropertySignature", + "name": "defaultPressed", + "value": "boolean", + "description": "Whether the button is pressed by default.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/PressButton.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the Button meaning it cannot be clicked or receive focus.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/PressButton.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/PressButton.ts", + "syntaxKind": "PropertySignature", + "name": "inlineSize", + "value": "'auto' | 'fill' | 'fit-content'", + "description": "The displayed inline width of the Button.\n\n- `auto`: the size of the button depends on the surface and context.\n- `fill`: the button will takes up 100% of the available inline size.\n- `fit-content`: the button will take up the minimum inline-size required to fit its content.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/PressButton.ts", + "syntaxKind": "PropertySignature", + "name": "lang", + "value": "string", + "description": "Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. [Reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) (\"subtag\" label)", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/PressButton.ts", + "syntaxKind": "PropertySignature", + "name": "loading", + "value": "boolean", + "description": "Replaces content with a loading indicator while a background action is being performed.\n\nThis also disables the Button.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/PressButton.ts", + "syntaxKind": "PropertySignature", + "name": "pressed", + "value": "boolean", + "description": "Whether the button is pressed.", + "isOptional": true, + "defaultValue": "false" + } + ], + "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": "alt", + "value": "string", + "description": "An alternative text description that describe the image for the reader to understand what it is about. It is extremely useful for both users using assistive technology and sighted users. A well written description provides people with visual impairments the ability to participate in consuming non-text content. When a screen readers encounters an `s-image`, the description is read and announced aloud. If an image fails to load, potentially due to a poor connection, the `alt` is displayed on screen instead. This has the benefit of letting a sighted buyer know an image was meant to load here, but as an alternative, they’re still able to consume the text content. Read [considerations when writing alternative text](https://www.shopify.com/ca/blog/image-alt-text#4) to learn more.", + "isOptional": true, + "defaultValue": "`''`" + }, + { + "filePath": "src/surfaces/checkout/components/ProductThumbnail.ts", + "syntaxKind": "PropertySignature", + "name": "size", + "value": "'base' | 'small' | 'small-100'", + "description": "Adjusts the size the product thumbnail image.", + "isOptional": true, + "defaultValue": "'base'" + }, + { + "filePath": "src/surfaces/checkout/components/ProductThumbnail.ts", + "syntaxKind": "PropertySignature", + "name": "sizes", + "value": "string", + "description": "A set of media conditions and their corresponding sizes.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ProductThumbnail.ts", + "syntaxKind": "PropertySignature", + "name": "src", + "value": "string", + "description": "The image source (either a remote URL or a local file resource).\n\nWhen the image is loading or no `src` is provided, a placeholder will be rendered.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ProductThumbnail.ts", + "syntaxKind": "PropertySignature", + "name": "srcSet", + "value": "string", + "description": "A set of image sources and their width or pixel density descriptors.\n\nThis overrides the `src` property.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ProductThumbnail.ts", + "syntaxKind": "PropertySignature", + "name": "totalItems", + "value": "number", + "description": "Decorates the product thumbnail with the quantity of the product.", + "isOptional": true + } + ], + "value": "export interface ProductThumbnailElementProps extends Pick {\n size?: Extract;\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": "accessibilityLabel", + "value": "string", + "description": "A label that describes the purpose of the progress. When set, it will be announced to users using assistive technologies and will provide them with more context.\n\nUse it to provide context of what is progressing.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Progress.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Progress.ts", + "syntaxKind": "PropertySignature", + "name": "max", + "value": "number", + "description": "This attribute describes how much work the task indicated by the progress element requires.\n\nThe `max` attribute, if present, must have a value greater than 0 and be a valid floating point number.", + "isOptional": true, + "defaultValue": "1" + }, + { + "filePath": "src/surfaces/checkout/components/Progress.ts", + "syntaxKind": "PropertySignature", + "name": "tone", + "value": "'auto' | 'critical'", + "description": "Sets the tone of the progress, based on the intention of the information being conveyed.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Progress.ts", + "syntaxKind": "PropertySignature", + "name": "value", + "value": "number", + "description": "Specifies how much of the task has been completed.\n\nIt must be a valid floating point number between 0 and `max`, or between 0 and 1 if `max` is omitted. If there is no value attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.", + "isOptional": true + } + ], + "value": "export interface ProgressElementProps extends Pick {\n tone?: Extract;\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": [ + { + "filePath": "src/surfaces/checkout/components/QRCode.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "A label that describes the purpose or contents of the QR code. When set, it will be announced to users using assistive technologies and will provide more context about what the QR code may do when scanned.", + "isOptional": true, + "defaultValue": "'QR code' (translated to the user's locale)" + }, + { + "filePath": "src/surfaces/checkout/components/QRCode.ts", + "syntaxKind": "PropertySignature", + "name": "border", + "value": "'base' | 'none'", + "description": "Set the border of the QR code.\n\n`base`: applies border that is appropriate for the element. `none`: removes the border from the element.", + "isOptional": true, + "defaultValue": "'base'" + }, + { + "filePath": "src/surfaces/checkout/components/QRCode.ts", + "syntaxKind": "PropertySignature", + "name": "content", + "value": "string", + "description": "The content to be encoded in the QR code, which can be any string such as a URL, email address, plain text, etc. Specific string formatting can trigger actions on the user's device when scanned, like opening geolocation coordinates on a map, opening a preferred app or app store entry, preparing an email, text message, and more.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/QRCode.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/QRCode.ts", + "syntaxKind": "PropertySignature", + "name": "logo", + "value": "string", + "description": "URL of an image to be displayed in the center of the QR code. This is useful for branding or to indicate to the user what scanning the QR code will do. By default, no image is displayed.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/QRCode.ts", + "syntaxKind": "PropertySignature", + "name": "onError", + "value": "(event: Event) => void", + "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 + }, + { + "filePath": "src/surfaces/checkout/components/QRCode.ts", + "syntaxKind": "PropertySignature", + "name": "size", + "value": "'base' | 'fill'", + "description": "The displayed size of the QR code.\n\n`fill`: the QR code will takes up 100% of the available inline-size and maintain a 1:1 aspect ratio. `base`: the QR code will be displayed at its default size.", + "isOptional": true, + "defaultValue": "'base'" + } + ], + "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": [ + { + "filePath": "src/surfaces/checkout/components/QueryContainer.ts", + "syntaxKind": "PropertySignature", + "name": "containerName", + "value": "string", + "description": "The name of the container, which can be used in your container queries to target this container specifically.\n\nWe place the container name of `s-default` on every container. Because of this, it is not required to add a `containerName` identifier in your queries. For example, a `@container (inline-size <= 300px) none, auto` query is equivalent to `@container s-default (inline-size <= 300px) none, auto`.\n\nAny value set in `containerName` will be set alongside alongside `s-default`. For example, `containerName=\"my-container-name\"` will result in a value of `s-default my-container-name` set on the `container-name` CSS property of the rendered HTML.", + "isOptional": true, + "defaultValue": "''" + }, + { + "filePath": "src/surfaces/checkout/components/QueryContainer.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + } + ], + "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": "accessibilityLabel", + "value": "string", + "description": "A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context.\n\nOnly use this when the element's content is not enough context for users using assistive technologies.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityRole", + "value": "AccessibilityRole", + "description": "Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.", + "isOptional": true, + "defaultValue": "'generic'" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityVisibility", + "value": "'visible' | 'hidden' | 'exclusive'", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "background", + "value": "'base' | 'subdued' | 'transparent'", + "description": "Adjust the background of the element.", + "isOptional": true, + "defaultValue": "'transparent'" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "blockSize", + "value": "MaybeResponsive", + "description": "Adjust the block size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "border", + "value": "BorderShorthand", + "description": "Set the border via the shorthand property.\n\nThis can be a size, optionally followed by a color, optionally followed by a style.\n\nIf the color is not specified, it will be `base`.\n\nIf the style is not specified, it will be `auto`.\n\nValues can be overridden by `borderWidth`, `borderStyle`, and `borderColor`.", + "isOptional": true, + "defaultValue": "'none' - equivalent to `none base auto`.", + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "// The following are equivalent:\n\n", + "title": "Example" + } + ] + } + ] + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "borderColor", + "value": "'' | 'base'", + "description": "Set the color of the border.\n\nIf set, it takes precedence over the `border` property's color.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "Set the radius of the border.\n\n[1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 4 values: `start-start start-end end-end end-start`\n- 3 values: `start-start (start-end & end-start) start-end`\n- 2 values: `(start-start & end-end) (start-end & end-start)`\n\nFor example:\n- `small-100` means start-start, start-end, end-end and end-start border radii are `small-100`.\n- `small-100 none` means start-start and end-end border radii are `small-100`, start-end and end-start border radii are `none`.\n- `small-100 none large-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `none`.\n- `small-100 none large-100 small-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `small-100`.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "borderStyle", + "value": "MaybeAllValuesShorthandProperty | \"\"", + "description": "Set the style of the border.\n\nIf set, it takes precedence over the `border` property's style.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "Set the width of the border.\n\nIf set, it takes precedence over the `border` property's width.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "display", + "value": "MaybeResponsive<\"auto\" | \"none\">", + "description": "Sets the outer display type of the component. The outer type sets a component’s participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "inlineSize", + "value": "MaybeResponsive", + "description": "Adjust the inline size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "maxBlockSize", + "value": "MaybeResponsive", + "description": "Adjust the maximum block size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "maxInlineSize", + "value": "MaybeResponsive", + "description": "Adjust the maximum inline size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "minBlockSize", + "value": "MaybeResponsive", + "description": "Adjust the minimum block size.", + "isOptional": true, + "defaultValue": "'0'" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "minInlineSize", + "value": "MaybeResponsive", + "description": "Adjust the minimum inline size.", + "isOptional": true, + "defaultValue": "'0'" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "overflow", + "value": "OverflowKeyword | `${OverflowKeyword} ${OverflowKeyword}`", + "description": "Sets the overflow behavior of the element.\n\n- `hidden`: clips the content when it is larger than the element’s container and the element will not be scrollable in that axis.\n- `auto`: clips the content when it is larger than the element’s container and make it scrollable in that axis.\n\n1-to-2-value syntax is supported but note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 2 values: `block inline`", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "padding", + "value": "MaybeResponsive>", + "description": "Adjust the padding of all edges.\n\n[1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 4 values: `block-start inline-end block-end inline-start`\n- 3 values: `block-start inline block-end`\n- 2 values: `block inline`\n\nFor example:\n- `large` means block-start, inline-end, block-end and inline-start paddings are `large`.\n- `large none` means block-start and block-end paddings are `large`, inline-start and inline-end paddings are `none`.\n- `large none large` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`.\n- `large none large small` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`.\n\nA padding value of `auto` will use the default padding for the closest container that has had its usual padding removed.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlock", + "value": "MaybeResponsive | \"\">", + "description": "Adjust the block-padding.\n\n- `large none` means block-start padding is `large`, block-end padding is `none`.\n\nThis overrides the block value of `padding`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlockEnd", + "value": "MaybeResponsive", + "description": "Adjust the block-end padding.\n\nThis overrides the block-end value of `paddingBlock`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlockStart", + "value": "MaybeResponsive", + "description": "Adjust the block-start padding.\n\nThis overrides the block-start value of `paddingBlock`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInline", + "value": "MaybeResponsive | \"\">", + "description": "Adjust the inline padding.\n\n- `large none` means inline-start padding is `large`, inline-end padding is `none`.\n\nThis overrides the inline value of `padding`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInlineEnd", + "value": "MaybeResponsive", + "description": "Adjust the inline-end padding.\n\nThis overrides the inline-end value of `paddingInline`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInlineStart", + "value": "MaybeResponsive", + "description": "Adjust the inline-start padding.\n\nThis overrides the inline-start value of `paddingInline`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + } + ], + "value": "export interface ScrollBoxElementProps extends Pick {\n background?: Extract;\n border?: BorderShorthand;\n borderColor?: ReducedColorKeyword | '';\n borderRadius?: MaybeAllValuesShorthandProperty>;\n borderWidth?: MaybeAllValuesShorthandProperty | '';\n}" + }, + "AccessibilityRole": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "AccessibilityRole", + "value": "\"main\" | \"header\" | \"footer\" | \"section\" | \"aside\" | \"navigation\" | \"ordered-list\" | \"list-item\" | \"list-item-separator\" | \"unordered-list\" | \"separator\" | \"status\" | \"alert\" | \"generic\" | \"presentation\" | \"none\"", + "description": "" + }, + "MaybeResponsive": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "MaybeResponsive", + "value": "T | `@container${string}`", + "description": "" + }, + "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": "" + }, + "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": "'base' | 'large' | 'large-100' | 'large-200' | 'none'", + "description": "" + }, + "ReducedColorKeyword": { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedColorKeyword", + "value": "'base'", + "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": "" + }, + "ScrollBoxProps": { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "name": "ScrollBoxProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context.\n\nOnly use this when the element's content is not enough context for users using assistive technologies.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityRole", + "value": "AccessibilityRole", + "description": "Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.", + "isOptional": true, + "defaultValue": "'generic'" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityVisibility", + "value": "'visible' | 'hidden' | 'exclusive'", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "background", + "value": "'base' | 'subdued' | 'transparent'", + "description": "Adjust the background of the element.", + "isOptional": true, + "defaultValue": "'transparent'" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "blockSize", + "value": "MaybeResponsive", + "description": "Adjust the block size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "border", + "value": "BorderShorthand", + "description": "Set the border via the shorthand property.\n\nThis can be a size, optionally followed by a color, optionally followed by a style.\n\nIf the color is not specified, it will be `base`.\n\nIf the style is not specified, it will be `auto`.\n\nValues can be overridden by `borderWidth`, `borderStyle`, and `borderColor`.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "borderColor", + "value": "'' | 'base'", + "description": "Set the color of the border.\n\nIf set, it takes precedence over the `border` property's color.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "Set the radius of the border.\n\n[1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 4 values: `start-start start-end end-end end-start`\n- 3 values: `start-start (start-end & end-start) start-end`\n- 2 values: `(start-start & end-end) (start-end & end-start)`\n\nFor example:\n- `small-100` means start-start, start-end, end-end and end-start border radii are `small-100`.\n- `small-100 none` means start-start and end-end border radii are `small-100`, start-end and end-start border radii are `none`.\n- `small-100 none large-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `none`.\n- `small-100 none large-100 small-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `small-100`.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "borderStyle", + "value": "MaybeAllValuesShorthandProperty | \"\"", + "description": "Set the style of the border.\n\nIf set, it takes precedence over the `border` property's style.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "Set the width of the border.\n\nIf set, it takes precedence over the `border` property's width.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "display", + "value": "MaybeResponsive<\"auto\" | \"none\">", + "description": "Sets the outer display type of the component. The outer type sets a component’s participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "inlineSize", + "value": "MaybeResponsive", + "description": "Adjust the inline size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "maxBlockSize", + "value": "MaybeResponsive", + "description": "Adjust the maximum block size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "maxInlineSize", + "value": "MaybeResponsive", + "description": "Adjust the maximum inline size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "minBlockSize", + "value": "MaybeResponsive", + "description": "Adjust the minimum block size.", + "isOptional": true, + "defaultValue": "'0'" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "minInlineSize", + "value": "MaybeResponsive", + "description": "Adjust the minimum inline size.", + "isOptional": true, + "defaultValue": "'0'" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "overflow", + "value": "OverflowKeyword | `${OverflowKeyword} ${OverflowKeyword}`", + "description": "Sets the overflow behavior of the element.\n\n- `hidden`: clips the content when it is larger than the element’s container and the element will not be scrollable in that axis.\n- `auto`: clips the content when it is larger than the element’s container and make it scrollable in that axis.\n\n1-to-2-value syntax is supported but note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 2 values: `block inline`", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "padding", + "value": "MaybeResponsive>", + "description": "Adjust the padding of all edges.\n\n[1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 4 values: `block-start inline-end block-end inline-start`\n- 3 values: `block-start inline block-end`\n- 2 values: `block inline`\n\nFor example:\n- `large` means block-start, inline-end, block-end and inline-start paddings are `large`.\n- `large none` means block-start and block-end paddings are `large`, inline-start and inline-end paddings are `none`.\n- `large none large` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`.\n- `large none large small` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`.\n\nA padding value of `auto` will use the default padding for the closest container that has had its usual padding removed.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlock", + "value": "MaybeResponsive | \"\">", + "description": "Adjust the block-padding.\n\n- `large none` means block-start padding is `large`, block-end padding is `none`.\n\nThis overrides the block value of `padding`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlockEnd", + "value": "MaybeResponsive", + "description": "Adjust the block-end padding.\n\nThis overrides the block-end value of `paddingBlock`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlockStart", + "value": "MaybeResponsive", + "description": "Adjust the block-start padding.\n\nThis overrides the block-start value of `paddingBlock`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInline", + "value": "MaybeResponsive | \"\">", + "description": "Adjust the inline padding.\n\n- `large none` means inline-start padding is `large`, inline-end padding is `none`.\n\nThis overrides the inline value of `padding`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInlineEnd", + "value": "MaybeResponsive", + "description": "Adjust the inline-end padding.\n\nThis overrides the inline-end value of `paddingInline`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/ScrollBox.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInlineStart", + "value": "MaybeResponsive", + "description": "Adjust the inline-start padding.\n\nThis overrides the inline-start value of `paddingInline`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + } + ], + "value": "export interface ScrollBoxProps extends ScrollBoxElementProps {\n}" + }, + "SizeUnitsOrNone": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "SizeUnitsOrNone", + "value": "SizeUnits | \"none\"", + "description": "" + }, + "OverflowKeyword": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "OverflowKeyword", + "value": "\"auto\" | \"hidden\"", + "description": "" + }, + "PaddingKeyword": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "PaddingKeyword", + "value": "SizeKeyword | \"none\"", + "description": "" + }, + "SizeKeyword": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "SizeKeyword", + "value": "\"small-500\" | \"small-400\" | \"small-300\" | \"small-200\" | \"small-100\" | \"small\" | \"base\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"large-500\"", + "description": "" + }, + "MaybeTwoValuesShorthandProperty": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "MaybeTwoValuesShorthandProperty", + "value": "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": { + "SectionPropsDocs": { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "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": "A title that describes the content of the section.", + "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": "Slots", + "description": "", + "type": "SectionElementSlotsDocs", + "typeDefinitions": { + "SectionElementSlotsDocs": { + "filePath": "src/surfaces/customer-account/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "SectionElementSlotsDocs", + "value": "SectionElementSlots", + "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", + "syntaxKind": "PropertySignature", + "name": "secondary-actions", + "value": "HTMLElement", + "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": [ + { + "filePath": "src/surfaces/checkout/components/Select.ts", + "syntaxKind": "PropertySignature", + "name": "autocomplete", + "value": "AutocompleteField | `${AutocompleteSection} ${AutocompleteField}` | `${AutocompleteGroup} ${AutocompleteField}` | `${AutocompleteSection} ${AutocompleteGroup} ${AutocompleteField}` | \"on\" | \"off\"", + "description": "A hint as to the intended content of the field.\n\nWhen set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents.\n\nWhen set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes.\n\nAlternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill.", + "isOptional": true, + "defaultValue": "'on' for everything else" + }, + { + "filePath": "src/surfaces/checkout/components/Select.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the field, disallowing any interaction.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Select.ts", + "syntaxKind": "PropertySignature", + "name": "error", + "value": "string", + "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Select.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Select.ts", + "syntaxKind": "PropertySignature", + "name": "label", + "value": "string", + "description": "Content to use as the field label.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Select.ts", + "syntaxKind": "PropertySignature", + "name": "name", + "value": "string", + "description": "An identifier for the field that is unique within the nearest containing form.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Select.ts", + "syntaxKind": "PropertySignature", + "name": "placeholder", + "value": "string", + "description": "A short hint that describes the expected value of the field.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Select.ts", + "syntaxKind": "PropertySignature", + "name": "required", + "value": "boolean", + "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Select.ts", + "syntaxKind": "PropertySignature", + "name": "value", + "value": "string", + "description": "The current value for the field. If omitted, the field will be empty.", + "isOptional": true + } + ], + "value": "export interface SelectElementProps extends Pick {\n}" + }, + "AutocompleteSection": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "AutocompleteSection", + "value": "`section-${string}`", + "description": "The “section” scopes the autocomplete data that should be inserted to a specific area of the page.\n\nCommonly used when there are multiple fields with the same autocomplete needs in the same page. For example: 2 shipping address forms in the same page." + }, + "AutocompleteGroup": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "AutocompleteGroup", + "value": "\"shipping\" | \"billing\"", + "description": "The contact information group the autocomplete data should be sourced from." + } + } + }, + { + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "SelectElementEvents", + "typeDefinitions": { + "SelectElementEvents": { + "filePath": "src/surfaces/checkout/components/Select.ts", + "name": "SelectElementEvents", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Select.ts", + "syntaxKind": "PropertySignature", + "name": "blur", + "value": "CallbackEventListener", + "description": "Callback when the element loses focus.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Select.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/Select.ts", + "syntaxKind": "PropertySignature", + "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": [ + { + "filePath": "src/surfaces/checkout/components/Option.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "A label used for users using assistive technologies like screen readers. When set, any children or `label` supplied will not be announced. This can also be used to display a control without a visual label, while still providing context to users using screen readers.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Option.ts", + "syntaxKind": "PropertySignature", + "name": "defaultSelected", + "value": "boolean", + "description": "Whether the control is active by default.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Option.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the control, disallowing any interaction.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Option.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Option.ts", + "syntaxKind": "PropertySignature", + "name": "selected", + "value": "boolean", + "description": "Whether the control is active.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Option.ts", + "syntaxKind": "PropertySignature", + "name": "value", + "value": "string", + "description": "The value used in form data when the control is checked.", + "isOptional": true + } + ], + "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/checkout/components/Sheet.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "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 + }, + { + "filePath": "src/surfaces/checkout/components/Sheet.ts", + "syntaxKind": "PropertySignature", + "name": "defaultOpen", + "value": "boolean", + "description": "Indicates whether the Sheet should be open by default. This property is necessary in some cases, but its usage is generally discouraged due to potential negative impacts on user experience.\n\nDevelopers should:\n- Only set this property to true when there are vitally important behaviors of the application that depend on the user interacting with the sheet.\n- Make every effort to conditionally hide the sheet based on the state of checkout. An explicit example is custom privacy consent, where the sheet should only be displayed when consent is necessary and has not yet been explicitly given by the user.\n\nThis property is useful for when the Sheet needs to be rendered on the page load and not triggered by a user action. The property should only take effect when the `Sheet` is rendered for the first time. To toggle the Sheet after it has been rendered, use the `ui.showOverlay()` method instead.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Sheet.ts", + "syntaxKind": "PropertySignature", + "name": "heading", + "value": "string", + "description": "A title that describes the content of the sheet.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Sheet.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "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/checkout/components/Sheet.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/Sheet.ts", + "syntaxKind": "PropertySignature", + "name": "hide", + "value": "CallbackEventListener", + "description": "Callback fired after the overlay is hidden.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Sheet.ts", + "syntaxKind": "PropertySignature", + "name": "show", + "value": "CallbackEventListener", + "description": "Callback fired after the overlay is shown.", + "isOptional": true + } + ], + "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/checkout/components/Sheet.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/Sheet.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": "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": [ + { + "filePath": "src/surfaces/checkout/components/Sheet.ts", + "syntaxKind": "PropertySignature", + "name": "hideOverlay", + "value": "() => void", + "description": "Method to hide an overlay." + } + ], + "value": "export interface SheetElementMethods extends Pick {\n}" + } + } + } + ], + "defaultExample": { + "image": "sheet-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "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": [] + }, + { + "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": [ + { + "title": "Properties", + "description": "", + "type": "SkeletonParagraphElementProps", + "typeDefinitions": { + "SkeletonParagraphElementProps": { + "filePath": "src/surfaces/checkout/components/SkeletonParagraph.ts", + "name": "SkeletonParagraphElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/SkeletonParagraph.ts", + "syntaxKind": "PropertySignature", + "name": "content", + "value": "string", + "description": "The content to be used as a base for the skeleton. This content will be hidden when the skeleton is visible.\n\nThis can be useful when the skeleton is representing a known piece of content which is part of a larger element that has not yet fully loaded.", + "isOptional": true, + "defaultValue": "''" + }, + { + "filePath": "src/surfaces/checkout/components/SkeletonParagraph.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + } + ], + "value": "export interface SkeletonParagraphElementProps extends SkeletonParagraphProps$1 {\n}" + } + } + } + ], + "defaultExample": { + "image": "skeleton-paragraph-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-skeleton-paragraph></s-skeleton-paragraph>\n\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "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": "SpinnerElementProps", + "typeDefinitions": { + "SpinnerElementProps": { + "filePath": "src/surfaces/checkout/components/Spinner.ts", + "name": "SpinnerElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Spinner.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "A label that describes the purpose of the progress. When set, it will be announced to users using assistive technologies and will provide them with more context. Providing an `accessibilityLabel` is recommended if there is no accompanying text describing that something is loading.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Spinner.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Spinner.ts", + "syntaxKind": "PropertySignature", + "name": "size", + "value": "'base' | 'small' | 'small-100' | 'large' | 'large-100'", + "description": "Adjusts the size of the spinner icon.", + "isOptional": true, + "defaultValue": "'base'" + } + ], + "value": "export interface SpinnerElementProps extends SpinnerProps$1 {\n size?: Extract;\n}" + } + } + } + ], + "defaultExample": { + "image": "spinner-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-spinner></s-spinner>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "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": "StackElementProps", + "typeDefinitions": { + "StackElementProps": { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "name": "StackElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context.\n\nOnly use this when the element's content is not enough context for users using assistive technologies.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityRole", + "value": "'aside' | 'footer' | 'header' | 'main' | 'section' | 'status' | 'none' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'alert' | 'generic'", + "description": "Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.", + "isOptional": true, + "defaultValue": "'generic'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "alignContent", + "value": "MaybeResponsive>", + "description": "Aligns the Stack along the cross axis.", + "isOptional": true, + "defaultValue": "'normal'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "alignItems", + "value": "MaybeResponsive>", + "description": "Aligns the Stack's children along the cross axis.", + "isOptional": true, + "defaultValue": "'normal'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "background", + "value": "'base' | 'subdued' | 'transparent'", + "description": "Adjust the background of the element.", + "isOptional": true, + "defaultValue": "'transparent'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "blockSize", + "value": "MaybeResponsive", + "description": "Adjust the block size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "border", + "value": "BorderShorthand", + "description": "Set the border via the shorthand property.\n\nThis can be a size, optionally followed by a color, optionally followed by a style.\n\nIf the color is not specified, it will be `base`.\n\nIf the style is not specified, it will be `auto`.\n\nValues can be overridden by `borderWidth`, `borderStyle`, and `borderColor`.", + "isOptional": true, + "defaultValue": "'none' - equivalent to `none base auto`.", + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "// The following are equivalent:\n\n", + "title": "Example" + } + ] + } + ] + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "Set the radius of the border.\n\n[1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 4 values: `start-start start-end end-end end-start`\n- 3 values: `start-start (start-end & end-start) start-end`\n- 2 values: `(start-start & end-end) (start-end & end-start)`\n\nFor example:\n- `small-100` means start-start, start-end, end-end and end-start border radii are `small-100`.\n- `small-100 none` means start-start and end-end border radii are `small-100`, start-end and end-start border radii are `none`.\n- `small-100 none large-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `none`.\n- `small-100 none large-100 small-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `small-100`.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "borderStyle", + "value": "MaybeAllValuesShorthandProperty | \"\"", + "description": "Set the style of the border.\n\nIf set, it takes precedence over the `border` property's style.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "Set the width of the border.\n\nIf set, it takes precedence over the `border` property's width.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "columnGap", + "value": "MaybeResponsive", + "description": "Adjust spacing between elements in the inline axis.\n\nThis overrides the column value of `gap`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "direction", + "value": "MaybeResponsive<\"block\" | \"inline\">", + "description": "Sets how the children are placed within the Stack. This uses [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).", + "isOptional": true, + "defaultValue": "'block'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "display", + "value": "MaybeResponsive<\"auto\" | \"none\">", + "description": "Sets the outer display type of the component. The outer type sets a component’s participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "gap", + "value": "MaybeResponsive>", + "description": "Adjust spacing between elements.\n\nA single value applies to both axes. A pair of values (eg `large-100 large-500`) can be used to set the inline and block axes respectively.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "inlineSize", + "value": "MaybeResponsive", + "description": "Adjust the inline size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "justifyContent", + "value": "MaybeResponsive>", + "description": "Aligns the Stack along the main axis.", + "isOptional": true, + "defaultValue": "'normal'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "maxBlockSize", + "value": "MaybeResponsive", + "description": "Adjust the maximum block size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "maxInlineSize", + "value": "MaybeResponsive", + "description": "Adjust the maximum inline size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "minBlockSize", + "value": "MaybeResponsive", + "description": "Adjust the minimum block size.", + "isOptional": true, + "defaultValue": "'0'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "minInlineSize", + "value": "MaybeResponsive", + "description": "Adjust the minimum inline size.", + "isOptional": true, + "defaultValue": "'0'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "overflow", + "value": "'hidden' | 'visible'", + "description": "Sets the overflow behavior of the element.\n\n- `hidden`: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse.\n- `visible`: the content that extends beyond the element’s container is visible.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "padding", + "value": "MaybeResponsive>", + "description": "Adjust the padding of all edges.\n\n[1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 4 values: `block-start inline-end block-end inline-start`\n- 3 values: `block-start inline block-end`\n- 2 values: `block inline`\n\nFor example:\n- `large` means block-start, inline-end, block-end and inline-start paddings are `large`.\n- `large none` means block-start and block-end paddings are `large`, inline-start and inline-end paddings are `none`.\n- `large none large` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`.\n- `large none large small` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`.\n\nA padding value of `auto` will use the default padding for the closest container that has had its usual padding removed.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlock", + "value": "MaybeResponsive | \"\">", + "description": "Adjust the block-padding.\n\n- `large none` means block-start padding is `large`, block-end padding is `none`.\n\nThis overrides the block value of `padding`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlockEnd", + "value": "MaybeResponsive", + "description": "Adjust the block-end padding.\n\nThis overrides the block-end value of `paddingBlock`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlockStart", + "value": "MaybeResponsive", + "description": "Adjust the block-start padding.\n\nThis overrides the block-start value of `paddingBlock`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInline", + "value": "MaybeResponsive | \"\">", + "description": "Adjust the inline padding.\n\n- `large none` means inline-start padding is `large`, inline-end padding is `none`.\n\nThis overrides the inline value of `padding`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInlineEnd", + "value": "MaybeResponsive", + "description": "Adjust the inline-end padding.\n\nThis overrides the inline-end value of `paddingInline`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInlineStart", + "value": "MaybeResponsive", + "description": "Adjust the inline-start padding.\n\nThis overrides the inline-start value of `paddingInline`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "rowGap", + "value": "MaybeResponsive", + "description": "Adjust spacing between elements in the block axis.\n\nThis overrides the row value of `gap`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + } + ], + "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}" + }, + "MaybeResponsive": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "MaybeResponsive", + "value": "T | `@container${string}`", + "description": "" + }, + "StackProps": { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "name": "StackProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context.\n\nOnly use this when the element's content is not enough context for users using assistive technologies.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityRole", + "value": "'aside' | 'footer' | 'header' | 'main' | 'section' | 'status' | 'none' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'alert' | 'generic'", + "description": "Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.", + "isOptional": true, + "defaultValue": "'generic'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "alignContent", + "value": "MaybeResponsive>", + "description": "Aligns the Stack along the cross axis.", + "isOptional": true, + "defaultValue": "'normal'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "alignItems", + "value": "MaybeResponsive>", + "description": "Aligns the Stack's children along the cross axis.", + "isOptional": true, + "defaultValue": "'normal'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "background", + "value": "'base' | 'subdued' | 'transparent'", + "description": "Adjust the background of the element.", + "isOptional": true, + "defaultValue": "'transparent'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "blockSize", + "value": "MaybeResponsive", + "description": "Adjust the block size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "border", + "value": "BorderShorthand", + "description": "Set the border via the shorthand property.\n\nThis can be a size, optionally followed by a color, optionally followed by a style.\n\nIf the color is not specified, it will be `base`.\n\nIf the style is not specified, it will be `auto`.\n\nValues can be overridden by `borderWidth`, `borderStyle`, and `borderColor`.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "MaybeAllValuesShorthandProperty>", + "description": "Set the radius of the border.\n\n[1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 4 values: `start-start start-end end-end end-start`\n- 3 values: `start-start (start-end & end-start) start-end`\n- 2 values: `(start-start & end-end) (start-end & end-start)`\n\nFor example:\n- `small-100` means start-start, start-end, end-end and end-start border radii are `small-100`.\n- `small-100 none` means start-start and end-end border radii are `small-100`, start-end and end-start border radii are `none`.\n- `small-100 none large-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `none`.\n- `small-100 none large-100 small-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `small-100`.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "borderStyle", + "value": "MaybeAllValuesShorthandProperty | \"\"", + "description": "Set the style of the border.\n\nIf set, it takes precedence over the `border` property's style.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "borderWidth", + "value": "MaybeAllValuesShorthandProperty | ''", + "description": "Set the width of the border.\n\nIf set, it takes precedence over the `border` property's width.\n\nLike CSS, up to 4 values can be specified.\n\nIf one value is specified, it applies to all sides.\n\nIf two values are specified, they apply to the block sides and inline sides respectively.\n\nIf three values are specified, they apply to the block-start, both inline sides, and block-end respectively.\n\nIf four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "columnGap", + "value": "MaybeResponsive", + "description": "Adjust spacing between elements in the inline axis.\n\nThis overrides the column value of `gap`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "direction", + "value": "MaybeResponsive<\"block\" | \"inline\">", + "description": "Sets how the children are placed within the Stack. This uses [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).", + "isOptional": true, + "defaultValue": "'block'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "display", + "value": "MaybeResponsive<\"auto\" | \"none\">", + "description": "Sets the outer display type of the component. The outer type sets a component’s participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "gap", + "value": "MaybeResponsive>", + "description": "Adjust spacing between elements.\n\nA single value applies to both axes. A pair of values (eg `large-100 large-500`) can be used to set the inline and block axes respectively.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "inlineSize", + "value": "MaybeResponsive", + "description": "Adjust the inline size.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "justifyContent", + "value": "MaybeResponsive>", + "description": "Aligns the Stack along the main axis.", + "isOptional": true, + "defaultValue": "'normal'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "maxBlockSize", + "value": "MaybeResponsive", + "description": "Adjust the maximum block size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "maxInlineSize", + "value": "MaybeResponsive", + "description": "Adjust the maximum inline size.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "minBlockSize", + "value": "MaybeResponsive", + "description": "Adjust the minimum block size.", + "isOptional": true, + "defaultValue": "'0'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "minInlineSize", + "value": "MaybeResponsive", + "description": "Adjust the minimum inline size.", + "isOptional": true, + "defaultValue": "'0'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "overflow", + "value": "'hidden' | 'visible'", + "description": "Sets the overflow behavior of the element.\n\n- `hidden`: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse.\n- `visible`: the content that extends beyond the element’s container is visible.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "padding", + "value": "MaybeResponsive>", + "description": "Adjust the padding of all edges.\n\n[1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:\n\n- 4 values: `block-start inline-end block-end inline-start`\n- 3 values: `block-start inline block-end`\n- 2 values: `block inline`\n\nFor example:\n- `large` means block-start, inline-end, block-end and inline-start paddings are `large`.\n- `large none` means block-start and block-end paddings are `large`, inline-start and inline-end paddings are `none`.\n- `large none large` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`.\n- `large none large small` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`.\n\nA padding value of `auto` will use the default padding for the closest container that has had its usual padding removed.", + "isOptional": true, + "defaultValue": "'none'" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlock", + "value": "MaybeResponsive | \"\">", + "description": "Adjust the block-padding.\n\n- `large none` means block-start padding is `large`, block-end padding is `none`.\n\nThis overrides the block value of `padding`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlockEnd", + "value": "MaybeResponsive", + "description": "Adjust the block-end padding.\n\nThis overrides the block-end value of `paddingBlock`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "paddingBlockStart", + "value": "MaybeResponsive", + "description": "Adjust the block-start padding.\n\nThis overrides the block-start value of `paddingBlock`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInline", + "value": "MaybeResponsive | \"\">", + "description": "Adjust the inline padding.\n\n- `large none` means inline-start padding is `large`, inline-end padding is `none`.\n\nThis overrides the inline value of `padding`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInlineEnd", + "value": "MaybeResponsive", + "description": "Adjust the inline-end padding.\n\nThis overrides the inline-end value of `paddingInline`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "paddingInlineStart", + "value": "MaybeResponsive", + "description": "Adjust the inline-start padding.\n\nThis overrides the inline-start value of `paddingInline`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + }, + { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "PropertySignature", + "name": "rowGap", + "value": "MaybeResponsive", + "description": "Adjust spacing between elements in the block axis.\n\nThis overrides the row value of `gap`.", + "isOptional": true, + "defaultValue": "'' - meaning no override" + } + ], + "value": "export interface StackProps extends StackElementProps {\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": "" + }, + "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": "'base' | 'large' | 'large-100' | 'large-200' | 'none'", + "description": "" + }, + "ReducedColorKeyword": { + "filePath": "src/surfaces/checkout/components/Stack.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ReducedColorKeyword", + "value": "'base'", + "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": "" + }, + "SpacingKeyword": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "SpacingKeyword", + "value": "SizeKeyword | \"none\"", + "description": "" + }, + "SizeKeyword": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "SizeKeyword", + "value": "\"small-500\" | \"small-400\" | \"small-300\" | \"small-200\" | \"small-100\" | \"small\" | \"base\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"large-500\"", + "description": "" + }, + "MaybeTwoValuesShorthandProperty": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "MaybeTwoValuesShorthandProperty", + "value": "T | `${T} ${T}`", + "description": "" + }, + "SizeUnitsOrNone": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "SizeUnitsOrNone", + "value": "SizeUnits | \"none\"", + "description": "" + }, + "PaddingKeyword": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "PaddingKeyword", + "value": "SizeKeyword | \"none\"", + "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": "Slots", + "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": "CustomerAccountActionElementSlotsDocs", + "type": "SwitchElementProps", "typeDefinitions": { - "CustomerAccountActionElementSlotsDocs": { - "filePath": "src/surfaces/customer-account/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CustomerAccountActionElementSlotsDocs", - "value": "CustomerAccountActionElementSlots", + "SwitchElementProps": { + "filePath": "src/surfaces/checkout/components/Switch.ts", + "name": "SwitchElementProps", "description": "", "members": [ { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/Switch.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": "accessibilityLabel", + "value": "string", + "description": "A label used for users using assistive technologies like screen readers. When set, any children or `label` supplied will not be announced. This can also be used to display a control without a visual label, while still providing context to users using screen readers.", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/Switch.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": "checked", + "value": "boolean", + "description": "Whether the control is active.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Switch.ts", + "syntaxKind": "PropertySignature", + "name": "command", + "value": "'--auto' | '--show' | '--hide' | '--toggle'", + "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/checkout/components/Switch.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/checkout/components/Switch.ts", + "syntaxKind": "PropertySignature", + "name": "defaultChecked", + "value": "boolean", + "description": "Whether the control is active by default.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Switch.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the control, disallowing any interaction.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/Switch.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Switch.ts", + "syntaxKind": "PropertySignature", + "name": "label", + "value": "string", + "description": "Visual content to use as the control label.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Switch.ts", + "syntaxKind": "PropertySignature", + "name": "name", + "value": "string", + "description": "An identifier for the control that is unique within the nearest containing `Form` component.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Switch.ts", + "syntaxKind": "PropertySignature", + "name": "value", + "value": "string", + "description": "The value used in form data when the control is checked.", "isOptional": true } - ] + ], + "value": "export interface SwitchElementProps extends Pick {\n command?: Extract;\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": "SwitchElementEvents", "typeDefinitions": { - "Docs_CustomerAccountAction_SlotButton": { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "name": "Docs_CustomerAccountAction_SlotButton", + "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/checkout/components/Switch.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/Switch.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" + } + } + } + ], + "defaultExample": { + "image": "switch-default.png", + "codeblock": { + "title": "Code", + "tabs": [ + { + "code": "<s-switch label=\"Shipping insurance\"></s-switch>\n", + "language": "html" + } + ] + } + }, + "subSections": [] + }, + { + "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": "TextElementProps", + "typeDefinitions": { + "TextElementProps": { + "filePath": "src/surfaces/checkout/components/Text.ts", + "name": "TextElementProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/Text.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityVisibility", + "value": "'visible' | 'hidden' | 'exclusive'", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/Text.ts", + "syntaxKind": "PropertySignature", + "name": "color", + "value": "'base' | 'subdued'", + "description": "Modify the color to be more or less intense.", + "isOptional": true, + "defaultValue": "'base'" + }, + { + "filePath": "src/surfaces/checkout/components/Text.ts", + "syntaxKind": "PropertySignature", + "name": "dir", + "value": "'ltr' | 'rtl' | 'auto' | ''", + "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: languages written from left to right (e.g. English)\n- `rtl`: languages written from right to left (e.g. Arabic)\n- `auto`: the user agent determines the direction based on the content\n- `''`: direction is inherited from parent elements (equivalent to not setting the attribute)", + "isOptional": true, + "defaultValue": "''" + }, + { + "filePath": "src/surfaces/checkout/components/Text.ts", + "syntaxKind": "PropertySignature", + "name": "display", + "value": "MaybeResponsive<\"auto\" | \"none\">", + "description": "Sets the outer display type of the component. The outer type sets a component’s participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Text.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/Text.ts", + "syntaxKind": "PropertySignature", + "name": "lang", + "value": "string", + "description": "Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. [Reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) (\"subtag\" label)\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", + "isOptional": true, + "defaultValue": "''" + }, + { + "filePath": "src/surfaces/checkout/components/Text.ts", + "syntaxKind": "PropertySignature", + "name": "tone", + "value": "'info' | 'auto' | 'neutral' | 'success' | 'warning' | 'critical' | 'custom'", + "description": "Sets the tone of the component, based on the intention of the information being conveyed.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/checkout/components/Text.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "'address' | 'mark' | 'small' | 'strong' | 'generic' | 'redundant' | 'emphasis' | 'offset'", + "description": "Provide semantic meaning and default styling to the text.\n\nOther presentation properties on Text override the default styling.", + "isOptional": true, + "defaultValue": "'generic'" + } + ], + "value": "export interface TextElementProps extends Pick {\n color?: Extract;\n tone?: Extract;\n type?: Extract;\n}" + }, + "MaybeResponsive": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "MaybeResponsive", + "value": "T | `@container${string}`", + "description": "" + } + } + } + ], + "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`." + }, + { + "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": { + "TextAreaElementProps": { + "filePath": "src/surfaces/checkout/components/TextArea.ts", + "name": "TextAreaElementProps", "description": "", "members": [ { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/TextArea.ts", + "syntaxKind": "PropertySignature", + "name": "autocomplete", + "value": "AutocompleteField | `${AutocompleteSection} ${AutocompleteField}` | `${AutocompleteGroup} ${AutocompleteField}` | `${AutocompleteSection} ${AutocompleteGroup} ${AutocompleteField}` | \"on\" | \"off\"", + "description": "A hint as to the intended content of the field.\n\nWhen set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents.\n\nWhen set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes.\n\nAlternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill.", + "isOptional": true, + "defaultValue": "'on' for everything else" + }, + { + "filePath": "src/surfaces/checkout/components/TextArea.ts", + "syntaxKind": "PropertySignature", + "name": "defaultValue", + "value": "string", + "description": "The default value for the field.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/TextArea.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the field, disallowing any interaction.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/TextArea.ts", "syntaxKind": "PropertySignature", - "name": "accessibilityLabel", + "name": "error", "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.", + "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.", "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": "id", + "value": "string", + "description": "A unique identifier for the element.", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/TextArea.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": "label", + "value": "string", + "description": "Content to use as the field label.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/TextArea.ts", + "syntaxKind": "PropertySignature", + "name": "labelAccessibilityVisibility", + "value": "'visible' | 'exclusive'", + "description": "Changes the visibility of the component's label.\n\n- `visible`: the label is visible to all users.\n- `exclusive`: the label is visually hidden but remains in the accessibility tree.", "isOptional": true, - "defaultValue": "'--auto'" + "defaultValue": "'visible'" }, { - "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.", - "isOptional": true + "name": "maxLength", + "value": "number", + "description": "Specifies the maximum number of characters allowed.", + "isOptional": true, + "defaultValue": "Infinity" }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/TextArea.ts", "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Disables the button, disallowing any interaction.", + "name": "minLength", + "value": "number", + "description": "Specifies the min number of characters allowed.", "isOptional": true, - "defaultValue": "false" + "defaultValue": "0" }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/TextArea.ts", "syntaxKind": "PropertySignature", - "name": "href", + "name": "name", "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.", + "description": "An identifier for the field that is unique within the nearest containing form.", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/TextArea.ts", "syntaxKind": "PropertySignature", - "name": "loading", + "name": "placeholder", + "value": "string", + "description": "", + "isOptional": true, + "deprecationMessage": "Use `label` instead.", + "isPrivate": true + }, + { + "filePath": "src/surfaces/checkout/components/TextArea.ts", + "syntaxKind": "PropertySignature", + "name": "readOnly", "value": "boolean", - "description": "Replaces content with a loading indicator.", + "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/TextArea.ts", + "syntaxKind": "PropertySignature", + "name": "required", + "value": "boolean", + "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property.", "isOptional": true, "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/TextArea.ts", + "syntaxKind": "PropertySignature", + "name": "rows", + "value": "number", + "description": "A number of visible text lines.", + "isOptional": true, + "defaultValue": "2" + }, + { + "filePath": "src/surfaces/checkout/components/TextArea.ts", + "syntaxKind": "PropertySignature", + "name": "value", + "value": "string", + "description": "The current value for the field. If omitted, the field will be empty.", + "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 TextAreaElementProps extends Pick {\n /**\n * @deprecated Use `label` instead.\n * @private\n */\n placeholder?: string;\n}" }, - "CallbackEventListener": { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "AutocompleteSection": { + "filePath": "src/surfaces/checkout/components/components.ts", "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "" + "name": "AutocompleteSection", + "value": "`section-${string}`", + "description": "The “section” scopes the autocomplete data that should be inserted to a specific area of the page.\n\nCommonly used when there are multiple fields with the same autocomplete needs in the same page. For example: 2 shipping address forms in the same page." }, - "CallbackEvent": { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "AutocompleteGroup": { + "filePath": "src/surfaces/checkout/components/components.ts", "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", - "description": "" + "name": "AutocompleteGroup", + "value": "\"shipping\" | \"billing\"", + "description": "The contact information group the autocomplete data should be sourced from." } } - } - ], - "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": "ImageGroup", - "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", + "title": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "TextAreaElementEvents", "typeDefinitions": { - "ImageGroupPropsDocs": { - "filePath": "src/surfaces/customer-account/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ImageGroupPropsDocs", - "value": "ImageGroupProps", + "TextAreaElementEvents": { + "filePath": "src/surfaces/checkout/components/TextArea.ts", + "name": "TextAreaElementEvents", "description": "", "members": [ { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/TextArea.ts", "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "A unique identifier for the element.", + "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/TextArea.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": "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/TextArea.ts", + "syntaxKind": "PropertySignature", + "name": "focus", + "value": "CallbackEventListener", + "description": "Callback when the element receives focus.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/TextArea.ts", + "syntaxKind": "PropertySignature", + "name": "input", + "value": "CallbackEventListener", + "description": "Callback when the user makes any changes in the field.", "isOptional": true } - ] + ], + "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/checkout/components/TextArea.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "" + }, + "CallbackEvent": { + "filePath": "src/surfaces/checkout/components/TextArea.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "" } } } ], - "category": "Polaris web components", - "subCategory": "Media", "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": "text-area-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-text-area\n label=\"Gift message\"\n value=\"Hope you enjoy this gift!\"\n rows={3}\n></s-text-area>\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": "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": "Properties", "description": "", - "type": "MenuPropsDocs", + "type": "TextFieldElementProps", "typeDefinitions": { - "MenuPropsDocs": { - "filePath": "src/surfaces/customer-account/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MenuPropsDocs", - "value": "MenuProps", + "TextFieldElementProps": { + "filePath": "src/surfaces/checkout/components/TextField.ts", + "name": "TextFieldElementProps", "description": "", "members": [ { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/TextField.ts", "syntaxKind": "PropertySignature", - "name": "accessibilityLabel", + "name": "autocomplete", + "value": "AutocompleteField | `${AutocompleteSection} ${AutocompleteField}` | `${AutocompleteGroup} ${AutocompleteField}` | `${AutocompleteSection} ${AutocompleteGroup} ${AutocompleteField}` | \"on\" | \"off\"", + "description": "A hint as to the intended content of the field.\n\nWhen set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents.\n\nWhen set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes.\n\nAlternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill.", + "isOptional": true, + "defaultValue": "'on' for everything else" + }, + { + "filePath": "src/surfaces/checkout/components/TextField.ts", + "syntaxKind": "PropertySignature", + "name": "defaultValue", "value": "string", - "description": "A label to describe the purpose of the menu that is announced by screen readers.", + "description": "The default value for the field.", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/TextField.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the field, disallowing any interaction.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/TextField.ts", + "syntaxKind": "PropertySignature", + "name": "error", + "value": "string", + "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/TextField.ts", + "syntaxKind": "PropertySignature", + "name": "icon", + "value": "'' | 'reset' | 'map' | 'menu' | 'search' | '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' | 'settings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x'", + "description": "The type of icon to be displayed in the field.", + "isOptional": true, + "defaultValue": "''" + }, + { + "filePath": "src/surfaces/checkout/components/TextField.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", + "filePath": "src/surfaces/checkout/components/TextField.ts", "syntaxKind": "PropertySignature", - "name": "accessibilityLabel", + "name": "label", "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.", + "description": "Content to use as the field label.", "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": "labelAccessibilityVisibility", + "value": "'visible' | 'exclusive'", + "description": "Changes the visibility of the component's label.\n\n- `visible`: the label is visible to all users.\n- `exclusive`: the label is visually hidden but remains in the accessibility tree.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/TextField.ts", + "syntaxKind": "PropertySignature", + "name": "maxLength", + "value": "number", + "description": "Specifies the maximum number of characters allowed.", + "isOptional": true, + "defaultValue": "Infinity" + }, + { + "filePath": "src/surfaces/checkout/components/TextField.ts", + "syntaxKind": "PropertySignature", + "name": "minLength", + "value": "number", + "description": "Specifies the min number of characters allowed.", + "isOptional": true, + "defaultValue": "0" + }, + { + "filePath": "src/surfaces/checkout/components/TextField.ts", + "syntaxKind": "PropertySignature", + "name": "name", + "value": "string", + "description": "An identifier for the field that is unique within the nearest containing form.", "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 + }, + { + "filePath": "src/surfaces/checkout/components/TextField.ts", + "syntaxKind": "PropertySignature", + "name": "prefix", + "value": "string", + "description": "A value to be displayed immediately before the editable portion of the field.\n\nThis is useful for displaying an implied part of the value, such as \"https://\" or \"+353\".\n\nThis cannot be edited by the user, and it isn't included in the value of the field.\n\nIt may not be displayed until the user has interacted with the input. For example, an inline label may take the place of the prefix until the user focuses the input.", + "isOptional": true, + "defaultValue": "''" }, { - "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.", - "isOptional": true + "name": "readOnly", + "value": "boolean", + "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers.", + "isOptional": true, + "defaultValue": "false" }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/TextField.ts", "syntaxKind": "PropertySignature", - "name": "disabled", + "name": "required", "value": "boolean", - "description": "Disables the button, disallowing any interaction.", + "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property.", "isOptional": true, "defaultValue": "false" }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/TextField.ts", "syntaxKind": "PropertySignature", - "name": "href", + "name": "suffix", "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": "A value to be displayed immediately after the editable portion of the field.\n\nThis is useful for displaying an implied part of the value, such as \"@shopify.com\", or \"%\".\n\nThis cannot be edited by the user, and it isn't included in the value of the field.\n\nIt may not be displayed until the user has interacted with the input. For example, an inline label may take the place of the suffix until the user focuses the input.", + "isOptional": true, + "defaultValue": "''" }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/TextField.ts", "syntaxKind": "PropertySignature", - "name": "id", + "name": "value", "value": "string", - "description": "A unique identifier for the element.", + "description": "The current value for the field. If omitted, the field will be empty.", "isOptional": true - }, + } + ], + "value": "export interface TextFieldElementProps extends Pick {\n icon?: IconProps['type'];\n /**\n * @deprecated Use `label` instead.\n * @private\n */\n placeholder?: string;\n}" + }, + "AutocompleteSection": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "AutocompleteSection", + "value": "`section-${string}`", + "description": "The “section” scopes the autocomplete data that should be inserted to a specific area of the page.\n\nCommonly used when there are multiple fields with the same autocomplete needs in the same page. For example: 2 shipping address forms in the same page." + }, + "AutocompleteGroup": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "AutocompleteGroup", + "value": "\"shipping\" | \"billing\"", + "description": "The contact information group the autocomplete data should be sourced from." + } + } + }, + { + "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": "loading", - "value": "boolean", - "description": "Replaces content with a loading indicator.", - "isOptional": true, - "defaultValue": "false" + "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": "target", - "value": "'auto' | '_self' | '_blank'", - "description": "Specifies where to display the linked URL", - "isOptional": true, - "defaultValue": "'auto'" + "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": "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": "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": "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": "input", + "value": "CallbackEventListener", + "description": "Callback when the user makes any changes in the field.", + "isOptional": true } ], - "value": "export interface Docs_Menu_Button_Action\n extends Omit<\n ButtonProps,\n 'variant' | 'textDecoration' | 'inlineAlignment' | 'inlineSize' | 'size'\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": "Actions", "defaultExample": { - "image": "menu-default.png", - "altText": "An example of a Menu component shows three actions: Submit problem, Request return, and Cancel order.", + "image": "text-field-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-text-field\n label=\"First name (optional)\"\n defaultValue=\"Taylor\"\n></s-text-field>\n", + "language": "html" } ] } @@ -58805,475 +71426,452 @@ { "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" + "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." } ] }, { - "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": "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", + "related": [], "isVisualComponent": true, + "thumbnail": "time-thumbnail.png", + "requires": "", "type": "", + "subCategory": "Typography and content", "definitions": [ { "title": "Properties", "description": "", - "type": "PagePropsDocs", + "type": "TimeElementProps", "typeDefinitions": { - "PagePropsDocs": { - "filePath": "src/surfaces/customer-account/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PagePropsDocs", - "value": "PageProps", + "TimeElementProps": { + "filePath": "src/surfaces/checkout/components/Time.ts", + "name": "TimeElementProps", "description": "", "members": [ { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/Time.ts", "syntaxKind": "PropertySignature", - "name": "heading", + "name": "dateTime", "value": "string", - "description": "The main page heading", - "isOptional": true + "description": "Set the time and/or date of the element.\n\nIt must be a [valid date string](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time#valid_datetime_values).", + "isOptional": true, + "defaultValue": "''" }, { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/Time.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 } - ] + ], + "value": "export interface TimeElementProps extends Pick {\n}" } } - }, - { - "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 - } - ] + } + ], + "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": [ { - "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 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": { - "Docs_Page_Button_BreadcrumbAction": { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "name": "Docs_Page_Button_BreadcrumbAction", + "TooltipElementProps": { + "filePath": "src/surfaces/checkout/components/Tooltip.ts", + "name": "TooltipElementProps", "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/Tooltip.ts", "syntaxKind": "PropertySignature", - "name": "href", + "name": "id", "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.", + "description": "A unique identifier for the element.", "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": "" + "value": "export interface TooltipElementProps extends Pick {\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", + } + ], + "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": "URLFieldElementProps", "typeDefinitions": { - "Docs_Page_Button_PrimaryAction": { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "name": "Docs_Page_Button_PrimaryAction", + "URLFieldElementProps": { + "filePath": "src/surfaces/checkout/components/UrlField.ts", + "name": "URLFieldElementProps", "description": "", "members": [ { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/UrlField.ts", "syntaxKind": "PropertySignature", - "name": "accessibilityLabel", + "name": "autocomplete", + "value": "AutocompleteField | `${AutocompleteSection} ${AutocompleteField}` | `${AutocompleteGroup} ${AutocompleteField}` | `${AutocompleteSection} ${AutocompleteGroup} ${AutocompleteField}` | \"on\" | \"off\"", + "description": "A hint as to the intended content of the field.\n\nWhen set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents.\n\nWhen set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes.\n\nAlternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill.", + "isOptional": true, + "defaultValue": "'on' for everything else" + }, + { + "filePath": "src/surfaces/checkout/components/UrlField.ts", + "syntaxKind": "PropertySignature", + "name": "defaultValue", "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.", + "description": "The default value for the field.", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/UrlField.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": "disabled", + "value": "boolean", + "description": "Disables the field, disallowing any interaction.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/UrlField.ts", + "syntaxKind": "PropertySignature", + "name": "error", + "value": "string", + "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/UrlField.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": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/UrlField.ts", "syntaxKind": "PropertySignature", - "name": "commandFor", + "name": "label", "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": "Content to use as the field label.", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/UrlField.ts", "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Disables the button, disallowing any interaction.", + "name": "labelAccessibilityVisibility", + "value": "'visible' | 'exclusive'", + "description": "Changes the visibility of the component's label.\n\n- `visible`: the label is visible to all users.\n- `exclusive`: the label is visually hidden but remains in the accessibility tree.", "isOptional": true, - "defaultValue": "false" + "defaultValue": "'visible'" }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/UrlField.ts", "syntaxKind": "PropertySignature", - "name": "href", + "name": "maxLength", + "value": "number", + "description": "Specifies the maximum number of characters allowed.", + "isOptional": true, + "defaultValue": "Infinity" + }, + { + "filePath": "src/surfaces/checkout/components/UrlField.ts", + "syntaxKind": "PropertySignature", + "name": "minLength", + "value": "number", + "description": "Specifies the min number of characters allowed.", + "isOptional": true, + "defaultValue": "0" + }, + { + "filePath": "src/surfaces/checkout/components/UrlField.ts", + "syntaxKind": "PropertySignature", + "name": "name", "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.", + "description": "An identifier for the field that is unique within the nearest containing form.", "isOptional": true }, { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/UrlField.ts", "syntaxKind": "PropertySignature", - "name": "loading", + "name": "readOnly", "value": "boolean", - "description": "Replaces content with a loading indicator.", + "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/UrlField.ts", + "syntaxKind": "PropertySignature", + "name": "required", + "value": "boolean", + "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property.", "isOptional": true, "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/UrlField.ts", + "syntaxKind": "PropertySignature", + "name": "value", + "value": "string", + "description": "The current value for the field. If omitted, the field will be empty.", + "isOptional": true } ], - "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 URLFieldElementProps extends Pick {\n}" }, - "CallbackEventListener": { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "AutocompleteSection": { + "filePath": "src/surfaces/checkout/components/components.ts", "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "" + "name": "AutocompleteSection", + "value": "`section-${string}`", + "description": "The “section” scopes the autocomplete data that should be inserted to a specific area of the page.\n\nCommonly used when there are multiple fields with the same autocomplete needs in the same page. For example: 2 shipping address forms in the same page." }, - "CallbackEvent": { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "AutocompleteGroup": { + "filePath": "src/surfaces/checkout/components/components.ts", "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", - "description": "" + "name": "AutocompleteGroup", + "value": "\"shipping\" | \"billing\"", + "description": "The contact information group the autocomplete data should be sourced from." } } }, { - "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": "Events", + "description": "Learn more about [registering events](/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).", + "type": "URLFieldElementEvents", "typeDefinitions": { - "Docs_Page_Button_SecondaryAction": { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "name": "Docs_Page_Button_SecondaryAction", + "URLFieldElementEvents": { + "filePath": "src/surfaces/checkout/components/UrlField.ts", + "name": "URLFieldElementEvents", "description": "", "members": [ { - "filePath": "src/surfaces/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/UrlField.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/UrlField.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/UrlField.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/UrlField.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_SecondaryAction\n extends Pick<\n ButtonProps,\n | 'click'\n | 'loading'\n | 'disabled'\n | 'accessibilityLabel'\n | 'href'\n | 'command'\n | 'commandFor'\n > {}" + "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/customer-account/api/docs.ts", + "filePath": "src/surfaces/checkout/components/UrlField.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/UrlField.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": "URLFieldElementSlots", + "typeDefinitions": { + "URLFieldElementSlots": { + "filePath": "src/surfaces/checkout/components/UrlField.ts", + "name": "URLFieldElementSlots", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/UrlField.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 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}" + } + } } ], - "category": "Polaris web components", - "subCategory": "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": "url-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-url-field label=\"Website\" defaultValue=\"https://shopify.com\"></s-url-field>\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 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": [] + "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).", + "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", - "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" - } - ], + "thumbnail": "unordered-list-thumbnail.png", + "requires": "", + "type": "", + "subCategory": "Typography and content", "definitions": [ { "title": "Properties", "description": "", - "type": "SectionPropsDocs", + "type": "UnorderedListElementProps", "typeDefinitions": { - "SectionPropsDocs": { - "filePath": "src/surfaces/customer-account/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SectionPropsDocs", - "value": "SectionProps", + "UnorderedListElementProps": { + "filePath": "src/surfaces/checkout/components/UnorderedList.ts", + "name": "UnorderedListElementProps", "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": "A title that describes the content of the section.", - "isOptional": true - }, - { - "filePath": "src/surfaces/customer-account/components.ts", + "filePath": "src/surfaces/checkout/components/UnorderedList.ts", "syntaxKind": "PropertySignature", "name": "id", "value": "string", "description": "A unique identifier for the element.", "isOptional": true } - ] + ], + "value": "export interface UnorderedListElementProps extends UnorderedListProps$1 {\n}" } } }, { - "title": "Slots", - "description": "", - "type": "SectionElementSlotsDocs", + "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": { - "SectionElementSlotsDocs": { - "filePath": "src/surfaces/customer-account/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SectionElementSlotsDocs", - "value": "SectionElementSlots", + "ListItemElementProps": { + "filePath": "src/surfaces/checkout/components/ListItem.ts", + "name": "ListItemElementProps", "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/ListItem.ts", "syntaxKind": "PropertySignature", - "name": "secondary-actions", - "value": "HTMLElement", - "description": "The secondary actions for the section. Accepts multiple [Button](/docs/api/checkout-ui-extensions/polaris-web-components/actions/button) elements.", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", "isOptional": true } - ] + ], + "value": "export interface ListItemElementProps extends Pick {\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": "unordered-list-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-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 diff --git a/packages/ui-extensions/src/docs/shared/components/Announcement.ts b/packages/ui-extensions/src/docs/shared/components/Announcement.ts index b9e23f5b22..53f77e2f40 100644 --- a/packages/ui-extensions/src/docs/shared/components/Announcement.ts +++ b/packages/ui-extensions/src/docs/shared/components/Announcement.ts @@ -5,7 +5,7 @@ const data: SharedReferenceEntityTemplateSchema = { 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', - subCategory: 'Feedback', + subCategory: 'Feedback and status indicators', related: [], }; diff --git a/packages/ui-extensions/src/docs/shared/components/ClipboardItem.ts b/packages/ui-extensions/src/docs/shared/components/ClipboardItem.ts index e2d806cbab..ac30c09e2a 100644 --- a/packages/ui-extensions/src/docs/shared/components/ClipboardItem.ts +++ b/packages/ui-extensions/src/docs/shared/components/ClipboardItem.ts @@ -1,11 +1,11 @@ import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; const data: SharedReferenceEntityTemplateSchema = { - name: 'ClipboardItem', + 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', - subCategory: 'utilities', + subCategory: 'Actions', related: [], }; diff --git a/packages/ui-extensions/src/docs/shared/components/ConsentCheckbox.ts b/packages/ui-extensions/src/docs/shared/components/ConsentCheckbox.ts index e6e56656fc..5fe79373c4 100644 --- a/packages/ui-extensions/src/docs/shared/components/ConsentCheckbox.ts +++ b/packages/ui-extensions/src/docs/shared/components/ConsentCheckbox.ts @@ -1,7 +1,7 @@ import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; const data: SharedReferenceEntityTemplateSchema = { - name: 'ConsentCheckbox', + name: 'Consent checkbox', description: 'Use buyer consent checkboxes for collecting the buyer’s approval for a given policy.', category: 'Polaris web components', diff --git a/packages/ui-extensions/src/docs/shared/components/ConsentPhoneField.ts b/packages/ui-extensions/src/docs/shared/components/ConsentPhoneField.ts index 777932ece5..12d8f23d73 100644 --- a/packages/ui-extensions/src/docs/shared/components/ConsentPhoneField.ts +++ b/packages/ui-extensions/src/docs/shared/components/ConsentPhoneField.ts @@ -1,7 +1,7 @@ import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; const data: SharedReferenceEntityTemplateSchema = { - name: 'ConsentPhoneField', + 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', 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/PaymentIcon.ts b/packages/ui-extensions/src/docs/shared/components/PaymentIcon.ts index 6d95ea13c2..6318c116d4 100644 --- a/packages/ui-extensions/src/docs/shared/components/PaymentIcon.ts +++ b/packages/ui-extensions/src/docs/shared/components/PaymentIcon.ts @@ -1,11 +1,11 @@ import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; const data: SharedReferenceEntityTemplateSchema = { - name: 'PaymentIcon', + name: 'Payment icon', description: 'Displays icons representing payment methods. Use to visually communicate available or saved payment options clearly', category: 'Polaris web components', - subCategory: 'Media', + subCategory: 'Media and visuals', related: [], }; diff --git a/packages/ui-extensions/src/docs/shared/components/PhoneField.ts b/packages/ui-extensions/src/docs/shared/components/PhoneField.ts index 850799e9a5..e7747c6478 100644 --- a/packages/ui-extensions/src/docs/shared/components/PhoneField.ts +++ b/packages/ui-extensions/src/docs/shared/components/PhoneField.ts @@ -1,7 +1,7 @@ import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; const data: SharedReferenceEntityTemplateSchema = { - name: 'PhoneField', + name: 'Phone field', description: 'Use PhoneField to allow users to enter phone numbers.', category: 'Polaris web components', subCategory: 'Forms', diff --git a/packages/ui-extensions/src/docs/shared/components/PressButton.ts b/packages/ui-extensions/src/docs/shared/components/PressButton.ts index 522ad6e4c3..efac969935 100644 --- a/packages/ui-extensions/src/docs/shared/components/PressButton.ts +++ b/packages/ui-extensions/src/docs/shared/components/PressButton.ts @@ -1,7 +1,7 @@ import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; const data: SharedReferenceEntityTemplateSchema = { - name: 'PressButton', + 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', diff --git a/packages/ui-extensions/src/docs/shared/components/ProductThumbnail.ts b/packages/ui-extensions/src/docs/shared/components/ProductThumbnail.ts index 0e7a6d24a0..284ea0d3e3 100644 --- a/packages/ui-extensions/src/docs/shared/components/ProductThumbnail.ts +++ b/packages/ui-extensions/src/docs/shared/components/ProductThumbnail.ts @@ -1,10 +1,10 @@ import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; const data: SharedReferenceEntityTemplateSchema = { - name: 'ProductThumbnail', + name: 'Product thumbnail', description: 'Use ProductThumbnail to display a product thumbnail', category: 'Polaris web components', - subCategory: 'Media', + subCategory: 'Media and visuals', related: [], }; diff --git a/packages/ui-extensions/src/docs/shared/components/Progress.ts b/packages/ui-extensions/src/docs/shared/components/Progress.ts index 7c965b16a7..1f6c4a2b58 100644 --- a/packages/ui-extensions/src/docs/shared/components/Progress.ts +++ b/packages/ui-extensions/src/docs/shared/components/Progress.ts @@ -5,7 +5,7 @@ const data: SharedReferenceEntityTemplateSchema = { 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', - subCategory: 'Feedback', + subCategory: 'Feedback and status indicators', related: [], }; diff --git a/packages/ui-extensions/src/docs/shared/components/QRCode.ts b/packages/ui-extensions/src/docs/shared/components/QRCode.ts index de6377f550..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: 'QRCode', + 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/ScrollBox.ts b/packages/ui-extensions/src/docs/shared/components/ScrollBox.ts index deda68d0f3..8ae5d86923 100644 --- a/packages/ui-extensions/src/docs/shared/components/ScrollBox.ts +++ b/packages/ui-extensions/src/docs/shared/components/ScrollBox.ts @@ -1,11 +1,11 @@ import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; const data: SharedReferenceEntityTemplateSchema = { - name: 'ScrollBox', + 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', - subCategory: 'Structure', + subCategory: 'Layout and structure', related: [], }; diff --git a/packages/ui-extensions/src/docs/shared/components/SkeletonParagraph.ts b/packages/ui-extensions/src/docs/shared/components/SkeletonParagraph.ts index ddf474ce58..4d958e00b1 100644 --- a/packages/ui-extensions/src/docs/shared/components/SkeletonParagraph.ts +++ b/packages/ui-extensions/src/docs/shared/components/SkeletonParagraph.ts @@ -1,11 +1,11 @@ import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; const data: SharedReferenceEntityTemplateSchema = { - name: 'SkeletonParagraph', + 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', - subCategory: 'Feedback', + 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/Avatar/Avatar.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Avatar/Avatar.doc.ts index 85bae164ab..08bf269ecc 100644 --- a/packages/ui-extensions/src/surfaces/customer-account/components/Avatar/Avatar.doc.ts +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Avatar/Avatar.doc.ts @@ -22,7 +22,7 @@ const data: ReferenceEntityTemplateSchema = { }, ], category: 'Polaris web components', - subCategory: 'Media', + subCategory: 'Media and visuals', defaultExample: { image: 'avatar-default.png', altText: 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/ButtonGroup/ButtonGroup.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/ButtonGroup/ButtonGroup.doc.ts index e13acac0ae..96dcb4be0b 100644 --- a/packages/ui-extensions/src/surfaces/customer-account/components/ButtonGroup/ButtonGroup.doc.ts +++ b/packages/ui-extensions/src/surfaces/customer-account/components/ButtonGroup/ButtonGroup.doc.ts @@ -1,7 +1,7 @@ import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; const data: ReferenceEntityTemplateSchema = { - name: 'ButtonGroup', + name: 'Button group', description: `ButtonGroup is used to display multiple buttons in a layout that is contextual based on the screen width or parent component. When there is more than one secondary action, they get collapsed. When used within a [Section](/docs/api/customer-account-ui-extensions/polaris-web-components/structure/section) component, the buttons will fill the width of the section. 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/CustomerAccountAction/CustomerAccountAction.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/CustomerAccountAction/CustomerAccountAction.doc.ts index 04a1f705d9..02ef267791 100644 --- a/packages/ui-extensions/src/surfaces/customer-account/components/CustomerAccountAction/CustomerAccountAction.doc.ts +++ b/packages/ui-extensions/src/surfaces/customer-account/components/CustomerAccountAction/CustomerAccountAction.doc.ts @@ -1,7 +1,7 @@ import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; const data: ReferenceEntityTemplateSchema = { - name: 'CustomerAccountAction', + 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.', thumbnail: 'customeraccountaction-thumbnail.png', 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/ImageGroup/ImageGroup.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/ImageGroup/ImageGroup.doc.ts index da9500bb52..d5fc997d22 100644 --- a/packages/ui-extensions/src/surfaces/customer-account/components/ImageGroup/ImageGroup.doc.ts +++ b/packages/ui-extensions/src/surfaces/customer-account/components/ImageGroup/ImageGroup.doc.ts @@ -1,7 +1,7 @@ import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; const data: ReferenceEntityTemplateSchema = { - name: 'ImageGroup', + 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', @@ -16,7 +16,7 @@ const data: ReferenceEntityTemplateSchema = { }, ], category: 'Polaris web components', - subCategory: 'Media', + subCategory: 'Media and visuals', defaultExample: { image: 'imagegroup-default.png', altText: 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/Page/Page.doc.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Page/Page.doc.ts index 9fe4eac2a5..e2fce71020 100644 --- a/packages/ui-extensions/src/surfaces/customer-account/components/Page/Page.doc.ts +++ b/packages/ui-extensions/src/surfaces/customer-account/components/Page/Page.doc.ts @@ -39,7 +39,7 @@ const data: ReferenceEntityTemplateSchema = { }, ], category: 'Polaris web components', - subCategory: 'Structure', + subCategory: 'Layout and structure', defaultExample: { image: 'page-default.png', altText: 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 +