Add drawer web component

change/@fluentui-web-components-f0a2f34a-306f-475b-b230-e24dd267cab0.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat(drawer): add drawer web component",
+  "packageName": "@fluentui/web-components",
+  "email": "email not defined",
+  "dependentChangeType": "patch"
+}

packages/web-components/package.json

@@ -78,6 +78,14 @@
       "types": "./dist/dts/divider/define.d.ts",
       "default": "./dist/esm/divider/define.js"
     },
+    "./drawer.js": {
+      "types": "./dist/dts/drawer/define.d.ts",
+      "default": "./dist/esm/drawer/define.js"
+    },
+    "./drawer-body.js": {
+      "types": "./dist/dts/drawer-body/define.d.ts",
+      "default": "./dist/esm/drawer-body/define.js"
+    },
     "./image.js": {
       "types": "./dist/dts/image/define.d.ts",
       "default": "./dist/esm/image/define.js"

packages/web-components/src/drawer-body/README.md

@@ -0,0 +1,49 @@
+# DrawerBody
+
+## Overview
+
+The `DrawerBody` component is a part of the Fluent UI library and is intended to be used with the `fluent-drawer` component. It provides consumers with a structured template for the drawer's content, including areas for a header, content, and footer.
+
+## Attributes
+
+This component does not have specific attributes beyond standard HTML attributes.
+
+## Methods
+
+The `DrawerBody` component does not define custom methods beyond those inherited from `FASTElement`.
+
+## Events
+
+The `DrawerBody` component does not emit custom events beyond those standard to HTML elements.
+
+### **Slots**
+
+| Name     | Description                           |
+| -------- | ------------------------------------- |
+| `title`  | The slot for title                    |
+| `close`  | The slot for the close button         |
+|          | The default slot for the main content |
+| `footer` | The slot for the footer               |
+
+## CSS Parts
+
+| Name      | Description                                    |
+| --------- | ---------------------------------------------- |
+| `header`  | Styles the header section of the drawer.       |
+| `content` | Styles the main content section of the drawer. |
+| `footer`  | Styles the footer section of the drawer.       |
+
+## Usage Examples
+
+### Basic Usage
+
+```html
+<fluent-drawer>
+  <fluent-drawer-body>
+    <div slot="title">Drawer Title</div>
+    <button slot="close">Close</button>
+    <div>Content goes here...</div>
+    <div slot="footer">Footer content</div>
+  </fluent-drawer-body>
+</fluent-drawer>
+```

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

@@ -0,0 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './drawer-body.definition.js';
+
+definition.define(FluentDesignSystem.registry);

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

@@ -0,0 +1,17 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { DrawerBody } from './drawer-body.js';
+import { styles } from './drawer-body.styles.js';
+import { template } from './drawer-body.template.js';
+
+/**
+ *
+ * @public
+ * @remarks
+ * HTML Element: <fluent-drawer>
+ */
+
+export const definition = DrawerBody.compose({
+  name: `${FluentDesignSystem.prefix}-drawer-body`,
+  template,
+  styles,
+});

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

@@ -0,0 +1,31 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '../utils/index.js';
+import { spacingHorizontalM, spacingHorizontalXL } from '../theme/design-tokens.js';
+import { typographySubtitle1Styles } from '../styles/partials/typography.partials.js';
+
+/** Drawer styles
+ * @public
+ */
+export const styles = css`
+  ${display('grid')}
+  :host {
+    box-sizing: border-box;
+    grid-template-rows: min-content auto min-content;
+    position: relative;
+    height: 100%;
+    padding: ${spacingHorizontalXL};
+    max-height: 100svh;
+  }
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    ${typographySubtitle1Styles}
+  }
+
+  .footer {
+    display: flex;
+    justify-content: flex-start;
+    gap: ${spacingHorizontalM};
+  }
+`;

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

@@ -0,0 +1,23 @@
+import { ElementViewTemplate, html } from '@microsoft/fast-element';
+import type { DrawerBody } from './drawer-body.js';
+
+/**
+ * The template for the Drawer component.
+ * @public
+ */
+export function drawerBodyTemplate<T extends DrawerBody>(): ElementViewTemplate<T> {
+  return html<T>`
+    <div class="header" part="header">
+      <slot name="title"></slot>
+      <slot name="close"></slot>
+    </div>
+    <div class="content" part="content">
+      <slot></slot>
+    </div>
+    <div class="footer" part="footer">
+      <slot name="footer"></slot>
+    </div>
+  `;
+}
+
+export const template: ElementViewTemplate<DrawerBody> = drawerBodyTemplate();

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

@@ -0,0 +1,3 @@
+import { FASTElement } from '@microsoft/fast-element';
+
+export class DrawerBody extends FASTElement {}

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

@@ -0,0 +1,4 @@
+export * from './drawer-body.js';
+export { definition as DrawerBodyDefinition } from './drawer-body.definition.js';
+export { styles as DrawerBodyStyles } from './drawer-body.styles.js';
+export { template as DrawerBodyTemplate } from './drawer-body.template.js';

packages/web-components/src/drawer/README.md

@@ -0,0 +1,111 @@
+# Drawer
+
+The `Drawer` component represents a drawer that can be opened and closed, typically used for navigation or additional content.
+
+## Design Spec
+
+Link to Drawer Design Spec in Figma: [Link](<https://www.figma.com/file/V2sDk36xZfp8tFhb53DfsT/Drawer-(Overlay-%26-Inline)?type=design&viewport=2606%2C1404%2C0.23&t=iNWjZIpDljA1EshA-0>)
+
+## Engineering Spec
+
+The Fluent WC3 Drawer extends `FASTElement`
+
+### Class `Drawer`
+
+### Template
+
+```ts
+export function drawerTemplate<T extends Drawer>(): ElementViewTemplate<T> {
+  return html<T>`
+    <dialog
+      class="dialog"
+      part="dialog"
+      role="${x => (x.type === 'modal' ? 'dialog' : void 0)}"
+      aria-modal="${x => (x.type === 'modal' ? 'true' : void 0)}"
+      aria-describedby="${x => x.ariaDescribedby}"
+      aria-labelledby="${x => x.ariaLabelledby}"
+      aria-label="${x => x.ariaLabel}"
+      size="${x => x.size}"
+      position="${x => x.position}"
+      type="${x => x.type}"
+      @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
+      @cancel="${(x, c) => x.hide()}"
+      ${ref('dialog')}
+    >
+      <slot></slot>
+    </dialog>
+  `;
+}
+```
+
+### **Variables**
+
+| Name             | Type                            | Description            |
+| ---------------- | ------------------------------- | ---------------------- |
+| `DrawerPosition` | `start` `end`                   | Positions for Drawer   |
+| `DrawerSize`     | `small` `medium` `large` `full` | Sizes for Drawer       |
+| `DrawerType`     | `modal` `non-modal` `inline`    | Modal types for Drawer |
+
+### **Attributes**
+
+| Name              | Privacy | Type           | Description                                                                               |
+| ----------------- | ------- | -------------- | ----------------------------------------------------------------------------------------- |
+| `type`            | public  | DrawerType     | Determines whether the drawer should be displayed as a modal, non-modal or inline drawer. |
+| `position`        | public  | DrawerPosition | Sets the position of the drawer (start/end).                                              |
+| `size`            | public  | DrawerSize     | Sets the size of the drawer (small/medium/large).                                         |
+| `ariaDescribedby` | public  | string         | The ID of the element that describes the drawer.                                          |
+| `ariaLabelledby`  | public  | string         | The ID of the element that labels the drawer.                                             |
+
+### **Events**
+
+| Name           | Type          | Description                                  |
+| -------------- | ------------- | -------------------------------------------- |
+| `toggle`       | `CustomEvent` | Fires after the dialog's open state changes  |
+| `beforetoggle` | `CustomEvent` | Fires before the dialog's open state changes |
+
+### **Methods**
+
+| Name               | Privacy | Description                                                     |
+| ------------------ | ------- | --------------------------------------------------------------- |
+| `show`             | public  | Shows the drawer.                                               |
+| `hide`             | public  | Hides the drawer.                                               |
+| `emitToggle`       | public  | Method to emit an event after the dialog's open state changes.  |
+| `emitBeforeToggle` | public  | Method to emit an event before the dialog's open state changes. |
+| `clickHandler`     | public  | Handles click events on the drawer.                             |
+| `keydownHandler`   | public  | Handles keydown events on the drawer.                           |
+
+### **Slots**
+
+| Name | Description                           |
+| ---- | ------------------------------------- |
+|      | The default slot for the main content |
+
+### **CSS Variables**
+
+| Name             | Description                         |
+| ---------------- | ----------------------------------- |
+| `--drawer-width` | Used to set the width of the drawer |
+
+## **Accessiblity**
+
+### **WAI-ARIA Roles, States, and Properties**
+
+| Name               | Privacy | Type                | Description                                                                  |
+| ------------------ | ------- | ------------------- | ---------------------------------------------------------------------------- |
+| `role`             | public  | string              | Sets the role of the dialog element to dialog when modal dialog is rendered. |
+| `aria-modal`       | public  | string or undefined | Indicates if the drawer is modal.                                            |
+| `aria-describedby` | public  | string              | The ID of the element that describes the drawer.                             |
+| `aria-labelledby`  | public  | string              | The ID of the element that labels the drawer.                                |
+| `aria-label`       | public  | string              | Provides an accessible name for the drawer when aria-labelledby is not used. |
+
+### **Fluent Web Component v3 v.s Fluent React 9**
+
+<br />
+
+**Component and Slot Mapping**
+
+| Fluent UI React 9 | Fluent Web Components 3 |
+| ----------------- | ----------------------- |
+| `<DrawerOverlay>` | `type="modal"`          |
+| `<DrawerInline>`  | `type="inline"`         |
+| `<DrawerBody> `   | `<drawer-body>`         |

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

@@ -0,0 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './drawer.definition.js';
+
+definition.define(FluentDesignSystem.registry);

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

@@ -0,0 +1,17 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { Drawer } from './drawer.js';
+import { styles } from './drawer.styles.js';
+import { template } from './drawer.template.js';
+
+/**
+ *
+ * @public
+ * @remarks
+ * HTML Element: <fluent-drawer>
+ */
+
+export const definition = Drawer.compose({
+  name: `${FluentDesignSystem.prefix}-drawer`,
+  template,
+  styles,
+});

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

@@ -0,0 +1,46 @@
+import type { ValuesOf } from '../utils/index.js';
+
+/**
+ * A drawer can be positioned on the left or right side of the viewport.
+ */
+export const DrawerPosition = {
+  start: 'start',
+  end: 'end',
+} as const;
+
+/**
+ * The position of the drawer.
+ * @public
+ */
+export type DrawerPosition = ValuesOf<typeof DrawerPosition>;
+
+/**
+ * A drawer can be different sizes
+ */
+export const DrawerSize = {
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+  full: 'full',
+} as const;
+
+/**
+ * The size of the drawer.
+ * @public
+ */
+export type DrawerSize = ValuesOf<typeof DrawerSize>;
+
+/**
+ * A drawer can be different sizes
+ */
+export const DrawerType = {
+  nonModal: 'non-modal',
+  modal: 'modal',
+  inline: 'inline',
+} as const;
+
+/**
+ * The size of the drawer.
+ * @public
+ */
+export type DrawerType = ValuesOf<typeof DrawerType>;