...
A widget is a self-contained entity that is designed to work within a workspace.
 |  |
Usage & Behavior
General guidelines
...
Clicking the collapse/expand icon, will collapse / expand the widget using an animation. In this case the workspace layout may be changed.
 |  |
Drag and drop (optional):
Hovering over the widget will switch the widget to the hover state.
Hovering over the header area (including the handle) will change the mouse cursor to a dragging state.
The user can drag the widget to a new location (See Drag and Drop for more information).
(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.
...
Validations and errors
Widgets has no special validations.
In case there are errors and the widget is collapsed an indicator will appear next to the widget title. Guy Hivroni (Unlicensed)
Transitions
Expand and collapse will be animated.
Best practices
Use:
In dashboards.
When the entity should be configurable in size and location.
For any self-contained entity within a workspace (either fixed or when the size or location of the content is configurable).
In dashboards.
Don’t use:
When the entity is not self-contained, and doesn’t stand on its own.
As a single widget in a page.
...