Description

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

Usage & Behavior

General guidelines

Structure

1. Header:

   1. Widget name with/out additional information

   2. Actions

2. Content area

Placement and Positioning

• A widget can be placed anywhere in a page.
  Its location in comparison to other widgets will determine the possible expansion directions (when relevant).

• In dashboards, the widgets should be visually distinct from one another and from other elements on screen. The background of such spaces should support that, for example:
  

  

Content

• Widget name is aligned left.

• Additional information is aligned to the name, separated by a line separator. It should be short and informative. Avoid presenting a long description that will not be presented to its full under various responsive states.

• When space is constrained, the widget name and the additional information will be truncated. The full information (name + info) will be presented in tooltip.

• Action buttons:

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

  • Actions are presented in hover

  • Up to 3 action buttons may be presented. The actions may include (1) Icon Buttons, usually being used for primary actions (2) Action Menu, usually being used for secondary actions.
    All actions may be presented in the actions menu (without any icon buttons), especially when there are no primary actions:

    

Internal Logic

• Tabbed Widget: multiple content types can be gathered under a single widget, using tabs.

  

  • The tabs replace the widget header and the additional information

  • The action button refer to the widget as a hole (all 3 tabs together)

• Configuration: widget configurations, such as location change or resizing, 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 widgets can be done by clicking a button in the action buttons area.
  The widget will be collapsed and expanded in animation
  

  

• (optional) drag:

  

  • Hover over the widget will change the widget to ‘hover-draggable’ state.

  • Hover over the header area will change the mouse cursor to dragging state

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

  • A drag handle may also be presented in hover:

    

• (optional) resize: hovering over the boundaries of the widget will allow to resize it horizontally/ vertically/ diagonally.

  

  • In hover:

    • The mouse cursor will change to drag horizontally/vertically/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 collapse will be in animation.

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 by it’s own

• As a single widget in a page

Accessibility compliance

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

Design

Code

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