Lead:  Vainerman Ziv, Revital (Unlicensed)  - 

Description

The Details Panel presents additional information and available actions on the contextual workspace content or selected item/s

It contains a header with general info and changing tabs relevant to the application

Usage & Behavior

The detail pane should:

• contain information relating to one selected item or topic only.

• be easy to scan.

• prioritise any actions which can be performed on the item.

General guidelines

Structure

The main Details Panel elements are:

Header

The header will display main title, secondary title (optional) and thumbnail (optional)

The main Details Panel contains a header with general information, changing tabs relevant to the page/selection, and content which includes information actions and links

Header

In WFM the Header width is 320px and height is 50px

The Header elements are:

1. Main title

2. Secondary title (optional)

3. Thumbnail (optional)

Tabs

The main advantage of using the Details Panel is the potential of having wide information on different categories of the selected single item

The main Details Panel can contain up to 4 tabs and each tab contains different content.

Content

The Details Panel content area display by the selected tab and may contain card, table, text and action buttons

The content area is related to the tab selected:

1. The content area display components of card / table / form

2. The content area include action button follow the content (optional)

3. The content area can be scroll vertically and horizontal (optional)

Placement & Positioning

1. The Details Panel is part of master-details of the entire workspace

2. The Details Panel width is fixed 320px and height may change following the close/open ribbon 

3. The Details Panel located on the right side of the workspace 

4. The Details Panel can by pin (open all the time) or unpin (open by demand)

Default State

State	Image	Comment
PinPinned		When the Details Panel pin is mean it will be open all the time without referring if it there is or not a selected topic  When the Details Panel pin, the workspace be resizing according to the Details Panel size
UnpinUnpinned		When the Details Panel unpin is mean it will be open only when there is a selected topic  When the Details Panel is unpin, it will open on top of the workspace

Transitions

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

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

Validations and Errors

1. The Details Panel doesn't have validation and errors as an item

2. The Details Panel context can have validation and errors

Best practices

When to use Details Panel

1. When there is varied information on a subject 

2. When there is varied actions on a subject

Consider using Details Panel vs. Popup

1. Using Details Panel when there is a benefit to see side by side (master details), if it is not - use the Popup

2. Using Details Panel when action may be effected on the workspace, if it is not - use the Popup

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

Code

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