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

Description

A widget is a self-contained entity that is designed to work within a workspace.

Usage & Behavior

General guidelines

Structure

A widget consists of:

  • Header, which includes:

    • Widget name, with or without additional information. In some cases, this may be replaced by Tabs. See Internal Logic below.

    • Widget controls (optional), including Icon Buttons and/or an Action Menu.

  • Content area.

Widget controls

  • Includes only actions that are related to the widget (such as expand/collapse, maximize, delete, configure, etc.). Content-related actions will be presented within the content area.

  • The action area should include up to 3 elements, including:

    • Icon Buttons, usually used for primary actions.

    • Action Menu, usually used for secondary actions. Where there are no primary actions, all actions may be presented in the actions menu (without any icon buttons).

Placement and Positioning

A widget can be placed anywhere on a page.

Content

Widget Title

  • The widget name will be aligned to the left.

  • Additional information (if exists) will be aligned to the widget name, separated by a line separator.

  • Where space is constrained, the widget name and the additional information will be truncated. In this case, the full information (both name and additional information) will be presented in a Tooltip.

Internal Logic

  • Tabbed Widget. Different content types can be gathered under a single widget, using Tabs.

    • The tabs replace the widget header and the additional information.

    • The action buttons refer to the widget as a whole (all tabs together).

  • Configuration. Widget configurations, such as resizing or moving location, should be saved per user for future sessions.

States

State

Image

Regular

Hover

Hover- Draggable

A frame will be added as a visual indication for draggability

Active (relevant for draggable widgets only, while being dragged)

Disabled

TBD - graphic design

Error

-

Focused

-

Focused, Hover

-

Focused, Active

-

Focused, Disabled

-

Interaction

  • (optional) Expand or collapse of a widget can be done by clicking a button in the action buttons area.
    The widget will be collapsed and expanded using an animation.

  • (optional) Drag:

    • Hovering over the widget will change the widget to the hover-draggable state.

    • Hovering over the header area will change the mouse cursor to a dragging state.

    • The user can click-and-hold to drag the widget to a new location. (See Drag and Drop for more information).

    • A drag handle may also be presented on hover:

  • (optional) Resize. Hovering over the boundaries of the widget can allow the user to resize it horizontally, vertically, or diagonally.

    • On hover:

      • The mouse cursor will change to drag horizontally, vertically, or diagonally.

      • The boundary line will be visually presented as resizable.

      • The hover and resize area should be at list 6 pixels wide.

    • Click-and-hold while changing the mouse location will resize the widget.

Validations and errors

The content of the widget may have an empty state and a loading state.

See relevant pages for more info.

Transitions

Expand and collapse will be animated.

Best practices

Use:

  • In dashboards.

  • When the entity should be configurable in size and location.

Don’t use:

  • When the entity is not self-contained, and doesn’t stand on its own.

  • As a single widget in a page.

General

  • Widget title should be short and informative. Avoid presenting a long description that will not be fully presented in various responsive states.

Accessibility compliance

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

Design

Zeplin link

Screen thumbnail

<<Short Zeplin link. You
Use this
>>

<<Screen with 200 width>>



Code

  • On dashboards, widgets will be placed on a grey background:

  • No labels