diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/screenshots/emptystate-default.png b/packages/ui-extensions/docs/surfaces/point-of-sale/screenshots/emptystate-default.png new file mode 100644 index 0000000000..f85b97aaac Binary files /dev/null and b/packages/ui-extensions/docs/surfaces/point-of-sale/screenshots/emptystate-default.png differ diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/screenshots/emptystate-thumbnail.png b/packages/ui-extensions/docs/surfaces/point-of-sale/screenshots/emptystate-thumbnail.png new file mode 100644 index 0000000000..44b4a94ced Binary files /dev/null and b/packages/ui-extensions/docs/surfaces/point-of-sale/screenshots/emptystate-thumbnail.png differ diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts index cd5ff856fa..2db0dcb63c 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts @@ -4533,9 +4533,21 @@ declare module 'preact' { declare const tagName$9 = "s-empty-state"; interface EmptyStateJSXProps extends Pick { + /** + * The subheading of the EmptyState. + */ subheading?: string; + /** + * The primary action to perform, provided as a button or link type element. + */ primaryAction?: ComponentChild; + /** + * The secondary actions to perform, provided as button or link type elements. + */ secondaryActions?: ComponentChild; + /** + * The graphic to display in the EmptyState. The only supported components is `Icon`, with a type of `alert-circle`, `search`, `info`, or `circle-info`. + */ graphic?: ComponentChild; } type ElementProps$2 = Omit; @@ -4608,7 +4620,7 @@ declare module 'preact' { } } -declare const tagName$5 = "s-tab"; +declare const tagName$5 = "s-tabs"; interface TabsJSXProps extends Pick { children?: ComponentChildren; onChange?: ((event: CallbackEvent) => void) | null; @@ -4643,7 +4655,7 @@ declare module 'preact' { } } -declare const tagName$3 = "s-tabs"; +declare const tagName$3 = "s-tab"; interface TabJSXProps extends Pick { children?: StringChildren; } @@ -4784,12 +4796,16 @@ interface Link { } interface EmptyStateSlots { + /** The primary action to perform, provided as a button or link type element. */ 'primary-action'?: HTMLElement; + /** The secondary actions to perform, provided as button or link type elements. */ 'secondary-actions'?: HTMLElement; + /** The graphic to display in the EmptyState. The only supported components is `Icon`, with a type of `alert-circle`, `search`, `info`, or `circle-info`. */ 'graphic'?: HTMLElement; } interface EmptyState { + /** The subheading of the EmptyState. */ subheading?: string; /** The heading of the EmptyState. */ heading?: string; @@ -4897,7 +4913,7 @@ interface Switch { } interface TabsEvents { - change?: (event: CallbackEvent) => void; + change?: (event: CallbackEvent) => void; } interface Tabs { diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/EmptyState.d.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components/EmptyState.d.ts index 7fe9733f53..4eaae630d5 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/components/EmptyState.d.ts +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components/EmptyState.d.ts @@ -30,9 +30,21 @@ export type HtmlElementTagNameProps = T & HTMLElement; declare const tagName = "s-empty-state"; export interface EmptyStateJSXProps extends Pick { + /** + * The subheading of the EmptyState. + */ subheading?: string; + /** + * The primary action to perform, provided as a button or link type element. + */ primaryAction?: ComponentChild; + /** + * The secondary actions to perform, provided as button or link type elements. + */ secondaryActions?: ComponentChild; + /** + * The graphic to display in the EmptyState. The only supported components is `Icon`, with a type of `alert-circle`, `search`, `info`, or `circle-info`. + */ graphic?: ComponentChild; } export type ElementProps = Omit; diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/EmptyState/EmptyState.doc.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components/EmptyState/EmptyState.doc.ts new file mode 100644 index 0000000000..a259dfd07a --- /dev/null +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components/EmptyState/EmptyState.doc.ts @@ -0,0 +1,44 @@ +import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; + +const data: ReferenceEntityTemplateSchema = { + name: 'EmptyState', + description: + 'The `EmptyState` component displays a placeholder view when there is no content to show. Use it to guide users on what to do next, such as adding new items or performing actions to populate the view.', + thumbnail: 'emptystate-thumbnail.png', + isVisualComponent: true, + type: '', + definitions: [ + { + title: 'Properties', + description: + 'Configure the following properties on the `EmptyState` component.', + type: 'EmptyState', + }, + { + title: 'Slots', + description: + 'The `EmptyState` component supports slots for adding graphics and actions. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).', + type: 'EmptyStateSlots', + }, + ], + category: 'Polaris web components', + subCategory: 'Layout and structure', + defaultExample: { + image: 'emptystate-default.png', + description: + 'Create layouts using a `EmptyState` component. This example demonstrates a basic empty state container.', + codeblock: { + title: 'Create a generic empty state', + tabs: [ + { + code: './examples/default.html', + language: 'html', + }, + ], + }, + }, + subSections: [], + related: [], +}; + +export default data; diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/EmptyState/examples/default.html b/packages/ui-extensions/src/surfaces/point-of-sale/components/EmptyState/examples/default.html new file mode 100644 index 0000000000..b9cc8407a4 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components/EmptyState/examples/default.html @@ -0,0 +1,4 @@ + + + Primary action + diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/Tab.d.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components/Tab.d.ts index 0996870122..73c763ec45 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/components/Tab.d.ts +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components/Tab.d.ts @@ -28,7 +28,7 @@ export interface BaseElementPropsWithChildren extends Base export type IntrinsicElementProps = T & BaseElementPropsWithChildren; export type HtmlElementTagNameProps = T & HTMLElement; -declare const tagName = "s-tabs"; +declare const tagName = "s-tab"; export interface TabJSXProps extends Pick { children?: StringChildren; } diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/Tabs.d.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components/Tabs.d.ts index 47b9e4ee2d..a0c28ce04f 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/components/Tabs.d.ts +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components/Tabs.d.ts @@ -37,7 +37,7 @@ export interface CallbackEvent { target: HTMLElementTagNameMap[T] | null; } -declare const tagName = "s-tab"; +declare const tagName = "s-tabs"; export interface TabsJSXProps extends Pick { children?: ComponentChildren; onChange?: ((event: CallbackEvent) => void) | null; diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/targets/StandardComponents.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components/targets/StandardComponents.ts index a66fbb80b4..26124035e1 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/components/targets/StandardComponents.ts +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components/targets/StandardComponents.ts @@ -11,6 +11,7 @@ export type StandardComponents = | 'DateSpinner' | 'Divider' | 'EmailField' + | 'EmptyState' | 'Heading' | 'Icon' | 'Image'