DELETE WHEN FINISHED
Review of other design systems
Clear definition of a toolbar
From the examples below understand what constitutes as a toolbar
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? take 2 rows?
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)