Lead: Vainerman Ziv, Revital (Unlicensed) -
Description
The Details Panel is a panel on the right side of the screen (when in LTR mode) and can present for the contextual workspace or the selected item content such as summary , additional information, and available actions/s
Usage & Behavior
General guidelines
Content
The detail pane can present:
Page related content and options -
summary, more information and/or actions related to 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 selected item.
in some areas multi item selection is available and may present other content and options
Structure
Header
The Details Panel may contain a header with general information
In WFM 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 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
Tab Content
In case of one tab (or no tabs) the details pane wont show the tabs and his name will be presented as a title
Tab may contain -
Header
Content area - card/s, table, list, text, form, and visual graphs
Action area - may be along the data and below in a designated area (optional)
Vertical scroll when needed, and horizontal scroll only when there is no other alternative (should be discussed with UX team)
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
The Details Panel is part of the entire workspace, on the right side of the screen (when in LTR mode)
The Details Panel in WFM can be pinned (keep being expanded) or unpinned (expanded by selection)
When collapsed - the details pane will present the 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 may be presented with guiding text or actions
Transitions (LTR mode)
When the Details Panel is being expanded from collapsed mode, the transition will be a slide from right to left
When the Details Panel is being collapsed, the transaction will be slide from left to right
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 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
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 |  |
WFM |  |
Form designer |  |
Code
<<a box containing the code - discuss with Femi>>