Drawer

Components

Drawer

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='outline' onClick={toggleDrawer} width={1}>
        Open drawer
      </Button>

      <Drawer
        isOpen={open}
        onClose={toggleDrawer}
        closeButtonLabel='Close this drawer'
        id='right-drawer'
        header={
          <Drawer.Header 
            title='Drawer Header' 
          />
        }
        zIndex={900}
      >
        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>
    </Box>
  )
}

() => {
  const [open, setOpen] = useState(false)
  const toggleDrawer = () => setOpen(!open)
  return (
    <Box>
      <Button appearance='outline' onClick={toggleDrawer} width={1}>
        Open drawer
      </Button>
      <Drawer
        isOpen={open}
        onClose={toggleDrawer}
        closeButtonLabel='Close this drawer'
        id='right-drawer'
        header={
          <Drawer.Header 
            title='Drawer Header' 
          />
        }
        zIndex={900}
      >
        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>
    </Box>
  )
}

Properties

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

COMMON

Learn more

Name	Type	Default
`children`	`ReactNode`
`closeButtonLabel`	`string`
`direction`	`"left""right"`	`"right"`
`disableCloseOnClickOutside`	`boolean`	`false`
`header`	`unknown`	`<DrawerHeader />`
`id`	`string`
`isOpen`	`boolean`
`offset`	`number`	`0`
`onClose`	`signature`
`zIndex`	`number`	`7`

Subcomponents

Drawer Header

Every drawer has a header, which provides a close icon in the upper right-hand corner. You can supply a custom header in order to add a title for the drawer or to render other arbitrary content in the header (such as tabs or subheaders).

The following example shows a drawer header with a title and children, all of which are optional. If you provide children, they will be rendered in the space below the title and the close icon.

Notifications

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

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

If you’d like to provide a custom header without the default close button, you can pass a render function to Drawer.Header that has the following signature:

({ onClose: () => (), closeButtonLabel: string }) => React.Node

Name	Type	Default	Description	Required?
`title`	`string`	`""`
`children`	`ReactNodesignature`

Recipes

Drawer with empty header

If you do not provide a header component, or provide a header component without a title, the header will render without a bottom border and the close icon only.

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

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

      <Drawer
        isOpen={open}
        onClose={toggleDrawer}
        closeButtonLabel='Close this drawer'
        id='no-header-drawer'
        zIndex={900}
      >
        <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>
    </Box>
  )
}

() => {
  const [open, setOpen] = useState(false)
  const toggleDrawer = () => setOpen(!open)
  return (
    <Box>
      <Button appearance='outline' onClick={toggleDrawer} width={1}>
        Open drawer
      </Button>
      <Drawer
        isOpen={open}
        onClose={toggleDrawer}
        closeButtonLabel='Close this drawer'
        id='no-header-drawer'
        zIndex={900}
      >
        <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>
    </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.

import { Drawer } from '@sproutsocial/racine'

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

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

      <Drawer
        isOpen={open}
        onClose={toggleDrawer}
        closeButtonLabel='Close this drawer'
        id='left-drawer'
        direction='left'
        header={
          <Drawer.Header 
            title='Drawer Header' 
          />
        }
        zIndex={900}
      >
        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>
    </Box>
  )
}

() => {
  const [open, setOpen] = useState(false)
  const toggleDrawer = () => setOpen(!open)
  return (
    <Box>
      <Button appearance='outline' onClick={toggleDrawer} width={1}>
        Open drawer
      </Button>
      <Drawer
        isOpen={open}
        onClose={toggleDrawer}
        closeButtonLabel='Close this drawer'
        id='left-drawer'
        direction='left'
        header={
          <Drawer.Header 
            title='Drawer Header' 
          />
        }
        zIndex={900}
      >
        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>
    </Box>
  )
}