@patternfly/patternfly 6.0.0-alpha.17 → 6.0.0-alpha.19
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/assets/images/logo__pf--reverse-on-md.svg +1 -1
- package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
- package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
- package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
- package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
- package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
- package/assets/images/pf_logo_white.hbs +35 -0
- package/assets/images/pf_logo_white.svg +38 -0
- package/base/_globals.scss +1 -1
- package/base/patternfly-variables.css +1 -1
- package/base/tokens/_tokens-font.scss +2 -2
- package/components/Accordion/accordion.css +10 -1
- package/components/Accordion/accordion.scss +13 -1
- package/components/Alert/alert.css +1 -1
- package/components/Alert/alert.scss +1 -1
- package/components/Button/button.css +1 -1
- package/components/Button/button.scss +1 -3
- package/components/Check/check.css +10 -8
- package/components/Check/check.scss +15 -10
- package/components/Dropdown/dropdown.css +1 -3
- package/components/Dropdown/dropdown.scss +2 -6
- package/components/Login/login.css +70 -97
- package/components/Login/login.scss +56 -64
- package/components/Menu/menu.css +3 -0
- package/components/Menu/menu.scss +7 -3
- package/components/MenuToggle/menu-toggle.css +2 -3
- package/components/MenuToggle/menu-toggle.scss +2 -6
- package/components/Page/page.css +1 -1
- package/components/Page/page.scss +1 -1
- package/components/Radio/radio.css +13 -10
- package/components/Radio/radio.scss +17 -11
- package/components/Switch/switch.css +1 -1
- package/components/Switch/switch.scss +1 -1
- package/components/Table/table.css +6 -2
- package/components/Table/table.scss +7 -2
- package/components/Toolbar/toolbar.css +9 -1
- package/components/Toolbar/toolbar.scss +16 -3
- package/docs/components/Accordion/examples/Accordion.md +95 -0
- package/docs/components/Brand/examples/Brand.css +12 -0
- package/docs/components/Brand/examples/Brand.md +75 -32
- package/docs/components/Card/examples/Card.md +110 -2
- package/docs/components/LogViewer/examples/LogViewer.md +130 -130
- package/docs/components/Login/examples/Login.md +5 -0
- package/docs/components/Menu/examples/Menu.md +507 -473
- package/docs/components/MenuToggle/examples/MenuToggle.md +106 -114
- package/docs/components/Nav/examples/Navigation.md +140 -113
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
- package/docs/components/Toolbar/examples/Toolbar.md +480 -2807
- package/docs/demos/CardView/examples/CardView.md +32 -51
- package/docs/demos/DataList/examples/DataList.md +184 -320
- package/docs/demos/Masthead/examples/Masthead.md +51 -210
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +2 -1
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +83 -271
- package/docs/demos/Table/examples/Table.md +1017 -1800
- package/docs/demos/Tabs/examples/Tabs.md +2 -2
- package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
- package/docs/demos/Toolbar/examples/Toolbar.md +703 -1027
- package/package.json +2 -2
- package/patternfly-base-no-globals-theme-dark-unversioned.css +1 -1
- package/patternfly-base-no-globals.css +1 -1
- package/patternfly-base-theme-dark-unversioned.css +1 -1
- package/patternfly-base.css +1 -1
- package/patternfly-no-globals.css +176 -207
- package/patternfly-theme-dark-unversioned.css +176 -207
- package/patternfly.css +176 -207
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/components/Login/themes/dark/login.scss +0 -12
|
@@ -214,181 +214,49 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
214
214
|
<div class="pf-v5-c-toolbar__content-section">
|
|
215
215
|
<div class="pf-v5-c-toolbar__group pf-m-filter-group">
|
|
216
216
|
<div class="pf-v5-c-toolbar__item">
|
|
217
|
-
<
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
<
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
aria-haspopup="true"
|
|
228
|
-
aria-expanded="false"
|
|
229
|
-
aria-labelledby="toolbar-group-types-example-select-checkbox-filter1-label toolbar-group-types-example-select-checkbox-filter1-toggle"
|
|
230
|
-
>
|
|
231
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
232
|
-
<span class="pf-v5-c-select__toggle-text">Filter 1</span>
|
|
233
|
-
</div>
|
|
234
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
235
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
217
|
+
<button
|
|
218
|
+
class="pf-v5-c-menu-toggle"
|
|
219
|
+
type="button"
|
|
220
|
+
aria-expanded="false"
|
|
221
|
+
id="toolbar-group-types-example-toggle-1"
|
|
222
|
+
>
|
|
223
|
+
<span class="pf-v5-c-menu-toggle__text">Filter 1</span>
|
|
224
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
225
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
226
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
236
227
|
</span>
|
|
237
|
-
</
|
|
238
|
-
|
|
239
|
-
<ul
|
|
240
|
-
class="pf-v5-c-select__menu"
|
|
241
|
-
role="listbox"
|
|
242
|
-
aria-labelledby="toolbar-group-types-example-select-checkbox-filter1-label"
|
|
243
|
-
hidden
|
|
244
|
-
>
|
|
245
|
-
<li role="presentation">
|
|
246
|
-
<button class="pf-v5-c-select__menu-item" role="option">Running</button>
|
|
247
|
-
</li>
|
|
248
|
-
<li role="presentation">
|
|
249
|
-
<button
|
|
250
|
-
class="pf-v5-c-select__menu-item pf-m-selected"
|
|
251
|
-
role="option"
|
|
252
|
-
aria-selected="true"
|
|
253
|
-
>
|
|
254
|
-
Stopped
|
|
255
|
-
<span class="pf-v5-c-select__menu-item-icon">
|
|
256
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
257
|
-
</span>
|
|
258
|
-
</button>
|
|
259
|
-
</li>
|
|
260
|
-
<li role="presentation">
|
|
261
|
-
<button class="pf-v5-c-select__menu-item" role="option">Down</button>
|
|
262
|
-
</li>
|
|
263
|
-
<li role="presentation">
|
|
264
|
-
<button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
|
|
265
|
-
</li>
|
|
266
|
-
<li role="presentation">
|
|
267
|
-
<button
|
|
268
|
-
class="pf-v5-c-select__menu-item"
|
|
269
|
-
role="option"
|
|
270
|
-
>Needs maintenance</button>
|
|
271
|
-
</li>
|
|
272
|
-
</ul>
|
|
273
|
-
</div>
|
|
228
|
+
</span>
|
|
229
|
+
</button>
|
|
274
230
|
</div>
|
|
275
231
|
<div class="pf-v5-c-toolbar__item">
|
|
276
|
-
<
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
<
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
aria-haspopup="true"
|
|
287
|
-
aria-expanded="false"
|
|
288
|
-
aria-labelledby="toolbar-group-types-example-select-checkbox-filter2-label toolbar-group-types-example-select-checkbox-filter2-toggle"
|
|
289
|
-
>
|
|
290
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
291
|
-
<span class="pf-v5-c-select__toggle-text">Filter 2</span>
|
|
292
|
-
</div>
|
|
293
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
294
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
232
|
+
<button
|
|
233
|
+
class="pf-v5-c-menu-toggle"
|
|
234
|
+
type="button"
|
|
235
|
+
aria-expanded="false"
|
|
236
|
+
id="toolbar-group-types-example-toggle-2"
|
|
237
|
+
>
|
|
238
|
+
<span class="pf-v5-c-menu-toggle__text">Filter 2</span>
|
|
239
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
240
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
241
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
295
242
|
</span>
|
|
296
|
-
</
|
|
297
|
-
|
|
298
|
-
<ul
|
|
299
|
-
class="pf-v5-c-select__menu"
|
|
300
|
-
role="listbox"
|
|
301
|
-
aria-labelledby="toolbar-group-types-example-select-checkbox-filter2-label"
|
|
302
|
-
hidden
|
|
303
|
-
>
|
|
304
|
-
<li role="presentation">
|
|
305
|
-
<button class="pf-v5-c-select__menu-item" role="option">Running</button>
|
|
306
|
-
</li>
|
|
307
|
-
<li role="presentation">
|
|
308
|
-
<button
|
|
309
|
-
class="pf-v5-c-select__menu-item pf-m-selected"
|
|
310
|
-
role="option"
|
|
311
|
-
aria-selected="true"
|
|
312
|
-
>
|
|
313
|
-
Stopped
|
|
314
|
-
<span class="pf-v5-c-select__menu-item-icon">
|
|
315
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
316
|
-
</span>
|
|
317
|
-
</button>
|
|
318
|
-
</li>
|
|
319
|
-
<li role="presentation">
|
|
320
|
-
<button class="pf-v5-c-select__menu-item" role="option">Down</button>
|
|
321
|
-
</li>
|
|
322
|
-
<li role="presentation">
|
|
323
|
-
<button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
|
|
324
|
-
</li>
|
|
325
|
-
<li role="presentation">
|
|
326
|
-
<button
|
|
327
|
-
class="pf-v5-c-select__menu-item"
|
|
328
|
-
role="option"
|
|
329
|
-
>Needs maintenance</button>
|
|
330
|
-
</li>
|
|
331
|
-
</ul>
|
|
332
|
-
</div>
|
|
243
|
+
</span>
|
|
244
|
+
</button>
|
|
333
245
|
</div>
|
|
334
246
|
<div class="pf-v5-c-toolbar__item">
|
|
335
|
-
<
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
<
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
aria-haspopup="true"
|
|
346
|
-
aria-expanded="false"
|
|
347
|
-
aria-labelledby="toolbar-group-types-example-select-checkbox-filter3-label toolbar-group-types-example-select-checkbox-filter3-toggle"
|
|
348
|
-
>
|
|
349
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
350
|
-
<span class="pf-v5-c-select__toggle-text">Filter 3</span>
|
|
351
|
-
</div>
|
|
352
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
353
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
247
|
+
<button
|
|
248
|
+
class="pf-v5-c-menu-toggle"
|
|
249
|
+
type="button"
|
|
250
|
+
aria-expanded="false"
|
|
251
|
+
id="toolbar-group-types-example-toggle-3"
|
|
252
|
+
>
|
|
253
|
+
<span class="pf-v5-c-menu-toggle__text">Filter 3</span>
|
|
254
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
255
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
256
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
354
257
|
</span>
|
|
355
|
-
</
|
|
356
|
-
|
|
357
|
-
<ul
|
|
358
|
-
class="pf-v5-c-select__menu"
|
|
359
|
-
role="listbox"
|
|
360
|
-
aria-labelledby="toolbar-group-types-example-select-checkbox-filter3-label"
|
|
361
|
-
hidden
|
|
362
|
-
>
|
|
363
|
-
<li role="presentation">
|
|
364
|
-
<button class="pf-v5-c-select__menu-item" role="option">Running</button>
|
|
365
|
-
</li>
|
|
366
|
-
<li role="presentation">
|
|
367
|
-
<button
|
|
368
|
-
class="pf-v5-c-select__menu-item pf-m-selected"
|
|
369
|
-
role="option"
|
|
370
|
-
aria-selected="true"
|
|
371
|
-
>
|
|
372
|
-
Stopped
|
|
373
|
-
<span class="pf-v5-c-select__menu-item-icon">
|
|
374
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
375
|
-
</span>
|
|
376
|
-
</button>
|
|
377
|
-
</li>
|
|
378
|
-
<li role="presentation">
|
|
379
|
-
<button class="pf-v5-c-select__menu-item" role="option">Down</button>
|
|
380
|
-
</li>
|
|
381
|
-
<li role="presentation">
|
|
382
|
-
<button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
|
|
383
|
-
</li>
|
|
384
|
-
<li role="presentation">
|
|
385
|
-
<button
|
|
386
|
-
class="pf-v5-c-select__menu-item"
|
|
387
|
-
role="option"
|
|
388
|
-
>Needs maintenance</button>
|
|
389
|
-
</li>
|
|
390
|
-
</ul>
|
|
391
|
-
</div>
|
|
258
|
+
</span>
|
|
259
|
+
</button>
|
|
392
260
|
</div>
|
|
393
261
|
</div>
|
|
394
262
|
<div class="pf-v5-c-toolbar__group pf-m-icon-button-group">
|
|
@@ -454,10 +322,10 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
454
322
|
<div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-lg">
|
|
455
323
|
<div class="pf-v5-c-toolbar__toggle">
|
|
456
324
|
<button
|
|
457
|
-
class="pf-v5-c-
|
|
325
|
+
class="pf-v5-c-menu-toggle pf-m-plain"
|
|
458
326
|
type="button"
|
|
459
|
-
aria-label="Show filters"
|
|
460
327
|
aria-expanded="false"
|
|
328
|
+
aria-label="Show filters"
|
|
461
329
|
aria-controls="toolbar-toggle-group-example-expandable-content"
|
|
462
330
|
>
|
|
463
331
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
@@ -470,72 +338,22 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
470
338
|
role="group"
|
|
471
339
|
>
|
|
472
340
|
<div class="pf-v5-c-input-group__item">
|
|
473
|
-
<
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
<
|
|
480
|
-
class="
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
>
|
|
487
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
488
|
-
<span class="pf-v5-c-select__toggle-icon">
|
|
489
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
490
|
-
</span>
|
|
491
|
-
<span class="pf-v5-c-select__toggle-text">Name</span>
|
|
492
|
-
</div>
|
|
493
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
494
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
341
|
+
<button
|
|
342
|
+
class="pf-v5-c-menu-toggle"
|
|
343
|
+
type="button"
|
|
344
|
+
aria-expanded="false"
|
|
345
|
+
id="toolbar-toggle-group-example-search-filter-menu"
|
|
346
|
+
>
|
|
347
|
+
<span class="pf-v5-c-menu-toggle__icon">
|
|
348
|
+
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
349
|
+
</span>
|
|
350
|
+
<span class="pf-v5-c-menu-toggle__text">Name</span>
|
|
351
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
352
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
353
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
495
354
|
</span>
|
|
496
|
-
</
|
|
497
|
-
|
|
498
|
-
<ul
|
|
499
|
-
class="pf-v5-c-select__menu"
|
|
500
|
-
role="listbox"
|
|
501
|
-
aria-labelledby="toolbar-toggle-group-example-select-name-label"
|
|
502
|
-
hidden
|
|
503
|
-
>
|
|
504
|
-
<li role="presentation">
|
|
505
|
-
<button
|
|
506
|
-
class="pf-v5-c-select__menu-item"
|
|
507
|
-
role="option"
|
|
508
|
-
>Running</button>
|
|
509
|
-
</li>
|
|
510
|
-
<li role="presentation">
|
|
511
|
-
<button
|
|
512
|
-
class="pf-v5-c-select__menu-item pf-m-selected"
|
|
513
|
-
role="option"
|
|
514
|
-
aria-selected="true"
|
|
515
|
-
>
|
|
516
|
-
Stopped
|
|
517
|
-
<span class="pf-v5-c-select__menu-item-icon">
|
|
518
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
519
|
-
</span>
|
|
520
|
-
</button>
|
|
521
|
-
</li>
|
|
522
|
-
<li role="presentation">
|
|
523
|
-
<button class="pf-v5-c-select__menu-item" role="option">Down</button>
|
|
524
|
-
</li>
|
|
525
|
-
<li role="presentation">
|
|
526
|
-
<button
|
|
527
|
-
class="pf-v5-c-select__menu-item"
|
|
528
|
-
role="option"
|
|
529
|
-
>Degraded</button>
|
|
530
|
-
</li>
|
|
531
|
-
<li role="presentation">
|
|
532
|
-
<button
|
|
533
|
-
class="pf-v5-c-select__menu-item"
|
|
534
|
-
role="option"
|
|
535
|
-
>Needs maintenance</button>
|
|
536
|
-
</li>
|
|
537
|
-
</ul>
|
|
538
|
-
</div>
|
|
355
|
+
</span>
|
|
356
|
+
</button>
|
|
539
357
|
</div>
|
|
540
358
|
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
541
359
|
<div class="pf-v5-c-text-input-group">
|
|
@@ -559,218 +377,34 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
559
377
|
</div>
|
|
560
378
|
<div class="pf-v5-c-toolbar__group pf-m-filter-group">
|
|
561
379
|
<div class="pf-v5-c-toolbar__item">
|
|
562
|
-
<
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
<
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
aria-haspopup="true"
|
|
573
|
-
aria-expanded="false"
|
|
574
|
-
aria-labelledby="toolbar-toggle-group-example-select-checkbox-status-label toolbar-toggle-group-example-select-checkbox-status-toggle"
|
|
575
|
-
>
|
|
576
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
577
|
-
<span class="pf-v5-c-select__toggle-text">Status</span>
|
|
578
|
-
</div>
|
|
579
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
580
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
380
|
+
<button
|
|
381
|
+
class="pf-v5-c-menu-toggle"
|
|
382
|
+
type="button"
|
|
383
|
+
aria-expanded="false"
|
|
384
|
+
id="toolbar-toggle-group-example-menu-toggle-checkbox-status"
|
|
385
|
+
>
|
|
386
|
+
<span class="pf-v5-c-menu-toggle__text">Status</span>
|
|
387
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
388
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
389
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
581
390
|
</span>
|
|
582
|
-
</
|
|
583
|
-
|
|
584
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
585
|
-
<fieldset
|
|
586
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
587
|
-
aria-label="Select input"
|
|
588
|
-
>
|
|
589
|
-
<label
|
|
590
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
591
|
-
id="toolbar-toggle-group-example-select-checkbox-status-active"
|
|
592
|
-
for="toolbar-toggle-group-example-select-checkbox-status-active-input"
|
|
593
|
-
>
|
|
594
|
-
<input
|
|
595
|
-
class="pf-v5-c-check__input"
|
|
596
|
-
type="checkbox"
|
|
597
|
-
aria-describedby="toolbar-toggle-group-example-select-checkbox-status-active-description"
|
|
598
|
-
id="toolbar-toggle-group-example-select-checkbox-status-active-input"
|
|
599
|
-
name="toolbar-toggle-group-example-select-checkbox-status-active-input"
|
|
600
|
-
/>
|
|
601
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
602
|
-
<span
|
|
603
|
-
class="pf-v5-c-check__description"
|
|
604
|
-
id="toolbar-toggle-group-example-select-checkbox-status-active-description"
|
|
605
|
-
>This is a description</span>
|
|
606
|
-
</label>
|
|
607
|
-
<label
|
|
608
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
609
|
-
id="toolbar-toggle-group-example-select-checkbox-status-canceled"
|
|
610
|
-
for="toolbar-toggle-group-example-select-checkbox-status-canceled-input"
|
|
611
|
-
>
|
|
612
|
-
<input
|
|
613
|
-
class="pf-v5-c-check__input"
|
|
614
|
-
type="checkbox"
|
|
615
|
-
aria-describedby="toolbar-toggle-group-example-select-checkbox-status-canceled-description"
|
|
616
|
-
id="toolbar-toggle-group-example-select-checkbox-status-canceled-input"
|
|
617
|
-
name="toolbar-toggle-group-example-select-checkbox-status-canceled-input"
|
|
618
|
-
/>
|
|
619
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
620
|
-
<span
|
|
621
|
-
class="pf-v5-c-check__description"
|
|
622
|
-
id="toolbar-toggle-group-example-select-checkbox-status-canceled-description"
|
|
623
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
624
|
-
</label>
|
|
625
|
-
<label
|
|
626
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
627
|
-
id="toolbar-toggle-group-example-select-checkbox-status-paused"
|
|
628
|
-
for="toolbar-toggle-group-example-select-checkbox-status-paused-input"
|
|
629
|
-
>
|
|
630
|
-
<input
|
|
631
|
-
class="pf-v5-c-check__input"
|
|
632
|
-
type="checkbox"
|
|
633
|
-
id="toolbar-toggle-group-example-select-checkbox-status-paused-input"
|
|
634
|
-
name="toolbar-toggle-group-example-select-checkbox-status-paused-input"
|
|
635
|
-
/>
|
|
636
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
637
|
-
</label>
|
|
638
|
-
<label
|
|
639
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
640
|
-
id="toolbar-toggle-group-example-select-checkbox-status-warning"
|
|
641
|
-
for="toolbar-toggle-group-example-select-checkbox-status-warning-input"
|
|
642
|
-
>
|
|
643
|
-
<input
|
|
644
|
-
class="pf-v5-c-check__input"
|
|
645
|
-
type="checkbox"
|
|
646
|
-
id="toolbar-toggle-group-example-select-checkbox-status-warning-input"
|
|
647
|
-
name="toolbar-toggle-group-example-select-checkbox-status-warning-input"
|
|
648
|
-
/>
|
|
649
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
650
|
-
</label>
|
|
651
|
-
<label
|
|
652
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
653
|
-
id="toolbar-toggle-group-example-select-checkbox-status-restarted"
|
|
654
|
-
for="toolbar-toggle-group-example-select-checkbox-status-restarted-input"
|
|
655
|
-
>
|
|
656
|
-
<input
|
|
657
|
-
class="pf-v5-c-check__input"
|
|
658
|
-
type="checkbox"
|
|
659
|
-
id="toolbar-toggle-group-example-select-checkbox-status-restarted-input"
|
|
660
|
-
name="toolbar-toggle-group-example-select-checkbox-status-restarted-input"
|
|
661
|
-
/>
|
|
662
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
663
|
-
</label>
|
|
664
|
-
</fieldset>
|
|
665
|
-
</div>
|
|
666
|
-
</div>
|
|
391
|
+
</span>
|
|
392
|
+
</button>
|
|
667
393
|
</div>
|
|
668
394
|
<div class="pf-v5-c-toolbar__item">
|
|
669
|
-
<
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
<
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
aria-haspopup="true"
|
|
680
|
-
aria-expanded="false"
|
|
681
|
-
aria-labelledby="toolbar-toggle-group-example-select-checkbox-risk-label toolbar-toggle-group-example-select-checkbox-risk-toggle"
|
|
682
|
-
>
|
|
683
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
684
|
-
<span class="pf-v5-c-select__toggle-text">Risk</span>
|
|
685
|
-
</div>
|
|
686
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
687
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
395
|
+
<button
|
|
396
|
+
class="pf-v5-c-menu-toggle"
|
|
397
|
+
type="button"
|
|
398
|
+
aria-expanded="false"
|
|
399
|
+
id="toolbar-toggle-group-example-menu-toggle-checkbox-risk"
|
|
400
|
+
>
|
|
401
|
+
<span class="pf-v5-c-menu-toggle__text">Risk</span>
|
|
402
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
403
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
404
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
688
405
|
</span>
|
|
689
|
-
</
|
|
690
|
-
|
|
691
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
692
|
-
<fieldset
|
|
693
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
694
|
-
aria-label="Select input"
|
|
695
|
-
>
|
|
696
|
-
<label
|
|
697
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
698
|
-
id="toolbar-toggle-group-example-select-checkbox-risk-active"
|
|
699
|
-
for="toolbar-toggle-group-example-select-checkbox-risk-active-input"
|
|
700
|
-
>
|
|
701
|
-
<input
|
|
702
|
-
class="pf-v5-c-check__input"
|
|
703
|
-
type="checkbox"
|
|
704
|
-
aria-describedby="toolbar-toggle-group-example-select-checkbox-risk-active-description"
|
|
705
|
-
id="toolbar-toggle-group-example-select-checkbox-risk-active-input"
|
|
706
|
-
name="toolbar-toggle-group-example-select-checkbox-risk-active-input"
|
|
707
|
-
/>
|
|
708
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
709
|
-
<span
|
|
710
|
-
class="pf-v5-c-check__description"
|
|
711
|
-
id="toolbar-toggle-group-example-select-checkbox-risk-active-description"
|
|
712
|
-
>This is a description</span>
|
|
713
|
-
</label>
|
|
714
|
-
<label
|
|
715
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
716
|
-
id="toolbar-toggle-group-example-select-checkbox-risk-canceled"
|
|
717
|
-
for="toolbar-toggle-group-example-select-checkbox-risk-canceled-input"
|
|
718
|
-
>
|
|
719
|
-
<input
|
|
720
|
-
class="pf-v5-c-check__input"
|
|
721
|
-
type="checkbox"
|
|
722
|
-
aria-describedby="toolbar-toggle-group-example-select-checkbox-risk-canceled-description"
|
|
723
|
-
id="toolbar-toggle-group-example-select-checkbox-risk-canceled-input"
|
|
724
|
-
name="toolbar-toggle-group-example-select-checkbox-risk-canceled-input"
|
|
725
|
-
/>
|
|
726
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
727
|
-
<span
|
|
728
|
-
class="pf-v5-c-check__description"
|
|
729
|
-
id="toolbar-toggle-group-example-select-checkbox-risk-canceled-description"
|
|
730
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
731
|
-
</label>
|
|
732
|
-
<label
|
|
733
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
734
|
-
id="toolbar-toggle-group-example-select-checkbox-risk-paused"
|
|
735
|
-
for="toolbar-toggle-group-example-select-checkbox-risk-paused-input"
|
|
736
|
-
>
|
|
737
|
-
<input
|
|
738
|
-
class="pf-v5-c-check__input"
|
|
739
|
-
type="checkbox"
|
|
740
|
-
id="toolbar-toggle-group-example-select-checkbox-risk-paused-input"
|
|
741
|
-
name="toolbar-toggle-group-example-select-checkbox-risk-paused-input"
|
|
742
|
-
/>
|
|
743
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
744
|
-
</label>
|
|
745
|
-
<label
|
|
746
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
747
|
-
id="toolbar-toggle-group-example-select-checkbox-risk-warning"
|
|
748
|
-
for="toolbar-toggle-group-example-select-checkbox-risk-warning-input"
|
|
749
|
-
>
|
|
750
|
-
<input
|
|
751
|
-
class="pf-v5-c-check__input"
|
|
752
|
-
type="checkbox"
|
|
753
|
-
id="toolbar-toggle-group-example-select-checkbox-risk-warning-input"
|
|
754
|
-
name="toolbar-toggle-group-example-select-checkbox-risk-warning-input"
|
|
755
|
-
/>
|
|
756
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
757
|
-
</label>
|
|
758
|
-
<label
|
|
759
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
760
|
-
id="toolbar-toggle-group-example-select-checkbox-risk-restarted"
|
|
761
|
-
for="toolbar-toggle-group-example-select-checkbox-risk-restarted-input"
|
|
762
|
-
>
|
|
763
|
-
<input
|
|
764
|
-
class="pf-v5-c-check__input"
|
|
765
|
-
type="checkbox"
|
|
766
|
-
id="toolbar-toggle-group-example-select-checkbox-risk-restarted-input"
|
|
767
|
-
name="toolbar-toggle-group-example-select-checkbox-risk-restarted-input"
|
|
768
|
-
/>
|
|
769
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
770
|
-
</label>
|
|
771
|
-
</fieldset>
|
|
772
|
-
</div>
|
|
773
|
-
</div>
|
|
406
|
+
</span>
|
|
407
|
+
</button>
|
|
774
408
|
</div>
|
|
775
409
|
</div>
|
|
776
410
|
</div>
|
|
@@ -792,12 +426,12 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
792
426
|
<div class="pf-v5-c-toolbar__content">
|
|
793
427
|
<div class="pf-v5-c-toolbar__content-section">
|
|
794
428
|
<div class="pf-v5-c-toolbar__group pf-m-toggle-group">
|
|
795
|
-
<div class="pf-v5-c-toolbar__toggle
|
|
429
|
+
<div class="pf-v5-c-toolbar__toggle">
|
|
796
430
|
<button
|
|
797
|
-
class="pf-v5-c-
|
|
431
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
|
|
798
432
|
type="button"
|
|
799
|
-
aria-label="Show filters"
|
|
800
433
|
aria-expanded="true"
|
|
434
|
+
aria-label="Show filters"
|
|
801
435
|
aria-controls="toolbar-toggle-group-collapsed-example-expandable-content"
|
|
802
436
|
>
|
|
803
437
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
@@ -816,72 +450,22 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
816
450
|
role="group"
|
|
817
451
|
>
|
|
818
452
|
<div class="pf-v5-c-input-group__item">
|
|
819
|
-
<
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
<
|
|
826
|
-
class="
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
>
|
|
833
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
834
|
-
<span class="pf-v5-c-select__toggle-icon">
|
|
835
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
836
|
-
</span>
|
|
837
|
-
<span class="pf-v5-c-select__toggle-text">Name</span>
|
|
838
|
-
</div>
|
|
839
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
840
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
453
|
+
<button
|
|
454
|
+
class="pf-v5-c-menu-toggle"
|
|
455
|
+
type="button"
|
|
456
|
+
aria-expanded="false"
|
|
457
|
+
id="toolbar-toggle-group-collapsed-example-search-filter-menu"
|
|
458
|
+
>
|
|
459
|
+
<span class="pf-v5-c-menu-toggle__icon">
|
|
460
|
+
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
461
|
+
</span>
|
|
462
|
+
<span class="pf-v5-c-menu-toggle__text">Name</span>
|
|
463
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
464
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
465
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
841
466
|
</span>
|
|
842
|
-
</
|
|
843
|
-
|
|
844
|
-
<ul
|
|
845
|
-
class="pf-v5-c-select__menu"
|
|
846
|
-
role="listbox"
|
|
847
|
-
aria-labelledby="toolbar-toggle-group-collapsed-example-select-name-label"
|
|
848
|
-
hidden
|
|
849
|
-
>
|
|
850
|
-
<li role="presentation">
|
|
851
|
-
<button
|
|
852
|
-
class="pf-v5-c-select__menu-item"
|
|
853
|
-
role="option"
|
|
854
|
-
>Running</button>
|
|
855
|
-
</li>
|
|
856
|
-
<li role="presentation">
|
|
857
|
-
<button
|
|
858
|
-
class="pf-v5-c-select__menu-item pf-m-selected"
|
|
859
|
-
role="option"
|
|
860
|
-
aria-selected="true"
|
|
861
|
-
>
|
|
862
|
-
Stopped
|
|
863
|
-
<span class="pf-v5-c-select__menu-item-icon">
|
|
864
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
865
|
-
</span>
|
|
866
|
-
</button>
|
|
867
|
-
</li>
|
|
868
|
-
<li role="presentation">
|
|
869
|
-
<button class="pf-v5-c-select__menu-item" role="option">Down</button>
|
|
870
|
-
</li>
|
|
871
|
-
<li role="presentation">
|
|
872
|
-
<button
|
|
873
|
-
class="pf-v5-c-select__menu-item"
|
|
874
|
-
role="option"
|
|
875
|
-
>Degraded</button>
|
|
876
|
-
</li>
|
|
877
|
-
<li role="presentation">
|
|
878
|
-
<button
|
|
879
|
-
class="pf-v5-c-select__menu-item"
|
|
880
|
-
role="option"
|
|
881
|
-
>Needs maintenance</button>
|
|
882
|
-
</li>
|
|
883
|
-
</ul>
|
|
884
|
-
</div>
|
|
467
|
+
</span>
|
|
468
|
+
</button>
|
|
885
469
|
</div>
|
|
886
470
|
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
887
471
|
<div class="pf-v5-c-text-input-group">
|
|
@@ -905,218 +489,34 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
905
489
|
</div>
|
|
906
490
|
<div class="pf-v5-c-toolbar__group pf-m-filter-group">
|
|
907
491
|
<div class="pf-v5-c-toolbar__item">
|
|
908
|
-
<
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
<
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
aria-haspopup="true"
|
|
919
|
-
aria-expanded="false"
|
|
920
|
-
aria-labelledby="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-label toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-toggle"
|
|
921
|
-
>
|
|
922
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
923
|
-
<span class="pf-v5-c-select__toggle-text">Status</span>
|
|
924
|
-
</div>
|
|
925
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
926
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
492
|
+
<button
|
|
493
|
+
class="pf-v5-c-menu-toggle"
|
|
494
|
+
type="button"
|
|
495
|
+
aria-expanded="false"
|
|
496
|
+
id="toolbar-toggle-group-collapsed-example-menu-toggle-checkbox-status"
|
|
497
|
+
>
|
|
498
|
+
<span class="pf-v5-c-menu-toggle__text">Status</span>
|
|
499
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
500
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
501
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
927
502
|
</span>
|
|
928
|
-
</
|
|
929
|
-
|
|
930
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
931
|
-
<fieldset
|
|
932
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
933
|
-
aria-label="Select input"
|
|
934
|
-
>
|
|
935
|
-
<label
|
|
936
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
937
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active"
|
|
938
|
-
for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active-input"
|
|
939
|
-
>
|
|
940
|
-
<input
|
|
941
|
-
class="pf-v5-c-check__input"
|
|
942
|
-
type="checkbox"
|
|
943
|
-
aria-describedby="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active-description"
|
|
944
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active-input"
|
|
945
|
-
name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active-input"
|
|
946
|
-
/>
|
|
947
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
948
|
-
<span
|
|
949
|
-
class="pf-v5-c-check__description"
|
|
950
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active-description"
|
|
951
|
-
>This is a description</span>
|
|
952
|
-
</label>
|
|
953
|
-
<label
|
|
954
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
955
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled"
|
|
956
|
-
for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-input"
|
|
957
|
-
>
|
|
958
|
-
<input
|
|
959
|
-
class="pf-v5-c-check__input"
|
|
960
|
-
type="checkbox"
|
|
961
|
-
aria-describedby="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-description"
|
|
962
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-input"
|
|
963
|
-
name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-input"
|
|
964
|
-
/>
|
|
965
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
966
|
-
<span
|
|
967
|
-
class="pf-v5-c-check__description"
|
|
968
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-description"
|
|
969
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
970
|
-
</label>
|
|
971
|
-
<label
|
|
972
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
973
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-paused"
|
|
974
|
-
for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-paused-input"
|
|
975
|
-
>
|
|
976
|
-
<input
|
|
977
|
-
class="pf-v5-c-check__input"
|
|
978
|
-
type="checkbox"
|
|
979
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-paused-input"
|
|
980
|
-
name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-paused-input"
|
|
981
|
-
/>
|
|
982
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
983
|
-
</label>
|
|
984
|
-
<label
|
|
985
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
986
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-warning"
|
|
987
|
-
for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-warning-input"
|
|
988
|
-
>
|
|
989
|
-
<input
|
|
990
|
-
class="pf-v5-c-check__input"
|
|
991
|
-
type="checkbox"
|
|
992
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-warning-input"
|
|
993
|
-
name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-warning-input"
|
|
994
|
-
/>
|
|
995
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
996
|
-
</label>
|
|
997
|
-
<label
|
|
998
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
999
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted"
|
|
1000
|
-
for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted-input"
|
|
1001
|
-
>
|
|
1002
|
-
<input
|
|
1003
|
-
class="pf-v5-c-check__input"
|
|
1004
|
-
type="checkbox"
|
|
1005
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted-input"
|
|
1006
|
-
name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted-input"
|
|
1007
|
-
/>
|
|
1008
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
1009
|
-
</label>
|
|
1010
|
-
</fieldset>
|
|
1011
|
-
</div>
|
|
1012
|
-
</div>
|
|
503
|
+
</span>
|
|
504
|
+
</button>
|
|
1013
505
|
</div>
|
|
1014
506
|
<div class="pf-v5-c-toolbar__item">
|
|
1015
|
-
<
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
<
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
aria-haspopup="true"
|
|
1026
|
-
aria-expanded="false"
|
|
1027
|
-
aria-labelledby="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-label toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-toggle"
|
|
1028
|
-
>
|
|
1029
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
1030
|
-
<span class="pf-v5-c-select__toggle-text">Risk</span>
|
|
1031
|
-
</div>
|
|
1032
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
1033
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
507
|
+
<button
|
|
508
|
+
class="pf-v5-c-menu-toggle"
|
|
509
|
+
type="button"
|
|
510
|
+
aria-expanded="false"
|
|
511
|
+
id="toolbar-toggle-group-collapsed-example-menu-toggle-checkbox-risk"
|
|
512
|
+
>
|
|
513
|
+
<span class="pf-v5-c-menu-toggle__text">Risk</span>
|
|
514
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
515
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
516
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1034
517
|
</span>
|
|
1035
|
-
</
|
|
1036
|
-
|
|
1037
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
1038
|
-
<fieldset
|
|
1039
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
1040
|
-
aria-label="Select input"
|
|
1041
|
-
>
|
|
1042
|
-
<label
|
|
1043
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
1044
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active"
|
|
1045
|
-
for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-input"
|
|
1046
|
-
>
|
|
1047
|
-
<input
|
|
1048
|
-
class="pf-v5-c-check__input"
|
|
1049
|
-
type="checkbox"
|
|
1050
|
-
aria-describedby="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-description"
|
|
1051
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-input"
|
|
1052
|
-
name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-input"
|
|
1053
|
-
/>
|
|
1054
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
1055
|
-
<span
|
|
1056
|
-
class="pf-v5-c-check__description"
|
|
1057
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-description"
|
|
1058
|
-
>This is a description</span>
|
|
1059
|
-
</label>
|
|
1060
|
-
<label
|
|
1061
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
1062
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled"
|
|
1063
|
-
for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-input"
|
|
1064
|
-
>
|
|
1065
|
-
<input
|
|
1066
|
-
class="pf-v5-c-check__input"
|
|
1067
|
-
type="checkbox"
|
|
1068
|
-
aria-describedby="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-description"
|
|
1069
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-input"
|
|
1070
|
-
name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-input"
|
|
1071
|
-
/>
|
|
1072
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
1073
|
-
<span
|
|
1074
|
-
class="pf-v5-c-check__description"
|
|
1075
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-description"
|
|
1076
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
1077
|
-
</label>
|
|
1078
|
-
<label
|
|
1079
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
1080
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused"
|
|
1081
|
-
for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused-input"
|
|
1082
|
-
>
|
|
1083
|
-
<input
|
|
1084
|
-
class="pf-v5-c-check__input"
|
|
1085
|
-
type="checkbox"
|
|
1086
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused-input"
|
|
1087
|
-
name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused-input"
|
|
1088
|
-
/>
|
|
1089
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
1090
|
-
</label>
|
|
1091
|
-
<label
|
|
1092
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
1093
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning"
|
|
1094
|
-
for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning-input"
|
|
1095
|
-
>
|
|
1096
|
-
<input
|
|
1097
|
-
class="pf-v5-c-check__input"
|
|
1098
|
-
type="checkbox"
|
|
1099
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning-input"
|
|
1100
|
-
name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning-input"
|
|
1101
|
-
/>
|
|
1102
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
1103
|
-
</label>
|
|
1104
|
-
<label
|
|
1105
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
1106
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted"
|
|
1107
|
-
for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted-input"
|
|
1108
|
-
>
|
|
1109
|
-
<input
|
|
1110
|
-
class="pf-v5-c-check__input"
|
|
1111
|
-
type="checkbox"
|
|
1112
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted-input"
|
|
1113
|
-
name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted-input"
|
|
1114
|
-
/>
|
|
1115
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
1116
|
-
</label>
|
|
1117
|
-
</fieldset>
|
|
1118
|
-
</div>
|
|
1119
|
-
</div>
|
|
518
|
+
</span>
|
|
519
|
+
</button>
|
|
1120
520
|
</div>
|
|
1121
521
|
</div>
|
|
1122
522
|
</div>
|
|
@@ -1134,7 +534,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1134
534
|
| Attribute | Applied to | Outcome |
|
|
1135
535
|
| -- | -- | -- |
|
|
1136
536
|
| `hidden` | `.pf-v5-c-toolbar__item`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__toggle`, `.pf-v5-c-toolbar__expandable-content` | Indicates that the toggle group element is hidden. **Required** |
|
|
1137
|
-
| `aria-expanded=
|
|
537
|
+
| `aria-expanded=true` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates that the expandable content is visible. **Required** |
|
|
1138
538
|
| `aria-expanded="false"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates the the expandable content is hidden. **Required** |
|
|
1139
539
|
| `aria-controls="[id of expandable content]"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Identifies the expanded content controlled by the toggle button. **Required** |
|
|
1140
540
|
| `id="[expandable-content_id]"` | `.pf-v5-c-toolbar__expandable-content` | Provides a reference for toggle button description. **Required** |
|
|
@@ -1143,7 +543,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1143
543
|
|
|
1144
544
|
| Attribute | Applied to | Outcome |
|
|
1145
545
|
| -- | -- | -- |
|
|
1146
|
-
| `aria-haspopup=
|
|
546
|
+
| `aria-haspopup=true` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | When expandable content appears above content (mobile viewport), `aria-haspopup=true` should be applied to indicate that focus should be trapped. **Required** |
|
|
1147
547
|
|
|
1148
548
|
### Usage
|
|
1149
549
|
|
|
@@ -1165,64 +565,45 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1165
565
|
<div class="pf-v5-c-toolbar__content">
|
|
1166
566
|
<div class="pf-v5-c-toolbar__content-section">
|
|
1167
567
|
<div class="pf-v5-c-toolbar__item pf-m-bulk-select">
|
|
1168
|
-
<div
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
role="menuitem"
|
|
1199
|
-
type="button"
|
|
1200
|
-
>Select all</button>
|
|
1201
|
-
</li>
|
|
1202
|
-
<li role="none">
|
|
1203
|
-
<button
|
|
1204
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
1205
|
-
role="menuitem"
|
|
1206
|
-
type="button"
|
|
1207
|
-
>Select none</button>
|
|
1208
|
-
</li>
|
|
1209
|
-
<li role="none">
|
|
1210
|
-
<button
|
|
1211
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
1212
|
-
role="menuitem"
|
|
1213
|
-
type="button"
|
|
1214
|
-
>Other action</button>
|
|
1215
|
-
</li>
|
|
1216
|
-
</ul>
|
|
568
|
+
<div
|
|
569
|
+
class="pf-v5-c-menu-toggle pf-m-split-button"
|
|
570
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-check"
|
|
571
|
+
>
|
|
572
|
+
<label
|
|
573
|
+
class="pf-v5-c-check pf-m-standalone"
|
|
574
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-check-check"
|
|
575
|
+
for="toolbar-selected-filters-toggle-group-collapsed-example-check-check-input"
|
|
576
|
+
>
|
|
577
|
+
<input
|
|
578
|
+
class="pf-v5-c-check__input"
|
|
579
|
+
type="checkbox"
|
|
580
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-check-check-input"
|
|
581
|
+
name="toolbar-selected-filters-toggle-group-collapsed-example-check-check-input"
|
|
582
|
+
aria-label="Standalone check"
|
|
583
|
+
/>
|
|
584
|
+
</label>
|
|
585
|
+
<button
|
|
586
|
+
class="pf-v5-c-menu-toggle__button"
|
|
587
|
+
type="button"
|
|
588
|
+
aria-expanded="false"
|
|
589
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-menu-toggle-toggle-button"
|
|
590
|
+
aria-label="Menu toggle"
|
|
591
|
+
>
|
|
592
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
593
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
594
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
595
|
+
</span>
|
|
596
|
+
</span>
|
|
597
|
+
</button>
|
|
1217
598
|
</div>
|
|
1218
599
|
</div>
|
|
1219
600
|
<div class="pf-v5-c-toolbar__group pf-m-toggle-group">
|
|
1220
601
|
<div class="pf-v5-c-toolbar__toggle">
|
|
1221
602
|
<button
|
|
1222
|
-
class="pf-v5-c-
|
|
603
|
+
class="pf-v5-c-menu-toggle pf-m-plain"
|
|
1223
604
|
type="button"
|
|
1224
|
-
aria-label="Show filters"
|
|
1225
605
|
aria-expanded="false"
|
|
606
|
+
aria-label="Show filters"
|
|
1226
607
|
aria-controls="toolbar-selected-filters-toggle-group-collapsed-example-expandable-content"
|
|
1227
608
|
>
|
|
1228
609
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
@@ -1235,72 +616,22 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1235
616
|
role="group"
|
|
1236
617
|
>
|
|
1237
618
|
<div class="pf-v5-c-input-group__item">
|
|
1238
|
-
<
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
<
|
|
1245
|
-
class="
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
>
|
|
1252
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
1253
|
-
<span class="pf-v5-c-select__toggle-icon">
|
|
1254
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
1255
|
-
</span>
|
|
1256
|
-
<span class="pf-v5-c-select__toggle-text">Name</span>
|
|
1257
|
-
</div>
|
|
1258
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
1259
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
619
|
+
<button
|
|
620
|
+
class="pf-v5-c-menu-toggle"
|
|
621
|
+
type="button"
|
|
622
|
+
aria-expanded="false"
|
|
623
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-search-filter-menu"
|
|
624
|
+
>
|
|
625
|
+
<span class="pf-v5-c-menu-toggle__icon">
|
|
626
|
+
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
627
|
+
</span>
|
|
628
|
+
<span class="pf-v5-c-menu-toggle__text">Name</span>
|
|
629
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
630
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
631
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1260
632
|
</span>
|
|
1261
|
-
</
|
|
1262
|
-
|
|
1263
|
-
<ul
|
|
1264
|
-
class="pf-v5-c-select__menu"
|
|
1265
|
-
role="listbox"
|
|
1266
|
-
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label"
|
|
1267
|
-
hidden
|
|
1268
|
-
>
|
|
1269
|
-
<li role="presentation">
|
|
1270
|
-
<button
|
|
1271
|
-
class="pf-v5-c-select__menu-item"
|
|
1272
|
-
role="option"
|
|
1273
|
-
>Running</button>
|
|
1274
|
-
</li>
|
|
1275
|
-
<li role="presentation">
|
|
1276
|
-
<button
|
|
1277
|
-
class="pf-v5-c-select__menu-item pf-m-selected"
|
|
1278
|
-
role="option"
|
|
1279
|
-
aria-selected="true"
|
|
1280
|
-
>
|
|
1281
|
-
Stopped
|
|
1282
|
-
<span class="pf-v5-c-select__menu-item-icon">
|
|
1283
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1284
|
-
</span>
|
|
1285
|
-
</button>
|
|
1286
|
-
</li>
|
|
1287
|
-
<li role="presentation">
|
|
1288
|
-
<button class="pf-v5-c-select__menu-item" role="option">Down</button>
|
|
1289
|
-
</li>
|
|
1290
|
-
<li role="presentation">
|
|
1291
|
-
<button
|
|
1292
|
-
class="pf-v5-c-select__menu-item"
|
|
1293
|
-
role="option"
|
|
1294
|
-
>Degraded</button>
|
|
1295
|
-
</li>
|
|
1296
|
-
<li role="presentation">
|
|
1297
|
-
<button
|
|
1298
|
-
class="pf-v5-c-select__menu-item"
|
|
1299
|
-
role="option"
|
|
1300
|
-
>Needs maintenance</button>
|
|
1301
|
-
</li>
|
|
1302
|
-
</ul>
|
|
1303
|
-
</div>
|
|
633
|
+
</span>
|
|
634
|
+
</button>
|
|
1304
635
|
</div>
|
|
1305
636
|
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
1306
637
|
<div class="pf-v5-c-text-input-group">
|
|
@@ -1324,218 +655,34 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1324
655
|
</div>
|
|
1325
656
|
<div class="pf-v5-c-toolbar__group pf-m-filter-group">
|
|
1326
657
|
<div class="pf-v5-c-toolbar__item">
|
|
1327
|
-
<
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
<
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
aria-haspopup="true"
|
|
1338
|
-
aria-expanded="false"
|
|
1339
|
-
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-label toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-toggle"
|
|
1340
|
-
>
|
|
1341
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
1342
|
-
<span class="pf-v5-c-select__toggle-text">Status</span>
|
|
1343
|
-
</div>
|
|
1344
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
1345
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
658
|
+
<button
|
|
659
|
+
class="pf-v5-c-menu-toggle"
|
|
660
|
+
type="button"
|
|
661
|
+
aria-expanded="false"
|
|
662
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-menu-toggle-checkbox-status"
|
|
663
|
+
>
|
|
664
|
+
<span class="pf-v5-c-menu-toggle__text">Status</span>
|
|
665
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
666
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
667
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1346
668
|
</span>
|
|
1347
|
-
</
|
|
1348
|
-
|
|
1349
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
1350
|
-
<fieldset
|
|
1351
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
1352
|
-
aria-label="Select input"
|
|
1353
|
-
>
|
|
1354
|
-
<label
|
|
1355
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
1356
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active"
|
|
1357
|
-
for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active-input"
|
|
1358
|
-
>
|
|
1359
|
-
<input
|
|
1360
|
-
class="pf-v5-c-check__input"
|
|
1361
|
-
type="checkbox"
|
|
1362
|
-
aria-describedby="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active-description"
|
|
1363
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active-input"
|
|
1364
|
-
name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active-input"
|
|
1365
|
-
/>
|
|
1366
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
1367
|
-
<span
|
|
1368
|
-
class="pf-v5-c-check__description"
|
|
1369
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active-description"
|
|
1370
|
-
>This is a description</span>
|
|
1371
|
-
</label>
|
|
1372
|
-
<label
|
|
1373
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
1374
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled"
|
|
1375
|
-
for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-input"
|
|
1376
|
-
>
|
|
1377
|
-
<input
|
|
1378
|
-
class="pf-v5-c-check__input"
|
|
1379
|
-
type="checkbox"
|
|
1380
|
-
aria-describedby="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-description"
|
|
1381
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-input"
|
|
1382
|
-
name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-input"
|
|
1383
|
-
/>
|
|
1384
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
1385
|
-
<span
|
|
1386
|
-
class="pf-v5-c-check__description"
|
|
1387
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-description"
|
|
1388
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
1389
|
-
</label>
|
|
1390
|
-
<label
|
|
1391
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
1392
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-paused"
|
|
1393
|
-
for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-paused-input"
|
|
1394
|
-
>
|
|
1395
|
-
<input
|
|
1396
|
-
class="pf-v5-c-check__input"
|
|
1397
|
-
type="checkbox"
|
|
1398
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-paused-input"
|
|
1399
|
-
name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-paused-input"
|
|
1400
|
-
/>
|
|
1401
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
1402
|
-
</label>
|
|
1403
|
-
<label
|
|
1404
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
1405
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-warning"
|
|
1406
|
-
for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-warning-input"
|
|
1407
|
-
>
|
|
1408
|
-
<input
|
|
1409
|
-
class="pf-v5-c-check__input"
|
|
1410
|
-
type="checkbox"
|
|
1411
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-warning-input"
|
|
1412
|
-
name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-warning-input"
|
|
1413
|
-
/>
|
|
1414
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
1415
|
-
</label>
|
|
1416
|
-
<label
|
|
1417
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
1418
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted"
|
|
1419
|
-
for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted-input"
|
|
1420
|
-
>
|
|
1421
|
-
<input
|
|
1422
|
-
class="pf-v5-c-check__input"
|
|
1423
|
-
type="checkbox"
|
|
1424
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted-input"
|
|
1425
|
-
name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted-input"
|
|
1426
|
-
/>
|
|
1427
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
1428
|
-
</label>
|
|
1429
|
-
</fieldset>
|
|
1430
|
-
</div>
|
|
1431
|
-
</div>
|
|
669
|
+
</span>
|
|
670
|
+
</button>
|
|
1432
671
|
</div>
|
|
1433
672
|
<div class="pf-v5-c-toolbar__item">
|
|
1434
|
-
<
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
<
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
aria-haspopup="true"
|
|
1445
|
-
aria-expanded="false"
|
|
1446
|
-
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-label toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-toggle"
|
|
1447
|
-
>
|
|
1448
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
1449
|
-
<span class="pf-v5-c-select__toggle-text">Risk</span>
|
|
1450
|
-
</div>
|
|
1451
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
1452
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
673
|
+
<button
|
|
674
|
+
class="pf-v5-c-menu-toggle"
|
|
675
|
+
type="button"
|
|
676
|
+
aria-expanded="false"
|
|
677
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-menu-toggle-checkbox-risk"
|
|
678
|
+
>
|
|
679
|
+
<span class="pf-v5-c-menu-toggle__text">Risk</span>
|
|
680
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
681
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
682
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1453
683
|
</span>
|
|
1454
|
-
</
|
|
1455
|
-
|
|
1456
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
1457
|
-
<fieldset
|
|
1458
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
1459
|
-
aria-label="Select input"
|
|
1460
|
-
>
|
|
1461
|
-
<label
|
|
1462
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
1463
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active"
|
|
1464
|
-
for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-input"
|
|
1465
|
-
>
|
|
1466
|
-
<input
|
|
1467
|
-
class="pf-v5-c-check__input"
|
|
1468
|
-
type="checkbox"
|
|
1469
|
-
aria-describedby="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-description"
|
|
1470
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-input"
|
|
1471
|
-
name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-input"
|
|
1472
|
-
/>
|
|
1473
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
1474
|
-
<span
|
|
1475
|
-
class="pf-v5-c-check__description"
|
|
1476
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-description"
|
|
1477
|
-
>This is a description</span>
|
|
1478
|
-
</label>
|
|
1479
|
-
<label
|
|
1480
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
1481
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled"
|
|
1482
|
-
for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-input"
|
|
1483
|
-
>
|
|
1484
|
-
<input
|
|
1485
|
-
class="pf-v5-c-check__input"
|
|
1486
|
-
type="checkbox"
|
|
1487
|
-
aria-describedby="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-description"
|
|
1488
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-input"
|
|
1489
|
-
name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-input"
|
|
1490
|
-
/>
|
|
1491
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
1492
|
-
<span
|
|
1493
|
-
class="pf-v5-c-check__description"
|
|
1494
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-description"
|
|
1495
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
1496
|
-
</label>
|
|
1497
|
-
<label
|
|
1498
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
1499
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused"
|
|
1500
|
-
for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused-input"
|
|
1501
|
-
>
|
|
1502
|
-
<input
|
|
1503
|
-
class="pf-v5-c-check__input"
|
|
1504
|
-
type="checkbox"
|
|
1505
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused-input"
|
|
1506
|
-
name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused-input"
|
|
1507
|
-
/>
|
|
1508
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
1509
|
-
</label>
|
|
1510
|
-
<label
|
|
1511
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
1512
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning"
|
|
1513
|
-
for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning-input"
|
|
1514
|
-
>
|
|
1515
|
-
<input
|
|
1516
|
-
class="pf-v5-c-check__input"
|
|
1517
|
-
type="checkbox"
|
|
1518
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning-input"
|
|
1519
|
-
name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning-input"
|
|
1520
|
-
/>
|
|
1521
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
1522
|
-
</label>
|
|
1523
|
-
<label
|
|
1524
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
1525
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted"
|
|
1526
|
-
for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted-input"
|
|
1527
|
-
>
|
|
1528
|
-
<input
|
|
1529
|
-
class="pf-v5-c-check__input"
|
|
1530
|
-
type="checkbox"
|
|
1531
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted-input"
|
|
1532
|
-
name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted-input"
|
|
1533
|
-
/>
|
|
1534
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
1535
|
-
</label>
|
|
1536
|
-
</fieldset>
|
|
1537
|
-
</div>
|
|
1538
|
-
</div>
|
|
684
|
+
</span>
|
|
685
|
+
</button>
|
|
1539
686
|
</div>
|
|
1540
687
|
</div>
|
|
1541
688
|
</div>
|
|
@@ -1775,64 +922,45 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1775
922
|
<div class="pf-v5-c-toolbar__content">
|
|
1776
923
|
<div class="pf-v5-c-toolbar__content-section">
|
|
1777
924
|
<div class="pf-v5-c-toolbar__item pf-m-bulk-select">
|
|
1778
|
-
<div
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
|
|
1783
|
-
|
|
1784
|
-
|
|
1785
|
-
|
|
1786
|
-
|
|
1787
|
-
|
|
1788
|
-
|
|
1789
|
-
|
|
1790
|
-
|
|
1791
|
-
|
|
1792
|
-
|
|
1793
|
-
|
|
1794
|
-
|
|
1795
|
-
|
|
1796
|
-
|
|
1797
|
-
|
|
1798
|
-
|
|
1799
|
-
|
|
1800
|
-
|
|
1801
|
-
|
|
1802
|
-
|
|
1803
|
-
|
|
1804
|
-
|
|
1805
|
-
|
|
1806
|
-
|
|
1807
|
-
|
|
1808
|
-
role="menuitem"
|
|
1809
|
-
type="button"
|
|
1810
|
-
>Select all</button>
|
|
1811
|
-
</li>
|
|
1812
|
-
<li role="none">
|
|
1813
|
-
<button
|
|
1814
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
1815
|
-
role="menuitem"
|
|
1816
|
-
type="button"
|
|
1817
|
-
>Select none</button>
|
|
1818
|
-
</li>
|
|
1819
|
-
<li role="none">
|
|
1820
|
-
<button
|
|
1821
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
1822
|
-
role="menuitem"
|
|
1823
|
-
type="button"
|
|
1824
|
-
>Other action</button>
|
|
1825
|
-
</li>
|
|
1826
|
-
</ul>
|
|
925
|
+
<div
|
|
926
|
+
class="pf-v5-c-menu-toggle pf-m-split-button"
|
|
927
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-check"
|
|
928
|
+
>
|
|
929
|
+
<label
|
|
930
|
+
class="pf-v5-c-check pf-m-standalone"
|
|
931
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-check-check"
|
|
932
|
+
for="toolbar-selected-filters-toggle-group-expanded-example-check-check-input"
|
|
933
|
+
>
|
|
934
|
+
<input
|
|
935
|
+
class="pf-v5-c-check__input"
|
|
936
|
+
type="checkbox"
|
|
937
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-check-check-input"
|
|
938
|
+
name="toolbar-selected-filters-toggle-group-expanded-example-check-check-input"
|
|
939
|
+
aria-label="Standalone check"
|
|
940
|
+
/>
|
|
941
|
+
</label>
|
|
942
|
+
<button
|
|
943
|
+
class="pf-v5-c-menu-toggle__button"
|
|
944
|
+
type="button"
|
|
945
|
+
aria-expanded="false"
|
|
946
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-toggle-button"
|
|
947
|
+
aria-label="Menu toggle"
|
|
948
|
+
>
|
|
949
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
950
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
951
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
952
|
+
</span>
|
|
953
|
+
</span>
|
|
954
|
+
</button>
|
|
1827
955
|
</div>
|
|
1828
956
|
</div>
|
|
1829
957
|
<div class="pf-v5-c-toolbar__group pf-m-toggle-group">
|
|
1830
|
-
<div class="pf-v5-c-toolbar__toggle
|
|
958
|
+
<div class="pf-v5-c-toolbar__toggle">
|
|
1831
959
|
<button
|
|
1832
|
-
class="pf-v5-c-
|
|
960
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
|
|
1833
961
|
type="button"
|
|
1834
|
-
aria-label="Show filters"
|
|
1835
962
|
aria-expanded="true"
|
|
963
|
+
aria-label="Show filters"
|
|
1836
964
|
aria-controls="toolbar-selected-filters-toggle-group-expanded-example-expandable-content"
|
|
1837
965
|
>
|
|
1838
966
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
@@ -1896,72 +1024,22 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1896
1024
|
role="group"
|
|
1897
1025
|
>
|
|
1898
1026
|
<div class="pf-v5-c-input-group__item">
|
|
1899
|
-
<
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
|
|
1905
|
-
<
|
|
1906
|
-
class="
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
|
|
1912
|
-
>
|
|
1913
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
1914
|
-
<span class="pf-v5-c-select__toggle-icon">
|
|
1915
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
1916
|
-
</span>
|
|
1917
|
-
<span class="pf-v5-c-select__toggle-text">Name</span>
|
|
1918
|
-
</div>
|
|
1919
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
1920
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1027
|
+
<button
|
|
1028
|
+
class="pf-v5-c-menu-toggle"
|
|
1029
|
+
type="button"
|
|
1030
|
+
aria-expanded="false"
|
|
1031
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-search-filter-menu"
|
|
1032
|
+
>
|
|
1033
|
+
<span class="pf-v5-c-menu-toggle__icon">
|
|
1034
|
+
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
1035
|
+
</span>
|
|
1036
|
+
<span class="pf-v5-c-menu-toggle__text">Name</span>
|
|
1037
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
1038
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1039
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1921
1040
|
</span>
|
|
1922
|
-
</
|
|
1923
|
-
|
|
1924
|
-
<ul
|
|
1925
|
-
class="pf-v5-c-select__menu"
|
|
1926
|
-
role="listbox"
|
|
1927
|
-
aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-name-label"
|
|
1928
|
-
hidden
|
|
1929
|
-
>
|
|
1930
|
-
<li role="presentation">
|
|
1931
|
-
<button
|
|
1932
|
-
class="pf-v5-c-select__menu-item"
|
|
1933
|
-
role="option"
|
|
1934
|
-
>Running</button>
|
|
1935
|
-
</li>
|
|
1936
|
-
<li role="presentation">
|
|
1937
|
-
<button
|
|
1938
|
-
class="pf-v5-c-select__menu-item pf-m-selected"
|
|
1939
|
-
role="option"
|
|
1940
|
-
aria-selected="true"
|
|
1941
|
-
>
|
|
1942
|
-
Stopped
|
|
1943
|
-
<span class="pf-v5-c-select__menu-item-icon">
|
|
1944
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1945
|
-
</span>
|
|
1946
|
-
</button>
|
|
1947
|
-
</li>
|
|
1948
|
-
<li role="presentation">
|
|
1949
|
-
<button class="pf-v5-c-select__menu-item" role="option">Down</button>
|
|
1950
|
-
</li>
|
|
1951
|
-
<li role="presentation">
|
|
1952
|
-
<button
|
|
1953
|
-
class="pf-v5-c-select__menu-item"
|
|
1954
|
-
role="option"
|
|
1955
|
-
>Degraded</button>
|
|
1956
|
-
</li>
|
|
1957
|
-
<li role="presentation">
|
|
1958
|
-
<button
|
|
1959
|
-
class="pf-v5-c-select__menu-item"
|
|
1960
|
-
role="option"
|
|
1961
|
-
>Needs maintenance</button>
|
|
1962
|
-
</li>
|
|
1963
|
-
</ul>
|
|
1964
|
-
</div>
|
|
1041
|
+
</span>
|
|
1042
|
+
</button>
|
|
1965
1043
|
</div>
|
|
1966
1044
|
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
1967
1045
|
<div class="pf-v5-c-text-input-group">
|
|
@@ -1985,218 +1063,34 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1985
1063
|
</div>
|
|
1986
1064
|
<div class="pf-v5-c-toolbar__group pf-m-filter-group">
|
|
1987
1065
|
<div class="pf-v5-c-toolbar__item">
|
|
1988
|
-
<
|
|
1989
|
-
|
|
1990
|
-
|
|
1991
|
-
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
<
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
aria-haspopup="true"
|
|
1999
|
-
aria-expanded="false"
|
|
2000
|
-
aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-label toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-toggle"
|
|
2001
|
-
>
|
|
2002
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
2003
|
-
<span class="pf-v5-c-select__toggle-text">Status</span>
|
|
2004
|
-
</div>
|
|
2005
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
2006
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1066
|
+
<button
|
|
1067
|
+
class="pf-v5-c-menu-toggle"
|
|
1068
|
+
type="button"
|
|
1069
|
+
aria-expanded="false"
|
|
1070
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-status"
|
|
1071
|
+
>
|
|
1072
|
+
<span class="pf-v5-c-menu-toggle__text">Status</span>
|
|
1073
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
1074
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1075
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
2007
1076
|
</span>
|
|
2008
|
-
</
|
|
2009
|
-
|
|
2010
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
2011
|
-
<fieldset
|
|
2012
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
2013
|
-
aria-label="Select input"
|
|
2014
|
-
>
|
|
2015
|
-
<label
|
|
2016
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
2017
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-active"
|
|
2018
|
-
for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-active-input"
|
|
2019
|
-
>
|
|
2020
|
-
<input
|
|
2021
|
-
class="pf-v5-c-check__input"
|
|
2022
|
-
type="checkbox"
|
|
2023
|
-
aria-describedby="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-active-description"
|
|
2024
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-active-input"
|
|
2025
|
-
name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-active-input"
|
|
2026
|
-
/>
|
|
2027
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
2028
|
-
<span
|
|
2029
|
-
class="pf-v5-c-check__description"
|
|
2030
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-active-description"
|
|
2031
|
-
>This is a description</span>
|
|
2032
|
-
</label>
|
|
2033
|
-
<label
|
|
2034
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
2035
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-canceled"
|
|
2036
|
-
for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-canceled-input"
|
|
2037
|
-
>
|
|
2038
|
-
<input
|
|
2039
|
-
class="pf-v5-c-check__input"
|
|
2040
|
-
type="checkbox"
|
|
2041
|
-
aria-describedby="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-canceled-description"
|
|
2042
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-canceled-input"
|
|
2043
|
-
name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-canceled-input"
|
|
2044
|
-
/>
|
|
2045
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
2046
|
-
<span
|
|
2047
|
-
class="pf-v5-c-check__description"
|
|
2048
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-canceled-description"
|
|
2049
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
2050
|
-
</label>
|
|
2051
|
-
<label
|
|
2052
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
2053
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-paused"
|
|
2054
|
-
for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-paused-input"
|
|
2055
|
-
>
|
|
2056
|
-
<input
|
|
2057
|
-
class="pf-v5-c-check__input"
|
|
2058
|
-
type="checkbox"
|
|
2059
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-paused-input"
|
|
2060
|
-
name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-paused-input"
|
|
2061
|
-
/>
|
|
2062
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
2063
|
-
</label>
|
|
2064
|
-
<label
|
|
2065
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
2066
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-warning"
|
|
2067
|
-
for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-warning-input"
|
|
2068
|
-
>
|
|
2069
|
-
<input
|
|
2070
|
-
class="pf-v5-c-check__input"
|
|
2071
|
-
type="checkbox"
|
|
2072
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-warning-input"
|
|
2073
|
-
name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-warning-input"
|
|
2074
|
-
/>
|
|
2075
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
2076
|
-
</label>
|
|
2077
|
-
<label
|
|
2078
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
2079
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-restarted"
|
|
2080
|
-
for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-restarted-input"
|
|
2081
|
-
>
|
|
2082
|
-
<input
|
|
2083
|
-
class="pf-v5-c-check__input"
|
|
2084
|
-
type="checkbox"
|
|
2085
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-restarted-input"
|
|
2086
|
-
name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-restarted-input"
|
|
2087
|
-
/>
|
|
2088
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
2089
|
-
</label>
|
|
2090
|
-
</fieldset>
|
|
2091
|
-
</div>
|
|
2092
|
-
</div>
|
|
1077
|
+
</span>
|
|
1078
|
+
</button>
|
|
2093
1079
|
</div>
|
|
2094
1080
|
<div class="pf-v5-c-toolbar__item">
|
|
2095
|
-
<
|
|
2096
|
-
|
|
2097
|
-
|
|
2098
|
-
|
|
2099
|
-
|
|
2100
|
-
|
|
2101
|
-
<
|
|
2102
|
-
|
|
2103
|
-
|
|
2104
|
-
|
|
2105
|
-
aria-haspopup="true"
|
|
2106
|
-
aria-expanded="false"
|
|
2107
|
-
aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-label toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-toggle"
|
|
2108
|
-
>
|
|
2109
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
2110
|
-
<span class="pf-v5-c-select__toggle-text">Risk</span>
|
|
2111
|
-
</div>
|
|
2112
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
2113
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1081
|
+
<button
|
|
1082
|
+
class="pf-v5-c-menu-toggle"
|
|
1083
|
+
type="button"
|
|
1084
|
+
aria-expanded="false"
|
|
1085
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-risk"
|
|
1086
|
+
>
|
|
1087
|
+
<span class="pf-v5-c-menu-toggle__text">Risk</span>
|
|
1088
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
1089
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1090
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
2114
1091
|
</span>
|
|
2115
|
-
</
|
|
2116
|
-
|
|
2117
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
2118
|
-
<fieldset
|
|
2119
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
2120
|
-
aria-label="Select input"
|
|
2121
|
-
>
|
|
2122
|
-
<label
|
|
2123
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
2124
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-active"
|
|
2125
|
-
for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-active-input"
|
|
2126
|
-
>
|
|
2127
|
-
<input
|
|
2128
|
-
class="pf-v5-c-check__input"
|
|
2129
|
-
type="checkbox"
|
|
2130
|
-
aria-describedby="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-active-description"
|
|
2131
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-active-input"
|
|
2132
|
-
name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-active-input"
|
|
2133
|
-
/>
|
|
2134
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
2135
|
-
<span
|
|
2136
|
-
class="pf-v5-c-check__description"
|
|
2137
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-active-description"
|
|
2138
|
-
>This is a description</span>
|
|
2139
|
-
</label>
|
|
2140
|
-
<label
|
|
2141
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
2142
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-canceled"
|
|
2143
|
-
for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-canceled-input"
|
|
2144
|
-
>
|
|
2145
|
-
<input
|
|
2146
|
-
class="pf-v5-c-check__input"
|
|
2147
|
-
type="checkbox"
|
|
2148
|
-
aria-describedby="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-canceled-description"
|
|
2149
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-canceled-input"
|
|
2150
|
-
name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-canceled-input"
|
|
2151
|
-
/>
|
|
2152
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
2153
|
-
<span
|
|
2154
|
-
class="pf-v5-c-check__description"
|
|
2155
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-canceled-description"
|
|
2156
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
2157
|
-
</label>
|
|
2158
|
-
<label
|
|
2159
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
2160
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-paused"
|
|
2161
|
-
for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-paused-input"
|
|
2162
|
-
>
|
|
2163
|
-
<input
|
|
2164
|
-
class="pf-v5-c-check__input"
|
|
2165
|
-
type="checkbox"
|
|
2166
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-paused-input"
|
|
2167
|
-
name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-paused-input"
|
|
2168
|
-
/>
|
|
2169
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
2170
|
-
</label>
|
|
2171
|
-
<label
|
|
2172
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
2173
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-warning"
|
|
2174
|
-
for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-warning-input"
|
|
2175
|
-
>
|
|
2176
|
-
<input
|
|
2177
|
-
class="pf-v5-c-check__input"
|
|
2178
|
-
type="checkbox"
|
|
2179
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-warning-input"
|
|
2180
|
-
name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-warning-input"
|
|
2181
|
-
/>
|
|
2182
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
2183
|
-
</label>
|
|
2184
|
-
<label
|
|
2185
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
2186
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-restarted"
|
|
2187
|
-
for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-restarted-input"
|
|
2188
|
-
>
|
|
2189
|
-
<input
|
|
2190
|
-
class="pf-v5-c-check__input"
|
|
2191
|
-
type="checkbox"
|
|
2192
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-restarted-input"
|
|
2193
|
-
name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-restarted-input"
|
|
2194
|
-
/>
|
|
2195
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
2196
|
-
</label>
|
|
2197
|
-
</fieldset>
|
|
2198
|
-
</div>
|
|
2199
|
-
</div>
|
|
1092
|
+
</span>
|
|
1093
|
+
</button>
|
|
2200
1094
|
</div>
|
|
2201
1095
|
</div>
|
|
2202
1096
|
<div class="pf-v5-c-toolbar__group pf-m-chip-container">
|
|
@@ -2380,64 +1274,45 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
2380
1274
|
<div class="pf-v5-c-toolbar__content">
|
|
2381
1275
|
<div class="pf-v5-c-toolbar__content-section">
|
|
2382
1276
|
<div class="pf-v5-c-toolbar__item pf-m-bulk-select">
|
|
2383
|
-
<div
|
|
2384
|
-
|
|
2385
|
-
|
|
2386
|
-
|
|
2387
|
-
|
|
2388
|
-
|
|
2389
|
-
|
|
2390
|
-
|
|
2391
|
-
|
|
2392
|
-
|
|
2393
|
-
|
|
2394
|
-
|
|
2395
|
-
|
|
2396
|
-
|
|
2397
|
-
|
|
2398
|
-
|
|
2399
|
-
|
|
2400
|
-
|
|
2401
|
-
|
|
2402
|
-
|
|
2403
|
-
|
|
2404
|
-
|
|
2405
|
-
|
|
2406
|
-
|
|
2407
|
-
|
|
2408
|
-
|
|
2409
|
-
|
|
2410
|
-
|
|
2411
|
-
|
|
2412
|
-
|
|
2413
|
-
role="menuitem"
|
|
2414
|
-
type="button"
|
|
2415
|
-
>Select all</button>
|
|
2416
|
-
</li>
|
|
2417
|
-
<li role="none">
|
|
2418
|
-
<button
|
|
2419
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
2420
|
-
role="menuitem"
|
|
2421
|
-
type="button"
|
|
2422
|
-
>Select none</button>
|
|
2423
|
-
</li>
|
|
2424
|
-
<li role="none">
|
|
2425
|
-
<button
|
|
2426
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
2427
|
-
role="menuitem"
|
|
2428
|
-
type="button"
|
|
2429
|
-
>Other action</button>
|
|
2430
|
-
</li>
|
|
2431
|
-
</ul>
|
|
1277
|
+
<div
|
|
1278
|
+
class="pf-v5-c-menu-toggle pf-m-split-button"
|
|
1279
|
+
id="toolbar-selected-filters-example-check"
|
|
1280
|
+
>
|
|
1281
|
+
<label
|
|
1282
|
+
class="pf-v5-c-check pf-m-standalone"
|
|
1283
|
+
id="toolbar-selected-filters-example-check-check"
|
|
1284
|
+
for="toolbar-selected-filters-example-check-check-input"
|
|
1285
|
+
>
|
|
1286
|
+
<input
|
|
1287
|
+
class="pf-v5-c-check__input"
|
|
1288
|
+
type="checkbox"
|
|
1289
|
+
id="toolbar-selected-filters-example-check-check-input"
|
|
1290
|
+
name="toolbar-selected-filters-example-check-check-input"
|
|
1291
|
+
aria-label="Standalone check"
|
|
1292
|
+
/>
|
|
1293
|
+
</label>
|
|
1294
|
+
<button
|
|
1295
|
+
class="pf-v5-c-menu-toggle__button"
|
|
1296
|
+
type="button"
|
|
1297
|
+
aria-expanded="false"
|
|
1298
|
+
id="toolbar-selected-filters-example-menu-toggle-toggle-button"
|
|
1299
|
+
aria-label="Menu toggle"
|
|
1300
|
+
>
|
|
1301
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
1302
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1303
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1304
|
+
</span>
|
|
1305
|
+
</span>
|
|
1306
|
+
</button>
|
|
2432
1307
|
</div>
|
|
2433
1308
|
</div>
|
|
2434
1309
|
<div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show">
|
|
2435
1310
|
<div class="pf-v5-c-toolbar__toggle">
|
|
2436
1311
|
<button
|
|
2437
|
-
class="pf-v5-c-
|
|
1312
|
+
class="pf-v5-c-menu-toggle pf-m-plain"
|
|
2438
1313
|
type="button"
|
|
2439
|
-
aria-label="Show filters"
|
|
2440
1314
|
aria-expanded="false"
|
|
1315
|
+
aria-label="Show filters"
|
|
2441
1316
|
aria-controls="toolbar-selected-filters-example-expandable-content"
|
|
2442
1317
|
>
|
|
2443
1318
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
@@ -2445,218 +1320,34 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
2445
1320
|
</div>
|
|
2446
1321
|
<div class="pf-v5-c-toolbar__group pf-m-filter-group">
|
|
2447
1322
|
<div class="pf-v5-c-toolbar__item">
|
|
2448
|
-
<
|
|
2449
|
-
|
|
2450
|
-
|
|
2451
|
-
|
|
2452
|
-
|
|
2453
|
-
|
|
2454
|
-
<
|
|
2455
|
-
|
|
2456
|
-
|
|
2457
|
-
|
|
2458
|
-
aria-haspopup="true"
|
|
2459
|
-
aria-expanded="false"
|
|
2460
|
-
aria-labelledby="toolbar-selected-filters-example-select-checkbox-status-label toolbar-selected-filters-example-select-checkbox-status-toggle"
|
|
2461
|
-
>
|
|
2462
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
2463
|
-
<span class="pf-v5-c-select__toggle-text">Status</span>
|
|
2464
|
-
</div>
|
|
2465
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
2466
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1323
|
+
<button
|
|
1324
|
+
class="pf-v5-c-menu-toggle"
|
|
1325
|
+
type="button"
|
|
1326
|
+
aria-expanded="false"
|
|
1327
|
+
id="toolbar-selected-filters-example-menu-toggle-checkbox-status"
|
|
1328
|
+
>
|
|
1329
|
+
<span class="pf-v5-c-menu-toggle__text">Status</span>
|
|
1330
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
1331
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1332
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
2467
1333
|
</span>
|
|
2468
|
-
</
|
|
2469
|
-
|
|
2470
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
2471
|
-
<fieldset
|
|
2472
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
2473
|
-
aria-label="Select input"
|
|
2474
|
-
>
|
|
2475
|
-
<label
|
|
2476
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
2477
|
-
id="toolbar-selected-filters-example-select-checkbox-status-active"
|
|
2478
|
-
for="toolbar-selected-filters-example-select-checkbox-status-active-input"
|
|
2479
|
-
>
|
|
2480
|
-
<input
|
|
2481
|
-
class="pf-v5-c-check__input"
|
|
2482
|
-
type="checkbox"
|
|
2483
|
-
aria-describedby="toolbar-selected-filters-example-select-checkbox-status-active-description"
|
|
2484
|
-
id="toolbar-selected-filters-example-select-checkbox-status-active-input"
|
|
2485
|
-
name="toolbar-selected-filters-example-select-checkbox-status-active-input"
|
|
2486
|
-
/>
|
|
2487
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
2488
|
-
<span
|
|
2489
|
-
class="pf-v5-c-check__description"
|
|
2490
|
-
id="toolbar-selected-filters-example-select-checkbox-status-active-description"
|
|
2491
|
-
>This is a description</span>
|
|
2492
|
-
</label>
|
|
2493
|
-
<label
|
|
2494
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
2495
|
-
id="toolbar-selected-filters-example-select-checkbox-status-canceled"
|
|
2496
|
-
for="toolbar-selected-filters-example-select-checkbox-status-canceled-input"
|
|
2497
|
-
>
|
|
2498
|
-
<input
|
|
2499
|
-
class="pf-v5-c-check__input"
|
|
2500
|
-
type="checkbox"
|
|
2501
|
-
aria-describedby="toolbar-selected-filters-example-select-checkbox-status-canceled-description"
|
|
2502
|
-
id="toolbar-selected-filters-example-select-checkbox-status-canceled-input"
|
|
2503
|
-
name="toolbar-selected-filters-example-select-checkbox-status-canceled-input"
|
|
2504
|
-
/>
|
|
2505
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
2506
|
-
<span
|
|
2507
|
-
class="pf-v5-c-check__description"
|
|
2508
|
-
id="toolbar-selected-filters-example-select-checkbox-status-canceled-description"
|
|
2509
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
2510
|
-
</label>
|
|
2511
|
-
<label
|
|
2512
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
2513
|
-
id="toolbar-selected-filters-example-select-checkbox-status-paused"
|
|
2514
|
-
for="toolbar-selected-filters-example-select-checkbox-status-paused-input"
|
|
2515
|
-
>
|
|
2516
|
-
<input
|
|
2517
|
-
class="pf-v5-c-check__input"
|
|
2518
|
-
type="checkbox"
|
|
2519
|
-
id="toolbar-selected-filters-example-select-checkbox-status-paused-input"
|
|
2520
|
-
name="toolbar-selected-filters-example-select-checkbox-status-paused-input"
|
|
2521
|
-
/>
|
|
2522
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
2523
|
-
</label>
|
|
2524
|
-
<label
|
|
2525
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
2526
|
-
id="toolbar-selected-filters-example-select-checkbox-status-warning"
|
|
2527
|
-
for="toolbar-selected-filters-example-select-checkbox-status-warning-input"
|
|
2528
|
-
>
|
|
2529
|
-
<input
|
|
2530
|
-
class="pf-v5-c-check__input"
|
|
2531
|
-
type="checkbox"
|
|
2532
|
-
id="toolbar-selected-filters-example-select-checkbox-status-warning-input"
|
|
2533
|
-
name="toolbar-selected-filters-example-select-checkbox-status-warning-input"
|
|
2534
|
-
/>
|
|
2535
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
2536
|
-
</label>
|
|
2537
|
-
<label
|
|
2538
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
2539
|
-
id="toolbar-selected-filters-example-select-checkbox-status-restarted"
|
|
2540
|
-
for="toolbar-selected-filters-example-select-checkbox-status-restarted-input"
|
|
2541
|
-
>
|
|
2542
|
-
<input
|
|
2543
|
-
class="pf-v5-c-check__input"
|
|
2544
|
-
type="checkbox"
|
|
2545
|
-
id="toolbar-selected-filters-example-select-checkbox-status-restarted-input"
|
|
2546
|
-
name="toolbar-selected-filters-example-select-checkbox-status-restarted-input"
|
|
2547
|
-
/>
|
|
2548
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
2549
|
-
</label>
|
|
2550
|
-
</fieldset>
|
|
2551
|
-
</div>
|
|
2552
|
-
</div>
|
|
1334
|
+
</span>
|
|
1335
|
+
</button>
|
|
2553
1336
|
</div>
|
|
2554
1337
|
<div class="pf-v5-c-toolbar__item">
|
|
2555
|
-
<
|
|
2556
|
-
|
|
2557
|
-
|
|
2558
|
-
|
|
2559
|
-
|
|
2560
|
-
|
|
2561
|
-
<
|
|
2562
|
-
|
|
2563
|
-
|
|
2564
|
-
|
|
2565
|
-
aria-haspopup="true"
|
|
2566
|
-
aria-expanded="false"
|
|
2567
|
-
aria-labelledby="toolbar-selected-filters-example-select-checkbox-risk-label toolbar-selected-filters-example-select-checkbox-risk-toggle"
|
|
2568
|
-
>
|
|
2569
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
2570
|
-
<span class="pf-v5-c-select__toggle-text">Risk</span>
|
|
2571
|
-
</div>
|
|
2572
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
2573
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1338
|
+
<button
|
|
1339
|
+
class="pf-v5-c-menu-toggle"
|
|
1340
|
+
type="button"
|
|
1341
|
+
aria-expanded="false"
|
|
1342
|
+
id="toolbar-selected-filters-example-menu-toggle-checkbox-risk"
|
|
1343
|
+
>
|
|
1344
|
+
<span class="pf-v5-c-menu-toggle__text">Risk</span>
|
|
1345
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
1346
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1347
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
2574
1348
|
</span>
|
|
2575
|
-
</
|
|
2576
|
-
|
|
2577
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
2578
|
-
<fieldset
|
|
2579
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
2580
|
-
aria-label="Select input"
|
|
2581
|
-
>
|
|
2582
|
-
<label
|
|
2583
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
2584
|
-
id="toolbar-selected-filters-example-select-checkbox-risk-active"
|
|
2585
|
-
for="toolbar-selected-filters-example-select-checkbox-risk-active-input"
|
|
2586
|
-
>
|
|
2587
|
-
<input
|
|
2588
|
-
class="pf-v5-c-check__input"
|
|
2589
|
-
type="checkbox"
|
|
2590
|
-
aria-describedby="toolbar-selected-filters-example-select-checkbox-risk-active-description"
|
|
2591
|
-
id="toolbar-selected-filters-example-select-checkbox-risk-active-input"
|
|
2592
|
-
name="toolbar-selected-filters-example-select-checkbox-risk-active-input"
|
|
2593
|
-
/>
|
|
2594
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
2595
|
-
<span
|
|
2596
|
-
class="pf-v5-c-check__description"
|
|
2597
|
-
id="toolbar-selected-filters-example-select-checkbox-risk-active-description"
|
|
2598
|
-
>This is a description</span>
|
|
2599
|
-
</label>
|
|
2600
|
-
<label
|
|
2601
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
2602
|
-
id="toolbar-selected-filters-example-select-checkbox-risk-canceled"
|
|
2603
|
-
for="toolbar-selected-filters-example-select-checkbox-risk-canceled-input"
|
|
2604
|
-
>
|
|
2605
|
-
<input
|
|
2606
|
-
class="pf-v5-c-check__input"
|
|
2607
|
-
type="checkbox"
|
|
2608
|
-
aria-describedby="toolbar-selected-filters-example-select-checkbox-risk-canceled-description"
|
|
2609
|
-
id="toolbar-selected-filters-example-select-checkbox-risk-canceled-input"
|
|
2610
|
-
name="toolbar-selected-filters-example-select-checkbox-risk-canceled-input"
|
|
2611
|
-
/>
|
|
2612
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
2613
|
-
<span
|
|
2614
|
-
class="pf-v5-c-check__description"
|
|
2615
|
-
id="toolbar-selected-filters-example-select-checkbox-risk-canceled-description"
|
|
2616
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
2617
|
-
</label>
|
|
2618
|
-
<label
|
|
2619
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
2620
|
-
id="toolbar-selected-filters-example-select-checkbox-risk-paused"
|
|
2621
|
-
for="toolbar-selected-filters-example-select-checkbox-risk-paused-input"
|
|
2622
|
-
>
|
|
2623
|
-
<input
|
|
2624
|
-
class="pf-v5-c-check__input"
|
|
2625
|
-
type="checkbox"
|
|
2626
|
-
id="toolbar-selected-filters-example-select-checkbox-risk-paused-input"
|
|
2627
|
-
name="toolbar-selected-filters-example-select-checkbox-risk-paused-input"
|
|
2628
|
-
/>
|
|
2629
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
2630
|
-
</label>
|
|
2631
|
-
<label
|
|
2632
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
2633
|
-
id="toolbar-selected-filters-example-select-checkbox-risk-warning"
|
|
2634
|
-
for="toolbar-selected-filters-example-select-checkbox-risk-warning-input"
|
|
2635
|
-
>
|
|
2636
|
-
<input
|
|
2637
|
-
class="pf-v5-c-check__input"
|
|
2638
|
-
type="checkbox"
|
|
2639
|
-
id="toolbar-selected-filters-example-select-checkbox-risk-warning-input"
|
|
2640
|
-
name="toolbar-selected-filters-example-select-checkbox-risk-warning-input"
|
|
2641
|
-
/>
|
|
2642
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
2643
|
-
</label>
|
|
2644
|
-
<label
|
|
2645
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
2646
|
-
id="toolbar-selected-filters-example-select-checkbox-risk-restarted"
|
|
2647
|
-
for="toolbar-selected-filters-example-select-checkbox-risk-restarted-input"
|
|
2648
|
-
>
|
|
2649
|
-
<input
|
|
2650
|
-
class="pf-v5-c-check__input"
|
|
2651
|
-
type="checkbox"
|
|
2652
|
-
id="toolbar-selected-filters-example-select-checkbox-risk-restarted-input"
|
|
2653
|
-
name="toolbar-selected-filters-example-select-checkbox-risk-restarted-input"
|
|
2654
|
-
/>
|
|
2655
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
2656
|
-
</label>
|
|
2657
|
-
</fieldset>
|
|
2658
|
-
</div>
|
|
2659
|
-
</div>
|
|
1349
|
+
</span>
|
|
1350
|
+
</button>
|
|
2660
1351
|
</div>
|
|
2661
1352
|
</div>
|
|
2662
1353
|
</div>
|
|
@@ -2933,10 +1624,10 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
2933
1624
|
<div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-2xl">
|
|
2934
1625
|
<div class="pf-v5-c-toolbar__toggle">
|
|
2935
1626
|
<button
|
|
2936
|
-
class="pf-v5-c-
|
|
1627
|
+
class="pf-v5-c-menu-toggle pf-m-plain"
|
|
2937
1628
|
type="button"
|
|
2938
|
-
aria-label="Show filters"
|
|
2939
1629
|
aria-expanded="false"
|
|
1630
|
+
aria-label="Show filters"
|
|
2940
1631
|
aria-controls="toolbar-stacked-example-expandable-content"
|
|
2941
1632
|
>
|
|
2942
1633
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
@@ -2945,328 +1636,68 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
2945
1636
|
<div class="pf-v5-c-toolbar__group">
|
|
2946
1637
|
<div
|
|
2947
1638
|
class="pf-v5-c-toolbar__item pf-m-label"
|
|
2948
|
-
id="-
|
|
1639
|
+
id="toolbar-stacked-example-menu-toggle-resource-label"
|
|
2949
1640
|
aria-hidden="true"
|
|
2950
1641
|
>Resource</div>
|
|
1642
|
+
|
|
2951
1643
|
<div class="pf-v5-c-toolbar__item">
|
|
2952
|
-
<
|
|
2953
|
-
|
|
2954
|
-
|
|
2955
|
-
|
|
2956
|
-
|
|
2957
|
-
|
|
2958
|
-
|
|
2959
|
-
|
|
2960
|
-
|
|
2961
|
-
|
|
2962
|
-
<span class="pf-v5-c-select__toggle-text">Pod</span>
|
|
2963
|
-
</div>
|
|
2964
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
2965
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1644
|
+
<button
|
|
1645
|
+
class="pf-v5-c-menu-toggle"
|
|
1646
|
+
type="button"
|
|
1647
|
+
aria-expanded="false"
|
|
1648
|
+
id="toolbar-stacked-example-menu-toggle-resource"
|
|
1649
|
+
>
|
|
1650
|
+
<span class="pf-v5-c-menu-toggle__text">Pod</span>
|
|
1651
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
1652
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1653
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
2966
1654
|
</span>
|
|
2967
|
-
</
|
|
2968
|
-
|
|
2969
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
2970
|
-
<fieldset
|
|
2971
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
2972
|
-
aria-label="Select input"
|
|
2973
|
-
>
|
|
2974
|
-
<label
|
|
2975
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
2976
|
-
id="-select-checkbox-resource-active"
|
|
2977
|
-
for="-select-checkbox-resource-active-input"
|
|
2978
|
-
>
|
|
2979
|
-
<input
|
|
2980
|
-
class="pf-v5-c-check__input"
|
|
2981
|
-
type="checkbox"
|
|
2982
|
-
aria-describedby="-select-checkbox-resource-active-description"
|
|
2983
|
-
id="-select-checkbox-resource-active-input"
|
|
2984
|
-
name="-select-checkbox-resource-active-input"
|
|
2985
|
-
/>
|
|
2986
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
2987
|
-
<span
|
|
2988
|
-
class="pf-v5-c-check__description"
|
|
2989
|
-
id="-select-checkbox-resource-active-description"
|
|
2990
|
-
>This is a description</span>
|
|
2991
|
-
</label>
|
|
2992
|
-
<label
|
|
2993
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
2994
|
-
id="-select-checkbox-resource-canceled"
|
|
2995
|
-
for="-select-checkbox-resource-canceled-input"
|
|
2996
|
-
>
|
|
2997
|
-
<input
|
|
2998
|
-
class="pf-v5-c-check__input"
|
|
2999
|
-
type="checkbox"
|
|
3000
|
-
aria-describedby="-select-checkbox-resource-canceled-description"
|
|
3001
|
-
id="-select-checkbox-resource-canceled-input"
|
|
3002
|
-
name="-select-checkbox-resource-canceled-input"
|
|
3003
|
-
/>
|
|
3004
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
3005
|
-
<span
|
|
3006
|
-
class="pf-v5-c-check__description"
|
|
3007
|
-
id="-select-checkbox-resource-canceled-description"
|
|
3008
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
3009
|
-
</label>
|
|
3010
|
-
<label
|
|
3011
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3012
|
-
id="-select-checkbox-resource-paused"
|
|
3013
|
-
for="-select-checkbox-resource-paused-input"
|
|
3014
|
-
>
|
|
3015
|
-
<input
|
|
3016
|
-
class="pf-v5-c-check__input"
|
|
3017
|
-
type="checkbox"
|
|
3018
|
-
id="-select-checkbox-resource-paused-input"
|
|
3019
|
-
name="-select-checkbox-resource-paused-input"
|
|
3020
|
-
/>
|
|
3021
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
3022
|
-
</label>
|
|
3023
|
-
<label
|
|
3024
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3025
|
-
id="-select-checkbox-resource-warning"
|
|
3026
|
-
for="-select-checkbox-resource-warning-input"
|
|
3027
|
-
>
|
|
3028
|
-
<input
|
|
3029
|
-
class="pf-v5-c-check__input"
|
|
3030
|
-
type="checkbox"
|
|
3031
|
-
id="-select-checkbox-resource-warning-input"
|
|
3032
|
-
name="-select-checkbox-resource-warning-input"
|
|
3033
|
-
/>
|
|
3034
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
3035
|
-
</label>
|
|
3036
|
-
<label
|
|
3037
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3038
|
-
id="-select-checkbox-resource-restarted"
|
|
3039
|
-
for="-select-checkbox-resource-restarted-input"
|
|
3040
|
-
>
|
|
3041
|
-
<input
|
|
3042
|
-
class="pf-v5-c-check__input"
|
|
3043
|
-
type="checkbox"
|
|
3044
|
-
id="-select-checkbox-resource-restarted-input"
|
|
3045
|
-
name="-select-checkbox-resource-restarted-input"
|
|
3046
|
-
/>
|
|
3047
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
3048
|
-
</label>
|
|
3049
|
-
</fieldset>
|
|
3050
|
-
</div>
|
|
3051
|
-
</div>
|
|
1655
|
+
</span>
|
|
1656
|
+
</button>
|
|
3052
1657
|
</div>
|
|
3053
1658
|
</div>
|
|
3054
1659
|
<div class="pf-v5-c-toolbar__group">
|
|
3055
1660
|
<div
|
|
3056
1661
|
class="pf-v5-c-toolbar__item pf-m-label"
|
|
3057
|
-
id="-
|
|
1662
|
+
id="toolbar-stacked-example-menu-toggle-status-label"
|
|
3058
1663
|
aria-hidden="true"
|
|
3059
1664
|
>Status</div>
|
|
3060
1665
|
<div class="pf-v5-c-toolbar__item">
|
|
3061
|
-
<
|
|
3062
|
-
|
|
3063
|
-
|
|
3064
|
-
|
|
3065
|
-
|
|
3066
|
-
|
|
3067
|
-
|
|
3068
|
-
|
|
3069
|
-
|
|
3070
|
-
|
|
3071
|
-
<span class="pf-v5-c-select__toggle-text">Running</span>
|
|
3072
|
-
</div>
|
|
3073
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
3074
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1666
|
+
<button
|
|
1667
|
+
class="pf-v5-c-menu-toggle"
|
|
1668
|
+
type="button"
|
|
1669
|
+
aria-expanded="false"
|
|
1670
|
+
id="toolbar-stacked-example-menu-toggle-status"
|
|
1671
|
+
>
|
|
1672
|
+
<span class="pf-v5-c-menu-toggle__text">Running</span>
|
|
1673
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
1674
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1675
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
3075
1676
|
</span>
|
|
3076
|
-
</
|
|
3077
|
-
|
|
3078
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
3079
|
-
<fieldset
|
|
3080
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
3081
|
-
aria-label="Select input"
|
|
3082
|
-
>
|
|
3083
|
-
<label
|
|
3084
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
3085
|
-
id="-select-checkbox-status-active"
|
|
3086
|
-
for="-select-checkbox-status-active-input"
|
|
3087
|
-
>
|
|
3088
|
-
<input
|
|
3089
|
-
class="pf-v5-c-check__input"
|
|
3090
|
-
type="checkbox"
|
|
3091
|
-
aria-describedby="-select-checkbox-status-active-description"
|
|
3092
|
-
id="-select-checkbox-status-active-input"
|
|
3093
|
-
name="-select-checkbox-status-active-input"
|
|
3094
|
-
/>
|
|
3095
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
3096
|
-
<span
|
|
3097
|
-
class="pf-v5-c-check__description"
|
|
3098
|
-
id="-select-checkbox-status-active-description"
|
|
3099
|
-
>This is a description</span>
|
|
3100
|
-
</label>
|
|
3101
|
-
<label
|
|
3102
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
3103
|
-
id="-select-checkbox-status-canceled"
|
|
3104
|
-
for="-select-checkbox-status-canceled-input"
|
|
3105
|
-
>
|
|
3106
|
-
<input
|
|
3107
|
-
class="pf-v5-c-check__input"
|
|
3108
|
-
type="checkbox"
|
|
3109
|
-
aria-describedby="-select-checkbox-status-canceled-description"
|
|
3110
|
-
id="-select-checkbox-status-canceled-input"
|
|
3111
|
-
name="-select-checkbox-status-canceled-input"
|
|
3112
|
-
/>
|
|
3113
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
3114
|
-
<span
|
|
3115
|
-
class="pf-v5-c-check__description"
|
|
3116
|
-
id="-select-checkbox-status-canceled-description"
|
|
3117
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
3118
|
-
</label>
|
|
3119
|
-
<label
|
|
3120
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3121
|
-
id="-select-checkbox-status-paused"
|
|
3122
|
-
for="-select-checkbox-status-paused-input"
|
|
3123
|
-
>
|
|
3124
|
-
<input
|
|
3125
|
-
class="pf-v5-c-check__input"
|
|
3126
|
-
type="checkbox"
|
|
3127
|
-
id="-select-checkbox-status-paused-input"
|
|
3128
|
-
name="-select-checkbox-status-paused-input"
|
|
3129
|
-
/>
|
|
3130
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
3131
|
-
</label>
|
|
3132
|
-
<label
|
|
3133
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3134
|
-
id="-select-checkbox-status-warning"
|
|
3135
|
-
for="-select-checkbox-status-warning-input"
|
|
3136
|
-
>
|
|
3137
|
-
<input
|
|
3138
|
-
class="pf-v5-c-check__input"
|
|
3139
|
-
type="checkbox"
|
|
3140
|
-
id="-select-checkbox-status-warning-input"
|
|
3141
|
-
name="-select-checkbox-status-warning-input"
|
|
3142
|
-
/>
|
|
3143
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
3144
|
-
</label>
|
|
3145
|
-
<label
|
|
3146
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3147
|
-
id="-select-checkbox-status-restarted"
|
|
3148
|
-
for="-select-checkbox-status-restarted-input"
|
|
3149
|
-
>
|
|
3150
|
-
<input
|
|
3151
|
-
class="pf-v5-c-check__input"
|
|
3152
|
-
type="checkbox"
|
|
3153
|
-
id="-select-checkbox-status-restarted-input"
|
|
3154
|
-
name="-select-checkbox-status-restarted-input"
|
|
3155
|
-
/>
|
|
3156
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
3157
|
-
</label>
|
|
3158
|
-
</fieldset>
|
|
3159
|
-
</div>
|
|
3160
|
-
</div>
|
|
1677
|
+
</span>
|
|
1678
|
+
</button>
|
|
3161
1679
|
</div>
|
|
3162
1680
|
</div>
|
|
3163
1681
|
<div class="pf-v5-c-toolbar__group">
|
|
3164
1682
|
<div
|
|
3165
1683
|
class="pf-v5-c-toolbar__item pf-m-label"
|
|
3166
|
-
id="-
|
|
1684
|
+
id="toolbar-stacked-example-menu-toggle-type-label"
|
|
3167
1685
|
aria-hidden="true"
|
|
3168
1686
|
>Type</div>
|
|
3169
1687
|
<div class="pf-v5-c-toolbar__item">
|
|
3170
|
-
<
|
|
3171
|
-
|
|
3172
|
-
|
|
3173
|
-
|
|
3174
|
-
|
|
3175
|
-
|
|
3176
|
-
|
|
3177
|
-
|
|
3178
|
-
|
|
3179
|
-
|
|
3180
|
-
<span class="pf-v5-c-select__toggle-text">Any</span>
|
|
3181
|
-
</div>
|
|
3182
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
3183
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1688
|
+
<button
|
|
1689
|
+
class="pf-v5-c-menu-toggle"
|
|
1690
|
+
type="button"
|
|
1691
|
+
aria-expanded="false"
|
|
1692
|
+
id="toolbar-stacked-example-menu-toggle-type"
|
|
1693
|
+
>
|
|
1694
|
+
<span class="pf-v5-c-menu-toggle__text">Any</span>
|
|
1695
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
1696
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1697
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
3184
1698
|
</span>
|
|
3185
|
-
</
|
|
3186
|
-
|
|
3187
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
3188
|
-
<fieldset
|
|
3189
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
3190
|
-
aria-label="Select input"
|
|
3191
|
-
>
|
|
3192
|
-
<label
|
|
3193
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
3194
|
-
id="-select-checkbox-type-active"
|
|
3195
|
-
for="-select-checkbox-type-active-input"
|
|
3196
|
-
>
|
|
3197
|
-
<input
|
|
3198
|
-
class="pf-v5-c-check__input"
|
|
3199
|
-
type="checkbox"
|
|
3200
|
-
aria-describedby="-select-checkbox-type-active-description"
|
|
3201
|
-
id="-select-checkbox-type-active-input"
|
|
3202
|
-
name="-select-checkbox-type-active-input"
|
|
3203
|
-
/>
|
|
3204
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
3205
|
-
<span
|
|
3206
|
-
class="pf-v5-c-check__description"
|
|
3207
|
-
id="-select-checkbox-type-active-description"
|
|
3208
|
-
>This is a description</span>
|
|
3209
|
-
</label>
|
|
3210
|
-
<label
|
|
3211
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
3212
|
-
id="-select-checkbox-type-canceled"
|
|
3213
|
-
for="-select-checkbox-type-canceled-input"
|
|
3214
|
-
>
|
|
3215
|
-
<input
|
|
3216
|
-
class="pf-v5-c-check__input"
|
|
3217
|
-
type="checkbox"
|
|
3218
|
-
aria-describedby="-select-checkbox-type-canceled-description"
|
|
3219
|
-
id="-select-checkbox-type-canceled-input"
|
|
3220
|
-
name="-select-checkbox-type-canceled-input"
|
|
3221
|
-
/>
|
|
3222
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
3223
|
-
<span
|
|
3224
|
-
class="pf-v5-c-check__description"
|
|
3225
|
-
id="-select-checkbox-type-canceled-description"
|
|
3226
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
3227
|
-
</label>
|
|
3228
|
-
<label
|
|
3229
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3230
|
-
id="-select-checkbox-type-paused"
|
|
3231
|
-
for="-select-checkbox-type-paused-input"
|
|
3232
|
-
>
|
|
3233
|
-
<input
|
|
3234
|
-
class="pf-v5-c-check__input"
|
|
3235
|
-
type="checkbox"
|
|
3236
|
-
id="-select-checkbox-type-paused-input"
|
|
3237
|
-
name="-select-checkbox-type-paused-input"
|
|
3238
|
-
/>
|
|
3239
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
3240
|
-
</label>
|
|
3241
|
-
<label
|
|
3242
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3243
|
-
id="-select-checkbox-type-warning"
|
|
3244
|
-
for="-select-checkbox-type-warning-input"
|
|
3245
|
-
>
|
|
3246
|
-
<input
|
|
3247
|
-
class="pf-v5-c-check__input"
|
|
3248
|
-
type="checkbox"
|
|
3249
|
-
id="-select-checkbox-type-warning-input"
|
|
3250
|
-
name="-select-checkbox-type-warning-input"
|
|
3251
|
-
/>
|
|
3252
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
3253
|
-
</label>
|
|
3254
|
-
<label
|
|
3255
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3256
|
-
id="-select-checkbox-type-restarted"
|
|
3257
|
-
for="-select-checkbox-type-restarted-input"
|
|
3258
|
-
>
|
|
3259
|
-
<input
|
|
3260
|
-
class="pf-v5-c-check__input"
|
|
3261
|
-
type="checkbox"
|
|
3262
|
-
id="-select-checkbox-type-restarted-input"
|
|
3263
|
-
name="-select-checkbox-type-restarted-input"
|
|
3264
|
-
/>
|
|
3265
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
3266
|
-
</label>
|
|
3267
|
-
</fieldset>
|
|
3268
|
-
</div>
|
|
3269
|
-
</div>
|
|
1699
|
+
</span>
|
|
1700
|
+
</button>
|
|
3270
1701
|
</div>
|
|
3271
1702
|
</div>
|
|
3272
1703
|
</div>
|
|
@@ -3370,55 +1801,36 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
3370
1801
|
<div class="pf-v5-c-toolbar__content">
|
|
3371
1802
|
<div class="pf-v5-c-toolbar__content-section">
|
|
3372
1803
|
<div class="pf-v5-c-toolbar__item pf-m-bulk-select">
|
|
3373
|
-
<div
|
|
3374
|
-
|
|
3375
|
-
|
|
3376
|
-
|
|
3377
|
-
|
|
3378
|
-
|
|
3379
|
-
|
|
3380
|
-
|
|
3381
|
-
|
|
3382
|
-
|
|
3383
|
-
|
|
3384
|
-
|
|
3385
|
-
|
|
3386
|
-
|
|
3387
|
-
|
|
3388
|
-
|
|
3389
|
-
|
|
3390
|
-
|
|
3391
|
-
|
|
3392
|
-
|
|
3393
|
-
|
|
3394
|
-
|
|
3395
|
-
|
|
3396
|
-
|
|
3397
|
-
|
|
3398
|
-
|
|
3399
|
-
|
|
3400
|
-
|
|
3401
|
-
|
|
3402
|
-
|
|
3403
|
-
role="menuitem"
|
|
3404
|
-
type="button"
|
|
3405
|
-
>Select all</button>
|
|
3406
|
-
</li>
|
|
3407
|
-
<li role="none">
|
|
3408
|
-
<button
|
|
3409
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
3410
|
-
role="menuitem"
|
|
3411
|
-
type="button"
|
|
3412
|
-
>Select none</button>
|
|
3413
|
-
</li>
|
|
3414
|
-
<li role="none">
|
|
3415
|
-
<button
|
|
3416
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
3417
|
-
role="menuitem"
|
|
3418
|
-
type="button"
|
|
3419
|
-
>Other action</button>
|
|
3420
|
-
</li>
|
|
3421
|
-
</ul>
|
|
1804
|
+
<div
|
|
1805
|
+
class="pf-v5-c-menu-toggle pf-m-split-button"
|
|
1806
|
+
id="toolbar-stacked-example-check"
|
|
1807
|
+
>
|
|
1808
|
+
<label
|
|
1809
|
+
class="pf-v5-c-check pf-m-standalone"
|
|
1810
|
+
id="toolbar-stacked-example-check-check"
|
|
1811
|
+
for="toolbar-stacked-example-check-check-input"
|
|
1812
|
+
>
|
|
1813
|
+
<input
|
|
1814
|
+
class="pf-v5-c-check__input"
|
|
1815
|
+
type="checkbox"
|
|
1816
|
+
id="toolbar-stacked-example-check-check-input"
|
|
1817
|
+
name="toolbar-stacked-example-check-check-input"
|
|
1818
|
+
aria-label="Standalone check"
|
|
1819
|
+
/>
|
|
1820
|
+
</label>
|
|
1821
|
+
<button
|
|
1822
|
+
class="pf-v5-c-menu-toggle__button"
|
|
1823
|
+
type="button"
|
|
1824
|
+
aria-expanded="false"
|
|
1825
|
+
id="toolbar-stacked-example-menu-toggle-toggle-button"
|
|
1826
|
+
aria-label="Menu toggle"
|
|
1827
|
+
>
|
|
1828
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
1829
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1830
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1831
|
+
</span>
|
|
1832
|
+
</span>
|
|
1833
|
+
</button>
|
|
3422
1834
|
</div>
|
|
3423
1835
|
</div>
|
|
3424
1836
|
<div class="pf-v5-c-toolbar__item pf-m-pagination">
|
|
@@ -3546,12 +1958,12 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
3546
1958
|
<div class="pf-v5-c-toolbar__content">
|
|
3547
1959
|
<div class="pf-v5-c-toolbar__content-section">
|
|
3548
1960
|
<div class="pf-v5-c-toolbar__group pf-m-toggle-group">
|
|
3549
|
-
<div class="pf-v5-c-toolbar__toggle
|
|
1961
|
+
<div class="pf-v5-c-toolbar__toggle">
|
|
3550
1962
|
<button
|
|
3551
|
-
class="pf-v5-c-
|
|
1963
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
|
|
3552
1964
|
type="button"
|
|
3553
|
-
aria-label="Show filters"
|
|
3554
1965
|
aria-expanded="true"
|
|
1966
|
+
aria-label="Show filters"
|
|
3555
1967
|
aria-controls="toolbar-stacked-collapsed-example-expandable-content"
|
|
3556
1968
|
>
|
|
3557
1969
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
@@ -3611,325 +2023,68 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
3611
2023
|
<div class="pf-v5-c-toolbar__group">
|
|
3612
2024
|
<div
|
|
3613
2025
|
class="pf-v5-c-toolbar__item pf-m-label"
|
|
3614
|
-
id="toolbar-stacked-collapsed-example-
|
|
2026
|
+
id="toolbar-stacked-collapsed-example-menu-toggle-resource-label"
|
|
2027
|
+
aria-hidden="true"
|
|
3615
2028
|
>Resource</div>
|
|
2029
|
+
|
|
3616
2030
|
<div class="pf-v5-c-toolbar__item">
|
|
3617
|
-
<
|
|
3618
|
-
|
|
3619
|
-
|
|
3620
|
-
|
|
3621
|
-
|
|
3622
|
-
|
|
3623
|
-
|
|
3624
|
-
|
|
3625
|
-
|
|
3626
|
-
|
|
3627
|
-
<span class="pf-v5-c-select__toggle-text">Pod</span>
|
|
3628
|
-
</div>
|
|
3629
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
3630
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2031
|
+
<button
|
|
2032
|
+
class="pf-v5-c-menu-toggle"
|
|
2033
|
+
type="button"
|
|
2034
|
+
aria-expanded="false"
|
|
2035
|
+
id="toolbar-stacked-collapsed-example-menu-toggle-resource"
|
|
2036
|
+
>
|
|
2037
|
+
<span class="pf-v5-c-menu-toggle__text">Pod</span>
|
|
2038
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
2039
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
2040
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
3631
2041
|
</span>
|
|
3632
|
-
</
|
|
3633
|
-
|
|
3634
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
3635
|
-
<fieldset
|
|
3636
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
3637
|
-
aria-label="Select input"
|
|
3638
|
-
>
|
|
3639
|
-
<label
|
|
3640
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
3641
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-active"
|
|
3642
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-active-input"
|
|
3643
|
-
>
|
|
3644
|
-
<input
|
|
3645
|
-
class="pf-v5-c-check__input"
|
|
3646
|
-
type="checkbox"
|
|
3647
|
-
aria-describedby="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-active-description"
|
|
3648
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-active-input"
|
|
3649
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-active-input"
|
|
3650
|
-
/>
|
|
3651
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
3652
|
-
<span
|
|
3653
|
-
class="pf-v5-c-check__description"
|
|
3654
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-active-description"
|
|
3655
|
-
>This is a description</span>
|
|
3656
|
-
</label>
|
|
3657
|
-
<label
|
|
3658
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
3659
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-canceled"
|
|
3660
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-canceled-input"
|
|
3661
|
-
>
|
|
3662
|
-
<input
|
|
3663
|
-
class="pf-v5-c-check__input"
|
|
3664
|
-
type="checkbox"
|
|
3665
|
-
aria-describedby="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-canceled-description"
|
|
3666
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-canceled-input"
|
|
3667
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-canceled-input"
|
|
3668
|
-
/>
|
|
3669
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
3670
|
-
<span
|
|
3671
|
-
class="pf-v5-c-check__description"
|
|
3672
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-canceled-description"
|
|
3673
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
3674
|
-
</label>
|
|
3675
|
-
<label
|
|
3676
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3677
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-paused"
|
|
3678
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-paused-input"
|
|
3679
|
-
>
|
|
3680
|
-
<input
|
|
3681
|
-
class="pf-v5-c-check__input"
|
|
3682
|
-
type="checkbox"
|
|
3683
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-paused-input"
|
|
3684
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-paused-input"
|
|
3685
|
-
/>
|
|
3686
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
3687
|
-
</label>
|
|
3688
|
-
<label
|
|
3689
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3690
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-warning"
|
|
3691
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-warning-input"
|
|
3692
|
-
>
|
|
3693
|
-
<input
|
|
3694
|
-
class="pf-v5-c-check__input"
|
|
3695
|
-
type="checkbox"
|
|
3696
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-warning-input"
|
|
3697
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-warning-input"
|
|
3698
|
-
/>
|
|
3699
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
3700
|
-
</label>
|
|
3701
|
-
<label
|
|
3702
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3703
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-restarted"
|
|
3704
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-restarted-input"
|
|
3705
|
-
>
|
|
3706
|
-
<input
|
|
3707
|
-
class="pf-v5-c-check__input"
|
|
3708
|
-
type="checkbox"
|
|
3709
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-restarted-input"
|
|
3710
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-restarted-input"
|
|
3711
|
-
/>
|
|
3712
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
3713
|
-
</label>
|
|
3714
|
-
</fieldset>
|
|
3715
|
-
</div>
|
|
3716
|
-
</div>
|
|
2042
|
+
</span>
|
|
2043
|
+
</button>
|
|
3717
2044
|
</div>
|
|
3718
2045
|
</div>
|
|
3719
2046
|
<div class="pf-v5-c-toolbar__group">
|
|
3720
2047
|
<div
|
|
3721
2048
|
class="pf-v5-c-toolbar__item pf-m-label"
|
|
3722
|
-
id="
|
|
2049
|
+
id="-menu-toggle-status-label"
|
|
2050
|
+
aria-hidden="true"
|
|
3723
2051
|
>Status</div>
|
|
3724
2052
|
<div class="pf-v5-c-toolbar__item">
|
|
3725
|
-
<
|
|
3726
|
-
|
|
3727
|
-
|
|
3728
|
-
|
|
3729
|
-
|
|
3730
|
-
|
|
3731
|
-
|
|
3732
|
-
|
|
3733
|
-
|
|
3734
|
-
|
|
3735
|
-
<span class="pf-v5-c-select__toggle-text">Running</span>
|
|
3736
|
-
</div>
|
|
3737
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
3738
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2053
|
+
<button
|
|
2054
|
+
class="pf-v5-c-menu-toggle"
|
|
2055
|
+
type="button"
|
|
2056
|
+
aria-expanded="false"
|
|
2057
|
+
id="-menu-toggle-status"
|
|
2058
|
+
>
|
|
2059
|
+
<span class="pf-v5-c-menu-toggle__text">Running</span>
|
|
2060
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
2061
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
2062
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
3739
2063
|
</span>
|
|
3740
|
-
</
|
|
3741
|
-
|
|
3742
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
3743
|
-
<fieldset
|
|
3744
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
3745
|
-
aria-label="Select input"
|
|
3746
|
-
>
|
|
3747
|
-
<label
|
|
3748
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
3749
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-active"
|
|
3750
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-active-input"
|
|
3751
|
-
>
|
|
3752
|
-
<input
|
|
3753
|
-
class="pf-v5-c-check__input"
|
|
3754
|
-
type="checkbox"
|
|
3755
|
-
aria-describedby="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-active-description"
|
|
3756
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-active-input"
|
|
3757
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-active-input"
|
|
3758
|
-
/>
|
|
3759
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
3760
|
-
<span
|
|
3761
|
-
class="pf-v5-c-check__description"
|
|
3762
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-active-description"
|
|
3763
|
-
>This is a description</span>
|
|
3764
|
-
</label>
|
|
3765
|
-
<label
|
|
3766
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
3767
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-canceled"
|
|
3768
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-canceled-input"
|
|
3769
|
-
>
|
|
3770
|
-
<input
|
|
3771
|
-
class="pf-v5-c-check__input"
|
|
3772
|
-
type="checkbox"
|
|
3773
|
-
aria-describedby="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-canceled-description"
|
|
3774
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-canceled-input"
|
|
3775
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-canceled-input"
|
|
3776
|
-
/>
|
|
3777
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
3778
|
-
<span
|
|
3779
|
-
class="pf-v5-c-check__description"
|
|
3780
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-canceled-description"
|
|
3781
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
3782
|
-
</label>
|
|
3783
|
-
<label
|
|
3784
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3785
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-paused"
|
|
3786
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-paused-input"
|
|
3787
|
-
>
|
|
3788
|
-
<input
|
|
3789
|
-
class="pf-v5-c-check__input"
|
|
3790
|
-
type="checkbox"
|
|
3791
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-paused-input"
|
|
3792
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-paused-input"
|
|
3793
|
-
/>
|
|
3794
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
3795
|
-
</label>
|
|
3796
|
-
<label
|
|
3797
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3798
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-warning"
|
|
3799
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-warning-input"
|
|
3800
|
-
>
|
|
3801
|
-
<input
|
|
3802
|
-
class="pf-v5-c-check__input"
|
|
3803
|
-
type="checkbox"
|
|
3804
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-warning-input"
|
|
3805
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-warning-input"
|
|
3806
|
-
/>
|
|
3807
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
3808
|
-
</label>
|
|
3809
|
-
<label
|
|
3810
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3811
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-restarted"
|
|
3812
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-restarted-input"
|
|
3813
|
-
>
|
|
3814
|
-
<input
|
|
3815
|
-
class="pf-v5-c-check__input"
|
|
3816
|
-
type="checkbox"
|
|
3817
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-restarted-input"
|
|
3818
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-restarted-input"
|
|
3819
|
-
/>
|
|
3820
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
3821
|
-
</label>
|
|
3822
|
-
</fieldset>
|
|
3823
|
-
</div>
|
|
3824
|
-
</div>
|
|
2064
|
+
</span>
|
|
2065
|
+
</button>
|
|
3825
2066
|
</div>
|
|
3826
2067
|
</div>
|
|
3827
2068
|
<div class="pf-v5-c-toolbar__group">
|
|
3828
2069
|
<div
|
|
3829
2070
|
class="pf-v5-c-toolbar__item pf-m-label"
|
|
3830
|
-
id="
|
|
2071
|
+
id="-menu-toggle-type-label"
|
|
2072
|
+
aria-hidden="true"
|
|
3831
2073
|
>Type</div>
|
|
3832
2074
|
<div class="pf-v5-c-toolbar__item">
|
|
3833
|
-
<
|
|
3834
|
-
|
|
3835
|
-
|
|
3836
|
-
|
|
3837
|
-
|
|
3838
|
-
|
|
3839
|
-
|
|
3840
|
-
|
|
3841
|
-
|
|
3842
|
-
|
|
3843
|
-
<span class="pf-v5-c-select__toggle-text">Any</span>
|
|
3844
|
-
</div>
|
|
3845
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
3846
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2075
|
+
<button
|
|
2076
|
+
class="pf-v5-c-menu-toggle"
|
|
2077
|
+
type="button"
|
|
2078
|
+
aria-expanded="false"
|
|
2079
|
+
id="-menu-toggle-type"
|
|
2080
|
+
>
|
|
2081
|
+
<span class="pf-v5-c-menu-toggle__text">Any</span>
|
|
2082
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
2083
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
2084
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
3847
2085
|
</span>
|
|
3848
|
-
</
|
|
3849
|
-
|
|
3850
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
3851
|
-
<fieldset
|
|
3852
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
3853
|
-
aria-label="Select input"
|
|
3854
|
-
>
|
|
3855
|
-
<label
|
|
3856
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
3857
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-active"
|
|
3858
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-active-input"
|
|
3859
|
-
>
|
|
3860
|
-
<input
|
|
3861
|
-
class="pf-v5-c-check__input"
|
|
3862
|
-
type="checkbox"
|
|
3863
|
-
aria-describedby="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-active-description"
|
|
3864
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-active-input"
|
|
3865
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-active-input"
|
|
3866
|
-
/>
|
|
3867
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
3868
|
-
<span
|
|
3869
|
-
class="pf-v5-c-check__description"
|
|
3870
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-active-description"
|
|
3871
|
-
>This is a description</span>
|
|
3872
|
-
</label>
|
|
3873
|
-
<label
|
|
3874
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
3875
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-canceled"
|
|
3876
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-canceled-input"
|
|
3877
|
-
>
|
|
3878
|
-
<input
|
|
3879
|
-
class="pf-v5-c-check__input"
|
|
3880
|
-
type="checkbox"
|
|
3881
|
-
aria-describedby="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-canceled-description"
|
|
3882
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-canceled-input"
|
|
3883
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-canceled-input"
|
|
3884
|
-
/>
|
|
3885
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
3886
|
-
<span
|
|
3887
|
-
class="pf-v5-c-check__description"
|
|
3888
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-canceled-description"
|
|
3889
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
3890
|
-
</label>
|
|
3891
|
-
<label
|
|
3892
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3893
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-paused"
|
|
3894
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-paused-input"
|
|
3895
|
-
>
|
|
3896
|
-
<input
|
|
3897
|
-
class="pf-v5-c-check__input"
|
|
3898
|
-
type="checkbox"
|
|
3899
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-paused-input"
|
|
3900
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-paused-input"
|
|
3901
|
-
/>
|
|
3902
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
3903
|
-
</label>
|
|
3904
|
-
<label
|
|
3905
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3906
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-warning"
|
|
3907
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-warning-input"
|
|
3908
|
-
>
|
|
3909
|
-
<input
|
|
3910
|
-
class="pf-v5-c-check__input"
|
|
3911
|
-
type="checkbox"
|
|
3912
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-warning-input"
|
|
3913
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-warning-input"
|
|
3914
|
-
/>
|
|
3915
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
3916
|
-
</label>
|
|
3917
|
-
<label
|
|
3918
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3919
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-restarted"
|
|
3920
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-restarted-input"
|
|
3921
|
-
>
|
|
3922
|
-
<input
|
|
3923
|
-
class="pf-v5-c-check__input"
|
|
3924
|
-
type="checkbox"
|
|
3925
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-restarted-input"
|
|
3926
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-restarted-input"
|
|
3927
|
-
/>
|
|
3928
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
3929
|
-
</label>
|
|
3930
|
-
</fieldset>
|
|
3931
|
-
</div>
|
|
3932
|
-
</div>
|
|
2086
|
+
</span>
|
|
2087
|
+
</button>
|
|
3933
2088
|
</div>
|
|
3934
2089
|
</div>
|
|
3935
2090
|
</div>
|
|
@@ -3939,55 +2094,36 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
3939
2094
|
<div class="pf-v5-c-toolbar__content">
|
|
3940
2095
|
<div class="pf-v5-c-toolbar__content-section">
|
|
3941
2096
|
<div class="pf-v5-c-toolbar__item pf-m-bulk-select">
|
|
3942
|
-
<div
|
|
3943
|
-
|
|
3944
|
-
|
|
3945
|
-
|
|
3946
|
-
|
|
3947
|
-
|
|
3948
|
-
|
|
3949
|
-
|
|
3950
|
-
|
|
3951
|
-
|
|
3952
|
-
|
|
3953
|
-
|
|
3954
|
-
|
|
3955
|
-
|
|
3956
|
-
|
|
3957
|
-
|
|
3958
|
-
|
|
3959
|
-
|
|
3960
|
-
|
|
3961
|
-
|
|
3962
|
-
|
|
3963
|
-
|
|
3964
|
-
|
|
3965
|
-
|
|
3966
|
-
|
|
3967
|
-
|
|
3968
|
-
|
|
3969
|
-
|
|
3970
|
-
|
|
3971
|
-
|
|
3972
|
-
role="menuitem"
|
|
3973
|
-
type="button"
|
|
3974
|
-
>Select all</button>
|
|
3975
|
-
</li>
|
|
3976
|
-
<li role="none">
|
|
3977
|
-
<button
|
|
3978
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
3979
|
-
role="menuitem"
|
|
3980
|
-
type="button"
|
|
3981
|
-
>Select none</button>
|
|
3982
|
-
</li>
|
|
3983
|
-
<li role="none">
|
|
3984
|
-
<button
|
|
3985
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
3986
|
-
role="menuitem"
|
|
3987
|
-
type="button"
|
|
3988
|
-
>Other action</button>
|
|
3989
|
-
</li>
|
|
3990
|
-
</ul>
|
|
2097
|
+
<div
|
|
2098
|
+
class="pf-v5-c-menu-toggle pf-m-split-button"
|
|
2099
|
+
id="toolbar-stacked-collapsed-example-check"
|
|
2100
|
+
>
|
|
2101
|
+
<label
|
|
2102
|
+
class="pf-v5-c-check pf-m-standalone"
|
|
2103
|
+
id="toolbar-stacked-collapsed-example-check-check"
|
|
2104
|
+
for="toolbar-stacked-collapsed-example-check-check-input"
|
|
2105
|
+
>
|
|
2106
|
+
<input
|
|
2107
|
+
class="pf-v5-c-check__input"
|
|
2108
|
+
type="checkbox"
|
|
2109
|
+
id="toolbar-stacked-collapsed-example-check-check-input"
|
|
2110
|
+
name="toolbar-stacked-collapsed-example-check-check-input"
|
|
2111
|
+
aria-label="Standalone check"
|
|
2112
|
+
/>
|
|
2113
|
+
</label>
|
|
2114
|
+
<button
|
|
2115
|
+
class="pf-v5-c-menu-toggle__button"
|
|
2116
|
+
type="button"
|
|
2117
|
+
aria-expanded="false"
|
|
2118
|
+
id="toolbar-stacked-collapsed-example-menu-toggle-toggle-button"
|
|
2119
|
+
aria-label="Menu toggle"
|
|
2120
|
+
>
|
|
2121
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
2122
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
2123
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
2124
|
+
</span>
|
|
2125
|
+
</span>
|
|
2126
|
+
</button>
|
|
3991
2127
|
</div>
|
|
3992
2128
|
</div>
|
|
3993
2129
|
<div class="pf-v5-c-toolbar__item pf-m-pagination">
|
|
@@ -4108,471 +2244,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
4108
2244
|
|
|
4109
2245
|
```
|
|
4110
2246
|
|
|
4111
|
-
### Expanded elements
|
|
4112
|
-
|
|
4113
|
-
```html
|
|
4114
|
-
<div class="pf-v5-c-toolbar" id="toolbar-expanded-elements-example">
|
|
4115
|
-
<div class="pf-v5-c-toolbar__content">
|
|
4116
|
-
<div class="pf-v5-c-toolbar__content-section">
|
|
4117
|
-
<div class="pf-v5-c-toolbar__item pf-m-bulk-select">
|
|
4118
|
-
<div class="pf-v5-c-dropdown">
|
|
4119
|
-
<div class="pf-v5-c-dropdown__toggle pf-m-split-button">
|
|
4120
|
-
<label
|
|
4121
|
-
class="pf-v5-c-dropdown__toggle-check"
|
|
4122
|
-
for="toolbar-expanded-elements-example-bulk-select-toggle-check"
|
|
4123
|
-
>
|
|
4124
|
-
<div class="pf-v5-c-check pf-m-standalone">
|
|
4125
|
-
<input
|
|
4126
|
-
class="pf-v5-c-check__input"
|
|
4127
|
-
type="checkbox"
|
|
4128
|
-
id="toolbar-expanded-elements-example-bulk-select-toggle-check"
|
|
4129
|
-
aria-label="Select all"
|
|
4130
|
-
/>
|
|
4131
|
-
</div>
|
|
4132
|
-
</label>
|
|
4133
|
-
|
|
4134
|
-
<button
|
|
4135
|
-
class="pf-v5-c-dropdown__toggle-button"
|
|
4136
|
-
type="button"
|
|
4137
|
-
aria-expanded="false"
|
|
4138
|
-
id="toolbar-expanded-elements-example-bulk-select-toggle-button"
|
|
4139
|
-
aria-label="Dropdown toggle"
|
|
4140
|
-
>
|
|
4141
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
4142
|
-
</button>
|
|
4143
|
-
</div>
|
|
4144
|
-
<ul class="pf-v5-c-dropdown__menu" hidden role="menu">
|
|
4145
|
-
<li role="none">
|
|
4146
|
-
<button
|
|
4147
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
4148
|
-
role="menuitem"
|
|
4149
|
-
type="button"
|
|
4150
|
-
>Select all</button>
|
|
4151
|
-
</li>
|
|
4152
|
-
<li role="none">
|
|
4153
|
-
<button
|
|
4154
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
4155
|
-
role="menuitem"
|
|
4156
|
-
type="button"
|
|
4157
|
-
>Select none</button>
|
|
4158
|
-
</li>
|
|
4159
|
-
<li role="none">
|
|
4160
|
-
<button
|
|
4161
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
4162
|
-
role="menuitem"
|
|
4163
|
-
type="button"
|
|
4164
|
-
>Other action</button>
|
|
4165
|
-
</li>
|
|
4166
|
-
</ul>
|
|
4167
|
-
</div>
|
|
4168
|
-
</div>
|
|
4169
|
-
<div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl">
|
|
4170
|
-
<div class="pf-v5-c-toolbar__toggle">
|
|
4171
|
-
<button
|
|
4172
|
-
class="pf-v5-c-button pf-m-plain"
|
|
4173
|
-
type="button"
|
|
4174
|
-
aria-label="Show filters"
|
|
4175
|
-
aria-expanded="false"
|
|
4176
|
-
aria-controls="toolbar-expanded-elements-example-expandable-content"
|
|
4177
|
-
>
|
|
4178
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
4179
|
-
</button>
|
|
4180
|
-
</div>
|
|
4181
|
-
<div class="pf-v5-c-toolbar__item pf-m-search-filter">
|
|
4182
|
-
<div
|
|
4183
|
-
class="pf-v5-c-input-group"
|
|
4184
|
-
aria-label="search filter"
|
|
4185
|
-
role="group"
|
|
4186
|
-
>
|
|
4187
|
-
<div class="pf-v5-c-input-group__item">
|
|
4188
|
-
<div class="pf-v5-c-select" style="width: 124px">
|
|
4189
|
-
<span
|
|
4190
|
-
id="toolbar-expanded-elements-example-select-name-label"
|
|
4191
|
-
hidden
|
|
4192
|
-
>Choose one</span>
|
|
4193
|
-
|
|
4194
|
-
<button
|
|
4195
|
-
class="pf-v5-c-select__toggle"
|
|
4196
|
-
type="button"
|
|
4197
|
-
id="toolbar-expanded-elements-example-select-name-toggle"
|
|
4198
|
-
aria-haspopup="true"
|
|
4199
|
-
aria-expanded="false"
|
|
4200
|
-
aria-labelledby="toolbar-expanded-elements-example-select-name-label toolbar-expanded-elements-example-select-name-toggle"
|
|
4201
|
-
>
|
|
4202
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
4203
|
-
<span class="pf-v5-c-select__toggle-icon">
|
|
4204
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
4205
|
-
</span>
|
|
4206
|
-
<span class="pf-v5-c-select__toggle-text">Name</span>
|
|
4207
|
-
</div>
|
|
4208
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
4209
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
4210
|
-
</span>
|
|
4211
|
-
</button>
|
|
4212
|
-
|
|
4213
|
-
<ul
|
|
4214
|
-
class="pf-v5-c-select__menu"
|
|
4215
|
-
role="listbox"
|
|
4216
|
-
aria-labelledby="toolbar-expanded-elements-example-select-name-label"
|
|
4217
|
-
hidden
|
|
4218
|
-
>
|
|
4219
|
-
<li role="presentation">
|
|
4220
|
-
<button
|
|
4221
|
-
class="pf-v5-c-select__menu-item"
|
|
4222
|
-
role="option"
|
|
4223
|
-
>Running</button>
|
|
4224
|
-
</li>
|
|
4225
|
-
<li role="presentation">
|
|
4226
|
-
<button
|
|
4227
|
-
class="pf-v5-c-select__menu-item pf-m-selected"
|
|
4228
|
-
role="option"
|
|
4229
|
-
aria-selected="true"
|
|
4230
|
-
>
|
|
4231
|
-
Stopped
|
|
4232
|
-
<span class="pf-v5-c-select__menu-item-icon">
|
|
4233
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
4234
|
-
</span>
|
|
4235
|
-
</button>
|
|
4236
|
-
</li>
|
|
4237
|
-
<li role="presentation">
|
|
4238
|
-
<button class="pf-v5-c-select__menu-item" role="option">Down</button>
|
|
4239
|
-
</li>
|
|
4240
|
-
<li role="presentation">
|
|
4241
|
-
<button
|
|
4242
|
-
class="pf-v5-c-select__menu-item"
|
|
4243
|
-
role="option"
|
|
4244
|
-
>Degraded</button>
|
|
4245
|
-
</li>
|
|
4246
|
-
<li role="presentation">
|
|
4247
|
-
<button
|
|
4248
|
-
class="pf-v5-c-select__menu-item"
|
|
4249
|
-
role="option"
|
|
4250
|
-
>Needs maintenance</button>
|
|
4251
|
-
</li>
|
|
4252
|
-
</ul>
|
|
4253
|
-
</div>
|
|
4254
|
-
</div>
|
|
4255
|
-
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
4256
|
-
<div class="pf-v5-c-text-input-group">
|
|
4257
|
-
<div class="pf-v5-c-text-input-group__main pf-m-icon">
|
|
4258
|
-
<span class="pf-v5-c-text-input-group__text">
|
|
4259
|
-
<span class="pf-v5-c-text-input-group__icon">
|
|
4260
|
-
<i class="fas fa-fw fa-search"></i>
|
|
4261
|
-
</span>
|
|
4262
|
-
<input
|
|
4263
|
-
class="pf-v5-c-text-input-group__text-input"
|
|
4264
|
-
type="text"
|
|
4265
|
-
placeholder="Filter by name"
|
|
4266
|
-
value
|
|
4267
|
-
aria-label="Search input"
|
|
4268
|
-
/>
|
|
4269
|
-
</span>
|
|
4270
|
-
</div>
|
|
4271
|
-
</div>
|
|
4272
|
-
</div>
|
|
4273
|
-
</div>
|
|
4274
|
-
</div>
|
|
4275
|
-
<div class="pf-v5-c-toolbar__group pf-m-filter-group">
|
|
4276
|
-
<div class="pf-v5-c-toolbar__item">
|
|
4277
|
-
<div class="pf-v5-c-select pf-m-expanded">
|
|
4278
|
-
<span
|
|
4279
|
-
id="toolbar-expanded-elements-example-select-checkbox-status-label"
|
|
4280
|
-
hidden
|
|
4281
|
-
>Choose many</span>
|
|
4282
|
-
|
|
4283
|
-
<button
|
|
4284
|
-
class="pf-v5-c-select__toggle"
|
|
4285
|
-
type="button"
|
|
4286
|
-
id="toolbar-expanded-elements-example-select-checkbox-status-toggle"
|
|
4287
|
-
aria-haspopup="true"
|
|
4288
|
-
aria-expanded="true"
|
|
4289
|
-
aria-labelledby="toolbar-expanded-elements-example-select-checkbox-status-label toolbar-expanded-elements-example-select-checkbox-status-toggle"
|
|
4290
|
-
>
|
|
4291
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
4292
|
-
<span class="pf-v5-c-select__toggle-text">Status</span>
|
|
4293
|
-
</div>
|
|
4294
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
4295
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
4296
|
-
</span>
|
|
4297
|
-
</button>
|
|
4298
|
-
|
|
4299
|
-
<div class="pf-v5-c-select__menu">
|
|
4300
|
-
<fieldset
|
|
4301
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
4302
|
-
aria-label="Select input"
|
|
4303
|
-
>
|
|
4304
|
-
<label
|
|
4305
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
4306
|
-
id="toolbar-expanded-elements-example-select-checkbox-status-check-active"
|
|
4307
|
-
for="toolbar-expanded-elements-example-select-checkbox-status-check-active-input"
|
|
4308
|
-
>
|
|
4309
|
-
<input
|
|
4310
|
-
class="pf-v5-c-check__input"
|
|
4311
|
-
type="checkbox"
|
|
4312
|
-
id="toolbar-expanded-elements-example-select-checkbox-status-check-active-input"
|
|
4313
|
-
name="toolbar-expanded-elements-example-select-checkbox-status-check-active-input"
|
|
4314
|
-
checked
|
|
4315
|
-
/>
|
|
4316
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
4317
|
-
</label>
|
|
4318
|
-
<label
|
|
4319
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
4320
|
-
id="toolbar-expanded-elements-example-select-checkbox-status-check-canceled"
|
|
4321
|
-
for="toolbar-expanded-elements-example-select-checkbox-status-check-canceled-input"
|
|
4322
|
-
>
|
|
4323
|
-
<input
|
|
4324
|
-
class="pf-v5-c-check__input"
|
|
4325
|
-
type="checkbox"
|
|
4326
|
-
id="toolbar-expanded-elements-example-select-checkbox-status-check-canceled-input"
|
|
4327
|
-
name="toolbar-expanded-elements-example-select-checkbox-status-check-canceled-input"
|
|
4328
|
-
checked
|
|
4329
|
-
/>
|
|
4330
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
4331
|
-
</label>
|
|
4332
|
-
<label
|
|
4333
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
4334
|
-
id="toolbar-expanded-elements-example-select-checkbox-status-check-paused"
|
|
4335
|
-
for="toolbar-expanded-elements-example-select-checkbox-status-check-paused-input"
|
|
4336
|
-
>
|
|
4337
|
-
<input
|
|
4338
|
-
class="pf-v5-c-check__input"
|
|
4339
|
-
type="checkbox"
|
|
4340
|
-
id="toolbar-expanded-elements-example-select-checkbox-status-check-paused-input"
|
|
4341
|
-
name="toolbar-expanded-elements-example-select-checkbox-status-check-paused-input"
|
|
4342
|
-
/>
|
|
4343
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
4344
|
-
</label>
|
|
4345
|
-
<label
|
|
4346
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
4347
|
-
id="toolbar-expanded-elements-example-select-checkbox-status-check-warning"
|
|
4348
|
-
for="toolbar-expanded-elements-example-select-checkbox-status-check-warning-input"
|
|
4349
|
-
>
|
|
4350
|
-
<input
|
|
4351
|
-
class="pf-v5-c-check__input"
|
|
4352
|
-
type="checkbox"
|
|
4353
|
-
id="toolbar-expanded-elements-example-select-checkbox-status-check-warning-input"
|
|
4354
|
-
name="toolbar-expanded-elements-example-select-checkbox-status-check-warning-input"
|
|
4355
|
-
checked
|
|
4356
|
-
/>
|
|
4357
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
4358
|
-
</label>
|
|
4359
|
-
<label
|
|
4360
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
4361
|
-
id="toolbar-expanded-elements-example-select-checkbox-status-check-restarted"
|
|
4362
|
-
for="toolbar-expanded-elements-example-select-checkbox-status-check-restarted-input"
|
|
4363
|
-
>
|
|
4364
|
-
<input
|
|
4365
|
-
class="pf-v5-c-check__input"
|
|
4366
|
-
type="checkbox"
|
|
4367
|
-
id="toolbar-expanded-elements-example-select-checkbox-status-check-restarted-input"
|
|
4368
|
-
name="toolbar-expanded-elements-example-select-checkbox-status-check-restarted-input"
|
|
4369
|
-
/>
|
|
4370
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
4371
|
-
</label>
|
|
4372
|
-
</fieldset>
|
|
4373
|
-
</div>
|
|
4374
|
-
</div>
|
|
4375
|
-
</div>
|
|
4376
|
-
<div class="pf-v5-c-toolbar__item">
|
|
4377
|
-
<div class="pf-v5-c-select pf-m-expanded">
|
|
4378
|
-
<span
|
|
4379
|
-
id="toolbar-expanded-elements-example-select-checkbox-risk-label"
|
|
4380
|
-
hidden
|
|
4381
|
-
>Choose many</span>
|
|
4382
|
-
|
|
4383
|
-
<button
|
|
4384
|
-
class="pf-v5-c-select__toggle"
|
|
4385
|
-
type="button"
|
|
4386
|
-
id="toolbar-expanded-elements-example-select-checkbox-risk-toggle"
|
|
4387
|
-
aria-haspopup="true"
|
|
4388
|
-
aria-expanded="true"
|
|
4389
|
-
aria-labelledby="toolbar-expanded-elements-example-select-checkbox-risk-label toolbar-expanded-elements-example-select-checkbox-risk-toggle"
|
|
4390
|
-
>
|
|
4391
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
4392
|
-
<span class="pf-v5-c-select__toggle-text">Risk</span>
|
|
4393
|
-
</div>
|
|
4394
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
4395
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
4396
|
-
</span>
|
|
4397
|
-
</button>
|
|
4398
|
-
|
|
4399
|
-
<div class="pf-v5-c-select__menu">
|
|
4400
|
-
<fieldset
|
|
4401
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
4402
|
-
aria-label="Select input"
|
|
4403
|
-
>
|
|
4404
|
-
<label
|
|
4405
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
4406
|
-
id="toolbar-expanded-elements-example-select-checkbox-risk-check-active"
|
|
4407
|
-
for="toolbar-expanded-elements-example-select-checkbox-risk-check-active-input"
|
|
4408
|
-
>
|
|
4409
|
-
<input
|
|
4410
|
-
class="pf-v5-c-check__input"
|
|
4411
|
-
type="checkbox"
|
|
4412
|
-
id="toolbar-expanded-elements-example-select-checkbox-risk-check-active-input"
|
|
4413
|
-
name="toolbar-expanded-elements-example-select-checkbox-risk-check-active-input"
|
|
4414
|
-
checked
|
|
4415
|
-
/>
|
|
4416
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
4417
|
-
</label>
|
|
4418
|
-
<label
|
|
4419
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
4420
|
-
id="toolbar-expanded-elements-example-select-checkbox-risk-check-canceled"
|
|
4421
|
-
for="toolbar-expanded-elements-example-select-checkbox-risk-check-canceled-input"
|
|
4422
|
-
>
|
|
4423
|
-
<input
|
|
4424
|
-
class="pf-v5-c-check__input"
|
|
4425
|
-
type="checkbox"
|
|
4426
|
-
id="toolbar-expanded-elements-example-select-checkbox-risk-check-canceled-input"
|
|
4427
|
-
name="toolbar-expanded-elements-example-select-checkbox-risk-check-canceled-input"
|
|
4428
|
-
checked
|
|
4429
|
-
/>
|
|
4430
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
4431
|
-
</label>
|
|
4432
|
-
<label
|
|
4433
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
4434
|
-
id="toolbar-expanded-elements-example-select-checkbox-risk-check-paused"
|
|
4435
|
-
for="toolbar-expanded-elements-example-select-checkbox-risk-check-paused-input"
|
|
4436
|
-
>
|
|
4437
|
-
<input
|
|
4438
|
-
class="pf-v5-c-check__input"
|
|
4439
|
-
type="checkbox"
|
|
4440
|
-
id="toolbar-expanded-elements-example-select-checkbox-risk-check-paused-input"
|
|
4441
|
-
name="toolbar-expanded-elements-example-select-checkbox-risk-check-paused-input"
|
|
4442
|
-
/>
|
|
4443
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
4444
|
-
</label>
|
|
4445
|
-
<label
|
|
4446
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
4447
|
-
id="toolbar-expanded-elements-example-select-checkbox-risk-check-warning"
|
|
4448
|
-
for="toolbar-expanded-elements-example-select-checkbox-risk-check-warning-input"
|
|
4449
|
-
>
|
|
4450
|
-
<input
|
|
4451
|
-
class="pf-v5-c-check__input"
|
|
4452
|
-
type="checkbox"
|
|
4453
|
-
id="toolbar-expanded-elements-example-select-checkbox-risk-check-warning-input"
|
|
4454
|
-
name="toolbar-expanded-elements-example-select-checkbox-risk-check-warning-input"
|
|
4455
|
-
checked
|
|
4456
|
-
/>
|
|
4457
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
4458
|
-
</label>
|
|
4459
|
-
<label
|
|
4460
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
4461
|
-
id="toolbar-expanded-elements-example-select-checkbox-risk-check-restarted"
|
|
4462
|
-
for="toolbar-expanded-elements-example-select-checkbox-risk-check-restarted-input"
|
|
4463
|
-
>
|
|
4464
|
-
<input
|
|
4465
|
-
class="pf-v5-c-check__input"
|
|
4466
|
-
type="checkbox"
|
|
4467
|
-
id="toolbar-expanded-elements-example-select-checkbox-risk-check-restarted-input"
|
|
4468
|
-
name="toolbar-expanded-elements-example-select-checkbox-risk-check-restarted-input"
|
|
4469
|
-
/>
|
|
4470
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
4471
|
-
</label>
|
|
4472
|
-
</fieldset>
|
|
4473
|
-
</div>
|
|
4474
|
-
</div>
|
|
4475
|
-
</div>
|
|
4476
|
-
</div>
|
|
4477
|
-
</div>
|
|
4478
|
-
<div class="pf-v5-c-toolbar__item pf-m-overflow-menu">
|
|
4479
|
-
<div
|
|
4480
|
-
class="pf-v5-c-overflow-menu"
|
|
4481
|
-
id="toolbar-expanded-elements-example-icon-button-overflow-menu"
|
|
4482
|
-
>
|
|
4483
|
-
<div class="pf-v5-c-overflow-menu__content">
|
|
4484
|
-
<div class="pf-v5-c-overflow-menu__group pf-m-icon-button-group">
|
|
4485
|
-
<div class="pf-v5-c-overflow-menu__item">
|
|
4486
|
-
<button
|
|
4487
|
-
class="pf-v5-c-button pf-m-plain"
|
|
4488
|
-
type="button"
|
|
4489
|
-
aria-label="Edit"
|
|
4490
|
-
>
|
|
4491
|
-
<i class="fas fa-edit" aria-hidden="true"></i>
|
|
4492
|
-
</button>
|
|
4493
|
-
</div>
|
|
4494
|
-
<div class="pf-v5-c-overflow-menu__item">
|
|
4495
|
-
<button
|
|
4496
|
-
class="pf-v5-c-button pf-m-plain"
|
|
4497
|
-
type="button"
|
|
4498
|
-
aria-label="Clone"
|
|
4499
|
-
>
|
|
4500
|
-
<i class="fas fa-clone" aria-hidden="true"></i>
|
|
4501
|
-
</button>
|
|
4502
|
-
</div>
|
|
4503
|
-
<div class="pf-v5-c-overflow-menu__item">
|
|
4504
|
-
<button
|
|
4505
|
-
class="pf-v5-c-button pf-m-plain"
|
|
4506
|
-
type="button"
|
|
4507
|
-
aria-label="Sync"
|
|
4508
|
-
>
|
|
4509
|
-
<i class="fas fa-sync" aria-hidden="true"></i>
|
|
4510
|
-
</button>
|
|
4511
|
-
</div>
|
|
4512
|
-
</div>
|
|
4513
|
-
</div>
|
|
4514
|
-
</div>
|
|
4515
|
-
</div>
|
|
4516
|
-
<div class="pf-v5-c-toolbar__item pf-m-overflow-menu">
|
|
4517
|
-
<div
|
|
4518
|
-
class="pf-v5-c-overflow-menu"
|
|
4519
|
-
id="toolbar-expanded-elements-example-overflow-menu"
|
|
4520
|
-
>
|
|
4521
|
-
<div class="pf-v5-c-overflow-menu__content">
|
|
4522
|
-
<div class="pf-v5-c-overflow-menu__group pf-m-button-group">
|
|
4523
|
-
<div class="pf-v5-c-overflow-menu__item">
|
|
4524
|
-
<button
|
|
4525
|
-
class="pf-v5-c-button pf-m-primary"
|
|
4526
|
-
type="button"
|
|
4527
|
-
>Primary</button>
|
|
4528
|
-
</div>
|
|
4529
|
-
<div class="pf-v5-c-overflow-menu__item">
|
|
4530
|
-
<button
|
|
4531
|
-
class="pf-v5-c-button pf-m-secondary"
|
|
4532
|
-
type="button"
|
|
4533
|
-
>Secondary</button>
|
|
4534
|
-
</div>
|
|
4535
|
-
</div>
|
|
4536
|
-
</div>
|
|
4537
|
-
|
|
4538
|
-
<div class="pf-v5-c-overflow-menu__control">
|
|
4539
|
-
<div class="pf-v5-c-dropdown pf-m-expanded">
|
|
4540
|
-
<button
|
|
4541
|
-
class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
|
|
4542
|
-
type="button"
|
|
4543
|
-
id="toolbar-expanded-elements-example-overflow-menu-dropdown-toggle"
|
|
4544
|
-
aria-label="Overflow menu"
|
|
4545
|
-
aria-expanded="true"
|
|
4546
|
-
>
|
|
4547
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
4548
|
-
</button>
|
|
4549
|
-
<ul
|
|
4550
|
-
class="pf-v5-c-dropdown__menu"
|
|
4551
|
-
role="menu"
|
|
4552
|
-
aria-labelledby="toolbar-expanded-elements-example-overflow-menu-dropdown-toggle"
|
|
4553
|
-
>
|
|
4554
|
-
<li role="none">
|
|
4555
|
-
<button
|
|
4556
|
-
role="menuitem"
|
|
4557
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
4558
|
-
>Tertiary</button>
|
|
4559
|
-
</li>
|
|
4560
|
-
</ul>
|
|
4561
|
-
</div>
|
|
4562
|
-
</div>
|
|
4563
|
-
</div>
|
|
4564
|
-
</div>
|
|
4565
|
-
</div>
|
|
4566
|
-
<div
|
|
4567
|
-
class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
|
|
4568
|
-
id="toolbar-expanded-elements-example-expandable-content"
|
|
4569
|
-
hidden
|
|
4570
|
-
></div>
|
|
4571
|
-
</div>
|
|
4572
|
-
</div>
|
|
4573
|
-
|
|
4574
|
-
```
|
|
4575
|
-
|
|
4576
2247
|
## Documentation
|
|
4577
2248
|
|
|
4578
2249
|
### Overview
|
|
@@ -4593,16 +2264,18 @@ As the toolbar component is a hybrid layout and component, some of its elements
|
|
|
4593
2264
|
| `.pf-m-full-height` | `.pf-v5-c-toolbar`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group` | Modifies toolbar component to full height of its container and removes vertical padding. |
|
|
4594
2265
|
| `.pf-m-static` | `.pf-v5-c-toolbar` | Modifies expandable content section to position itself to the nearest absolutely positioned parent outside of the toolbar component. This is used primarily for masthead toolbar. |
|
|
4595
2266
|
| `.pf-m-expanded` | `.pf-v5-c-toolbar__expandable-content` | Modifies expandable content section for the expanded state. |
|
|
4596
|
-
| `.pf-m-
|
|
4597
|
-
| `.pf-m-
|
|
4598
|
-
| `.pf-m-
|
|
4599
|
-
| `.pf-m-
|
|
4600
|
-
| `.pf-m-
|
|
4601
|
-
| `.pf-m-
|
|
2267
|
+
| `.pf-m-label` | `.pf-v5-c-toolbar__item` | Modifies label vertical positioning. |
|
|
2268
|
+
| `.pf-m-form-element` | `.pf-v5-c-toolbar__item` | Modifies form element vertical positioning. |
|
|
2269
|
+
| `.pf-m-bulk-select` | `.pf-v5-c-toolbar__item` | Modifies bulk select spacing. |
|
|
2270
|
+
| `.pf-m-overflow-menu` | `.pf-v5-c-toolbar__item` | Modifies overflow menu spacing. |
|
|
2271
|
+
| `.pf-m-pagination` | `.pf-v5-c-toolbar__item` | Modifies pagination spacing and margin. |
|
|
2272
|
+
| `.pf-m-search-filter` | `.pf-v5-c-toolbar__item` | Modifies search filter spacing. |
|
|
2273
|
+
| `.pf-m-chip-group` | `.pf-v5-c-toolbar__item` | Modifies chip group spacing. |
|
|
2274
|
+
| `.pf-m-expand-all` | `.pf-v5-c-toolbar__item` | Modifies an item for an expand all button. |
|
|
4602
2275
|
| `.pf-m-expanded` | `.pf-v5-c-toolbar__item.pf-m-expand-all` | Modifies an expand all button for the expanded state. |
|
|
4603
|
-
| `.pf-m-button-group` | `.pf-v5-c-toolbar__group` |
|
|
4604
|
-
| `.pf-m-icon-button-group` | `.pf-v5-c-toolbar__group` |
|
|
4605
|
-
| `.pf-m-filter-group` | `.pf-v5-c-toolbar__group` |
|
|
2276
|
+
| `.pf-m-button-group` | `.pf-v5-c-toolbar__group` | Modifies button group spacing. |
|
|
2277
|
+
| `.pf-m-icon-button-group` | `.pf-v5-c-toolbar__group` | Modifies icon button group spacing. |
|
|
2278
|
+
| `.pf-m-filter-group` | `.pf-v5-c-toolbar__group` | Modifies filter group spacing. |
|
|
4606
2279
|
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v5-c-toolbar__content`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__item`, `.pf-v5-c-toolbar__group` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
4607
2280
|
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v5-c-toolbar__content`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__item`, `.pf-v5-c-toolbar__group` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
4608
2281
|
| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-v5-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
@@ -4622,7 +2295,7 @@ As the toolbar component is a hybrid layout and component, some of its elements
|
|
|
4622
2295
|
| Attribute | Applied to | Outcome |
|
|
4623
2296
|
| -- | -- | -- |
|
|
4624
2297
|
| `hidden` | `.pf-v5-c-toolbar__item`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__toggle`, `.pf-v5-c-toolbar__expandable-content` | Indicates that the toolbar element is hidden. **Required** |
|
|
4625
|
-
| `aria-expanded=
|
|
2298
|
+
| `aria-expanded=true` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates that the expandable content is visible. **Required** |
|
|
4626
2299
|
| `aria-expanded="false"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates the the expandable content is hidden. **Required** |
|
|
4627
2300
|
| `aria-controls="[id of expandable content]"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Identifies the expanded content controlled by the toggle button. **Required** |
|
|
4628
2301
|
| `id="[expandable-content_id]"` | `.pf-v5-c-toolbar__expandable-content` | Provides a reference for toggle button description. **Required** |
|