DELETE WHEN FINISHED
Review of other design systemswhat should be in the toolbar
Clear definition of a toolbar
From the examples below understand what constitutes as a toolbar
Only for Table, Widget-content, List
Not addressing Page level actions, Cards, Pop overs
general guidelines page addressing different types for different components or general guidelines for all types with examples
Should the Table (Widget) section of the toolbar be removed
Structure
do we have a vertical toolbar? - no take 2 rows? - no
Related Pages: << Links to related pages, if relevant >>
...
A toolbar is a grouped set of buttons and other types of components used to apply action to data
<< Most communicative screenshot of the component >>
Types
<< Relevant only if the component has several distinct types (e.g. editable tables, nested tables). In this case, each type should be described in a sub-page. The main page should be used only for the common grounds of the component>>
Type | Usage | Image |
|---|---|---|
Link to the relevant page |
| |
Link to the relevant page |
|
...
A toolbar can include a variety of components as Action Menus, Buttons, Pagination, Search etc…
Internal Logic
<<if there is a certain mechanism that cannot be separated from the component. See example: Data tables internal logic >>
States
According to Buttons states
Interaction
<<for example, how to change value – type, arrows, use slider. See example: Numeric stepper interaction>>
Validations and errors
According to Buttons states
Transitions
<<Where possible describe shortly and demonstrate transitions or animations of the component pattern with animated GIF>>
Best practices
<Whenever a recommendation (not a must) is provided>>
Use:
<…>
<…>
Don’t use
<…>
<…>
General
<…>
Future Version (TBD)
< Edge cases, uncertain aspects, incomplete description>
<…>
<…>
Accessibility Compliance
...
Zeplin link | Screen thumbnail |
|---|---|
<<Short Zeplin link. You >> | <<Screen with 200 width>> |
Code
<<a box containing the code - when there is no code to present use the Coming Soon GIF>>
...
Delete at the end anything below this
...