@patternfly/patternfly 6.0.0-alpha.16 → 6.0.0-alpha.18
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/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 +6 -4
- package/components/Page/page.scss +6 -4
- 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/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 +64 -36
- package/patternfly-theme-dark-unversioned.css +64 -36
- package/patternfly.css +64 -36
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -17,10 +17,10 @@ section: components
|
|
|
17
17
|
<div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show">
|
|
18
18
|
<div class="pf-v5-c-toolbar__toggle">
|
|
19
19
|
<button
|
|
20
|
-
class="pf-v5-c-
|
|
20
|
+
class="pf-v5-c-menu-toggle pf-m-plain"
|
|
21
21
|
type="button"
|
|
22
|
-
aria-label="Show filters"
|
|
23
22
|
aria-expanded="false"
|
|
23
|
+
aria-label="Show filters"
|
|
24
24
|
aria-controls="toolbar-attribute-value-search-filter-desktop-example-expandable-content"
|
|
25
25
|
>
|
|
26
26
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
@@ -33,72 +33,22 @@ section: components
|
|
|
33
33
|
role="group"
|
|
34
34
|
>
|
|
35
35
|
<div class="pf-v5-c-input-group__item">
|
|
36
|
-
<
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
<
|
|
43
|
-
class="
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
>
|
|
50
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
51
|
-
<span class="pf-v5-c-select__toggle-icon">
|
|
52
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
53
|
-
</span>
|
|
54
|
-
<span class="pf-v5-c-select__toggle-text">Name</span>
|
|
55
|
-
</div>
|
|
56
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
57
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
36
|
+
<button
|
|
37
|
+
class="pf-v5-c-menu-toggle"
|
|
38
|
+
type="button"
|
|
39
|
+
aria-expanded="false"
|
|
40
|
+
id="toolbar-attribute-value-search-filter-desktop-example-search-filter-menu"
|
|
41
|
+
>
|
|
42
|
+
<span class="pf-v5-c-menu-toggle__icon">
|
|
43
|
+
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
44
|
+
</span>
|
|
45
|
+
<span class="pf-v5-c-menu-toggle__text">Name</span>
|
|
46
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
47
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
48
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
58
49
|
</span>
|
|
59
|
-
</
|
|
60
|
-
|
|
61
|
-
<ul
|
|
62
|
-
class="pf-v5-c-select__menu"
|
|
63
|
-
role="listbox"
|
|
64
|
-
aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-select-name-label"
|
|
65
|
-
hidden
|
|
66
|
-
>
|
|
67
|
-
<li role="presentation">
|
|
68
|
-
<button
|
|
69
|
-
class="pf-v5-c-select__menu-item"
|
|
70
|
-
role="option"
|
|
71
|
-
>Running</button>
|
|
72
|
-
</li>
|
|
73
|
-
<li role="presentation">
|
|
74
|
-
<button
|
|
75
|
-
class="pf-v5-c-select__menu-item pf-m-selected"
|
|
76
|
-
role="option"
|
|
77
|
-
aria-selected="true"
|
|
78
|
-
>
|
|
79
|
-
Stopped
|
|
80
|
-
<span class="pf-v5-c-select__menu-item-icon">
|
|
81
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
82
|
-
</span>
|
|
83
|
-
</button>
|
|
84
|
-
</li>
|
|
85
|
-
<li role="presentation">
|
|
86
|
-
<button class="pf-v5-c-select__menu-item" role="option">Down</button>
|
|
87
|
-
</li>
|
|
88
|
-
<li role="presentation">
|
|
89
|
-
<button
|
|
90
|
-
class="pf-v5-c-select__menu-item"
|
|
91
|
-
role="option"
|
|
92
|
-
>Degraded</button>
|
|
93
|
-
</li>
|
|
94
|
-
<li role="presentation">
|
|
95
|
-
<button
|
|
96
|
-
class="pf-v5-c-select__menu-item"
|
|
97
|
-
role="option"
|
|
98
|
-
>Needs maintenance</button>
|
|
99
|
-
</li>
|
|
100
|
-
</ul>
|
|
101
|
-
</div>
|
|
50
|
+
</span>
|
|
51
|
+
</button>
|
|
102
52
|
</div>
|
|
103
53
|
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
104
54
|
<div class="pf-v5-c-text-input-group">
|
|
@@ -541,10 +491,10 @@ section: components
|
|
|
541
491
|
>
|
|
542
492
|
<div class="pf-v5-c-toolbar__toggle">
|
|
543
493
|
<button
|
|
544
|
-
class="pf-v5-c-
|
|
494
|
+
class="pf-v5-c-menu-toggle pf-m-plain"
|
|
545
495
|
type="button"
|
|
546
|
-
aria-label="Show filters"
|
|
547
496
|
aria-expanded="false"
|
|
497
|
+
aria-label="Show filters"
|
|
548
498
|
aria-controls="toolbar-with-validation-example-expandable-content"
|
|
549
499
|
>
|
|
550
500
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
@@ -557,153 +507,106 @@ section: components
|
|
|
557
507
|
aria-label="search filter"
|
|
558
508
|
role="group"
|
|
559
509
|
>
|
|
560
|
-
<div class="pf-v5-c-
|
|
561
|
-
<span
|
|
562
|
-
id="toolbar-with-validation-example-select-month-label"
|
|
563
|
-
hidden
|
|
564
|
-
>Choose one</span>
|
|
565
|
-
|
|
510
|
+
<div class="pf-v5-c-input-group__item">
|
|
566
511
|
<button
|
|
567
|
-
class="pf-v5-c-
|
|
512
|
+
class="pf-v5-c-menu-toggle"
|
|
568
513
|
type="button"
|
|
569
|
-
id="toolbar-with-validation-example-select-month-toggle"
|
|
570
|
-
aria-haspopup="true"
|
|
571
514
|
aria-expanded="false"
|
|
572
|
-
|
|
515
|
+
id="toolbar-with-validation-example-month"
|
|
573
516
|
>
|
|
574
|
-
<
|
|
575
|
-
<
|
|
576
|
-
|
|
517
|
+
<span class="pf-v5-c-menu-toggle__icon">
|
|
518
|
+
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
519
|
+
</span>
|
|
520
|
+
<span class="pf-v5-c-menu-toggle__text">Last month</span>
|
|
521
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
522
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
523
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
577
524
|
</span>
|
|
578
|
-
<span class="pf-v5-c-select__toggle-text">Last month</span>
|
|
579
|
-
</div>
|
|
580
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
581
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
582
525
|
</span>
|
|
583
526
|
</button>
|
|
584
|
-
|
|
585
|
-
<ul
|
|
586
|
-
class="pf-v5-c-select__menu"
|
|
587
|
-
role="listbox"
|
|
588
|
-
aria-labelledby="toolbar-with-validation-example-select-month-label"
|
|
589
|
-
hidden
|
|
590
|
-
>
|
|
591
|
-
<li role="presentation">
|
|
592
|
-
<button
|
|
593
|
-
class="pf-v5-c-select__menu-item"
|
|
594
|
-
role="option"
|
|
595
|
-
>Running</button>
|
|
596
|
-
</li>
|
|
597
|
-
<li role="presentation">
|
|
598
|
-
<button
|
|
599
|
-
class="pf-v5-c-select__menu-item pf-m-selected"
|
|
600
|
-
role="option"
|
|
601
|
-
aria-selected="true"
|
|
602
|
-
>
|
|
603
|
-
Stopped
|
|
604
|
-
<span class="pf-v5-c-select__menu-item-icon">
|
|
605
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
606
|
-
</span>
|
|
607
|
-
</button>
|
|
608
|
-
</li>
|
|
609
|
-
<li role="presentation">
|
|
610
|
-
<button
|
|
611
|
-
class="pf-v5-c-select__menu-item"
|
|
612
|
-
role="option"
|
|
613
|
-
>Down</button>
|
|
614
|
-
</li>
|
|
615
|
-
<li role="presentation">
|
|
616
|
-
<button
|
|
617
|
-
class="pf-v5-c-select__menu-item"
|
|
618
|
-
role="option"
|
|
619
|
-
>Degraded</button>
|
|
620
|
-
</li>
|
|
621
|
-
<li role="presentation">
|
|
622
|
-
<button
|
|
623
|
-
class="pf-v5-c-select__menu-item"
|
|
624
|
-
role="option"
|
|
625
|
-
>Needs maintenance</button>
|
|
626
|
-
</li>
|
|
627
|
-
</ul>
|
|
628
527
|
</div>
|
|
629
|
-
<div class="pf-v5-c-
|
|
630
|
-
<div class="pf-v5-c-date-
|
|
631
|
-
<div
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
<span class="pf-v5-c-form-control">
|
|
637
|
-
<input
|
|
638
|
-
type="text"
|
|
639
|
-
value="2020-03-05"
|
|
640
|
-
id="toolbar-with-validation-example-helper-text-input"
|
|
641
|
-
name="toolbar-with-validation-example-helper-text-input"
|
|
642
|
-
aria-label="Date picker"
|
|
643
|
-
/>
|
|
644
|
-
</span>
|
|
645
|
-
<button
|
|
646
|
-
class="pf-v5-c-button pf-m-control"
|
|
647
|
-
type="button"
|
|
648
|
-
aria-label="Toggle date picker"
|
|
528
|
+
<div class="pf-v5-c-input-group__item">
|
|
529
|
+
<div class="pf-v5-c-date-picker">
|
|
530
|
+
<div class="pf-v5-c-date-picker__input">
|
|
531
|
+
<div
|
|
532
|
+
class="pf-v5-c-input-group"
|
|
533
|
+
aria-label="search filter"
|
|
534
|
+
role="group"
|
|
649
535
|
>
|
|
650
|
-
<
|
|
651
|
-
|
|
536
|
+
<span class="pf-v5-c-form-control">
|
|
537
|
+
<input
|
|
538
|
+
type="text"
|
|
539
|
+
value="2020-03-05"
|
|
540
|
+
id="toolbar-with-validation-example-helper-text-input"
|
|
541
|
+
name="toolbar-with-validation-example-helper-text-input"
|
|
542
|
+
aria-label="Date picker"
|
|
543
|
+
/>
|
|
544
|
+
</span>
|
|
545
|
+
<button
|
|
546
|
+
class="pf-v5-c-button pf-m-control"
|
|
547
|
+
type="button"
|
|
548
|
+
aria-label="Toggle date picker"
|
|
549
|
+
>
|
|
550
|
+
<i class="fas fa-calendar-alt" aria-hidden="true"></i>
|
|
551
|
+
</button>
|
|
552
|
+
</div>
|
|
652
553
|
</div>
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
554
|
+
<div class="pf-v5-c-date-picker__helper-text">
|
|
555
|
+
<div class="pf-v5-c-helper-text">
|
|
556
|
+
<div class="pf-v5-c-helper-text__item">
|
|
557
|
+
<span
|
|
558
|
+
class="pf-v5-c-helper-text__item-text"
|
|
559
|
+
>MM/DD/YYYY</span>
|
|
560
|
+
</div>
|
|
660
561
|
</div>
|
|
661
562
|
</div>
|
|
662
563
|
</div>
|
|
663
564
|
</div>
|
|
664
|
-
<div class="pf-v5-c-
|
|
665
|
-
<div class="pf-v5-c-date-
|
|
666
|
-
<div
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
<
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
<span
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
565
|
+
<div class="pf-v5-c-input-group__item">
|
|
566
|
+
<div class="pf-v5-c-date-picker">
|
|
567
|
+
<div class="pf-v5-c-date-picker__input">
|
|
568
|
+
<div
|
|
569
|
+
class="pf-v5-c-input-group"
|
|
570
|
+
aria-label="search filter"
|
|
571
|
+
role="group"
|
|
572
|
+
>
|
|
573
|
+
<span class="pf-v5-c-form-control pf-m-error">
|
|
574
|
+
<input
|
|
575
|
+
aria-invalid="true"
|
|
576
|
+
type="text"
|
|
577
|
+
value="2020-03-05"
|
|
578
|
+
id="toolbar-with-validation-example-invalid-input"
|
|
579
|
+
name="toolbar-with-validation-example-invalid-input"
|
|
580
|
+
aria-label="Date picker"
|
|
581
|
+
/>
|
|
582
|
+
<span class="pf-v5-c-form-control__utilities">
|
|
583
|
+
<span
|
|
584
|
+
class="pf-v5-c-form-control__icon pf-m-status"
|
|
585
|
+
>
|
|
586
|
+
<i
|
|
587
|
+
class="fas fa-exclamation-circle"
|
|
588
|
+
aria-hidden="true"
|
|
589
|
+
></i>
|
|
590
|
+
</span>
|
|
688
591
|
</span>
|
|
689
592
|
</span>
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
</
|
|
593
|
+
<button
|
|
594
|
+
class="pf-v5-c-button pf-m-control"
|
|
595
|
+
type="button"
|
|
596
|
+
aria-label="Toggle date picker"
|
|
597
|
+
>
|
|
598
|
+
<i class="fas fa-calendar-alt" aria-hidden="true"></i>
|
|
599
|
+
</button>
|
|
600
|
+
</div>
|
|
601
|
+
<div class="pf-v5-c-date-picker__helper-text"></div>
|
|
698
602
|
</div>
|
|
699
|
-
<div class="pf-v5-c-date-picker__helper-text"
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
>Max: 08/10/2022</span>
|
|
603
|
+
<div class="pf-v5-c-date-picker__helper-text">
|
|
604
|
+
<div class="pf-v5-c-helper-text">
|
|
605
|
+
<div class="pf-v5-c-helper-text__item">
|
|
606
|
+
<span
|
|
607
|
+
class="pf-v5-c-helper-text__item-text"
|
|
608
|
+
>Max: 08/10/2022</span>
|
|
609
|
+
</div>
|
|
707
610
|
</div>
|
|
708
611
|
</div>
|
|
709
612
|
</div>
|
|
@@ -718,75 +621,22 @@ section: components
|
|
|
718
621
|
role="group"
|
|
719
622
|
>
|
|
720
623
|
<div class="pf-v5-c-input-group__item">
|
|
721
|
-
<
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
<
|
|
728
|
-
class="
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
>
|
|
735
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
736
|
-
<span class="pf-v5-c-select__toggle-icon">
|
|
737
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
738
|
-
</span>
|
|
739
|
-
<span class="pf-v5-c-select__toggle-text">Description</span>
|
|
740
|
-
</div>
|
|
741
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
742
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
624
|
+
<button
|
|
625
|
+
class="pf-v5-c-menu-toggle"
|
|
626
|
+
type="button"
|
|
627
|
+
aria-expanded="false"
|
|
628
|
+
id="toolbar-with-validation-example-search-filter-menu"
|
|
629
|
+
>
|
|
630
|
+
<span class="pf-v5-c-menu-toggle__icon">
|
|
631
|
+
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
632
|
+
</span>
|
|
633
|
+
<span class="pf-v5-c-menu-toggle__text">Description</span>
|
|
634
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
635
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
636
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
743
637
|
</span>
|
|
744
|
-
</
|
|
745
|
-
|
|
746
|
-
<ul
|
|
747
|
-
class="pf-v5-c-select__menu"
|
|
748
|
-
role="listbox"
|
|
749
|
-
aria-labelledby="toolbar-with-validation-example-select-name-label"
|
|
750
|
-
hidden
|
|
751
|
-
>
|
|
752
|
-
<li role="presentation">
|
|
753
|
-
<button
|
|
754
|
-
class="pf-v5-c-select__menu-item"
|
|
755
|
-
role="option"
|
|
756
|
-
>Running</button>
|
|
757
|
-
</li>
|
|
758
|
-
<li role="presentation">
|
|
759
|
-
<button
|
|
760
|
-
class="pf-v5-c-select__menu-item pf-m-selected"
|
|
761
|
-
role="option"
|
|
762
|
-
aria-selected="true"
|
|
763
|
-
>
|
|
764
|
-
Stopped
|
|
765
|
-
<span class="pf-v5-c-select__menu-item-icon">
|
|
766
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
767
|
-
</span>
|
|
768
|
-
</button>
|
|
769
|
-
</li>
|
|
770
|
-
<li role="presentation">
|
|
771
|
-
<button
|
|
772
|
-
class="pf-v5-c-select__menu-item"
|
|
773
|
-
role="option"
|
|
774
|
-
>Down</button>
|
|
775
|
-
</li>
|
|
776
|
-
<li role="presentation">
|
|
777
|
-
<button
|
|
778
|
-
class="pf-v5-c-select__menu-item"
|
|
779
|
-
role="option"
|
|
780
|
-
>Degraded</button>
|
|
781
|
-
</li>
|
|
782
|
-
<li role="presentation">
|
|
783
|
-
<button
|
|
784
|
-
class="pf-v5-c-select__menu-item"
|
|
785
|
-
role="option"
|
|
786
|
-
>Needs maintenance</button>
|
|
787
|
-
</li>
|
|
788
|
-
</ul>
|
|
789
|
-
</div>
|
|
638
|
+
</span>
|
|
639
|
+
</button>
|
|
790
640
|
</div>
|
|
791
641
|
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
792
642
|
<div class="pf-v5-c-text-input-group">
|
|
@@ -798,7 +648,7 @@ section: components
|
|
|
798
648
|
<input
|
|
799
649
|
class="pf-v5-c-text-input-group__text-input"
|
|
800
650
|
type="text"
|
|
801
|
-
placeholder="
|
|
651
|
+
placeholder="Description"
|
|
802
652
|
value
|
|
803
653
|
aria-label="Search input"
|
|
804
654
|
/>
|
|
@@ -1422,12 +1272,12 @@ section: components
|
|
|
1422
1272
|
<div class="pf-v5-c-toolbar__content">
|
|
1423
1273
|
<div class="pf-v5-c-toolbar__content-section">
|
|
1424
1274
|
<div class="pf-v5-c-toolbar__group pf-m-toggle-group">
|
|
1425
|
-
<div class="pf-v5-c-toolbar__toggle
|
|
1275
|
+
<div class="pf-v5-c-toolbar__toggle">
|
|
1426
1276
|
<button
|
|
1427
|
-
class="pf-v5-c-
|
|
1277
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
|
|
1428
1278
|
type="button"
|
|
1429
|
-
aria-label="Show filters"
|
|
1430
1279
|
aria-expanded="true"
|
|
1280
|
+
aria-label="Show filters"
|
|
1431
1281
|
aria-controls="toolbar-attribute-value-search-filter-mobile-example-expandable-content"
|
|
1432
1282
|
>
|
|
1433
1283
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
@@ -1572,72 +1422,22 @@ section: components
|
|
|
1572
1422
|
role="group"
|
|
1573
1423
|
>
|
|
1574
1424
|
<div class="pf-v5-c-input-group__item">
|
|
1575
|
-
<
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
<
|
|
1582
|
-
class="
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
>
|
|
1589
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
1590
|
-
<span class="pf-v5-c-select__toggle-icon">
|
|
1591
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
1592
|
-
</span>
|
|
1593
|
-
<span class="pf-v5-c-select__toggle-text">Name</span>
|
|
1594
|
-
</div>
|
|
1595
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
1596
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1425
|
+
<button
|
|
1426
|
+
class="pf-v5-c-menu-toggle"
|
|
1427
|
+
type="button"
|
|
1428
|
+
aria-expanded="false"
|
|
1429
|
+
id="toolbar-attribute-value-search-filter-mobile-example-search-filter-menu"
|
|
1430
|
+
>
|
|
1431
|
+
<span class="pf-v5-c-menu-toggle__icon">
|
|
1432
|
+
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
1433
|
+
</span>
|
|
1434
|
+
<span class="pf-v5-c-menu-toggle__text">Name</span>
|
|
1435
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
1436
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1437
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1597
1438
|
</span>
|
|
1598
|
-
</
|
|
1599
|
-
|
|
1600
|
-
<ul
|
|
1601
|
-
class="pf-v5-c-select__menu"
|
|
1602
|
-
role="listbox"
|
|
1603
|
-
aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-select-name-label"
|
|
1604
|
-
hidden
|
|
1605
|
-
>
|
|
1606
|
-
<li role="presentation">
|
|
1607
|
-
<button
|
|
1608
|
-
class="pf-v5-c-select__menu-item"
|
|
1609
|
-
role="option"
|
|
1610
|
-
>Running</button>
|
|
1611
|
-
</li>
|
|
1612
|
-
<li role="presentation">
|
|
1613
|
-
<button
|
|
1614
|
-
class="pf-v5-c-select__menu-item pf-m-selected"
|
|
1615
|
-
role="option"
|
|
1616
|
-
aria-selected="true"
|
|
1617
|
-
>
|
|
1618
|
-
Stopped
|
|
1619
|
-
<span class="pf-v5-c-select__menu-item-icon">
|
|
1620
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1621
|
-
</span>
|
|
1622
|
-
</button>
|
|
1623
|
-
</li>
|
|
1624
|
-
<li role="presentation">
|
|
1625
|
-
<button class="pf-v5-c-select__menu-item" role="option">Down</button>
|
|
1626
|
-
</li>
|
|
1627
|
-
<li role="presentation">
|
|
1628
|
-
<button
|
|
1629
|
-
class="pf-v5-c-select__menu-item"
|
|
1630
|
-
role="option"
|
|
1631
|
-
>Degraded</button>
|
|
1632
|
-
</li>
|
|
1633
|
-
<li role="presentation">
|
|
1634
|
-
<button
|
|
1635
|
-
class="pf-v5-c-select__menu-item"
|
|
1636
|
-
role="option"
|
|
1637
|
-
>Needs maintenance</button>
|
|
1638
|
-
</li>
|
|
1639
|
-
</ul>
|
|
1640
|
-
</div>
|
|
1439
|
+
</span>
|
|
1440
|
+
</button>
|
|
1641
1441
|
</div>
|
|
1642
1442
|
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
1643
1443
|
<div class="pf-v5-c-text-input-group">
|
|
@@ -1670,155 +1470,116 @@ section: components
|
|
|
1670
1470
|
```html
|
|
1671
1471
|
<div
|
|
1672
1472
|
class="pf-v5-c-toolbar"
|
|
1673
|
-
id="toolbar-attribute-value-single-
|
|
1473
|
+
id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example"
|
|
1674
1474
|
>
|
|
1675
1475
|
<div class="pf-v5-c-toolbar__content">
|
|
1676
1476
|
<div class="pf-v5-c-toolbar__content-section">
|
|
1677
1477
|
<div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show">
|
|
1678
1478
|
<div class="pf-v5-c-toolbar__toggle">
|
|
1679
1479
|
<button
|
|
1680
|
-
class="pf-v5-c-
|
|
1480
|
+
class="pf-v5-c-menu-toggle pf-m-plain"
|
|
1681
1481
|
type="button"
|
|
1682
|
-
aria-label="Show filters"
|
|
1683
1482
|
aria-expanded="false"
|
|
1684
|
-
aria-
|
|
1483
|
+
aria-label="Show filters"
|
|
1484
|
+
aria-controls="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-expandable-content"
|
|
1685
1485
|
>
|
|
1686
1486
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
1687
1487
|
</button>
|
|
1688
1488
|
</div>
|
|
1689
1489
|
<div class="pf-v5-c-toolbar__group pf-m-filter-group">
|
|
1690
1490
|
<div class="pf-v5-c-toolbar__item">
|
|
1691
|
-
<
|
|
1692
|
-
|
|
1693
|
-
|
|
1694
|
-
|
|
1695
|
-
|
|
1696
|
-
|
|
1697
|
-
<
|
|
1698
|
-
class="
|
|
1699
|
-
|
|
1700
|
-
|
|
1701
|
-
|
|
1702
|
-
|
|
1703
|
-
|
|
1704
|
-
>
|
|
1705
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
1706
|
-
<span class="pf-v5-c-select__toggle-icon">
|
|
1707
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
1708
|
-
</span>
|
|
1709
|
-
<span class="pf-v5-c-select__toggle-text">Status</span>
|
|
1710
|
-
</div>
|
|
1711
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
1712
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1491
|
+
<button
|
|
1492
|
+
class="pf-v5-c-menu-toggle"
|
|
1493
|
+
type="button"
|
|
1494
|
+
aria-expanded="false"
|
|
1495
|
+
id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-menu-toggle-status"
|
|
1496
|
+
>
|
|
1497
|
+
<span class="pf-v5-c-menu-toggle__icon">
|
|
1498
|
+
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
1499
|
+
</span>
|
|
1500
|
+
<span class="pf-v5-c-menu-toggle__text">Status</span>
|
|
1501
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
1502
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1503
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1713
1504
|
</span>
|
|
1714
|
-
</
|
|
1715
|
-
|
|
1716
|
-
<ul
|
|
1717
|
-
class="pf-v5-c-select__menu"
|
|
1718
|
-
role="listbox"
|
|
1719
|
-
aria-labelledby="toolbar-attribute-value-single-select-filter-desktop-example-select-status-label"
|
|
1720
|
-
hidden
|
|
1721
|
-
style="width: 175px"
|
|
1722
|
-
>
|
|
1723
|
-
<li role="presentation">
|
|
1724
|
-
<button
|
|
1725
|
-
class="pf-v5-c-select__menu-item"
|
|
1726
|
-
role="option"
|
|
1727
|
-
>Running</button>
|
|
1728
|
-
</li>
|
|
1729
|
-
<li role="presentation">
|
|
1730
|
-
<button
|
|
1731
|
-
class="pf-v5-c-select__menu-item pf-m-selected"
|
|
1732
|
-
role="option"
|
|
1733
|
-
aria-selected="true"
|
|
1734
|
-
>
|
|
1735
|
-
Stopped
|
|
1736
|
-
<span class="pf-v5-c-select__menu-item-icon">
|
|
1737
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1738
|
-
</span>
|
|
1739
|
-
</button>
|
|
1740
|
-
</li>
|
|
1741
|
-
<li role="presentation">
|
|
1742
|
-
<button class="pf-v5-c-select__menu-item" role="option">Down</button>
|
|
1743
|
-
</li>
|
|
1744
|
-
<li role="presentation">
|
|
1745
|
-
<button
|
|
1746
|
-
class="pf-v5-c-select__menu-item"
|
|
1747
|
-
role="option"
|
|
1748
|
-
>Degraded</button>
|
|
1749
|
-
</li>
|
|
1750
|
-
<li role="presentation">
|
|
1751
|
-
<button
|
|
1752
|
-
class="pf-v5-c-select__menu-item"
|
|
1753
|
-
role="option"
|
|
1754
|
-
>Needs maintenance</button>
|
|
1755
|
-
</li>
|
|
1756
|
-
</ul>
|
|
1757
|
-
</div>
|
|
1505
|
+
</span>
|
|
1506
|
+
</button>
|
|
1758
1507
|
</div>
|
|
1759
1508
|
<div class="pf-v5-c-toolbar__item">
|
|
1760
|
-
<
|
|
1761
|
-
|
|
1762
|
-
|
|
1763
|
-
|
|
1764
|
-
|
|
1765
|
-
|
|
1766
|
-
<
|
|
1767
|
-
|
|
1768
|
-
|
|
1769
|
-
|
|
1770
|
-
aria-haspopup="true"
|
|
1771
|
-
aria-expanded="true"
|
|
1772
|
-
aria-labelledby="toolbar-attribute-value-single-select-filter-desktop-example-select-status-two-label toolbar-attribute-value-single-select-filter-desktop-example-select-status-two-toggle"
|
|
1773
|
-
>
|
|
1774
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
1775
|
-
<span class="pf-v5-c-select__toggle-text">Stopped</span>
|
|
1776
|
-
</div>
|
|
1777
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
1778
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1509
|
+
<button
|
|
1510
|
+
class="pf-v5-c-menu-toggle pf-m-expanded"
|
|
1511
|
+
type="button"
|
|
1512
|
+
aria-expanded="true"
|
|
1513
|
+
id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-menu-toggle-stopped"
|
|
1514
|
+
>
|
|
1515
|
+
<span class="pf-v5-c-menu-toggle__text">Stopped</span>
|
|
1516
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
1517
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1518
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1779
1519
|
</span>
|
|
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
|
-
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
|
|
1818
|
-
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1520
|
+
</span>
|
|
1521
|
+
</button>
|
|
1522
|
+
<div class="pf-v5-c-panel">
|
|
1523
|
+
<div class="pf-v5-c-menu" width="175px">
|
|
1524
|
+
<div class="pf-v5-c-menu__content">
|
|
1525
|
+
<section class="pf-v5-c-menu__group">
|
|
1526
|
+
<ul class="pf-v5-c-menu__list" role="menu">
|
|
1527
|
+
<li class="pf-v5-c-menu__list-item" role="group">
|
|
1528
|
+
<button
|
|
1529
|
+
class="pf-v5-c-menu__item"
|
|
1530
|
+
type="button"
|
|
1531
|
+
role="menuitem"
|
|
1532
|
+
>
|
|
1533
|
+
<span class="pf-v5-c-menu__item-text">Running</span>
|
|
1534
|
+
</button>
|
|
1535
|
+
</li>
|
|
1536
|
+
<li class="pf-v5-c-menu__list-item" role="group">
|
|
1537
|
+
<button
|
|
1538
|
+
class="pf-v5-c-menu__item pf-m-selected"
|
|
1539
|
+
type="button"
|
|
1540
|
+
role="menuitem"
|
|
1541
|
+
>
|
|
1542
|
+
<span class="pf-v5-c-menu__item-main">
|
|
1543
|
+
<span class="pf-v5-c-menu__item-text">Stopped</span>
|
|
1544
|
+
<span class="pf-v5-c-menu__item-select-icon">
|
|
1545
|
+
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1546
|
+
</span>
|
|
1547
|
+
</span>
|
|
1548
|
+
</button>
|
|
1549
|
+
</li>
|
|
1550
|
+
<li class="pf-v5-c-menu__list-item" role="group">
|
|
1551
|
+
<button
|
|
1552
|
+
class="pf-v5-c-menu__item"
|
|
1553
|
+
type="button"
|
|
1554
|
+
role="menuitem"
|
|
1555
|
+
>
|
|
1556
|
+
<span class="pf-v5-c-menu__item-text">Down</span>
|
|
1557
|
+
</button>
|
|
1558
|
+
</li>
|
|
1559
|
+
<li class="pf-v5-c-menu__list-item" role="group">
|
|
1560
|
+
<button
|
|
1561
|
+
class="pf-v5-c-menu__item"
|
|
1562
|
+
type="button"
|
|
1563
|
+
role="menuitem"
|
|
1564
|
+
>
|
|
1565
|
+
<span class="pf-v5-c-menu__item-text">Degraded</span>
|
|
1566
|
+
</button>
|
|
1567
|
+
</li>
|
|
1568
|
+
<li class="pf-v5-c-menu__list-item" role="group">
|
|
1569
|
+
<button
|
|
1570
|
+
class="pf-v5-c-menu__item"
|
|
1571
|
+
type="button"
|
|
1572
|
+
role="menuitem"
|
|
1573
|
+
>
|
|
1574
|
+
<span
|
|
1575
|
+
class="pf-v5-c-menu__item-text"
|
|
1576
|
+
>Needs maintenance</span>
|
|
1577
|
+
</button>
|
|
1578
|
+
</li>
|
|
1579
|
+
</ul>
|
|
1580
|
+
</section>
|
|
1581
|
+
</div>
|
|
1582
|
+
</div>
|
|
1822
1583
|
</div>
|
|
1823
1584
|
</div>
|
|
1824
1585
|
</div>
|
|
@@ -1826,7 +1587,7 @@ section: components
|
|
|
1826
1587
|
<div class="pf-v5-c-toolbar__item pf-m-overflow-menu">
|
|
1827
1588
|
<div
|
|
1828
1589
|
class="pf-v5-c-overflow-menu"
|
|
1829
|
-
id="toolbar-attribute-value-single-
|
|
1590
|
+
id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-overflow-menu"
|
|
1830
1591
|
>
|
|
1831
1592
|
<div class="pf-v5-c-overflow-menu__content">
|
|
1832
1593
|
<div class="pf-v5-c-overflow-menu__group pf-m-button-group">
|
|
@@ -1850,7 +1611,7 @@ section: components
|
|
|
1850
1611
|
<button
|
|
1851
1612
|
class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
|
|
1852
1613
|
type="button"
|
|
1853
|
-
id="toolbar-attribute-value-single-
|
|
1614
|
+
id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-overflow-menu-dropdown-toggle"
|
|
1854
1615
|
aria-label="Overflow menu"
|
|
1855
1616
|
aria-expanded="false"
|
|
1856
1617
|
>
|
|
@@ -1859,7 +1620,7 @@ section: components
|
|
|
1859
1620
|
<ul
|
|
1860
1621
|
class="pf-v5-c-dropdown__menu"
|
|
1861
1622
|
role="menu"
|
|
1862
|
-
aria-labelledby="toolbar-attribute-value-single-
|
|
1623
|
+
aria-labelledby="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-overflow-menu-dropdown-toggle"
|
|
1863
1624
|
hidden
|
|
1864
1625
|
>
|
|
1865
1626
|
<li role="none">
|
|
@@ -1884,7 +1645,7 @@ section: components
|
|
|
1884
1645
|
<button
|
|
1885
1646
|
class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
|
|
1886
1647
|
type="button"
|
|
1887
|
-
id="toolbar-attribute-value-single-
|
|
1648
|
+
id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-pagination-options-menu-toggle"
|
|
1888
1649
|
aria-haspopup="listbox"
|
|
1889
1650
|
aria-expanded="false"
|
|
1890
1651
|
>
|
|
@@ -1899,7 +1660,7 @@ section: components
|
|
|
1899
1660
|
<ul
|
|
1900
1661
|
class="pf-v5-c-options-menu__menu"
|
|
1901
1662
|
role="menu"
|
|
1902
|
-
aria-labelledby="toolbar-attribute-value-single-
|
|
1663
|
+
aria-labelledby="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-pagination-options-menu-toggle"
|
|
1903
1664
|
hidden
|
|
1904
1665
|
>
|
|
1905
1666
|
<li role="none">
|
|
@@ -1957,7 +1718,7 @@ section: components
|
|
|
1957
1718
|
</div>
|
|
1958
1719
|
<div
|
|
1959
1720
|
class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
|
|
1960
|
-
id="toolbar-attribute-value-single-
|
|
1721
|
+
id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-expandable-content"
|
|
1961
1722
|
hidden
|
|
1962
1723
|
></div>
|
|
1963
1724
|
</div>
|
|
@@ -1970,18 +1731,18 @@ section: components
|
|
|
1970
1731
|
```html
|
|
1971
1732
|
<div
|
|
1972
1733
|
class="pf-v5-c-toolbar"
|
|
1973
|
-
id="toolbar-attribute-value-single-
|
|
1734
|
+
id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example"
|
|
1974
1735
|
>
|
|
1975
1736
|
<div class="pf-v5-c-toolbar__content">
|
|
1976
1737
|
<div class="pf-v5-c-toolbar__content-section">
|
|
1977
1738
|
<div class="pf-v5-c-toolbar__group pf-m-toggle-group">
|
|
1978
|
-
<div class="pf-v5-c-toolbar__toggle
|
|
1739
|
+
<div class="pf-v5-c-toolbar__toggle">
|
|
1979
1740
|
<button
|
|
1980
|
-
class="pf-v5-c-
|
|
1741
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
|
|
1981
1742
|
type="button"
|
|
1982
|
-
aria-label="Show filters"
|
|
1983
1743
|
aria-expanded="true"
|
|
1984
|
-
aria-
|
|
1744
|
+
aria-label="Show filters"
|
|
1745
|
+
aria-controls="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-expandable-content"
|
|
1985
1746
|
>
|
|
1986
1747
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
1987
1748
|
</button>
|
|
@@ -1990,14 +1751,14 @@ section: components
|
|
|
1990
1751
|
<div class="pf-v5-c-toolbar__item pf-m-overflow-menu">
|
|
1991
1752
|
<div
|
|
1992
1753
|
class="pf-v5-c-overflow-menu"
|
|
1993
|
-
id="toolbar-attribute-value-single-
|
|
1754
|
+
id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-overflow-menu"
|
|
1994
1755
|
>
|
|
1995
1756
|
<div class="pf-v5-c-overflow-menu__control">
|
|
1996
1757
|
<div class="pf-v5-c-dropdown">
|
|
1997
1758
|
<button
|
|
1998
1759
|
class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
|
|
1999
1760
|
type="button"
|
|
2000
|
-
id="toolbar-attribute-value-single-
|
|
1761
|
+
id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-overflow-menu-dropdown-toggle"
|
|
2001
1762
|
aria-label="Overflow menu"
|
|
2002
1763
|
aria-expanded="false"
|
|
2003
1764
|
>
|
|
@@ -2006,7 +1767,7 @@ section: components
|
|
|
2006
1767
|
<ul
|
|
2007
1768
|
class="pf-v5-c-dropdown__menu"
|
|
2008
1769
|
role="menu"
|
|
2009
|
-
aria-labelledby="toolbar-attribute-value-single-
|
|
1770
|
+
aria-labelledby="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-overflow-menu-dropdown-toggle"
|
|
2010
1771
|
hidden
|
|
2011
1772
|
>
|
|
2012
1773
|
<li role="none">
|
|
@@ -2043,7 +1804,7 @@ section: components
|
|
|
2043
1804
|
<button
|
|
2044
1805
|
class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
|
|
2045
1806
|
type="button"
|
|
2046
|
-
id="toolbar-attribute-value-single-
|
|
1807
|
+
id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-pagination-options-menu-toggle"
|
|
2047
1808
|
aria-haspopup="listbox"
|
|
2048
1809
|
aria-expanded="false"
|
|
2049
1810
|
>
|
|
@@ -2058,7 +1819,7 @@ section: components
|
|
|
2058
1819
|
<ul
|
|
2059
1820
|
class="pf-v5-c-options-menu__menu"
|
|
2060
1821
|
role="menu"
|
|
2061
|
-
aria-labelledby="toolbar-attribute-value-single-
|
|
1822
|
+
aria-labelledby="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-pagination-options-menu-toggle"
|
|
2062
1823
|
hidden
|
|
2063
1824
|
>
|
|
2064
1825
|
<li role="none">
|
|
@@ -2116,127 +1877,100 @@ section: components
|
|
|
2116
1877
|
</div>
|
|
2117
1878
|
<div
|
|
2118
1879
|
class="pf-v5-c-toolbar__expandable-content pf-m-expanded"
|
|
2119
|
-
id="toolbar-attribute-value-single-
|
|
1880
|
+
id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-expandable-content"
|
|
2120
1881
|
>
|
|
2121
1882
|
<div class="pf-v5-c-toolbar__group pf-m-filter-group">
|
|
2122
1883
|
<div class="pf-v5-c-toolbar__item">
|
|
2123
|
-
<
|
|
2124
|
-
|
|
2125
|
-
|
|
2126
|
-
|
|
2127
|
-
|
|
2128
|
-
|
|
2129
|
-
<
|
|
2130
|
-
class="
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
>
|
|
2137
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
2138
|
-
<span class="pf-v5-c-select__toggle-icon">
|
|
2139
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
2140
|
-
</span>
|
|
2141
|
-
<span class="pf-v5-c-select__toggle-text">Status</span>
|
|
2142
|
-
</div>
|
|
2143
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
2144
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1884
|
+
<button
|
|
1885
|
+
class="pf-v5-c-menu-toggle"
|
|
1886
|
+
type="button"
|
|
1887
|
+
aria-expanded="false"
|
|
1888
|
+
id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-menu-toggle-status"
|
|
1889
|
+
>
|
|
1890
|
+
<span class="pf-v5-c-menu-toggle__icon">
|
|
1891
|
+
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
1892
|
+
</span>
|
|
1893
|
+
<span class="pf-v5-c-menu-toggle__text">Status</span>
|
|
1894
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
1895
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1896
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
2145
1897
|
</span>
|
|
2146
|
-
</
|
|
2147
|
-
|
|
2148
|
-
<ul
|
|
2149
|
-
class="pf-v5-c-select__menu"
|
|
2150
|
-
role="listbox"
|
|
2151
|
-
aria-labelledby="toolbar-attribute-value-single-select-filter-mobile-example-select-status-expanded-label"
|
|
2152
|
-
hidden
|
|
2153
|
-
>
|
|
2154
|
-
<li role="presentation">
|
|
2155
|
-
<button class="pf-v5-c-select__menu-item" role="option">Running</button>
|
|
2156
|
-
</li>
|
|
2157
|
-
<li role="presentation">
|
|
2158
|
-
<button
|
|
2159
|
-
class="pf-v5-c-select__menu-item pf-m-selected"
|
|
2160
|
-
role="option"
|
|
2161
|
-
aria-selected="true"
|
|
2162
|
-
>
|
|
2163
|
-
Stopped
|
|
2164
|
-
<span class="pf-v5-c-select__menu-item-icon">
|
|
2165
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
2166
|
-
</span>
|
|
2167
|
-
</button>
|
|
2168
|
-
</li>
|
|
2169
|
-
<li role="presentation">
|
|
2170
|
-
<button class="pf-v5-c-select__menu-item" role="option">Down</button>
|
|
2171
|
-
</li>
|
|
2172
|
-
<li role="presentation">
|
|
2173
|
-
<button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
|
|
2174
|
-
</li>
|
|
2175
|
-
<li role="presentation">
|
|
2176
|
-
<button
|
|
2177
|
-
class="pf-v5-c-select__menu-item"
|
|
2178
|
-
role="option"
|
|
2179
|
-
>Needs maintenance</button>
|
|
2180
|
-
</li>
|
|
2181
|
-
</ul>
|
|
2182
|
-
</div>
|
|
1898
|
+
</span>
|
|
1899
|
+
</button>
|
|
2183
1900
|
</div>
|
|
2184
1901
|
<div class="pf-v5-c-toolbar__item">
|
|
2185
|
-
<
|
|
2186
|
-
|
|
2187
|
-
|
|
2188
|
-
|
|
2189
|
-
|
|
2190
|
-
|
|
2191
|
-
<
|
|
2192
|
-
|
|
2193
|
-
|
|
2194
|
-
|
|
2195
|
-
aria-haspopup="true"
|
|
2196
|
-
aria-expanded="true"
|
|
2197
|
-
aria-labelledby="toolbar-attribute-value-single-select-filter-mobile-example-select-status-two-expanded-label toolbar-attribute-value-single-select-filter-mobile-example-select-status-two-expanded-toggle"
|
|
2198
|
-
>
|
|
2199
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
2200
|
-
<span class="pf-v5-c-select__toggle-text">Stopped</span>
|
|
2201
|
-
</div>
|
|
2202
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
2203
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1902
|
+
<button
|
|
1903
|
+
class="pf-v5-c-menu-toggle pf-m-expanded"
|
|
1904
|
+
type="button"
|
|
1905
|
+
aria-expanded="true"
|
|
1906
|
+
id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-menu-toggle-stopped"
|
|
1907
|
+
>
|
|
1908
|
+
<span class="pf-v5-c-menu-toggle__text">Stopped</span>
|
|
1909
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
1910
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1911
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
2204
1912
|
</span>
|
|
2205
|
-
</
|
|
2206
|
-
|
|
2207
|
-
|
|
2208
|
-
|
|
2209
|
-
|
|
2210
|
-
|
|
2211
|
-
|
|
2212
|
-
|
|
2213
|
-
|
|
2214
|
-
|
|
2215
|
-
|
|
2216
|
-
|
|
2217
|
-
|
|
2218
|
-
|
|
2219
|
-
|
|
2220
|
-
|
|
2221
|
-
|
|
2222
|
-
|
|
2223
|
-
|
|
2224
|
-
|
|
2225
|
-
|
|
2226
|
-
|
|
2227
|
-
|
|
2228
|
-
|
|
2229
|
-
|
|
2230
|
-
|
|
2231
|
-
|
|
2232
|
-
|
|
2233
|
-
|
|
2234
|
-
|
|
2235
|
-
|
|
2236
|
-
|
|
2237
|
-
|
|
2238
|
-
|
|
2239
|
-
|
|
1913
|
+
</span>
|
|
1914
|
+
</button>
|
|
1915
|
+
<div class="pf-v5-c-panel">
|
|
1916
|
+
<div class="pf-v5-c-menu" width="175px">
|
|
1917
|
+
<div class="pf-v5-c-menu__content">
|
|
1918
|
+
<section class="pf-v5-c-menu__group">
|
|
1919
|
+
<ul class="pf-v5-c-menu__list" role="menu">
|
|
1920
|
+
<li class="pf-v5-c-menu__list-item" role="group">
|
|
1921
|
+
<button
|
|
1922
|
+
class="pf-v5-c-menu__item"
|
|
1923
|
+
type="button"
|
|
1924
|
+
role="menuitem"
|
|
1925
|
+
>
|
|
1926
|
+
<span class="pf-v5-c-menu__item-text">Running</span>
|
|
1927
|
+
</button>
|
|
1928
|
+
</li>
|
|
1929
|
+
<li class="pf-v5-c-menu__list-item" role="group">
|
|
1930
|
+
<button
|
|
1931
|
+
class="pf-v5-c-menu__item pf-m-selected"
|
|
1932
|
+
type="button"
|
|
1933
|
+
role="menuitem"
|
|
1934
|
+
>
|
|
1935
|
+
<span class="pf-v5-c-menu__item-main">
|
|
1936
|
+
<span class="pf-v5-c-menu__item-text">Stopped</span>
|
|
1937
|
+
<span class="pf-v5-c-menu__item-select-icon">
|
|
1938
|
+
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1939
|
+
</span>
|
|
1940
|
+
</span>
|
|
1941
|
+
</button>
|
|
1942
|
+
</li>
|
|
1943
|
+
<li class="pf-v5-c-menu__list-item" role="group">
|
|
1944
|
+
<button
|
|
1945
|
+
class="pf-v5-c-menu__item"
|
|
1946
|
+
type="button"
|
|
1947
|
+
role="menuitem"
|
|
1948
|
+
>
|
|
1949
|
+
<span class="pf-v5-c-menu__item-text">Down</span>
|
|
1950
|
+
</button>
|
|
1951
|
+
</li>
|
|
1952
|
+
<li class="pf-v5-c-menu__list-item" role="group">
|
|
1953
|
+
<button
|
|
1954
|
+
class="pf-v5-c-menu__item"
|
|
1955
|
+
type="button"
|
|
1956
|
+
role="menuitem"
|
|
1957
|
+
>
|
|
1958
|
+
<span class="pf-v5-c-menu__item-text">Degraded</span>
|
|
1959
|
+
</button>
|
|
1960
|
+
</li>
|
|
1961
|
+
<li class="pf-v5-c-menu__list-item" role="group">
|
|
1962
|
+
<button
|
|
1963
|
+
class="pf-v5-c-menu__item"
|
|
1964
|
+
type="button"
|
|
1965
|
+
role="menuitem"
|
|
1966
|
+
>
|
|
1967
|
+
<span class="pf-v5-c-menu__item-text">Needs maintenance</span>
|
|
1968
|
+
</button>
|
|
1969
|
+
</li>
|
|
1970
|
+
</ul>
|
|
1971
|
+
</section>
|
|
1972
|
+
</div>
|
|
1973
|
+
</div>
|
|
2240
1974
|
</div>
|
|
2241
1975
|
</div>
|
|
2242
1976
|
</div>
|
|
@@ -2246,194 +1980,188 @@ section: components
|
|
|
2246
1980
|
|
|
2247
1981
|
```
|
|
2248
1982
|
|
|
2249
|
-
### Toolbar attribute value checkbox
|
|
1983
|
+
### Toolbar attribute value checkbox menu toggle filter on desktop
|
|
2250
1984
|
|
|
2251
1985
|
```html
|
|
2252
1986
|
<div
|
|
2253
1987
|
class="pf-v5-c-toolbar"
|
|
2254
|
-
id="toolbar-attribute-value-checkbox-
|
|
1988
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example"
|
|
2255
1989
|
>
|
|
2256
1990
|
<div class="pf-v5-c-toolbar__content">
|
|
2257
1991
|
<div class="pf-v5-c-toolbar__content-section">
|
|
2258
1992
|
<div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show">
|
|
2259
1993
|
<div class="pf-v5-c-toolbar__toggle">
|
|
2260
1994
|
<button
|
|
2261
|
-
class="pf-v5-c-
|
|
1995
|
+
class="pf-v5-c-menu-toggle pf-m-plain"
|
|
2262
1996
|
type="button"
|
|
2263
|
-
aria-label="Show filters"
|
|
2264
1997
|
aria-expanded="false"
|
|
2265
|
-
aria-
|
|
1998
|
+
aria-label="Show filters"
|
|
1999
|
+
aria-controls="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-expandable-content"
|
|
2266
2000
|
>
|
|
2267
2001
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
2268
2002
|
</button>
|
|
2269
2003
|
</div>
|
|
2270
2004
|
<div class="pf-v5-c-toolbar__group pf-m-filter-group">
|
|
2271
2005
|
<div class="pf-v5-c-toolbar__item">
|
|
2272
|
-
<
|
|
2273
|
-
|
|
2274
|
-
|
|
2275
|
-
|
|
2276
|
-
|
|
2277
|
-
|
|
2278
|
-
<
|
|
2279
|
-
class="
|
|
2280
|
-
|
|
2281
|
-
|
|
2282
|
-
|
|
2283
|
-
|
|
2284
|
-
|
|
2285
|
-
>
|
|
2286
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
2287
|
-
<span class="pf-v5-c-select__toggle-icon">
|
|
2288
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
2289
|
-
</span>
|
|
2290
|
-
<span class="pf-v5-c-select__toggle-text">Status</span>
|
|
2291
|
-
</div>
|
|
2292
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
2293
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2006
|
+
<button
|
|
2007
|
+
class="pf-v5-c-menu-toggle"
|
|
2008
|
+
type="button"
|
|
2009
|
+
aria-expanded="false"
|
|
2010
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-menu-toggle-status"
|
|
2011
|
+
>
|
|
2012
|
+
<span class="pf-v5-c-menu-toggle__icon">
|
|
2013
|
+
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
2014
|
+
</span>
|
|
2015
|
+
<span class="pf-v5-c-menu-toggle__text">Status</span>
|
|
2016
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
2017
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
2018
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
2294
2019
|
</span>
|
|
2295
|
-
</
|
|
2296
|
-
|
|
2297
|
-
<ul
|
|
2298
|
-
class="pf-v5-c-select__menu"
|
|
2299
|
-
role="listbox"
|
|
2300
|
-
aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-status-label"
|
|
2301
|
-
hidden
|
|
2302
|
-
style="width: 175px"
|
|
2303
|
-
>
|
|
2304
|
-
<li role="presentation">
|
|
2305
|
-
<button
|
|
2306
|
-
class="pf-v5-c-select__menu-item"
|
|
2307
|
-
role="option"
|
|
2308
|
-
>Running</button>
|
|
2309
|
-
</li>
|
|
2310
|
-
<li role="presentation">
|
|
2311
|
-
<button
|
|
2312
|
-
class="pf-v5-c-select__menu-item pf-m-selected"
|
|
2313
|
-
role="option"
|
|
2314
|
-
aria-selected="true"
|
|
2315
|
-
>
|
|
2316
|
-
Stopped
|
|
2317
|
-
<span class="pf-v5-c-select__menu-item-icon">
|
|
2318
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
2319
|
-
</span>
|
|
2320
|
-
</button>
|
|
2321
|
-
</li>
|
|
2322
|
-
<li role="presentation">
|
|
2323
|
-
<button class="pf-v5-c-select__menu-item" role="option">Down</button>
|
|
2324
|
-
</li>
|
|
2325
|
-
<li role="presentation">
|
|
2326
|
-
<button
|
|
2327
|
-
class="pf-v5-c-select__menu-item"
|
|
2328
|
-
role="option"
|
|
2329
|
-
>Degraded</button>
|
|
2330
|
-
</li>
|
|
2331
|
-
<li role="presentation">
|
|
2332
|
-
<button
|
|
2333
|
-
class="pf-v5-c-select__menu-item"
|
|
2334
|
-
role="option"
|
|
2335
|
-
>Needs maintenance</button>
|
|
2336
|
-
</li>
|
|
2337
|
-
</ul>
|
|
2338
|
-
</div>
|
|
2020
|
+
</span>
|
|
2021
|
+
</button>
|
|
2339
2022
|
</div>
|
|
2340
2023
|
<div class="pf-v5-c-toolbar__item">
|
|
2341
|
-
<
|
|
2342
|
-
|
|
2343
|
-
|
|
2344
|
-
|
|
2345
|
-
|
|
2346
|
-
|
|
2347
|
-
<
|
|
2348
|
-
|
|
2349
|
-
|
|
2350
|
-
|
|
2351
|
-
aria-haspopup="true"
|
|
2352
|
-
aria-expanded="true"
|
|
2353
|
-
aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-label toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-toggle"
|
|
2354
|
-
>
|
|
2355
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
2356
|
-
<span class="pf-v5-c-select__toggle-text">Filter by status</span>
|
|
2357
|
-
</div>
|
|
2358
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
2359
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2024
|
+
<button
|
|
2025
|
+
class="pf-v5-c-menu-toggle pf-m-expanded"
|
|
2026
|
+
type="button"
|
|
2027
|
+
aria-expanded="true"
|
|
2028
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-menu-toggle-filter-by-status"
|
|
2029
|
+
>
|
|
2030
|
+
<span class="pf-v5-c-menu-toggle__text">Filter by status</span>
|
|
2031
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
2032
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
2033
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
2360
2034
|
</span>
|
|
2361
|
-
</
|
|
2362
|
-
|
|
2363
|
-
|
|
2364
|
-
|
|
2365
|
-
|
|
2366
|
-
|
|
2367
|
-
|
|
2368
|
-
|
|
2369
|
-
|
|
2370
|
-
|
|
2371
|
-
|
|
2372
|
-
|
|
2373
|
-
|
|
2374
|
-
|
|
2375
|
-
|
|
2376
|
-
|
|
2377
|
-
|
|
2378
|
-
|
|
2379
|
-
|
|
2380
|
-
|
|
2381
|
-
|
|
2382
|
-
|
|
2383
|
-
|
|
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
|
-
|
|
2414
|
-
|
|
2415
|
-
|
|
2416
|
-
|
|
2417
|
-
|
|
2418
|
-
|
|
2419
|
-
|
|
2420
|
-
|
|
2421
|
-
|
|
2422
|
-
|
|
2423
|
-
|
|
2424
|
-
|
|
2425
|
-
|
|
2426
|
-
|
|
2427
|
-
|
|
2428
|
-
|
|
2429
|
-
|
|
2430
|
-
|
|
2431
|
-
|
|
2432
|
-
|
|
2433
|
-
|
|
2434
|
-
|
|
2435
|
-
|
|
2436
|
-
|
|
2035
|
+
</span>
|
|
2036
|
+
</button>
|
|
2037
|
+
<div class="pf-v5-c-panel">
|
|
2038
|
+
<div class="pf-v5-c-menu">
|
|
2039
|
+
<div class="pf-v5-c-menu__content">
|
|
2040
|
+
<ul class="pf-v5-c-menu__list" role="menu">
|
|
2041
|
+
<li class="pf-v5-c-menu__list-item" role="menuitem">
|
|
2042
|
+
<label
|
|
2043
|
+
class="pf-v5-c-menu__item"
|
|
2044
|
+
for="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check1"
|
|
2045
|
+
>
|
|
2046
|
+
<span class="pf-v5-c-menu__item-main">
|
|
2047
|
+
<span class="pf-v5-c-menu__item-check">
|
|
2048
|
+
<div
|
|
2049
|
+
class="pf-v5-c-check pf-m-standalone"
|
|
2050
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check1"
|
|
2051
|
+
>
|
|
2052
|
+
<input
|
|
2053
|
+
class="pf-v5-c-check__input"
|
|
2054
|
+
type="checkbox"
|
|
2055
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check1-input"
|
|
2056
|
+
name="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check1-input"
|
|
2057
|
+
aria-label="Standalone check"
|
|
2058
|
+
/>
|
|
2059
|
+
</div>
|
|
2060
|
+
</span>
|
|
2061
|
+
<span class="pf-v5-c-menu__item-text">Active</span>
|
|
2062
|
+
</span>
|
|
2063
|
+
</label>
|
|
2064
|
+
</li>
|
|
2065
|
+
<li class="pf-v5-c-menu__list-item" role="menuitem">
|
|
2066
|
+
<label
|
|
2067
|
+
class="pf-v5-c-menu__item"
|
|
2068
|
+
for="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check2"
|
|
2069
|
+
>
|
|
2070
|
+
<span class="pf-v5-c-menu__item-main">
|
|
2071
|
+
<span class="pf-v5-c-menu__item-check">
|
|
2072
|
+
<div
|
|
2073
|
+
class="pf-v5-c-check pf-m-standalone"
|
|
2074
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check2"
|
|
2075
|
+
>
|
|
2076
|
+
<input
|
|
2077
|
+
class="pf-v5-c-check__input"
|
|
2078
|
+
type="checkbox"
|
|
2079
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check2-input"
|
|
2080
|
+
name="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check2-input"
|
|
2081
|
+
aria-label="Standalone check"
|
|
2082
|
+
checked
|
|
2083
|
+
/>
|
|
2084
|
+
</div>
|
|
2085
|
+
</span>
|
|
2086
|
+
<span class="pf-v5-c-menu__item-text">Cancelled</span>
|
|
2087
|
+
</span>
|
|
2088
|
+
</label>
|
|
2089
|
+
</li>
|
|
2090
|
+
<li class="pf-v5-c-menu__list-item" role="menuitem">
|
|
2091
|
+
<label
|
|
2092
|
+
class="pf-v5-c-menu__item"
|
|
2093
|
+
for="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check3"
|
|
2094
|
+
>
|
|
2095
|
+
<span class="pf-v5-c-menu__item-main">
|
|
2096
|
+
<span class="pf-v5-c-menu__item-check">
|
|
2097
|
+
<div
|
|
2098
|
+
class="pf-v5-c-check pf-m-standalone"
|
|
2099
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check3"
|
|
2100
|
+
>
|
|
2101
|
+
<input
|
|
2102
|
+
class="pf-v5-c-check__input"
|
|
2103
|
+
type="checkbox"
|
|
2104
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check3-input"
|
|
2105
|
+
name="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check3-input"
|
|
2106
|
+
aria-label="Standalone check"
|
|
2107
|
+
checked
|
|
2108
|
+
/>
|
|
2109
|
+
</div>
|
|
2110
|
+
</span>
|
|
2111
|
+
<span class="pf-v5-c-menu__item-text">Paused</span>
|
|
2112
|
+
</span>
|
|
2113
|
+
</label>
|
|
2114
|
+
</li>
|
|
2115
|
+
<li class="pf-v5-c-menu__list-item" role="menuitem">
|
|
2116
|
+
<label
|
|
2117
|
+
class="pf-v5-c-menu__item"
|
|
2118
|
+
for="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check4"
|
|
2119
|
+
>
|
|
2120
|
+
<span class="pf-v5-c-menu__item-main">
|
|
2121
|
+
<span class="pf-v5-c-menu__item-check">
|
|
2122
|
+
<div
|
|
2123
|
+
class="pf-v5-c-check pf-m-standalone"
|
|
2124
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check4"
|
|
2125
|
+
>
|
|
2126
|
+
<input
|
|
2127
|
+
class="pf-v5-c-check__input"
|
|
2128
|
+
type="checkbox"
|
|
2129
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check4-input"
|
|
2130
|
+
name="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check4-input"
|
|
2131
|
+
aria-label="Standalone check"
|
|
2132
|
+
/>
|
|
2133
|
+
</div>
|
|
2134
|
+
</span>
|
|
2135
|
+
<span class="pf-v5-c-menu__item-text">Warning</span>
|
|
2136
|
+
</span>
|
|
2137
|
+
</label>
|
|
2138
|
+
</li>
|
|
2139
|
+
<li class="pf-v5-c-menu__list-item" role="menuitem">
|
|
2140
|
+
<label
|
|
2141
|
+
class="pf-v5-c-menu__item"
|
|
2142
|
+
for="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check5"
|
|
2143
|
+
>
|
|
2144
|
+
<span class="pf-v5-c-menu__item-main">
|
|
2145
|
+
<span class="pf-v5-c-menu__item-check">
|
|
2146
|
+
<div
|
|
2147
|
+
class="pf-v5-c-check pf-m-standalone"
|
|
2148
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check5"
|
|
2149
|
+
>
|
|
2150
|
+
<input
|
|
2151
|
+
class="pf-v5-c-check__input"
|
|
2152
|
+
type="checkbox"
|
|
2153
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check5-input"
|
|
2154
|
+
name="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check5-input"
|
|
2155
|
+
aria-label="Standalone check"
|
|
2156
|
+
/>
|
|
2157
|
+
</div>
|
|
2158
|
+
</span>
|
|
2159
|
+
<span class="pf-v5-c-menu__item-text">Restarted</span>
|
|
2160
|
+
</span>
|
|
2161
|
+
</label>
|
|
2162
|
+
</li>
|
|
2163
|
+
</ul>
|
|
2164
|
+
</div>
|
|
2437
2165
|
</div>
|
|
2438
2166
|
</div>
|
|
2439
2167
|
</div>
|
|
@@ -2442,7 +2170,7 @@ section: components
|
|
|
2442
2170
|
<div class="pf-v5-c-toolbar__item pf-m-overflow-menu">
|
|
2443
2171
|
<div
|
|
2444
2172
|
class="pf-v5-c-overflow-menu"
|
|
2445
|
-
id="toolbar-attribute-value-checkbox-
|
|
2173
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-overflow-menu"
|
|
2446
2174
|
>
|
|
2447
2175
|
<div class="pf-v5-c-overflow-menu__content">
|
|
2448
2176
|
<div class="pf-v5-c-overflow-menu__group pf-m-button-group">
|
|
@@ -2466,7 +2194,7 @@ section: components
|
|
|
2466
2194
|
<button
|
|
2467
2195
|
class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
|
|
2468
2196
|
type="button"
|
|
2469
|
-
id="toolbar-attribute-value-checkbox-
|
|
2197
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-overflow-menu-dropdown-toggle"
|
|
2470
2198
|
aria-label="Overflow menu"
|
|
2471
2199
|
aria-expanded="false"
|
|
2472
2200
|
>
|
|
@@ -2475,7 +2203,7 @@ section: components
|
|
|
2475
2203
|
<ul
|
|
2476
2204
|
class="pf-v5-c-dropdown__menu"
|
|
2477
2205
|
role="menu"
|
|
2478
|
-
aria-labelledby="toolbar-attribute-value-checkbox-
|
|
2206
|
+
aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-overflow-menu-dropdown-toggle"
|
|
2479
2207
|
hidden
|
|
2480
2208
|
>
|
|
2481
2209
|
<li role="none">
|
|
@@ -2500,7 +2228,7 @@ section: components
|
|
|
2500
2228
|
<button
|
|
2501
2229
|
class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
|
|
2502
2230
|
type="button"
|
|
2503
|
-
id="toolbar-attribute-value-checkbox-
|
|
2231
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-pagination-options-menu-toggle"
|
|
2504
2232
|
aria-haspopup="listbox"
|
|
2505
2233
|
aria-expanded="false"
|
|
2506
2234
|
>
|
|
@@ -2515,7 +2243,7 @@ section: components
|
|
|
2515
2243
|
<ul
|
|
2516
2244
|
class="pf-v5-c-options-menu__menu"
|
|
2517
2245
|
role="menu"
|
|
2518
|
-
aria-labelledby="toolbar-attribute-value-checkbox-
|
|
2246
|
+
aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-pagination-options-menu-toggle"
|
|
2519
2247
|
hidden
|
|
2520
2248
|
>
|
|
2521
2249
|
<li role="none">
|
|
@@ -2573,7 +2301,7 @@ section: components
|
|
|
2573
2301
|
</div>
|
|
2574
2302
|
<div
|
|
2575
2303
|
class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
|
|
2576
|
-
id="toolbar-attribute-value-checkbox-
|
|
2304
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-expandable-content"
|
|
2577
2305
|
hidden
|
|
2578
2306
|
></div>
|
|
2579
2307
|
</div>
|
|
@@ -2583,28 +2311,28 @@ section: components
|
|
|
2583
2311
|
<div class="pf-v5-c-chip-group__main">
|
|
2584
2312
|
<span
|
|
2585
2313
|
class="pf-v5-c-chip-group__label"
|
|
2586
|
-
id="toolbar-attribute-value-checkbox-
|
|
2314
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-group-chip-group-label"
|
|
2587
2315
|
>Status</span>
|
|
2588
2316
|
<ul
|
|
2589
2317
|
class="pf-v5-c-chip-group__list"
|
|
2590
2318
|
role="list"
|
|
2591
|
-
aria-labelledby="toolbar-attribute-value-checkbox-
|
|
2319
|
+
aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-group-chip-group-label"
|
|
2592
2320
|
>
|
|
2593
2321
|
<li class="pf-v5-c-chip-group__list-item">
|
|
2594
2322
|
<div class="pf-v5-c-chip">
|
|
2595
2323
|
<span class="pf-v5-c-chip__content">
|
|
2596
2324
|
<span
|
|
2597
2325
|
class="pf-v5-c-chip__text"
|
|
2598
|
-
id="toolbar-attribute-value-checkbox-
|
|
2326
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-group-chip-one"
|
|
2599
2327
|
>Canceled</span>
|
|
2600
2328
|
</span>
|
|
2601
2329
|
<span class="pf-v5-c-chip__actions">
|
|
2602
2330
|
<button
|
|
2603
2331
|
class="pf-v5-c-button pf-m-plain"
|
|
2604
2332
|
type="button"
|
|
2605
|
-
aria-labelledby="toolbar-attribute-value-checkbox-
|
|
2333
|
+
aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-groupremove-chip-one toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-groupchip-one"
|
|
2606
2334
|
aria-label="Remove"
|
|
2607
|
-
id="toolbar-attribute-value-checkbox-
|
|
2335
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-groupremove-chip-one"
|
|
2608
2336
|
>
|
|
2609
2337
|
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2610
2338
|
</button>
|
|
@@ -2616,16 +2344,16 @@ section: components
|
|
|
2616
2344
|
<span class="pf-v5-c-chip__content">
|
|
2617
2345
|
<span
|
|
2618
2346
|
class="pf-v5-c-chip__text"
|
|
2619
|
-
id="toolbar-attribute-value-checkbox-
|
|
2347
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-groupchip-two"
|
|
2620
2348
|
>Paused</span>
|
|
2621
2349
|
</span>
|
|
2622
2350
|
<span class="pf-v5-c-chip__actions">
|
|
2623
2351
|
<button
|
|
2624
2352
|
class="pf-v5-c-button pf-m-plain"
|
|
2625
2353
|
type="button"
|
|
2626
|
-
aria-labelledby="toolbar-attribute-value-checkbox-
|
|
2354
|
+
aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-groupremove-chip-two toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-groupchip-two"
|
|
2627
2355
|
aria-label="Remove"
|
|
2628
|
-
id="toolbar-attribute-value-checkbox-
|
|
2356
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-groupremove-chip-two"
|
|
2629
2357
|
>
|
|
2630
2358
|
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2631
2359
|
</button>
|
|
@@ -2637,16 +2365,16 @@ section: components
|
|
|
2637
2365
|
<span class="pf-v5-c-chip__content">
|
|
2638
2366
|
<span
|
|
2639
2367
|
class="pf-v5-c-chip__text"
|
|
2640
|
-
id="toolbar-attribute-value-checkbox-
|
|
2368
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-groupchip-three"
|
|
2641
2369
|
>Restarted</span>
|
|
2642
2370
|
</span>
|
|
2643
2371
|
<span class="pf-v5-c-chip__actions">
|
|
2644
2372
|
<button
|
|
2645
2373
|
class="pf-v5-c-button pf-m-plain"
|
|
2646
2374
|
type="button"
|
|
2647
|
-
aria-labelledby="toolbar-attribute-value-checkbox-
|
|
2375
|
+
aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-groupremove-chip-three toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-groupchip-three"
|
|
2648
2376
|
aria-label="Remove"
|
|
2649
|
-
id="toolbar-attribute-value-checkbox-
|
|
2377
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-groupremove-chip-three"
|
|
2650
2378
|
>
|
|
2651
2379
|
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2652
2380
|
</button>
|
|
@@ -2668,23 +2396,23 @@ section: components
|
|
|
2668
2396
|
|
|
2669
2397
|
```
|
|
2670
2398
|
|
|
2671
|
-
### Toolbar attribute value checkbox
|
|
2399
|
+
### Toolbar attribute value checkbox menu toggle filter on mobile
|
|
2672
2400
|
|
|
2673
2401
|
```html
|
|
2674
2402
|
<div
|
|
2675
2403
|
class="pf-v5-c-toolbar"
|
|
2676
|
-
id="toolbar-attribute-value-checkbox-
|
|
2404
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example"
|
|
2677
2405
|
>
|
|
2678
2406
|
<div class="pf-v5-c-toolbar__content">
|
|
2679
2407
|
<div class="pf-v5-c-toolbar__content-section">
|
|
2680
2408
|
<div class="pf-v5-c-toolbar__group pf-m-toggle-group">
|
|
2681
|
-
<div class="pf-v5-c-toolbar__toggle
|
|
2409
|
+
<div class="pf-v5-c-toolbar__toggle">
|
|
2682
2410
|
<button
|
|
2683
|
-
class="pf-v5-c-
|
|
2411
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
|
|
2684
2412
|
type="button"
|
|
2685
|
-
aria-label="Show filters"
|
|
2686
2413
|
aria-expanded="true"
|
|
2687
|
-
aria-
|
|
2414
|
+
aria-label="Show filters"
|
|
2415
|
+
aria-controls="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-expandable-content"
|
|
2688
2416
|
>
|
|
2689
2417
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
2690
2418
|
</button>
|
|
@@ -2693,14 +2421,14 @@ section: components
|
|
|
2693
2421
|
<div class="pf-v5-c-toolbar__item pf-m-overflow-menu">
|
|
2694
2422
|
<div
|
|
2695
2423
|
class="pf-v5-c-overflow-menu"
|
|
2696
|
-
id="toolbar-attribute-value-checkbox-
|
|
2424
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-overflow-menu"
|
|
2697
2425
|
>
|
|
2698
2426
|
<div class="pf-v5-c-overflow-menu__control">
|
|
2699
2427
|
<div class="pf-v5-c-dropdown">
|
|
2700
2428
|
<button
|
|
2701
2429
|
class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
|
|
2702
2430
|
type="button"
|
|
2703
|
-
id="toolbar-attribute-value-checkbox-
|
|
2431
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-overflow-menu-dropdown-toggle"
|
|
2704
2432
|
aria-label="Overflow menu"
|
|
2705
2433
|
aria-expanded="false"
|
|
2706
2434
|
>
|
|
@@ -2709,7 +2437,7 @@ section: components
|
|
|
2709
2437
|
<ul
|
|
2710
2438
|
class="pf-v5-c-dropdown__menu"
|
|
2711
2439
|
role="menu"
|
|
2712
|
-
aria-labelledby="toolbar-attribute-value-checkbox-
|
|
2440
|
+
aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-overflow-menu-dropdown-toggle"
|
|
2713
2441
|
hidden
|
|
2714
2442
|
>
|
|
2715
2443
|
<li role="none">
|
|
@@ -2746,7 +2474,7 @@ section: components
|
|
|
2746
2474
|
<button
|
|
2747
2475
|
class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
|
|
2748
2476
|
type="button"
|
|
2749
|
-
id="toolbar-attribute-value-checkbox-
|
|
2477
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-pagination-options-menu-toggle"
|
|
2750
2478
|
aria-haspopup="listbox"
|
|
2751
2479
|
aria-expanded="false"
|
|
2752
2480
|
>
|
|
@@ -2761,7 +2489,7 @@ section: components
|
|
|
2761
2489
|
<ul
|
|
2762
2490
|
class="pf-v5-c-options-menu__menu"
|
|
2763
2491
|
role="menu"
|
|
2764
|
-
aria-labelledby="toolbar-attribute-value-checkbox-
|
|
2492
|
+
aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-pagination-options-menu-toggle"
|
|
2765
2493
|
hidden
|
|
2766
2494
|
>
|
|
2767
2495
|
<li role="none">
|
|
@@ -2819,168 +2547,169 @@ section: components
|
|
|
2819
2547
|
</div>
|
|
2820
2548
|
<div
|
|
2821
2549
|
class="pf-v5-c-toolbar__expandable-content pf-m-expanded"
|
|
2822
|
-
id="toolbar-attribute-value-checkbox-
|
|
2550
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-expandable-content"
|
|
2823
2551
|
>
|
|
2824
2552
|
<div class="pf-v5-c-toolbar__group pf-m-filter-group">
|
|
2825
2553
|
<div class="pf-v5-c-toolbar__item">
|
|
2826
|
-
<
|
|
2827
|
-
|
|
2828
|
-
|
|
2829
|
-
|
|
2830
|
-
|
|
2831
|
-
|
|
2832
|
-
<
|
|
2833
|
-
class="
|
|
2834
|
-
|
|
2835
|
-
|
|
2836
|
-
|
|
2837
|
-
|
|
2838
|
-
|
|
2839
|
-
>
|
|
2840
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
2841
|
-
<span class="pf-v5-c-select__toggle-icon">
|
|
2842
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
2843
|
-
</span>
|
|
2844
|
-
<span class="pf-v5-c-select__toggle-text">Status</span>
|
|
2845
|
-
</div>
|
|
2846
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
2847
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2554
|
+
<button
|
|
2555
|
+
class="pf-v5-c-menu-toggle"
|
|
2556
|
+
type="button"
|
|
2557
|
+
aria-expanded="false"
|
|
2558
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-menu-toggle-status"
|
|
2559
|
+
>
|
|
2560
|
+
<span class="pf-v5-c-menu-toggle__icon">
|
|
2561
|
+
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
2562
|
+
</span>
|
|
2563
|
+
<span class="pf-v5-c-menu-toggle__text">Status</span>
|
|
2564
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
2565
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
2566
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
2848
2567
|
</span>
|
|
2849
|
-
</
|
|
2850
|
-
|
|
2851
|
-
<ul
|
|
2852
|
-
class="pf-v5-c-select__menu"
|
|
2853
|
-
role="listbox"
|
|
2854
|
-
aria-labelledby="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-status-expanded-label"
|
|
2855
|
-
hidden
|
|
2856
|
-
>
|
|
2857
|
-
<li role="presentation">
|
|
2858
|
-
<button class="pf-v5-c-select__menu-item" role="option">Running</button>
|
|
2859
|
-
</li>
|
|
2860
|
-
<li role="presentation">
|
|
2861
|
-
<button
|
|
2862
|
-
class="pf-v5-c-select__menu-item pf-m-selected"
|
|
2863
|
-
role="option"
|
|
2864
|
-
aria-selected="true"
|
|
2865
|
-
>
|
|
2866
|
-
Stopped
|
|
2867
|
-
<span class="pf-v5-c-select__menu-item-icon">
|
|
2868
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
2869
|
-
</span>
|
|
2870
|
-
</button>
|
|
2871
|
-
</li>
|
|
2872
|
-
<li role="presentation">
|
|
2873
|
-
<button class="pf-v5-c-select__menu-item" role="option">Down</button>
|
|
2874
|
-
</li>
|
|
2875
|
-
<li role="presentation">
|
|
2876
|
-
<button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
|
|
2877
|
-
</li>
|
|
2878
|
-
<li role="presentation">
|
|
2879
|
-
<button
|
|
2880
|
-
class="pf-v5-c-select__menu-item"
|
|
2881
|
-
role="option"
|
|
2882
|
-
>Needs maintenance</button>
|
|
2883
|
-
</li>
|
|
2884
|
-
</ul>
|
|
2885
|
-
</div>
|
|
2568
|
+
</span>
|
|
2569
|
+
</button>
|
|
2886
2570
|
</div>
|
|
2887
2571
|
<div class="pf-v5-c-toolbar__item">
|
|
2888
|
-
<
|
|
2889
|
-
|
|
2890
|
-
|
|
2891
|
-
|
|
2892
|
-
|
|
2893
|
-
|
|
2894
|
-
<
|
|
2895
|
-
|
|
2896
|
-
|
|
2897
|
-
|
|
2898
|
-
aria-haspopup="true"
|
|
2899
|
-
aria-expanded="false"
|
|
2900
|
-
aria-labelledby="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-label toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-toggle"
|
|
2901
|
-
>
|
|
2902
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
2903
|
-
<span class="pf-v5-c-select__toggle-text">Filter by status</span>
|
|
2904
|
-
</div>
|
|
2905
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
2906
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2572
|
+
<button
|
|
2573
|
+
class="pf-v5-c-menu-toggle pf-m-expanded"
|
|
2574
|
+
type="button"
|
|
2575
|
+
aria-expanded="true"
|
|
2576
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-menu-toggle-filter-by-status"
|
|
2577
|
+
>
|
|
2578
|
+
<span class="pf-v5-c-menu-toggle__text">Filter by status</span>
|
|
2579
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
2580
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
2581
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
2907
2582
|
</span>
|
|
2908
|
-
</
|
|
2909
|
-
|
|
2910
|
-
|
|
2911
|
-
|
|
2912
|
-
|
|
2913
|
-
|
|
2914
|
-
|
|
2915
|
-
|
|
2916
|
-
|
|
2917
|
-
|
|
2918
|
-
|
|
2919
|
-
|
|
2920
|
-
|
|
2921
|
-
|
|
2922
|
-
|
|
2923
|
-
|
|
2924
|
-
|
|
2925
|
-
|
|
2926
|
-
|
|
2927
|
-
|
|
2928
|
-
|
|
2929
|
-
|
|
2930
|
-
|
|
2931
|
-
|
|
2932
|
-
|
|
2933
|
-
|
|
2934
|
-
|
|
2935
|
-
|
|
2936
|
-
|
|
2937
|
-
|
|
2938
|
-
|
|
2939
|
-
|
|
2940
|
-
|
|
2941
|
-
|
|
2942
|
-
|
|
2943
|
-
|
|
2944
|
-
|
|
2945
|
-
|
|
2946
|
-
|
|
2947
|
-
|
|
2948
|
-
|
|
2949
|
-
|
|
2950
|
-
|
|
2951
|
-
|
|
2952
|
-
|
|
2953
|
-
|
|
2954
|
-
|
|
2955
|
-
|
|
2956
|
-
|
|
2957
|
-
|
|
2958
|
-
|
|
2959
|
-
|
|
2960
|
-
|
|
2961
|
-
|
|
2962
|
-
|
|
2963
|
-
|
|
2964
|
-
|
|
2965
|
-
|
|
2966
|
-
|
|
2967
|
-
|
|
2968
|
-
|
|
2969
|
-
|
|
2970
|
-
|
|
2971
|
-
|
|
2972
|
-
|
|
2973
|
-
|
|
2974
|
-
|
|
2975
|
-
|
|
2976
|
-
|
|
2977
|
-
|
|
2978
|
-
|
|
2979
|
-
|
|
2980
|
-
|
|
2981
|
-
|
|
2982
|
-
|
|
2983
|
-
|
|
2583
|
+
</span>
|
|
2584
|
+
</button>
|
|
2585
|
+
<div class="pf-v5-c-panel">
|
|
2586
|
+
<div class="pf-v5-c-menu">
|
|
2587
|
+
<div class="pf-v5-c-menu__content">
|
|
2588
|
+
<ul class="pf-v5-c-menu__list" role="menu">
|
|
2589
|
+
<li class="pf-v5-c-menu__list-item" role="menuitem">
|
|
2590
|
+
<label
|
|
2591
|
+
class="pf-v5-c-menu__item"
|
|
2592
|
+
for="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check1"
|
|
2593
|
+
>
|
|
2594
|
+
<span class="pf-v5-c-menu__item-main">
|
|
2595
|
+
<span class="pf-v5-c-menu__item-check">
|
|
2596
|
+
<div
|
|
2597
|
+
class="pf-v5-c-check pf-m-standalone"
|
|
2598
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check1"
|
|
2599
|
+
>
|
|
2600
|
+
<input
|
|
2601
|
+
class="pf-v5-c-check__input"
|
|
2602
|
+
type="checkbox"
|
|
2603
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check1-input"
|
|
2604
|
+
name="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check1-input"
|
|
2605
|
+
aria-label="Standalone check"
|
|
2606
|
+
/>
|
|
2607
|
+
</div>
|
|
2608
|
+
</span>
|
|
2609
|
+
<span class="pf-v5-c-menu__item-text">Active</span>
|
|
2610
|
+
</span>
|
|
2611
|
+
</label>
|
|
2612
|
+
</li>
|
|
2613
|
+
<li class="pf-v5-c-menu__list-item" role="menuitem">
|
|
2614
|
+
<label
|
|
2615
|
+
class="pf-v5-c-menu__item"
|
|
2616
|
+
for="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check2"
|
|
2617
|
+
>
|
|
2618
|
+
<span class="pf-v5-c-menu__item-main">
|
|
2619
|
+
<span class="pf-v5-c-menu__item-check">
|
|
2620
|
+
<div
|
|
2621
|
+
class="pf-v5-c-check pf-m-standalone"
|
|
2622
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check2"
|
|
2623
|
+
>
|
|
2624
|
+
<input
|
|
2625
|
+
class="pf-v5-c-check__input"
|
|
2626
|
+
type="checkbox"
|
|
2627
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check2-input"
|
|
2628
|
+
name="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check2-input"
|
|
2629
|
+
aria-label="Standalone check"
|
|
2630
|
+
checked
|
|
2631
|
+
/>
|
|
2632
|
+
</div>
|
|
2633
|
+
</span>
|
|
2634
|
+
<span class="pf-v5-c-menu__item-text">Cancelled</span>
|
|
2635
|
+
</span>
|
|
2636
|
+
</label>
|
|
2637
|
+
</li>
|
|
2638
|
+
<li class="pf-v5-c-menu__list-item" role="menuitem">
|
|
2639
|
+
<label
|
|
2640
|
+
class="pf-v5-c-menu__item"
|
|
2641
|
+
for="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check3"
|
|
2642
|
+
>
|
|
2643
|
+
<span class="pf-v5-c-menu__item-main">
|
|
2644
|
+
<span class="pf-v5-c-menu__item-check">
|
|
2645
|
+
<div
|
|
2646
|
+
class="pf-v5-c-check pf-m-standalone"
|
|
2647
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check3"
|
|
2648
|
+
>
|
|
2649
|
+
<input
|
|
2650
|
+
class="pf-v5-c-check__input"
|
|
2651
|
+
type="checkbox"
|
|
2652
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check3-input"
|
|
2653
|
+
name="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check3-input"
|
|
2654
|
+
aria-label="Standalone check"
|
|
2655
|
+
checked
|
|
2656
|
+
/>
|
|
2657
|
+
</div>
|
|
2658
|
+
</span>
|
|
2659
|
+
<span class="pf-v5-c-menu__item-text">Paused</span>
|
|
2660
|
+
</span>
|
|
2661
|
+
</label>
|
|
2662
|
+
</li>
|
|
2663
|
+
<li class="pf-v5-c-menu__list-item" role="menuitem">
|
|
2664
|
+
<label
|
|
2665
|
+
class="pf-v5-c-menu__item"
|
|
2666
|
+
for="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check4"
|
|
2667
|
+
>
|
|
2668
|
+
<span class="pf-v5-c-menu__item-main">
|
|
2669
|
+
<span class="pf-v5-c-menu__item-check">
|
|
2670
|
+
<div
|
|
2671
|
+
class="pf-v5-c-check pf-m-standalone"
|
|
2672
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check4"
|
|
2673
|
+
>
|
|
2674
|
+
<input
|
|
2675
|
+
class="pf-v5-c-check__input"
|
|
2676
|
+
type="checkbox"
|
|
2677
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check4-input"
|
|
2678
|
+
name="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check4-input"
|
|
2679
|
+
aria-label="Standalone check"
|
|
2680
|
+
/>
|
|
2681
|
+
</div>
|
|
2682
|
+
</span>
|
|
2683
|
+
<span class="pf-v5-c-menu__item-text">Warning</span>
|
|
2684
|
+
</span>
|
|
2685
|
+
</label>
|
|
2686
|
+
</li>
|
|
2687
|
+
<li class="pf-v5-c-menu__list-item" role="menuitem">
|
|
2688
|
+
<label
|
|
2689
|
+
class="pf-v5-c-menu__item"
|
|
2690
|
+
for="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check5"
|
|
2691
|
+
>
|
|
2692
|
+
<span class="pf-v5-c-menu__item-main">
|
|
2693
|
+
<span class="pf-v5-c-menu__item-check">
|
|
2694
|
+
<div
|
|
2695
|
+
class="pf-v5-c-check pf-m-standalone"
|
|
2696
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check5"
|
|
2697
|
+
>
|
|
2698
|
+
<input
|
|
2699
|
+
class="pf-v5-c-check__input"
|
|
2700
|
+
type="checkbox"
|
|
2701
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check5-input"
|
|
2702
|
+
name="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check5-input"
|
|
2703
|
+
aria-label="Standalone check"
|
|
2704
|
+
/>
|
|
2705
|
+
</div>
|
|
2706
|
+
</span>
|
|
2707
|
+
<span class="pf-v5-c-menu__item-text">Restarted</span>
|
|
2708
|
+
</span>
|
|
2709
|
+
</label>
|
|
2710
|
+
</li>
|
|
2711
|
+
</ul>
|
|
2712
|
+
</div>
|
|
2984
2713
|
</div>
|
|
2985
2714
|
</div>
|
|
2986
2715
|
</div>
|
|
@@ -2989,28 +2718,28 @@ section: components
|
|
|
2989
2718
|
<div class="pf-v5-c-chip-group__main">
|
|
2990
2719
|
<span
|
|
2991
2720
|
class="pf-v5-c-chip-group__label"
|
|
2992
|
-
id="toolbar-attribute-value-checkbox-
|
|
2721
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-group-chip-group-label"
|
|
2993
2722
|
>Status</span>
|
|
2994
2723
|
<ul
|
|
2995
2724
|
class="pf-v5-c-chip-group__list"
|
|
2996
2725
|
role="list"
|
|
2997
|
-
aria-labelledby="toolbar-attribute-value-checkbox-
|
|
2726
|
+
aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-group-chip-group-label"
|
|
2998
2727
|
>
|
|
2999
2728
|
<li class="pf-v5-c-chip-group__list-item">
|
|
3000
2729
|
<div class="pf-v5-c-chip">
|
|
3001
2730
|
<span class="pf-v5-c-chip__content">
|
|
3002
2731
|
<span
|
|
3003
2732
|
class="pf-v5-c-chip__text"
|
|
3004
|
-
id="toolbar-attribute-value-checkbox-
|
|
2733
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupchip-one"
|
|
3005
2734
|
>Canceled</span>
|
|
3006
2735
|
</span>
|
|
3007
2736
|
<span class="pf-v5-c-chip__actions">
|
|
3008
2737
|
<button
|
|
3009
2738
|
class="pf-v5-c-button pf-m-plain"
|
|
3010
2739
|
type="button"
|
|
3011
|
-
aria-labelledby="toolbar-attribute-value-checkbox-
|
|
2740
|
+
aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupremove-chip-one toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupchip-one"
|
|
3012
2741
|
aria-label="Remove"
|
|
3013
|
-
id="toolbar-attribute-value-checkbox-
|
|
2742
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupremove-chip-one"
|
|
3014
2743
|
>
|
|
3015
2744
|
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3016
2745
|
</button>
|
|
@@ -3022,16 +2751,16 @@ section: components
|
|
|
3022
2751
|
<span class="pf-v5-c-chip__content">
|
|
3023
2752
|
<span
|
|
3024
2753
|
class="pf-v5-c-chip__text"
|
|
3025
|
-
id="toolbar-attribute-value-checkbox-
|
|
2754
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupchip-two"
|
|
3026
2755
|
>Paused</span>
|
|
3027
2756
|
</span>
|
|
3028
2757
|
<span class="pf-v5-c-chip__actions">
|
|
3029
2758
|
<button
|
|
3030
2759
|
class="pf-v5-c-button pf-m-plain"
|
|
3031
2760
|
type="button"
|
|
3032
|
-
aria-labelledby="toolbar-attribute-value-checkbox-
|
|
2761
|
+
aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupremove-chip-two toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupchip-two"
|
|
3033
2762
|
aria-label="Remove"
|
|
3034
|
-
id="toolbar-attribute-value-checkbox-
|
|
2763
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupremove-chip-two"
|
|
3035
2764
|
>
|
|
3036
2765
|
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3037
2766
|
</button>
|
|
@@ -3043,16 +2772,16 @@ section: components
|
|
|
3043
2772
|
<span class="pf-v5-c-chip__content">
|
|
3044
2773
|
<span
|
|
3045
2774
|
class="pf-v5-c-chip__text"
|
|
3046
|
-
id="toolbar-attribute-value-checkbox-
|
|
2775
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupchip-three"
|
|
3047
2776
|
>Restarted</span>
|
|
3048
2777
|
</span>
|
|
3049
2778
|
<span class="pf-v5-c-chip__actions">
|
|
3050
2779
|
<button
|
|
3051
2780
|
class="pf-v5-c-button pf-m-plain"
|
|
3052
2781
|
type="button"
|
|
3053
|
-
aria-labelledby="toolbar-attribute-value-checkbox-
|
|
2782
|
+
aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupremove-chip-three toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupchip-three"
|
|
3054
2783
|
aria-label="Remove"
|
|
3055
|
-
id="toolbar-attribute-value-checkbox-
|
|
2784
|
+
id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupremove-chip-three"
|
|
3056
2785
|
>
|
|
3057
2786
|
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3058
2787
|
</button>
|
|
@@ -3355,10 +3084,10 @@ section: components
|
|
|
3355
3084
|
<div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show">
|
|
3356
3085
|
<div class="pf-v5-c-toolbar__toggle">
|
|
3357
3086
|
<button
|
|
3358
|
-
class="pf-v5-c-
|
|
3087
|
+
class="pf-v5-c-menu-toggle pf-m-plain"
|
|
3359
3088
|
type="button"
|
|
3360
|
-
aria-label="Show filters"
|
|
3361
3089
|
aria-expanded="false"
|
|
3090
|
+
aria-label="Show filters"
|
|
3362
3091
|
aria-controls="toolbar-pagination-management-example-toolbar-expandable-content"
|
|
3363
3092
|
>
|
|
3364
3093
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
@@ -3371,75 +3100,22 @@ section: components
|
|
|
3371
3100
|
role="group"
|
|
3372
3101
|
>
|
|
3373
3102
|
<div class="pf-v5-c-input-group__item">
|
|
3374
|
-
<
|
|
3375
|
-
|
|
3376
|
-
|
|
3377
|
-
|
|
3378
|
-
|
|
3379
|
-
|
|
3380
|
-
<
|
|
3381
|
-
class="
|
|
3382
|
-
|
|
3383
|
-
|
|
3384
|
-
|
|
3385
|
-
|
|
3386
|
-
|
|
3387
|
-
>
|
|
3388
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
3389
|
-
<span class="pf-v5-c-select__toggle-icon">
|
|
3390
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
3391
|
-
</span>
|
|
3392
|
-
<span class="pf-v5-c-select__toggle-text">Name</span>
|
|
3393
|
-
</div>
|
|
3394
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
3395
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
3103
|
+
<button
|
|
3104
|
+
class="pf-v5-c-menu-toggle"
|
|
3105
|
+
type="button"
|
|
3106
|
+
aria-expanded="false"
|
|
3107
|
+
id="toolbar-pagination-management-example-toolbar-search-filter-menu"
|
|
3108
|
+
>
|
|
3109
|
+
<span class="pf-v5-c-menu-toggle__icon">
|
|
3110
|
+
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
3111
|
+
</span>
|
|
3112
|
+
<span class="pf-v5-c-menu-toggle__text">Name</span>
|
|
3113
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
3114
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
3115
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
3396
3116
|
</span>
|
|
3397
|
-
</
|
|
3398
|
-
|
|
3399
|
-
<ul
|
|
3400
|
-
class="pf-v5-c-select__menu"
|
|
3401
|
-
role="listbox"
|
|
3402
|
-
aria-labelledby="toolbar-pagination-management-example-toolbar-select-name-label"
|
|
3403
|
-
hidden
|
|
3404
|
-
>
|
|
3405
|
-
<li role="presentation">
|
|
3406
|
-
<button
|
|
3407
|
-
class="pf-v5-c-select__menu-item"
|
|
3408
|
-
role="option"
|
|
3409
|
-
>Running</button>
|
|
3410
|
-
</li>
|
|
3411
|
-
<li role="presentation">
|
|
3412
|
-
<button
|
|
3413
|
-
class="pf-v5-c-select__menu-item pf-m-selected"
|
|
3414
|
-
role="option"
|
|
3415
|
-
aria-selected="true"
|
|
3416
|
-
>
|
|
3417
|
-
Stopped
|
|
3418
|
-
<span class="pf-v5-c-select__menu-item-icon">
|
|
3419
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
3420
|
-
</span>
|
|
3421
|
-
</button>
|
|
3422
|
-
</li>
|
|
3423
|
-
<li role="presentation">
|
|
3424
|
-
<button
|
|
3425
|
-
class="pf-v5-c-select__menu-item"
|
|
3426
|
-
role="option"
|
|
3427
|
-
>Down</button>
|
|
3428
|
-
</li>
|
|
3429
|
-
<li role="presentation">
|
|
3430
|
-
<button
|
|
3431
|
-
class="pf-v5-c-select__menu-item"
|
|
3432
|
-
role="option"
|
|
3433
|
-
>Degraded</button>
|
|
3434
|
-
</li>
|
|
3435
|
-
<li role="presentation">
|
|
3436
|
-
<button
|
|
3437
|
-
class="pf-v5-c-select__menu-item"
|
|
3438
|
-
role="option"
|
|
3439
|
-
>Needs maintenance</button>
|
|
3440
|
-
</li>
|
|
3441
|
-
</ul>
|
|
3442
|
-
</div>
|
|
3117
|
+
</span>
|
|
3118
|
+
</button>
|
|
3443
3119
|
</div>
|
|
3444
3120
|
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
3445
3121
|
<div class="pf-v5-c-text-input-group">
|