Add PressButton and ScrollBox component documentation

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.38.0 **/
+/** VERSION: 1.42.0 **/
 
 /* eslint-disable @typescript-eslint/ban-types */
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -6880,6 +6880,10 @@ export interface ParagraphProps
     >
   > {
   color: Extract<ParagraphProps$1['color'], 'base' | 'subdued'>;
+  tone: Extract<
+    ParagraphProps$1['tone'],
+    'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'
+  >;
 }
 
 declare abstract class ParagraphBase
@@ -6889,26 +6893,22 @@ declare abstract class ParagraphBase
       ParagraphProps,
       | 'fontVariantNumeric'
       | 'lineClamp'
-      | 'tone'
       | 'color'
       | 'dir'
       | 'accessibilityVisibility'
     >
 {
   fontVariantNumeric: ParagraphProps['fontVariantNumeric'];
   lineClamp: ParagraphProps['lineClamp'];
-  tone: Extract<
-    ParagraphProps['tone'],
-    'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'
-  >;
-
+  abstract tone: string;
   color: ParagraphProps['color'];
   dir: ParagraphProps['dir'];
   accessibilityVisibility: ParagraphProps['accessibilityVisibility'];
   constructor(renderImpl: RenderImpl);
 }
 
 declare class Paragraph extends ParagraphBase implements ParagraphProps {
+  tone: ParagraphProps['tone'];
   constructor();
 }
 declare global {
@@ -7343,6 +7343,8 @@ declare abstract class SectionBase
   constructor(renderImpl: RenderImpl);
   /** @private */
   connectedCallback(): void;
+  /** @private */
+  disconnectedCallback(): void;
   accessibilityLabel: SectionProps['accessibilityLabel'];
   heading: SectionProps['heading'];
   padding: SectionProps['padding'];

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

@@ -0,0 +1,129 @@
+/** VERSION: 1.42.0 **/
+/* eslint-disable import/extensions */
+
+/* eslint-disable @typescript-eslint/no-namespace */
+/* eslint-disable @typescript-eslint/member-ordering */
+
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
+/// <reference lib="DOM" />
+import type {
+  ComponentChildren,
+  IconProps$1,
+  PressButtonProps$1,
+  IconType,
+  PreactCustomElement,
+  RenderImpl,
+} from './shared.d.ts';
+
+export type CallbackEvent<T extends keyof HTMLElementTagNameMap> = Event & {
+  currentTarget: HTMLElementTagNameMap[T];
+};
+export type CallbackEventListener<T extends keyof HTMLElementTagNameMap> =
+  | (EventListener & {
+      (event: CallbackEvent<T>): void;
+    })
+  | null;
+/** Used when an element does not have children. */
+export interface PreactBaseElementProps<TClass extends HTMLElement> {
+  /** Assigns a unique key to this element. */
+  key?: preact.Key;
+  /** Assigns a ref (generally from `useRef()`) to this element. */
+  ref?: preact.Ref<TClass>;
+  /** Assigns this element to a parent's slot. */
+  slot?: Lowercase<string>;
+}
+/** Used when an element has children. */
+export interface PreactBaseElementPropsWithChildren<TClass extends HTMLElement>
+  extends PreactBaseElementProps<TClass> {
+  children?: preact.ComponentChildren;
+}
+
+export interface IconProps
+  extends Required<
+    Pick<IconProps$1, 'type' | 'tone' | 'color' | 'size' | 'interestFor'>
+  > {
+  /**
+   * Specifies the type of icon that will be displayed.
+   */
+  type: '' | IconType | 'empty';
+  tone: Extract<
+    IconProps$1['tone'],
+    'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'
+  >;
+  color: Extract<IconProps$1['color'], 'base' | 'subdued'>;
+  size: Extract<IconProps$1['size'], 'small' | 'base'>;
+}
+
+export type PressButtonBaseProps = Required<
+  Pick<
+    PressButtonProps$1,
+    | 'accessibilityLabel'
+    | 'disabled'
+    | 'icon'
+    | 'inlineSize'
+    | 'lang'
+    | 'loading'
+    | 'tone'
+    | 'variant'
+    | 'pressed'
+    | 'defaultPressed'
+  >
+>;
+export interface PressButtonProps extends PressButtonBaseProps {
+  tone: Extract<PressButtonProps$1['tone'], 'neutral'>;
+  icon: IconProps['type'];
+  variant: Extract<PressButtonProps$1['variant'], 'secondary' | 'tertiary'>;
+}
+
+declare class PolarisCustomElement extends PreactCustomElement {
+  constructor(renderImpl: Omit<RenderImpl, 'globalShadowCSS'>);
+}
+
+declare class PressButton
+  extends PolarisCustomElement
+  implements PressButtonProps
+{
+  accessor disabled: PressButtonProps['disabled'];
+  accessor icon: PressButtonProps['icon'];
+  accessor loading: PressButtonProps['loading'];
+  accessor variant: PressButtonProps['variant'];
+  accessor tone: PressButtonProps['tone'];
+  accessor inlineSize: PressButtonProps['inlineSize'];
+  get pressed(): boolean;
+  set pressed(pressed: PressButtonProps['pressed']);
+  accessor defaultPressed: PressButtonProps['defaultPressed'];
+  accessor onclick: CallbackEventListener<typeof tagName> | null;
+  accessor onblur: CallbackEventListener<typeof tagName> | null;
+  accessor onfocus: CallbackEventListener<typeof tagName> | null;
+  accessor accessibilityLabel: PressButtonProps['accessibilityLabel'];
+  constructor();
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName]: PressButton;
+  }
+}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName]: PressButtonJSXProps &
+        PreactBaseElementPropsWithChildren<PressButton>;
+    }
+  }
+}
+
+declare const tagName = 's-press-button';
+export interface PressButtonJSXProps
+  extends Partial<PressButtonProps>,
+    Pick<PressButtonProps$1, 'children'> {
+  /**
+   * The content of the PressButton.
+   */
+  children?: ComponentChildren;
+  onClick?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+}
+
+export {PressButton};
+export type {PressButtonJSXProps};

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

@@ -0,0 +1,45 @@
+import {AdminReferenceEntityTemplateSchema} from '../../docs-types';
+import sharedContent from '../../../../docs/shared/components/PressButton';
+
+const data: AdminReferenceEntityTemplateSchema = {
+  ...sharedContent,
+  thumbnail:
+    '/assets/templated-apis-screenshots/admin/components/press-button.png',
+  isVisualComponent: true,
+  definitions: [
+    {
+      title: 'Properties',
+      description: '',
+      type: 'PressButton',
+    },
+    {
+      title: 'Events',
+      description:
+        'Learn more about [registering events](/docs/api/app-home/using-polaris-components#event-handling).',
+      type: 'PressButtonEvents',
+    },
+    {
+      title: 'Slots',
+      description: '',
+      type: 'PressButtonSlots',
+    },
+  ],
+  defaultExample: {
+    codeblock: {
+      title: 'Code',
+      tabs: [
+        {
+          code: './examples/default.html',
+          language: 'preview',
+          layout: 'inline',
+        },
+      ],
+    },
+  },
+  examples: {
+    description: 'Component examples',
+    exampleGroups: [],
+  },
+};
+
+export default data;

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

@@ -0,0 +1,4 @@
+<s-stack direction="inline" gap="base">
+  <s-press-button>Toggle</s-press-button>
+  <s-press-button pressed>Pressed</s-press-button>
+</s-stack>

packages/ui-extensions/src/surfaces/admin/components/PressButton/examples/default.jsx

@@ -0,0 +1,4 @@
+<s-stack direction="inline" gap="base">
+  <s-press-button>Toggle</s-press-button>
+  <s-press-button pressed>Pressed</s-press-button>
+</s-stack>