...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
DELETE WHEN FINISHED
Review of other design system
Clear definition of a toolbar
From examples below understand what constitutes as a toolbar
addressing different types for different components
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
<<Remove non-related states or use NA to emphasize the component don’t have that state. See Text fields states >>
State | Image | Comment |
|---|---|---|
Regular |
|
|
Hover |
|
|
Active |
|
|
Selected |
|
|
Selected, Hover |
|
|
Disabled |
|
|
Read Only |
|
|
Error |
|
|
Warning |
|
|
Focused |
|
|
Focused, Hover |
|
|
Focused, Selected |
|
|
Interaction
<<for example, how to change value – type, arrows, use slider. See example: Numeric stepper interaction>>
Validations and errors
<<Show images for Errors and warnings. See example: Radio button validations and errors>>
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
...