Lead:  Shani Laendler (Unlicensed) -  ONGOING 

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.

• 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 header is aligned left.

• Additional information is aligned to the header, 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, it will be truncated. The full information will be presented in tooltip.

• Action icon 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 main actions will be presented using icon buttons. Additional secondary actions will be presented in an actions menu.

  • When space is constrained, all actions may be moved to the actions menu (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
Active	-
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 header area will change the mouse cursor to dragging state, allowing to drag it to a new location (see Drag and Drop for more info).

  

  • A drag handle may also be presented (always or in hover only), and will be placed left to the header:

    

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

No validation or error.

Transitions

Expand collapse will be in animation. TBD - Graphics

Best practices

<<e.g. Slider should display a label its on>>

Use:

• In dashboards

• When the entity should be configurable in size and location

• On workspaces that contain more than 1 widget

• <…>

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

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

<<Does this component/Pattern requires specific handling?>>

See general guidelines described in /wiki/spaces/UX/pages/308969693

Screen reader support 

<<Does this component/Pattern requires specific handling?>>

See general guidelines described in /wiki/spaces/UX/pages/308248620

Contrast & size compliance

<<Does this component/Pattern requires specific handling?>>

Are taken into consideration. For more information see general guidelines described in Contrast + Font Size Guidelines

Design

Code

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