Skip to content
Telescope
Components

DrawerNew: New

A panel that slides out from the edge of the screen to focus a user's attention on completing a task or viewing details about an item.

Basic usage

First, import the component.

import {Drawer} from '@pleo-io/telescope'
Information:

It's important to give the Drawer.Trigger and the Drawer components a matching unique drawerId. This ensures focus is returned to trigger automatically when the drawer is closed.

Then use it like so:

API reference

Drawer

The wrapper for the drawer component. This should wrap the drawer trigger and the drawer content.

PropTypeDefault
drawerId*
string
isOpen*
boolean
onDismiss*
function

Drawer.Trigger

The component that opens and closes the drawer. You can pass any interactive element as a child here, and the Drawer.Trigger will ensure focus is returned to this element when the drawer is closed.

Information:

If you're using a custom component as a Drawer trigger, make sure it forwards the ref to the root element. This ref is used to refocus the trigger automatically when the drawer closes.

PropTypeDefault
children
enum
drawerId*
string

Drawer.Panel

The content of the drawer panel. You can compose the content by passing in the appropriate components as children.

PropTypeDefault
children
enum
className
string
onOpenFocusRef
RefObject<HTMLElement>

Drawer.ActionBar

Use this to render the drawer actions at the top of the drawer. This will render a close button by default - you can pass any additional actions as children, and they will be rendered on the right hand side.

Information:

All drawers must include a Drawer.ActionBar to provide users with the ability to close the drawer in an accessible way.

PropTypeDefault
children
enum
closeButtonAriaLabel*
string

Drawer.Header

Use this for the header of a drawer, rather than using a custom component, to apply correct styling and accessibility.

PropTypeDefault
children
enum

Drawer.HeaderImage

Use this to render an image in the header of a drawer. This could be an Avatar, but you can pass any image as children.

PropTypeDefault
children
enum

Drawer.Title

Use this to render the title and subtitle of a drawer. This will render the title in large text, and the subtitle as smaller text below.

Information:

The Drawer component will use the title prop as the aria-label, and the subtitle prop as the aria-describedby for the drawer. Please make sure that these are descriptive enough to provide context to screenreader users.

PropTypeDefault
subtitle
string
title*
string

Drawer.Body

Use this to wrap the main content of a drawer to apply correct spacing/styling, allows content to scroll within the drawer.

PropTypeDefault
children
enum

Drawer.Footer

Use this to wrap the footer content of a drawer to apply correct spacing/styling. This should only be used in Task drawers. Primary buttons should go on the right, and secondary buttons should go to the left.

Information:

This component should only contain Button components as children. Under the hood, it's just a styled wrapper for the ButtonGroup component.

Information:

If your task drawer has a form element around it, you should associate the submit button in the footer with the form by giving the form an id and passing this id to the button's form attribute.

PropTypeDefault
children
enum
On this page