Versions Compared

Version Old Version 40 New Version 41
Changes made by

Liav Nadler

Liav Nadler

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents

Description

The details pane is a panel an area located on the right side of the screenpage, presenting contextual information and actions related to selected items. It may also include actions or links to other pagesa selected item.

Image RemovedImage Added

Usage & Behavior

General guidelines

  • The details pane displays information and actions related to a selected item on the main area of the page.

  • In case no items were selected on the main area, and empty state will be presented (see states below).

  • In case two or more items were selected on the main area, the pane will only show the number of selected items (see states below).

  • The details pane may have an option to be pinned to the side of the screen, or unpinned (i.e., expanded by demand).

Structure

Header

  • The details panel may details panel may contain a header with general informationthe pane’s title.

  • The header may present a title, also contains:

    • a secondary title

    (optional), Thumbnail (optional), pinning option, contextual help etc

    • ,

    • a Thumbnail image (for example: an avatar),

    • a pinning icon,

    • a contextual help icon.

Tabs

The details panel may contain up to 5 tabs

Tab Bar

  • When relevant, the details pane will show a tab bar, containing between 2 and 5 tab bars.

  • All tabs will be of the same width. In case the title is long it will be truncated and a tooltip will appear on hover.

Image RemovedImage Added

Tab

The 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

    Area

    Actions AreaIf needed there may be a contextual actions area

    • The details pane’s content area (or any tab) may contain:

      • Any combination of text, lists, cards, tables, forms, graphs, etc.

      • A vertical scroll bar. If exists, the scroll bar will apply on the content area only, and not on other areas such as the header or an action area.

      • Some tabs may include drill down options or links to other areas

    Image Removed

    Image Removed

    Image Removed

    Image Removed

    Image Removed

    Image Removed

      • .

    Action Area

    • Where relevant, an actions area is shown at the bottom of the details pane

    Image Removed

    • .

    • Examples - buttons / dropdown menu?

    Image Added

    Image Added

    Image Added

    Image Added

    Image Added

    Image Added


    Placement & Positioning

    The Details Panel is part of the entire workspace, details panel is located on the right side of the screen page (when in LTR mode), and stretches from below the title area and to the bottom of the page.

    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 optionsThe tabs can be changed contextually according to the selected item

    States

    State

    Description

    Example

    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)

    Loading

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

    		Image RemovedImage Added

    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 pane do not require special validations.

    • For validations and errors related to possible content, see Field Validation.

    Transitions

    • When the Details Pane is details pane is being expanded from collapsed mode, the transition will be a slide from right to left (RTL mode).

    • When the Details Pane details pane is being collapsed, the transaction will be slide from left to right.

    Best practices

    Use:

    • 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. In this case use a /wiki/spaces/UserExp/pages/2496694037 instead.

    Accessibility

    compliance

    Compliance

    Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

    Design

    See some examples below:

    Zeplin link

    Screen thumbnail

    WFM
    https://zpl.io/bzjLm73


    WFM

    https://zpl.io/VDo1yWv

    WFM

    https://zpl.io/V0qprPO

    Form designer

    https://zpl.io/V17RrZm

    Code