feat(web-components): add support for popovertarget and popovertargetaction to button

change/@fluentui-web-components-c80213f4-0da2-4267-bcf7-614b2aa6bc5f.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "add support for popovertarget and popovertargetaction in button web component",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/web-components/src/button/button.stories.ts

@@ -220,3 +220,10 @@ export const ResetAndSubmitButtonsInForm: Story<FluentButton> = renderComponent(
   <div id="something">Div Label</div>
   <output id="output"></output>
 `);
+
+export const Popover: Story<FluentButton> = renderComponent(html<StoryArgs<FluentButton>>`
+  <fluent-button popovertarget="foo" popovertargetaction="show">Show Popover</fluent-button>
+  <fluent-button popovertarget="foo" popovertargetaction="hide">Hide Popover</fluent-button>
+  <fluent-button popovertarget="foo" popovertargetaction="toggle">Toggle Popover</fluent-button>
+  <div id="foo" popover>This is a popover</div>
+`);

packages/web-components/src/button/button.ts

@@ -18,6 +18,13 @@ import { ButtonType } from './button.options.js';
  * @public
  */
 export class BaseButton extends FASTElement {
+  private popoverOpen?: boolean = false;
+
+  /**
+   * Holds an element reference for the popovertarget
+   */
+  private popoverTargetElement: HTMLElement | null | undefined;
+
   /**
    * Indicates the button should be focused when the page is loaded.
    * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#autofocus | `autofocus`} attribute
@@ -29,6 +36,28 @@ export class BaseButton extends FASTElement {
   @attr({ mode: 'boolean' })
   public autofocus!: boolean;
 
+  /**
+   * The ID for the popover which is controlled by the element
+   * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#popovertarget | `popovertarget`} attribute
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: `popovertarget`
+   */
+  @attr
+  public popovertarget?: string;
+
+  /**
+   * Specifies the action to be performed on a popover element being controlled by the element
+   * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#popovertargetaction | `popovertargetaction`} attribute
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: `popovertargetaction`
+   */
+  @attr
+  public popovertargetaction?: 'hide' | 'show' | 'toggle';
+
   /**
    * Default slotted content.
    *
@@ -68,6 +97,17 @@ export class BaseButton extends FASTElement {
   @attr({ attribute: 'tabindex', mode: 'fromView', converter: nullableNumberConverter })
   public override tabIndex: number = 0;
 
+  /**
+   * Handles changes to the popovertarget attribute
+   *
+   * @param previous - the previous popovertarget value
+   * @param next - the current popovertarget value
+   * @internal
+   */
+  public popoverTargetChanged(previous: string | undefined, next: string | undefined): void {
+    this.setPopoverTargetElement(next);
+  }
+
   /**
    * Sets the element's internal disabled state when the element is focusable while disabled.
    *
@@ -254,20 +294,64 @@ export class BaseButton extends FASTElement {
       return;
     }
 
+    if (this.popoverTargetElement && !!this.popoverTargetElement.hasAttribute('popover')) {
+      switch (this.popovertargetaction) {
+        case 'hide':
+          // @ts-expect-error - Baseline 2024
+          this.popoverTargetElement?.hidePopover();
+          break;
+        case 'show':
+          // @ts-expect-error - Baseline 2024
+          this.popoverTargetElement?.showPopover();
+          break;
+        case 'toggle':
+        default:
+          // @ts-expect-error - Baseline 2024
+          this.popoverTargetElement?.togglePopover(!this.popoverOpen);
+          break;
+      }
+    }
+
     this.press();
     return true;
   }
 
-  connectedCallback(): void {
+  public connectedCallback(): void {
     super.connectedCallback();
     this.elementInternals.ariaDisabled = `${!!this.disabledFocusable}`;
+
+    if (this.popovertarget) {
+      this.setPopoverTargetElement(this.popovertarget);
+    }
+  }
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+
+    if (this.popoverTargetElement) {
+      this.popoverTargetElement.removeEventListener('toggle', this.handlePopover);
+    }
   }
 
   constructor() {
     super();
     this.elementInternals.role = 'button';
   }
 
+  /**
+   * Sets up handling for the popover target element
+   * @param element - The element to reference
+   */
+  private setPopoverTargetElement(element: string | undefined) {
+    this.popoverTargetElement = element ? document.getElementById(element) : undefined;
+
+    this.popoverTargetElement?.addEventListener('toggle', this.handlePopover);
+  }
+
+  private handlePopover = (e: Event) => {
+    this.popoverOpen = (e as Event & { newState: 'open' | 'closed'; oldState: 'open' | 'closed' }).newState === 'open';
+  };
+
   /**
    * This fallback creates a new slot, then creates a submit button to mirror the custom element's
    * properties. The submit button is then appended to the slot and the form is submitted.