Lead: Vainerman Ziv, Revital (Unlicensed) -
| Status | ||||
|---|---|---|---|---|
|
| Table of Contents |
|---|
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/swhich presents contextual information on a selected item, and can include more information and actions.
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
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
In WFM there header is as presented below:
It’s elements are - Main title, SecondaryThe header may present a title, secondary title (optional), Thumbnail (optional)
the dimensions are - width is 320px and height is 50px, pinning option, contextual help etc.
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 won't show the tabs tab, and his its name will be presented as a title
Tab may contain -
Header
Content area - card/s, table, list, text, form, and visual graphs, etc.
Action area (optional) - may be along the data and/or below in a designated area (optional)at the bottom of the tab
Vertical scroll - when needed will be applied only on the content area, and horizontal scroll only when there is no other alternative (should be discussed with UX team)plus the header and action area should be sticky
Some tabs may include drill down options or links to other areas
Actions area
In case used 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)
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)
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
Interaction
The Details Panel may have option to be pinned (keep being expanded - default if resolution permits) or unpinned (expanded by demand)
Clicking the pin icon switches the icon 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.
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>>