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 can present for the contextual workspace or the selected item content such as summary , additional information, and /or available actions on the contextual workspace content or the selected item/s

Usage & Behavior

General guidelines

Content

The detail pane has two main usage modescan present:

• Item/s related - Presents Page related content and options -

  • summary, more information and/or actions related to

  the selected item/s Page related - present

  • the the contextual workspace

  • Can be presented as an empty state for the page before selecting an item

• Item/s related content and options -

  • summary, more information and/or actions related to the

  the page

  • selected item.

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

Structure

Header

The Details Panel may Details Panel may contain a header with general information

In WFM the Header width is 320px and height is 50px and it’s there header is as presented below:

• It’s elements are - Main title, Secondary title (optional), Thumbnail (optional)

• the dimensions are - width is 320px and height is 50px

Tabs

The  Details Panel can contain may contain tabs

• It may have up to 5 tabs

• The tabs can be changed contextually

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

Details pane / tab

Tab Content

The Details Panel content area presents the selected tab in In case of tabs, or the page content in case theer are no tabs. Content may contain and actions as followed -one tab (or no tabs) the details pane wont show the tabs and his name will be presented as a title

Tab may contain -

Image Removed

1. Header

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

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

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

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

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 in WFM can be pinned (keep being expanded) or unpinned (expanded by selection)

   Image Added

   Image Added

3. When collapsed - the details pane will present the coppased collapsed area with an expanding option, hovering will highlight it as presented below

Empty state

In case of contextual details pane, an empty state mode might be needmay be presented with guiding text or actions

Transitions (LTR mode)

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

2. When the Details Panel is being closedcollapsed, 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 an item

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

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>>
WFM https://zpl.io/bzjLm73	Image Added
WFM https://zpl.io/VDo1yWv	Image Added
WFM https://zpl.io/V0qprPO	Image Added
Form designer https://zpl.io/V17RrZm	Image Added

Code

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