@patternfly/patternfly 5.0.0-alpha.30 → 5.0.0-alpha.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/components/InputGroup/input-group.css +61 -85
  2. package/components/InputGroup/input-group.scss +55 -61
  3. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  4. package/components/OptionsMenu/options-menu.css +0 -5
  5. package/components/OptionsMenu/options-menu.scss +0 -6
  6. package/components/Toolbar/toolbar.css +11 -4
  7. package/components/Toolbar/toolbar.scss +11 -5
  8. package/docs/components/CalendarMonth/examples/CalendarMonth.md +268 -252
  9. package/docs/components/DatePicker/examples/DatePicker.md +115 -91
  10. package/docs/components/FileUpload/examples/FileUpload.md +127 -91
  11. package/docs/components/InputGroup/examples/InputGroup.md +219 -169
  12. package/docs/components/NumberInput/examples/NumberInput.md +299 -227
  13. package/docs/components/SearchInput/examples/SearchInput.md +151 -113
  14. package/docs/components/Slider/examples/Slider.md +60 -38
  15. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -132
  16. package/docs/components/Toolbar/examples/Toolbar.md +374 -345
  17. package/docs/demos/DataList/examples/DataList.md +158 -150
  18. package/docs/demos/Form/examples/BasicForms.md +77 -66
  19. package/docs/demos/Masthead/examples/Masthead.md +279 -258
  20. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +21 -17
  21. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +103 -121
  22. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +266 -238
  23. package/docs/demos/Table/examples/Table.md +949 -901
  24. package/docs/demos/Toolbar/examples/Toolbar.md +313 -294
  25. package/package.json +1 -1
  26. package/patternfly-no-reset.css +71 -83
  27. package/patternfly.css +71 -83
  28. package/patternfly.min.css +1 -1
  29. package/patternfly.min.css.map +1 -1
package/docs/demos/Table/examples/Table.md CHANGED
@@ -947,86 +947,90 @@ wrapperTag: div
947
947
  aria-label="search filter"
948
948
  role="group"
949
949
  >
950
- <div class="pf-c-select" style="width: 175px">
951
- <span id="-select-name-label" hidden>Choose one</span>
950
+ <div class="pf-c-input-group__item pf-m-fill">
951
+ <div class="pf-c-select" style="width: 124px">
952
+ <span id="-select-name-label" hidden>Choose one</span>
952
953
 
953
- <button
954
- class="pf-c-select__toggle"
955
- type="button"
956
- id="-select-name-toggle"
957
- aria-haspopup="true"
958
- aria-expanded="false"
959
- aria-labelledby="-select-name-label -select-name-toggle"
960
- >
961
- <div class="pf-c-select__toggle-wrapper">
962
- <span class="pf-c-select__toggle-icon">
963
- <i class="fas fa-filter" aria-hidden="true"></i>
954
+ <button
955
+ class="pf-c-select__toggle"
956
+ type="button"
957
+ id="-select-name-toggle"
958
+ aria-haspopup="true"
959
+ aria-expanded="false"
960
+ aria-labelledby="-select-name-label -select-name-toggle"
961
+ >
962
+ <div class="pf-c-select__toggle-wrapper">
963
+ <span class="pf-c-select__toggle-icon">
964
+ <i class="fas fa-filter" aria-hidden="true"></i>
965
+ </span>
966
+ <span class="pf-c-select__toggle-text">Name</span>
967
+ </div>
968
+ <span class="pf-c-select__toggle-arrow">
969
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
964
970
  </span>
965
- <span class="pf-c-select__toggle-text">Name</span>
966
- </div>
967
- <span class="pf-c-select__toggle-arrow">
968
- <i class="fas fa-caret-down" aria-hidden="true"></i>
969
- </span>
970
- </button>
971
+ </button>
971
972
 
972
- <ul
973
- class="pf-c-select__menu"
974
- role="listbox"
975
- aria-labelledby="-select-name-label"
976
- hidden
977
- >
978
- <li role="presentation">
979
- <button
980
- class="pf-c-select__menu-item"
981
- role="option"
982
- >Running</button>
983
- </li>
984
- <li role="presentation">
985
- <button
986
- class="pf-c-select__menu-item pf-m-selected"
987
- role="option"
988
- aria-selected="true"
989
- >
990
- Stopped
991
- <span class="pf-c-select__menu-item-icon">
992
- <i class="fas fa-check" aria-hidden="true"></i>
993
- </span>
994
- </button>
995
- </li>
996
- <li role="presentation">
997
- <button
998
- class="pf-c-select__menu-item"
999
- role="option"
1000
- >Down</button>
1001
- </li>
1002
- <li role="presentation">
1003
- <button
1004
- class="pf-c-select__menu-item"
1005
- role="option"
1006
- >Degraded</button>
1007
- </li>
1008
- <li role="presentation">
1009
- <button
1010
- class="pf-c-select__menu-item"
1011
- role="option"
1012
- >Needs maintenance</button>
1013
- </li>
1014
- </ul>
973
+ <ul
974
+ class="pf-c-select__menu"
975
+ role="listbox"
976
+ aria-labelledby="-select-name-label"
977
+ hidden
978
+ >
979
+ <li role="presentation">
980
+ <button
981
+ class="pf-c-select__menu-item"
982
+ role="option"
983
+ >Running</button>
984
+ </li>
985
+ <li role="presentation">
986
+ <button
987
+ class="pf-c-select__menu-item pf-m-selected"
988
+ role="option"
989
+ aria-selected="true"
990
+ >
991
+ Stopped
992
+ <span class="pf-c-select__menu-item-icon">
993
+ <i class="fas fa-check" aria-hidden="true"></i>
994
+ </span>
995
+ </button>
996
+ </li>
997
+ <li role="presentation">
998
+ <button
999
+ class="pf-c-select__menu-item"
1000
+ role="option"
1001
+ >Down</button>
1002
+ </li>
1003
+ <li role="presentation">
1004
+ <button
1005
+ class="pf-c-select__menu-item"
1006
+ role="option"
1007
+ >Degraded</button>
1008
+ </li>
1009
+ <li role="presentation">
1010
+ <button
1011
+ class="pf-c-select__menu-item"
1012
+ role="option"
1013
+ >Needs maintenance</button>
1014
+ </li>
1015
+ </ul>
1016
+ </div>
1015
1017
  </div>
1016
- <div class="pf-c-text-input-group" style="width: auto">
1017
- <div class="pf-c-text-input-group__main pf-m-icon">
1018
- <span class="pf-c-text-input-group__text">
1019
- <span class="pf-c-text-input-group__icon">
1020
- <i class="fas fa-fw fa-search"></i>
1018
+ <div class="pf-c-input-group__item">
1019
+ <div class="pf-c-text-input-group" style="width: auto">
1020
+ <div class="pf-c-text-input-group__main pf-m-icon">
1021
+ <span class="pf-c-text-input-group__text">
1022
+ <span class="pf-c-text-input-group__icon">
1023
+ <i class="fas fa-fw fa-search"></i>
1024
+ </span>
1025
+ <input
1026
+ class="pf-c-text-input-group__text-input"
1027
+ type="search"
1028
+ placeholder="Filter by name"
1029
+ value
1030
+ aria-label="Type to filter"
1031
+ />
1021
1032
  </span>
1022
- <input
1023
- class="pf-c-text-input-group__text-input"
1024
- type="search"
1025
- placeholder="Filter by name"
1026
- value
1027
- aria-label="Type to filter"
1028
- />
1029
- </span>
1033
+ </div>
1030
1034
  </div>
1031
1035
  </div>
1032
1036
  </div>
@@ -2666,86 +2670,90 @@ wrapperTag: div
2666
2670
  aria-label="search filter"
2667
2671
  role="group"
2668
2672
  >
2669
- <div class="pf-c-select" style="width: 175px">
2670
- <span id="-select-name-label" hidden>Choose one</span>
2673
+ <div class="pf-c-input-group__item pf-m-fill">
2674
+ <div class="pf-c-select" style="width: 124px">
2675
+ <span id="-select-name-label" hidden>Choose one</span>
2671
2676
 
2672
- <button
2673
- class="pf-c-select__toggle"
2674
- type="button"
2675
- id="-select-name-toggle"
2676
- aria-haspopup="true"
2677
- aria-expanded="false"
2678
- aria-labelledby="-select-name-label -select-name-toggle"
2679
- >
2680
- <div class="pf-c-select__toggle-wrapper">
2681
- <span class="pf-c-select__toggle-icon">
2682
- <i class="fas fa-filter" aria-hidden="true"></i>
2677
+ <button
2678
+ class="pf-c-select__toggle"
2679
+ type="button"
2680
+ id="-select-name-toggle"
2681
+ aria-haspopup="true"
2682
+ aria-expanded="false"
2683
+ aria-labelledby="-select-name-label -select-name-toggle"
2684
+ >
2685
+ <div class="pf-c-select__toggle-wrapper">
2686
+ <span class="pf-c-select__toggle-icon">
2687
+ <i class="fas fa-filter" aria-hidden="true"></i>
2688
+ </span>
2689
+ <span class="pf-c-select__toggle-text">Name</span>
2690
+ </div>
2691
+ <span class="pf-c-select__toggle-arrow">
2692
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2683
2693
  </span>
2684
- <span class="pf-c-select__toggle-text">Name</span>
2685
- </div>
2686
- <span class="pf-c-select__toggle-arrow">
2687
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2688
- </span>
2689
- </button>
2694
+ </button>
2690
2695
 
2691
- <ul
2692
- class="pf-c-select__menu"
2693
- role="listbox"
2694
- aria-labelledby="-select-name-label"
2695
- hidden
2696
- >
2697
- <li role="presentation">
2698
- <button
2699
- class="pf-c-select__menu-item"
2700
- role="option"
2701
- >Running</button>
2702
- </li>
2703
- <li role="presentation">
2704
- <button
2705
- class="pf-c-select__menu-item pf-m-selected"
2706
- role="option"
2707
- aria-selected="true"
2708
- >
2709
- Stopped
2710
- <span class="pf-c-select__menu-item-icon">
2711
- <i class="fas fa-check" aria-hidden="true"></i>
2712
- </span>
2713
- </button>
2714
- </li>
2715
- <li role="presentation">
2716
- <button
2717
- class="pf-c-select__menu-item"
2718
- role="option"
2719
- >Down</button>
2720
- </li>
2721
- <li role="presentation">
2722
- <button
2723
- class="pf-c-select__menu-item"
2724
- role="option"
2725
- >Degraded</button>
2726
- </li>
2727
- <li role="presentation">
2728
- <button
2729
- class="pf-c-select__menu-item"
2730
- role="option"
2731
- >Needs maintenance</button>
2732
- </li>
2733
- </ul>
2696
+ <ul
2697
+ class="pf-c-select__menu"
2698
+ role="listbox"
2699
+ aria-labelledby="-select-name-label"
2700
+ hidden
2701
+ >
2702
+ <li role="presentation">
2703
+ <button
2704
+ class="pf-c-select__menu-item"
2705
+ role="option"
2706
+ >Running</button>
2707
+ </li>
2708
+ <li role="presentation">
2709
+ <button
2710
+ class="pf-c-select__menu-item pf-m-selected"
2711
+ role="option"
2712
+ aria-selected="true"
2713
+ >
2714
+ Stopped
2715
+ <span class="pf-c-select__menu-item-icon">
2716
+ <i class="fas fa-check" aria-hidden="true"></i>
2717
+ </span>
2718
+ </button>
2719
+ </li>
2720
+ <li role="presentation">
2721
+ <button
2722
+ class="pf-c-select__menu-item"
2723
+ role="option"
2724
+ >Down</button>
2725
+ </li>
2726
+ <li role="presentation">
2727
+ <button
2728
+ class="pf-c-select__menu-item"
2729
+ role="option"
2730
+ >Degraded</button>
2731
+ </li>
2732
+ <li role="presentation">
2733
+ <button
2734
+ class="pf-c-select__menu-item"
2735
+ role="option"
2736
+ >Needs maintenance</button>
2737
+ </li>
2738
+ </ul>
2739
+ </div>
2734
2740
  </div>
2735
- <div class="pf-c-text-input-group" style="width: auto">
2736
- <div class="pf-c-text-input-group__main pf-m-icon">
2737
- <span class="pf-c-text-input-group__text">
2738
- <span class="pf-c-text-input-group__icon">
2739
- <i class="fas fa-fw fa-search"></i>
2741
+ <div class="pf-c-input-group__item">
2742
+ <div class="pf-c-text-input-group" style="width: auto">
2743
+ <div class="pf-c-text-input-group__main pf-m-icon">
2744
+ <span class="pf-c-text-input-group__text">
2745
+ <span class="pf-c-text-input-group__icon">
2746
+ <i class="fas fa-fw fa-search"></i>
2747
+ </span>
2748
+ <input
2749
+ class="pf-c-text-input-group__text-input"
2750
+ type="search"
2751
+ placeholder="Filter by name"
2752
+ value
2753
+ aria-label="Type to filter"
2754
+ />
2740
2755
  </span>
2741
- <input
2742
- class="pf-c-text-input-group__text-input"
2743
- type="search"
2744
- placeholder="Filter by name"
2745
- value
2746
- aria-label="Type to filter"
2747
- />
2748
- </span>
2756
+ </div>
2749
2757
  </div>
2750
2758
  </div>
2751
2759
  </div>
@@ -4565,86 +4573,90 @@ wrapperTag: div
4565
4573
  aria-label="search filter"
4566
4574
  role="group"
4567
4575
  >
4568
- <div class="pf-c-select" style="width: 175px">
4569
- <span id="-select-name-label" hidden>Choose one</span>
4576
+ <div class="pf-c-input-group__item pf-m-fill">
4577
+ <div class="pf-c-select" style="width: 124px">
4578
+ <span id="-select-name-label" hidden>Choose one</span>
4570
4579
 
4571
- <button
4572
- class="pf-c-select__toggle"
4573
- type="button"
4574
- id="-select-name-toggle"
4575
- aria-haspopup="true"
4576
- aria-expanded="false"
4577
- aria-labelledby="-select-name-label -select-name-toggle"
4578
- >
4579
- <div class="pf-c-select__toggle-wrapper">
4580
- <span class="pf-c-select__toggle-icon">
4581
- <i class="fas fa-filter" aria-hidden="true"></i>
4580
+ <button
4581
+ class="pf-c-select__toggle"
4582
+ type="button"
4583
+ id="-select-name-toggle"
4584
+ aria-haspopup="true"
4585
+ aria-expanded="false"
4586
+ aria-labelledby="-select-name-label -select-name-toggle"
4587
+ >
4588
+ <div class="pf-c-select__toggle-wrapper">
4589
+ <span class="pf-c-select__toggle-icon">
4590
+ <i class="fas fa-filter" aria-hidden="true"></i>
4591
+ </span>
4592
+ <span class="pf-c-select__toggle-text">Name</span>
4593
+ </div>
4594
+ <span class="pf-c-select__toggle-arrow">
4595
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
4582
4596
  </span>
4583
- <span class="pf-c-select__toggle-text">Name</span>
4584
- </div>
4585
- <span class="pf-c-select__toggle-arrow">
4586
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4587
- </span>
4588
- </button>
4597
+ </button>
4589
4598
 
4590
- <ul
4591
- class="pf-c-select__menu"
4592
- role="listbox"
4593
- aria-labelledby="-select-name-label"
4594
- hidden
4595
- >
4596
- <li role="presentation">
4597
- <button
4598
- class="pf-c-select__menu-item"
4599
- role="option"
4600
- >Running</button>
4601
- </li>
4602
- <li role="presentation">
4603
- <button
4604
- class="pf-c-select__menu-item pf-m-selected"
4605
- role="option"
4606
- aria-selected="true"
4607
- >
4608
- Stopped
4609
- <span class="pf-c-select__menu-item-icon">
4610
- <i class="fas fa-check" aria-hidden="true"></i>
4611
- </span>
4612
- </button>
4613
- </li>
4614
- <li role="presentation">
4615
- <button
4616
- class="pf-c-select__menu-item"
4617
- role="option"
4618
- >Down</button>
4619
- </li>
4620
- <li role="presentation">
4621
- <button
4622
- class="pf-c-select__menu-item"
4623
- role="option"
4624
- >Degraded</button>
4625
- </li>
4626
- <li role="presentation">
4627
- <button
4628
- class="pf-c-select__menu-item"
4629
- role="option"
4630
- >Needs maintenance</button>
4631
- </li>
4632
- </ul>
4599
+ <ul
4600
+ class="pf-c-select__menu"
4601
+ role="listbox"
4602
+ aria-labelledby="-select-name-label"
4603
+ hidden
4604
+ >
4605
+ <li role="presentation">
4606
+ <button
4607
+ class="pf-c-select__menu-item"
4608
+ role="option"
4609
+ >Running</button>
4610
+ </li>
4611
+ <li role="presentation">
4612
+ <button
4613
+ class="pf-c-select__menu-item pf-m-selected"
4614
+ role="option"
4615
+ aria-selected="true"
4616
+ >
4617
+ Stopped
4618
+ <span class="pf-c-select__menu-item-icon">
4619
+ <i class="fas fa-check" aria-hidden="true"></i>
4620
+ </span>
4621
+ </button>
4622
+ </li>
4623
+ <li role="presentation">
4624
+ <button
4625
+ class="pf-c-select__menu-item"
4626
+ role="option"
4627
+ >Down</button>
4628
+ </li>
4629
+ <li role="presentation">
4630
+ <button
4631
+ class="pf-c-select__menu-item"
4632
+ role="option"
4633
+ >Degraded</button>
4634
+ </li>
4635
+ <li role="presentation">
4636
+ <button
4637
+ class="pf-c-select__menu-item"
4638
+ role="option"
4639
+ >Needs maintenance</button>
4640
+ </li>
4641
+ </ul>
4642
+ </div>
4633
4643
  </div>
4634
- <div class="pf-c-text-input-group" style="width: auto">
4635
- <div class="pf-c-text-input-group__main pf-m-icon">
4636
- <span class="pf-c-text-input-group__text">
4637
- <span class="pf-c-text-input-group__icon">
4638
- <i class="fas fa-fw fa-search"></i>
4644
+ <div class="pf-c-input-group__item">
4645
+ <div class="pf-c-text-input-group" style="width: auto">
4646
+ <div class="pf-c-text-input-group__main pf-m-icon">
4647
+ <span class="pf-c-text-input-group__text">
4648
+ <span class="pf-c-text-input-group__icon">
4649
+ <i class="fas fa-fw fa-search"></i>
4650
+ </span>
4651
+ <input
4652
+ class="pf-c-text-input-group__text-input"
4653
+ type="search"
4654
+ placeholder="Filter by name"
4655
+ value
4656
+ aria-label="Type to filter"
4657
+ />
4639
4658
  </span>
4640
- <input
4641
- class="pf-c-text-input-group__text-input"
4642
- type="search"
4643
- placeholder="Filter by name"
4644
- value
4645
- aria-label="Type to filter"
4646
- />
4647
- </span>
4659
+ </div>
4648
4660
  </div>
4649
4661
  </div>
4650
4662
  </div>
@@ -6658,86 +6670,90 @@ wrapperTag: div
6658
6670
  aria-label="search filter"
6659
6671
  role="group"
6660
6672
  >
6661
- <div class="pf-c-select" style="width: 175px">
6662
- <span id="-select-name-label" hidden>Choose one</span>
6673
+ <div class="pf-c-input-group__item pf-m-fill">
6674
+ <div class="pf-c-select" style="width: 124px">
6675
+ <span id="-select-name-label" hidden>Choose one</span>
6663
6676
 
6664
- <button
6665
- class="pf-c-select__toggle"
6666
- type="button"
6667
- id="-select-name-toggle"
6668
- aria-haspopup="true"
6669
- aria-expanded="false"
6670
- aria-labelledby="-select-name-label -select-name-toggle"
6671
- >
6672
- <div class="pf-c-select__toggle-wrapper">
6673
- <span class="pf-c-select__toggle-icon">
6674
- <i class="fas fa-filter" aria-hidden="true"></i>
6677
+ <button
6678
+ class="pf-c-select__toggle"
6679
+ type="button"
6680
+ id="-select-name-toggle"
6681
+ aria-haspopup="true"
6682
+ aria-expanded="false"
6683
+ aria-labelledby="-select-name-label -select-name-toggle"
6684
+ >
6685
+ <div class="pf-c-select__toggle-wrapper">
6686
+ <span class="pf-c-select__toggle-icon">
6687
+ <i class="fas fa-filter" aria-hidden="true"></i>
6688
+ </span>
6689
+ <span class="pf-c-select__toggle-text">Name</span>
6690
+ </div>
6691
+ <span class="pf-c-select__toggle-arrow">
6692
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
6675
6693
  </span>
6676
- <span class="pf-c-select__toggle-text">Name</span>
6677
- </div>
6678
- <span class="pf-c-select__toggle-arrow">
6679
- <i class="fas fa-caret-down" aria-hidden="true"></i>
6680
- </span>
6681
- </button>
6694
+ </button>
6682
6695
 
6683
- <ul
6684
- class="pf-c-select__menu"
6685
- role="listbox"
6686
- aria-labelledby="-select-name-label"
6687
- hidden
6688
- >
6689
- <li role="presentation">
6690
- <button
6691
- class="pf-c-select__menu-item"
6692
- role="option"
6693
- >Running</button>
6694
- </li>
6695
- <li role="presentation">
6696
- <button
6697
- class="pf-c-select__menu-item pf-m-selected"
6698
- role="option"
6699
- aria-selected="true"
6700
- >
6701
- Stopped
6702
- <span class="pf-c-select__menu-item-icon">
6703
- <i class="fas fa-check" aria-hidden="true"></i>
6704
- </span>
6705
- </button>
6706
- </li>
6707
- <li role="presentation">
6708
- <button
6709
- class="pf-c-select__menu-item"
6710
- role="option"
6711
- >Down</button>
6712
- </li>
6713
- <li role="presentation">
6714
- <button
6715
- class="pf-c-select__menu-item"
6716
- role="option"
6717
- >Degraded</button>
6718
- </li>
6719
- <li role="presentation">
6720
- <button
6721
- class="pf-c-select__menu-item"
6722
- role="option"
6723
- >Needs maintenance</button>
6724
- </li>
6725
- </ul>
6696
+ <ul
6697
+ class="pf-c-select__menu"
6698
+ role="listbox"
6699
+ aria-labelledby="-select-name-label"
6700
+ hidden
6701
+ >
6702
+ <li role="presentation">
6703
+ <button
6704
+ class="pf-c-select__menu-item"
6705
+ role="option"
6706
+ >Running</button>
6707
+ </li>
6708
+ <li role="presentation">
6709
+ <button
6710
+ class="pf-c-select__menu-item pf-m-selected"
6711
+ role="option"
6712
+ aria-selected="true"
6713
+ >
6714
+ Stopped
6715
+ <span class="pf-c-select__menu-item-icon">
6716
+ <i class="fas fa-check" aria-hidden="true"></i>
6717
+ </span>
6718
+ </button>
6719
+ </li>
6720
+ <li role="presentation">
6721
+ <button
6722
+ class="pf-c-select__menu-item"
6723
+ role="option"
6724
+ >Down</button>
6725
+ </li>
6726
+ <li role="presentation">
6727
+ <button
6728
+ class="pf-c-select__menu-item"
6729
+ role="option"
6730
+ >Degraded</button>
6731
+ </li>
6732
+ <li role="presentation">
6733
+ <button
6734
+ class="pf-c-select__menu-item"
6735
+ role="option"
6736
+ >Needs maintenance</button>
6737
+ </li>
6738
+ </ul>
6739
+ </div>
6726
6740
  </div>
6727
- <div class="pf-c-text-input-group" style="width: auto">
6728
- <div class="pf-c-text-input-group__main pf-m-icon">
6729
- <span class="pf-c-text-input-group__text">
6730
- <span class="pf-c-text-input-group__icon">
6731
- <i class="fas fa-fw fa-search"></i>
6741
+ <div class="pf-c-input-group__item">
6742
+ <div class="pf-c-text-input-group" style="width: auto">
6743
+ <div class="pf-c-text-input-group__main pf-m-icon">
6744
+ <span class="pf-c-text-input-group__text">
6745
+ <span class="pf-c-text-input-group__icon">
6746
+ <i class="fas fa-fw fa-search"></i>
6747
+ </span>
6748
+ <input
6749
+ class="pf-c-text-input-group__text-input"
6750
+ type="search"
6751
+ placeholder="Filter by name"
6752
+ value
6753
+ aria-label="Type to filter"
6754
+ />
6732
6755
  </span>
6733
- <input
6734
- class="pf-c-text-input-group__text-input"
6735
- type="search"
6736
- placeholder="Filter by name"
6737
- value
6738
- aria-label="Type to filter"
6739
- />
6740
- </span>
6756
+ </div>
6741
6757
  </div>
6742
6758
  </div>
6743
6759
  </div>
@@ -8416,86 +8432,90 @@ wrapperTag: div
8416
8432
  aria-label="search filter"
8417
8433
  role="group"
8418
8434
  >
8419
- <div class="pf-c-select" style="width: 175px">
8420
- <span id="-select-name-label" hidden>Choose one</span>
8435
+ <div class="pf-c-input-group__item pf-m-fill">
8436
+ <div class="pf-c-select" style="width: 124px">
8437
+ <span id="-select-name-label" hidden>Choose one</span>
8421
8438
 
8422
- <button
8423
- class="pf-c-select__toggle"
8424
- type="button"
8425
- id="-select-name-toggle"
8426
- aria-haspopup="true"
8427
- aria-expanded="false"
8428
- aria-labelledby="-select-name-label -select-name-toggle"
8429
- >
8430
- <div class="pf-c-select__toggle-wrapper">
8431
- <span class="pf-c-select__toggle-icon">
8432
- <i class="fas fa-filter" aria-hidden="true"></i>
8439
+ <button
8440
+ class="pf-c-select__toggle"
8441
+ type="button"
8442
+ id="-select-name-toggle"
8443
+ aria-haspopup="true"
8444
+ aria-expanded="false"
8445
+ aria-labelledby="-select-name-label -select-name-toggle"
8446
+ >
8447
+ <div class="pf-c-select__toggle-wrapper">
8448
+ <span class="pf-c-select__toggle-icon">
8449
+ <i class="fas fa-filter" aria-hidden="true"></i>
8450
+ </span>
8451
+ <span class="pf-c-select__toggle-text">Name</span>
8452
+ </div>
8453
+ <span class="pf-c-select__toggle-arrow">
8454
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
8433
8455
  </span>
8434
- <span class="pf-c-select__toggle-text">Name</span>
8435
- </div>
8436
- <span class="pf-c-select__toggle-arrow">
8437
- <i class="fas fa-caret-down" aria-hidden="true"></i>
8438
- </span>
8439
- </button>
8456
+ </button>
8440
8457
 
8441
- <ul
8442
- class="pf-c-select__menu"
8443
- role="listbox"
8444
- aria-labelledby="-select-name-label"
8445
- hidden
8446
- >
8447
- <li role="presentation">
8448
- <button
8449
- class="pf-c-select__menu-item"
8450
- role="option"
8451
- >Running</button>
8452
- </li>
8453
- <li role="presentation">
8454
- <button
8455
- class="pf-c-select__menu-item pf-m-selected"
8456
- role="option"
8457
- aria-selected="true"
8458
- >
8459
- Stopped
8460
- <span class="pf-c-select__menu-item-icon">
8461
- <i class="fas fa-check" aria-hidden="true"></i>
8462
- </span>
8463
- </button>
8464
- </li>
8465
- <li role="presentation">
8466
- <button
8467
- class="pf-c-select__menu-item"
8468
- role="option"
8469
- >Down</button>
8470
- </li>
8471
- <li role="presentation">
8472
- <button
8473
- class="pf-c-select__menu-item"
8474
- role="option"
8475
- >Degraded</button>
8476
- </li>
8477
- <li role="presentation">
8478
- <button
8479
- class="pf-c-select__menu-item"
8480
- role="option"
8481
- >Needs maintenance</button>
8482
- </li>
8483
- </ul>
8458
+ <ul
8459
+ class="pf-c-select__menu"
8460
+ role="listbox"
8461
+ aria-labelledby="-select-name-label"
8462
+ hidden
8463
+ >
8464
+ <li role="presentation">
8465
+ <button
8466
+ class="pf-c-select__menu-item"
8467
+ role="option"
8468
+ >Running</button>
8469
+ </li>
8470
+ <li role="presentation">
8471
+ <button
8472
+ class="pf-c-select__menu-item pf-m-selected"
8473
+ role="option"
8474
+ aria-selected="true"
8475
+ >
8476
+ Stopped
8477
+ <span class="pf-c-select__menu-item-icon">
8478
+ <i class="fas fa-check" aria-hidden="true"></i>
8479
+ </span>
8480
+ </button>
8481
+ </li>
8482
+ <li role="presentation">
8483
+ <button
8484
+ class="pf-c-select__menu-item"
8485
+ role="option"
8486
+ >Down</button>
8487
+ </li>
8488
+ <li role="presentation">
8489
+ <button
8490
+ class="pf-c-select__menu-item"
8491
+ role="option"
8492
+ >Degraded</button>
8493
+ </li>
8494
+ <li role="presentation">
8495
+ <button
8496
+ class="pf-c-select__menu-item"
8497
+ role="option"
8498
+ >Needs maintenance</button>
8499
+ </li>
8500
+ </ul>
8501
+ </div>
8484
8502
  </div>
8485
- <div class="pf-c-text-input-group" style="width: auto">
8486
- <div class="pf-c-text-input-group__main pf-m-icon">
8487
- <span class="pf-c-text-input-group__text">
8488
- <span class="pf-c-text-input-group__icon">
8489
- <i class="fas fa-fw fa-search"></i>
8503
+ <div class="pf-c-input-group__item">
8504
+ <div class="pf-c-text-input-group" style="width: auto">
8505
+ <div class="pf-c-text-input-group__main pf-m-icon">
8506
+ <span class="pf-c-text-input-group__text">
8507
+ <span class="pf-c-text-input-group__icon">
8508
+ <i class="fas fa-fw fa-search"></i>
8509
+ </span>
8510
+ <input
8511
+ class="pf-c-text-input-group__text-input"
8512
+ type="search"
8513
+ placeholder="Filter by name"
8514
+ value
8515
+ aria-label="Type to filter"
8516
+ />
8490
8517
  </span>
8491
- <input
8492
- class="pf-c-text-input-group__text-input"
8493
- type="search"
8494
- placeholder="Filter by name"
8495
- value
8496
- aria-label="Type to filter"
8497
- />
8498
- </span>
8518
+ </div>
8499
8519
  </div>
8500
8520
  </div>
8501
8521
  </div>
@@ -15234,86 +15254,90 @@ wrapperTag: div
15234
15254
  aria-label="search filter"
15235
15255
  role="group"
15236
15256
  >
15237
- <div class="pf-c-select" style="width: 175px">
15238
- <span id="-select-name-label" hidden>Choose one</span>
15257
+ <div class="pf-c-input-group__item pf-m-fill">
15258
+ <div class="pf-c-select" style="width: 124px">
15259
+ <span id="-select-name-label" hidden>Choose one</span>
15239
15260
 
15240
- <button
15241
- class="pf-c-select__toggle"
15242
- type="button"
15243
- id="-select-name-toggle"
15244
- aria-haspopup="true"
15245
- aria-expanded="false"
15246
- aria-labelledby="-select-name-label -select-name-toggle"
15247
- >
15248
- <div class="pf-c-select__toggle-wrapper">
15249
- <span class="pf-c-select__toggle-icon">
15250
- <i class="fas fa-filter" aria-hidden="true"></i>
15261
+ <button
15262
+ class="pf-c-select__toggle"
15263
+ type="button"
15264
+ id="-select-name-toggle"
15265
+ aria-haspopup="true"
15266
+ aria-expanded="false"
15267
+ aria-labelledby="-select-name-label -select-name-toggle"
15268
+ >
15269
+ <div class="pf-c-select__toggle-wrapper">
15270
+ <span class="pf-c-select__toggle-icon">
15271
+ <i class="fas fa-filter" aria-hidden="true"></i>
15272
+ </span>
15273
+ <span class="pf-c-select__toggle-text">Name</span>
15274
+ </div>
15275
+ <span class="pf-c-select__toggle-arrow">
15276
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
15251
15277
  </span>
15252
- <span class="pf-c-select__toggle-text">Name</span>
15253
- </div>
15254
- <span class="pf-c-select__toggle-arrow">
15255
- <i class="fas fa-caret-down" aria-hidden="true"></i>
15256
- </span>
15257
- </button>
15278
+ </button>
15258
15279
 
15259
- <ul
15260
- class="pf-c-select__menu"
15261
- role="listbox"
15262
- aria-labelledby="-select-name-label"
15263
- hidden
15264
- >
15265
- <li role="presentation">
15266
- <button
15267
- class="pf-c-select__menu-item"
15268
- role="option"
15269
- >Running</button>
15270
- </li>
15271
- <li role="presentation">
15272
- <button
15273
- class="pf-c-select__menu-item pf-m-selected"
15274
- role="option"
15275
- aria-selected="true"
15276
- >
15277
- Stopped
15278
- <span class="pf-c-select__menu-item-icon">
15279
- <i class="fas fa-check" aria-hidden="true"></i>
15280
- </span>
15281
- </button>
15282
- </li>
15283
- <li role="presentation">
15284
- <button
15285
- class="pf-c-select__menu-item"
15286
- role="option"
15287
- >Down</button>
15288
- </li>
15289
- <li role="presentation">
15290
- <button
15291
- class="pf-c-select__menu-item"
15292
- role="option"
15293
- >Degraded</button>
15294
- </li>
15295
- <li role="presentation">
15296
- <button
15297
- class="pf-c-select__menu-item"
15298
- role="option"
15299
- >Needs maintenance</button>
15300
- </li>
15301
- </ul>
15280
+ <ul
15281
+ class="pf-c-select__menu"
15282
+ role="listbox"
15283
+ aria-labelledby="-select-name-label"
15284
+ hidden
15285
+ >
15286
+ <li role="presentation">
15287
+ <button
15288
+ class="pf-c-select__menu-item"
15289
+ role="option"
15290
+ >Running</button>
15291
+ </li>
15292
+ <li role="presentation">
15293
+ <button
15294
+ class="pf-c-select__menu-item pf-m-selected"
15295
+ role="option"
15296
+ aria-selected="true"
15297
+ >
15298
+ Stopped
15299
+ <span class="pf-c-select__menu-item-icon">
15300
+ <i class="fas fa-check" aria-hidden="true"></i>
15301
+ </span>
15302
+ </button>
15303
+ </li>
15304
+ <li role="presentation">
15305
+ <button
15306
+ class="pf-c-select__menu-item"
15307
+ role="option"
15308
+ >Down</button>
15309
+ </li>
15310
+ <li role="presentation">
15311
+ <button
15312
+ class="pf-c-select__menu-item"
15313
+ role="option"
15314
+ >Degraded</button>
15315
+ </li>
15316
+ <li role="presentation">
15317
+ <button
15318
+ class="pf-c-select__menu-item"
15319
+ role="option"
15320
+ >Needs maintenance</button>
15321
+ </li>
15322
+ </ul>
15323
+ </div>
15302
15324
  </div>
15303
- <div class="pf-c-text-input-group" style="width: auto">
15304
- <div class="pf-c-text-input-group__main pf-m-icon">
15305
- <span class="pf-c-text-input-group__text">
15306
- <span class="pf-c-text-input-group__icon">
15307
- <i class="fas fa-fw fa-search"></i>
15325
+ <div class="pf-c-input-group__item">
15326
+ <div class="pf-c-text-input-group" style="width: auto">
15327
+ <div class="pf-c-text-input-group__main pf-m-icon">
15328
+ <span class="pf-c-text-input-group__text">
15329
+ <span class="pf-c-text-input-group__icon">
15330
+ <i class="fas fa-fw fa-search"></i>
15331
+ </span>
15332
+ <input
15333
+ class="pf-c-text-input-group__text-input"
15334
+ type="search"
15335
+ placeholder="Filter by name"
15336
+ value
15337
+ aria-label="Type to filter"
15338
+ />
15308
15339
  </span>
15309
- <input
15310
- class="pf-c-text-input-group__text-input"
15311
- type="search"
15312
- placeholder="Filter by name"
15313
- value
15314
- aria-label="Type to filter"
15315
- />
15316
- </span>
15340
+ </div>
15317
15341
  </div>
15318
15342
  </div>
15319
15343
  </div>
@@ -17127,86 +17151,90 @@ wrapperTag: div
17127
17151
  aria-label="search filter"
17128
17152
  role="group"
17129
17153
  >
17130
- <div class="pf-c-select" style="width: 175px">
17131
- <span id="-select-name-label" hidden>Choose one</span>
17154
+ <div class="pf-c-input-group__item pf-m-fill">
17155
+ <div class="pf-c-select" style="width: 124px">
17156
+ <span id="-select-name-label" hidden>Choose one</span>
17132
17157
 
17133
- <button
17134
- class="pf-c-select__toggle"
17135
- type="button"
17136
- id="-select-name-toggle"
17137
- aria-haspopup="true"
17138
- aria-expanded="false"
17139
- aria-labelledby="-select-name-label -select-name-toggle"
17140
- >
17141
- <div class="pf-c-select__toggle-wrapper">
17142
- <span class="pf-c-select__toggle-icon">
17143
- <i class="fas fa-filter" aria-hidden="true"></i>
17158
+ <button
17159
+ class="pf-c-select__toggle"
17160
+ type="button"
17161
+ id="-select-name-toggle"
17162
+ aria-haspopup="true"
17163
+ aria-expanded="false"
17164
+ aria-labelledby="-select-name-label -select-name-toggle"
17165
+ >
17166
+ <div class="pf-c-select__toggle-wrapper">
17167
+ <span class="pf-c-select__toggle-icon">
17168
+ <i class="fas fa-filter" aria-hidden="true"></i>
17169
+ </span>
17170
+ <span class="pf-c-select__toggle-text">Name</span>
17171
+ </div>
17172
+ <span class="pf-c-select__toggle-arrow">
17173
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
17144
17174
  </span>
17145
- <span class="pf-c-select__toggle-text">Name</span>
17146
- </div>
17147
- <span class="pf-c-select__toggle-arrow">
17148
- <i class="fas fa-caret-down" aria-hidden="true"></i>
17149
- </span>
17150
- </button>
17175
+ </button>
17151
17176
 
17152
- <ul
17153
- class="pf-c-select__menu"
17154
- role="listbox"
17155
- aria-labelledby="-select-name-label"
17156
- hidden
17157
- >
17158
- <li role="presentation">
17159
- <button
17160
- class="pf-c-select__menu-item"
17161
- role="option"
17162
- >Running</button>
17163
- </li>
17164
- <li role="presentation">
17165
- <button
17166
- class="pf-c-select__menu-item pf-m-selected"
17167
- role="option"
17168
- aria-selected="true"
17169
- >
17170
- Stopped
17171
- <span class="pf-c-select__menu-item-icon">
17172
- <i class="fas fa-check" aria-hidden="true"></i>
17173
- </span>
17174
- </button>
17175
- </li>
17176
- <li role="presentation">
17177
- <button
17178
- class="pf-c-select__menu-item"
17179
- role="option"
17180
- >Down</button>
17181
- </li>
17182
- <li role="presentation">
17183
- <button
17184
- class="pf-c-select__menu-item"
17185
- role="option"
17186
- >Degraded</button>
17187
- </li>
17188
- <li role="presentation">
17189
- <button
17190
- class="pf-c-select__menu-item"
17191
- role="option"
17192
- >Needs maintenance</button>
17193
- </li>
17194
- </ul>
17177
+ <ul
17178
+ class="pf-c-select__menu"
17179
+ role="listbox"
17180
+ aria-labelledby="-select-name-label"
17181
+ hidden
17182
+ >
17183
+ <li role="presentation">
17184
+ <button
17185
+ class="pf-c-select__menu-item"
17186
+ role="option"
17187
+ >Running</button>
17188
+ </li>
17189
+ <li role="presentation">
17190
+ <button
17191
+ class="pf-c-select__menu-item pf-m-selected"
17192
+ role="option"
17193
+ aria-selected="true"
17194
+ >
17195
+ Stopped
17196
+ <span class="pf-c-select__menu-item-icon">
17197
+ <i class="fas fa-check" aria-hidden="true"></i>
17198
+ </span>
17199
+ </button>
17200
+ </li>
17201
+ <li role="presentation">
17202
+ <button
17203
+ class="pf-c-select__menu-item"
17204
+ role="option"
17205
+ >Down</button>
17206
+ </li>
17207
+ <li role="presentation">
17208
+ <button
17209
+ class="pf-c-select__menu-item"
17210
+ role="option"
17211
+ >Degraded</button>
17212
+ </li>
17213
+ <li role="presentation">
17214
+ <button
17215
+ class="pf-c-select__menu-item"
17216
+ role="option"
17217
+ >Needs maintenance</button>
17218
+ </li>
17219
+ </ul>
17220
+ </div>
17195
17221
  </div>
17196
- <div class="pf-c-text-input-group" style="width: auto">
17197
- <div class="pf-c-text-input-group__main pf-m-icon">
17198
- <span class="pf-c-text-input-group__text">
17199
- <span class="pf-c-text-input-group__icon">
17200
- <i class="fas fa-fw fa-search"></i>
17222
+ <div class="pf-c-input-group__item">
17223
+ <div class="pf-c-text-input-group" style="width: auto">
17224
+ <div class="pf-c-text-input-group__main pf-m-icon">
17225
+ <span class="pf-c-text-input-group__text">
17226
+ <span class="pf-c-text-input-group__icon">
17227
+ <i class="fas fa-fw fa-search"></i>
17228
+ </span>
17229
+ <input
17230
+ class="pf-c-text-input-group__text-input"
17231
+ type="search"
17232
+ placeholder="Filter by name"
17233
+ value
17234
+ aria-label="Type to filter"
17235
+ />
17201
17236
  </span>
17202
- <input
17203
- class="pf-c-text-input-group__text-input"
17204
- type="search"
17205
- placeholder="Filter by name"
17206
- value
17207
- aria-label="Type to filter"
17208
- />
17209
- </span>
17237
+ </div>
17210
17238
  </div>
17211
17239
  </div>
17212
17240
  </div>
@@ -19120,86 +19148,90 @@ wrapperTag: div
19120
19148
  aria-label="search filter"
19121
19149
  role="group"
19122
19150
  >
19123
- <div class="pf-c-select" style="width: 175px">
19124
- <span id="-select-name-label" hidden>Choose one</span>
19151
+ <div class="pf-c-input-group__item pf-m-fill">
19152
+ <div class="pf-c-select" style="width: 124px">
19153
+ <span id="-select-name-label" hidden>Choose one</span>
19125
19154
 
19126
- <button
19127
- class="pf-c-select__toggle"
19128
- type="button"
19129
- id="-select-name-toggle"
19130
- aria-haspopup="true"
19131
- aria-expanded="false"
19132
- aria-labelledby="-select-name-label -select-name-toggle"
19133
- >
19134
- <div class="pf-c-select__toggle-wrapper">
19135
- <span class="pf-c-select__toggle-icon">
19136
- <i class="fas fa-filter" aria-hidden="true"></i>
19155
+ <button
19156
+ class="pf-c-select__toggle"
19157
+ type="button"
19158
+ id="-select-name-toggle"
19159
+ aria-haspopup="true"
19160
+ aria-expanded="false"
19161
+ aria-labelledby="-select-name-label -select-name-toggle"
19162
+ >
19163
+ <div class="pf-c-select__toggle-wrapper">
19164
+ <span class="pf-c-select__toggle-icon">
19165
+ <i class="fas fa-filter" aria-hidden="true"></i>
19166
+ </span>
19167
+ <span class="pf-c-select__toggle-text">Name</span>
19168
+ </div>
19169
+ <span class="pf-c-select__toggle-arrow">
19170
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
19137
19171
  </span>
19138
- <span class="pf-c-select__toggle-text">Name</span>
19139
- </div>
19140
- <span class="pf-c-select__toggle-arrow">
19141
- <i class="fas fa-caret-down" aria-hidden="true"></i>
19142
- </span>
19143
- </button>
19172
+ </button>
19144
19173
 
19145
- <ul
19146
- class="pf-c-select__menu"
19147
- role="listbox"
19148
- aria-labelledby="-select-name-label"
19149
- hidden
19150
- >
19151
- <li role="presentation">
19152
- <button
19153
- class="pf-c-select__menu-item"
19154
- role="option"
19155
- >Running</button>
19156
- </li>
19157
- <li role="presentation">
19158
- <button
19159
- class="pf-c-select__menu-item pf-m-selected"
19160
- role="option"
19161
- aria-selected="true"
19162
- >
19163
- Stopped
19164
- <span class="pf-c-select__menu-item-icon">
19165
- <i class="fas fa-check" aria-hidden="true"></i>
19166
- </span>
19167
- </button>
19168
- </li>
19169
- <li role="presentation">
19170
- <button
19171
- class="pf-c-select__menu-item"
19172
- role="option"
19173
- >Down</button>
19174
- </li>
19175
- <li role="presentation">
19176
- <button
19177
- class="pf-c-select__menu-item"
19178
- role="option"
19179
- >Degraded</button>
19180
- </li>
19181
- <li role="presentation">
19182
- <button
19183
- class="pf-c-select__menu-item"
19184
- role="option"
19185
- >Needs maintenance</button>
19186
- </li>
19187
- </ul>
19174
+ <ul
19175
+ class="pf-c-select__menu"
19176
+ role="listbox"
19177
+ aria-labelledby="-select-name-label"
19178
+ hidden
19179
+ >
19180
+ <li role="presentation">
19181
+ <button
19182
+ class="pf-c-select__menu-item"
19183
+ role="option"
19184
+ >Running</button>
19185
+ </li>
19186
+ <li role="presentation">
19187
+ <button
19188
+ class="pf-c-select__menu-item pf-m-selected"
19189
+ role="option"
19190
+ aria-selected="true"
19191
+ >
19192
+ Stopped
19193
+ <span class="pf-c-select__menu-item-icon">
19194
+ <i class="fas fa-check" aria-hidden="true"></i>
19195
+ </span>
19196
+ </button>
19197
+ </li>
19198
+ <li role="presentation">
19199
+ <button
19200
+ class="pf-c-select__menu-item"
19201
+ role="option"
19202
+ >Down</button>
19203
+ </li>
19204
+ <li role="presentation">
19205
+ <button
19206
+ class="pf-c-select__menu-item"
19207
+ role="option"
19208
+ >Degraded</button>
19209
+ </li>
19210
+ <li role="presentation">
19211
+ <button
19212
+ class="pf-c-select__menu-item"
19213
+ role="option"
19214
+ >Needs maintenance</button>
19215
+ </li>
19216
+ </ul>
19217
+ </div>
19188
19218
  </div>
19189
- <div class="pf-c-text-input-group" style="width: auto">
19190
- <div class="pf-c-text-input-group__main pf-m-icon">
19191
- <span class="pf-c-text-input-group__text">
19192
- <span class="pf-c-text-input-group__icon">
19193
- <i class="fas fa-fw fa-search"></i>
19219
+ <div class="pf-c-input-group__item">
19220
+ <div class="pf-c-text-input-group" style="width: auto">
19221
+ <div class="pf-c-text-input-group__main pf-m-icon">
19222
+ <span class="pf-c-text-input-group__text">
19223
+ <span class="pf-c-text-input-group__icon">
19224
+ <i class="fas fa-fw fa-search"></i>
19225
+ </span>
19226
+ <input
19227
+ class="pf-c-text-input-group__text-input"
19228
+ type="search"
19229
+ placeholder="Filter by name"
19230
+ value
19231
+ aria-label="Type to filter"
19232
+ />
19194
19233
  </span>
19195
- <input
19196
- class="pf-c-text-input-group__text-input"
19197
- type="search"
19198
- placeholder="Filter by name"
19199
- value
19200
- aria-label="Type to filter"
19201
- />
19202
- </span>
19234
+ </div>
19203
19235
  </div>
19204
19236
  </div>
19205
19237
  </div>
@@ -21016,86 +21048,90 @@ wrapperTag: div
21016
21048
  aria-label="search filter"
21017
21049
  role="group"
21018
21050
  >
21019
- <div class="pf-c-select" style="width: 175px">
21020
- <span id="-select-name-label" hidden>Choose one</span>
21051
+ <div class="pf-c-input-group__item pf-m-fill">
21052
+ <div class="pf-c-select" style="width: 124px">
21053
+ <span id="-select-name-label" hidden>Choose one</span>
21021
21054
 
21022
- <button
21023
- class="pf-c-select__toggle"
21024
- type="button"
21025
- id="-select-name-toggle"
21026
- aria-haspopup="true"
21027
- aria-expanded="false"
21028
- aria-labelledby="-select-name-label -select-name-toggle"
21029
- >
21030
- <div class="pf-c-select__toggle-wrapper">
21031
- <span class="pf-c-select__toggle-icon">
21032
- <i class="fas fa-filter" aria-hidden="true"></i>
21055
+ <button
21056
+ class="pf-c-select__toggle"
21057
+ type="button"
21058
+ id="-select-name-toggle"
21059
+ aria-haspopup="true"
21060
+ aria-expanded="false"
21061
+ aria-labelledby="-select-name-label -select-name-toggle"
21062
+ >
21063
+ <div class="pf-c-select__toggle-wrapper">
21064
+ <span class="pf-c-select__toggle-icon">
21065
+ <i class="fas fa-filter" aria-hidden="true"></i>
21066
+ </span>
21067
+ <span class="pf-c-select__toggle-text">Name</span>
21068
+ </div>
21069
+ <span class="pf-c-select__toggle-arrow">
21070
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
21033
21071
  </span>
21034
- <span class="pf-c-select__toggle-text">Name</span>
21035
- </div>
21036
- <span class="pf-c-select__toggle-arrow">
21037
- <i class="fas fa-caret-down" aria-hidden="true"></i>
21038
- </span>
21039
- </button>
21072
+ </button>
21040
21073
 
21041
- <ul
21042
- class="pf-c-select__menu"
21043
- role="listbox"
21044
- aria-labelledby="-select-name-label"
21045
- hidden
21046
- >
21047
- <li role="presentation">
21048
- <button
21049
- class="pf-c-select__menu-item"
21050
- role="option"
21051
- >Running</button>
21052
- </li>
21053
- <li role="presentation">
21054
- <button
21055
- class="pf-c-select__menu-item pf-m-selected"
21056
- role="option"
21057
- aria-selected="true"
21058
- >
21059
- Stopped
21060
- <span class="pf-c-select__menu-item-icon">
21061
- <i class="fas fa-check" aria-hidden="true"></i>
21062
- </span>
21063
- </button>
21064
- </li>
21065
- <li role="presentation">
21066
- <button
21067
- class="pf-c-select__menu-item"
21068
- role="option"
21069
- >Down</button>
21070
- </li>
21071
- <li role="presentation">
21072
- <button
21073
- class="pf-c-select__menu-item"
21074
- role="option"
21075
- >Degraded</button>
21076
- </li>
21077
- <li role="presentation">
21078
- <button
21079
- class="pf-c-select__menu-item"
21080
- role="option"
21081
- >Needs maintenance</button>
21082
- </li>
21083
- </ul>
21074
+ <ul
21075
+ class="pf-c-select__menu"
21076
+ role="listbox"
21077
+ aria-labelledby="-select-name-label"
21078
+ hidden
21079
+ >
21080
+ <li role="presentation">
21081
+ <button
21082
+ class="pf-c-select__menu-item"
21083
+ role="option"
21084
+ >Running</button>
21085
+ </li>
21086
+ <li role="presentation">
21087
+ <button
21088
+ class="pf-c-select__menu-item pf-m-selected"
21089
+ role="option"
21090
+ aria-selected="true"
21091
+ >
21092
+ Stopped
21093
+ <span class="pf-c-select__menu-item-icon">
21094
+ <i class="fas fa-check" aria-hidden="true"></i>
21095
+ </span>
21096
+ </button>
21097
+ </li>
21098
+ <li role="presentation">
21099
+ <button
21100
+ class="pf-c-select__menu-item"
21101
+ role="option"
21102
+ >Down</button>
21103
+ </li>
21104
+ <li role="presentation">
21105
+ <button
21106
+ class="pf-c-select__menu-item"
21107
+ role="option"
21108
+ >Degraded</button>
21109
+ </li>
21110
+ <li role="presentation">
21111
+ <button
21112
+ class="pf-c-select__menu-item"
21113
+ role="option"
21114
+ >Needs maintenance</button>
21115
+ </li>
21116
+ </ul>
21117
+ </div>
21084
21118
  </div>
21085
- <div class="pf-c-text-input-group" style="width: auto">
21086
- <div class="pf-c-text-input-group__main pf-m-icon">
21087
- <span class="pf-c-text-input-group__text">
21088
- <span class="pf-c-text-input-group__icon">
21089
- <i class="fas fa-fw fa-search"></i>
21119
+ <div class="pf-c-input-group__item">
21120
+ <div class="pf-c-text-input-group" style="width: auto">
21121
+ <div class="pf-c-text-input-group__main pf-m-icon">
21122
+ <span class="pf-c-text-input-group__text">
21123
+ <span class="pf-c-text-input-group__icon">
21124
+ <i class="fas fa-fw fa-search"></i>
21125
+ </span>
21126
+ <input
21127
+ class="pf-c-text-input-group__text-input"
21128
+ type="search"
21129
+ placeholder="Filter by name"
21130
+ value
21131
+ aria-label="Type to filter"
21132
+ />
21090
21133
  </span>
21091
- <input
21092
- class="pf-c-text-input-group__text-input"
21093
- type="search"
21094
- placeholder="Filter by name"
21095
- value
21096
- aria-label="Type to filter"
21097
- />
21098
- </span>
21134
+ </div>
21099
21135
  </div>
21100
21136
  </div>
21101
21137
  </div>
@@ -22828,86 +22864,90 @@ wrapperTag: div
22828
22864
  aria-label="search filter"
22829
22865
  role="group"
22830
22866
  >
22831
- <div class="pf-c-select" style="width: 175px">
22832
- <span id="-select-name-label" hidden>Choose one</span>
22833
-
22834
- <button
22835
- class="pf-c-select__toggle"
22836
- type="button"
22837
- id="-select-name-toggle"
22838
- aria-haspopup="true"
22839
- aria-expanded="false"
22840
- aria-labelledby="-select-name-label -select-name-toggle"
22841
- >
22842
- <div class="pf-c-select__toggle-wrapper">
22843
- <span class="pf-c-select__toggle-icon">
22844
- <i class="fas fa-filter" aria-hidden="true"></i>
22845
- </span>
22846
- <span class="pf-c-select__toggle-text">Name</span>
22847
- </div>
22848
- <span class="pf-c-select__toggle-arrow">
22849
- <i class="fas fa-caret-down" aria-hidden="true"></i>
22850
- </span>
22851
- </button>
22867
+ <div class="pf-c-input-group__item pf-m-fill">
22868
+ <div class="pf-c-select" style="width: 124px">
22869
+ <span id="-select-name-label" hidden>Choose one</span>
22852
22870
 
22853
- <ul
22854
- class="pf-c-select__menu"
22855
- role="listbox"
22856
- aria-labelledby="-select-name-label"
22857
- hidden
22858
- >
22859
- <li role="presentation">
22860
- <button
22861
- class="pf-c-select__menu-item"
22862
- role="option"
22863
- >Running</button>
22864
- </li>
22865
- <li role="presentation">
22866
- <button
22867
- class="pf-c-select__menu-item pf-m-selected"
22868
- role="option"
22869
- aria-selected="true"
22870
- >
22871
- Stopped
22872
- <span class="pf-c-select__menu-item-icon">
22873
- <i class="fas fa-check" aria-hidden="true"></i>
22871
+ <button
22872
+ class="pf-c-select__toggle"
22873
+ type="button"
22874
+ id="-select-name-toggle"
22875
+ aria-haspopup="true"
22876
+ aria-expanded="false"
22877
+ aria-labelledby="-select-name-label -select-name-toggle"
22878
+ >
22879
+ <div class="pf-c-select__toggle-wrapper">
22880
+ <span class="pf-c-select__toggle-icon">
22881
+ <i class="fas fa-filter" aria-hidden="true"></i>
22874
22882
  </span>
22875
- </button>
22876
- </li>
22877
- <li role="presentation">
22878
- <button
22879
- class="pf-c-select__menu-item"
22880
- role="option"
22881
- >Down</button>
22882
- </li>
22883
- <li role="presentation">
22884
- <button
22885
- class="pf-c-select__menu-item"
22886
- role="option"
22887
- >Degraded</button>
22888
- </li>
22889
- <li role="presentation">
22890
- <button
22891
- class="pf-c-select__menu-item"
22892
- role="option"
22893
- >Needs maintenance</button>
22894
- </li>
22895
- </ul>
22883
+ <span class="pf-c-select__toggle-text">Name</span>
22884
+ </div>
22885
+ <span class="pf-c-select__toggle-arrow">
22886
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
22887
+ </span>
22888
+ </button>
22889
+
22890
+ <ul
22891
+ class="pf-c-select__menu"
22892
+ role="listbox"
22893
+ aria-labelledby="-select-name-label"
22894
+ hidden
22895
+ >
22896
+ <li role="presentation">
22897
+ <button
22898
+ class="pf-c-select__menu-item"
22899
+ role="option"
22900
+ >Running</button>
22901
+ </li>
22902
+ <li role="presentation">
22903
+ <button
22904
+ class="pf-c-select__menu-item pf-m-selected"
22905
+ role="option"
22906
+ aria-selected="true"
22907
+ >
22908
+ Stopped
22909
+ <span class="pf-c-select__menu-item-icon">
22910
+ <i class="fas fa-check" aria-hidden="true"></i>
22911
+ </span>
22912
+ </button>
22913
+ </li>
22914
+ <li role="presentation">
22915
+ <button
22916
+ class="pf-c-select__menu-item"
22917
+ role="option"
22918
+ >Down</button>
22919
+ </li>
22920
+ <li role="presentation">
22921
+ <button
22922
+ class="pf-c-select__menu-item"
22923
+ role="option"
22924
+ >Degraded</button>
22925
+ </li>
22926
+ <li role="presentation">
22927
+ <button
22928
+ class="pf-c-select__menu-item"
22929
+ role="option"
22930
+ >Needs maintenance</button>
22931
+ </li>
22932
+ </ul>
22933
+ </div>
22896
22934
  </div>
22897
- <div class="pf-c-text-input-group" style="width: auto">
22898
- <div class="pf-c-text-input-group__main pf-m-icon">
22899
- <span class="pf-c-text-input-group__text">
22900
- <span class="pf-c-text-input-group__icon">
22901
- <i class="fas fa-fw fa-search"></i>
22935
+ <div class="pf-c-input-group__item">
22936
+ <div class="pf-c-text-input-group" style="width: auto">
22937
+ <div class="pf-c-text-input-group__main pf-m-icon">
22938
+ <span class="pf-c-text-input-group__text">
22939
+ <span class="pf-c-text-input-group__icon">
22940
+ <i class="fas fa-fw fa-search"></i>
22941
+ </span>
22942
+ <input
22943
+ class="pf-c-text-input-group__text-input"
22944
+ type="search"
22945
+ placeholder="Filter by name"
22946
+ value
22947
+ aria-label="Type to filter"
22948
+ />
22902
22949
  </span>
22903
- <input
22904
- class="pf-c-text-input-group__text-input"
22905
- type="search"
22906
- placeholder="Filter by name"
22907
- value
22908
- aria-label="Type to filter"
22909
- />
22910
- </span>
22950
+ </div>
22911
22951
  </div>
22912
22952
  </div>
22913
22953
  </div>
@@ -24661,86 +24701,90 @@ wrapperTag: div
24661
24701
  aria-label="search filter"
24662
24702
  role="group"
24663
24703
  >
24664
- <div class="pf-c-select" style="width: 175px">
24665
- <span id="-select-name-label" hidden>Choose one</span>
24704
+ <div class="pf-c-input-group__item pf-m-fill">
24705
+ <div class="pf-c-select" style="width: 124px">
24706
+ <span id="-select-name-label" hidden>Choose one</span>
24666
24707
 
24667
- <button
24668
- class="pf-c-select__toggle"
24669
- type="button"
24670
- id="-select-name-toggle"
24671
- aria-haspopup="true"
24672
- aria-expanded="false"
24673
- aria-labelledby="-select-name-label -select-name-toggle"
24674
- >
24675
- <div class="pf-c-select__toggle-wrapper">
24676
- <span class="pf-c-select__toggle-icon">
24677
- <i class="fas fa-filter" aria-hidden="true"></i>
24708
+ <button
24709
+ class="pf-c-select__toggle"
24710
+ type="button"
24711
+ id="-select-name-toggle"
24712
+ aria-haspopup="true"
24713
+ aria-expanded="false"
24714
+ aria-labelledby="-select-name-label -select-name-toggle"
24715
+ >
24716
+ <div class="pf-c-select__toggle-wrapper">
24717
+ <span class="pf-c-select__toggle-icon">
24718
+ <i class="fas fa-filter" aria-hidden="true"></i>
24719
+ </span>
24720
+ <span class="pf-c-select__toggle-text">Name</span>
24721
+ </div>
24722
+ <span class="pf-c-select__toggle-arrow">
24723
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
24678
24724
  </span>
24679
- <span class="pf-c-select__toggle-text">Name</span>
24680
- </div>
24681
- <span class="pf-c-select__toggle-arrow">
24682
- <i class="fas fa-caret-down" aria-hidden="true"></i>
24683
- </span>
24684
- </button>
24725
+ </button>
24685
24726
 
24686
- <ul
24687
- class="pf-c-select__menu"
24688
- role="listbox"
24689
- aria-labelledby="-select-name-label"
24690
- hidden
24691
- >
24692
- <li role="presentation">
24693
- <button
24694
- class="pf-c-select__menu-item"
24695
- role="option"
24696
- >Running</button>
24697
- </li>
24698
- <li role="presentation">
24699
- <button
24700
- class="pf-c-select__menu-item pf-m-selected"
24701
- role="option"
24702
- aria-selected="true"
24703
- >
24704
- Stopped
24705
- <span class="pf-c-select__menu-item-icon">
24706
- <i class="fas fa-check" aria-hidden="true"></i>
24707
- </span>
24708
- </button>
24709
- </li>
24710
- <li role="presentation">
24711
- <button
24712
- class="pf-c-select__menu-item"
24713
- role="option"
24714
- >Down</button>
24715
- </li>
24716
- <li role="presentation">
24717
- <button
24718
- class="pf-c-select__menu-item"
24719
- role="option"
24720
- >Degraded</button>
24721
- </li>
24722
- <li role="presentation">
24723
- <button
24724
- class="pf-c-select__menu-item"
24725
- role="option"
24726
- >Needs maintenance</button>
24727
- </li>
24728
- </ul>
24727
+ <ul
24728
+ class="pf-c-select__menu"
24729
+ role="listbox"
24730
+ aria-labelledby="-select-name-label"
24731
+ hidden
24732
+ >
24733
+ <li role="presentation">
24734
+ <button
24735
+ class="pf-c-select__menu-item"
24736
+ role="option"
24737
+ >Running</button>
24738
+ </li>
24739
+ <li role="presentation">
24740
+ <button
24741
+ class="pf-c-select__menu-item pf-m-selected"
24742
+ role="option"
24743
+ aria-selected="true"
24744
+ >
24745
+ Stopped
24746
+ <span class="pf-c-select__menu-item-icon">
24747
+ <i class="fas fa-check" aria-hidden="true"></i>
24748
+ </span>
24749
+ </button>
24750
+ </li>
24751
+ <li role="presentation">
24752
+ <button
24753
+ class="pf-c-select__menu-item"
24754
+ role="option"
24755
+ >Down</button>
24756
+ </li>
24757
+ <li role="presentation">
24758
+ <button
24759
+ class="pf-c-select__menu-item"
24760
+ role="option"
24761
+ >Degraded</button>
24762
+ </li>
24763
+ <li role="presentation">
24764
+ <button
24765
+ class="pf-c-select__menu-item"
24766
+ role="option"
24767
+ >Needs maintenance</button>
24768
+ </li>
24769
+ </ul>
24770
+ </div>
24729
24771
  </div>
24730
- <div class="pf-c-text-input-group" style="width: auto">
24731
- <div class="pf-c-text-input-group__main pf-m-icon">
24732
- <span class="pf-c-text-input-group__text">
24733
- <span class="pf-c-text-input-group__icon">
24734
- <i class="fas fa-fw fa-search"></i>
24772
+ <div class="pf-c-input-group__item">
24773
+ <div class="pf-c-text-input-group" style="width: auto">
24774
+ <div class="pf-c-text-input-group__main pf-m-icon">
24775
+ <span class="pf-c-text-input-group__text">
24776
+ <span class="pf-c-text-input-group__icon">
24777
+ <i class="fas fa-fw fa-search"></i>
24778
+ </span>
24779
+ <input
24780
+ class="pf-c-text-input-group__text-input"
24781
+ type="search"
24782
+ placeholder="Filter by name"
24783
+ value
24784
+ aria-label="Type to filter"
24785
+ />
24735
24786
  </span>
24736
- <input
24737
- class="pf-c-text-input-group__text-input"
24738
- type="search"
24739
- placeholder="Filter by name"
24740
- value
24741
- aria-label="Type to filter"
24742
- />
24743
- </span>
24787
+ </div>
24744
24788
  </div>
24745
24789
  </div>
24746
24790
  </div>
@@ -26493,86 +26537,90 @@ wrapperTag: div
26493
26537
  aria-label="search filter"
26494
26538
  role="group"
26495
26539
  >
26496
- <div class="pf-c-select" style="width: 175px">
26497
- <span id="-select-name-label" hidden>Choose one</span>
26540
+ <div class="pf-c-input-group__item pf-m-fill">
26541
+ <div class="pf-c-select" style="width: 124px">
26542
+ <span id="-select-name-label" hidden>Choose one</span>
26498
26543
 
26499
- <button
26500
- class="pf-c-select__toggle"
26501
- type="button"
26502
- id="-select-name-toggle"
26503
- aria-haspopup="true"
26504
- aria-expanded="false"
26505
- aria-labelledby="-select-name-label -select-name-toggle"
26506
- >
26507
- <div class="pf-c-select__toggle-wrapper">
26508
- <span class="pf-c-select__toggle-icon">
26509
- <i class="fas fa-filter" aria-hidden="true"></i>
26544
+ <button
26545
+ class="pf-c-select__toggle"
26546
+ type="button"
26547
+ id="-select-name-toggle"
26548
+ aria-haspopup="true"
26549
+ aria-expanded="false"
26550
+ aria-labelledby="-select-name-label -select-name-toggle"
26551
+ >
26552
+ <div class="pf-c-select__toggle-wrapper">
26553
+ <span class="pf-c-select__toggle-icon">
26554
+ <i class="fas fa-filter" aria-hidden="true"></i>
26555
+ </span>
26556
+ <span class="pf-c-select__toggle-text">Name</span>
26557
+ </div>
26558
+ <span class="pf-c-select__toggle-arrow">
26559
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
26510
26560
  </span>
26511
- <span class="pf-c-select__toggle-text">Name</span>
26512
- </div>
26513
- <span class="pf-c-select__toggle-arrow">
26514
- <i class="fas fa-caret-down" aria-hidden="true"></i>
26515
- </span>
26516
- </button>
26561
+ </button>
26517
26562
 
26518
- <ul
26519
- class="pf-c-select__menu"
26520
- role="listbox"
26521
- aria-labelledby="-select-name-label"
26522
- hidden
26523
- >
26524
- <li role="presentation">
26525
- <button
26526
- class="pf-c-select__menu-item"
26527
- role="option"
26528
- >Running</button>
26529
- </li>
26530
- <li role="presentation">
26531
- <button
26532
- class="pf-c-select__menu-item pf-m-selected"
26533
- role="option"
26534
- aria-selected="true"
26535
- >
26536
- Stopped
26537
- <span class="pf-c-select__menu-item-icon">
26538
- <i class="fas fa-check" aria-hidden="true"></i>
26539
- </span>
26540
- </button>
26541
- </li>
26542
- <li role="presentation">
26543
- <button
26544
- class="pf-c-select__menu-item"
26545
- role="option"
26546
- >Down</button>
26547
- </li>
26548
- <li role="presentation">
26549
- <button
26550
- class="pf-c-select__menu-item"
26551
- role="option"
26552
- >Degraded</button>
26553
- </li>
26554
- <li role="presentation">
26555
- <button
26556
- class="pf-c-select__menu-item"
26557
- role="option"
26558
- >Needs maintenance</button>
26559
- </li>
26560
- </ul>
26563
+ <ul
26564
+ class="pf-c-select__menu"
26565
+ role="listbox"
26566
+ aria-labelledby="-select-name-label"
26567
+ hidden
26568
+ >
26569
+ <li role="presentation">
26570
+ <button
26571
+ class="pf-c-select__menu-item"
26572
+ role="option"
26573
+ >Running</button>
26574
+ </li>
26575
+ <li role="presentation">
26576
+ <button
26577
+ class="pf-c-select__menu-item pf-m-selected"
26578
+ role="option"
26579
+ aria-selected="true"
26580
+ >
26581
+ Stopped
26582
+ <span class="pf-c-select__menu-item-icon">
26583
+ <i class="fas fa-check" aria-hidden="true"></i>
26584
+ </span>
26585
+ </button>
26586
+ </li>
26587
+ <li role="presentation">
26588
+ <button
26589
+ class="pf-c-select__menu-item"
26590
+ role="option"
26591
+ >Down</button>
26592
+ </li>
26593
+ <li role="presentation">
26594
+ <button
26595
+ class="pf-c-select__menu-item"
26596
+ role="option"
26597
+ >Degraded</button>
26598
+ </li>
26599
+ <li role="presentation">
26600
+ <button
26601
+ class="pf-c-select__menu-item"
26602
+ role="option"
26603
+ >Needs maintenance</button>
26604
+ </li>
26605
+ </ul>
26606
+ </div>
26561
26607
  </div>
26562
- <div class="pf-c-text-input-group" style="width: auto">
26563
- <div class="pf-c-text-input-group__main pf-m-icon">
26564
- <span class="pf-c-text-input-group__text">
26565
- <span class="pf-c-text-input-group__icon">
26566
- <i class="fas fa-fw fa-search"></i>
26608
+ <div class="pf-c-input-group__item">
26609
+ <div class="pf-c-text-input-group" style="width: auto">
26610
+ <div class="pf-c-text-input-group__main pf-m-icon">
26611
+ <span class="pf-c-text-input-group__text">
26612
+ <span class="pf-c-text-input-group__icon">
26613
+ <i class="fas fa-fw fa-search"></i>
26614
+ </span>
26615
+ <input
26616
+ class="pf-c-text-input-group__text-input"
26617
+ type="search"
26618
+ placeholder="Filter by name"
26619
+ value
26620
+ aria-label="Type to filter"
26621
+ />
26567
26622
  </span>
26568
- <input
26569
- class="pf-c-text-input-group__text-input"
26570
- type="search"
26571
- placeholder="Filter by name"
26572
- value
26573
- aria-label="Type to filter"
26574
- />
26575
- </span>
26623
+ </div>
26576
26624
  </div>
26577
26625
  </div>
26578
26626
  </div>