| Table of Contents |
|---|
...
A widget is a self-contained entity that is designed to work within a workspace.
 |
Usage & Behavior
...
Includes only actions that are related to the widget (such as expand/collapse, maximize, delete, configure, etc.). Content-related actions will be presented within the content area.
The action area should include up to 3 elements, including:
Icon Buttons, usually used for primary actions.
Action Menu, usually used for secondary actions. Where there are no primary actions, all actions may be presented in the actions menu (without any icon buttons).
Tabbed Widgets
Different content types can be gathered under a single widget, using Tabs.
The tabs replace the widget header and the additional information.
The action buttons refer to the widget as a whole (all tabs together).
...
Placement and Positioning
...
The widget name will be aligned to the left.
Additional information (if exists) will be aligned to the widget name, separated by a line separator.
Where space is constrained, the widget name and the additional information will be truncated. In this case, the full information (both name and additional information) will be presented in a Tooltip.
Internal Logic
Tabbed Widget. Different content types can be gathered under a single widget, using Tabs.
...
The tabs replace the widget header and the additional information.
The action buttons refer to the widget as a whole (all tabs together).
...
 |
Configuration. Widget configurations, such as resizing or moving location, should be saved per user for future sessions.
...
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 | - |
...