diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/3-actions.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/3-actions.svg index 6fa2b38a3d..74c8fe5ac6 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/3-actions.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/3-actions.svg @@ -1,5 +1,5 @@ - - + + @@ -23,13 +23,8 @@ - - - - - - - + + @@ -37,11 +32,12 @@ - - + + + - + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/basic-toolbar-icons.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/basic-toolbar-icons.png deleted file mode 100644 index 5a67a1fe51..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/basic-toolbar-icons.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/basic-toolbar-items.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/basic-toolbar-items.png deleted file mode 100644 index 235a3ca37f..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/basic-toolbar-items.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/basic-toolbar-pagination.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/basic-toolbar-pagination.png deleted file mode 100644 index 34c98caab2..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/basic-toolbar-pagination.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/bulk-selector.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/bulk-selector.png deleted file mode 100644 index 4fede3b34a..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/bulk-selector.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/button-group.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/button-group.png deleted file mode 100644 index 8e2db31756..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/button-group.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/custom-toolbar.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/custom-toolbar.png deleted file mode 100644 index a45b978a58..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/custom-toolbar.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/data-list-example.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/data-list-example.png deleted file mode 100644 index 3f5d432255..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/data-list-example.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/data-table-example.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/data-table-example.png deleted file mode 100644 index 9e0b27e7c4..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/data-table-example.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/filter-group.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/filter-group.png deleted file mode 100644 index 2be5f32c96..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/filter-group.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/greater-than-three.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/greater-than-three.png deleted file mode 100644 index 30e48edbff..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/greater-than-three.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/icon-button-group.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/icon-button-group.png deleted file mode 100644 index f140f8b129..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/icon-button-group.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/items-and-groups.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/items-and-groups.png deleted file mode 100644 index 574e25f18a..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/items-and-groups.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/mobile-basic-copy.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/mobile-basic-copy.png deleted file mode 100644 index 437ee674ed..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/mobile-basic-copy.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/mobile-basic-nocallout.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/mobile-basic-nocallout.png deleted file mode 100644 index d6c43a189a..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/mobile-basic-nocallout.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/mobile-basic.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/mobile-basic.png deleted file mode 100644 index bc506d2086..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/mobile-basic.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/mobile-expanded.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/mobile-expanded.png deleted file mode 100644 index 3ab8f0a5b6..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/mobile-expanded.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/multiple-groups.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/multiple-groups.png deleted file mode 100644 index 3293ff8585..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/multiple-groups.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/overflow-menu.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/overflow-menu.png deleted file mode 100644 index 33444e2173..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/overflow-menu.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/overflow-small-view.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/overflow-small-view.svg new file mode 100644 index 0000000000..980ece869d --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/overflow-small-view.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/overflow.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/overflow.svg index 020ae9e3a3..f70213e086 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/overflow.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/overflow.svg @@ -1,19 +1,35 @@ - + - - - - + + + + - + - - - + + + + + + + + + + + + + + + + + + + - + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/pagination.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/pagination.png deleted file mode 100644 index 55aa40fcc3..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/pagination.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/pagination.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/pagination.svg index d8e6dc076c..26378e14f9 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/pagination.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/pagination.svg @@ -1,24 +1,69 @@ - - - - - - - - - - + + + + + + - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/primary-button.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/primary-button.png deleted file mode 100644 index 8cda12fb30..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/primary-button.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/responsive-closed.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/responsive-closed.png deleted file mode 100644 index cdef4cd0b6..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/responsive-closed.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/responsive-open.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/responsive-open.png deleted file mode 100644 index 60a9aae127..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/responsive-open.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/search-filter.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/search-filter.png deleted file mode 100644 index 850fb1cdba..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/search-filter.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/search.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/search.svg deleted file mode 100644 index 0e97c6131d..0000000000 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/search.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/single-item-as-group.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/single-item-as-group.png deleted file mode 100644 index dbb528c1ac..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/single-item-as-group.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/three-as-a-group.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/three-as-a-group.png deleted file mode 100644 index 0fa1b84a96..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/three-as-a-group.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toggle-group.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toggle-group.png deleted file mode 100644 index 246c45b506..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toggle-group.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-2level.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-2level.png deleted file mode 100644 index 13ff6c6e25..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-2level.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-base.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-base.png deleted file mode 100644 index d8d713049e..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-base.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-elements.svg index 463a0c8157..00e9908b44 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-elements.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-elements.svg @@ -1,44 +1,50 @@ - - - + + + - + - - + + - + - - + + - + - - - - - - - - - + + + + + + + + + - + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-filter-chips.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-filter-chips.png deleted file mode 100644 index a4b82ca003..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-filter-chips.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-filters-mobile.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-filters-mobile.png deleted file mode 100644 index 9650d00870..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-filters-mobile.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-icon-actions.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-icon-actions.svg index c0ca67077c..c13b79d0f6 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-icon-actions.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-icon-actions.svg @@ -1,6 +1,6 @@ - + - + @@ -22,8 +22,8 @@ - - + + @@ -32,16 +32,10 @@ - - - - - - - + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-layout-cardview.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-layout-cardview.png deleted file mode 100644 index 65a05fd9b0..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-layout-cardview.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-layout.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-layout.png deleted file mode 100644 index 23ec5d6d36..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-layout.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-mobile.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-mobile.svg index 52d7513788..d1eb0bdf7a 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-mobile.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-mobile.svg @@ -1,66 +1,121 @@ - - - + + + - + - - + + - + - - + + - + - - - - - - - - + + + + + + + + - + - - - - + + + + - + - - - - + + + + - + - - - - + + + + - + - - - - - - - - + + + + + + + + - + - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-multiple-filters.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-multiple-filters.png deleted file mode 100644 index d5e2986f4d..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-multiple-filters.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-pagination.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-pagination.png deleted file mode 100644 index b929451a36..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-pagination.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-pagination.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-pagination.svg deleted file mode 100644 index b40a53cd81..0000000000 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-pagination.svg +++ /dev/null @@ -1,84 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-spacing.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-spacing.png deleted file mode 100644 index 425856aabd..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-spacing.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-with-divider.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-with-divider.png deleted file mode 100644 index fdf6292869..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-with-divider.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar.png deleted file mode 100644 index c70fa7089c..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/without-pagination.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/without-pagination.svg new file mode 100644 index 0000000000..4f6c7607a5 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/without-pagination.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/toolbar.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/toolbar.md index e3c425994c..38d9550a45 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/toolbar.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/toolbar.md @@ -8,107 +8,149 @@ import '../components.css'; ## Elements -A toolbar is a container for holding a variety of elements (toolbar items and groups) that are used to manipulate a set of data. All items should be centered vertically within a toolbar. +A toolbar is a container for elements that can be used to manipulate data. A variety of components can be used in toolbars, like buttons, controls, or inputs.
![Elements of a basic toolbar.](./img/toolbar-elements.svg)
-Toolbar items are individual components that can be placed inside of a toolbar. Often, it makes sense to group sets of like items to create desired associations and to enable items to respond together to changes in viewport width. By default, there should be an md spacer between items and groups. The following are some toolbar items and groups that come with special spacing considerations. +Within a toolbar, there can be items or groups of items: +1. **Toolbar items:** Individual components within a toolbar, which operate independent of other toolbar elements. +1. **Toolbar item groups:** Sets of associated components that respond to changes in viewport width together together. By default, there should be a md spacer between items and groups. + +## Usage +The toolbar component is designed to be very flexible and support a variety of combinations of items and groups. When laying out your toolbar, be sure to: + +* Align bulk selection as the first element. +* Align filters and global actions to the right of bulk selection. +* Align pagination as the final element. +* If pagination isn't used, align the item count as the final element. ### Bulk selector + +To let users select multiple items within a data view or page, use a [bulk selector](/patterns/bulk-selection/#bulk-selector). +
![Example of a bulk selector.](./img/bulk-selector.svg)
-A [bulk selector](/patterns/bulk-selection/#bulk-selector) can be added to let users select multiple items within a page. Besides allowing the user to select and deselect all items on a page, other application specific options can be added in the dropdown. Bulk selection allows the user to select or deselect all items on a page and provide an indeterminate state that notifies the user when only some items are selected. Bulk selectors should always be the left-most element in a toolbar. +Bulk selectors enable users to select and deselect all items via a checkbox or select other application-specific options via a dropdown menu. When only a portion of items are selected, there's an indeterminate state that signals to users that some items aren't selected. + +Bulk selectors should always be the first element in a toolbar. ### Filter group +To let users filter data based on a few related conditions, use a [filter group](/patterns/filters#mixed-select-filter-group) that combines multiple select filters within a single group. +
![Example of a filter group.](./img/filter-group.svg)
-A filter group combines multiple select filters into a single group. See [filters](/patterns/filters) for more information about using filter groups. - ### Search filter -
-![Example of a search filter.](./img/search.svg) -
- -Add a search filter when you want to display a single search field alongside other filters. For more information about using search input filters, refer to [the filters pattern](/patterns/filters/design-guidelines#text-entry-filters). +To let users filter their data based on text input, add a search filter and refer to guidance on using [text entry filters](/patterns/filters/design-guidelines#text-entry-filters).
![Example of a toolbar with a search filter and filter group.](./img/toolbar-multi-filters.svg)
-### Icon button group -
-![Example of an icon button group.](./img/icon-buttons.svg) -
+### Button group - Actions or settings that are represented by icons can be added in an icon button group. +Include any global actions that apply to selected data items as buttons. -### Button group
![Example of a button group.](./img/buttons.svg)
-Include any global actions that apply to selected data items as buttons. Be selective about which actions to surface on the toolbar, exposing no more than 2 buttons and reserving the rest for an [overflow menu](#overflow-menu) component to save space. +Be selective about which actions to surface on the toolbar, exposing no more than 2 buttons and reserving the rest for an [overflow menu](#overflow-menu) component to save space. -**One or two clickable actions** +Adhere to the following patterns for the number of actions you have. + +#### 1 or 2 clickable actions
![Example of a toolbar with 1-2 actions.](./img/1-2-actions.svg)
-* Use a primary button for any call to action you want a user to take -* In the case that using the action represented should not be encouraged, opt for a secondary button +- Use a primary button for any call-to-action you want a user to take. +- If you don't want to emphasize an action, use a secondary button instead. -**Three clickable actions** +#### 3 clickable actions
![Example of a toolbar with 3 actions.](./img/3-actions.svg)
-* In the specific case where three actions are needed, the suggested guidance is to opt for an overflow menu with two items. This will prevent the toolbar from becoming too crowded, and also prevent the overflow menu from containing just one item. +- If you need to include 3 actions, add 1 to the toolbar and contain the remaining actions within an overflow menu. This will both prevent the toolbar from becoming too crowded, and also the overflow menu from containing just 1 item. -**More than three clickable actions** +#### More than 3 clickable actions
![Example of a toolbar with 3 or more actions.](./img/3-or-more-actions.svg)
-* Use a primary button to indicate the most important action within the table -* Use a secondary button for a second action you want to surface in the toolbar, if it is too important to place in an overflow menu -* Except for a primary button, and a secondary button in cases where absolutely necessary, put all other actions in an overflow menu +* Use a primary button to indicate the most important action within the table. +* Use a secondary button for an additional action you want to surface in the toolbar, if it is too important to place in an overflow menu. +* Any actions beyond your primary and secondary buttons should be contained within an overflow menu. + +### Icon group + +To save space, icon groups can be used to contain actions or settings that can be well-represented by button icons. + +
+![Example of an icon button group.](./img/icon-buttons.svg) +
+ +An icon group should always be placed between filters and global button actions. + +
+![A toolbar with a filter and sort icon in a group.](./img/toolbar-icon-actions.svg) +
### Overflow menu +An overflow menu groups together multiple actions, collapsing them into a menu with a kebab/options icon toggle. +
![Example of an overflow menu.](./img/overflow.svg)
-An overflow menu is a component that can be used in a toolbar (or elsewhere) to group a number of actions that should be collapsed into a kebab at a certain breakpoint. In the toolbar, the overflow menu will commonly be used to group a set of actions that are intended to collapse into the kebab at smaller viewport sizes. +At smaller viewport sizes, any primary and secondary buttons that are located in the toolbar can also be collapsed into the overflow menu to save space. + +
+![An overflow menu is expanded from a kebab icon within a toolbar.](./img/overflow-small-view.svg) +
### Pagination +To let users navigate through multiple pages of data, add a pagination component, which will always be the final toolbar item. + +Compact pagination consumes less horizontal space and is the recommended choice, unless your application requires more precise control over paging options (like the ability to navigate to a specific page). +
![Example of toolbar pagination.](./img/pagination.svg)
- When pagination is supported, a pagination component will be included. Pagination will always be right aligned in the toolbar. If pagination is not used, substitute the item count for pagination control. For example, report “17 items” to represent the total number of items or “10 of 17 items” to indicate that 10 items were returned as the result of a filter event. +### Item count + +If pagination is not used, show the item count instead. +For example, display “17 items” to represent the total number of items or “10 of 17 items” to indicate that 10 items were returned after filtering. + +
+![Toolbar with a text label that specifies item count, rather than a pagination component.](./img/without-pagination.svg) +
### Toolbar toggle groups -A [toolbar toggle group](/components/toolbar/html#toggle-group) can be used when you want to collapse a set of items into an overlay panel at a certain breakpoint for mobile applications. This allows complex toolbars with multiple items and groups of items to be responsive. A toolbar toggle group is useful for containing filter controls, for example. When the toolbar responds to adapt to a mobile viewport, the contents contained in a toggle group will collapse into an overlay panel that can be toggled by clicking the filter icon. +To collapse toolbar items into an overlay panel at a certain breakpoint, use a [toolbar toggle group](/components/toolbar/html#toggle-group). This allows complex toolbars with many items and groups to be responsive for mobile devices. + +For example, a toolbar toggle group is particularly useful for containing filter controls. When the toolbar adapts to a mobile viewport, the toggle group contents will collapse into an overlay panel that can be toggled via the filter icon.
![Example of a toolbar with filters hidden in a toggle group.](./img/filter-toggle.svg)
-Note: this should not be confused with the [toggle group component](/components/toggle-group) that is used for selecting between options on a page. +**Note:** This is not the same as the [toggle group component](/components/toggle-group), which is used for selecting between options on a page. ### Vertical dividers When you have a large toolbar containing many groups of items, use a vertical divider to further separate the groups visually. @@ -117,74 +159,55 @@ When you have a large toolbar containing many groups of items, use a vertical di ![Example of a toolbar with a divider.](./img/divider.svg) -## Usage -The PatternFly toolbar is designed to be very flexible and allow a variety of combinations of items and groups as outlined above. When laying out your toolbar, be sure to: - -* Align bulk selection as the left-most element, if used. -* Align filters and global actions to the right of bulk selection, if used. -* Align pagination as the right-most element, if used. -* Align the item count as the right-most element, if pagination isn't used. +### Basic toolbar +For most cases, you should use a basic toolbar with default spacing and, generally, the following toolbar items and groups. -### Examples -**Basic toolbar**
![Example of a basic toolbar.](./img/toolbar-basic.svg)
-The basic toolbar is sufficient for most cases. The example above shows the toolbar with default spacing. It includes the following elements: -1. **Bulk selector:** The bulk selector supports selection of multiple items in a list, table, or card grid. It is always the leftmost item. -2. **Filter:** The example shows an attribute-value filter, but any supported filter can be used here. See [filters](/patterns/filters) usage guidelines for more information. -3. **Overflow menu:** In this example an overflow menu is used to hold global actions. But a simple button group could also be used here if you have two or less actions. -4. **Item count**: When a filter is applied, the item count will be updated to represent the filtered subset of items. For example, “10 of 17 items.” The item count should be the right-most element. - -**Toolbar with pagination** -
-![Example of a basic toolbar with pagination.](./img/toolbar-pagination.svg) -
+1. [**Bulk selector:**](#bulk-selector) Used to select multiple items. +2. **Filter:** Any [filter](/patterns/filters) that best suits your use case. This example shows an attribute-value filter. +3. [**Overflow menu:**](#overflow-menu) Contains additional actions that don't fit in the toolbar. +4. [**Item count**:](#item-count) The amount of items in the associated data set. You can also use [pagination](#pagination) instead. -When pagination is used, the pagination component replaces the item count. It should be the right-most element. Here, the toolbar is shown with both full and compact pagination options. Compact pagination consumes less horizontal space and is the recommended choice unless your application requires more precise control over paging options (like the ability to navigate to a specific page). +### Custom toolbar -**Toolbar with an icon group** -
-![Example of a toolbar with an icon group.](./img/toolbar-icon-actions.svg) -
+The toolbar component is extremely flexible. You can create custom toolbar layouts using items, groups, and spacers. -To save space, you may represent some actions as icons. Use an icon group to provide the proper spacing between icons. Here, sort and export actions are represented as icons. The icon group should always be placed after the filters and before any global actions represented by buttons, if they exist. +For example, in this image, a custom toolbar with 3 labeled filters is created by pairing a text label and a select component. To better group filters with related labels, a lg spacer is used in place of the default md spacer. -**Custom toolbar**
![Example of a custom toolbar layout.](./img/toolbar-custom.svg)
-The toolbar component is extremely flexible and you can create custom toolbar layouts by working with items, groups, and spacers. Here, a custom toolbar with three labeled filters is created by paring a text label and a select component. While there is an md spacer between items by default, this image uses a lg spacer to better group each filter with its related label. +### Mobile toolbars -### The toolbar on mobile +Toolbars adapt to smaller viewport sizes by collapsing or hiding elements that take significant space, including filters and actions. When used on mobile devices, pagination will be available in the footer of the data view, instead of within the toolbar. -The toolbar adapts to smaller viewport sizes by collapsing or hiding elements that take significant space, including filters and actions. On mobile devices, when used, pagination will be available from the footer, only. When designing toolbars to be responsive: +To create responsive toolbar designs: -* Place filter controls in a [toggle group](#toggle-groups) so they will be hidden in a collapsible panel at mobile breakpoints. -* Use an [overflow menu](#overflow-menu) to collapse actions into a kabob menu. +- Place filter controls in a [toggle group](#toolbar-toggle-groups) so they will be hidden in a collapsible panel at mobile breakpoints. +- Use an [overflow menu](#overflow-menu) to collapse actions into a kebab/options menu. -The following is an example of a complex toolbar optimized for mobile. +For example, this image contains a complex toolbar that's been optimized for mobile. The search filter and filter group (containing 3 drop-down filters) are placed in a toggle group, which is collapsed at mobile screen sizes. The 2 action buttons are collapsed into an overflow menu. The bulk selector and sort icon button remain visible at all breakpoints.
![Example of a toolbar on mobile.](./img/toolbar-mobile.svg)
-Here, the search filter and filter group containing three drop-down filters are placed in a toggle group that collapsed when the screen shrinks to mobile size. The two action buttons are part of an overflow menu that collapses to a single kabob menu. The bulk selector and sort icon button are implemented as toolbar items that remain visible at all breakpoints. - ## Placement -The toolbar should live as close to possible to the content it controls. For a card view or similar views, the toolbar should be placed inside of the page header. This arrangement is also recommended if the user may switch between views (e.g. view as cards or as a list). You may optionally apply the `pf-m-sticky-top` modifier to the header section to create a sticky toolbar and prevent it from scrolling off the page. +Toolbars should be placed as close as possible to the content they control. They should stretch the full width of their enclosing container, with their elements aligned in a horizontal row. Don't place additional spacers before the first or after the last items; the toolbar component provides its own padding. + +For pages like card views, the toolbar should be placed inside of the page header. This arrangement is also recommended if the user can switch between views, like choosing between a card view and list view. You may optionally apply the `pf-m-sticky-top` modifier to the header section to create a sticky toolbar and prevent it from scrolling off the page.
![Example of a toolbar in a page header.](./img/toolbar-page-header.svg)
-For list and table views that are placed inside of an enclosing card, the toolbar should always be placed inside the card and above the data set to which it applies. +For lists or table views that are placed inside of a card, the toolbar should always be placed inside the card and above the data set to which it applies.
![Example of a toolbar in a card.](./img/toolbar-card.svg) -
- -Toolbars should stretch to the width of the enclosing container, with the elements aligned in a horizontal row. There should be no spacers on the left and right edges of the toolbar as the toolbar provides its own padding. \ No newline at end of file + \ No newline at end of file