Lead:  Vainerman Ziv, Revital (Unlicensed)  - 

Description

The Details Panel is a panel on the right side of the screen (when in LTR mode) which presents contextual information on a selected item, and can include more information and actions.

Usage & Behavior

The Details Pane may have an option to be pinned (keep being expanded - default if resolution permits) or unpinned (expanded by demand)

When loaded

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

General guidelines

Structure

Header

The Details Panel may contain a header with general information

The header may present a title, secondary title (optional), Thumbnail (optional), pinning option, contextual help etc.

Tabs

The  Details Panel may contain tabs

• It may have up to 5 tabs

• The tab caption will be truncated + tooltip when there isn’t enough space

Tab Content

In case of one tab (or no tabs) the details pane won't show the tab, and its name will be presented as a title

Tab may contain -

1. Header

2. Content area - card/s, table, list, text, form, visual graphs, etc.

3. Action area (optional) - may be along the data and/or below in a designated area at the bottom of the tab

4. Vertical scroll - when needed will be applied only on the content area, plus the header and action area should be sticky

5. Some tabs may include drill down options or links to other areas

Actions area

If needed there may be a contextual actions area at the bottom of the pane

Placement & Positioning

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

Default state

When first entering the workspace the details pane should be pinned and expanded (if the resolution allows, see responsive design)

Content

• The detail pane presents Item/s related content with additional options

• more information and/or actions related to the selected item

• in some areas multi item selection is available and may present other content and options

• The tabs can be changed contextually according to the selected item

• Empty state - In case no items are selected, the details pane can present an empty state with guiding text or actions, and/or page summary

  Image Removed

Interaction

The Details Panel may have option to be pinned (keep being expanded - default if resolution permits) or unpinned (expanded by demand)

Image Removed

Image Removed

• (Rotem Avidan (Unlicensed) Please update the empty state here)

  Image Added

States

State	Collapsed details pane	Expanded details pane
Hover	Image Added	Image Added

Interaction

Clicking the pin icon switches

between pinned and unpinned states.

• When unpinned, the content of the page stretches to its full width, being partially hidden by the content panel.

• When pinned, the content of the page narrows to be shown next to the panel, so nothing is hidden.

Validations and Errors

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

Transitions

• When the

  Details Panel is

  Details Pane is being expanded from collapsed mode, the transition will be a slide from right to left (RTL mode)

• When the

  Details Panel

  Details Pane is being collapsed, the transaction will be slide from left to right

Image Removed

Validations and Errors

Best practices

Use:

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

2. When there is additional secondary information and actions to present on an item/page

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

Detail pane examples:

WFM

Image Removed

Path Manager - Page related

Image Removed

Knowledge Management - Page related

Image Removed

Image Removed

Form designer - Page related + tabs

Image Removed

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

Don’t use:

When the information isn’t related to a selected item please use /wiki/spaces/UserExp/pages/2496694037 instead

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Design

Zeplin link	Screen thumbnail
<<Zeplin Link>>
WFM https://zpl.io/bzjLm73
WFM https://zpl.io/VDo1yWv
WFM https://zpl.io/V0qprPO
Form designer https://zpl.io/V17RrZm

Code

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