Add ButtonGroup component to customer account

.changeset/friendly-walls-pull.md

@@ -0,0 +1,5 @@
+---
+'@shopify/ui-extensions': minor
+---
+
+Add ButtonGroup component to customer account

packages/ui-extensions/src/surfaces/customer-account/components.d.ts

@@ -5,6 +5,11 @@ import {
   AvatarElement,
   AvatarEvents,
 } from './components/Avatar';
+import {
+  ButtonGroupProps,
+  ButtonGroupElement,
+  ButtonGroupElementSlots,
+} from './components/ButtonGroup';
 import {
   CustomerAccountActionProps,
   CustomerAccountActionElement,
@@ -123,3 +128,26 @@ declare module 'preact' {
     }
   }
 }
+
+export type ButtonGroupPropsDocs = ButtonGroupProps;
+export type ButtonGroupElementDocs = ButtonGroupElement;
+export type ButtonGroupElementSlotsDocs = ButtonGroupElementSlots;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    ['s-button-group']: ButtonGroupElement;
+  }
+}
+
+declare module 'preact' {
+  interface BaseProps {
+    children?: preact.ComponentChildren;
+    slot?: Lowercase<string>;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      ['s-button-group']: BaseProps & ButtonGroupProps;
+    }
+  }
+}

packages/ui-extensions/src/surfaces/customer-account/components/ButtonGroup.d.ts

@@ -0,0 +1,39 @@
+import {BaseElementPropsWithChildren, IdProps} from './shared';
+
+export interface ButtonGroupProps extends IdProps {
+  /**
+   * Label for the button group that describes the content of the group for screen reader users to understand what's included.
+   */
+  accessibilityLabel?: string;
+}
+
+export interface ButtonGroupElementSlots {
+  /**
+   * The primary action to perform, provided as a button type element.
+   */
+  'primary-action'?: HTMLElement;
+  /**
+   * The secondary actions to perform, provided as button type elements.
+   */
+  'secondary-actions'?: HTMLElement;
+}
+
+export interface ButtonGroupElement
+  extends ButtonGroupProps,
+    Omit<HTMLElement, 'id'> {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    ['s-button-group']: ButtonGroupElement;
+  }
+}
+
+declare module 'preact' {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      ['s-button-group']: BaseElementPropsWithChildren<ButtonGroupElement> &
+        ButtonGroupProps;
+    }
+  }
+}

packages/ui-extensions/src/surfaces/customer-account/components/ButtonGroup/ButtonGroup.doc.ts

@@ -0,0 +1,42 @@
+import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  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.',
+  thumbnail: 'buttongroup-thumbnail.png',
+  requires: '',
+  isVisualComponent: true,
+  type: '',
+  definitions: [
+    {
+      title: 'Properties',
+      description: '',
+      type: 'ButtonGroupPropsDocs',
+    },
+    {
+      title: 'Slots',
+      description: '',
+      type: 'ButtonGroupElementSlotsDocs',
+    },
+  ],
+  category: 'Polaris web components',
+  defaultExample: {
+    image: 'buttongroup-preview.png',
+    altText:
+      'An example of the ButtonGroup component shows a primary action and multiple collapsed secondary actions.',
+    codeblock: {
+      title: 'Basic ButtonGroup',
+      tabs: [
+        {
+          title: 'Preact',
+          code: './examples/basic-ButtonGroup-preact.example.tsx',
+          language: 'tsx',
+        },
+      ],
+    },
+  },
+  related: [],
+};
+
+export default data;

packages/ui-extensions/src/surfaces/customer-account/components/ButtonGroup/examples/basic-ButtonGroup-preact.example.tsx

@@ -0,0 +1,21 @@
+import {render} from 'preact';
+
+export default function extension() {
+  render(<App />, document.body);
+}
+
+function App() {
+  return (
+    <s-button-group accessibilityLabel="Order actions">
+      <s-button slot="primary-action" variant="primary">
+        Pay now
+      </s-button>
+      <s-button slot="secondary-actions" variant="secondary">
+        Edit order
+      </s-button>
+      <s-button slot="secondary-actions" variant="secondary">
+        Cancel order
+      </s-button>
+    </s-button-group>
+  );
+}

packages/ui-extensions/src/surfaces/customer-account/components/StandardComponents.ts

@@ -3,6 +3,7 @@ import {AnyComponent} from '../../checkout';
 export type StandardComponents =
   | AnyComponent
   | 'Avatar'
+  | 'ButtonGroup'
   | 'CustomerAccountAction'
   | 'ImageGroup'
   | 'Menu'