Related Pages: << Links to related pages, if relevant >>

• Description

• Basic Flow

• Types 

• Usage & Behavior

  • General guidelines

    • Structure

    • Placement and Positioning

    • Default State

    • Content

    • Internal Logic

  • States

  • Interaction

  • Validations and errors

  • Transitions

  • Best practices

• Future Version (TBD)

• Accessibility Compliance

• Design

• Code

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>>

Usage & Behavior

General guidelines

Structure

do we have vertical toolbar?

take 2 rows?

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

<<Remove non-related states or use NA to emphasize the component don’t have that state. See Text fields states >>

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

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility

Design

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

  • https://experience.sap.com/fiori-design-web/table-bar/

  • https://experience.sap.com/fiori-design-web/header-toolbar/

  • https://experience.sap.com/fiori-design-web/chart-toolbar/

  • https://experience.sap.com/fiori-design-web/footer-toolbar/

• toolbar cannot come together with Ribbon.

Examples

https://zpl.io/2p6N8QQ	https://zpl.io/br8Njl5
https://zpl.io/begRk0p	https://zpl.io/aNzWlZa
https://app.zeplin.io/project/5979abf9bd8c83d7af16e80a/screen/5c5161dd9696de3093d54226/	https://zpl.io/2p9DX8N
https://zpl.io/V4myolN