Add EmptyState docs

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<EmptyStateProps, 'heading'> {
+    /**
+     * 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<EmptyStateJSXProps, 'primaryAction' | 'secondaryActions' | 'graphic'>;
@@ -4608,7 +4620,7 @@ declare module 'preact' {
     }
 }
 
-declare const tagName$5 = "s-tab";
+declare const tagName$5 = "s-tabs";
 interface TabsJSXProps extends Pick<TabsProps, 'value' | 'defaultValue' | 'disabled'> {
     children?: ComponentChildren;
     onChange?: ((event: CallbackEvent<typeof tagName$5>) => 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<TabProps, 'controls' | 'disabled'> {
     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<typeof tagName$3>) => void;
+    change?: (event: CallbackEvent<typeof tagName$5>) => void;
 }
 
 interface Tabs {

packages/ui-extensions/src/surfaces/point-of-sale/components/EmptyState.d.ts

@@ -30,9 +30,21 @@ export type HtmlElementTagNameProps<T> = T & HTMLElement;
 
 declare const tagName = "s-empty-state";
 export interface EmptyStateJSXProps extends Pick<EmptyStateProps, 'heading'> {
+    /**
+     * 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<EmptyStateJSXProps, 'primaryAction' | 'secondaryActions' | 'graphic'>;

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;

packages/ui-extensions/src/surfaces/point-of-sale/components/EmptyState/examples/default.html

@@ -0,0 +1,4 @@
+<s-empty-state heading="Empty state title" subheading="Supporting copy">
+  <s-icon slot="graphic" type="info" />
+  <s-button slot="primary-action">Primary action</s-button>
+</s-empty-state>

packages/ui-extensions/src/surfaces/point-of-sale/components/Tab.d.ts

@@ -28,7 +28,7 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends Base
 export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T & HTMLElement>;
 export type HtmlElementTagNameProps<T> = T & HTMLElement;
 
-declare const tagName = "s-tabs";
+declare const tagName = "s-tab";
 export interface TabJSXProps extends Pick<TabProps, 'controls' | 'disabled'> {
     children?: StringChildren;
 }

packages/ui-extensions/src/surfaces/point-of-sale/components/Tabs.d.ts

@@ -37,7 +37,7 @@ export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
     target: HTMLElementTagNameMap[T] | null;
 }
 
-declare const tagName = "s-tab";
+declare const tagName = "s-tabs";
 export interface TabsJSXProps extends Pick<TabsProps, 'value' | 'defaultValue' | 'disabled'> {
     children?: ComponentChildren;
     onChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;

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'