Lead:  Shani Laendler (Unlicensed) -  

...

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

• Additional information is aligned to the headername, 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

  the widget name and the additional information will be truncated. The full information (name + info) 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 action buttons may 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 (. 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):

    Image RemovedImage Added

Internal Logic

...

States

State	Image
Regular
Hover
Hover- Draggable	Image Added Will have a visual indication that it is draggable
Active -(relevant for draggable widgets only, while being dragged)	Image Added
Disabled	TBD - graphic design
Error	-
Focused	-
Focused Hover	-
Focused Active	-
Focused Disabled	-

...

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

  Image Added

  • 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

  , allowing

  • The user can click-and-hold to drag

  it

  • the widget to a new location (see Drag and Drop for more info).

  Image Removed

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

    Image RemovedImage Added

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

  Image RemovedImage Added

  • 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 errorThe 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. 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 locationOn 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 GuidelinesUnless otherwise specified, see our general compliance information in Fundamentals - Accessibility

Design

...