Lead: Shani Laendler (Unlicensed) -
| Status | ||||
|---|---|---|---|---|
|
...
Structure
Header:
Widget name and with/out additional information
Actions : action icons and/or action menu
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 and dashboard-like pages, 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:
...
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.
In some cases all actions can be presented in the action menu, especially when no action is a primary or important or when space is constrained:
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)
Widget Configuration
...
Configuration: widget configurations, such as location change or resizing, should be saved per
...
user
...
for future sessions.
...
Expand-collapse
In some cases the widget can be collapsed. This option will be available from
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
Drag
In
some widgets, especially on dashboard or dashboard-like pages, can be dragged to change their location.(optional) drag: hover over the header area will change the mouse cursor
will changeto 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:
Resize: Some widgets can be resized.
In hover over the resizable boundary line(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.
...
States
...
State
...
Image
...
Regular
...
Hover
...
Active
...
-
...
Disabled
...
TBD - graphic design
...
Error
...
-
...
Focused
...
-
...
Focused Hover
...
-
...
Focused Active
...
-
...
Focused Disabled
...
-
Interaction
...
State
...
Image
...
Description
...
Regular
...
Hover
...
Action buttons are presented
Text truncated (when relevant)
...
Hover - header
...
Hover - boarder line
...
Resize
...
Text truncated (when relevant)
All actions are moved to the action menu (when relevant)
...
Collapse (click on Collapse icon button, or select ‘Collapse’ in menu)
...
The content area is collapsed in animation
...
Click-and-hold while changing the mouse location will resize the widget.
Validations and errors
No validation or error.
...
Expand collapse will be in animation. TBD - Graphics
Best practices
<<e.g. Slider should display a label its on>>
...
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
...