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

Lead:  Rotem Avidan (Unlicensed) - ONGOING


Description

The Details Panel is part of the master details of the entire workspace. It is a supplementary surface of content and actions for a single item but contains more action and information by different categories for that item.

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.

General guidelines

Structure

The main Details Panel elements are:

Header

The header will display main title, secondary title (optional) and thumbnail (optional)

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:

  1. The content area display components of card / table / form

  2. The content area include action button follow the content (optional)

  3. The content area can be scroll vertically and horizontal (optional)


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

Pin

  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

Unpin

  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


Interaction

  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


Verint LUX Design System/

Components

Document toolbox

Document toolbox

Share

Cards

Created by Rotem Avidan

Last updated 34 minutes ago

Analytics

Analytics

Lead:  Rotem Avidan (Unlicensed) - DONE

  • Description

  • Usage & Behavior

    • General guidelines

      • Structure

      • Placement & Positioning

      • Default State

    • Interaction

    • Validations & Errors

    • Best practices

  • Future Version (TBD)

  • Accessibility compliance

    • Focus management

    • Screen reader support 

    • Contrast & size compliance

  • Design

  • Code

 

Description

A card is an expanded container for details and action options relating to a single item.

Usage & Behavior

A card 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.

There are two types of card:

  • read-only

  • editable

General guidelines

Structure

The parts which can be displayed in the card body depends on whether the card is read-only or editable.

Read-only cards contain:

  • a non-editable text area.

  • status icons (optional). Status icons may be static or toggle.

Editable cards contain:

  • editable fields such as a Drop down menu, Date picker, or Time picker.

  • status icons (optional). Status icons may be static or toggle.

  • an action bar, containing options such as:

    • expand view, to make the card larger.

    • ending actions, such as Delete.

    • approving actions, such as Cancel and Save.

Placement & Positioning

  1. Details panel

Cards should be displayed as part of the Detail panel.

Fixed width

Card widths should be fixed. The height may change in response to the amount of content and the card type.

No internal scroll

The content inside a card should not scroll. To show more information, use an expanded view such as a Popover.

Default State

State

Image

Comment

Empty state card 

 

 Informative card 

 

 

Selected Read-Only card

 

The selected card can be read-only or editable depending on the user’s permissions.

Selected Editable card

Editable cards contain actions button, whereas read-only card do not.

Interaction

A card can be selected in two different ways:

Workspace

Selecting an item from the workspace will open a relevant editable card.

Details panel

When the Details Panel is in the ‘pin state’ (open all of the time), the cards will already be visible and can be directly selected and edited.

Validations & Errors

The card itself does not have any associated validations or errors. However, the item content (text field) may have.

If another item is selected on the screen, the currently selected card should be closed without saving any changes.

Best practices

A card’s content and action options should be clear and understandable.

The elements should be in a hierarchical layout - first context, and then action options.

Use cards:

  1. when there is more information than can be displayed on the workspace.

  2. when it is important to display the expend information side by side to the one selected topic

  3. to group several related pieces of information together, providing an entry point for further details on each item.

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