| Table of Contents |
|---|
Description
The Details Panel details pane is a panel located on the right side of the screen (when in LTR mode) which presents , presenting contextual information on a selected item, and can include more information and actions.
related to selected items. It may also include actions or links to other pages.
Usage & Behavior
General guidelines
The Details Pane The details pane may have an option to be pinned (keep being expanded - default if resolution permits) to the side of the screen, or unpinned (i.e., 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
It may have details panel may contain up to 5 tabsThe tab caption .
All tabs will be of the same width. In case the title is long it will be truncated + tooltip when there isn’t enough space
and a tooltip will appear on hover.
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
:
A header
Content area - card/s, table, list, text, form, visual graphs, etc.
Action area (optional) - may be along the data and/or below in a designated area at the bottom of the tab
Vertical scroll - when needed will be applied only on the content area, plus the header and action area should be sticky
Some tabs may include drill down options or links to other areas
Actions
areaArea
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
stateState
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 (Rotem Avidan (Unlicensed) Please update the empty state here)
States
Loading
When details pane is being loaded a corresponding animation should be presented
The Collapse/Expand bar
State | Collapsed details pane | Expanded details pane |
Hover |  |  |
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 Pane is being expanded from collapsed mode, the transition will be a slide from right to left (RTL mode).
When the Details Pane is being collapsed, the transaction will be slide from left to right.
Best practices
Use:1. When
When there is a lot of information/meta data to present on an item.
When there is additional secondary information and actions to present on an item.
When there is a benefit of viewing some content see side by side.
Don’t use:
When the information isn’t related to a selected item please . In this case use a /wiki/spaces/UserExp/pages/2496694037 instead.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
See some examples below:
Zeplin link | Screen thumbnail | <<Zeplin Link>>|
|---|---|---|
 | ||
WFM |  | |
WFM |  | |
Form designer |  |
Code
<<a box containing the code - discuss with Femi>>