Lead:  Vainerman Ziv, Revital (Unlicensed)  - 

Description

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

Usage & Behavior

General guidelines

Modes

The detail pane shouldhave two usage modes:

• Master detail - contain information relating to one the selected item or topic only.

• be easy to scan.

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

Image Removed

Image Removed

KM

Image Removed

Image Removed

General guidelines

• /s

• More information - present a summary / more information on the page

Structure

The main Details Panel contains Details Panel may contain in addition to content area 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 itemThe main Details Panel can contain up to 4 5 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 and displays:

1. Components of card / table / form

2. Action area (optional)

3. Vertically scroll when needed (optional), and horizontal scroll when there is no other alternative (please try to avoid)

Actions

Image Added

Placement & Positioning

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

2. In WFM 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 timebe pinned (keep being expanded) or unpin unpinned (open expanded by demand)

Default State

State

Image

Comment

Pinned

Image Removed

1. 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 

2. When the Details Panel pin, the workspace be resizing according to the Details Panel size

Unpinned

Image Removed

1. When the Details Panel unpin is mean it will be open only when there is a selected topic 

2. When the Details Panel is unpin, it will open on top of the workspace

1. selection)

Transitions (LTR mode)

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

2. When the Details Panel is closecloseed, 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 a lot of information/meta data to present on a subject 

2. When there is varied additional information and actions on a subject

Consider using Details Panel vs. Popup

1. Using Details Panel when to present on according to selection

3.  when there is a benefit to see side by side (master details), if it is not - use the Popup2. Using Details Panel when action may be effected on the workspace, if it is not - use the Popup

Examples:

Image Added

Image Added

KM

Image Added

Image Added

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>>