dialogs

Drawer

A side content overlaid on either the primary window

Features

Keyboard accessible
Focus is automatically trapped when modal
Manages screen reader announcements with Title
Themes ready

Links

Open in playground Open in Storybook View source

Anatomy

import { Drawer, OverlayContainer } from "@wonderflow/react-components";

export default () => {
  const [visible, setVisible] = useState<boolean>(false);

  return (
    <OverlayContainer onClose={() => setVisible(false)}>
      {visible && <Drawer title="Drawer title">....</Drawer>}
    </OverlayContainer>
  );
};

tsx

Context and non-modal drawers

You can pass any content to the drawer. If you have a custom react component and you want to close the Drawer from inside, you can get the onClose callback from OverlayContext.

In the following example we're going to use a custom component as Drawer's content, that will close the drawer when the user clicks on the button. We're also creating a non-modal drawer, which allows interactions with the rest of the page (the closeOnClickOutside property is ignored when isModal is false)

import {
  Drawer,
  OverlayContainer,
  useOverlayContext,
  Button,
  Text,
} from "@wonderflow/react-components";

export const CustomDrawerContent = () => {
  const { onClose, titleId } = useOverlayContext();

  return (
    <Stack hPadding={24} vPadding={24} rowGap={32}>
      <Text id={titleId} variant="heading-4">
        My custom drawer title
      </Text>
      <Button onClick={onClose} icon="xmark">
        Close drawer
      </Button>
    </Stack>
  );
};

export const PageExample = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button onClick={() => setVisible(true)}>Show drawer</Button>
      <OverlayContainer obfuscate={false} onClose={() => setVisible(false)}>
        {visible && (
          <Drawer isModal={false}>
            <CustomDrawerContent />
          </Drawer>
        )}
      </OverlayContainer>
    </>
  );
};

tsx

API Reference

PROPERTY

TYPE

DEFAULT

closeOnClickOutside

boolean

true

title

ReactNode

showHeader

boolean

true

maxWidth

string

"400px"

theme

enum

"light"

side

enum

"right"

isModal

boolean

true

Accessibility

Adheres to the dialog role requirements whe the property isModal is true.

Keyboard interactions

Name	Description
`tab`	Moves focus to the next focusable element inside the drawer
`shif + tab`	Moves focus to the previous focusable element inside the drawer
`esc`	Close the drawer and move the focus on the trigger element