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 33 Next »

Lead:  Vainerman Ziv, Revital (Unlicensed)  - ONGOING


Description

The Details Panel presents on the right sie of the screen (when in LTR mode) additional information and available actions on the contextual workspace content or selected item/s

Usage & Behavior

General guidelines

Modes

The detail pane have two usage modes:

  • Master detail - contain information relating the selected item/s

  • More information - present a summary / more information on the page

Structure

The Details Panel may contain in addition to content area a header with general information, changing tabs relevant to the page/selection, 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 Details Panel can contain up to 5 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)


Actions

Placement & Positioning

  1. The Details Panel is part of the entire workspace, on the right side of the screen (when in LTR mode)

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

  3. The Details Panel can be pinned (keep being expanded) or unpinned (expanded by selection)

Transitions (LTR mode)

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

  2. When the Details Panel is closeed, 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 a lot of information/meta data to present on a subject 

2. When there is additional information and actions to present on according to selection

3.  when there is a benefit to see side by side

Examples:

KM

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