@patternfly/patternfly 6.0.0-alpha.63 → 6.0.0-alpha.64

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/components/ActionList/action-list.css +18 -17
  2. package/components/ActionList/action-list.scss +26 -16
  3. package/components/Button/button.css +4 -9
  4. package/components/Button/button.scss +4 -9
  5. package/components/Masthead/masthead.css +15 -29
  6. package/components/Masthead/masthead.scss +20 -36
  7. package/components/OverflowMenu/overflow-menu.css +17 -47
  8. package/components/OverflowMenu/overflow-menu.scss +27 -65
  9. package/components/Pagination/pagination.css +6 -3
  10. package/components/Pagination/pagination.scss +4 -3
  11. package/components/Toolbar/toolbar.css +2525 -1040
  12. package/components/Toolbar/toolbar.scss +232 -534
  13. package/docs/components/ActionList/examples/ActionList.md +73 -22
  14. package/docs/components/LogViewer/examples/LogViewer.md +50 -50
  15. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  16. package/docs/components/Toolbar/examples/Toolbar.md +374 -419
  17. package/docs/demos/AboutModal/examples/AboutModal.md +2 -2
  18. package/docs/demos/Alert/examples/Alert.md +6 -6
  19. package/docs/demos/BackToTop/examples/BackToTop.md +2 -2
  20. package/docs/demos/Banner/examples/Banner.md +4 -4
  21. package/docs/demos/CardView/examples/CardView.md +3 -3
  22. package/docs/demos/ContextSelector/examples/ContextSelector.md +7 -7
  23. package/docs/demos/Dashboard/examples/Dashboard.md +2 -2
  24. package/docs/demos/DataList/examples/DataList.md +11 -11
  25. package/docs/demos/DescriptionList/examples/DescriptionList.md +6 -6
  26. package/docs/demos/Drawer/examples/Drawer.md +10 -10
  27. package/docs/demos/JumpLinks/examples/JumpLinks.md +12 -12
  28. package/docs/demos/Masthead/examples/Masthead.md +21 -21
  29. package/docs/demos/Modal/examples/Modal.md +12 -12
  30. package/docs/demos/Nav/examples/Nav.md +12 -12
  31. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +10 -10
  32. package/docs/demos/Page/examples/Page.md +18 -18
  33. package/docs/demos/Page/examples/Penta.md +2 -2
  34. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +19 -19
  35. package/docs/demos/Skeleton/examples/Skeleton.md +2 -2
  36. package/docs/demos/Table/examples/Table.md +42 -45
  37. package/docs/demos/Tabs/examples/Tabs.md +13 -13
  38. package/docs/demos/Toolbar/examples/Toolbar.md +13 -13
  39. package/docs/demos/Wizard/examples/Wizard.md +18 -18
  40. package/package.json +1 -1
  41. package/patternfly-no-globals.css +2579 -1114
  42. package/patternfly-theme-dark-unversioned.css +2579 -1114
  43. package/patternfly.css +2579 -1114
  44. package/patternfly.min.css +1 -1
  45. package/patternfly.min.css.map +1 -1
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -4,40 +4,32 @@ section: components
4
4
  cssPrefix: pf-v5-c-toolbar
5
5
  ---import './Toolbar.css'
6
6
 
7
- ## Introduction
7
+ <!-- TODO: add documentation for resize observer/responsive variable usage -->
8
8
 
9
- Toolbar relies on groups (`.pf-v5-c-toolbar__group`) and items (`.pf-v5-c-toolbar__item`), with default spacer values. Groups and items can be siblings and/or items can be nested within groups. Modifier selectors adjust spacing based on the type of group or item. Each modifier applies a unique CSS variable, therefore, the base spacer value for all elements can be customized and item/groups spacers can be themed individually. The default spacer value for items and groups is set to `--pf-v5-c-toolbar--spacer--base`, whose value is `--pf-v5-global--spacer--md` or 16px.
9
+ Toolbar relies on groups (`.pf-v5-c-toolbar__group`) and items (`.pf-v5-c-toolbar__item`), with default col/row gap values. Groups and items can be siblings and/or items can be nested within groups. Modifier selectors adjust spacing based on the type of group. The default `column-gap` value for items and groups is set to `--pf-v5-c--ColumnGap`, whose value is `--pf-t--global--spacer--sm` or 8px.
10
10
 
11
11
  ### Default spacing for items and groups:
12
12
 
13
13
  | Class | CSS Variable | Computed Value |
14
14
  | -- | -- | -- |
15
- | `.pf-v5-c-toolbar__item` | `--pf-v5-c-toolbar__item--spacer` | `16px` |
16
- | `.pf-v5-c-toolbar__group` | `--pf-v5-c-toolbar__group--spacer` | `16px` |
15
+ | `.pf-v5-c-toolbar__group` | `--pf-v5-c-toolbar__group--ColumnGap` | `8px` |
16
+ | `.pf-v5-c-toolbar__item` | `--pf-v5-c-toolbar__item--ColumnGap` | `8px` |
17
17
 
18
18
  ### Toolbar item types
19
19
 
20
20
  | Class | Applied to | Outcome |
21
21
  | -- | -- | -- |
22
- | `.pf-m-bulk-select` | `.pf-v5-c-toolbar__item` | Initiates bulk select spacing. Spacer value is set to `var(--pf-v5-c-toolbar--m-bulk-select--spacer)`. |
23
- | `.pf-m-overflow-menu` | `.pf-v5-c-toolbar__item` | Initiates overflow menu spacing. Spacer value is set to `var(--pf-v5-c-toolbar--m-overflow-menu--spacer)`. |
24
- | `.pf-m-pagination` | `.pf-v5-c-toolbar__item` | Initiates pagination spacing and margin. Spacer value is set to `var(--pf-v5-c-toolbar--m-pagination--spacer)`. |
25
- | `.pf-m-search-filter` | `.pf-v5-c-toolbar__item` | Initiates search filter spacing. Spacer value is set to `var(--pf-v5-c-toolbar--m-search-filter--spacer)`. |
22
+ | `.pf-m-pagination` | `.pf-v5-c-toolbar__item` | Initiates pagination and margin. |
26
23
 
27
24
  ### Modifiers
28
25
 
29
26
  | Class | Applied to | Outcome |
30
27
  | -- | -- | -- |
31
- | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v5-c-toolbar > *` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
32
- | `.pf-m-visible{-on-[breakpoint]}` | `.pf-v5-c-toolbar > *` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
33
- | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-v5-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
34
- | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-v5-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
35
- | `.pf-m-align-items-start` | `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to vertically align children to flex-start. |
36
- | `.pf-m-align-items-center` | `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to vertically align children to center. |
37
- | `.pf-m-align-items-baseline` | `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar group to vertically align children to baseline. |
38
- | `.pf-m-align-self-start` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to vertically align self to flex-start. |
39
- | `.pf-m-align-self-center` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to vertically align self to center. |
40
- | `.pf-m-align-self-baseline` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to vertically align self to baseline. |
28
+ | `.pf-m-[hidden/visible]` | `.pf-v5-c-toolbar > *` | Modifies toolbar element to be hidden/visible. |
29
+ | `.pf-m-flex-grow` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to `flex-grow: 1`, allowing it to consume available main-axis space. |
30
+ | `.pf-m-align-[start/end]` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar [main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis) element alignment. |
31
+ | `.pf-m-align-items-[stretch/baseline/start/center/end]` | `.pf-v5-c-toolbar__content`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) child alignment. |
32
+ | `.pf-m-align-self-[stretch/baseline/start/center/end]` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) self alignment. |
41
33
 
42
34
  ### Special notes
43
35
 
@@ -79,44 +71,19 @@ Several components in the following examples do not include functional and/or ac
79
71
  | `.pf-v5-c-toolbar__item` | `<div>` | Initiates the toolbar component item. **Required** |
80
72
  | `.pf-v5-c-toolbar__group` | `<div>` | Initiates the toolbar component group. |
81
73
 
82
- ### Spacers
83
-
84
- In some instances, it may be necessary to adjust spacing explicitly where items are hidden/shown. For example, if a `.pf-m-toggle-group` is adjacent to an element being hidden/shown, the spacing may appear to be inconsistent. If possible, rely on modifier values. Available spacer modifiers are `.pf-m-spacer-{none, sm, md, lg}{-on-md, -on-lg, -on-xl}` and `.pf-m-space-items-{none, sm, md, lg}{-on-md, -on-lg, -on-xl}`. These modifiers will overwrite existing modifiers provided by `.pf-v5-c-toolbar`.
85
-
86
- ### Adjusted spacers
87
-
88
- ```html
89
- <div class="pf-v5-c-toolbar" id="toolbar-spacer-example">
90
- <div class="pf-v5-c-toolbar__content">
91
- <div class="pf-v5-c-toolbar__content-section">
92
- <div class="pf-v5-c-toolbar__item pf-m-spacer-none">Item</div>
93
- <div class="pf-v5-c-toolbar__item pf-m-spacer-sm">Item</div>
94
- <div class="pf-v5-c-toolbar__item pf-m-spacer-md">Item</div>
95
- <div class="pf-v5-c-toolbar__item pf-m-spacer-lg">Item</div>
96
- <hr class="pf-v5-c-divider pf-m-vertical" />
97
- <div
98
- class="pf-v5-c-toolbar__item pf-m-spacer-none pf-m-spacer-sm-on-md pf-m-spacer-md-on-lg pf-m-spacer-lg-on-xl"
99
- >Item</div>
100
- <div class="pf-v5-c-toolbar__item">Item</div>
101
- </div>
102
- </div>
103
- </div>
104
-
105
- ```
106
-
107
- ### Adjusted group spacers
74
+ ### Adjusted group column gap
108
75
 
109
76
  ```html
110
77
  <div class="pf-v5-c-toolbar" id="toolbar-group-spacer-example">
111
78
  <div class="pf-v5-c-toolbar__content">
112
79
  <div class="pf-v5-c-toolbar__content-section">
113
- <div class="pf-v5-c-toolbar__group pf-m-space-items-lg">
80
+ <div class="pf-v5-c-toolbar__group pf-m-column-gap-lg">
114
81
  <div class="pf-v5-c-toolbar__item">Item</div>
115
82
  <div class="pf-v5-c-toolbar__item">Item</div>
116
83
  </div>
117
84
  <hr class="pf-v5-c-divider pf-m-vertical" />
118
85
  <div
119
- class="pf-v5-c-toolbar__group pf-m-space-items-none pf-m-space-items-sm-on-md pf-m-space-items-md-on-lg pf-m-space-items-lg-on-xl"
86
+ class="pf-v5-c-toolbar__group pf-m-column-gap-none pf-m-column-gap-sm"
120
87
  >
121
88
  <div class="pf-v5-c-toolbar__item">Item</div>
122
89
  <div class="pf-v5-c-toolbar__item">Item</div>
@@ -130,10 +97,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
130
97
  ### Insets
131
98
 
132
99
  ```html
133
- <div
134
- class="pf-v5-c-toolbar pf-m-inset-none pf-m-inset-md-on-md pf-m-inset-2xl-on-lg"
135
- id="toolbar-inset-example"
136
- >
100
+ <div class="pf-v5-c-toolbar pf-m-inset-xl" id="toolbar-inset-example">
137
101
  <div class="pf-v5-c-toolbar__content">
138
102
  <div class="pf-v5-c-toolbar__content-section">
139
103
  <div class="pf-v5-c-toolbar__group">
@@ -172,10 +136,8 @@ In some instances, it may be necessary to adjust spacing explicitly where items
172
136
 
173
137
  | Class | Applied to | Outcome |
174
138
  | -- | -- | -- |
175
- | `.pf-m-page-insets` | `.pf-v5-c-toolbar` | Modifies toolbar insets to match page section, table, page header or any other component whose inset shifts from `--pf-v5-global--spacer--md` to `--pf-v5-global--spacer--lg` at the `xl` breakpoint. |
176
- | `.pf-m-spacer-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
177
- | `.pf-m-space-items-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-v5-c-toolbar__group` | Modifies toolbar group child spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
178
- | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-v5-c-toolbar` | Modifies toolbar horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
139
+ | `.pf-m-column-gap-[none/sm/md/lg]` | `.pf-v5-c-toolbar__group` | Modifies toolbar group child spacing. |
140
+ | `.pf-m-inset-[none/sm/md/lg/xl/2xl]` | `.pf-v5-c-toolbar` | Modifies toolbar horizontal. |
179
141
 
180
142
  ### Width control
181
143
 
@@ -203,8 +165,8 @@ In some instances, it may be necessary to adjust spacing explicitly where items
203
165
 
204
166
  | Class | Applied to | Outcome |
205
167
  | -- | -- | -- |
206
- | `--pf-v5-c-toolbar__item--Width{-on-[breakpoint]}: {width}` | `.pf-v5-c-toolbar__item` | Modifies the width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
207
- | `--pf-v5-c-toolbar__item--MinWidth{-on-[breakpoint]}: {width}` | `.pf-v5-c-toolbar__item` | Modifies the min width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
168
+ | `--pf-v5-c-toolbar__item--Width: {width}` | `.pf-v5-c-toolbar__item` | Modifies the width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
169
+ | `--pf-v5-c-toolbar__item--MinWidth: {width}` | `.pf-v5-c-toolbar__item` | Modifies the min width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
208
170
 
209
171
  ### Group types
210
172
 
@@ -309,9 +271,8 @@ In some instances, it may be necessary to adjust spacing explicitly where items
309
271
 
310
272
  | Class | Applied to | Outcome |
311
273
  | -- | -- | -- |
312
- | `.pf-m-filter-group` | `.pf-v5-c-toolbar__group` | Modifies toolbar group spacing. Spacer value is set to `var(--pf-v5-c-toolbar__group--m-filter-group--spacer)`. Child spacer value is set to `var(--pf-v5-c-toolbar__group--m-filter-group--space-items)`. |
313
- | `.pf-m-icon-button-group` | `.pf-v5-c-toolbar__group` | Modifies toolbar group spacing. Spacer value is set to `var(--pf-v5-c-toolbar__group--m-toggle-group--spacer)`. Child spacer value is set to `var(--pf-v5-c-toolbar__group--m-icon-button-group--space-items)`. |
314
- | `.pf-m-button-group` | `.pf-v5-c-toolbar__group` | Modifies toolbar group spacing. Spacer value is set to `var(--pf-v5-c-toolbar__group--m-toggle-group--spacer)`. Child spacer value is set to `var(--pf-v5-c-toolbar__group--m-button-group--space-items)`. |
274
+ | `.pf-m-filter-group` | `.pf-v5-c-toolbar__group` | Modifies toolbar group column gap. |
275
+ | `.pf-m-icon-button-group` | `.pf-v5-c-toolbar__group` | Modifies toolbar group column gap. |
315
276
 
316
277
  ### Toggle group
317
278
 
@@ -320,7 +281,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
320
281
  <div class="pf-v5-c-toolbar__content">
321
282
  <div class="pf-v5-c-toolbar__content-section">
322
283
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-lg">
323
- <div class="pf-v5-c-toolbar__toggle">
284
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
324
285
  <button
325
286
  class="pf-v5-c-menu-toggle pf-m-plain"
326
287
  type="button"
@@ -426,7 +387,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
426
387
  <div class="pf-v5-c-toolbar__content">
427
388
  <div class="pf-v5-c-toolbar__content-section">
428
389
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group">
429
- <div class="pf-v5-c-toolbar__toggle">
390
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
430
391
  <button
431
392
  class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
432
393
  type="button"
@@ -534,8 +495,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
534
495
  | Attribute | Applied to | Outcome |
535
496
  | -- | -- | -- |
536
497
  | `hidden` | `.pf-v5-c-toolbar__item`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__toggle`, `.pf-v5-c-toolbar__expandable-content` | Indicates that the toggle group element is hidden. **Required** |
537
- | `aria-expanded=true` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates that the expandable content is visible. **Required** |
538
- | `aria-expanded="false"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates the the expandable content is hidden. **Required** |
498
+ | `aria-expanded="[true/false]"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates that the expandable content is visible/hidden. **Required** |
539
499
  | `aria-controls="[id of expandable content]"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Identifies the expanded content controlled by the toggle button. **Required** |
540
500
  | `id="[expandable-content_id]"` | `.pf-v5-c-toolbar__expandable-content` | Provides a reference for toggle button description. **Required** |
541
501
 
@@ -549,7 +509,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
549
509
 
550
510
  | Class | Applied to | Outcome |
551
511
  | -- | -- | -- |
552
- | `.pf-m-show{-on-[breakpoint]}` | `.pf-v5-c-toolbar__group.pf-m-toggle-group`, `.pf-v5-c-toolbar__expandable-content` | Modifies toolbar element visibility at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). This selector must be applied consistently to toggle group and expandable content. |
512
+ | `.pf-m-[show/hide][-on-[sm/md/lg/xl/2xl]]` | `.pf-v5-c-toolbar__group.pf-m-toggle-group`, `.pf-v5-c-toolbar__expandable-content` | Modifies toolbar element visibility. |
553
513
  | `.pf-m-chip-container` | `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
554
514
  | `.pf-m-expanded` | `.pf-v5-c-toolbar__expandable-content`, `.pf-v5-c-toolbar__toggle` | Modifies the component for the expanded state. |
555
515
 
@@ -598,7 +558,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
598
558
  </div>
599
559
  </div>
600
560
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group">
601
- <div class="pf-v5-c-toolbar__toggle">
561
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
602
562
  <button
603
563
  class="pf-v5-c-menu-toggle pf-m-plain"
604
564
  type="button"
@@ -738,174 +698,184 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
738
698
  hidden
739
699
  >
740
700
  <div class="pf-v5-c-toolbar__group pf-m-chip-container">
741
- <div class="pf-v5-c-toolbar__item pf-m-chip-group">
742
- <div class="pf-v5-c-chip-group pf-m-category" role="group">
743
- <div class="pf-v5-c-chip-group__main">
744
- <span
745
- class="pf-v5-c-chip-group__label"
746
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-status-chip-group-label"
747
- >Status</span>
748
- <ul
749
- class="pf-v5-c-chip-group__list"
750
- role="list"
751
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-status-chip-group-label"
752
- >
753
- <li class="pf-v5-c-chip-group__list-item">
754
- <div class="pf-v5-c-chip">
755
- <span class="pf-v5-c-chip__content">
756
- <span
757
- class="pf-v5-c-chip__text"
758
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-one"
759
- >Chip one</span>
760
- </span>
761
- <span class="pf-v5-c-chip__actions">
762
- <button
763
- class="pf-v5-c-button pf-m-plain"
764
- type="button"
765
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-one toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-one"
766
- aria-label="Remove"
767
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-one"
768
- >
769
- <i class="fas fa-times" aria-hidden="true"></i>
770
- </button>
771
- </span>
772
- </div>
773
- </li>
774
- <li class="pf-v5-c-chip-group__list-item">
775
- <div class="pf-v5-c-chip">
776
- <span class="pf-v5-c-chip__content">
777
- <span
778
- class="pf-v5-c-chip__text"
779
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-two"
780
- >Chip two</span>
781
- </span>
782
- <span class="pf-v5-c-chip__actions">
783
- <button
784
- class="pf-v5-c-button pf-m-plain"
785
- type="button"
786
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-two toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-two"
787
- aria-label="Remove"
788
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-two"
789
- >
790
- <i class="fas fa-times" aria-hidden="true"></i>
791
- </button>
792
- </span>
793
- </div>
794
- </li>
795
- <li class="pf-v5-c-chip-group__list-item">
796
- <div class="pf-v5-c-chip">
797
- <span class="pf-v5-c-chip__content">
798
- <span
799
- class="pf-v5-c-chip__text"
800
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-three"
801
- >Chip three</span>
802
- </span>
803
- <span class="pf-v5-c-chip__actions">
804
- <button
805
- class="pf-v5-c-button pf-m-plain"
806
- type="button"
807
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-three toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-three"
808
- aria-label="Remove"
809
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-three"
810
- >
811
- <i class="fas fa-times" aria-hidden="true"></i>
812
- </button>
813
- </span>
814
- </div>
815
- </li>
816
- </ul>
701
+ <div class="pf-v5-c-toolbar__group pf-m-grow">
702
+ <div class="pf-v5-c-toolbar__item">
703
+ <div class="pf-v5-c-chip-group" role="group">
704
+ <div class="pf-v5-c-chip-group__main">
705
+ <span
706
+ class="pf-v5-c-chip-group__label"
707
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-status-chip-group-label"
708
+ >Status</span>
709
+ <ul
710
+ class="pf-v5-c-chip-group__list"
711
+ role="list"
712
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-status-chip-group-label"
713
+ >
714
+ <li class="pf-v5-c-chip-group__list-item">
715
+ <div class="pf-v5-c-chip">
716
+ <span class="pf-v5-c-chip__content">
717
+ <span
718
+ class="pf-v5-c-chip__text"
719
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-one"
720
+ >Chip one</span>
721
+ </span>
722
+ <span class="pf-v5-c-chip__actions">
723
+ <button
724
+ class="pf-v5-c-button pf-m-plain"
725
+ type="button"
726
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-one toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-one"
727
+ aria-label="Remove"
728
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-one"
729
+ >
730
+ <i class="fas fa-times" aria-hidden="true"></i>
731
+ </button>
732
+ </span>
733
+ </div>
734
+ </li>
735
+ <li class="pf-v5-c-chip-group__list-item">
736
+ <div class="pf-v5-c-chip">
737
+ <span class="pf-v5-c-chip__content">
738
+ <span
739
+ class="pf-v5-c-chip__text"
740
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-two"
741
+ >Chip two</span>
742
+ </span>
743
+ <span class="pf-v5-c-chip__actions">
744
+ <button
745
+ class="pf-v5-c-button pf-m-plain"
746
+ type="button"
747
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-two toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-two"
748
+ aria-label="Remove"
749
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-two"
750
+ >
751
+ <i class="fas fa-times" aria-hidden="true"></i>
752
+ </button>
753
+ </span>
754
+ </div>
755
+ </li>
756
+ <li class="pf-v5-c-chip-group__list-item">
757
+ <div class="pf-v5-c-chip">
758
+ <span class="pf-v5-c-chip__content">
759
+ <span
760
+ class="pf-v5-c-chip__text"
761
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-three"
762
+ >Chip three</span>
763
+ </span>
764
+ <span class="pf-v5-c-chip__actions">
765
+ <button
766
+ class="pf-v5-c-button pf-m-plain"
767
+ type="button"
768
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-three toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-three"
769
+ aria-label="Remove"
770
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-three"
771
+ >
772
+ <i class="fas fa-times" aria-hidden="true"></i>
773
+ </button>
774
+ </span>
775
+ </div>
776
+ </li>
777
+ </ul>
778
+ </div>
817
779
  </div>
818
780
  </div>
819
- </div>
820
- <div class="pf-v5-c-toolbar__item pf-m-chip-group">
821
- <div class="pf-v5-c-chip-group pf-m-category" role="group">
822
- <div class="pf-v5-c-chip-group__main">
823
- <span
824
- class="pf-v5-c-chip-group__label"
825
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-risk-chip-group-label"
826
- >Risk</span>
827
- <ul
828
- class="pf-v5-c-chip-group__list"
829
- role="list"
830
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-risk-chip-group-label"
831
- >
832
- <li class="pf-v5-c-chip-group__list-item">
833
- <div class="pf-v5-c-chip">
834
- <span class="pf-v5-c-chip__content">
835
- <span
836
- class="pf-v5-c-chip__text"
837
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-one"
838
- >Chip one</span>
839
- </span>
840
- <span class="pf-v5-c-chip__actions">
841
- <button
842
- class="pf-v5-c-button pf-m-plain"
843
- type="button"
844
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-one toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-one"
845
- aria-label="Remove"
846
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-one"
847
- >
848
- <i class="fas fa-times" aria-hidden="true"></i>
849
- </button>
850
- </span>
851
- </div>
852
- </li>
853
- <li class="pf-v5-c-chip-group__list-item">
854
- <div class="pf-v5-c-chip">
855
- <span class="pf-v5-c-chip__content">
856
- <span
857
- class="pf-v5-c-chip__text"
858
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-two"
859
- >Chip two</span>
860
- </span>
861
- <span class="pf-v5-c-chip__actions">
862
- <button
863
- class="pf-v5-c-button pf-m-plain"
864
- type="button"
865
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-two toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-two"
866
- aria-label="Remove"
867
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-two"
868
- >
869
- <i class="fas fa-times" aria-hidden="true"></i>
870
- </button>
871
- </span>
872
- </div>
873
- </li>
874
- <li class="pf-v5-c-chip-group__list-item">
875
- <div class="pf-v5-c-chip">
876
- <span class="pf-v5-c-chip__content">
877
- <span
878
- class="pf-v5-c-chip__text"
879
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-three"
880
- >Chip three</span>
881
- </span>
882
- <span class="pf-v5-c-chip__actions">
883
- <button
884
- class="pf-v5-c-button pf-m-plain"
885
- type="button"
886
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-three toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-three"
887
- aria-label="Remove"
888
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-three"
889
- >
890
- <i class="fas fa-times" aria-hidden="true"></i>
891
- </button>
892
- </span>
893
- </div>
894
- </li>
895
- </ul>
781
+ <div class="pf-v5-c-toolbar__item">
782
+ <div class="pf-v5-c-chip-group" role="group">
783
+ <div class="pf-v5-c-chip-group__main">
784
+ <span
785
+ class="pf-v5-c-chip-group__label"
786
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-risk-chip-group-label"
787
+ >Risk</span>
788
+ <ul
789
+ class="pf-v5-c-chip-group__list"
790
+ role="list"
791
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-risk-chip-group-label"
792
+ >
793
+ <li class="pf-v5-c-chip-group__list-item">
794
+ <div class="pf-v5-c-chip">
795
+ <span class="pf-v5-c-chip__content">
796
+ <span
797
+ class="pf-v5-c-chip__text"
798
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-one"
799
+ >Chip one</span>
800
+ </span>
801
+ <span class="pf-v5-c-chip__actions">
802
+ <button
803
+ class="pf-v5-c-button pf-m-plain"
804
+ type="button"
805
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-one toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-one"
806
+ aria-label="Remove"
807
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-one"
808
+ >
809
+ <i class="fas fa-times" aria-hidden="true"></i>
810
+ </button>
811
+ </span>
812
+ </div>
813
+ </li>
814
+ <li class="pf-v5-c-chip-group__list-item">
815
+ <div class="pf-v5-c-chip">
816
+ <span class="pf-v5-c-chip__content">
817
+ <span
818
+ class="pf-v5-c-chip__text"
819
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-two"
820
+ >Chip two</span>
821
+ </span>
822
+ <span class="pf-v5-c-chip__actions">
823
+ <button
824
+ class="pf-v5-c-button pf-m-plain"
825
+ type="button"
826
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-two toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-two"
827
+ aria-label="Remove"
828
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-two"
829
+ >
830
+ <i class="fas fa-times" aria-hidden="true"></i>
831
+ </button>
832
+ </span>
833
+ </div>
834
+ </li>
835
+ <li class="pf-v5-c-chip-group__list-item">
836
+ <div class="pf-v5-c-chip">
837
+ <span class="pf-v5-c-chip__content">
838
+ <span
839
+ class="pf-v5-c-chip__text"
840
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-three"
841
+ >Chip three</span>
842
+ </span>
843
+ <span class="pf-v5-c-chip__actions">
844
+ <button
845
+ class="pf-v5-c-button pf-m-plain"
846
+ type="button"
847
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-three toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-three"
848
+ aria-label="Remove"
849
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-three"
850
+ >
851
+ <i class="fas fa-times" aria-hidden="true"></i>
852
+ </button>
853
+ </span>
854
+ </div>
855
+ </li>
856
+ </ul>
857
+ </div>
896
858
  </div>
897
859
  </div>
898
860
  </div>
861
+ <div class="pf-v5-c-toolbar__item">
862
+ <button
863
+ class="pf-v5-c-button pf-m-link pf-m-inline"
864
+ type="button"
865
+ >Clear all filters</button>
866
+ </div>
899
867
  </div>
900
868
  </div>
901
869
  </div>
902
870
  <div class="pf-v5-c-toolbar__content">
903
- <div class="pf-v5-c-toolbar__item">6 filters applied</div>
904
- <div class="pf-v5-c-toolbar__item">
905
- <button
906
- class="pf-v5-c-button pf-m-link pf-m-inline"
907
- type="button"
908
- >Clear all filters</button>
871
+ <div class="pf-v5-c-toolbar__group">
872
+ <div class="pf-v5-c-toolbar__item">6 filters applied</div>
873
+ <div class="pf-v5-c-toolbar__item">
874
+ <button
875
+ class="pf-v5-c-button pf-m-link pf-m-inline"
876
+ type="button"
877
+ >Clear all filters</button>
878
+ </div>
909
879
  </div>
910
880
  </div>
911
881
  </div>
@@ -955,7 +925,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
955
925
  </div>
956
926
  </div>
957
927
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group">
958
- <div class="pf-v5-c-toolbar__toggle">
928
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
959
929
  <button
960
930
  class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
961
931
  type="button"
@@ -1094,9 +1064,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1094
1064
  </div>
1095
1065
  </div>
1096
1066
  <div class="pf-v5-c-toolbar__group pf-m-chip-container">
1097
- <div class="pf-v5-c-toolbar__group">
1098
- <div class="pf-v5-c-toolbar__item pf-m-chip-group">
1099
- <div class="pf-v5-c-chip-group pf-m-category" role="group">
1067
+ <div class="pf-v5-c-toolbar__group pf-m-grow">
1068
+ <div class="pf-v5-c-toolbar__item">
1069
+ <div class="pf-v5-c-chip-group" role="group">
1100
1070
  <div class="pf-v5-c-chip-group__main">
1101
1071
  <span
1102
1072
  class="pf-v5-c-chip-group__label"
@@ -1174,8 +1144,8 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1174
1144
  </div>
1175
1145
  </div>
1176
1146
  </div>
1177
- <div class="pf-v5-c-toolbar__item pf-m-chip-group">
1178
- <div class="pf-v5-c-chip-group pf-m-category" role="group">
1147
+ <div class="pf-v5-c-toolbar__item">
1148
+ <div class="pf-v5-c-chip-group" role="group">
1179
1149
  <div class="pf-v5-c-chip-group__main">
1180
1150
  <span
1181
1151
  class="pf-v5-c-chip-group__label"
@@ -1307,7 +1277,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1307
1277
  </div>
1308
1278
  </div>
1309
1279
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show">
1310
- <div class="pf-v5-c-toolbar__toggle">
1280
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
1311
1281
  <button
1312
1282
  class="pf-v5-c-menu-toggle pf-m-plain"
1313
1283
  type="button"
@@ -1443,170 +1413,172 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1443
1413
  </div>
1444
1414
  <div class="pf-v5-c-toolbar__content pf-m-chip-container">
1445
1415
  <div class="pf-v5-c-toolbar__group">
1446
- <div class="pf-v5-c-toolbar__item pf-m-chip-group">
1447
- <div class="pf-v5-c-chip-group pf-m-category" role="group">
1448
- <div class="pf-v5-c-chip-group__main">
1449
- <span
1450
- class="pf-v5-c-chip-group__label"
1451
- id="toolbar-selected-filters-example-chip-group-status-chip-group-label"
1452
- >Status</span>
1453
- <ul
1454
- class="pf-v5-c-chip-group__list"
1455
- role="list"
1456
- aria-labelledby="toolbar-selected-filters-example-chip-group-status-chip-group-label"
1457
- >
1458
- <li class="pf-v5-c-chip-group__list-item">
1459
- <div class="pf-v5-c-chip">
1460
- <span class="pf-v5-c-chip__content">
1461
- <span
1462
- class="pf-v5-c-chip__text"
1463
- id="toolbar-selected-filters-example-chip-group-statuschip-one"
1464
- >Chip one</span>
1465
- </span>
1466
- <span class="pf-v5-c-chip__actions">
1467
- <button
1468
- class="pf-v5-c-button pf-m-plain"
1469
- type="button"
1470
- aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-one toolbar-selected-filters-example-chip-group-statuschip-one"
1471
- aria-label="Remove"
1472
- id="toolbar-selected-filters-example-chip-group-statusremove-chip-one"
1473
- >
1474
- <i class="fas fa-times" aria-hidden="true"></i>
1475
- </button>
1476
- </span>
1477
- </div>
1478
- </li>
1479
- <li class="pf-v5-c-chip-group__list-item">
1480
- <div class="pf-v5-c-chip">
1481
- <span class="pf-v5-c-chip__content">
1482
- <span
1483
- class="pf-v5-c-chip__text"
1484
- id="toolbar-selected-filters-example-chip-group-statuschip-two"
1485
- >Chip two</span>
1486
- </span>
1487
- <span class="pf-v5-c-chip__actions">
1488
- <button
1489
- class="pf-v5-c-button pf-m-plain"
1490
- type="button"
1491
- aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-two toolbar-selected-filters-example-chip-group-statuschip-two"
1492
- aria-label="Remove"
1493
- id="toolbar-selected-filters-example-chip-group-statusremove-chip-two"
1494
- >
1495
- <i class="fas fa-times" aria-hidden="true"></i>
1496
- </button>
1497
- </span>
1498
- </div>
1499
- </li>
1500
- <li class="pf-v5-c-chip-group__list-item">
1501
- <div class="pf-v5-c-chip">
1502
- <span class="pf-v5-c-chip__content">
1503
- <span
1504
- class="pf-v5-c-chip__text"
1505
- id="toolbar-selected-filters-example-chip-group-statuschip-three"
1506
- >Chip three</span>
1507
- </span>
1508
- <span class="pf-v5-c-chip__actions">
1509
- <button
1510
- class="pf-v5-c-button pf-m-plain"
1511
- type="button"
1512
- aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-three toolbar-selected-filters-example-chip-group-statuschip-three"
1513
- aria-label="Remove"
1514
- id="toolbar-selected-filters-example-chip-group-statusremove-chip-three"
1515
- >
1516
- <i class="fas fa-times" aria-hidden="true"></i>
1517
- </button>
1518
- </span>
1519
- </div>
1520
- </li>
1521
- </ul>
1416
+ <div class="pf-v5-c-toolbar__group">
1417
+ <div class="pf-v5-c-toolbar__item">
1418
+ <div class="pf-v5-c-chip-group" role="group">
1419
+ <div class="pf-v5-c-chip-group__main">
1420
+ <span
1421
+ class="pf-v5-c-chip-group__label"
1422
+ id="toolbar-selected-filters-example-chip-group-status-chip-group-label"
1423
+ >Status</span>
1424
+ <ul
1425
+ class="pf-v5-c-chip-group__list"
1426
+ role="list"
1427
+ aria-labelledby="toolbar-selected-filters-example-chip-group-status-chip-group-label"
1428
+ >
1429
+ <li class="pf-v5-c-chip-group__list-item">
1430
+ <div class="pf-v5-c-chip">
1431
+ <span class="pf-v5-c-chip__content">
1432
+ <span
1433
+ class="pf-v5-c-chip__text"
1434
+ id="toolbar-selected-filters-example-chip-group-statuschip-one"
1435
+ >Chip one</span>
1436
+ </span>
1437
+ <span class="pf-v5-c-chip__actions">
1438
+ <button
1439
+ class="pf-v5-c-button pf-m-plain"
1440
+ type="button"
1441
+ aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-one toolbar-selected-filters-example-chip-group-statuschip-one"
1442
+ aria-label="Remove"
1443
+ id="toolbar-selected-filters-example-chip-group-statusremove-chip-one"
1444
+ >
1445
+ <i class="fas fa-times" aria-hidden="true"></i>
1446
+ </button>
1447
+ </span>
1448
+ </div>
1449
+ </li>
1450
+ <li class="pf-v5-c-chip-group__list-item">
1451
+ <div class="pf-v5-c-chip">
1452
+ <span class="pf-v5-c-chip__content">
1453
+ <span
1454
+ class="pf-v5-c-chip__text"
1455
+ id="toolbar-selected-filters-example-chip-group-statuschip-two"
1456
+ >Chip two</span>
1457
+ </span>
1458
+ <span class="pf-v5-c-chip__actions">
1459
+ <button
1460
+ class="pf-v5-c-button pf-m-plain"
1461
+ type="button"
1462
+ aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-two toolbar-selected-filters-example-chip-group-statuschip-two"
1463
+ aria-label="Remove"
1464
+ id="toolbar-selected-filters-example-chip-group-statusremove-chip-two"
1465
+ >
1466
+ <i class="fas fa-times" aria-hidden="true"></i>
1467
+ </button>
1468
+ </span>
1469
+ </div>
1470
+ </li>
1471
+ <li class="pf-v5-c-chip-group__list-item">
1472
+ <div class="pf-v5-c-chip">
1473
+ <span class="pf-v5-c-chip__content">
1474
+ <span
1475
+ class="pf-v5-c-chip__text"
1476
+ id="toolbar-selected-filters-example-chip-group-statuschip-three"
1477
+ >Chip three</span>
1478
+ </span>
1479
+ <span class="pf-v5-c-chip__actions">
1480
+ <button
1481
+ class="pf-v5-c-button pf-m-plain"
1482
+ type="button"
1483
+ aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-three toolbar-selected-filters-example-chip-group-statuschip-three"
1484
+ aria-label="Remove"
1485
+ id="toolbar-selected-filters-example-chip-group-statusremove-chip-three"
1486
+ >
1487
+ <i class="fas fa-times" aria-hidden="true"></i>
1488
+ </button>
1489
+ </span>
1490
+ </div>
1491
+ </li>
1492
+ </ul>
1493
+ </div>
1522
1494
  </div>
1523
1495
  </div>
1524
- </div>
1525
- <div class="pf-v5-c-toolbar__item pf-m-chip-group">
1526
- <div class="pf-v5-c-chip-group pf-m-category" role="group">
1527
- <div class="pf-v5-c-chip-group__main">
1528
- <span
1529
- class="pf-v5-c-chip-group__label"
1530
- id="toolbar-selected-filters-example-chip-group-risk-chip-group-label"
1531
- >Risk</span>
1532
- <ul
1533
- class="pf-v5-c-chip-group__list"
1534
- role="list"
1535
- aria-labelledby="toolbar-selected-filters-example-chip-group-risk-chip-group-label"
1536
- >
1537
- <li class="pf-v5-c-chip-group__list-item">
1538
- <div class="pf-v5-c-chip">
1539
- <span class="pf-v5-c-chip__content">
1540
- <span
1541
- class="pf-v5-c-chip__text"
1542
- id="toolbar-selected-filters-example-chip-group-riskchip-one"
1543
- >Chip one</span>
1544
- </span>
1545
- <span class="pf-v5-c-chip__actions">
1546
- <button
1547
- class="pf-v5-c-button pf-m-plain"
1548
- type="button"
1549
- aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-one toolbar-selected-filters-example-chip-group-riskchip-one"
1550
- aria-label="Remove"
1551
- id="toolbar-selected-filters-example-chip-group-riskremove-chip-one"
1552
- >
1553
- <i class="fas fa-times" aria-hidden="true"></i>
1554
- </button>
1555
- </span>
1556
- </div>
1557
- </li>
1558
- <li class="pf-v5-c-chip-group__list-item">
1559
- <div class="pf-v5-c-chip">
1560
- <span class="pf-v5-c-chip__content">
1561
- <span
1562
- class="pf-v5-c-chip__text"
1563
- id="toolbar-selected-filters-example-chip-group-riskchip-two"
1564
- >Chip two</span>
1565
- </span>
1566
- <span class="pf-v5-c-chip__actions">
1567
- <button
1568
- class="pf-v5-c-button pf-m-plain"
1569
- type="button"
1570
- aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-two toolbar-selected-filters-example-chip-group-riskchip-two"
1571
- aria-label="Remove"
1572
- id="toolbar-selected-filters-example-chip-group-riskremove-chip-two"
1573
- >
1574
- <i class="fas fa-times" aria-hidden="true"></i>
1575
- </button>
1576
- </span>
1577
- </div>
1578
- </li>
1579
- <li class="pf-v5-c-chip-group__list-item">
1580
- <div class="pf-v5-c-chip">
1581
- <span class="pf-v5-c-chip__content">
1582
- <span
1583
- class="pf-v5-c-chip__text"
1584
- id="toolbar-selected-filters-example-chip-group-riskchip-three"
1585
- >Chip three</span>
1586
- </span>
1587
- <span class="pf-v5-c-chip__actions">
1588
- <button
1589
- class="pf-v5-c-button pf-m-plain"
1590
- type="button"
1591
- aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-three toolbar-selected-filters-example-chip-group-riskchip-three"
1592
- aria-label="Remove"
1593
- id="toolbar-selected-filters-example-chip-group-riskremove-chip-three"
1594
- >
1595
- <i class="fas fa-times" aria-hidden="true"></i>
1596
- </button>
1597
- </span>
1598
- </div>
1599
- </li>
1600
- </ul>
1496
+ <div class="pf-v5-c-toolbar__item">
1497
+ <div class="pf-v5-c-chip-group" role="group">
1498
+ <div class="pf-v5-c-chip-group__main">
1499
+ <span
1500
+ class="pf-v5-c-chip-group__label"
1501
+ id="toolbar-selected-filters-example-chip-group-risk-chip-group-label"
1502
+ >Risk</span>
1503
+ <ul
1504
+ class="pf-v5-c-chip-group__list"
1505
+ role="list"
1506
+ aria-labelledby="toolbar-selected-filters-example-chip-group-risk-chip-group-label"
1507
+ >
1508
+ <li class="pf-v5-c-chip-group__list-item">
1509
+ <div class="pf-v5-c-chip">
1510
+ <span class="pf-v5-c-chip__content">
1511
+ <span
1512
+ class="pf-v5-c-chip__text"
1513
+ id="toolbar-selected-filters-example-chip-group-riskchip-one"
1514
+ >Chip one</span>
1515
+ </span>
1516
+ <span class="pf-v5-c-chip__actions">
1517
+ <button
1518
+ class="pf-v5-c-button pf-m-plain"
1519
+ type="button"
1520
+ aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-one toolbar-selected-filters-example-chip-group-riskchip-one"
1521
+ aria-label="Remove"
1522
+ id="toolbar-selected-filters-example-chip-group-riskremove-chip-one"
1523
+ >
1524
+ <i class="fas fa-times" aria-hidden="true"></i>
1525
+ </button>
1526
+ </span>
1527
+ </div>
1528
+ </li>
1529
+ <li class="pf-v5-c-chip-group__list-item">
1530
+ <div class="pf-v5-c-chip">
1531
+ <span class="pf-v5-c-chip__content">
1532
+ <span
1533
+ class="pf-v5-c-chip__text"
1534
+ id="toolbar-selected-filters-example-chip-group-riskchip-two"
1535
+ >Chip two</span>
1536
+ </span>
1537
+ <span class="pf-v5-c-chip__actions">
1538
+ <button
1539
+ class="pf-v5-c-button pf-m-plain"
1540
+ type="button"
1541
+ aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-two toolbar-selected-filters-example-chip-group-riskchip-two"
1542
+ aria-label="Remove"
1543
+ id="toolbar-selected-filters-example-chip-group-riskremove-chip-two"
1544
+ >
1545
+ <i class="fas fa-times" aria-hidden="true"></i>
1546
+ </button>
1547
+ </span>
1548
+ </div>
1549
+ </li>
1550
+ <li class="pf-v5-c-chip-group__list-item">
1551
+ <div class="pf-v5-c-chip">
1552
+ <span class="pf-v5-c-chip__content">
1553
+ <span
1554
+ class="pf-v5-c-chip__text"
1555
+ id="toolbar-selected-filters-example-chip-group-riskchip-three"
1556
+ >Chip three</span>
1557
+ </span>
1558
+ <span class="pf-v5-c-chip__actions">
1559
+ <button
1560
+ class="pf-v5-c-button pf-m-plain"
1561
+ type="button"
1562
+ aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-three toolbar-selected-filters-example-chip-group-riskchip-three"
1563
+ aria-label="Remove"
1564
+ id="toolbar-selected-filters-example-chip-group-riskremove-chip-three"
1565
+ >
1566
+ <i class="fas fa-times" aria-hidden="true"></i>
1567
+ </button>
1568
+ </span>
1569
+ </div>
1570
+ </li>
1571
+ </ul>
1572
+ </div>
1601
1573
  </div>
1602
1574
  </div>
1603
1575
  </div>
1604
- </div>
1605
- <div class="pf-v5-c-toolbar__item">
1606
- <button
1607
- class="pf-v5-c-button pf-m-link pf-m-inline"
1608
- type="button"
1609
- >Clear all filters</button>
1576
+ <div class="pf-v5-c-toolbar__item">
1577
+ <button
1578
+ class="pf-v5-c-button pf-m-link pf-m-inline"
1579
+ type="button"
1580
+ >Clear all filters</button>
1581
+ </div>
1610
1582
  </div>
1611
1583
  </div>
1612
1584
  </div>
@@ -1622,7 +1594,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1622
1594
  <div class="pf-v5-c-toolbar__content">
1623
1595
  <div class="pf-v5-c-toolbar__content-section">
1624
1596
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-2xl">
1625
- <div class="pf-v5-c-toolbar__toggle">
1597
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
1626
1598
  <button
1627
1599
  class="pf-v5-c-menu-toggle pf-m-plain"
1628
1600
  type="button"
@@ -1959,7 +1931,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1959
1931
  <div class="pf-v5-c-toolbar__content">
1960
1932
  <div class="pf-v5-c-toolbar__content-section">
1961
1933
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group">
1962
- <div class="pf-v5-c-toolbar__toggle">
1934
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
1963
1935
  <button
1964
1936
  class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
1965
1937
  type="button"
@@ -2266,39 +2238,23 @@ As the toolbar component is a hybrid layout and component, some of its elements
2266
2238
  | `.pf-m-full-height` | `.pf-v5-c-toolbar`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group` | Modifies toolbar component to full height of its container and removes vertical padding. |
2267
2239
  | `.pf-m-static` | `.pf-v5-c-toolbar` | Modifies expandable content section to position itself to the nearest absolutely positioned parent outside of the toolbar component. This is used primarily for masthead toolbar. |
2268
2240
  | `.pf-m-expanded` | `.pf-v5-c-toolbar__expandable-content` | Modifies expandable content section for the expanded state. |
2269
- | `.pf-m-label` | `.pf-v5-c-toolbar__item` | Modifies label vertical positioning. |
2270
- | `.pf-m-form-element` | `.pf-v5-c-toolbar__item` | Modifies form element vertical positioning. |
2271
- | `.pf-m-bulk-select` | `.pf-v5-c-toolbar__item` | Modifies bulk select spacing. |
2272
- | `.pf-m-overflow-menu` | `.pf-v5-c-toolbar__item` | Modifies overflow menu spacing. |
2273
- | `.pf-m-pagination` | `.pf-v5-c-toolbar__item` | Modifies pagination spacing and margin. |
2274
- | `.pf-m-search-filter` | `.pf-v5-c-toolbar__item` | Modifies search filter spacing. |
2275
- | `.pf-m-chip-group` | `.pf-v5-c-toolbar__item` | Modifies chip group spacing. |
2276
- | `.pf-m-expand-all` | `.pf-v5-c-toolbar__item` | Modifies an item for an expand all button. |
2277
2241
  | `.pf-m-expanded` | `.pf-v5-c-toolbar__item.pf-m-expand-all` | Modifies an expand all button for the expanded state. |
2278
- | `.pf-m-button-group` | `.pf-v5-c-toolbar__group` | Modifies button group spacing. |
2279
- | `.pf-m-icon-button-group` | `.pf-v5-c-toolbar__group` | Modifies icon button group spacing. |
2280
- | `.pf-m-filter-group` | `.pf-v5-c-toolbar__group` | Modifies filter group spacing. |
2281
- | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v5-c-toolbar__content`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__item`, `.pf-v5-c-toolbar__group` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
2282
- | `.pf-m-visible{-on-[breakpoint]}` | `.pf-v5-c-toolbar__content`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__item`, `.pf-v5-c-toolbar__group` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
2283
- | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-v5-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
2284
- | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-v5-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
2285
- | `.pf-m-align-items-center` | `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group` | Modifies toolbar element to vertically align children to center. |
2286
- | `.pf-m-align-items-baseline` | `.pf-v5-c-toolbar__group` | Modifies toolbar group to vertically align children to baseline. |
2287
- | `.pf-m-align-self-center` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to vertically align self to center. |
2288
- | `.pf-m-align-self-baseline` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to vertically align self to baseline. |
2289
- | `.pf-m-chip-container` | `.pf-v5-c-toolbar__content`, `.pf-v5-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
2242
+ | `.pf-m-icon-button-group` | `.pf-v5-c-toolbar__group` | Initiates icon button group spacing. |
2243
+ | `.pf-m-filter-group` | `.pf-v5-c-toolbar__group` | Initiates filter group spacing. |
2244
+ | `.pf-m-chip-container` | `.pf-v5-c-toolbar__content`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
2290
2245
  | `.pf-m-overflow-container` | `.pf-v5-c-toolbar__item`, `.pf-v5-c-toolbar__group` | Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation. |
2291
2246
  | `.pf-m-expanded` | `.pf-v5-c-toolbar__expandable-content`, `.pf-v5-c-toolbar__toggle` | Modifies the component for the expanded state. |
2292
- | `.pf-m-wrap` | `.pf-v5-c-toolbar`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group` | Modifies the toolbar element to wrap. |
2293
- | `.pf-m-nowrap` | `.pf-v5-c-toolbar`, `.pf-v5-c-toolbar__group` | Modifies the toolbar element to nowrap. |
2247
+ | `.pf-m-[wrap/nowrap]` | `.pf-v5-c-toolbar__content`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies the toolbar element to wrap/not wrap. |
2248
+ | `.pf-m-align-[start/end]` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar [main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis) element alignment. |
2249
+ | `.pf-m-align-items-[stretch/baseline/start/center/end]` | `.pf-v5-c-toolbar__content`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) child alignment. |
2250
+ | `.pf-m-align-self-[stretch/baseline/start/center/end]` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) self alignment. |
2294
2251
 
2295
2252
  ### Accessibility
2296
2253
 
2297
2254
  | Attribute | Applied to | Outcome |
2298
2255
  | -- | -- | -- |
2299
2256
  | `hidden` | `.pf-v5-c-toolbar__item`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__toggle`, `.pf-v5-c-toolbar__expandable-content` | Indicates that the toolbar element is hidden. **Required** |
2300
- | `aria-expanded=true` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates that the expandable content is visible. **Required** |
2301
- | `aria-expanded="false"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates the the expandable content is hidden. **Required** |
2257
+ | `aria-expanded="[true/false]"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates the the expandable content is hidden/visible. **Required** |
2302
2258
  | `aria-controls="[id of expandable content]"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Identifies the expanded content controlled by the toggle button. **Required** |
2303
2259
  | `id="[expandable-content_id]"` | `.pf-v5-c-toolbar__expandable-content` | Provides a reference for toggle button description. **Required** |
2304
2260
  | `aria-label="Expand all"` | `.pf-v5-c-toolbar__item.pf-m-expand-all` | Provides an accessible label for the expand all item button. **Required** |
@@ -2309,11 +2265,10 @@ As the toolbar component is a hybrid layout and component, some of its elements
2309
2265
  | Class | Applied to | Outcome |
2310
2266
  | -- | -- | -- |
2311
2267
  | `.pf-m-toggle-group` | `.pf-v5-c-toolbar__group` | Modifies toolbar group to control when, and at which breakpoint, filters will be hidden/shown. By default, all filters are hidden until the specified breakpoint is reached. |
2312
- | `.pf-m-show{-on-[breakpoint]}` | `.pf-v5-c-toolbar__group.pf-m-toggle-group`, `.pf-v5-c-toolbar__expandable-content` | Modifies toolbar element to hidden at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). This selector must be applied consistently to toggle group and expandable content. |
2268
+ | `.pf-m-[show/hide]` | `.pf-v5-c-toolbar__group.pf-m-toggle-group`, `.pf-v5-c-toolbar__expandable-content` | Modifies toolbar element to hidden. |
2313
2269
 
2314
2270
  ### Spacer system
2315
2271
 
2316
2272
  | Class | Applied to | Outcome |
2317
2273
  | -- | -- | -- |
2318
- | `.pf-m-spacer-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
2319
- | `.pf-m-space-items-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-v5-c-toolbar__group` | Modifies toolbar group child spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
2274
+ | `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |