Versions Compared

Version Old Version 33 New Version 34
Changes made by

Vainerman Ziv, Revital (Unlicensed)

Vainerman Ziv, Revital (Unlicensed)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Lead:  Vainerman Ziv, Revital (Unlicensed)  - 

Status
colourYellow
titleongoing


Table of Contents

Description

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

Usage & Behavior

General guidelines

Modes

The detail pane have has two main usage modes:

  • Master detail - contain information relating Item/s related - Presents information and/or actions related to the selected item/s

  • More information Page related - present a summary / , more information on and/or actions related to the the page

Structure

Header

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 and it’s elements are :- Main title

, Secondary title (optional)

, Thumbnail (optional)


Tabs

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


Details pane / tab Content

The Details Panel content area display by presents the selected tab and may contain cardin case of tabs, or the page content in case theer are no tabs.

Content may contain and actions as followed -

  1. Content area - card/s, table, list, text

and action buttons

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

  1. Components of card / table / form

  2. Action , form, and visual graphs

  3. Action area - may be along the data and below in a designated area (optional)

  4. Vertically Vertical scroll when needed (optional), and horizontal scroll only when there is no other alternative (please try to avoidshould be discussed with UX team)

Image Added


Actions area

In case used there may be a contextual actions area at the bottom of the pane

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)

  4. When collapsed - the details pane will present the coppased area with an expanding option

Image Added

Empty state

In case of contextual details pane, an empty state mode might be need

Image Added

Transitions (LTR mode)

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

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

  3. When details pane is being loaded a corresponding a animation should be presented

Image Added

Validations and Errors

The

Details Panel doesn't

Details Panel may have

validation

validations and errors

as an item

  • The Details Panel context can have validation 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 a subject 

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

    3.  when there is a benefit to of viewing some content see side by side

    Examples:

    Image RemovedImage Removed

    KM

    Image Removed

    Detail pane examples:

    WFM

    Image Added

    Path Manager - Page related

    Image Added

    Knowledge Management - Page related

    Image AddedImage Added

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





    Code

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