Drawer

Drawers are used to display context-sensitive actions and inform or shift focus without losing the user’s current state.

Overview

Resources

Install

yarn add @activecampaign/camp-components-drawer

Header props

Select the “Header” tab above the props table to view the prop definitions that are specific to Drawer.Header.

Setting tabIndex for interactive elements

In the implementation above, you will notice that all the interactive elements within the Drawer have a tabIndex that is conditionally updated based on the value of isOpen.

If your Drawer includes similar interactive elements, be sure to set their tabIndex to -1 when the drawer is closed and 0 when the Drawer is open.

Complete code example

For a smaller snippet of the basic composition code, see Composition below.

import React, { useMemo, useState } from 'react';
import * as Drawer from '../src';
import Styled from '@activecampaign/camp-components-styled';
import Button from '@activecampaign/camp-components-button';
import Text from '@activecampaign/camp-components-text';
 
export default {
  title: 'Components/Drawer',
  tags: ['autodocs'],
  component: Drawer.Root,
  subcomponents: {
    Header: Drawer.Header,
    Body: Drawer.Body,
    Footer: Drawer.Footer,
  },
  parameters: {
    layout: 'fullscreen',
  },
};
 
export const Demo = () => {
  function handleClose() {
    console.log('handle close');
    setIsOpen(false);
  }
 
  const [isOpen, setIsOpen] = useState < boolean > false;
 
  // Should we move all this into a hook and/or provider pattern?
  const tabIndex = useMemo(() => {
    return isOpen ? 0 : -1;
  }, [isOpen]);
 
  return (
    // Wrapper
    <Styled styles={{ padding: '2rem' }}>
      <Button
        onClick={() => {
          setIsOpen((x) => !x);
        }}
      >
        Open Drawer (Before)
      </Button>
      {/* Demo */}
      <Drawer.Root isOpen={isOpen}>
        {/* <Drawer.Header onClose={handleClose} title="This is a long title, but it doesn't wrap" /> */}
        <Drawer.Header
          isOpen={isOpen}
          onClose={handleClose}
          title="This is a long title, and boy you better believe that it's gonna wrap. It's SOOO long. Like, really. It's crazy. "
        />
        <Drawer.Body>
          <Text.Body>
            {`I'm baby photo booth keffiyeh kombucha shabby chic, ascot beard jean shorts cred master
            cleanse retro. Paleo fixie Brooklyn, waistcoat shoreditch raclette roof party vice
            mlkshk solarpunk man bun. Small batch health goth wayfarers af slow-carb solarpunk
            godard tbh kinfolk schlitz fanny pack ethical affogato vinyl enamel pin.`}
          </Text.Body>
        </Drawer.Body>
        <Drawer.Footer>
          <Button.Outline tabIndex={tabIndex}>Cancel</Button.Outline>
          <Button.Fill tabIndex={tabIndex}>Next</Button.Fill>
        </Drawer.Footer>
      </Drawer.Root>
 
      <br />
      <Button.Outline
        mt={'8px'}
        onClick={() => {
          setIsOpen((x) => !x);
        }}
      >
        Close Drawer (After)
      </Button.Outline>
    </Styled>
  );
};

Variations

Composition

In most cases, you will need to include each of the inner elements (header, body, and footer) within Drawer.Root. There are some designs where the footer is not required and it can simply be left out.

A smaller code example with only the necessary composition structure and required props:

<Drawer.Root>
  <Drawer.Header
    title="Your header content here"
    onClose={() => close()} // This gets passed to the close button in the header
  />
  <Drawer.Body>Your body content here</Drawer.Body>
  <Drawer.Footer>Your footer content here</Drawer.Footer>
</Drawer.Root>

Usage

Best practices

• The drawer is a supplementary container for contextual actions and information, such as clicking on a table row and seeing additional data fly out in a drawer. Unlike a modal, the drawer is a more passive way of displaying information that doesn’t disrupt the user’s workflow or fully block the rest of the information on the page.
• For use cases like confirmations, condtioncal changes, and important warnings, a modal should be used instead.
• The drawer can be considered an extension of the current page, and it can do all of the same things such as trigger a modal and navigate the user to a different page. The drawer can also open a different view of the drawer, although this interaction should be used minimally to not guide the user too far off their original task. If the user has a drawer open and triggers another drawer, it will replace the current drawer. If the user opens the help drawer on the left, it will close any open drawer on the right.
• When closing a drawer with unsaved work, a confirmation modal should be used for any work that is at risk for being lost due to the drawer closing (whether automatically or from the user manually closing it).
• The narrow drawer should be used for displaying non-actionable information or any actions that are comprised of mostly basic form fields. The wide drawer should be reserved for heavier interactions where the user could benefit from a little more room to work than what the narrow drawer provides, such as being able to read and use actions displayed in cards.
• A user can continue to interact with the UI underneath the drawer. This allows the user to navigate elsewhere or interact with other elements that may open the drawer. For instances where a user should be able to see all of the content to the left of a drawer, use a side panel page layout instead.

Content guidelines

Drawer headers should be clearly and consisely written, in sentence case and with no punctuation at the end. Avoid unneccessary or ambiguous words, but include articles like “a” and “the,” as they provide clarity especially in translating.

Accessibility

Keyboard support

• From the trigger that launches the drawer, use space or enter to open the drawer
• tab will first focus on the drawer dismiss (close) in the header before following the tab order in the drawer body, followed by the drawer footer actions
• space or enter can also be used to select an option from the drawer footer

Similar components

Modal

A modal window creates a mode that disables the main window but keeps it visible with the modal window as a child window in front of it.

Fullscreen Takeover

A full screen modal that takes over the entire screen to focus on more complex tasks.