[fix]: add click event for close slot for drawer (#34479)

Author: eljefe223

change/@fluentui-web-components-a43a8034-1ec2-4583-853b-890ff7506ccd.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Adds click event to close slot of drawer",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/web-components/docs/web-components.api.md

@@ -2312,7 +2312,7 @@ export class Dialog extends FASTElement {
 // @public
 export class DialogBody extends FASTElement {
     // @internal
-    clickHandler(event: MouseEvent): boolean | void;
+    clickHandler(event: PointerEvent): boolean | void;
 }
 
 // @public
@@ -2433,6 +2433,8 @@ export class Drawer extends FASTElement {
 //
 // @public
 export class DrawerBody extends FASTElement {
+    // @internal
+    clickHandler(event: PointerEvent): boolean | void;
 }
 
 // @public (undocumented)

packages/web-components/src/dialog-body/dialog-body.ts

@@ -15,7 +15,7 @@ export class DialogBody extends FASTElement {
    * @param e - the click event
    * @internal
    */
-  public clickHandler(event: MouseEvent): boolean | void {
+  public clickHandler(event: PointerEvent): boolean | void {
     if (!event.defaultPrevented) {
       const dialog = this.parentElement;
 

packages/web-components/src/drawer-body/drawer-body.template.ts

@@ -9,7 +9,7 @@ export function drawerBodyTemplate<T extends DrawerBody>(): ElementViewTemplate<
   return html<T>`
     <div class="header" part="header">
       <slot name="title"></slot>
-      <slot name="close"></slot>
+      <slot name="close" @click="${(x, c) => x.clickHandler(c.event as PointerEvent)}"></slot>
     </div>
     <div class="content" part="content">
       <slot></slot>

packages/web-components/src/drawer-body/drawer-body.ts

@@ -1,4 +1,5 @@
 import { FASTElement } from '@microsoft/fast-element';
+import { isDialog } from '../dialog/dialog.options';
 
 /**
  * A DrawerBody component to layout drawer content
@@ -20,4 +21,22 @@ import { FASTElement } from '@microsoft/fast-element';
  *
  * @tag fluent-drawer-body
  */
-export class DrawerBody extends FASTElement {}
+export class DrawerBody extends FASTElement {
+  /**
+   * Handles click event for the close slot
+   *
+   * @param e - the click event
+   * @internal
+   */
+  public clickHandler(event: PointerEvent): boolean | void {
+    if (!event.defaultPrevented) {
+      const dialog = this.parentElement;
+
+      if (isDialog(dialog, '-drawer')) {
+        dialog.hide();
+      }
+    }
+
+    return true;
+  }
+}

packages/web-components/src/drawer/drawer.spec.ts

@@ -148,4 +148,29 @@ test.describe('Drawer', () => {
 
     await expect(wasDismissed).resolves.toBe(true);
   });
+
+  test('should close after a button is slotted into the close slot and clicked', async ({ fastPage, page }) => {
+    const { element } = fastPage;
+    const closeButton = element.locator('fluent-button[slot="close"]');
+    const content = element.locator('#content');
+
+    await fastPage.setTemplate(/* html */ `
+        <fluent-drawer>
+          <fluent-drawer-body>
+              <fluent-button slot="close">Close</fluent-button>
+              <div id="content">content</div>
+          </fluent-drawer-body>
+        </fluent-drawer>
+      `);
+
+    await element.evaluate((node: Drawer) => {
+      node.show();
+    });
+
+    await expect(content).toBeVisible();
+
+    await closeButton.click();
+
+    await expect(content).toBeHidden();
+  });
 });

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

@@ -47,13 +47,7 @@ const storyTemplate = html<StoryArgs<FluentDrawer>>`
   >
     <fluent-drawer-body>
       <h2 slot="title">Drawer Header</h2>
-      <fluent-button
-        slot="close"
-        appearance="transparent"
-        icon-only
-        aria-label="close"
-        @click="${() => hideDrawer('drawer-default')}"
-      >
+      <fluent-button slot="close" appearance="transparent" icon-only aria-label="close">
         ${dismissed20Regular}
       </fluent-button>
       <div>