@fluentui/react-drawer Spec

Background

A Drawer's main function is to contain supplementary content and are used for complex creation, edit, or management experiences. For example, viewing details about an item in a list or editing settings. It is also useful to host navigational elements that can be visible at all times.

The Drawer don't have any content built in, but has mechanisms to display it in a structured way.

Prior Art

• Convergence Epic

Fabric (v8)

The Panel component on v8's version is very similar to what Drawer component is structured. It has an opinionated way to provide content, like header text and a close button.

<Panel headerText="Sample panel" isOpen={isOpen} onDismiss={dismissPanel} closeButtonAriaLabel="Close">
  <p>Content goes here.</p>
</Panel>

Northstar (v0)

There is not prior implementation for this component in v0

3rd party Design Systems

• Chakra UI
• Material Design
  • Official implementation
  • Material UI
• Radix UI
  • Sheet component
• React Suite
• Ant Design

Sample Code

<Drawer open={open} onOpenChange={(_, { open }) => setOpen(open)}>
  <p>Content goes here.</p>
</Drawer>

Variants

Type

OverlayDrawer: Opens on top of everything like a dialog and blocks all the page content. Can be dismissed.

InlineDrawer: Push the siblings content when open and it is non-blocking. Can be hidden to bring focus to the main content of the page.

Size

• small (default): 320px
• medium: 592px
• large: 940px
• full: 100vw

For any custom size, a style can be provided overriding the width of drawer. Drawer can never be extended beyond screen limits and in case the size is larger than the screen size, it'll act as a full Drawer.

Modal

By default, the OverlayDrawer acts as a modal, rendering an overlay scrim behind the drawer surface. This can be toggled off.

API

Drawer

This component is a combination of both InlineDrawer and OverlayDrawer

OverlayDrawer

InlineDrawer

DrawerHeader

DrawerHeaderNavigation

• DrawerHeaderNavigation types

DrawerHeaderTitle

• DrawerHeaderTitle types

DrawerBody

No props

• DrawerBody types

DrawerFooter

No props

• DrawerFooter types

Structure

Components

Drawer component

• OverlayDrawer or Drawer with type="overlay":

<div class="fui-OverlayDrawer" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="the-title-element-id">
  <!-- Content rendered here -->
</div>

• InlineDrawer or Drawer with type="inline":

<div class="fui-InlineDrawer" tabindex="-1" aria-labelledby="the-title-element-id">
  <!-- Content rendered here -->
</div>

DrawerHeader component

<header class="fui-DrawerHeader" tabindex="-1" aria-labelledby="the-title-element-id">
  <!-- The title content is free, but ideally this should be a heading element -->
  <div class="fui-DrawerHeader__title" id="the-title-element-id">Title goes here</div>

  <div class="fui-DrawerHeader__actions">
    <button type="button" aria-label="Close drawer panel">
      <!-- Close button content -->
    </button>
  <div>
</header>

<header tabindex="-1" aria-labelledby="the-title-element-id">
  <nav class="fui-DrawerHeader__navigation">
    <button type="button" aria-label="Return back to content">
      <!-- Back button content -->
    </button>

    <button type="button" aria-label="Refresh content">
      <!-- Refresh button content -->
    </button>

    <button type="button" aria-label="Open settings">
      <!-- Settings button content -->
    </button>

    <button type="button" aria-label="Close drawer panel">
      <!-- Close button content -->
    </button>
  </nav>

  <!-- The title content is free, but ideally this should be a heading element -->
  <div class="fui-DrawerHeader__title" id="the-title-element-id">Title goes here</div>
</header>

DrawerBody component

<div class="fui-DrawerBody">
  <!-- Content rendered here -->
</div>

DrawerFooter component

<footer class="fui-DrawerFooter">
  <button type="button">Primary</button>
  <button type="button">Secondary</button>
</footer>

Behaviors

Drawer

A drawer can be triggered by any button on the screen. When invoked, it slides in from either the start or end sides of the screen. How they behave depends from its type:

overlay

The drawer overlays on top of the main surface. In case the overlay is a modal (by default), it renders an overlay scrim that blocks the whole screen. All the mouse, touch, keyboard and screen readers behaviors will follow the same specs as the Dialog component.

inline

The drawer pushes content on the main surface to the side to fit. It renders as a div element wherever its placed in the DOM order.

Accessibility

Drawer uses the Dialog under the hood and all accessibility implementation, concerns and recommendations are described in the Dialog component spec.