Drawer

Components

Drawer

Code

Drawer is used to overlay content on top of the interface. They are intended to capture the user's attention in order to inform or shift focus to a pertinent task.

import { Drawer } from '@sproutsocial/racine'

() => {
  const [open, setOpen] = useState(false)
  const toggleDrawer = () => setOpen(!open)

  return (
    <Box>
      <Button appearance='secondary' onClick={toggleDrawer} width={1}>
        Open drawer
      </Button>

      <Drawer
        isOpen={open}
        onClose={toggleDrawer}
        closeButtonLabel='Close this drawer'
        id='right-drawer'
        zIndex={900}
      >
        <Drawer.Header title='Drawer Header' />

        <Drawer.Content>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </Drawer.Content>
      </Drawer>
    </Box>
  )
}

Properties

Name	Type	Default	Description
`children`	`React.ReactNode`
`closeButtonLabel`	`string`		Label for the close button. Usually this should be "Close"
`direction`	`"left"` `"right"`	`"right"`	Whether the drawer slides in from the left or right side of the screen
`disableCloseOnClickOutside`	`boolean`	`false`	In some cases, you may not want the user to be able to click outside of the drawer to close it. You can disable that with this prop.
`id`	`string`
`isOpen`	`boolean`
`offset`	`number`	`0`
`onClose`	`() => void`
`zIndex`	`number`	`7`
`closeTargets`	`Element`	`[]`
`width`	`number`	`600`
`focusLockExemptCheck`	`(element: HTMLElement) => boolean`

Subcomponents

Drawer Header

Most drawers should have headers. The Drawer.Header subcomponent makes it easy to build a default header — simply supply a title prop and the Drawer Header will automatically render the title along with a close button.

If you need to build a custom header, you can do so by passing a children prop, which allows a developer to completely customize the header while maintaining the correct padding. You can use the Drawer.CloseButton subcomponent to render the close button manually.

Finally, a render prop can be supplied, which gives the developer full control of how the header will render. The function receives the context of the parent Drawer as an argument.

Basic Drawer Header

<Drawer.Header title='Notifications' />

Drawer Header with `children`

<Drawer.Header>
  <Tabs selectedId='1' onSelect={() => {}}>
    <Tabs.Button id='1'>
      <Box display='flex' alignItems='center'>
        <Icon name='bell-outline' mr={350} aria-hidden />
          <Text as='div' fontSize={200} fontWeight='semibold'>
            Notifications
          </Text>
      </Box>
    </Tabs.Button>
    <Tabs.Button id='2'>
      <Box display='flex' alignItems='center'>
        <Icon name='triangle-exclamation-outline' mr={350} aria-hidden />
          <Text as='div' fontSize={200} fontWeight='semibold'>
            Issues
          </Text>
      </Box>
    </Tabs.Button>
  </Tabs>

  <Drawer.CloseButton />
</Drawer.Header>

Drawer Header with `render`

<Drawer.Header render={({ onClose, closeButtonLabel }) => (
  <Box bg='red.0' width={1} p={500} display='flex' alignItems='center' justifyContent='space-between'>
    <Text>Custom Drawer Header</Text>

    <Button onClick={onClose} aria-label={closeButtonLabel}>
      Custom close button
    </Button>
  </Box>
)} />

Drawer Close Button

When making a custom header, a close icon button is still needed. The Drawer.CloseButton subcomponent makes it simple to include the standard close icon button in any drawer. The base component of Drawer.CloseButton is a standard Button and accepts the same props as that component.

The close button also accepts a children if you would like to render something other than the icon.

If you need custom on-close behavior or more flexibility in rendering, there is a render prop which receives the context of the parent Drawer as an argument.

Basic Close Button

<Drawer.CloseButton />

Drawer Close Button with `children`

<Drawer.CloseButton appearance='primary' aria-label="Close Drawer Example Button">
  <Icon name='bell-outline' aria-hidden />
</Drawer.CloseButton>

Drawer Close Button with `render`

<Drawer.CloseButton render={({onClose, closeButtonLabel}) => (
  <Button onClick={onClose} aria-label={closeButtonLabel}>
    Custom close button
  </Button>
)} />

Recipes

Drawer with empty header

() => {
  const [open, setOpen] = useState(false)
  const toggleDrawer = () => setOpen(!open)

  return (
    <Box>
      <Button appearance='secondary' onClick={toggleDrawer} width={1}>
        Open drawer
      </Button>

      <Drawer
        isOpen={open}
        onClose={() => setOpen(false)}
        closeButtonLabel='Close this drawer'
        id='no-header-drawer'
        zIndex={900}
      >
        <Drawer.Header />

        <Drawer.Content>
          <Box display='flex' alignItems='center' flexDirection='column'>
            <Box width='400px' height='400px' bg='neutral.200' />

            <h3>Some headline</h3>

            <Text fontSize={400} textAlign='center' px={500}>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </Text>
          </Box>
        </Drawer.Content>
      </Drawer>
    </Box>
  )
}

Drawer sliding in from left

By default, the drawer component will slide in from the right side of the screen. Set the direction prop to left to change this behavior.