Skip to end of banner
Go to start of banner

Details Panel

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 31 Next »

Lead:  Vainerman Ziv, Revital (Unlicensed)  - ONGOING


Description

The Details Panel presents additional information and available actions on the contextual workspace content or selected item/s

Usage & Behavior

The detail pane should:

  • contain information relating to one selected item or topic only.

  • be easy to scan.

  • prioritise any actions which can be performed on the item.

KM

General guidelines

Structure

The main Details Panel contains a header with general information, changing tabs relevant to the page/selection, and content which includes information actions and links

Header

In WFM the Header width is 320px and height is 50px

The Header elements are:

  1. Main title

  2. Secondary title (optional)

  3. Thumbnail (optional)


Tabs

The main advantage of using the Details Panel is the potential of having wide information on different categories of the selected single item

The main Details Panel can contain up to 4 tabs and each tab contains different content.


Content

The Details Panel content area display by the selected tab and may contain card, table, text and action buttons

The content area is related to the tab selected and displays:

  1. Components of card / table / form

  2. Action area (optional)

  3. Vertically scroll when needed (optional), and horizontal scroll when there is no other alternative (please try to avoid)


Placement & Positioning

  1. The Details Panel is part of master-details of the entire workspace

  2. The Details Panel width is fixed 320px and height may change following the close/open ribbon 

  3. The Details Panel located on the right side of the workspace 

  4. The Details Panel can by pin (open all the time) or unpin (open by demand)

Default State

State

Image

Comment

Pinned

  1. When the Details Panel pin is mean it will be open all the time without referring if it there is or not a selected topic 

  2. When the Details Panel pin, the workspace be resizing according to the Details Panel size

Unpinned

  1. When the Details Panel unpin is mean it will be open only when there is a selected topic 

  2. When the Details Panel is unpin, it will open on top of the workspace


Transitions

  1. When the Details Panel is open, the transition will be slide from right to left

  2. When the Details Panel is close, the transaction will be slide from left to right

Validations and Errors

  1. The Details Panel doesn't have validation and errors as an item

  2. The Details Panel context can have validation and errors

Best practices

When to use Details Panel

1. When there is varied information on a subject 

2. When there is varied actions on a subject

Consider using Details Panel vs. Popup

1. Using Details Panel when there is a benefit to see side by side (master details), if it is not - use the Popup

2. Using Details Panel when action may be effected on the workspace, if it is not - use the Popup

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>>





Code

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

  • No labels