Lead:  Shani Laendler (Unlicensed) -  

Description

<< Short description of the component and when it is used >>A widget is a self-contained entity that is designed to work within a certain workspace

...

Usage & Behavior

General guidelines

...

• Drag
  some widgets, especially on dashboard or dashboard-like pages, can be dragged to change their location.

  • In hover over the header area the mouse cursor will change to dragging state:

    Image RemovedImage Added

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

    

...

• Resize: Some widgets can be resized.
  In hover over the resizable boundary line:

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

...

States

State	Image
Regular
Hover
Active	-
Disabled	TBD - graphic design
Error	-
Focused	-
Focused Hover	-
Focused Active	-
Focused Disabled	-

...

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 an item stands by it’s own and the entity should be configurable in size and location

• On spaces with 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

• <…>

Future Version (TBD)

< Edge cases, uncertain aspects, incomplete description>

• <…>

• <…>

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

...