Lead:  Vainerman Ziv, Revital (Unlicensed)  - 


Description

The Details Panel is a panel on the right side of the screen (when in LTR mode) and presents summary , additional information, and/or available actions on the contextual workspace content or the selected item/s

Usage & Behavior

General guidelines

Modes

The detail pane has two main usage modes:

  • Item/s related - Presents information and/or actions related to the selected item/s

  • Page related - present summary, more information and/or actions related to the the page

Structure

Header

The Details Panel may contain a header with general information

In WFM the Header width is 320px and height is 50px and it’s elements are - Main title, Secondary title (optional), Thumbnail (optional)


Tabs

The  Details Panel can contain up to 5 tabs with changing content.


Details pane / tab Content

The Details Panel content area presents the selected tab in case of tabs, or the page content in case theer are no tabs.

Content may contain and actions as followed -

  1. Content area - card/s, table, list, text, form, and visual graphs

  2. Action area - may be along the data and below in a designated area (optional)

  3. Vertical scroll when needed, and horizontal scroll only when there is no other alternative (should be discussed with UX team)


Actions area

In case used there may be a contextual actions area at the bottom of the pane

Placement & Positioning

  1. The Details Panel is part of the entire workspace, on the right side of the screen (when in LTR mode)

  2. The Details Panel can be pinned (keep being expanded) or unpinned (expanded by selection)

  3. When collapsed - the details pane will present the coppased area with an expanding option

Empty state

In case of contextual details pane, an empty state mode might be need

Transitions (LTR mode)

  1. When the Details Panel is being opened, the transition will be a slide from right to left

  2. When the Details Panel is being closed, the transaction will be slide from left to right

  3. When details pane is being loaded a corresponding a animation should be presented

Validations and Errors

The Details Panel may have validations and errors within the content (cards, forms, etc)

Best practices

When to use Details Panel

1. When there is a lot of information/meta data to present on a subject 

2. When there is additional information and actions to present on according to selection

3.  when there is a benefit of viewing some content see side by side

Detail pane examples:

WFM

Path Manager - Page related

Knowledge Management - Page related

Form designer - Page related + tabs

Future Version (TBD)

Accessibility compliance

<<In general each component should be A11y complied,  please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>

Focus management

<<How will the component work with keyboard only - without a mouse. Can be reference if written above

We already set a general guidelines described in Keyboard & Focus Management Guidelines >>

Screen reader support 

<<Make sure the components support screen reader for content or behaviour where needed - see Screen Reader Guidelines >>

Contrast & size compliance

<<Visual designers must comply with the minimal of Contrast + Font Size Guidelines for each component>>

Design

Zeplin link

Screen thumbnail

<<Zeplin Link>>





Code

<<a box containing the code - discuss with Femi>>