@patternfly/patternfly 6.0.0-alpha.186 → 6.0.0-alpha.187
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.
- package/components/Toolbar/toolbar.css +232 -531
- package/components/Toolbar/toolbar.scss +101 -89
- package/components/_index.css +224 -523
- package/docs/components/Card/examples/Card.md +8 -8
- package/docs/components/DataList/examples/DataList.md +17 -17
- package/docs/components/DualListSelector/examples/DualListSelector.md +16 -16
- package/docs/components/Hint/examples/Hint.md +3 -3
- package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +37 -37
- package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
- package/docs/components/Table/examples/Table.md +454 -454
- package/docs/components/Toolbar/examples/Toolbar.css +10 -4
- package/docs/components/Toolbar/examples/Toolbar.md +1050 -637
- package/docs/demos/AboutModal/examples/AboutModal.md +1 -0
- package/docs/demos/Alert/examples/Alert.md +3 -0
- package/docs/demos/BackToTop/examples/BackToTop.md +1 -0
- package/docs/demos/Banner/examples/Banner.md +2 -0
- package/docs/demos/CardView/examples/CardView.md +13 -12
- package/docs/demos/Dashboard/examples/Dashboard.md +2 -1
- package/docs/demos/DataList/examples/DataList.md +31 -27
- package/docs/demos/DescriptionList/examples/DescriptionList.md +4 -1
- package/docs/demos/Drawer/examples/Drawer.md +6 -1
- package/docs/demos/JumpLinks/examples/JumpLinks.md +6 -0
- package/docs/demos/Masthead/examples/Masthead.md +19 -9
- package/docs/demos/Modal/examples/Modal.md +6 -0
- package/docs/demos/Nav/examples/Nav.md +8 -0
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +71 -61
- package/docs/demos/Page/examples/Page.md +11 -0
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +27 -19
- package/docs/demos/Skeleton/examples/Skeleton.md +1 -0
- package/docs/demos/Table/examples/Table.md +161 -146
- package/docs/demos/Tabs/examples/Tabs.md +32 -26
- package/docs/demos/Toolbar/examples/Toolbar.css +9 -1
- package/docs/demos/Toolbar/examples/Toolbar.md +1592 -1295
- package/docs/demos/Wizard/examples/Wizard.md +9 -0
- package/package.json +1 -1
- package/patternfly-no-globals.css +224 -523
- package/patternfly.css +224 -523
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/docs/demos/Page/examples/Penta.md +0 -903
|
@@ -14,8 +14,8 @@ Toolbar relies on groups (`.pf-v6-c-toolbar__group`) and items (`.pf-v6-c-toolba
|
|
|
14
14
|
| -- | -- | -- |
|
|
15
15
|
| `.pf-v6-c-toolbar__group` | `--pf-v6-c-toolbar__group--ColumnGap` | `16px` |
|
|
16
16
|
| `.pf-v6-c-toolbar__item` | `--pf-v6-c-toolbar__item--ColumnGap` | `16px` |
|
|
17
|
-
| `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
18
|
-
| `.pf-m-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column gap and row gap for toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
17
|
+
| `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` | `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
18
|
+
| `.pf-m-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` | `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column gap and row gap for toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
19
19
|
|
|
20
20
|
### Toolbar item types
|
|
21
21
|
|
|
@@ -30,7 +30,7 @@ Toolbar relies on groups (`.pf-v6-c-toolbar__group`) and items (`.pf-v6-c-toolba
|
|
|
30
30
|
| `.pf-m-[hidden/visible]` | `.pf-v6-c-toolbar > *` | Modifies toolbar element to be hidden/visible. |
|
|
31
31
|
| `.pf-m-flex-grow` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar element to `flex-grow: 1`, allowing it to consume available main-axis space. |
|
|
32
32
|
| `.pf-m-align-[start/end]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar [main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis) element alignment. |
|
|
33
|
-
| `.pf-m-align-items-[stretch/baseline/start/center/end]` | `.pf-v6-c-toolbar__content
|
|
33
|
+
| `.pf-m-align-items-[stretch/baseline/start/center/end]` | `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) child alignment. |
|
|
34
34
|
| `.pf-m-align-self-[stretch/baseline/start/center/end]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) self alignment. |
|
|
35
35
|
|
|
36
36
|
### Special notes
|
|
@@ -51,11 +51,13 @@ Several components in the following examples do not include functional and/or ac
|
|
|
51
51
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
52
52
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
53
53
|
<hr class="pf-v6-c-divider pf-m-vertical" />
|
|
54
|
+
|
|
54
55
|
<div class="pf-v6-c-toolbar__group">
|
|
55
56
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
56
57
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
57
58
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
58
59
|
</div>
|
|
60
|
+
|
|
59
61
|
<hr class="pf-v6-c-divider pf-m-vertical" />
|
|
60
62
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
61
63
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
@@ -83,7 +85,9 @@ Several components in the following examples do not include functional and/or ac
|
|
|
83
85
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
84
86
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
85
87
|
</div>
|
|
88
|
+
|
|
86
89
|
<hr class="pf-v6-c-divider pf-m-vertical" />
|
|
90
|
+
|
|
87
91
|
<div
|
|
88
92
|
class="pf-v6-c-toolbar__group pf-m-column-gap-none pf-m-column-gap-sm"
|
|
89
93
|
>
|
|
@@ -106,25 +110,7 @@ Several components in the following examples do not include functional and/or ac
|
|
|
106
110
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
107
111
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
108
112
|
</div>
|
|
109
|
-
<hr class="pf-v6-c-divider pf-m-vertical" />
|
|
110
|
-
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
111
|
-
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
112
|
-
</div>
|
|
113
|
-
</div>
|
|
114
|
-
</div>
|
|
115
|
-
|
|
116
|
-
```
|
|
117
|
-
|
|
118
|
-
### Page insets
|
|
119
113
|
|
|
120
|
-
```html
|
|
121
|
-
<div class="pf-v6-c-toolbar pf-m-page-insets" id="toolbar-page-insets-example">
|
|
122
|
-
<div class="pf-v6-c-toolbar__content">
|
|
123
|
-
<div class="pf-v6-c-toolbar__content-section">
|
|
124
|
-
<div class="pf-v6-c-toolbar__group">
|
|
125
|
-
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
126
|
-
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
127
|
-
</div>
|
|
128
114
|
<hr class="pf-v6-c-divider pf-m-vertical" />
|
|
129
115
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
130
116
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
@@ -154,6 +140,7 @@ Several components in the following examples do not include functional and/or ac
|
|
|
154
140
|
>Item</div>
|
|
155
141
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
156
142
|
</div>
|
|
143
|
+
|
|
157
144
|
<hr class="pf-v6-c-divider pf-m-vertical" />
|
|
158
145
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
159
146
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
@@ -170,36 +157,554 @@ Several components in the following examples do not include functional and/or ac
|
|
|
170
157
|
| `--pf-v6-c-toolbar__item--Width: {width}` | `.pf-v6-c-toolbar__item` | Modifies the width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
171
158
|
| `--pf-v6-c-toolbar__item--MinWidth: {width}` | `.pf-v6-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). |
|
|
172
159
|
|
|
173
|
-
|
|
160
|
+
## Group types
|
|
161
|
+
|
|
162
|
+
### Filter group
|
|
174
163
|
|
|
175
164
|
```html
|
|
176
|
-
<
|
|
165
|
+
<h4 class="pf-v6-c-content--h4">Standard filters</h4>
|
|
166
|
+
<div class="pf-v6-c-toolbar" id="toolbar-group-types-standard-filter">
|
|
167
|
+
<div class="pf-v6-c-toolbar__group pf-m-filter-group">
|
|
168
|
+
<div class="pf-v6-c-toolbar__item">
|
|
169
|
+
<button
|
|
170
|
+
class="pf-v6-c-menu-toggle"
|
|
171
|
+
type="button"
|
|
172
|
+
aria-expanded="false"
|
|
173
|
+
id="toolbar-group-types-standard-filter-menu-toggle-checkbox-status"
|
|
174
|
+
>
|
|
175
|
+
<span class="pf-v6-c-menu-toggle__text">Status</span>
|
|
176
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
177
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
178
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
179
|
+
</span>
|
|
180
|
+
</span>
|
|
181
|
+
</button>
|
|
182
|
+
</div>
|
|
183
|
+
<div class="pf-v6-c-toolbar__item">
|
|
184
|
+
<button
|
|
185
|
+
class="pf-v6-c-menu-toggle"
|
|
186
|
+
type="button"
|
|
187
|
+
aria-expanded="false"
|
|
188
|
+
id="toolbar-group-types-standard-filter-menu-toggle-checkbox-risk"
|
|
189
|
+
>
|
|
190
|
+
<span class="pf-v6-c-menu-toggle__text">Risk</span>
|
|
191
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
192
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
193
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
194
|
+
</span>
|
|
195
|
+
</span>
|
|
196
|
+
</button>
|
|
197
|
+
</div>
|
|
198
|
+
</div>
|
|
199
|
+
</div>
|
|
200
|
+
<hr class="pf-v6-c-divider" />
|
|
201
|
+
<h4 class="pf-v6-c-content--h4">Input groups and filters</h4>
|
|
202
|
+
<div class="pf-v6-c-toolbar" id="toolbar-group-types-input-group-filter">
|
|
203
|
+
<div class="pf-v6-c-toolbar__group">
|
|
204
|
+
<div class="pf-v6-c-toolbar__item">
|
|
205
|
+
<div class="pf-v6-c-toolbar__item">
|
|
206
|
+
<div
|
|
207
|
+
class="pf-v6-c-input-group"
|
|
208
|
+
aria-label="search filter"
|
|
209
|
+
role="group"
|
|
210
|
+
>
|
|
211
|
+
<div class="pf-v6-c-input-group__item">
|
|
212
|
+
<button
|
|
213
|
+
class="pf-v6-c-menu-toggle"
|
|
214
|
+
type="button"
|
|
215
|
+
aria-expanded="false"
|
|
216
|
+
id="toolbar-group-types-input-group-filter-search-filter-menu"
|
|
217
|
+
>
|
|
218
|
+
<span class="pf-v6-c-menu-toggle__text">Name</span>
|
|
219
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
220
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
221
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
222
|
+
</span>
|
|
223
|
+
</span>
|
|
224
|
+
</button>
|
|
225
|
+
</div>
|
|
226
|
+
<div class="pf-v6-c-input-group__item pf-m-fill">
|
|
227
|
+
<div class="pf-v6-c-text-input-group">
|
|
228
|
+
<div class="pf-v6-c-text-input-group__main pf-m-icon">
|
|
229
|
+
<span class="pf-v6-c-text-input-group__text">
|
|
230
|
+
<span class="pf-v6-c-text-input-group__icon">
|
|
231
|
+
<i class="fas fa-fw fa-search"></i>
|
|
232
|
+
</span>
|
|
233
|
+
<input
|
|
234
|
+
class="pf-v6-c-text-input-group__text-input"
|
|
235
|
+
type="text"
|
|
236
|
+
placeholder="Find by name"
|
|
237
|
+
value
|
|
238
|
+
aria-label="Search input"
|
|
239
|
+
/>
|
|
240
|
+
</span>
|
|
241
|
+
</div>
|
|
242
|
+
</div>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
</div>
|
|
246
|
+
</div>
|
|
247
|
+
<div class="pf-v6-c-toolbar__item">
|
|
248
|
+
<button
|
|
249
|
+
class="pf-v6-c-menu-toggle"
|
|
250
|
+
type="button"
|
|
251
|
+
aria-expanded="false"
|
|
252
|
+
id="toolbar-group-types-input-group-filter-menu-toggle-checkbox-status"
|
|
253
|
+
>
|
|
254
|
+
<span class="pf-v6-c-menu-toggle__text">Status</span>
|
|
255
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
256
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
257
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
258
|
+
</span>
|
|
259
|
+
</span>
|
|
260
|
+
</button>
|
|
261
|
+
</div>
|
|
262
|
+
</div>
|
|
263
|
+
</div>
|
|
264
|
+
|
|
265
|
+
```
|
|
266
|
+
|
|
267
|
+
### Action group
|
|
268
|
+
|
|
269
|
+
```html
|
|
270
|
+
<div class="pf-v6-c-toolbar" id="toolbar-group-types-action">
|
|
271
|
+
<div class="pf-v6-c-toolbar__group pf-m-action-group">
|
|
272
|
+
<div class="pf-v6-c-toolbar__item">
|
|
273
|
+
<button class="pf-v6-c-button pf-m-primary" type="button">
|
|
274
|
+
<span class="pf-v6-c-button__text">Primary</span>
|
|
275
|
+
</button>
|
|
276
|
+
</div>
|
|
277
|
+
<div class="pf-v6-c-toolbar__item">
|
|
278
|
+
<button class="pf-v6-c-button pf-m-secondary" type="button">
|
|
279
|
+
<span class="pf-v6-c-button__text">Secondary</span>
|
|
280
|
+
</button>
|
|
281
|
+
</div>
|
|
282
|
+
<div class="pf-v6-c-toolbar__item">
|
|
283
|
+
<button class="pf-v6-c-button pf-m-tertiary" type="button">
|
|
284
|
+
<span class="pf-v6-c-button__text">Tertiary</span>
|
|
285
|
+
</button>
|
|
286
|
+
</div>
|
|
287
|
+
</div>
|
|
288
|
+
</div>
|
|
289
|
+
|
|
290
|
+
```
|
|
291
|
+
|
|
292
|
+
### Action group plain
|
|
293
|
+
|
|
294
|
+
```html
|
|
295
|
+
<div class="pf-v6-c-toolbar" id="toolbar-group-types-plain">
|
|
296
|
+
<div class="pf-v6-c-toolbar__group pf-m-action-group-plain">
|
|
297
|
+
<div class="pf-v6-c-toolbar__item">
|
|
298
|
+
<button
|
|
299
|
+
class="pf-v6-c-button pf-m-plain"
|
|
300
|
+
type="button"
|
|
301
|
+
aria-label="Column view"
|
|
302
|
+
>
|
|
303
|
+
<span class="pf-v6-c-button__icon">
|
|
304
|
+
<i class="fas fa-columns" aria-hidden="true"></i>
|
|
305
|
+
</span>
|
|
306
|
+
</button>
|
|
307
|
+
</div>
|
|
308
|
+
<div class="pf-v6-c-toolbar__item">
|
|
309
|
+
<button
|
|
310
|
+
class="pf-v6-c-button pf-m-plain"
|
|
311
|
+
type="button"
|
|
312
|
+
aria-label="Expand"
|
|
313
|
+
>
|
|
314
|
+
<span class="pf-v6-c-button__icon">
|
|
315
|
+
<i class="fas fa-expand" aria-hidden="true"></i>
|
|
316
|
+
</span>
|
|
317
|
+
</button>
|
|
318
|
+
</div>
|
|
319
|
+
<div class="pf-v6-c-toolbar__item">
|
|
320
|
+
<button
|
|
321
|
+
class="pf-v6-c-button pf-m-plain"
|
|
322
|
+
type="button"
|
|
323
|
+
aria-label="Settings"
|
|
324
|
+
>
|
|
325
|
+
<span class="pf-v6-c-button__icon">
|
|
326
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
327
|
+
</span>
|
|
328
|
+
</button>
|
|
329
|
+
</div>
|
|
330
|
+
</div>
|
|
331
|
+
</div>
|
|
332
|
+
|
|
333
|
+
```
|
|
334
|
+
|
|
335
|
+
### Action group inline
|
|
336
|
+
|
|
337
|
+
```html
|
|
338
|
+
<div class="pf-v6-c-toolbar" id="toolbar-group-types-inline">
|
|
339
|
+
<div class="pf-v6-c-toolbar__group pf-m-action-group-inline">
|
|
340
|
+
<div class="pf-v6-c-toolbar__item">6 filters applied</div>
|
|
341
|
+
<div class="pf-v6-c-toolbar__item">
|
|
342
|
+
<button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
|
|
343
|
+
<span class="pf-v6-c-button__text">Clear all filters</span>
|
|
344
|
+
</button>
|
|
345
|
+
</div>
|
|
346
|
+
<div class="pf-v6-c-toolbar__item">
|
|
347
|
+
<button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
|
|
348
|
+
<span class="pf-v6-c-button__text">Save all filters</span>
|
|
349
|
+
</button>
|
|
350
|
+
</div>
|
|
351
|
+
</div>
|
|
352
|
+
</div>
|
|
353
|
+
|
|
354
|
+
```
|
|
355
|
+
|
|
356
|
+
### Label group
|
|
357
|
+
|
|
358
|
+
```html
|
|
359
|
+
<div class="pf-v6-c-toolbar" id="toolbar-group-label-group">
|
|
177
360
|
<div class="pf-v6-c-toolbar__content">
|
|
178
361
|
<div class="pf-v6-c-toolbar__content-section">
|
|
179
|
-
<div class="pf-v6-c-toolbar__group pf-m-
|
|
180
|
-
<div class="pf-v6-c-
|
|
362
|
+
<div class="pf-v6-c-toolbar__group pf-m-label-group">
|
|
363
|
+
<div class="pf-v6-c-toolbar__group pf-m-grow pf-m-label-group">
|
|
364
|
+
<div class="pf-v6-c-toolbar__item">
|
|
365
|
+
<div class="pf-v6-c-label-group pf-m-category">
|
|
366
|
+
<div class="pf-v6-c-label-group__main">
|
|
367
|
+
<span
|
|
368
|
+
class="pf-v6-c-label-group__label"
|
|
369
|
+
aria-hidden="true"
|
|
370
|
+
id="toolbar-group-label-group-label-group-status-label-group-label"
|
|
371
|
+
>Status</span>
|
|
372
|
+
<ul
|
|
373
|
+
class="pf-v6-c-label-group__list"
|
|
374
|
+
role="list"
|
|
375
|
+
aria-labelledby="toolbar-group-label-group-label-group-status-label-group-label"
|
|
376
|
+
>
|
|
377
|
+
<li class="pf-v6-c-label-group__list-item">
|
|
378
|
+
<span class="pf-v6-c-label pf-m-outline">
|
|
379
|
+
<span class="pf-v6-c-label__content">
|
|
380
|
+
<span class="pf-v6-c-label__content">
|
|
381
|
+
<span
|
|
382
|
+
class="pf-v6-c-label__text"
|
|
383
|
+
id="toolbar-group-label-group-label-group-statuslabel-one"
|
|
384
|
+
>Label one</span>
|
|
385
|
+
</span>
|
|
386
|
+
<span class="pf-v6-c-label__actions">
|
|
387
|
+
<button
|
|
388
|
+
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
389
|
+
type="button"
|
|
390
|
+
aria-labelledby="toolbar-group-label-group-label-group-statusremove-label-one toolbar-group-label-group-label-group-statuslabel-one"
|
|
391
|
+
aria-label="Remove"
|
|
392
|
+
id="toolbar-group-label-group-label-group-statusremove-label-one"
|
|
393
|
+
>
|
|
394
|
+
<span class="pf-v6-c-button__icon">
|
|
395
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
396
|
+
</span>
|
|
397
|
+
</button>
|
|
398
|
+
</span>
|
|
399
|
+
</span>
|
|
400
|
+
</span>
|
|
401
|
+
</li>
|
|
402
|
+
<li class="pf-v6-c-label-group__list-item">
|
|
403
|
+
<span class="pf-v6-c-label pf-m-outline">
|
|
404
|
+
<span class="pf-v6-c-label__content">
|
|
405
|
+
<span class="pf-v6-c-label__content">
|
|
406
|
+
<span
|
|
407
|
+
class="pf-v6-c-label__text"
|
|
408
|
+
id="toolbar-group-label-group-label-group-statuslabel-two"
|
|
409
|
+
>Label two</span>
|
|
410
|
+
</span>
|
|
411
|
+
<span class="pf-v6-c-label__actions">
|
|
412
|
+
<button
|
|
413
|
+
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
414
|
+
type="button"
|
|
415
|
+
aria-labelledby="toolbar-group-label-group-label-group-statusremove-label-two toolbar-group-label-group-label-group-statuslabel-two"
|
|
416
|
+
aria-label="Remove"
|
|
417
|
+
id="toolbar-group-label-group-label-group-statusremove-label-two"
|
|
418
|
+
>
|
|
419
|
+
<span class="pf-v6-c-button__icon">
|
|
420
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
421
|
+
</span>
|
|
422
|
+
</button>
|
|
423
|
+
</span>
|
|
424
|
+
</span>
|
|
425
|
+
</span>
|
|
426
|
+
</li>
|
|
427
|
+
<li class="pf-v6-c-label-group__list-item">
|
|
428
|
+
<span class="pf-v6-c-label pf-m-outline">
|
|
429
|
+
<span class="pf-v6-c-label__content">
|
|
430
|
+
<span class="pf-v6-c-label__content">
|
|
431
|
+
<span
|
|
432
|
+
class="pf-v6-c-label__text"
|
|
433
|
+
id="toolbar-group-label-group-label-group-statuslabel-three"
|
|
434
|
+
>Label three</span>
|
|
435
|
+
</span>
|
|
436
|
+
<span class="pf-v6-c-label__actions">
|
|
437
|
+
<button
|
|
438
|
+
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
439
|
+
type="button"
|
|
440
|
+
aria-labelledby="toolbar-group-label-group-label-group-statusremove-label-three toolbar-group-label-group-label-group-statuslabel-three"
|
|
441
|
+
aria-label="Remove"
|
|
442
|
+
id="toolbar-group-label-group-label-group-statusremove-label-three"
|
|
443
|
+
>
|
|
444
|
+
<span class="pf-v6-c-button__icon">
|
|
445
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
446
|
+
</span>
|
|
447
|
+
</button>
|
|
448
|
+
</span>
|
|
449
|
+
</span>
|
|
450
|
+
</span>
|
|
451
|
+
</li>
|
|
452
|
+
</ul>
|
|
453
|
+
</div>
|
|
454
|
+
</div>
|
|
455
|
+
</div>
|
|
456
|
+
<div class="pf-v6-c-toolbar__item">
|
|
457
|
+
<div class="pf-v6-c-label-group pf-m-category">
|
|
458
|
+
<div class="pf-v6-c-label-group__main">
|
|
459
|
+
<span
|
|
460
|
+
class="pf-v6-c-label-group__label"
|
|
461
|
+
aria-hidden="true"
|
|
462
|
+
id="toolbar-group-label-group-label-group-risk-label-group-label"
|
|
463
|
+
>Risk</span>
|
|
464
|
+
<ul
|
|
465
|
+
class="pf-v6-c-label-group__list"
|
|
466
|
+
role="list"
|
|
467
|
+
aria-labelledby="toolbar-group-label-group-label-group-risk-label-group-label"
|
|
468
|
+
>
|
|
469
|
+
<li class="pf-v6-c-label-group__list-item">
|
|
470
|
+
<span class="pf-v6-c-label pf-m-outline">
|
|
471
|
+
<span class="pf-v6-c-label__content">
|
|
472
|
+
<span class="pf-v6-c-label__content">
|
|
473
|
+
<span
|
|
474
|
+
class="pf-v6-c-label__text"
|
|
475
|
+
id="toolbar-group-label-group-label-group-risklabel-one"
|
|
476
|
+
>Label one</span>
|
|
477
|
+
</span>
|
|
478
|
+
<span class="pf-v6-c-label__actions">
|
|
479
|
+
<button
|
|
480
|
+
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
481
|
+
type="button"
|
|
482
|
+
aria-labelledby="toolbar-group-label-group-label-group-riskremove-label-one toolbar-group-label-group-label-group-risklabel-one"
|
|
483
|
+
aria-label="Remove"
|
|
484
|
+
id="toolbar-group-label-group-label-group-riskremove-label-one"
|
|
485
|
+
>
|
|
486
|
+
<span class="pf-v6-c-button__icon">
|
|
487
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
488
|
+
</span>
|
|
489
|
+
</button>
|
|
490
|
+
</span>
|
|
491
|
+
</span>
|
|
492
|
+
</span>
|
|
493
|
+
</li>
|
|
494
|
+
<li class="pf-v6-c-label-group__list-item">
|
|
495
|
+
<span class="pf-v6-c-label pf-m-outline">
|
|
496
|
+
<span class="pf-v6-c-label__content">
|
|
497
|
+
<span class="pf-v6-c-label__content">
|
|
498
|
+
<span
|
|
499
|
+
class="pf-v6-c-label__text"
|
|
500
|
+
id="toolbar-group-label-group-label-group-risklabel-two"
|
|
501
|
+
>Label two</span>
|
|
502
|
+
</span>
|
|
503
|
+
<span class="pf-v6-c-label__actions">
|
|
504
|
+
<button
|
|
505
|
+
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
506
|
+
type="button"
|
|
507
|
+
aria-labelledby="toolbar-group-label-group-label-group-riskremove-label-two toolbar-group-label-group-label-group-risklabel-two"
|
|
508
|
+
aria-label="Remove"
|
|
509
|
+
id="toolbar-group-label-group-label-group-riskremove-label-two"
|
|
510
|
+
>
|
|
511
|
+
<span class="pf-v6-c-button__icon">
|
|
512
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
513
|
+
</span>
|
|
514
|
+
</button>
|
|
515
|
+
</span>
|
|
516
|
+
</span>
|
|
517
|
+
</span>
|
|
518
|
+
</li>
|
|
519
|
+
<li class="pf-v6-c-label-group__list-item">
|
|
520
|
+
<span class="pf-v6-c-label pf-m-outline">
|
|
521
|
+
<span class="pf-v6-c-label__content">
|
|
522
|
+
<span class="pf-v6-c-label__content">
|
|
523
|
+
<span
|
|
524
|
+
class="pf-v6-c-label__text"
|
|
525
|
+
id="toolbar-group-label-group-label-group-risklabel-three"
|
|
526
|
+
>Label three</span>
|
|
527
|
+
</span>
|
|
528
|
+
<span class="pf-v6-c-label__actions">
|
|
529
|
+
<button
|
|
530
|
+
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
531
|
+
type="button"
|
|
532
|
+
aria-labelledby="toolbar-group-label-group-label-group-riskremove-label-three toolbar-group-label-group-label-group-risklabel-three"
|
|
533
|
+
aria-label="Remove"
|
|
534
|
+
id="toolbar-group-label-group-label-group-riskremove-label-three"
|
|
535
|
+
>
|
|
536
|
+
<span class="pf-v6-c-button__icon">
|
|
537
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
538
|
+
</span>
|
|
539
|
+
</button>
|
|
540
|
+
</span>
|
|
541
|
+
</span>
|
|
542
|
+
</span>
|
|
543
|
+
</li>
|
|
544
|
+
</ul>
|
|
545
|
+
</div>
|
|
546
|
+
</div>
|
|
547
|
+
</div>
|
|
548
|
+
</div>
|
|
549
|
+
</div>
|
|
550
|
+
</div>
|
|
551
|
+
</div>
|
|
552
|
+
</div>
|
|
553
|
+
|
|
554
|
+
```
|
|
555
|
+
|
|
556
|
+
### Toggle group on mobile (filters collapsed, expandable content expanded)
|
|
557
|
+
|
|
558
|
+
```html
|
|
559
|
+
<div class="pf-v6-c-toolbar" id="toolbar-toggle-group-on-mobile">
|
|
560
|
+
<div class="pf-v6-c-toolbar__content">
|
|
561
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
562
|
+
<div class="pf-v6-c-toolbar__group pf-m-toggle-group">
|
|
563
|
+
<div class="pf-v6-c-toolbar__toggle">
|
|
181
564
|
<button
|
|
182
|
-
class="pf-v6-c-menu-toggle"
|
|
565
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
|
|
183
566
|
type="button"
|
|
184
|
-
aria-expanded="
|
|
185
|
-
|
|
567
|
+
aria-expanded="true"
|
|
568
|
+
aria-label="Show filters"
|
|
569
|
+
aria-controls="toolbar-toggle-group-on-mobile-expandable-content"
|
|
186
570
|
>
|
|
187
|
-
<span class="pf-v6-c-menu-
|
|
188
|
-
|
|
189
|
-
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
190
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
191
|
-
</span>
|
|
571
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
572
|
+
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
192
573
|
</span>
|
|
193
574
|
</button>
|
|
194
575
|
</div>
|
|
576
|
+
<div class="pf-v6-c-toolbar__item">
|
|
577
|
+
<div
|
|
578
|
+
class="pf-v6-c-input-group"
|
|
579
|
+
aria-label="search filter"
|
|
580
|
+
role="group"
|
|
581
|
+
>
|
|
582
|
+
<div class="pf-v6-c-input-group__item">
|
|
583
|
+
<button
|
|
584
|
+
class="pf-v6-c-menu-toggle"
|
|
585
|
+
type="button"
|
|
586
|
+
aria-expanded="false"
|
|
587
|
+
id="toolbar-toggle-group-on-mobile-search-filter-menu"
|
|
588
|
+
>
|
|
589
|
+
<span class="pf-v6-c-menu-toggle__text">Name</span>
|
|
590
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
591
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
592
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
593
|
+
</span>
|
|
594
|
+
</span>
|
|
595
|
+
</button>
|
|
596
|
+
</div>
|
|
597
|
+
<div class="pf-v6-c-input-group__item pf-m-fill">
|
|
598
|
+
<div class="pf-v6-c-text-input-group">
|
|
599
|
+
<div class="pf-v6-c-text-input-group__main pf-m-icon">
|
|
600
|
+
<span class="pf-v6-c-text-input-group__text">
|
|
601
|
+
<span class="pf-v6-c-text-input-group__icon">
|
|
602
|
+
<i class="fas fa-fw fa-search"></i>
|
|
603
|
+
</span>
|
|
604
|
+
<input
|
|
605
|
+
class="pf-v6-c-text-input-group__text-input"
|
|
606
|
+
type="text"
|
|
607
|
+
placeholder="Find by name"
|
|
608
|
+
value
|
|
609
|
+
aria-label="Search input"
|
|
610
|
+
/>
|
|
611
|
+
</span>
|
|
612
|
+
</div>
|
|
613
|
+
</div>
|
|
614
|
+
</div>
|
|
615
|
+
</div>
|
|
616
|
+
</div>
|
|
617
|
+
|
|
618
|
+
<div class="pf-v6-c-toolbar__group pf-m-filter-group pf-m-toggle-group">
|
|
619
|
+
<div class="pf-v6-c-toolbar__item">
|
|
620
|
+
<button
|
|
621
|
+
class="pf-v6-c-menu-toggle"
|
|
622
|
+
type="button"
|
|
623
|
+
aria-expanded="false"
|
|
624
|
+
id="toolbar-toggle-group-on-mobile-menu-toggle-checkbox-status"
|
|
625
|
+
>
|
|
626
|
+
<span class="pf-v6-c-menu-toggle__text">Status</span>
|
|
627
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
628
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
629
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
630
|
+
</span>
|
|
631
|
+
</span>
|
|
632
|
+
</button>
|
|
633
|
+
</div>
|
|
634
|
+
<div class="pf-v6-c-toolbar__item">
|
|
635
|
+
<button
|
|
636
|
+
class="pf-v6-c-menu-toggle"
|
|
637
|
+
type="button"
|
|
638
|
+
aria-expanded="false"
|
|
639
|
+
id="toolbar-toggle-group-on-mobile-menu-toggle-checkbox-risk"
|
|
640
|
+
>
|
|
641
|
+
<span class="pf-v6-c-menu-toggle__text">Risk</span>
|
|
642
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
643
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
644
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
645
|
+
</span>
|
|
646
|
+
</span>
|
|
647
|
+
</button>
|
|
648
|
+
</div>
|
|
649
|
+
</div>
|
|
650
|
+
</div>
|
|
651
|
+
</div>
|
|
652
|
+
|
|
653
|
+
<div
|
|
654
|
+
class="pf-v6-c-toolbar__expandable-content pf-m-expanded"
|
|
655
|
+
id="toolbar-toggle-group-on-mobile-expandable-content"
|
|
656
|
+
>
|
|
657
|
+
<div class="pf-v6-c-toolbar__item">
|
|
658
|
+
<div
|
|
659
|
+
class="pf-v6-c-input-group"
|
|
660
|
+
aria-label="search filter"
|
|
661
|
+
role="group"
|
|
662
|
+
>
|
|
663
|
+
<div class="pf-v6-c-input-group__item">
|
|
664
|
+
<button
|
|
665
|
+
class="pf-v6-c-menu-toggle"
|
|
666
|
+
type="button"
|
|
667
|
+
aria-expanded="false"
|
|
668
|
+
id="toolbar-toggle-group-on-mobile-expandable-search-filter-menu"
|
|
669
|
+
>
|
|
670
|
+
<span class="pf-v6-c-menu-toggle__text">Name</span>
|
|
671
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
672
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
673
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
674
|
+
</span>
|
|
675
|
+
</span>
|
|
676
|
+
</button>
|
|
677
|
+
</div>
|
|
678
|
+
<div class="pf-v6-c-input-group__item pf-m-fill">
|
|
679
|
+
<div class="pf-v6-c-text-input-group">
|
|
680
|
+
<div class="pf-v6-c-text-input-group__main pf-m-icon">
|
|
681
|
+
<span class="pf-v6-c-text-input-group__text">
|
|
682
|
+
<span class="pf-v6-c-text-input-group__icon">
|
|
683
|
+
<i class="fas fa-fw fa-search"></i>
|
|
684
|
+
</span>
|
|
685
|
+
<input
|
|
686
|
+
class="pf-v6-c-text-input-group__text-input"
|
|
687
|
+
type="text"
|
|
688
|
+
placeholder="Find by name"
|
|
689
|
+
value
|
|
690
|
+
aria-label="Search input"
|
|
691
|
+
/>
|
|
692
|
+
</span>
|
|
693
|
+
</div>
|
|
694
|
+
</div>
|
|
695
|
+
</div>
|
|
696
|
+
</div>
|
|
697
|
+
</div>
|
|
698
|
+
|
|
699
|
+
<div class="pf-v6-c-toolbar__group pf-m-filter-group">
|
|
195
700
|
<div class="pf-v6-c-toolbar__item">
|
|
196
701
|
<button
|
|
197
702
|
class="pf-v6-c-menu-toggle"
|
|
198
703
|
type="button"
|
|
199
704
|
aria-expanded="false"
|
|
200
|
-
id="toolbar-group-
|
|
705
|
+
id="toolbar-toggle-group-on-mobile-menu-toggle-checkbox-status-expandable"
|
|
201
706
|
>
|
|
202
|
-
<span class="pf-v6-c-menu-toggle__text">
|
|
707
|
+
<span class="pf-v6-c-menu-toggle__text">Status</span>
|
|
203
708
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
204
709
|
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
205
710
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
@@ -212,9 +717,9 @@ Several components in the following examples do not include functional and/or ac
|
|
|
212
717
|
class="pf-v6-c-menu-toggle"
|
|
213
718
|
type="button"
|
|
214
719
|
aria-expanded="false"
|
|
215
|
-
id="toolbar-group-
|
|
720
|
+
id="toolbar-toggle-group-on-mobile-menu-toggle-checkbox-risk-expandable"
|
|
216
721
|
>
|
|
217
|
-
<span class="pf-v6-c-menu-toggle__text">
|
|
722
|
+
<span class="pf-v6-c-menu-toggle__text">Risk</span>
|
|
218
723
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
219
724
|
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
220
725
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
@@ -223,92 +728,33 @@ Several components in the following examples do not include functional and/or ac
|
|
|
223
728
|
</button>
|
|
224
729
|
</div>
|
|
225
730
|
</div>
|
|
226
|
-
<div class="pf-v6-c-toolbar__group pf-m-icon-button-group">
|
|
227
|
-
<div class="pf-v6-c-toolbar__item">
|
|
228
|
-
<button
|
|
229
|
-
class="pf-v6-c-button pf-m-plain"
|
|
230
|
-
type="button"
|
|
231
|
-
aria-label="Edit"
|
|
232
|
-
>
|
|
233
|
-
<span class="pf-v6-c-button__icon">
|
|
234
|
-
<i class="fas fa-edit" aria-hidden="true"></i>
|
|
235
|
-
</span>
|
|
236
|
-
</button>
|
|
237
|
-
</div>
|
|
238
|
-
<div class="pf-v6-c-toolbar__item">
|
|
239
|
-
<button
|
|
240
|
-
class="pf-v6-c-button pf-m-plain"
|
|
241
|
-
type="button"
|
|
242
|
-
aria-label="Clone"
|
|
243
|
-
>
|
|
244
|
-
<span class="pf-v6-c-button__icon">
|
|
245
|
-
<i class="fas fa-clone" aria-hidden="true"></i>
|
|
246
|
-
</span>
|
|
247
|
-
</button>
|
|
248
|
-
</div>
|
|
249
|
-
<div class="pf-v6-c-toolbar__item">
|
|
250
|
-
<button
|
|
251
|
-
class="pf-v6-c-button pf-m-plain"
|
|
252
|
-
type="button"
|
|
253
|
-
aria-label="Sync"
|
|
254
|
-
>
|
|
255
|
-
<span class="pf-v6-c-button__icon">
|
|
256
|
-
<i class="fas fa-sync" aria-hidden="true"></i>
|
|
257
|
-
</span>
|
|
258
|
-
</button>
|
|
259
|
-
</div>
|
|
260
|
-
</div>
|
|
261
|
-
<div class="pf-v6-c-toolbar__group pf-m-button-group">
|
|
262
|
-
<div class="pf-v6-c-toolbar__item">
|
|
263
|
-
<button class="pf-v6-c-button pf-m-primary" type="button">
|
|
264
|
-
<span class="pf-v6-c-button__text">Action</span>
|
|
265
|
-
</button>
|
|
266
|
-
</div>
|
|
267
|
-
<div class="pf-v6-c-toolbar__item">
|
|
268
|
-
<button class="pf-v6-c-button pf-m-secondary" type="button">
|
|
269
|
-
<span class="pf-v6-c-button__text">Secondary</span>
|
|
270
|
-
</button>
|
|
271
|
-
</div>
|
|
272
|
-
<div class="pf-v6-c-toolbar__item">
|
|
273
|
-
<button class="pf-v6-c-button pf-m-tertiary" type="button">
|
|
274
|
-
<span class="pf-v6-c-button__text">Tertiary</span>
|
|
275
|
-
</button>
|
|
276
|
-
</div>
|
|
277
|
-
</div>
|
|
278
731
|
</div>
|
|
279
732
|
</div>
|
|
280
733
|
</div>
|
|
281
734
|
|
|
282
735
|
```
|
|
283
736
|
|
|
284
|
-
###
|
|
285
|
-
|
|
286
|
-
| Class | Applied to | Outcome |
|
|
287
|
-
| -- | -- | -- |
|
|
288
|
-
| `.pf-m-filter-group` | `.pf-v6-c-toolbar__group` | Modifies toolbar group column gap. |
|
|
289
|
-
| `.pf-m-icon-button-group` | `.pf-v6-c-toolbar__group` | Modifies toolbar group column gap. |
|
|
290
|
-
|
|
291
|
-
### Toggle group
|
|
737
|
+
### Toggle group on desktop
|
|
292
738
|
|
|
293
739
|
```html
|
|
294
|
-
<div class="pf-v6-c-toolbar" id="toolbar-toggle-group-
|
|
740
|
+
<div class="pf-v6-c-toolbar" id="toolbar-toggle-group-desktop">
|
|
295
741
|
<div class="pf-v6-c-toolbar__content">
|
|
296
742
|
<div class="pf-v6-c-toolbar__content-section">
|
|
297
|
-
<div class="pf-v6-c-toolbar__group pf-m-
|
|
298
|
-
<div class="pf-v6-c-toolbar__toggle
|
|
743
|
+
<div class="pf-v6-c-toolbar__group pf-m-show pf-m-toggle-group">
|
|
744
|
+
<div class="pf-v6-c-toolbar__toggle">
|
|
299
745
|
<button
|
|
300
746
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
301
747
|
type="button"
|
|
302
748
|
aria-expanded="false"
|
|
303
749
|
aria-label="Show filters"
|
|
304
|
-
aria-controls="toolbar-toggle-group-
|
|
750
|
+
aria-controls="toolbar-toggle-group-desktop-expandable-content"
|
|
305
751
|
>
|
|
306
752
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
307
753
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
308
754
|
</span>
|
|
309
755
|
</button>
|
|
310
756
|
</div>
|
|
311
|
-
<div class="pf-v6-c-toolbar__item
|
|
757
|
+
<div class="pf-v6-c-toolbar__item">
|
|
312
758
|
<div
|
|
313
759
|
class="pf-v6-c-input-group"
|
|
314
760
|
aria-label="search filter"
|
|
@@ -319,11 +765,8 @@ Several components in the following examples do not include functional and/or ac
|
|
|
319
765
|
class="pf-v6-c-menu-toggle"
|
|
320
766
|
type="button"
|
|
321
767
|
aria-expanded="false"
|
|
322
|
-
id="toolbar-toggle-group-
|
|
768
|
+
id="toolbar-toggle-group-desktop-search-filter-menu"
|
|
323
769
|
>
|
|
324
|
-
<span class="pf-v6-c-menu-toggle__icon">
|
|
325
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
326
|
-
</span>
|
|
327
770
|
<span class="pf-v6-c-menu-toggle__text">Name</span>
|
|
328
771
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
329
772
|
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
@@ -342,7 +785,7 @@ Several components in the following examples do not include functional and/or ac
|
|
|
342
785
|
<input
|
|
343
786
|
class="pf-v6-c-text-input-group__text-input"
|
|
344
787
|
type="text"
|
|
345
|
-
placeholder="
|
|
788
|
+
placeholder="Find by name"
|
|
346
789
|
value
|
|
347
790
|
aria-label="Search input"
|
|
348
791
|
/>
|
|
@@ -352,13 +795,16 @@ Several components in the following examples do not include functional and/or ac
|
|
|
352
795
|
</div>
|
|
353
796
|
</div>
|
|
354
797
|
</div>
|
|
355
|
-
|
|
798
|
+
|
|
799
|
+
<div
|
|
800
|
+
class="pf-v6-c-toolbar__group pf-m-show pf-m-filter-group pf-m-toggle-group"
|
|
801
|
+
>
|
|
356
802
|
<div class="pf-v6-c-toolbar__item">
|
|
357
803
|
<button
|
|
358
804
|
class="pf-v6-c-menu-toggle"
|
|
359
805
|
type="button"
|
|
360
806
|
aria-expanded="false"
|
|
361
|
-
id="toolbar-toggle-group-
|
|
807
|
+
id="toolbar-toggle-group-desktop-menu-toggle-checkbox-status"
|
|
362
808
|
>
|
|
363
809
|
<span class="pf-v6-c-menu-toggle__text">Status</span>
|
|
364
810
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
@@ -372,57 +818,27 @@ Several components in the following examples do not include functional and/or ac
|
|
|
372
818
|
<button
|
|
373
819
|
class="pf-v6-c-menu-toggle"
|
|
374
820
|
type="button"
|
|
375
|
-
aria-expanded="false"
|
|
376
|
-
id="toolbar-toggle-group-
|
|
377
|
-
>
|
|
378
|
-
<span class="pf-v6-c-menu-toggle__text">Risk</span>
|
|
379
|
-
<span class="pf-v6-c-menu-toggle__controls">
|
|
380
|
-
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
381
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
382
|
-
</span>
|
|
383
|
-
</span>
|
|
384
|
-
</button>
|
|
385
|
-
</div>
|
|
386
|
-
</div>
|
|
387
|
-
</div>
|
|
388
|
-
</div>
|
|
389
|
-
<div
|
|
390
|
-
class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
|
|
391
|
-
id="toolbar-toggle-group-example-expandable-content"
|
|
392
|
-
hidden
|
|
393
|
-
></div>
|
|
394
|
-
</div>
|
|
395
|
-
</div>
|
|
396
|
-
|
|
397
|
-
```
|
|
398
|
-
|
|
399
|
-
### Toggle group on mobile (filters collapsed, expandable content expanded)
|
|
400
|
-
|
|
401
|
-
```html
|
|
402
|
-
<div class="pf-v6-c-toolbar" id="toolbar-toggle-group-collapsed-example">
|
|
403
|
-
<div class="pf-v6-c-toolbar__content">
|
|
404
|
-
<div class="pf-v6-c-toolbar__content-section">
|
|
405
|
-
<div class="pf-v6-c-toolbar__group pf-m-toggle-group">
|
|
406
|
-
<div class="pf-v6-c-toolbar__toggle pf-m-show">
|
|
407
|
-
<button
|
|
408
|
-
class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
|
|
409
|
-
type="button"
|
|
410
|
-
aria-expanded="true"
|
|
411
|
-
aria-label="Show filters"
|
|
412
|
-
aria-controls="toolbar-toggle-group-collapsed-example-expandable-content"
|
|
413
|
-
>
|
|
414
|
-
<span class="pf-v6-c-menu-toggle__icon">
|
|
415
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
416
|
-
</span>
|
|
417
|
-
</button>
|
|
821
|
+
aria-expanded="false"
|
|
822
|
+
id="toolbar-toggle-group-desktop-menu-toggle-checkbox-risk"
|
|
823
|
+
>
|
|
824
|
+
<span class="pf-v6-c-menu-toggle__text">Risk</span>
|
|
825
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
826
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
827
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
828
|
+
</span>
|
|
829
|
+
</span>
|
|
830
|
+
</button>
|
|
831
|
+
</div>
|
|
418
832
|
</div>
|
|
419
833
|
</div>
|
|
420
834
|
</div>
|
|
835
|
+
|
|
421
836
|
<div
|
|
422
|
-
class="pf-v6-c-toolbar__expandable-content pf-m-
|
|
423
|
-
id="toolbar-toggle-group-
|
|
837
|
+
class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
|
|
838
|
+
id="toolbar-toggle-group-desktop-expandable-content"
|
|
839
|
+
hidden
|
|
424
840
|
>
|
|
425
|
-
<div class="pf-v6-c-toolbar__item
|
|
841
|
+
<div class="pf-v6-c-toolbar__item">
|
|
426
842
|
<div
|
|
427
843
|
class="pf-v6-c-input-group"
|
|
428
844
|
aria-label="search filter"
|
|
@@ -433,11 +849,8 @@ Several components in the following examples do not include functional and/or ac
|
|
|
433
849
|
class="pf-v6-c-menu-toggle"
|
|
434
850
|
type="button"
|
|
435
851
|
aria-expanded="false"
|
|
436
|
-
id="toolbar-toggle-group-
|
|
852
|
+
id="toolbar-toggle-group-desktop-expandable-search-filter-menu"
|
|
437
853
|
>
|
|
438
|
-
<span class="pf-v6-c-menu-toggle__icon">
|
|
439
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
440
|
-
</span>
|
|
441
854
|
<span class="pf-v6-c-menu-toggle__text">Name</span>
|
|
442
855
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
443
856
|
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
@@ -456,7 +869,7 @@ Several components in the following examples do not include functional and/or ac
|
|
|
456
869
|
<input
|
|
457
870
|
class="pf-v6-c-text-input-group__text-input"
|
|
458
871
|
type="text"
|
|
459
|
-
placeholder="
|
|
872
|
+
placeholder="Find by name"
|
|
460
873
|
value
|
|
461
874
|
aria-label="Search input"
|
|
462
875
|
/>
|
|
@@ -466,13 +879,14 @@ Several components in the following examples do not include functional and/or ac
|
|
|
466
879
|
</div>
|
|
467
880
|
</div>
|
|
468
881
|
</div>
|
|
882
|
+
|
|
469
883
|
<div class="pf-v6-c-toolbar__group pf-m-filter-group">
|
|
470
884
|
<div class="pf-v6-c-toolbar__item">
|
|
471
885
|
<button
|
|
472
886
|
class="pf-v6-c-menu-toggle"
|
|
473
887
|
type="button"
|
|
474
888
|
aria-expanded="false"
|
|
475
|
-
id="toolbar-toggle-group-
|
|
889
|
+
id="toolbar-toggle-group-desktop-menu-toggle-checkbox-status-expandable"
|
|
476
890
|
>
|
|
477
891
|
<span class="pf-v6-c-menu-toggle__text">Status</span>
|
|
478
892
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
@@ -487,7 +901,7 @@ Several components in the following examples do not include functional and/or ac
|
|
|
487
901
|
class="pf-v6-c-menu-toggle"
|
|
488
902
|
type="button"
|
|
489
903
|
aria-expanded="false"
|
|
490
|
-
id="toolbar-toggle-group-
|
|
904
|
+
id="toolbar-toggle-group-desktop-menu-toggle-checkbox-risk-expandable"
|
|
491
905
|
>
|
|
492
906
|
<span class="pf-v6-c-menu-toggle__text">Risk</span>
|
|
493
907
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
@@ -504,9 +918,15 @@ Several components in the following examples do not include functional and/or ac
|
|
|
504
918
|
|
|
505
919
|
```
|
|
506
920
|
|
|
507
|
-
###
|
|
921
|
+
### Toolbar group types
|
|
508
922
|
|
|
509
|
-
|
|
923
|
+
| Class | Applied to | Outcome |
|
|
924
|
+
| -- | -- | -- |
|
|
925
|
+
| `.pf-m-filter-group` | `.pf-v6-c-toolbar__group` | Modifies toolbar group column gap. |
|
|
926
|
+
| `.pf-m-action-group` | `.pf-v6-c-toolbar__group` | Modifies toolbar group column gap for action group. |
|
|
927
|
+
| `.pf-m-action-group-plain` | `.pf-v6-c-toolbar__group` | Modifies toolbar group column gap for action plain group. |
|
|
928
|
+
| `.pf-m-action-group-inline` | `.pf-v6-c-toolbar__group` | Modifies toolbar group column gap for action inline group. |
|
|
929
|
+
| `.pf-m-toggle-group` | `.pf-v6-c-toolbar__group` | The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be hidden/shown. By default, all filters are hidden until the specified breakpoint is reached. `.pf-m-show-on-{md, lg, xl}` controls when filters are shown and when the toggle button is hidden. |
|
|
510
930
|
|
|
511
931
|
### Accessibility
|
|
512
932
|
|
|
@@ -527,8 +947,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
527
947
|
|
|
528
948
|
| Class | Applied to | Outcome |
|
|
529
949
|
| -- | -- | -- |
|
|
530
|
-
| `.pf-m-[show/hide][-on-[sm/md/lg/xl/2xl]]` | `.pf-v6-c-toolbar__group
|
|
531
|
-
| `.pf-m-label-container` | `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
|
|
950
|
+
| `.pf-m-[show/hide][-on-[sm/md/lg/xl/2xl]]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item`, `.pf-v6-c-toolbar__expandable-content` | Modifies toolbar element visibility. |
|
|
532
951
|
| `.pf-m-expanded` | `.pf-v6-c-toolbar__expandable-content`, `.pf-v6-c-toolbar__toggle` | Modifies the component for the expanded state. |
|
|
533
952
|
|
|
534
953
|
### Selected
|
|
@@ -575,8 +994,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
575
994
|
</button>
|
|
576
995
|
</div>
|
|
577
996
|
</div>
|
|
997
|
+
|
|
578
998
|
<div class="pf-v6-c-toolbar__group pf-m-toggle-group">
|
|
579
|
-
<div class="pf-v6-c-toolbar__toggle
|
|
999
|
+
<div class="pf-v6-c-toolbar__toggle">
|
|
580
1000
|
<button
|
|
581
1001
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
582
1002
|
type="button"
|
|
@@ -589,7 +1009,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
589
1009
|
</span>
|
|
590
1010
|
</button>
|
|
591
1011
|
</div>
|
|
592
|
-
<div class="pf-v6-c-toolbar__item
|
|
1012
|
+
<div class="pf-v6-c-toolbar__item">
|
|
593
1013
|
<div
|
|
594
1014
|
class="pf-v6-c-input-group"
|
|
595
1015
|
aria-label="search filter"
|
|
@@ -602,9 +1022,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
602
1022
|
aria-expanded="false"
|
|
603
1023
|
id="toolbar-selected-filters-toggle-group-collapsed-example-search-filter-menu"
|
|
604
1024
|
>
|
|
605
|
-
<span class="pf-v6-c-menu-toggle__icon">
|
|
606
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
607
|
-
</span>
|
|
608
1025
|
<span class="pf-v6-c-menu-toggle__text">Name</span>
|
|
609
1026
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
610
1027
|
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
@@ -623,7 +1040,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
623
1040
|
<input
|
|
624
1041
|
class="pf-v6-c-text-input-group__text-input"
|
|
625
1042
|
type="text"
|
|
626
|
-
placeholder="
|
|
1043
|
+
placeholder="Find by name"
|
|
627
1044
|
value
|
|
628
1045
|
aria-label="Search input"
|
|
629
1046
|
/>
|
|
@@ -633,13 +1050,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
633
1050
|
</div>
|
|
634
1051
|
</div>
|
|
635
1052
|
</div>
|
|
636
|
-
|
|
1053
|
+
|
|
1054
|
+
<div class="pf-v6-c-toolbar__group pf-m-filter-group pf-m-toggle-group">
|
|
637
1055
|
<div class="pf-v6-c-toolbar__item">
|
|
638
1056
|
<button
|
|
639
1057
|
class="pf-v6-c-menu-toggle"
|
|
640
1058
|
type="button"
|
|
641
1059
|
aria-expanded="false"
|
|
642
|
-
id="toolbar-selected-filters-toggle-group-collapsed-
|
|
1060
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-menu-toggle-checkbox-status"
|
|
643
1061
|
>
|
|
644
1062
|
<span class="pf-v6-c-menu-toggle__text">Status</span>
|
|
645
1063
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
@@ -654,7 +1072,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
654
1072
|
class="pf-v6-c-menu-toggle"
|
|
655
1073
|
type="button"
|
|
656
1074
|
aria-expanded="false"
|
|
657
|
-
id="toolbar-selected-filters-toggle-group-collapsed-
|
|
1075
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-menu-toggle-checkbox-risk"
|
|
658
1076
|
>
|
|
659
1077
|
<span class="pf-v6-c-menu-toggle__text">Risk</span>
|
|
660
1078
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
@@ -666,221 +1084,41 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
666
1084
|
</div>
|
|
667
1085
|
</div>
|
|
668
1086
|
</div>
|
|
669
|
-
<div class="pf-v6-c-toolbar__item pf-m-overflow-menu">
|
|
670
|
-
<div
|
|
671
|
-
class="pf-v6-c-overflow-menu"
|
|
672
|
-
id="toolbar-selected-filters-toggle-group-collapsed-exampleicon-button-overflow-menu"
|
|
673
|
-
></div>
|
|
674
|
-
</div>
|
|
675
1087
|
</div>
|
|
1088
|
+
|
|
676
1089
|
<div
|
|
677
1090
|
class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
|
|
678
1091
|
id="toolbar-selected-filters-toggle-group-collapsed-example-expandable-content"
|
|
679
1092
|
hidden
|
|
680
1093
|
>
|
|
681
|
-
<div class="pf-v6-c-toolbar__group pf-m-
|
|
682
|
-
<div class="pf-v6-c-
|
|
683
|
-
<div class="pf-v6-c-toolbar__item">
|
|
684
|
-
<div class="pf-v6-c-label-group pf-m-category">
|
|
685
|
-
<div class="pf-v6-c-label-group__main">
|
|
686
|
-
<span
|
|
687
|
-
class="pf-v6-c-label-group__label"
|
|
688
|
-
aria-hidden="true"
|
|
689
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-status-label-group-label"
|
|
690
|
-
>Status</span>
|
|
691
|
-
<ul
|
|
692
|
-
class="pf-v6-c-label-group__list"
|
|
693
|
-
role="list"
|
|
694
|
-
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-label-group-status-label-group-label"
|
|
695
|
-
>
|
|
696
|
-
<li class="pf-v6-c-label-group__list-item">
|
|
697
|
-
<span class="pf-v6-c-label pf-m-outline">
|
|
698
|
-
<span class="pf-v6-c-label__content">
|
|
699
|
-
<span class="pf-v6-c-label__content">
|
|
700
|
-
<span
|
|
701
|
-
class="pf-v6-c-label__text"
|
|
702
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-statuslabel-one"
|
|
703
|
-
>Label one</span>
|
|
704
|
-
</span>
|
|
705
|
-
<span class="pf-v6-c-label__actions">
|
|
706
|
-
<button
|
|
707
|
-
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
708
|
-
type="button"
|
|
709
|
-
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-label-group-statusremove-label-one toolbar-selected-filters-toggle-group-collapsed-example-label-group-statuslabel-one"
|
|
710
|
-
aria-label="Remove"
|
|
711
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-statusremove-label-one"
|
|
712
|
-
>
|
|
713
|
-
<span class="pf-v6-c-button__icon">
|
|
714
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
715
|
-
</span>
|
|
716
|
-
</button>
|
|
717
|
-
</span>
|
|
718
|
-
</span>
|
|
719
|
-
</span>
|
|
720
|
-
</li>
|
|
721
|
-
<li class="pf-v6-c-label-group__list-item">
|
|
722
|
-
<span class="pf-v6-c-label pf-m-outline">
|
|
723
|
-
<span class="pf-v6-c-label__content">
|
|
724
|
-
<span class="pf-v6-c-label__content">
|
|
725
|
-
<span
|
|
726
|
-
class="pf-v6-c-label__text"
|
|
727
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-statuslabel-two"
|
|
728
|
-
>Label two</span>
|
|
729
|
-
</span>
|
|
730
|
-
<span class="pf-v6-c-label__actions">
|
|
731
|
-
<button
|
|
732
|
-
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
733
|
-
type="button"
|
|
734
|
-
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-label-group-statusremove-label-two toolbar-selected-filters-toggle-group-collapsed-example-label-group-statuslabel-two"
|
|
735
|
-
aria-label="Remove"
|
|
736
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-statusremove-label-two"
|
|
737
|
-
>
|
|
738
|
-
<span class="pf-v6-c-button__icon">
|
|
739
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
740
|
-
</span>
|
|
741
|
-
</button>
|
|
742
|
-
</span>
|
|
743
|
-
</span>
|
|
744
|
-
</span>
|
|
745
|
-
</li>
|
|
746
|
-
<li class="pf-v6-c-label-group__list-item">
|
|
747
|
-
<span class="pf-v6-c-label pf-m-outline">
|
|
748
|
-
<span class="pf-v6-c-label__content">
|
|
749
|
-
<span class="pf-v6-c-label__content">
|
|
750
|
-
<span
|
|
751
|
-
class="pf-v6-c-label__text"
|
|
752
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-statuslabel-three"
|
|
753
|
-
>Label three</span>
|
|
754
|
-
</span>
|
|
755
|
-
<span class="pf-v6-c-label__actions">
|
|
756
|
-
<button
|
|
757
|
-
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
758
|
-
type="button"
|
|
759
|
-
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-label-group-statusremove-label-three toolbar-selected-filters-toggle-group-collapsed-example-label-group-statuslabel-three"
|
|
760
|
-
aria-label="Remove"
|
|
761
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-statusremove-label-three"
|
|
762
|
-
>
|
|
763
|
-
<span class="pf-v6-c-button__icon">
|
|
764
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
765
|
-
</span>
|
|
766
|
-
</button>
|
|
767
|
-
</span>
|
|
768
|
-
</span>
|
|
769
|
-
</span>
|
|
770
|
-
</li>
|
|
771
|
-
</ul>
|
|
772
|
-
</div>
|
|
773
|
-
</div>
|
|
774
|
-
</div>
|
|
775
|
-
<div class="pf-v6-c-toolbar__item">
|
|
776
|
-
<div class="pf-v6-c-label-group pf-m-category">
|
|
777
|
-
<div class="pf-v6-c-label-group__main">
|
|
778
|
-
<span
|
|
779
|
-
class="pf-v6-c-label-group__label"
|
|
780
|
-
aria-hidden="true"
|
|
781
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-risk-label-group-label"
|
|
782
|
-
>Risk</span>
|
|
783
|
-
<ul
|
|
784
|
-
class="pf-v6-c-label-group__list"
|
|
785
|
-
role="list"
|
|
786
|
-
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-label-group-risk-label-group-label"
|
|
787
|
-
>
|
|
788
|
-
<li class="pf-v6-c-label-group__list-item">
|
|
789
|
-
<span class="pf-v6-c-label pf-m-outline">
|
|
790
|
-
<span class="pf-v6-c-label__content">
|
|
791
|
-
<span class="pf-v6-c-label__content">
|
|
792
|
-
<span
|
|
793
|
-
class="pf-v6-c-label__text"
|
|
794
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-risklabel-one"
|
|
795
|
-
>Label one</span>
|
|
796
|
-
</span>
|
|
797
|
-
<span class="pf-v6-c-label__actions">
|
|
798
|
-
<button
|
|
799
|
-
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
800
|
-
type="button"
|
|
801
|
-
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-label-group-riskremove-label-one toolbar-selected-filters-toggle-group-collapsed-example-label-group-risklabel-one"
|
|
802
|
-
aria-label="Remove"
|
|
803
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-riskremove-label-one"
|
|
804
|
-
>
|
|
805
|
-
<span class="pf-v6-c-button__icon">
|
|
806
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
807
|
-
</span>
|
|
808
|
-
</button>
|
|
809
|
-
</span>
|
|
810
|
-
</span>
|
|
811
|
-
</span>
|
|
812
|
-
</li>
|
|
813
|
-
<li class="pf-v6-c-label-group__list-item">
|
|
814
|
-
<span class="pf-v6-c-label pf-m-outline">
|
|
815
|
-
<span class="pf-v6-c-label__content">
|
|
816
|
-
<span class="pf-v6-c-label__content">
|
|
817
|
-
<span
|
|
818
|
-
class="pf-v6-c-label__text"
|
|
819
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-risklabel-two"
|
|
820
|
-
>Label two</span>
|
|
821
|
-
</span>
|
|
822
|
-
<span class="pf-v6-c-label__actions">
|
|
823
|
-
<button
|
|
824
|
-
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
825
|
-
type="button"
|
|
826
|
-
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-label-group-riskremove-label-two toolbar-selected-filters-toggle-group-collapsed-example-label-group-risklabel-two"
|
|
827
|
-
aria-label="Remove"
|
|
828
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-riskremove-label-two"
|
|
829
|
-
>
|
|
830
|
-
<span class="pf-v6-c-button__icon">
|
|
831
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
832
|
-
</span>
|
|
833
|
-
</button>
|
|
834
|
-
</span>
|
|
835
|
-
</span>
|
|
836
|
-
</span>
|
|
837
|
-
</li>
|
|
838
|
-
<li class="pf-v6-c-label-group__list-item">
|
|
839
|
-
<span class="pf-v6-c-label pf-m-outline">
|
|
840
|
-
<span class="pf-v6-c-label__content">
|
|
841
|
-
<span class="pf-v6-c-label__content">
|
|
842
|
-
<span
|
|
843
|
-
class="pf-v6-c-label__text"
|
|
844
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-risklabel-three"
|
|
845
|
-
>Label three</span>
|
|
846
|
-
</span>
|
|
847
|
-
<span class="pf-v6-c-label__actions">
|
|
848
|
-
<button
|
|
849
|
-
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
850
|
-
type="button"
|
|
851
|
-
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-label-group-riskremove-label-three toolbar-selected-filters-toggle-group-collapsed-example-label-group-risklabel-three"
|
|
852
|
-
aria-label="Remove"
|
|
853
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-riskremove-label-three"
|
|
854
|
-
>
|
|
855
|
-
<span class="pf-v6-c-button__icon">
|
|
856
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
857
|
-
</span>
|
|
858
|
-
</button>
|
|
859
|
-
</span>
|
|
860
|
-
</span>
|
|
861
|
-
</span>
|
|
862
|
-
</li>
|
|
863
|
-
</ul>
|
|
864
|
-
</div>
|
|
865
|
-
</div>
|
|
866
|
-
</div>
|
|
867
|
-
</div>
|
|
1094
|
+
<div class="pf-v6-c-toolbar__group pf-m-action-group-inline">
|
|
1095
|
+
<div class="pf-v6-c-toolbar__item">6 filters applied</div>
|
|
868
1096
|
<div class="pf-v6-c-toolbar__item">
|
|
869
1097
|
<button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
|
|
870
1098
|
<span class="pf-v6-c-button__text">Clear all filters</span>
|
|
871
1099
|
</button>
|
|
872
1100
|
</div>
|
|
1101
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1102
|
+
<button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
|
|
1103
|
+
<span class="pf-v6-c-button__text">Save all filters</span>
|
|
1104
|
+
</button>
|
|
1105
|
+
</div>
|
|
873
1106
|
</div>
|
|
874
1107
|
</div>
|
|
875
1108
|
</div>
|
|
876
1109
|
<div class="pf-v6-c-toolbar__content">
|
|
877
|
-
<div class="pf-v6-c-toolbar__group">
|
|
1110
|
+
<div class="pf-v6-c-toolbar__group pf-m-action-group-inline">
|
|
878
1111
|
<div class="pf-v6-c-toolbar__item">6 filters applied</div>
|
|
879
1112
|
<div class="pf-v6-c-toolbar__item">
|
|
880
1113
|
<button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
|
|
881
1114
|
<span class="pf-v6-c-button__text">Clear all filters</span>
|
|
882
1115
|
</button>
|
|
883
1116
|
</div>
|
|
1117
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1118
|
+
<button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
|
|
1119
|
+
<span class="pf-v6-c-button__text">Save all filters</span>
|
|
1120
|
+
</button>
|
|
1121
|
+
</div>
|
|
884
1122
|
</div>
|
|
885
1123
|
</div>
|
|
886
1124
|
</div>
|
|
@@ -929,8 +1167,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
929
1167
|
</button>
|
|
930
1168
|
</div>
|
|
931
1169
|
</div>
|
|
1170
|
+
|
|
932
1171
|
<div class="pf-v6-c-toolbar__group pf-m-toggle-group">
|
|
933
|
-
<div class="pf-v6-c-toolbar__toggle
|
|
1172
|
+
<div class="pf-v6-c-toolbar__toggle">
|
|
934
1173
|
<button
|
|
935
1174
|
class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
|
|
936
1175
|
type="button"
|
|
@@ -943,19 +1182,88 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
943
1182
|
</span>
|
|
944
1183
|
</button>
|
|
945
1184
|
</div>
|
|
1185
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1186
|
+
<div
|
|
1187
|
+
class="pf-v6-c-input-group"
|
|
1188
|
+
aria-label="search filter"
|
|
1189
|
+
role="group"
|
|
1190
|
+
>
|
|
1191
|
+
<div class="pf-v6-c-input-group__item">
|
|
1192
|
+
<button
|
|
1193
|
+
class="pf-v6-c-menu-toggle"
|
|
1194
|
+
type="button"
|
|
1195
|
+
aria-expanded="false"
|
|
1196
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-search-filter-menu"
|
|
1197
|
+
>
|
|
1198
|
+
<span class="pf-v6-c-menu-toggle__text">Name</span>
|
|
1199
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1200
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1201
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1202
|
+
</span>
|
|
1203
|
+
</span>
|
|
1204
|
+
</button>
|
|
1205
|
+
</div>
|
|
1206
|
+
<div class="pf-v6-c-input-group__item pf-m-fill">
|
|
1207
|
+
<div class="pf-v6-c-text-input-group">
|
|
1208
|
+
<div class="pf-v6-c-text-input-group__main pf-m-icon">
|
|
1209
|
+
<span class="pf-v6-c-text-input-group__text">
|
|
1210
|
+
<span class="pf-v6-c-text-input-group__icon">
|
|
1211
|
+
<i class="fas fa-fw fa-search"></i>
|
|
1212
|
+
</span>
|
|
1213
|
+
<input
|
|
1214
|
+
class="pf-v6-c-text-input-group__text-input"
|
|
1215
|
+
type="text"
|
|
1216
|
+
placeholder="Find by name"
|
|
1217
|
+
value
|
|
1218
|
+
aria-label="Search input"
|
|
1219
|
+
/>
|
|
1220
|
+
</span>
|
|
1221
|
+
</div>
|
|
1222
|
+
</div>
|
|
1223
|
+
</div>
|
|
1224
|
+
</div>
|
|
1225
|
+
</div>
|
|
1226
|
+
|
|
1227
|
+
<div class="pf-v6-c-toolbar__group pf-m-filter-group pf-m-toggle-group">
|
|
1228
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1229
|
+
<button
|
|
1230
|
+
class="pf-v6-c-menu-toggle"
|
|
1231
|
+
type="button"
|
|
1232
|
+
aria-expanded="false"
|
|
1233
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-status"
|
|
1234
|
+
>
|
|
1235
|
+
<span class="pf-v6-c-menu-toggle__text">Status</span>
|
|
1236
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1237
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1238
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1239
|
+
</span>
|
|
1240
|
+
</span>
|
|
1241
|
+
</button>
|
|
1242
|
+
</div>
|
|
1243
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1244
|
+
<button
|
|
1245
|
+
class="pf-v6-c-menu-toggle"
|
|
1246
|
+
type="button"
|
|
1247
|
+
aria-expanded="false"
|
|
1248
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-risk"
|
|
1249
|
+
>
|
|
1250
|
+
<span class="pf-v6-c-menu-toggle__text">Risk</span>
|
|
1251
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1252
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1253
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1254
|
+
</span>
|
|
1255
|
+
</span>
|
|
1256
|
+
</button>
|
|
1257
|
+
</div>
|
|
1258
|
+
</div>
|
|
946
1259
|
</div>
|
|
947
|
-
<div class="pf-v6-c-toolbar__item pf-m-overflow-menu">
|
|
948
|
-
<div
|
|
949
|
-
class="pf-v6-c-overflow-menu"
|
|
950
|
-
id="toolbar-selected-filters-toggle-group-expanded-exampleicon-button-overflow-menu"
|
|
951
|
-
></div>
|
|
952
|
-
</div>
|
|
953
1260
|
</div>
|
|
1261
|
+
|
|
954
1262
|
<div
|
|
955
1263
|
class="pf-v6-c-toolbar__expandable-content pf-m-expanded"
|
|
956
1264
|
id="toolbar-selected-filters-toggle-group-expanded-example-expandable-content"
|
|
957
1265
|
>
|
|
958
|
-
<div class="pf-v6-c-toolbar__item
|
|
1266
|
+
<div class="pf-v6-c-toolbar__item">
|
|
959
1267
|
<div
|
|
960
1268
|
class="pf-v6-c-input-group"
|
|
961
1269
|
aria-label="search filter"
|
|
@@ -966,11 +1274,8 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
966
1274
|
class="pf-v6-c-menu-toggle"
|
|
967
1275
|
type="button"
|
|
968
1276
|
aria-expanded="false"
|
|
969
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-search-filter-menu"
|
|
1277
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-expandable-search-filter-menu"
|
|
970
1278
|
>
|
|
971
|
-
<span class="pf-v6-c-menu-toggle__icon">
|
|
972
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
973
|
-
</span>
|
|
974
1279
|
<span class="pf-v6-c-menu-toggle__text">Name</span>
|
|
975
1280
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
976
1281
|
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
@@ -989,7 +1294,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
989
1294
|
<input
|
|
990
1295
|
class="pf-v6-c-text-input-group__text-input"
|
|
991
1296
|
type="text"
|
|
992
|
-
placeholder="
|
|
1297
|
+
placeholder="Find by name"
|
|
993
1298
|
value
|
|
994
1299
|
aria-label="Search input"
|
|
995
1300
|
/>
|
|
@@ -999,13 +1304,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
999
1304
|
</div>
|
|
1000
1305
|
</div>
|
|
1001
1306
|
</div>
|
|
1307
|
+
|
|
1002
1308
|
<div class="pf-v6-c-toolbar__group pf-m-filter-group">
|
|
1003
1309
|
<div class="pf-v6-c-toolbar__item">
|
|
1004
1310
|
<button
|
|
1005
1311
|
class="pf-v6-c-menu-toggle"
|
|
1006
1312
|
type="button"
|
|
1007
1313
|
aria-expanded="false"
|
|
1008
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-status"
|
|
1314
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-status-expandable"
|
|
1009
1315
|
>
|
|
1010
1316
|
<span class="pf-v6-c-menu-toggle__text">Status</span>
|
|
1011
1317
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
@@ -1020,7 +1326,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1020
1326
|
class="pf-v6-c-menu-toggle"
|
|
1021
1327
|
type="button"
|
|
1022
1328
|
aria-expanded="false"
|
|
1023
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-risk"
|
|
1329
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-risk-expandable"
|
|
1024
1330
|
>
|
|
1025
1331
|
<span class="pf-v6-c-menu-toggle__text">Risk</span>
|
|
1026
1332
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
@@ -1031,8 +1337,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1031
1337
|
</button>
|
|
1032
1338
|
</div>
|
|
1033
1339
|
</div>
|
|
1034
|
-
|
|
1035
|
-
|
|
1340
|
+
|
|
1341
|
+
<div class="pf-v6-c-toolbar__group pf-m-label-group">
|
|
1342
|
+
<div class="pf-v6-c-toolbar__group pf-m-grow pf-m-label-group">
|
|
1036
1343
|
<div class="pf-v6-c-toolbar__item">
|
|
1037
1344
|
<div class="pf-v6-c-label-group pf-m-category">
|
|
1038
1345
|
<div class="pf-v6-c-label-group__main">
|
|
@@ -1218,11 +1525,20 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1218
1525
|
</div>
|
|
1219
1526
|
</div>
|
|
1220
1527
|
</div>
|
|
1528
|
+
</div>
|
|
1529
|
+
|
|
1530
|
+
<div class="pf-v6-c-toolbar__group pf-m-action-group-inline">
|
|
1531
|
+
<div class="pf-v6-c-toolbar__item">6 filters applied</div>
|
|
1221
1532
|
<div class="pf-v6-c-toolbar__item">
|
|
1222
1533
|
<button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
|
|
1223
1534
|
<span class="pf-v6-c-button__text">Clear all filters</span>
|
|
1224
1535
|
</button>
|
|
1225
1536
|
</div>
|
|
1537
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1538
|
+
<button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
|
|
1539
|
+
<span class="pf-v6-c-button__text">Save all filters</span>
|
|
1540
|
+
</button>
|
|
1541
|
+
</div>
|
|
1226
1542
|
</div>
|
|
1227
1543
|
</div>
|
|
1228
1544
|
</div>
|
|
@@ -1269,63 +1585,44 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1269
1585
|
</button>
|
|
1270
1586
|
</div>
|
|
1271
1587
|
</div>
|
|
1272
|
-
|
|
1273
|
-
|
|
1588
|
+
|
|
1589
|
+
<div class="pf-v6-c-toolbar__group pf-m-filter-group">
|
|
1590
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1274
1591
|
<button
|
|
1275
|
-
class="pf-v6-c-menu-toggle
|
|
1592
|
+
class="pf-v6-c-menu-toggle"
|
|
1276
1593
|
type="button"
|
|
1277
1594
|
aria-expanded="false"
|
|
1278
|
-
|
|
1279
|
-
aria-controls="toolbar-selected-filters-example-expandable-content"
|
|
1595
|
+
id="toolbar-selected-filters-example-menu-toggle-checkbox-status"
|
|
1280
1596
|
>
|
|
1281
|
-
<span class="pf-v6-c-menu-
|
|
1282
|
-
|
|
1597
|
+
<span class="pf-v6-c-menu-toggle__text">Status</span>
|
|
1598
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1599
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1600
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1601
|
+
</span>
|
|
1283
1602
|
</span>
|
|
1284
1603
|
</button>
|
|
1285
1604
|
</div>
|
|
1286
|
-
<div class="pf-v6-c-
|
|
1287
|
-
<
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
>
|
|
1294
|
-
|
|
1295
|
-
<span class="pf-v6-c-menu-
|
|
1296
|
-
<
|
|
1297
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1298
|
-
</span>
|
|
1299
|
-
</span>
|
|
1300
|
-
</button>
|
|
1301
|
-
</div>
|
|
1302
|
-
<div class="pf-v6-c-toolbar__item">
|
|
1303
|
-
<button
|
|
1304
|
-
class="pf-v6-c-menu-toggle"
|
|
1305
|
-
type="button"
|
|
1306
|
-
aria-expanded="false"
|
|
1307
|
-
id="toolbar-selected-filters-example-menu-toggle-checkbox-risk"
|
|
1308
|
-
>
|
|
1309
|
-
<span class="pf-v6-c-menu-toggle__text">Risk</span>
|
|
1310
|
-
<span class="pf-v6-c-menu-toggle__controls">
|
|
1311
|
-
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1312
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1313
|
-
</span>
|
|
1605
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1606
|
+
<button
|
|
1607
|
+
class="pf-v6-c-menu-toggle"
|
|
1608
|
+
type="button"
|
|
1609
|
+
aria-expanded="false"
|
|
1610
|
+
id="toolbar-selected-filters-example-menu-toggle-checkbox-risk"
|
|
1611
|
+
>
|
|
1612
|
+
<span class="pf-v6-c-menu-toggle__text">Risk</span>
|
|
1613
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1614
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1615
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1314
1616
|
</span>
|
|
1315
|
-
</
|
|
1316
|
-
</
|
|
1617
|
+
</span>
|
|
1618
|
+
</button>
|
|
1317
1619
|
</div>
|
|
1318
1620
|
</div>
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
class="pf-v6-c-overflow-menu"
|
|
1322
|
-
id="toolbar-selected-filters-exampleicon-button-overflow-menu"
|
|
1323
|
-
></div>
|
|
1324
|
-
</div>
|
|
1325
|
-
<div class="pf-v6-c-toolbar__item pf-m-overflow-menu">
|
|
1621
|
+
|
|
1622
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1326
1623
|
<div
|
|
1327
1624
|
class="pf-v6-c-overflow-menu"
|
|
1328
|
-
id="toolbar-selected-filters-example
|
|
1625
|
+
id="toolbar-selected-filters-example--overflow-menu"
|
|
1329
1626
|
>
|
|
1330
1627
|
<div class="pf-v6-c-overflow-menu__content">
|
|
1331
1628
|
<div class="pf-v6-c-overflow-menu__group pf-m-button-group">
|
|
@@ -1341,14 +1638,13 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1341
1638
|
</div>
|
|
1342
1639
|
</div>
|
|
1343
1640
|
</div>
|
|
1344
|
-
|
|
1345
1641
|
<div class="pf-v6-c-overflow-menu__control">
|
|
1346
1642
|
<button
|
|
1347
1643
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1348
1644
|
type="button"
|
|
1349
1645
|
aria-expanded="false"
|
|
1350
1646
|
aria-label="Menu toggle"
|
|
1351
|
-
id="toolbar-selected-filters-example-overflow-
|
|
1647
|
+
id="toolbar-selected-filters-example-overflow-toggle"
|
|
1352
1648
|
>
|
|
1353
1649
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
1354
1650
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
@@ -1359,9 +1655,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1359
1655
|
</div>
|
|
1360
1656
|
</div>
|
|
1361
1657
|
</div>
|
|
1362
|
-
<div class="pf-v6-c-toolbar__content
|
|
1363
|
-
<div class="pf-v6-c-toolbar__group">
|
|
1364
|
-
<div class="pf-v6-c-toolbar__group">
|
|
1658
|
+
<div class="pf-v6-c-toolbar__content">
|
|
1659
|
+
<div class="pf-v6-c-toolbar__group pf-m-label-group">
|
|
1660
|
+
<div class="pf-v6-c-toolbar__group pf-m-grow pf-m-label-group">
|
|
1365
1661
|
<div class="pf-v6-c-toolbar__item">
|
|
1366
1662
|
<div class="pf-v6-c-label-group pf-m-category">
|
|
1367
1663
|
<div class="pf-v6-c-label-group__main">
|
|
@@ -1547,11 +1843,20 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1547
1843
|
</div>
|
|
1548
1844
|
</div>
|
|
1549
1845
|
</div>
|
|
1846
|
+
</div>
|
|
1847
|
+
|
|
1848
|
+
<div class="pf-v6-c-toolbar__group pf-m-action-group-inline">
|
|
1849
|
+
<div class="pf-v6-c-toolbar__item">6 filters applied</div>
|
|
1550
1850
|
<div class="pf-v6-c-toolbar__item">
|
|
1551
1851
|
<button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
|
|
1552
1852
|
<span class="pf-v6-c-button__text">Clear all filters</span>
|
|
1553
1853
|
</button>
|
|
1554
1854
|
</div>
|
|
1855
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1856
|
+
<button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
|
|
1857
|
+
<span class="pf-v6-c-button__text">Save all filters</span>
|
|
1858
|
+
</button>
|
|
1859
|
+
</div>
|
|
1555
1860
|
</div>
|
|
1556
1861
|
</div>
|
|
1557
1862
|
</div>
|
|
@@ -1566,98 +1871,10 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1566
1871
|
<div class="pf-v6-c-toolbar" id="toolbar-stacked-example">
|
|
1567
1872
|
<div class="pf-v6-c-toolbar__content">
|
|
1568
1873
|
<div class="pf-v6-c-toolbar__content-section">
|
|
1569
|
-
<div class="pf-v6-c-
|
|
1570
|
-
<div class="pf-v6-c-toolbar__toggle pf-m-show">
|
|
1571
|
-
<button
|
|
1572
|
-
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1573
|
-
type="button"
|
|
1574
|
-
aria-expanded="false"
|
|
1575
|
-
aria-label="Show filters"
|
|
1576
|
-
aria-controls="toolbar-stacked-example-expandable-content"
|
|
1577
|
-
>
|
|
1578
|
-
<span class="pf-v6-c-menu-toggle__icon">
|
|
1579
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
1580
|
-
</span>
|
|
1581
|
-
</button>
|
|
1582
|
-
</div>
|
|
1583
|
-
<div class="pf-v6-c-toolbar__group">
|
|
1584
|
-
<div
|
|
1585
|
-
class="pf-v6-c-toolbar__item pf-m-label"
|
|
1586
|
-
id="toolbar-stacked-example-menu-toggle-resource-label"
|
|
1587
|
-
aria-hidden="true"
|
|
1588
|
-
>Resource</div>
|
|
1589
|
-
|
|
1590
|
-
<div class="pf-v6-c-toolbar__item">
|
|
1591
|
-
<button
|
|
1592
|
-
class="pf-v6-c-menu-toggle"
|
|
1593
|
-
type="button"
|
|
1594
|
-
aria-expanded="false"
|
|
1595
|
-
id="toolbar-stacked-example-menu-toggle-resource"
|
|
1596
|
-
>
|
|
1597
|
-
<span class="pf-v6-c-menu-toggle__text">Pod</span>
|
|
1598
|
-
<span class="pf-v6-c-menu-toggle__controls">
|
|
1599
|
-
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1600
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1601
|
-
</span>
|
|
1602
|
-
</span>
|
|
1603
|
-
</button>
|
|
1604
|
-
</div>
|
|
1605
|
-
</div>
|
|
1606
|
-
<div class="pf-v6-c-toolbar__group">
|
|
1607
|
-
<div
|
|
1608
|
-
class="pf-v6-c-toolbar__item pf-m-label"
|
|
1609
|
-
id="toolbar-stacked-example-menu-toggle-status-label"
|
|
1610
|
-
aria-hidden="true"
|
|
1611
|
-
>Status</div>
|
|
1612
|
-
<div class="pf-v6-c-toolbar__item">
|
|
1613
|
-
<button
|
|
1614
|
-
class="pf-v6-c-menu-toggle"
|
|
1615
|
-
type="button"
|
|
1616
|
-
aria-expanded="false"
|
|
1617
|
-
id="toolbar-stacked-example-menu-toggle-status"
|
|
1618
|
-
>
|
|
1619
|
-
<span class="pf-v6-c-menu-toggle__text">Running</span>
|
|
1620
|
-
<span class="pf-v6-c-menu-toggle__controls">
|
|
1621
|
-
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1622
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1623
|
-
</span>
|
|
1624
|
-
</span>
|
|
1625
|
-
</button>
|
|
1626
|
-
</div>
|
|
1627
|
-
</div>
|
|
1628
|
-
<div class="pf-v6-c-toolbar__group">
|
|
1629
|
-
<div
|
|
1630
|
-
class="pf-v6-c-toolbar__item pf-m-label"
|
|
1631
|
-
id="toolbar-stacked-example-menu-toggle-type-label"
|
|
1632
|
-
aria-hidden="true"
|
|
1633
|
-
>Type</div>
|
|
1634
|
-
<div class="pf-v6-c-toolbar__item">
|
|
1635
|
-
<button
|
|
1636
|
-
class="pf-v6-c-menu-toggle"
|
|
1637
|
-
type="button"
|
|
1638
|
-
aria-expanded="false"
|
|
1639
|
-
id="toolbar-stacked-example-menu-toggle-type"
|
|
1640
|
-
>
|
|
1641
|
-
<span class="pf-v6-c-menu-toggle__text">Any</span>
|
|
1642
|
-
<span class="pf-v6-c-menu-toggle__controls">
|
|
1643
|
-
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1644
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1645
|
-
</span>
|
|
1646
|
-
</span>
|
|
1647
|
-
</button>
|
|
1648
|
-
</div>
|
|
1649
|
-
</div>
|
|
1650
|
-
</div>
|
|
1651
|
-
<div class="pf-v6-c-toolbar__item pf-m-overflow-menu">
|
|
1652
|
-
<div
|
|
1653
|
-
class="pf-v6-c-overflow-menu"
|
|
1654
|
-
id="toolbar-stacked-exampleicon-button-overflow-menu"
|
|
1655
|
-
></div>
|
|
1656
|
-
</div>
|
|
1657
|
-
<div class="pf-v6-c-toolbar__item pf-m-overflow-menu">
|
|
1874
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1658
1875
|
<div
|
|
1659
1876
|
class="pf-v6-c-overflow-menu"
|
|
1660
|
-
id="toolbar-stacked-example
|
|
1877
|
+
id="toolbar-stacked-example--overflow-menu"
|
|
1661
1878
|
>
|
|
1662
1879
|
<div class="pf-v6-c-overflow-menu__content">
|
|
1663
1880
|
<div class="pf-v6-c-overflow-menu__group pf-m-button-group">
|
|
@@ -1673,14 +1890,13 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1673
1890
|
</div>
|
|
1674
1891
|
</div>
|
|
1675
1892
|
</div>
|
|
1676
|
-
|
|
1677
1893
|
<div class="pf-v6-c-overflow-menu__control">
|
|
1678
1894
|
<button
|
|
1679
1895
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1680
1896
|
type="button"
|
|
1681
1897
|
aria-expanded="false"
|
|
1682
1898
|
aria-label="Menu toggle"
|
|
1683
|
-
id="toolbar-stacked-example-overflow-
|
|
1899
|
+
id="toolbar-stacked-example-overflow-toggle"
|
|
1684
1900
|
>
|
|
1685
1901
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
1686
1902
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
@@ -1690,11 +1906,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1690
1906
|
</div>
|
|
1691
1907
|
</div>
|
|
1692
1908
|
</div>
|
|
1693
|
-
<div
|
|
1694
|
-
class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
|
|
1695
|
-
id="toolbar-stacked-example-expandable-content"
|
|
1696
|
-
hidden
|
|
1697
|
-
></div>
|
|
1698
1909
|
</div>
|
|
1699
1910
|
<hr class="pf-v6-c-divider" />
|
|
1700
1911
|
|
|
@@ -1817,120 +2028,309 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1817
2028
|
<span class="pf-v6-c-button__icon">
|
|
1818
2029
|
<i class="fas fa-angle-double-right" aria-hidden="true"></i>
|
|
1819
2030
|
</span>
|
|
1820
|
-
</button>
|
|
1821
|
-
</div>
|
|
1822
|
-
</nav>
|
|
2031
|
+
</button>
|
|
2032
|
+
</div>
|
|
2033
|
+
</nav>
|
|
2034
|
+
</div>
|
|
2035
|
+
</div>
|
|
2036
|
+
</div>
|
|
2037
|
+
</div>
|
|
2038
|
+
</div>
|
|
2039
|
+
|
|
2040
|
+
```
|
|
2041
|
+
|
|
2042
|
+
### Stacked on mobile (filters collapsed, expandable content expanded)
|
|
2043
|
+
|
|
2044
|
+
```html
|
|
2045
|
+
<div class="pf-v6-c-toolbar" id="toolbar-stacked-collapsed-example">
|
|
2046
|
+
<div class="pf-v6-c-toolbar__content">
|
|
2047
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
2048
|
+
<div class="pf-v6-c-toolbar__group pf-m-toggle-group">
|
|
2049
|
+
<div class="pf-v6-c-toolbar__toggle">
|
|
2050
|
+
<button
|
|
2051
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
|
|
2052
|
+
type="button"
|
|
2053
|
+
aria-expanded="true"
|
|
2054
|
+
aria-label="Show filters"
|
|
2055
|
+
aria-controls="toolbar-stacked-collapsed-example-expandable-content"
|
|
2056
|
+
>
|
|
2057
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
2058
|
+
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
2059
|
+
</span>
|
|
2060
|
+
</button>
|
|
2061
|
+
</div>
|
|
2062
|
+
<div class="pf-v6-c-toolbar__item">
|
|
2063
|
+
<div
|
|
2064
|
+
class="pf-v6-c-input-group"
|
|
2065
|
+
aria-label="search filter"
|
|
2066
|
+
role="group"
|
|
2067
|
+
>
|
|
2068
|
+
<div class="pf-v6-c-input-group__item">
|
|
2069
|
+
<button
|
|
2070
|
+
class="pf-v6-c-menu-toggle"
|
|
2071
|
+
type="button"
|
|
2072
|
+
aria-expanded="false"
|
|
2073
|
+
id="toolbar-stacked-collapsed-example-search-filter-menu"
|
|
2074
|
+
>
|
|
2075
|
+
<span class="pf-v6-c-menu-toggle__text">Name</span>
|
|
2076
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
2077
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
2078
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2079
|
+
</span>
|
|
2080
|
+
</span>
|
|
2081
|
+
</button>
|
|
2082
|
+
</div>
|
|
2083
|
+
<div class="pf-v6-c-input-group__item pf-m-fill">
|
|
2084
|
+
<div class="pf-v6-c-text-input-group">
|
|
2085
|
+
<div class="pf-v6-c-text-input-group__main pf-m-icon">
|
|
2086
|
+
<span class="pf-v6-c-text-input-group__text">
|
|
2087
|
+
<span class="pf-v6-c-text-input-group__icon">
|
|
2088
|
+
<i class="fas fa-fw fa-search"></i>
|
|
2089
|
+
</span>
|
|
2090
|
+
<input
|
|
2091
|
+
class="pf-v6-c-text-input-group__text-input"
|
|
2092
|
+
type="text"
|
|
2093
|
+
placeholder="Find by name"
|
|
2094
|
+
value
|
|
2095
|
+
aria-label="Search input"
|
|
2096
|
+
/>
|
|
2097
|
+
</span>
|
|
2098
|
+
</div>
|
|
2099
|
+
</div>
|
|
2100
|
+
</div>
|
|
2101
|
+
</div>
|
|
2102
|
+
</div>
|
|
2103
|
+
|
|
2104
|
+
<div class="pf-v6-c-toolbar__group pf-m-filter-group pf-m-toggle-group">
|
|
2105
|
+
<div class="pf-v6-c-toolbar__item">
|
|
2106
|
+
<button
|
|
2107
|
+
class="pf-v6-c-menu-toggle"
|
|
2108
|
+
type="button"
|
|
2109
|
+
aria-expanded="false"
|
|
2110
|
+
id="toolbar-stacked-collapsed-example-menu-toggle-checkbox-status"
|
|
2111
|
+
>
|
|
2112
|
+
<span class="pf-v6-c-menu-toggle__text">Status</span>
|
|
2113
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
2114
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
2115
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2116
|
+
</span>
|
|
2117
|
+
</span>
|
|
2118
|
+
</button>
|
|
2119
|
+
</div>
|
|
2120
|
+
<div class="pf-v6-c-toolbar__item">
|
|
2121
|
+
<button
|
|
2122
|
+
class="pf-v6-c-menu-toggle"
|
|
2123
|
+
type="button"
|
|
2124
|
+
aria-expanded="false"
|
|
2125
|
+
id="toolbar-stacked-collapsed-example-menu-toggle-checkbox-risk"
|
|
2126
|
+
>
|
|
2127
|
+
<span class="pf-v6-c-menu-toggle__text">Risk</span>
|
|
2128
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
2129
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
2130
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2131
|
+
</span>
|
|
2132
|
+
</span>
|
|
2133
|
+
</button>
|
|
2134
|
+
</div>
|
|
1823
2135
|
</div>
|
|
1824
2136
|
</div>
|
|
1825
2137
|
</div>
|
|
1826
|
-
</div>
|
|
1827
|
-
</div>
|
|
1828
|
-
|
|
1829
|
-
```
|
|
1830
2138
|
|
|
1831
|
-
### Stacked on mobile (filters collapsed, expandable content expanded)
|
|
1832
|
-
|
|
1833
|
-
```html
|
|
1834
|
-
<div class="pf-v6-c-toolbar" id="toolbar-stacked-collapsed-example">
|
|
1835
|
-
<div class="pf-v6-c-toolbar__content">
|
|
1836
|
-
<div class="pf-v6-c-toolbar__content-section">
|
|
1837
|
-
<div class="pf-v6-c-toolbar__group pf-m-toggle-group">
|
|
1838
|
-
<div class="pf-v6-c-toolbar__toggle pf-m-show">
|
|
1839
|
-
<button
|
|
1840
|
-
class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
|
|
1841
|
-
type="button"
|
|
1842
|
-
aria-expanded="true"
|
|
1843
|
-
aria-label="Show filters"
|
|
1844
|
-
aria-controls="toolbar-stacked-collapsed-example-expandable-content"
|
|
1845
|
-
>
|
|
1846
|
-
<span class="pf-v6-c-menu-toggle__icon">
|
|
1847
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
1848
|
-
</span>
|
|
1849
|
-
</button>
|
|
1850
|
-
</div>
|
|
1851
|
-
</div>
|
|
1852
|
-
<div class="pf-v6-c-toolbar__item pf-m-overflow-menu">
|
|
1853
|
-
<div
|
|
1854
|
-
class="pf-v6-c-overflow-menu"
|
|
1855
|
-
id="toolbar-stacked-collapsed-exampleicon-button-overflow-menu"
|
|
1856
|
-
></div>
|
|
1857
|
-
</div>
|
|
1858
|
-
</div>
|
|
1859
2139
|
<div
|
|
1860
2140
|
class="pf-v6-c-toolbar__expandable-content pf-m-expanded"
|
|
1861
2141
|
id="toolbar-stacked-collapsed-example-expandable-content"
|
|
1862
2142
|
>
|
|
1863
|
-
<div class="pf-v6-c-toolbar__group">
|
|
1864
|
-
<div
|
|
1865
|
-
class="pf-v6-c-toolbar__item
|
|
1866
|
-
|
|
1867
|
-
|
|
1868
|
-
|
|
1869
|
-
|
|
1870
|
-
|
|
1871
|
-
|
|
1872
|
-
|
|
1873
|
-
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
|
|
1881
|
-
|
|
1882
|
-
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
|
|
1886
|
-
|
|
1887
|
-
|
|
1888
|
-
|
|
1889
|
-
|
|
1890
|
-
|
|
1891
|
-
|
|
1892
|
-
|
|
1893
|
-
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
|
|
1905
|
-
|
|
1906
|
-
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
|
|
1916
|
-
|
|
1917
|
-
|
|
1918
|
-
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
|
|
2143
|
+
<div class="pf-v6-c-toolbar__group pf-m-label-group">
|
|
2144
|
+
<div class="pf-v6-c-toolbar__group pf-m-grow pf-m-label-group">
|
|
2145
|
+
<div class="pf-v6-c-toolbar__item">
|
|
2146
|
+
<div class="pf-v6-c-label-group pf-m-category">
|
|
2147
|
+
<div class="pf-v6-c-label-group__main">
|
|
2148
|
+
<span
|
|
2149
|
+
class="pf-v6-c-label-group__label"
|
|
2150
|
+
aria-hidden="true"
|
|
2151
|
+
id="toolbar-stacked-collapsed-example-label-group-status-label-group-label"
|
|
2152
|
+
>Status</span>
|
|
2153
|
+
<ul
|
|
2154
|
+
class="pf-v6-c-label-group__list"
|
|
2155
|
+
role="list"
|
|
2156
|
+
aria-labelledby="toolbar-stacked-collapsed-example-label-group-status-label-group-label"
|
|
2157
|
+
>
|
|
2158
|
+
<li class="pf-v6-c-label-group__list-item">
|
|
2159
|
+
<span class="pf-v6-c-label pf-m-outline">
|
|
2160
|
+
<span class="pf-v6-c-label__content">
|
|
2161
|
+
<span class="pf-v6-c-label__content">
|
|
2162
|
+
<span
|
|
2163
|
+
class="pf-v6-c-label__text"
|
|
2164
|
+
id="toolbar-stacked-collapsed-example-label-group-statuslabel-one"
|
|
2165
|
+
>Label one</span>
|
|
2166
|
+
</span>
|
|
2167
|
+
<span class="pf-v6-c-label__actions">
|
|
2168
|
+
<button
|
|
2169
|
+
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
2170
|
+
type="button"
|
|
2171
|
+
aria-labelledby="toolbar-stacked-collapsed-example-label-group-statusremove-label-one toolbar-stacked-collapsed-example-label-group-statuslabel-one"
|
|
2172
|
+
aria-label="Remove"
|
|
2173
|
+
id="toolbar-stacked-collapsed-example-label-group-statusremove-label-one"
|
|
2174
|
+
>
|
|
2175
|
+
<span class="pf-v6-c-button__icon">
|
|
2176
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2177
|
+
</span>
|
|
2178
|
+
</button>
|
|
2179
|
+
</span>
|
|
2180
|
+
</span>
|
|
2181
|
+
</span>
|
|
2182
|
+
</li>
|
|
2183
|
+
<li class="pf-v6-c-label-group__list-item">
|
|
2184
|
+
<span class="pf-v6-c-label pf-m-outline">
|
|
2185
|
+
<span class="pf-v6-c-label__content">
|
|
2186
|
+
<span class="pf-v6-c-label__content">
|
|
2187
|
+
<span
|
|
2188
|
+
class="pf-v6-c-label__text"
|
|
2189
|
+
id="toolbar-stacked-collapsed-example-label-group-statuslabel-two"
|
|
2190
|
+
>Label two</span>
|
|
2191
|
+
</span>
|
|
2192
|
+
<span class="pf-v6-c-label__actions">
|
|
2193
|
+
<button
|
|
2194
|
+
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
2195
|
+
type="button"
|
|
2196
|
+
aria-labelledby="toolbar-stacked-collapsed-example-label-group-statusremove-label-two toolbar-stacked-collapsed-example-label-group-statuslabel-two"
|
|
2197
|
+
aria-label="Remove"
|
|
2198
|
+
id="toolbar-stacked-collapsed-example-label-group-statusremove-label-two"
|
|
2199
|
+
>
|
|
2200
|
+
<span class="pf-v6-c-button__icon">
|
|
2201
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2202
|
+
</span>
|
|
2203
|
+
</button>
|
|
2204
|
+
</span>
|
|
2205
|
+
</span>
|
|
2206
|
+
</span>
|
|
2207
|
+
</li>
|
|
2208
|
+
<li class="pf-v6-c-label-group__list-item">
|
|
2209
|
+
<span class="pf-v6-c-label pf-m-outline">
|
|
2210
|
+
<span class="pf-v6-c-label__content">
|
|
2211
|
+
<span class="pf-v6-c-label__content">
|
|
2212
|
+
<span
|
|
2213
|
+
class="pf-v6-c-label__text"
|
|
2214
|
+
id="toolbar-stacked-collapsed-example-label-group-statuslabel-three"
|
|
2215
|
+
>Label three</span>
|
|
2216
|
+
</span>
|
|
2217
|
+
<span class="pf-v6-c-label__actions">
|
|
2218
|
+
<button
|
|
2219
|
+
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
2220
|
+
type="button"
|
|
2221
|
+
aria-labelledby="toolbar-stacked-collapsed-example-label-group-statusremove-label-three toolbar-stacked-collapsed-example-label-group-statuslabel-three"
|
|
2222
|
+
aria-label="Remove"
|
|
2223
|
+
id="toolbar-stacked-collapsed-example-label-group-statusremove-label-three"
|
|
2224
|
+
>
|
|
2225
|
+
<span class="pf-v6-c-button__icon">
|
|
2226
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2227
|
+
</span>
|
|
2228
|
+
</button>
|
|
2229
|
+
</span>
|
|
2230
|
+
</span>
|
|
2231
|
+
</span>
|
|
2232
|
+
</li>
|
|
2233
|
+
</ul>
|
|
2234
|
+
</div>
|
|
2235
|
+
</div>
|
|
2236
|
+
</div>
|
|
2237
|
+
<div class="pf-v6-c-toolbar__item">
|
|
2238
|
+
<div class="pf-v6-c-label-group pf-m-category">
|
|
2239
|
+
<div class="pf-v6-c-label-group__main">
|
|
2240
|
+
<span
|
|
2241
|
+
class="pf-v6-c-label-group__label"
|
|
2242
|
+
aria-hidden="true"
|
|
2243
|
+
id="toolbar-stacked-collapsed-example-label-group-risk-label-group-label"
|
|
2244
|
+
>Risk</span>
|
|
2245
|
+
<ul
|
|
2246
|
+
class="pf-v6-c-label-group__list"
|
|
2247
|
+
role="list"
|
|
2248
|
+
aria-labelledby="toolbar-stacked-collapsed-example-label-group-risk-label-group-label"
|
|
2249
|
+
>
|
|
2250
|
+
<li class="pf-v6-c-label-group__list-item">
|
|
2251
|
+
<span class="pf-v6-c-label pf-m-outline">
|
|
2252
|
+
<span class="pf-v6-c-label__content">
|
|
2253
|
+
<span class="pf-v6-c-label__content">
|
|
2254
|
+
<span
|
|
2255
|
+
class="pf-v6-c-label__text"
|
|
2256
|
+
id="toolbar-stacked-collapsed-example-label-group-risklabel-one"
|
|
2257
|
+
>Label one</span>
|
|
2258
|
+
</span>
|
|
2259
|
+
<span class="pf-v6-c-label__actions">
|
|
2260
|
+
<button
|
|
2261
|
+
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
2262
|
+
type="button"
|
|
2263
|
+
aria-labelledby="toolbar-stacked-collapsed-example-label-group-riskremove-label-one toolbar-stacked-collapsed-example-label-group-risklabel-one"
|
|
2264
|
+
aria-label="Remove"
|
|
2265
|
+
id="toolbar-stacked-collapsed-example-label-group-riskremove-label-one"
|
|
2266
|
+
>
|
|
2267
|
+
<span class="pf-v6-c-button__icon">
|
|
2268
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2269
|
+
</span>
|
|
2270
|
+
</button>
|
|
2271
|
+
</span>
|
|
2272
|
+
</span>
|
|
2273
|
+
</span>
|
|
2274
|
+
</li>
|
|
2275
|
+
<li class="pf-v6-c-label-group__list-item">
|
|
2276
|
+
<span class="pf-v6-c-label pf-m-outline">
|
|
2277
|
+
<span class="pf-v6-c-label__content">
|
|
2278
|
+
<span class="pf-v6-c-label__content">
|
|
2279
|
+
<span
|
|
2280
|
+
class="pf-v6-c-label__text"
|
|
2281
|
+
id="toolbar-stacked-collapsed-example-label-group-risklabel-two"
|
|
2282
|
+
>Label two</span>
|
|
2283
|
+
</span>
|
|
2284
|
+
<span class="pf-v6-c-label__actions">
|
|
2285
|
+
<button
|
|
2286
|
+
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
2287
|
+
type="button"
|
|
2288
|
+
aria-labelledby="toolbar-stacked-collapsed-example-label-group-riskremove-label-two toolbar-stacked-collapsed-example-label-group-risklabel-two"
|
|
2289
|
+
aria-label="Remove"
|
|
2290
|
+
id="toolbar-stacked-collapsed-example-label-group-riskremove-label-two"
|
|
2291
|
+
>
|
|
2292
|
+
<span class="pf-v6-c-button__icon">
|
|
2293
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2294
|
+
</span>
|
|
2295
|
+
</button>
|
|
2296
|
+
</span>
|
|
2297
|
+
</span>
|
|
2298
|
+
</span>
|
|
2299
|
+
</li>
|
|
2300
|
+
<li class="pf-v6-c-label-group__list-item">
|
|
2301
|
+
<span class="pf-v6-c-label pf-m-outline">
|
|
2302
|
+
<span class="pf-v6-c-label__content">
|
|
2303
|
+
<span class="pf-v6-c-label__content">
|
|
2304
|
+
<span
|
|
2305
|
+
class="pf-v6-c-label__text"
|
|
2306
|
+
id="toolbar-stacked-collapsed-example-label-group-risklabel-three"
|
|
2307
|
+
>Label three</span>
|
|
2308
|
+
</span>
|
|
2309
|
+
<span class="pf-v6-c-label__actions">
|
|
2310
|
+
<button
|
|
2311
|
+
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
2312
|
+
type="button"
|
|
2313
|
+
aria-labelledby="toolbar-stacked-collapsed-example-label-group-riskremove-label-three toolbar-stacked-collapsed-example-label-group-risklabel-three"
|
|
2314
|
+
aria-label="Remove"
|
|
2315
|
+
id="toolbar-stacked-collapsed-example-label-group-riskremove-label-three"
|
|
2316
|
+
>
|
|
2317
|
+
<span class="pf-v6-c-button__icon">
|
|
2318
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2319
|
+
</span>
|
|
2320
|
+
</button>
|
|
2321
|
+
</span>
|
|
2322
|
+
</span>
|
|
2323
|
+
</span>
|
|
2324
|
+
</li>
|
|
2325
|
+
</ul>
|
|
2326
|
+
</div>
|
|
2327
|
+
</div>
|
|
2328
|
+
</div>
|
|
1928
2329
|
</div>
|
|
1929
2330
|
</div>
|
|
1930
2331
|
</div>
|
|
1931
2332
|
</div>
|
|
1932
2333
|
<hr class="pf-v6-c-divider" />
|
|
1933
|
-
|
|
1934
2334
|
<div class="pf-v6-c-toolbar__content">
|
|
1935
2335
|
<div class="pf-v6-c-toolbar__content-section">
|
|
1936
2336
|
<div class="pf-v6-c-toolbar__item pf-m-bulk-select">
|
|
@@ -2074,11 +2474,13 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
2074
2474
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
2075
2475
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
2076
2476
|
<hr class="pf-v6-c-divider pf-m-vertical" />
|
|
2477
|
+
|
|
2077
2478
|
<div class="pf-v6-c-toolbar__group">
|
|
2078
2479
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
2079
2480
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
2080
2481
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
2081
2482
|
</div>
|
|
2483
|
+
|
|
2082
2484
|
<hr class="pf-v6-c-divider pf-m-vertical" />
|
|
2083
2485
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
2084
2486
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
@@ -2102,11 +2504,13 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
2102
2504
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
2103
2505
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
2104
2506
|
<hr class="pf-v6-c-divider pf-m-vertical" />
|
|
2507
|
+
|
|
2105
2508
|
<div class="pf-v6-c-toolbar__group">
|
|
2106
2509
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
2107
2510
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
2108
2511
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
2109
2512
|
</div>
|
|
2513
|
+
|
|
2110
2514
|
<hr class="pf-v6-c-divider pf-m-vertical" />
|
|
2111
2515
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
2112
2516
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
@@ -2130,11 +2534,13 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
2130
2534
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
2131
2535
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
2132
2536
|
<hr class="pf-v6-c-divider pf-m-vertical" />
|
|
2537
|
+
|
|
2133
2538
|
<div class="pf-v6-c-toolbar__group">
|
|
2134
2539
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
2135
2540
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
2136
2541
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
2137
2542
|
</div>
|
|
2543
|
+
|
|
2138
2544
|
<hr class="pf-v6-c-divider pf-m-vertical" />
|
|
2139
2545
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
2140
2546
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
@@ -2155,11 +2561,13 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
2155
2561
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
2156
2562
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
2157
2563
|
<hr class="pf-v6-c-divider pf-m-vertical" />
|
|
2564
|
+
|
|
2158
2565
|
<div class="pf-v6-c-toolbar__group">
|
|
2159
2566
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
2160
2567
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
2161
2568
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
2162
2569
|
</div>
|
|
2570
|
+
|
|
2163
2571
|
<hr class="pf-v6-c-divider pf-m-vertical" />
|
|
2164
2572
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
2165
2573
|
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
@@ -2198,6 +2606,7 @@ As the toolbar component is a hybrid layout and component, some of its elements
|
|
|
2198
2606
|
| `.pf-v6-c-toolbar__content` | `<div>` | Initiates a toolbar content container. **Required** |
|
|
2199
2607
|
| `.pf-v6-c-toolbar__content-section` | `<div>` | Initiates a toolbar content section. This is used to separate static elements from dynamic elements within a content container. There should be no more than one `.pf-v6-c-toolbar__content-section` per `.pf-v6-c-toolbar__content` **Required** |
|
|
2200
2608
|
| `.pf-v6-c-toolbar__expandable-content` | `<div>` | Initiates a toolbar expandable content section. |
|
|
2609
|
+
| `.pf-v6-c-toolbar__expand-all-icon` | `<div>` | Initiates a toolbar expand all icon. |
|
|
2201
2610
|
| `.pf-m-sticky` | `.pf-v6-c-toolbar` | Modifies toolbar component to be sticky to the top of its container. |
|
|
2202
2611
|
| `.pf-m-full-height` | `.pf-v6-c-toolbar`, `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group` | Modifies toolbar component to full height of its container and removes vertical padding. |
|
|
2203
2612
|
| `.pf-m-static` | `.pf-v6-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. |
|
|
@@ -2206,15 +2615,19 @@ As the toolbar component is a hybrid layout and component, some of its elements
|
|
|
2206
2615
|
| `.pf-m-no-background` | `.pf-v6-c-toolbar` | Modifies toolbar to have no background color. |
|
|
2207
2616
|
| `.pf-m-expanded` | `.pf-v6-c-toolbar__expandable-content` | Modifies expandable content section for the expanded state. |
|
|
2208
2617
|
| `.pf-m-expanded` | `.pf-v6-c-toolbar__item.pf-m-expand-all` | Modifies an expand all button for the expanded state. |
|
|
2209
|
-
| `.pf-m-
|
|
2618
|
+
| `.pf-m-action-group` | `.pf-v6-c-toolbar__group` | Initiates action group spacing. |
|
|
2619
|
+
| `.pf-m-action-group-inline` | `.pf-v6-c-toolbar__group` | Initiates inline action group spacing. |
|
|
2620
|
+
| `.pf-m-action-group-plain` | `.pf-v6-c-toolbar__group` | Initiates plain action group spacing. |
|
|
2210
2621
|
| `.pf-m-filter-group` | `.pf-v6-c-toolbar__group` | Initiates filter group spacing. |
|
|
2211
|
-
| `.pf-m-label
|
|
2622
|
+
| `.pf-m-label` | `.pf-v6-c-toolbar__item` | Initiates label item presenatation. |
|
|
2623
|
+
| `.pf-m-label-group` | `.pf-v6-c-toolbar__group` | Initiates label group spacing. |
|
|
2212
2624
|
| `.pf-m-overflow-container` | `.pf-v6-c-toolbar__item`, `.pf-v6-c-toolbar__group` | Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation. |
|
|
2213
2625
|
| `.pf-m-expanded` | `.pf-v6-c-toolbar__expandable-content`, `.pf-v6-c-toolbar__toggle` | Modifies the component for the expanded state. |
|
|
2214
2626
|
| `.pf-m-[wrap/nowrap]` | `.pf-v6-c-toolbar__content`, `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies the toolbar element to wrap/not wrap. |
|
|
2215
|
-
| `.pf-m-align-[start/end]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar [main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis) element alignment. |
|
|
2627
|
+
| `.pf-m-align-[start/center/end]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar [main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis) element alignment. |
|
|
2216
2628
|
| `.pf-m-align-items-[stretch/baseline/start/center/end]` | `.pf-v6-c-toolbar__content`, `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) child alignment. |
|
|
2217
2629
|
| `.pf-m-align-self-[stretch/baseline/start/center/end]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) self alignment. |
|
|
2630
|
+
| `.pf-m-inset-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar` | Modifies toolbar horizontal. |
|
|
2218
2631
|
|
|
2219
2632
|
### Accessibility
|
|
2220
2633
|
|