Workbench

An app shell that structures regions of content and interaction. The workbench assembles the outer app shell which defines regions to structure content and interactions. This component is not included in @contentful/f36-components which means that to use, you will need to import it from @contentful/f36-workbench directly.

Header

The Header provides navigational guidance and primary actions on the current view.

Content guidelines

• The Header should only provide actions which are global to the current view (e.g. Button to create a user on a users list view)
• When multiple global actions are needed a dropdown menu should be used
• Buttons that submit a form on the current view should not be placed in the title bar but be part of that specific form.

Main content

The main content area provides the main functionality of the current view.

Content guidelines

Depending on the displayed information one of the 3 width configurations should be applied:

• Views that just consist of forms or text should have a maximum width of 768px for enhanced readability.
• Static table views which contents are not configurable should default to a maximum width of 1280px.
• Rich data views like dashboards or configurable tables should use the entire available width.

Sidebars

The left sidebar provides quick access to saved views and filters. The right sidebar provides secondary interactions depending on the current view as well as documentation spaces and entry points for extensibility.

Content guidelines

• The left sidebar serves as secondary navigation and provides predefined and user-defined filters
• It should not include any view actions like adding or removing content

Props

Workbench

• Name

  children(required)

  ReactNode
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  testId

  Description

  A [data-test-id] attribute used for testing purposes

  string

Workbench.Header

• Name

  title(required)

  Description

  This is the title that will be shown inside the Header component

  string
• Name

  actions

  Description

  It's possible to pass a ReactNode to be shown at the end of the Header

  string

  number

  false

  true

  {}

  ReactElement<any, string | JSXElementConstructor<any>>

  ReactNodeArray

  ReactPortal
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  description

  Description

  This is the text that will be shown on the right side of the title in the Header component

  string
• Name

  icon

  Description

  This is the icon that will be shown on the left side of the title and it's possible to use Forma 36’s icons or external icons

  ExoticComponent<any>

  ComponentClass<any, any>

  FunctionComponent<any>
• Name

  onBack

  Description

  If a function is passed to the onBack prop the Header will show a back button that will call this function when clicked

  () => void
• Name

  testId

  Description

  A [data-test-id] attribute used for testing purposes

  string

  Default

  cf-ui-workbench-header

Workbench.Content

• Name

  children(required)

  ReactNode
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  testId

  Description

  A [data-test-id] attribute used for testing purposes

  string

  Default

  cf-ui-workbench-content
• Name

  type

  Description

  This props define the max-width of the content container The default value is "default" which translates to `max-width: 1200px` in the browser

  "text"

  "default"

  "full"

  Default

  default

Workbench.Sidebar

• Name

  children(required)

  ReactNode
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  position

  Description

  It sets the correct border style for the Sidebar

  "left"

  "right"

  Default

  left
• Name

  testId

  Description

  A [data-test-id] attribute used for testing purposes

  string

  Default

  cf-ui-workbench-sidebar