Side Sheet

View on GitHub

Introduction

The SideSheet component is a panel overlaying the screen on the right side. It is used to show more details about a certain object or person. A SideSheet is often triggered by clicking a row in a table.

Use cases

  • Showing a profile view of a user
  • Showing detailed information about a transaction (such as a sync or run)
  • Showing configuration settings that don‘t need to be accessible by a URL

When not to use a side sheet

Side Sheets are a great way to cheat creating a new page. As a general rule of thumb, a SideSheet should not be used as a replacement of a new page when the page needs to be accessible by a URL. Avoid showing a SideSheet based on a URL.

Implementation details

The SideSheet component does not have any opinion about the contents of the SideSheet. In the examples below are some recipes to make sure usage of the SideSheet is consistent. It is recommended to compose more opinionated Side Sheets in the consuming application.

Side sheets close on

  • Backdrop click
  • Close icon button click
  • Escape key
  • The close function being called

Focus management

When opening the SideSheet, focus will be brought inside the SideSheet by looking for elements with [autofocus] first, [tabindex] second and button last.

When closing the SideSheet, focus will be brought back to the element that was focused before opening the SideSheet. This is normally the button that triggered the SideSheet.

Basic example

The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
<Component initialState={{ isShown: false }}>
  {({ state, setState }) => (
    <React.Fragment>
      <SideSheet
        isShown={state.isShown}
        onCloseComplete={() => setState({ isShown: false })}
      >
        <Paragraph margin={40}>Basic Example</Paragraph>
      </SideSheet>
      <Button onClick={() => setState({ isShown: true })}>
        Show Basic Side Sheet
      </Button>
    </React.Fragment>
  )}
</Component>
code Hide code

Change position

The SideSheet component can appearn on all side of the screens.

  • Position.TOP
  • Position.RIGHT
  • Position.BOTTOM
  • Position.LEFT
The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
<Component initialState={{ isShown: false }}>
  {({ state, setState }) => (
    <React.Fragment>
      <SideSheet
        position={Position.TOP}
        isShown={state.isShown}
        onCloseComplete={() => setState({ isShown: false })}
      >
        <Paragraph margin={40}>Basic Example</Paragraph>
      </SideSheet>
      <Button onClick={() => setState({ isShown: true })}>
        Show Basic Side Sheet
      </Button>
    </React.Fragment>
  )}
</Component>
code Hide code

Full featured example

Full featured example with a header with a title, subtitle and a tab bar. Content is a simple card.

Title only

Example with a header with a title. Content is a simple card.

Title and subtitle

Example with a header with a title and title. Content is a simple card.

SideSheet Props

childrenunionrequired
Children can be a string, node or a function accepting `({ close })`.
isShownbool
When true, the Side Sheet is shown.
onCloseCompletefunc = () => {}
Function that will be called when the exit transition is complete.
onOpenCompletefunc = () => {}
Function that will be called when the enter transition is complete.
onBeforeClosefunc
Function called when overlay is about to close. Return `false` to prevent the sheet from closing. type: `Function -> Boolean`
shouldCloseOnOverlayClickbool = true
Boolean indicating if clicking the overlay should close the overlay.
shouldCloseOnEscapePressbool = true
Boolean indicating if pressing the esc key should close the overlay.
widthunion = 620
Width of the SideSheet.
containerPropsobject
Properties to pass through the SideSheet container Pane.
positionenum = Position.RIGHT
Positions the sheet to the top, left, right, or bottom of the screen.