Add Popover and Menu docs

packages/ui-extensions/src/docs/shared/components/Menu.ts

@@ -0,0 +1,12 @@
+import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'Menu',
+  description:
+    'Use Menu to display a list of actions that can be performed on a resource.',
+  category: 'Polaris web components',
+  subCategory: 'Actions',
+  related: [],
+};
+
+export default data;

packages/ui-extensions/src/docs/shared/components/Popover.ts

@@ -0,0 +1,12 @@
+import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'Popover',
+  description:
+    'Popover is used to display content in an overlay that can be triggered by a button.',
+  category: 'Polaris web components',
+  subCategory: 'Overlays',
+  related: [],
+};
+
+export default data;

packages/ui-extensions/src/surfaces/admin/components.d.ts

@@ -11,6 +11,7 @@
  * https://github.com/Shopify/ui-api-design/issues/139
  */
 export type ComponentChildren = any;
+export type StringChildren = string;
 export interface GlobalProps {
   /**
    * A unique identifier for the element.
@@ -1855,8 +1856,16 @@ interface ChipProps$1 extends ChipProps$1, GlobalProps {}
 interface ChoiceProps$1 extends GlobalProps, BaseOptionProps {
   /**
    * Content to use as the choice label.
+   *
+   * @implementation (StringChildren) The label is produced by extracting and
+   * concatenating the text nodes from the provided content; any markup or
+   * element structure is ignored.
+   *
+   * @implementation (ComponentChildren) Behaves as a slot: any elements passed
+   * are rendered as the label content (subject to surface constraints); there
+   * is no coercion to a string.
    */
-  children?: ComponentChildren;
+  children?: ComponentChildren | StringChildren;
   /**
    * Additional text to provide context or guidance for the input.
    *
@@ -3248,7 +3257,7 @@ interface TableBodyProps$1 extends GlobalProps {
 }
 interface TableCellProps$1 extends GlobalProps {
   /**
-   * The content of the table data.
+   * The content of the table cell.
    */
   children?: ComponentChildren;
 }
@@ -3275,6 +3284,16 @@ interface TableHeaderProps$1 extends GlobalProps {
    * @default 'labeled'
    */
   listSlot?: ListSlotType;
+  /**
+   * The format of the column. Will automatically apply styling and alignment to cell content based on the value.
+   *
+   * - `base`: The base format for columns.
+   * - `currency`: Formats the column as currency.
+   * - `numeric`: Formats the column as a number.
+   *
+   * @default 'base'
+   */
+  format?: 'base' | 'currency' | 'numeric';
 }
 interface TableHeaderRowProps$1 extends GlobalProps {
   /**
@@ -3287,6 +3306,17 @@ interface TableRowProps$1 extends GlobalProps {
    * The content of a TableRow, which should be `TableCell` components.
    */
   children?: ComponentChildren;
+  /**
+   * The ID of an interactive element (e.g. `s-link`) in the row that will be the target of the click when the row is clicked.
+   * This is the primary action for the row; it should not be used for secondary actions.
+   *
+   * This is a click-only affordance, and does not introduce any keyboard or screen reader affordances.
+   * Which is why the target element must be in the table; so that keyboard and screen reader users can interact with it normally.
+   *
+   * @implementation no focus or keyboard affordances are introduced by this property. No aria attributes need to be added to the table row.
+   * @implementation the row and/or delegate should have some affordance that indicates it is clickable. This may be a background color, a border, a hover effect, etc.
+   */
+  clickDelegate?: string;
 }
 interface TextProps$1
   extends GlobalProps,

packages/ui-extensions/src/surfaces/admin/components/Menu/Menu.doc.ts

@@ -0,0 +1,28 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+import sharedContent from '../../../../docs/shared/components/Menu';
+
+const data: ReferenceEntityTemplateSchema = {
+  ...sharedContent,
+  thumbnail: '/assets/templated-apis-screenshots/admin/components/menu.png',
+  isVisualComponent: true,
+  definitions: [
+    {
+      title: 'Properties',
+      description: '',
+      type: 'Menu',
+    },
+  ],
+  defaultExample: {
+    codeblock: {
+      title: 'Code',
+      tabs: [
+        {
+          code: './examples/default.html',
+          language: 'preview',
+        },
+      ],
+    },
+  },
+};
+
+export default data;

packages/ui-extensions/src/surfaces/admin/components/Menu/examples/default.html

@@ -0,0 +1,7 @@
+<s-button commandFor="customer-menu">Edit customer</s-button>
+
+<s-menu id="customer-menu" accessibilityLabel="Customer actions">
+  <s-button icon="merge">Merge customer</s-button>
+  <s-button icon="incoming">Request customer data</s-button>
+  <s-button icon="delete">Delete customer</s-button>
+</s-menu>