Drawer Web Component

[brianchristopherbrady]

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

Engineering Spec

The Fluent WC3 Drawer extends FASTElement

Class Drawer

Template

<dialog
      class="dialog"
      part="dialog"
      role="${x => (x.modalType === DrawerModalType.alert ? 'alertdialog' : void 0)}"
      aria-modal="${x => (x.modalType === 'non-modal' || x.type === 'inline' ? void 0 : 'true')}"
      aria-describedby="${x => x.ariaDescribedby}"
      aria-labelledby="${x => x.ariaLabelledby}"
      aria-label="${x => x.ariaLabel}"
      size="${x => x.size}"
      position="${x => x.position}"
      modal-type="${x => x.modalType}"
      type="${x => x.type}"
      @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
      @keydown="${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}"
      ${ref('dialog')}
    >
      <div class="drawer" part="drawer">
        <div class="header" part="header">
          <nav class="navigation">
            <slot name="navigation"></slot>
          </nav>
          <div class="title" part="title">
            <slot name="title"></slot>
            <slot name="action"></slot>
          </div>
        </div>
        <div class="content" part="content" ${ref('content')}>
          <slot></slot>
        </div>
        <div class="footer" part="footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </dialog>;

Variables

Name	Type	Description
DrawerPosition	start end	Positions for Drawer
DrawerSize	small medium large full	Sizes for Drawer
DrawerModalType	modal non-modal alert	Modal types for Drawer
DrawerType	overlay inline	Types for Drawer

Attributes

Name	Type	Default	Description
modal-type	modal non-modal alert	modal	Determines whether the drawer should be displayed as modal, non-modal, or alert.
type	overlay inline	false	Determines whether the drawer should be displayed inline or as an overlay
position	DrawerPosition | undefined	start	Sets the position of the drawer (left/right).
size	DrawerSize | number | undefined	DrawerSize.medium	Sets the control size of the drawer.
open	boolean	false	Sets the drawer to be open.
aria-labelledby	string | undefined	undefined	Sets the aria-labelledby attribute of the drawer.
aria-describedby	string | undefined	undefined	Sets the aria-describedby attribute of the drawer.
aria-label	string | undefined	undefined	Sets the aria-label attribute of the drawer.

Events

Name	Type	Description
onOpenChange	CustomEvent	Fires when the drawer is opened or closed.
cancel	CustomEvent	Fires when the drawer is dismissed.

Methods

Name	Privacy	Description
show	public	Shows the drawer.
close	public	Hides the drawer.

Slots

Name	Description
title	The slot for title
action	The slot for the action content
	The default slot for the main content
footer	The slot for the footer

CSS Variables

Name	Description
--drawer-overflow-border	Used to set the overflow border color
--drawer-width	Used to set the width of the drawer
--drawer-separator	Used to set the border color between drawer and content

Accessiblity

WAI-ARIA Roles, States, and Properties

• role="complementary"

  • The drawer component should have a role of "complementary" by default to indicate its supplementary content role.

• role="dialog"

  • The drawer component should have a role of "dialog" when rendered as a modal.

• aria-disabled

  • The aria-disabled attribute should be set to indicate whether the drawer is disabled or enabled. When the drawer is disabled, aria-disabled="true", and when enabled, aria-disabled="false".

• tabindex

  • The tabindex attribute should be set to control the tab order of the drawer component. When the drawer is open, tabindex="0" should be set to make the component focusable, and when closed, tabindex="-1" should be set to remove it from the tab order.

• aria-modal

  • The aria-modal attribute should be set to indicate whether the drawer is modal or non-modal. When the drawer is modal, aria-modal="true", and when it is non-modal, aria-modal="false".

• aria-hidden

  • The aria-hidden attribute should be set to indicate whether the drawer is hidden or visible. When the drawer is hidden, aria-hidden="true", and when visible, aria-hidden="false".

• aria-label

  • The aria-label attribute should be used to label the drawer.

• aria-describedby

  • The aria-describedby attribute should be used to associate the drawer with an element that provides a description of its purpose or content.

• aria-labelledby

  • The aria-labelledby attribute should be used to associate the drawer with an element that serves as its accessible label or title.

Fluent Web Component v3 v.s Fluent React 9

Component and Slot Mapping

Fluent UI React 9	Fluent Web Components 3
<DrawerOverlay>	type="overlay"
<DrawerInline>	type="inline"
<DrawerHeaderTitle>	slot="title"
<DrawerHeaderTitle action="">	slot="action"
<DrawerBody>	default slot
<DrawerHeaderNavigation>	slot="navigation"
<DrawerFooter>	slot="footer"

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against 12da47698c9121c0345c2f0db481cbae7a91b66e}

[size-auditor[bot]]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 12da47698c9121c0345c2f0db481cbae7a91b66e (build)

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[jpaims]

Design Review

#	Issue	Category
1	Something is off with the slide-in-out animations, they might be reversed. The drawer should decelerate upon opening, slowing down into position rather than starting slow and speeding up. The opposite should happen upon closing (start slow, accelerate out)	Motion
2	The background overlay should dissolve in and out, adjusting opacity with the slide animation timing	Motion
3	Missing the Full width sizing?	Sizing

Q: Do we support Inline drawer or only Overlay right now? I see the Push content example but it doesn't seem to follow the inline style (no shadow) and does not push the example content. I think we need a prop between 'inline' and 'overlay' drawer types

Q: Is there a prop for determining whether you can light-dismiss the Drawer by clicking outside of the drawer or not (see Alert type Drawer)?

[fabricteam]

🕵 fluentui-web-components-v3 No visual regressions between this PR and main

[chrisdholt]

*not stale

[brianchristopherbrady]

This may have been added after you initially opened this PR, and if so, apologies. But we should add a defaultOpen attribute to this and set it to false to mimic the options in the Fluent React drawer.

I also had a question about the separator implementation. Why did we decide to add a style="--drawer-separator: var(--colorNeutralStroke2);" to this vs. a boolean separator attribute as Fluent React did?

Everything else looks good to me, though. Let's wait to merge this until we chat with @chrisdholt tomorrow, 12/6/23.

1. The Drawer is built off of the native HTML dialog element. To maintain alignment with the native dialog API I opted to provide an open attribute that when present on the drawer will synchronize its state with the internal dialog element so the drawer can be opened by default on render.

<fluent-drawer open></fluent-drawer>

2. I've removed the separator functionality completely opting for less prescriptive template internals.

[JustSlone]

@brianchristopherbrady closing as that is the only way to stop notifying reviewers. Please update your PR to point to master following this guide: https://github.com/microsoft/fluentui/pull/31361 and reopen when it's updated. Thanks!