DELETE WHEN FINISHED
what should be in the toolbar
Clear definition of 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
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 >>
Description
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 |
|
Usage & Behavior
General guidelines
Structure
A horizontal row dedicated to buttons and actions that apply to a data set.
Placement and Positioning
The toolbar is located on top of a data container (Data table, Widget, List Etc…) and takes the full width of the data set
In some cases, the row of a toolbar can accommodate additional non-related components (e.g. a widget with a title text)
Right-aligned- actions that impact the data (e.g. delete)
Left-aligned- actions impacting the view of the data (e.g. print, change view mode)
Content
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
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility
Design
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
How much to hide - Burger menu?
should tags be used?
Links -
https://www.carbondesignsystem.com/patterns/text-toolbar-pattern/.- text toolbar for rich editing of text
Sap
toolbar cannot come together with Ribbon.
Examples
.png?version=1&modificationDate=1601982390519&cacheVersion=1&api=v2)
.png?version=1&modificationDate=1602071737157&cacheVersion=1&api=v2)