Skip to content

Drawer.mdx

Latest commit

 

History

History
94 lines (57 loc) · 2.4 KB

Drawer.mdx

File metadata and controls

94 lines (57 loc) · 2.4 KB
Raw

import { Meta, Canvas, ArgTypes } from '@storybook/addon-docs/blocks'; import { Drawer } from '@strapi/design-system'; import * as Dialog from '@radix-ui/react-dialog';

import * as DrawerStories from './Drawer.stories';

Drawer

Overview

A dismissible drawer that slides in from an edge of the viewport. Built on Radix UI Dialog for accessibility and keyboard/outside-click dismissal.

Usage

import { Drawer } from '@strapi/design-system';

Props

Root

Shares Radix Dialog Root component parameters (with an additional headerVisible): <ArgTypes of={Drawer.Root & Dialog.Root} />

Trigger

Shares Radix Dialog Trigger component parameters.

The Trigger component uses asChild — it renders the child and merges drawer open/close behaviour onto it.

Content

Also forwards Radix Dialog Content props (`onOpenAutoFocus`, `onCloseAutoFocus`, `onEscapeKeyDown`, `onPointerDownOutside`, `onInteractOutside`, etc.).

Close

Shares Radix Dialog Close component parameters. Uses asChild — wrap a button (or other focusable element) to close the drawer on activation.

Example:

import { Drawer } from '@strapi/design-system';

<Drawer.Close>
    <button>Cancel</button>
</Drawer.Close>

Header

Title

Use for the drawer heading. Renders as h2 for accessibility.

Body

Optional. Scrollable content area of the drawer (hidden by default when defaultOpen on Drawer.Content is false).

Footer

Optional. Flex container for custom actions.

Positions

The drawer can be positioned on any edge via the side prop.

Header visible

With headerVisible on Root, when open is false only the header is visible and the overlay is hidden. A toggle button in the header opens and closes the drawer.

Accessibility

Uses Radix UI Dialog, which implements the Dialog WAI-ARIA pattern. The drawer is dismissible via:

  • Escape key
  • Click outside (on the overlay)
  • Close button in the header (when using Drawer.Header)