From 13780e6ec9aaaf4c368004a87cf9ca4a7713c3fd Mon Sep 17 00:00:00 2001 From: Bekah Stephens Date: Mon, 23 Jun 2025 12:48:34 -0400 Subject: [PATCH 01/11] docs(toolbar): Updates images for v6. --- .../components/toolbar/img/1-2-actions.svg | 40 +++++ .../components/toolbar/img/3-actions.svg | 48 ++++++ .../toolbar/img/3-or-more-actions.svg | 50 ++++++ .../components/toolbar/img/bulk-selector.svg | 14 ++ .../components/toolbar/img/buttons.svg | 10 ++ .../components/toolbar/img/divider.svg | 44 +++++ .../components/toolbar/img/filter-group.svg | 24 +++ .../components/toolbar/img/filter-toggle.svg | 81 +++++++++ .../components/toolbar/img/icon-buttons.svg | 6 + .../components/toolbar/img/overflow.svg | 19 ++ .../components/toolbar/img/pagination.svg | 24 +++ .../components/toolbar/img/search.svg | 7 + .../components/toolbar/img/toolbar-basic.svg | 47 +++++ .../components/toolbar/img/toolbar-card.svg | 102 +++++++++++ .../components/toolbar/img/toolbar-custom.svg | 51 ++++++ .../toolbar/img/toolbar-elements.svg | 39 +++++ .../toolbar/img/toolbar-icon-actions.svg | 42 +++++ .../components/toolbar/img/toolbar-mobile.svg | 117 +++++++++++++ .../toolbar/img/toolbar-multi-filters.svg | 54 ++++++ .../toolbar/img/toolbar-page-header.svg | 162 ++++++++++++++++++ .../toolbar/img/toolbar-pagination.svg | 74 ++++++++ .../components/toolbar/toolbar.md | 86 +++++++--- 22 files changed, 1120 insertions(+), 21 deletions(-) create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/1-2-actions.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/3-actions.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/3-or-more-actions.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/bulk-selector.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/buttons.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/divider.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/filter-group.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/filter-toggle.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/icon-buttons.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/overflow.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/pagination.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/search.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-basic.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-card.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-custom.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-elements.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-icon-actions.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-mobile.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-multi-filters.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-page-header.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-pagination.svg diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/1-2-actions.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/1-2-actions.svg new file mode 100644 index 0000000000..53fd4a2f92 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/1-2-actions.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 new file mode 100644 index 0000000000..d6494afe0a --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/3-actions.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/3-or-more-actions.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/3-or-more-actions.svg new file mode 100644 index 0000000000..0d66b38406 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/3-or-more-actions.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/bulk-selector.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/bulk-selector.svg new file mode 100644 index 0000000000..88214f1f74 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/bulk-selector.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/buttons.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/buttons.svg new file mode 100644 index 0000000000..38b313b64a --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/buttons.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/divider.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/divider.svg new file mode 100644 index 0000000000..76f550ae43 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/divider.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/filter-group.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/filter-group.svg new file mode 100644 index 0000000000..8decd23331 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/filter-group.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/filter-toggle.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/filter-toggle.svg new file mode 100644 index 0000000000..fa48478704 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/filter-toggle.svg @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/icon-buttons.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/icon-buttons.svg new file mode 100644 index 0000000000..ee5528ad0e --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/icon-buttons.svg @@ -0,0 +1,6 @@ + + + + + + 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 new file mode 100644 index 0000000000..020ae9e3a3 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/overflow.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + 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 new file mode 100644 index 0000000000..d8e6dc076c --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/pagination.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + 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 new file mode 100644 index 0000000000..0e97c6131d --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/search.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-basic.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-basic.svg new file mode 100644 index 0000000000..ca03716213 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-basic.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-card.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-card.svg new file mode 100644 index 0000000000..6abb9185ed --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-card.svg @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-custom.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-custom.svg new file mode 100644 index 0000000000..c6d51c788a --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-custom.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 new file mode 100644 index 0000000000..27e8ccc862 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-elements.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 new file mode 100644 index 0000000000..c2c6731a70 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-icon-actions.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 new file mode 100644 index 0000000000..f46eae5b4a --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-mobile.svg @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-multi-filters.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-multi-filters.svg new file mode 100644 index 0000000000..7a5a1c1c2f --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-multi-filters.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-page-header.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-page-header.svg new file mode 100644 index 0000000000..5131e0037c --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-page-header.svg @@ -0,0 +1,162 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 new file mode 100644 index 0000000000..6cc7db4bf4 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-pagination.svg @@ -0,0 +1,74 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 26b4a4c4d9..7ad88d820c 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 @@ -4,59 +4,81 @@ section: components related: ['Overflow menu', 'Pagination'] --- +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. -basic toolbar with 16px spacing +
+![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. The default spacing between items and groups is 16px, but this can be modified, if required. The following are some toolbar items and groups that come with special spacing considerations. ### Bulk selector -bulk selector item +
+![Example of a bulk selector.](./img/bulk-selector.svg) +
A bulk selector can be added when you want to give users the ability to 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 and has a 24px spacer to its right. ### Filter group -filter 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 -search filter +
+![Example of a search filter.](./img/search.svg) +
A search filter is intended to be used with a filter group as shown below when you want to include a single search field together with one or more select filters. It includes an 8px spacer to the right of the item to enforce association with other filters. See the [filters](/patterns/filters) documentation for more information about using search filters. -toolbar with a search filter and filter group +
+![Example of a toolbar with a search filter and filter group.](./img/toolbar-multi-filters.svg) +
### Icon button group -icon button group +
+![Example of an icon button group.](./img/icon-buttons.svg) +
Actions or settings that are represented by icons can be added in an icon button group. ### Button group -button group +
+![Example of a button group.](./img/buttons.svg) +
Any global actions that apply to selected data items are included left-aligned following filter and icon buttons. Be selective about which actions to surface on the toolbar, exposing no more than two buttons and reserving the rest for an [overflow menu](#overflow-menu) component to save space. **One or two clickable actions** -single button +
+![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 **Three clickable actions** -three 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. **More than three clickable actions** -primary and secondary button +
+![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 @@ -64,13 +86,17 @@ Any global actions that apply to selected data items are included left-aligned f ### Overflow menu -button group +
+![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. ### Pagination -pagination +
+![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. @@ -78,14 +104,18 @@ An overflow menu is a component that can be used in a toolbar (or elsewhere) to ### 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. -toolbar with filters hidden in a toggle group +
+![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. ### Vertical dividers When you have a large toolbar containing many groups of items, use a vertical divider to further separate the groups visually. -toolbar with divider +
+![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: @@ -97,7 +127,9 @@ The PatternFly toolbar is designed to be very flexible and allow a variety of co ### Examples **Basic toolbar** -toolbar with standard items +
+![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. @@ -106,17 +138,23 @@ The basic toolbar is sufficient for most cases. The example above shows the tool 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** -basic toolbar with pagination +
+![Example of a basic toolbar with pagination.](./img/toolbar-pagination.svg) +
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). **Toolbar with an icon group** -basic toolbar with an icon group +
+![Example of a toolbar with an icon group.](./img/toolbar-icon-actions.svg) +
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. **Custom toolbar** -custom toolbar layout +
+![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. Items are spaced by 16px by default but here the spacing to the right of each Select filter has been modified to 24px to help better group each filter with its related label. @@ -129,7 +167,9 @@ The toolbar adapts to smaller viewport sizes by collapsing or hiding elements th The following is an example of a complex toolbar optimized for mobile. -toolbar with filters and actions hidden on mobile +
+![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. @@ -137,10 +177,14 @@ Here, the search filter and filter group containing three drop-down filters are 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. -![toolbar in page header](./img/toolbar-layout-cardview.png) +
+![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. -![layout](./img/toolbar-layout.png) +
+![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 From dfbba61b75bb6372a87c48dc49aefec75453900f Mon Sep 17 00:00:00 2001 From: Bekah Stephens Date: Tue, 1 Jul 2025 08:59:50 -0500 Subject: [PATCH 02/11] Fixing the sizing of an image. --- .../toolbar/img/toolbar-elements.svg | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) 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 27e8ccc862..05335923ad 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,6 +1,6 @@ - - - + + + @@ -24,12 +24,12 @@ - - - - - - + + + + + + From 645a2b3a49bd00176f7e7c3050d4c9b6f3ab8c83 Mon Sep 17 00:00:00 2001 From: Bekah Stephens Date: Tue, 1 Jul 2025 09:18:39 -0500 Subject: [PATCH 03/11] Updating bulk selector component. --- .../components/toolbar/img/1-2-actions.svg | 35 ++-- .../components/toolbar/img/3-actions.svg | 42 +++-- .../toolbar/img/3-or-more-actions.svg | 46 +++--- .../components/toolbar/img/bulk-selector.svg | 19 ++- .../components/toolbar/img/divider.svg | 43 ++--- .../components/toolbar/img/filter-toggle.svg | 74 +++++---- .../components/toolbar/img/toolbar-basic.svg | 65 ++++---- .../components/toolbar/img/toolbar-custom.svg | 67 ++++---- .../toolbar/img/toolbar-elements.svg | 47 +++--- .../toolbar/img/toolbar-icon-actions.svg | 39 +++-- .../components/toolbar/img/toolbar-mobile.svg | 156 ++++++++++-------- .../toolbar/img/toolbar-multi-filters.svg | 59 ++++--- .../toolbar/img/toolbar-pagination.svg | 80 +++++---- 13 files changed, 427 insertions(+), 345 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/1-2-actions.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/1-2-actions.svg index 53fd4a2f92..21b47ff921 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/1-2-actions.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/1-2-actions.svg @@ -3,28 +3,33 @@ - + - - + + - - - - - - - - - + + - - - + + + + + + + + + + + + + + + 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 d6494afe0a..6fa2b38a3d 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 @@ -2,28 +2,34 @@ - + - - + + - - - - - - - - - + + - - - + + + + + + + + + + + + + + + + @@ -31,11 +37,11 @@ - - + + - + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/3-or-more-actions.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/3-or-more-actions.svg index 0d66b38406..ff2c269b3f 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/3-or-more-actions.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/3-or-more-actions.svg @@ -2,28 +2,34 @@ - + - - + + - - - - - - - - - + + - - - + + + + + + + + + + + + + + + + @@ -31,13 +37,13 @@ - - - - + + + + - + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/bulk-selector.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/bulk-selector.svg index 88214f1f74..ff84ea9142 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/bulk-selector.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/bulk-selector.svg @@ -1,14 +1,19 @@ - + - - + + - + - - - + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/divider.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/divider.svg index 76f550ae43..50c0c1569e 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/divider.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/divider.svg @@ -3,32 +3,37 @@ - + - - + + - - - - - - - - - - - - - + + - - - + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/filter-toggle.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/filter-toggle.svg index fa48478704..823d5691ee 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/filter-toggle.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/filter-toggle.svg @@ -2,19 +2,24 @@ - + - - + + - - - - + + + + + + + + + @@ -24,34 +29,39 @@ - - - - - + + + + + - - - - - - + + + + + + + + + + + - + - + - + @@ -59,23 +69,23 @@ - + - + - + - - + + - - - - - - + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-basic.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-basic.svg index ca03716213..9674d39261 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-basic.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-basic.svg @@ -2,45 +2,50 @@ - + - - + + - - - + + - - - - - - - - - - - - + + + + + - - - + + + + + + + + + + + + + + + + - - - - - - - - - + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-custom.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-custom.svg index c6d51c788a..26a5ea551e 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-custom.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-custom.svg @@ -2,50 +2,55 @@ - + - - + + - + + + + + + - - + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - - - - - + + + + + + + + + + + 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 05335923ad..463a0c8157 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 @@ -2,38 +2,43 @@ - + - - + + - - - - - - - - - + + - - - + + + + + + + + + + + + + + + - - - - - - + + + + + + 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 c2c6731a70..c0ca67077c 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 @@ -3,30 +3,35 @@ - + - - + + - - - - - - - - - - - + + - - - + + + + + + + + + + + + + + + + + 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 f46eae5b4a..69f58748c1 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 @@ -2,116 +2,126 @@ - + - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + + - - - - - - + + + + + + + + + + + - + - + - + - + - + - + - + - + - - - - - - - - - + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-multi-filters.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-multi-filters.svg index 7a5a1c1c2f..390e2ddc2d 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-multi-filters.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/toolbar-multi-filters.svg @@ -3,42 +3,47 @@ - + - - + + - - - + + - - - - - - + + + + + - - - - - - + + + + + + - - - - - - - - - + + + + + + + + + + + + + + + + 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 index 6cc7db4bf4..b40a53cd81 100644 --- 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 @@ -2,68 +2,78 @@ - + - - + + - - - - - - - - - + + - - - + + + + + + + + + + + + + + + - + - + - - - - - + + + + + - - - - - - - - - - + + + + + + + + + + + + + + + - - - + + + From ced8128b024580b3662b11f51e72017b2bb3930a Mon Sep 17 00:00:00 2001 From: Bekah Stephens <54444091+bekah-stephens@users.noreply.github.com> Date: Wed, 2 Jul 2025 08:42:17 -0400 Subject: [PATCH 04/11] Update packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/toolbar.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- .../content/design-guidelines/components/toolbar/toolbar.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 7ad88d820c..2602a6a919 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 @@ -14,7 +14,7 @@ A toolbar is a container for holding a variety of elements (toolbar items and gr ![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. The default spacing between items and groups is 16px, but this can be modified, if required. The following are some toolbar items and groups that come with special spacing considerations. +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. ### Bulk selector
From 2bb5ba083ce29d8e7d5ae06167a81b7eebeda766 Mon Sep 17 00:00:00 2001 From: Bekah Stephens <54444091+bekah-stephens@users.noreply.github.com> Date: Wed, 2 Jul 2025 08:42:52 -0400 Subject: [PATCH 05/11] Update packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/toolbar.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- .../content/design-guidelines/components/toolbar/toolbar.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 2602a6a919..07e6d01514 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 @@ -21,7 +21,7 @@ Toolbar items are individual components that can be placed inside of a toolbar. ![Example of a bulk selector.](./img/bulk-selector.svg)
-A bulk selector can be added when you want to give users the ability to 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 and has a 24px spacer to its right. +A [bulk selector]([/patterns/bulk-selection/#bulk-selector](https://www.patternfly.org/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. ### Filter group From 4bd3541a8c27236dd0b2fffac45e8f2f47e705c2 Mon Sep 17 00:00:00 2001 From: Bekah Stephens <54444091+bekah-stephens@users.noreply.github.com> Date: Wed, 2 Jul 2025 08:43:17 -0400 Subject: [PATCH 06/11] Update packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/toolbar.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- .../content/design-guidelines/components/toolbar/toolbar.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 07e6d01514..e54c84c436 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 @@ -37,7 +37,7 @@ A filter group combines multiple select filters into a single group. See [filter ![Example of a search filter.](./img/search.svg) -A search filter is intended to be used with a filter group as shown below when you want to include a single search field together with one or more select filters. It includes an 8px spacer to the right of the item to enforce association with other filters. See the [filters](/patterns/filters) documentation for more information about using search filters. +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.
![Example of a toolbar with a search filter and filter group.](./img/toolbar-multi-filters.svg) From 950206b7cb4d3f7c6a476adf8e31de48dfe6880f Mon Sep 17 00:00:00 2001 From: Bekah Stephens <54444091+bekah-stephens@users.noreply.github.com> Date: Wed, 2 Jul 2025 08:43:37 -0400 Subject: [PATCH 07/11] Update packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/toolbar.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- .../content/design-guidelines/components/toolbar/toolbar.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 e54c84c436..632c0cd61a 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 @@ -55,7 +55,7 @@ Add a search filter when you want to display a single search field alongside oth ![Example of a button group.](./img/buttons.svg)
-Any global actions that apply to selected data items are included left-aligned following filter and icon buttons. Be selective about which actions to surface on the toolbar, exposing no more than two buttons and reserving the rest for an [overflow menu](#overflow-menu) component to save space. +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. **One or two clickable actions** From e8a55729a97e996cf7c81e6d86eb4cc104880642 Mon Sep 17 00:00:00 2001 From: Bekah Stephens <54444091+bekah-stephens@users.noreply.github.com> Date: Wed, 2 Jul 2025 08:44:00 -0400 Subject: [PATCH 08/11] Update packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/toolbar.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- .../content/design-guidelines/components/toolbar/toolbar.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 632c0cd61a..af112558f3 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 @@ -156,7 +156,7 @@ To save space, you may represent some actions as icons. Use an icon group to pro ![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. Items are spaced by 16px by default but here the spacing to the right of each Select filter has been modified to 24px to help better group each filter with its related label. +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. ### The toolbar on mobile From 9de03ad6de5640d695c0138170a61e0940647552 Mon Sep 17 00:00:00 2001 From: Bekah Stephens Date: Wed, 2 Jul 2025 08:49:23 -0500 Subject: [PATCH 09/11] Adjusting images. --- .../components/toolbar/img/filter-toggle.svg | 120 +++++++----- .../components/toolbar/img/toolbar-mobile.svg | 181 ++++++------------ 2 files changed, 128 insertions(+), 173 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/filter-toggle.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/filter-toggle.svg index 823d5691ee..246a4493fe 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/filter-toggle.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/img/filter-toggle.svg @@ -1,5 +1,5 @@ - - + + @@ -28,64 +28,80 @@ - + - + - - + + - + - - + + - + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - + - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + - + - - - - - - + + + + + + + + + + + + + + + + + + + + + + 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 69f58748c1..52d7513788 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,127 +1,66 @@ - - - + + + - + - - + + - + - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From aab6045fdaf6675905932ee6acc16c9d74d9d1b6 Mon Sep 17 00:00:00 2001 From: Bekah Stephens <54444091+bekah-stephens@users.noreply.github.com> Date: Wed, 2 Jul 2025 10:52:38 -0400 Subject: [PATCH 10/11] Update packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/toolbar.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- .../content/design-guidelines/components/toolbar/toolbar.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 af112558f3..27777dbadf 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 @@ -21,7 +21,7 @@ Toolbar items are individual components that can be placed inside of a toolbar. ![Example of a bulk selector.](./img/bulk-selector.svg) -A [bulk selector]([/patterns/bulk-selection/#bulk-selector](https://www.patternfly.org/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. +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. ### Filter group From 055deafead7a49bc552e12ab960795d09529dac0 Mon Sep 17 00:00:00 2001 From: Bekah Stephens <54444091+bekah-stephens@users.noreply.github.com> Date: Wed, 2 Jul 2025 10:52:45 -0400 Subject: [PATCH 11/11] Update packages/documentation-site/patternfly-docs/content/design-guidelines/components/toolbar/toolbar.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- .../content/design-guidelines/components/toolbar/toolbar.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 27777dbadf..e3c425994c 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 @@ -37,7 +37,7 @@ A filter group combines multiple select filters into a single group. See [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. +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).
![Example of a toolbar with a search filter and filter group.](./img/toolbar-multi-filters.svg)