@patternfly/patternfly 4.179.3 → 4.181.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/assets/images/status-icon-sprite.svg +38 -0
  2. package/components/Dropdown/dropdown.css +4 -2
  3. package/components/Dropdown/dropdown.scss +4 -2
  4. package/components/FormControl/form-control.css +26 -0
  5. package/components/FormControl/form-control.scss +33 -1
  6. package/components/Menu/menu.css +10 -0
  7. package/components/Menu/menu.scss +14 -0
  8. package/components/MenuToggle/menu-toggle.css +10 -7
  9. package/components/MenuToggle/menu-toggle.scss +11 -9
  10. package/components/SearchInput/search-input.css +1 -0
  11. package/components/SearchInput/search-input.scss +1 -0
  12. package/docs/components/AppLauncher/examples/application-launcher.md +15 -8
  13. package/docs/components/ContextSelector/examples/context-selector.md +84 -102
  14. package/docs/components/DualListSelector/examples/DualListSelector.md +240 -112
  15. package/docs/components/FormControl/examples/FormControl.md +151 -11
  16. package/docs/components/InputGroup/examples/InputGroup.md +6 -22
  17. package/docs/components/Menu/examples/Menu.md +127 -30
  18. package/docs/components/MenuToggle/examples/MenuToggle.md +77 -44
  19. package/docs/components/Page/examples/Page.md +11 -2
  20. package/docs/components/Select/examples/Select.md +30 -14
  21. package/docs/components/Table/examples/Table.md +8 -0
  22. package/docs/components/Toolbar/examples/Toolbar.md +300 -180
  23. package/docs/components/TreeView/examples/TreeView.md +15 -7
  24. package/docs/components/Wizard/examples/Wizard.md +6 -6
  25. package/docs/demos/Alert/examples/Alert.md +20 -40
  26. package/docs/demos/BackToTop/examples/BackToTop.md +149 -249
  27. package/docs/demos/ContextSelector/examples/ContextSelector.md +247 -276
  28. package/docs/demos/DataList/examples/DataList.md +159 -114
  29. package/docs/demos/DescriptionList/examples/DescriptionList.md +3358 -0
  30. package/docs/demos/Drawer/examples/Drawer.md +60 -120
  31. package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -31
  32. package/docs/demos/Masthead/examples/Masthead.md +426 -449
  33. package/docs/demos/Nav/examples/Nav.md +203 -343
  34. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +100 -200
  35. package/docs/demos/Page/examples/Page.md +834 -1235
  36. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +207 -126
  37. package/docs/demos/Table/examples/Table.md +1189 -652
  38. package/docs/demos/Tabs/examples/Tabs.md +11 -19
  39. package/docs/demos/Toolbar/examples/Toolbar.md +55 -55
  40. package/docs/demos/Wizard/examples/Wizard.md +6 -2
  41. package/package.json +1 -1
  42. package/patternfly-no-reset.css +51 -9
  43. package/patternfly.css +51 -9
  44. package/patternfly.min.css +1 -1
  45. package/patternfly.min.css.map +1 -1
@@ -74,7 +74,7 @@ wrapperTag: div
74
74
  <button
75
75
  class="pf-c-app-launcher__toggle"
76
76
  type="button"
77
- id="-button"
77
+ id="basic-demo-masthead-icon-group--app-launcher-button"
78
78
  aria-expanded="false"
79
79
  aria-label="Application launcher"
80
80
  >
@@ -85,14 +85,24 @@ wrapperTag: div
85
85
  hidden
86
86
  >
87
87
  <div class="pf-c-app-launcher__menu-search">
88
- <input
89
- class="pf-c-form-control"
90
- type="search"
91
- aria-label="Type to filter"
92
- placeholder="Filter by name..."
93
- id="basic-demo-masthead-application-launcher-text-input"
94
- name="textInput1"
95
- />
88
+ <div class="pf-c-search-input">
89
+ <div class="pf-c-search-input__bar">
90
+ <span class="pf-c-search-input__text">
91
+ <span class="pf-c-search-input__icon">
92
+ <i
93
+ class="fas fa-search fa-fw"
94
+ aria-hidden="true"
95
+ ></i>
96
+ </span>
97
+ <input
98
+ class="pf-c-search-input__text-input"
99
+ type="text"
100
+ placeholder="Filter by name"
101
+ aria-label="Filter by name"
102
+ />
103
+ </span>
104
+ </div>
105
+ </div>
96
106
  </div>
97
107
  <section class="pf-c-app-launcher__group">
98
108
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -574,13 +584,24 @@ wrapperTag: div
574
584
  </div>
575
585
  <div class="pf-c-menu__search">
576
586
  <div class="pf-c-menu__search-input">
577
- <input
578
- class="pf-c-form-control pf-m-search"
579
- type="search"
580
- id="basic-demo-masthead-drilldown-menu-list-3-search-input"
581
- name="basic-demo-masthead-drilldown-menu-list-3-search-input"
582
- aria-label="Search"
583
- />
587
+ <div class="pf-c-search-input">
588
+ <div class="pf-c-search-input__bar">
589
+ <span class="pf-c-search-input__text">
590
+ <span class="pf-c-search-input__icon">
591
+ <i
592
+ class="fas fa-search fa-fw"
593
+ aria-hidden="true"
594
+ ></i>
595
+ </span>
596
+ <input
597
+ class="pf-c-search-input__text-input"
598
+ type="text"
599
+ placeholder="Search"
600
+ aria-label="Search"
601
+ />
602
+ </span>
603
+ </div>
604
+ </div>
584
605
  </div>
585
606
  </div>
586
607
  <hr class="pf-c-divider" />
@@ -933,64 +954,88 @@ wrapperTag: div
933
954
  aria-label="search filter"
934
955
  role="group"
935
956
  >
936
- <div class="pf-c-dropdown">
957
+ <div class="pf-c-select" style="width: 175px">
958
+ <span id="-select-name-label" hidden>Choose one</span>
959
+
937
960
  <button
938
- class="pf-c-dropdown__toggle"
939
- id="--button"
940
- aria-expanded="false"
961
+ class="pf-c-select__toggle"
941
962
  type="button"
963
+ id="-select-name-toggle"
964
+ aria-haspopup="true"
965
+ aria-expanded="false"
966
+ aria-labelledby="-select-name-label -select-name-toggle"
942
967
  >
943
- <span class="pf-c-dropdown__toggle-text">Name</span>
944
- <span class="pf-c-dropdown__toggle-icon">
968
+ <div class="pf-c-select__toggle-wrapper">
969
+ <span class="pf-c-select__toggle-icon">
970
+ <i class="fas fa-filter" aria-hidden="true"></i>
971
+ </span>
972
+ <span class="pf-c-select__toggle-text">Name</span>
973
+ </div>
974
+ <span class="pf-c-select__toggle-arrow">
945
975
  <i class="fas fa-caret-down" aria-hidden="true"></i>
946
976
  </span>
947
977
  </button>
978
+
948
979
  <ul
949
- class="pf-c-dropdown__menu"
950
- aria-labelledby="--button"
980
+ class="pf-c-select__menu"
981
+ role="listbox"
982
+ aria-labelledby="-select-name-label"
951
983
  hidden
984
+ style="width: 175px"
952
985
  >
953
- <li>
954
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
986
+ <li role="presentation">
987
+ <button
988
+ class="pf-c-select__menu-item"
989
+ role="option"
990
+ >Running</button>
955
991
  </li>
956
- <li>
992
+ <li role="presentation">
957
993
  <button
958
- class="pf-c-dropdown__menu-item"
959
- type="button"
960
- >Action</button>
994
+ class="pf-c-select__menu-item pf-m-selected"
995
+ role="option"
996
+ aria-selected="true"
997
+ >
998
+ Stopped
999
+ <span class="pf-c-select__menu-item-icon">
1000
+ <i class="fas fa-check" aria-hidden="true"></i>
1001
+ </span>
1002
+ </button>
961
1003
  </li>
962
- <li>
963
- <a
964
- class="pf-c-dropdown__menu-item pf-m-disabled"
965
- href="#"
966
- aria-disabled="true"
967
- tabindex="-1"
968
- >Disabled link</a>
1004
+ <li role="presentation">
1005
+ <button
1006
+ class="pf-c-select__menu-item"
1007
+ role="option"
1008
+ >Down</button>
969
1009
  </li>
970
- <li>
1010
+ <li role="presentation">
971
1011
  <button
972
- class="pf-c-dropdown__menu-item"
973
- type="button"
974
- disabled
975
- >Disabled action</button>
1012
+ class="pf-c-select__menu-item"
1013
+ role="option"
1014
+ >Degraded</button>
976
1015
  </li>
977
- <li class="pf-c-divider" role="separator"></li>
978
- <li>
979
- <a
980
- class="pf-c-dropdown__menu-item"
981
- href="#"
982
- >Separated link</a>
1016
+ <li role="presentation">
1017
+ <button
1018
+ class="pf-c-select__menu-item"
1019
+ role="option"
1020
+ >Needs maintenance</button>
983
1021
  </li>
984
1022
  </ul>
985
1023
  </div>
986
- <input
987
- class="pf-c-form-control"
988
- type="search"
989
- id="--search-filter-input"
990
- name="-search-filter-input"
991
- aria-label="input with dropdown and button"
992
- aria-describedby="--button"
993
- />
1024
+ <div class="pf-c-search-input">
1025
+ <div class="pf-c-search-input__bar">
1026
+ <span class="pf-c-search-input__text">
1027
+ <span class="pf-c-search-input__icon">
1028
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1029
+ </span>
1030
+ <input
1031
+ class="pf-c-search-input__text-input"
1032
+ type="text"
1033
+ placeholder="Filter by name"
1034
+ aria-label="Filter by name"
1035
+ />
1036
+ </span>
1037
+ </div>
1038
+ </div>
994
1039
  </div>
995
1040
  </div>
996
1041
  </div>
@@ -1748,7 +1793,7 @@ wrapperTag: div
1748
1793
  <button
1749
1794
  class="pf-c-app-launcher__toggle"
1750
1795
  type="button"
1751
- id="-button"
1796
+ id="sortable-demo-masthead-icon-group--app-launcher-button"
1752
1797
  aria-expanded="false"
1753
1798
  aria-label="Application launcher"
1754
1799
  >
@@ -1759,14 +1804,24 @@ wrapperTag: div
1759
1804
  hidden
1760
1805
  >
1761
1806
  <div class="pf-c-app-launcher__menu-search">
1762
- <input
1763
- class="pf-c-form-control"
1764
- type="search"
1765
- aria-label="Type to filter"
1766
- placeholder="Filter by name..."
1767
- id="sortable-demo-masthead-application-launcher-text-input"
1768
- name="textInput1"
1769
- />
1807
+ <div class="pf-c-search-input">
1808
+ <div class="pf-c-search-input__bar">
1809
+ <span class="pf-c-search-input__text">
1810
+ <span class="pf-c-search-input__icon">
1811
+ <i
1812
+ class="fas fa-search fa-fw"
1813
+ aria-hidden="true"
1814
+ ></i>
1815
+ </span>
1816
+ <input
1817
+ class="pf-c-search-input__text-input"
1818
+ type="text"
1819
+ placeholder="Filter by name"
1820
+ aria-label="Filter by name"
1821
+ />
1822
+ </span>
1823
+ </div>
1824
+ </div>
1770
1825
  </div>
1771
1826
  <section class="pf-c-app-launcher__group">
1772
1827
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -2248,13 +2303,24 @@ wrapperTag: div
2248
2303
  </div>
2249
2304
  <div class="pf-c-menu__search">
2250
2305
  <div class="pf-c-menu__search-input">
2251
- <input
2252
- class="pf-c-form-control pf-m-search"
2253
- type="search"
2254
- id="sortable-demo-masthead-drilldown-menu-list-3-search-input"
2255
- name="sortable-demo-masthead-drilldown-menu-list-3-search-input"
2256
- aria-label="Search"
2257
- />
2306
+ <div class="pf-c-search-input">
2307
+ <div class="pf-c-search-input__bar">
2308
+ <span class="pf-c-search-input__text">
2309
+ <span class="pf-c-search-input__icon">
2310
+ <i
2311
+ class="fas fa-search fa-fw"
2312
+ aria-hidden="true"
2313
+ ></i>
2314
+ </span>
2315
+ <input
2316
+ class="pf-c-search-input__text-input"
2317
+ type="text"
2318
+ placeholder="Search"
2319
+ aria-label="Search"
2320
+ />
2321
+ </span>
2322
+ </div>
2323
+ </div>
2258
2324
  </div>
2259
2325
  </div>
2260
2326
  <hr class="pf-c-divider" />
@@ -2605,64 +2671,88 @@ wrapperTag: div
2605
2671
  aria-label="search filter"
2606
2672
  role="group"
2607
2673
  >
2608
- <div class="pf-c-dropdown">
2674
+ <div class="pf-c-select" style="width: 175px">
2675
+ <span id="-select-name-label" hidden>Choose one</span>
2676
+
2609
2677
  <button
2610
- class="pf-c-dropdown__toggle"
2611
- id="--button"
2612
- aria-expanded="false"
2678
+ class="pf-c-select__toggle"
2613
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"
2614
2684
  >
2615
- <span class="pf-c-dropdown__toggle-text">Name</span>
2616
- <span class="pf-c-dropdown__toggle-icon">
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">
2617
2692
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2618
2693
  </span>
2619
2694
  </button>
2695
+
2620
2696
  <ul
2621
- class="pf-c-dropdown__menu"
2622
- aria-labelledby="--button"
2697
+ class="pf-c-select__menu"
2698
+ role="listbox"
2699
+ aria-labelledby="-select-name-label"
2623
2700
  hidden
2701
+ style="width: 175px"
2624
2702
  >
2625
- <li>
2626
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
2703
+ <li role="presentation">
2704
+ <button
2705
+ class="pf-c-select__menu-item"
2706
+ role="option"
2707
+ >Running</button>
2627
2708
  </li>
2628
- <li>
2709
+ <li role="presentation">
2629
2710
  <button
2630
- class="pf-c-dropdown__menu-item"
2631
- type="button"
2632
- >Action</button>
2711
+ class="pf-c-select__menu-item pf-m-selected"
2712
+ role="option"
2713
+ aria-selected="true"
2714
+ >
2715
+ Stopped
2716
+ <span class="pf-c-select__menu-item-icon">
2717
+ <i class="fas fa-check" aria-hidden="true"></i>
2718
+ </span>
2719
+ </button>
2633
2720
  </li>
2634
- <li>
2635
- <a
2636
- class="pf-c-dropdown__menu-item pf-m-disabled"
2637
- href="#"
2638
- aria-disabled="true"
2639
- tabindex="-1"
2640
- >Disabled link</a>
2721
+ <li role="presentation">
2722
+ <button
2723
+ class="pf-c-select__menu-item"
2724
+ role="option"
2725
+ >Down</button>
2641
2726
  </li>
2642
- <li>
2727
+ <li role="presentation">
2643
2728
  <button
2644
- class="pf-c-dropdown__menu-item"
2645
- type="button"
2646
- disabled
2647
- >Disabled action</button>
2729
+ class="pf-c-select__menu-item"
2730
+ role="option"
2731
+ >Degraded</button>
2648
2732
  </li>
2649
- <li class="pf-c-divider" role="separator"></li>
2650
- <li>
2651
- <a
2652
- class="pf-c-dropdown__menu-item"
2653
- href="#"
2654
- >Separated link</a>
2733
+ <li role="presentation">
2734
+ <button
2735
+ class="pf-c-select__menu-item"
2736
+ role="option"
2737
+ >Needs maintenance</button>
2655
2738
  </li>
2656
2739
  </ul>
2657
2740
  </div>
2658
- <input
2659
- class="pf-c-form-control"
2660
- type="search"
2661
- id="--search-filter-input"
2662
- name="-search-filter-input"
2663
- aria-label="input with dropdown and button"
2664
- aria-describedby="--button"
2665
- />
2741
+ <div class="pf-c-search-input">
2742
+ <div class="pf-c-search-input__bar">
2743
+ <span class="pf-c-search-input__text">
2744
+ <span class="pf-c-search-input__icon">
2745
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
2746
+ </span>
2747
+ <input
2748
+ class="pf-c-search-input__text-input"
2749
+ type="text"
2750
+ placeholder="Filter by name"
2751
+ aria-label="Filter by name"
2752
+ />
2753
+ </span>
2754
+ </div>
2755
+ </div>
2666
2756
  </div>
2667
2757
  </div>
2668
2758
  </div>
@@ -3596,7 +3686,7 @@ wrapperTag: div
3596
3686
  <button
3597
3687
  class="pf-c-app-launcher__toggle"
3598
3688
  type="button"
3599
- id="-button"
3689
+ id="expandable-demo-masthead-icon-group--app-launcher-button"
3600
3690
  aria-expanded="false"
3601
3691
  aria-label="Application launcher"
3602
3692
  >
@@ -3607,14 +3697,24 @@ wrapperTag: div
3607
3697
  hidden
3608
3698
  >
3609
3699
  <div class="pf-c-app-launcher__menu-search">
3610
- <input
3611
- class="pf-c-form-control"
3612
- type="search"
3613
- aria-label="Type to filter"
3614
- placeholder="Filter by name..."
3615
- id="expandable-demo-masthead-application-launcher-text-input"
3616
- name="textInput1"
3617
- />
3700
+ <div class="pf-c-search-input">
3701
+ <div class="pf-c-search-input__bar">
3702
+ <span class="pf-c-search-input__text">
3703
+ <span class="pf-c-search-input__icon">
3704
+ <i
3705
+ class="fas fa-search fa-fw"
3706
+ aria-hidden="true"
3707
+ ></i>
3708
+ </span>
3709
+ <input
3710
+ class="pf-c-search-input__text-input"
3711
+ type="text"
3712
+ placeholder="Filter by name"
3713
+ aria-label="Filter by name"
3714
+ />
3715
+ </span>
3716
+ </div>
3717
+ </div>
3618
3718
  </div>
3619
3719
  <section class="pf-c-app-launcher__group">
3620
3720
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -4096,13 +4196,24 @@ wrapperTag: div
4096
4196
  </div>
4097
4197
  <div class="pf-c-menu__search">
4098
4198
  <div class="pf-c-menu__search-input">
4099
- <input
4100
- class="pf-c-form-control pf-m-search"
4101
- type="search"
4102
- id="expandable-demo-masthead-drilldown-menu-list-3-search-input"
4103
- name="expandable-demo-masthead-drilldown-menu-list-3-search-input"
4104
- aria-label="Search"
4105
- />
4199
+ <div class="pf-c-search-input">
4200
+ <div class="pf-c-search-input__bar">
4201
+ <span class="pf-c-search-input__text">
4202
+ <span class="pf-c-search-input__icon">
4203
+ <i
4204
+ class="fas fa-search fa-fw"
4205
+ aria-hidden="true"
4206
+ ></i>
4207
+ </span>
4208
+ <input
4209
+ class="pf-c-search-input__text-input"
4210
+ type="text"
4211
+ placeholder="Search"
4212
+ aria-label="Search"
4213
+ />
4214
+ </span>
4215
+ </div>
4216
+ </div>
4106
4217
  </div>
4107
4218
  </div>
4108
4219
  <hr class="pf-c-divider" />
@@ -4457,64 +4568,88 @@ wrapperTag: div
4457
4568
  aria-label="search filter"
4458
4569
  role="group"
4459
4570
  >
4460
- <div class="pf-c-dropdown">
4571
+ <div class="pf-c-select" style="width: 175px">
4572
+ <span id="-select-name-label" hidden>Choose one</span>
4573
+
4461
4574
  <button
4462
- class="pf-c-dropdown__toggle"
4463
- id="--button"
4464
- aria-expanded="false"
4575
+ class="pf-c-select__toggle"
4465
4576
  type="button"
4577
+ id="-select-name-toggle"
4578
+ aria-haspopup="true"
4579
+ aria-expanded="false"
4580
+ aria-labelledby="-select-name-label -select-name-toggle"
4466
4581
  >
4467
- <span class="pf-c-dropdown__toggle-text">Name</span>
4468
- <span class="pf-c-dropdown__toggle-icon">
4582
+ <div class="pf-c-select__toggle-wrapper">
4583
+ <span class="pf-c-select__toggle-icon">
4584
+ <i class="fas fa-filter" aria-hidden="true"></i>
4585
+ </span>
4586
+ <span class="pf-c-select__toggle-text">Name</span>
4587
+ </div>
4588
+ <span class="pf-c-select__toggle-arrow">
4469
4589
  <i class="fas fa-caret-down" aria-hidden="true"></i>
4470
4590
  </span>
4471
4591
  </button>
4592
+
4472
4593
  <ul
4473
- class="pf-c-dropdown__menu"
4474
- aria-labelledby="--button"
4594
+ class="pf-c-select__menu"
4595
+ role="listbox"
4596
+ aria-labelledby="-select-name-label"
4475
4597
  hidden
4598
+ style="width: 175px"
4476
4599
  >
4477
- <li>
4478
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
4600
+ <li role="presentation">
4601
+ <button
4602
+ class="pf-c-select__menu-item"
4603
+ role="option"
4604
+ >Running</button>
4479
4605
  </li>
4480
- <li>
4606
+ <li role="presentation">
4481
4607
  <button
4482
- class="pf-c-dropdown__menu-item"
4483
- type="button"
4484
- >Action</button>
4608
+ class="pf-c-select__menu-item pf-m-selected"
4609
+ role="option"
4610
+ aria-selected="true"
4611
+ >
4612
+ Stopped
4613
+ <span class="pf-c-select__menu-item-icon">
4614
+ <i class="fas fa-check" aria-hidden="true"></i>
4615
+ </span>
4616
+ </button>
4485
4617
  </li>
4486
- <li>
4487
- <a
4488
- class="pf-c-dropdown__menu-item pf-m-disabled"
4489
- href="#"
4490
- aria-disabled="true"
4491
- tabindex="-1"
4492
- >Disabled link</a>
4618
+ <li role="presentation">
4619
+ <button
4620
+ class="pf-c-select__menu-item"
4621
+ role="option"
4622
+ >Down</button>
4493
4623
  </li>
4494
- <li>
4624
+ <li role="presentation">
4495
4625
  <button
4496
- class="pf-c-dropdown__menu-item"
4497
- type="button"
4498
- disabled
4499
- >Disabled action</button>
4626
+ class="pf-c-select__menu-item"
4627
+ role="option"
4628
+ >Degraded</button>
4500
4629
  </li>
4501
- <li class="pf-c-divider" role="separator"></li>
4502
- <li>
4503
- <a
4504
- class="pf-c-dropdown__menu-item"
4505
- href="#"
4506
- >Separated link</a>
4630
+ <li role="presentation">
4631
+ <button
4632
+ class="pf-c-select__menu-item"
4633
+ role="option"
4634
+ >Needs maintenance</button>
4507
4635
  </li>
4508
4636
  </ul>
4509
4637
  </div>
4510
- <input
4511
- class="pf-c-form-control"
4512
- type="search"
4513
- id="--search-filter-input"
4514
- name="-search-filter-input"
4515
- aria-label="input with dropdown and button"
4516
- aria-describedby="--button"
4517
- />
4638
+ <div class="pf-c-search-input">
4639
+ <div class="pf-c-search-input__bar">
4640
+ <span class="pf-c-search-input__text">
4641
+ <span class="pf-c-search-input__icon">
4642
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
4643
+ </span>
4644
+ <input
4645
+ class="pf-c-search-input__text-input"
4646
+ type="text"
4647
+ placeholder="Filter by name"
4648
+ aria-label="Filter by name"
4649
+ />
4650
+ </span>
4651
+ </div>
4652
+ </div>
4518
4653
  </div>
4519
4654
  </div>
4520
4655
 
@@ -5646,7 +5781,7 @@ wrapperTag: div
5646
5781
  <button
5647
5782
  class="pf-c-app-launcher__toggle"
5648
5783
  type="button"
5649
- id="-button"
5784
+ id="compact-demo-masthead-icon-group--app-launcher-button"
5650
5785
  aria-expanded="false"
5651
5786
  aria-label="Application launcher"
5652
5787
  >
@@ -5657,14 +5792,24 @@ wrapperTag: div
5657
5792
  hidden
5658
5793
  >
5659
5794
  <div class="pf-c-app-launcher__menu-search">
5660
- <input
5661
- class="pf-c-form-control"
5662
- type="search"
5663
- aria-label="Type to filter"
5664
- placeholder="Filter by name..."
5665
- id="compact-demo-masthead-application-launcher-text-input"
5666
- name="textInput1"
5667
- />
5795
+ <div class="pf-c-search-input">
5796
+ <div class="pf-c-search-input__bar">
5797
+ <span class="pf-c-search-input__text">
5798
+ <span class="pf-c-search-input__icon">
5799
+ <i
5800
+ class="fas fa-search fa-fw"
5801
+ aria-hidden="true"
5802
+ ></i>
5803
+ </span>
5804
+ <input
5805
+ class="pf-c-search-input__text-input"
5806
+ type="text"
5807
+ placeholder="Filter by name"
5808
+ aria-label="Filter by name"
5809
+ />
5810
+ </span>
5811
+ </div>
5812
+ </div>
5668
5813
  </div>
5669
5814
  <section class="pf-c-app-launcher__group">
5670
5815
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -6146,13 +6291,24 @@ wrapperTag: div
6146
6291
  </div>
6147
6292
  <div class="pf-c-menu__search">
6148
6293
  <div class="pf-c-menu__search-input">
6149
- <input
6150
- class="pf-c-form-control pf-m-search"
6151
- type="search"
6152
- id="compact-demo-masthead-drilldown-menu-list-3-search-input"
6153
- name="compact-demo-masthead-drilldown-menu-list-3-search-input"
6154
- aria-label="Search"
6155
- />
6294
+ <div class="pf-c-search-input">
6295
+ <div class="pf-c-search-input__bar">
6296
+ <span class="pf-c-search-input__text">
6297
+ <span class="pf-c-search-input__icon">
6298
+ <i
6299
+ class="fas fa-search fa-fw"
6300
+ aria-hidden="true"
6301
+ ></i>
6302
+ </span>
6303
+ <input
6304
+ class="pf-c-search-input__text-input"
6305
+ type="text"
6306
+ placeholder="Search"
6307
+ aria-label="Search"
6308
+ />
6309
+ </span>
6310
+ </div>
6311
+ </div>
6156
6312
  </div>
6157
6313
  </div>
6158
6314
  <hr class="pf-c-divider" />
@@ -6503,64 +6659,88 @@ wrapperTag: div
6503
6659
  aria-label="search filter"
6504
6660
  role="group"
6505
6661
  >
6506
- <div class="pf-c-dropdown">
6662
+ <div class="pf-c-select" style="width: 175px">
6663
+ <span id="-select-name-label" hidden>Choose one</span>
6664
+
6507
6665
  <button
6508
- class="pf-c-dropdown__toggle"
6509
- id="--button"
6510
- aria-expanded="false"
6666
+ class="pf-c-select__toggle"
6511
6667
  type="button"
6668
+ id="-select-name-toggle"
6669
+ aria-haspopup="true"
6670
+ aria-expanded="false"
6671
+ aria-labelledby="-select-name-label -select-name-toggle"
6512
6672
  >
6513
- <span class="pf-c-dropdown__toggle-text">Name</span>
6514
- <span class="pf-c-dropdown__toggle-icon">
6673
+ <div class="pf-c-select__toggle-wrapper">
6674
+ <span class="pf-c-select__toggle-icon">
6675
+ <i class="fas fa-filter" aria-hidden="true"></i>
6676
+ </span>
6677
+ <span class="pf-c-select__toggle-text">Name</span>
6678
+ </div>
6679
+ <span class="pf-c-select__toggle-arrow">
6515
6680
  <i class="fas fa-caret-down" aria-hidden="true"></i>
6516
6681
  </span>
6517
6682
  </button>
6683
+
6518
6684
  <ul
6519
- class="pf-c-dropdown__menu"
6520
- aria-labelledby="--button"
6685
+ class="pf-c-select__menu"
6686
+ role="listbox"
6687
+ aria-labelledby="-select-name-label"
6521
6688
  hidden
6689
+ style="width: 175px"
6522
6690
  >
6523
- <li>
6524
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
6691
+ <li role="presentation">
6692
+ <button
6693
+ class="pf-c-select__menu-item"
6694
+ role="option"
6695
+ >Running</button>
6525
6696
  </li>
6526
- <li>
6697
+ <li role="presentation">
6527
6698
  <button
6528
- class="pf-c-dropdown__menu-item"
6529
- type="button"
6530
- >Action</button>
6699
+ class="pf-c-select__menu-item pf-m-selected"
6700
+ role="option"
6701
+ aria-selected="true"
6702
+ >
6703
+ Stopped
6704
+ <span class="pf-c-select__menu-item-icon">
6705
+ <i class="fas fa-check" aria-hidden="true"></i>
6706
+ </span>
6707
+ </button>
6531
6708
  </li>
6532
- <li>
6533
- <a
6534
- class="pf-c-dropdown__menu-item pf-m-disabled"
6535
- href="#"
6536
- aria-disabled="true"
6537
- tabindex="-1"
6538
- >Disabled link</a>
6709
+ <li role="presentation">
6710
+ <button
6711
+ class="pf-c-select__menu-item"
6712
+ role="option"
6713
+ >Down</button>
6539
6714
  </li>
6540
- <li>
6715
+ <li role="presentation">
6541
6716
  <button
6542
- class="pf-c-dropdown__menu-item"
6543
- type="button"
6544
- disabled
6545
- >Disabled action</button>
6717
+ class="pf-c-select__menu-item"
6718
+ role="option"
6719
+ >Degraded</button>
6546
6720
  </li>
6547
- <li class="pf-c-divider" role="separator"></li>
6548
- <li>
6549
- <a
6550
- class="pf-c-dropdown__menu-item"
6551
- href="#"
6552
- >Separated link</a>
6721
+ <li role="presentation">
6722
+ <button
6723
+ class="pf-c-select__menu-item"
6724
+ role="option"
6725
+ >Needs maintenance</button>
6553
6726
  </li>
6554
6727
  </ul>
6555
6728
  </div>
6556
- <input
6557
- class="pf-c-form-control"
6558
- type="search"
6559
- id="--search-filter-input"
6560
- name="-search-filter-input"
6561
- aria-label="input with dropdown and button"
6562
- aria-describedby="--button"
6563
- />
6729
+ <div class="pf-c-search-input">
6730
+ <div class="pf-c-search-input__bar">
6731
+ <span class="pf-c-search-input__text">
6732
+ <span class="pf-c-search-input__icon">
6733
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
6734
+ </span>
6735
+ <input
6736
+ class="pf-c-search-input__text-input"
6737
+ type="text"
6738
+ placeholder="Filter by name"
6739
+ aria-label="Filter by name"
6740
+ />
6741
+ </span>
6742
+ </div>
6743
+ </div>
6564
6744
  </div>
6565
6745
  </div>
6566
6746
 
@@ -7352,7 +7532,7 @@ wrapperTag: div
7352
7532
  <button
7353
7533
  class="pf-c-app-launcher__toggle"
7354
7534
  type="button"
7355
- id="-button"
7535
+ id="compound-expansion-demo-masthead-icon-group--app-launcher-button"
7356
7536
  aria-expanded="false"
7357
7537
  aria-label="Application launcher"
7358
7538
  >
@@ -7363,14 +7543,24 @@ wrapperTag: div
7363
7543
  hidden
7364
7544
  >
7365
7545
  <div class="pf-c-app-launcher__menu-search">
7366
- <input
7367
- class="pf-c-form-control"
7368
- type="search"
7369
- aria-label="Type to filter"
7370
- placeholder="Filter by name..."
7371
- id="compound-expansion-demo-masthead-application-launcher-text-input"
7372
- name="textInput1"
7373
- />
7546
+ <div class="pf-c-search-input">
7547
+ <div class="pf-c-search-input__bar">
7548
+ <span class="pf-c-search-input__text">
7549
+ <span class="pf-c-search-input__icon">
7550
+ <i
7551
+ class="fas fa-search fa-fw"
7552
+ aria-hidden="true"
7553
+ ></i>
7554
+ </span>
7555
+ <input
7556
+ class="pf-c-search-input__text-input"
7557
+ type="text"
7558
+ placeholder="Filter by name"
7559
+ aria-label="Filter by name"
7560
+ />
7561
+ </span>
7562
+ </div>
7563
+ </div>
7374
7564
  </div>
7375
7565
  <section class="pf-c-app-launcher__group">
7376
7566
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -7852,13 +8042,24 @@ wrapperTag: div
7852
8042
  </div>
7853
8043
  <div class="pf-c-menu__search">
7854
8044
  <div class="pf-c-menu__search-input">
7855
- <input
7856
- class="pf-c-form-control pf-m-search"
7857
- type="search"
7858
- id="compound-expansion-demo-masthead-drilldown-menu-list-3-search-input"
7859
- name="compound-expansion-demo-masthead-drilldown-menu-list-3-search-input"
7860
- aria-label="Search"
7861
- />
8045
+ <div class="pf-c-search-input">
8046
+ <div class="pf-c-search-input__bar">
8047
+ <span class="pf-c-search-input__text">
8048
+ <span class="pf-c-search-input__icon">
8049
+ <i
8050
+ class="fas fa-search fa-fw"
8051
+ aria-hidden="true"
8052
+ ></i>
8053
+ </span>
8054
+ <input
8055
+ class="pf-c-search-input__text-input"
8056
+ type="text"
8057
+ placeholder="Search"
8058
+ aria-label="Search"
8059
+ />
8060
+ </span>
8061
+ </div>
8062
+ </div>
7862
8063
  </div>
7863
8064
  </div>
7864
8065
  <hr class="pf-c-divider" />
@@ -8217,64 +8418,88 @@ wrapperTag: div
8217
8418
  aria-label="search filter"
8218
8419
  role="group"
8219
8420
  >
8220
- <div class="pf-c-dropdown">
8421
+ <div class="pf-c-select" style="width: 175px">
8422
+ <span id="-select-name-label" hidden>Choose one</span>
8423
+
8221
8424
  <button
8222
- class="pf-c-dropdown__toggle"
8223
- id="--button"
8224
- aria-expanded="false"
8425
+ class="pf-c-select__toggle"
8225
8426
  type="button"
8427
+ id="-select-name-toggle"
8428
+ aria-haspopup="true"
8429
+ aria-expanded="false"
8430
+ aria-labelledby="-select-name-label -select-name-toggle"
8226
8431
  >
8227
- <span class="pf-c-dropdown__toggle-text">Name</span>
8228
- <span class="pf-c-dropdown__toggle-icon">
8432
+ <div class="pf-c-select__toggle-wrapper">
8433
+ <span class="pf-c-select__toggle-icon">
8434
+ <i class="fas fa-filter" aria-hidden="true"></i>
8435
+ </span>
8436
+ <span class="pf-c-select__toggle-text">Name</span>
8437
+ </div>
8438
+ <span class="pf-c-select__toggle-arrow">
8229
8439
  <i class="fas fa-caret-down" aria-hidden="true"></i>
8230
8440
  </span>
8231
8441
  </button>
8442
+
8232
8443
  <ul
8233
- class="pf-c-dropdown__menu"
8234
- aria-labelledby="--button"
8444
+ class="pf-c-select__menu"
8445
+ role="listbox"
8446
+ aria-labelledby="-select-name-label"
8235
8447
  hidden
8448
+ style="width: 175px"
8236
8449
  >
8237
- <li>
8238
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
8450
+ <li role="presentation">
8451
+ <button
8452
+ class="pf-c-select__menu-item"
8453
+ role="option"
8454
+ >Running</button>
8239
8455
  </li>
8240
- <li>
8456
+ <li role="presentation">
8241
8457
  <button
8242
- class="pf-c-dropdown__menu-item"
8243
- type="button"
8244
- >Action</button>
8458
+ class="pf-c-select__menu-item pf-m-selected"
8459
+ role="option"
8460
+ aria-selected="true"
8461
+ >
8462
+ Stopped
8463
+ <span class="pf-c-select__menu-item-icon">
8464
+ <i class="fas fa-check" aria-hidden="true"></i>
8465
+ </span>
8466
+ </button>
8245
8467
  </li>
8246
- <li>
8247
- <a
8248
- class="pf-c-dropdown__menu-item pf-m-disabled"
8249
- href="#"
8250
- aria-disabled="true"
8251
- tabindex="-1"
8252
- >Disabled link</a>
8468
+ <li role="presentation">
8469
+ <button
8470
+ class="pf-c-select__menu-item"
8471
+ role="option"
8472
+ >Down</button>
8253
8473
  </li>
8254
- <li>
8474
+ <li role="presentation">
8255
8475
  <button
8256
- class="pf-c-dropdown__menu-item"
8257
- type="button"
8258
- disabled
8259
- >Disabled action</button>
8476
+ class="pf-c-select__menu-item"
8477
+ role="option"
8478
+ >Degraded</button>
8260
8479
  </li>
8261
- <li class="pf-c-divider" role="separator"></li>
8262
- <li>
8263
- <a
8264
- class="pf-c-dropdown__menu-item"
8265
- href="#"
8266
- >Separated link</a>
8480
+ <li role="presentation">
8481
+ <button
8482
+ class="pf-c-select__menu-item"
8483
+ role="option"
8484
+ >Needs maintenance</button>
8267
8485
  </li>
8268
8486
  </ul>
8269
8487
  </div>
8270
- <input
8271
- class="pf-c-form-control"
8272
- type="search"
8273
- id="--search-filter-input"
8274
- name="-search-filter-input"
8275
- aria-label="input with dropdown and button"
8276
- aria-describedby="--button"
8277
- />
8488
+ <div class="pf-c-search-input">
8489
+ <div class="pf-c-search-input__bar">
8490
+ <span class="pf-c-search-input__text">
8491
+ <span class="pf-c-search-input__icon">
8492
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
8493
+ </span>
8494
+ <input
8495
+ class="pf-c-search-input__text-input"
8496
+ type="text"
8497
+ placeholder="Filter by name"
8498
+ aria-label="Filter by name"
8499
+ />
8500
+ </span>
8501
+ </div>
8502
+ </div>
8278
8503
  </div>
8279
8504
  </div>
8280
8505
 
@@ -12272,7 +12497,7 @@ wrapperTag: div
12272
12497
  <button
12273
12498
  class="pf-c-app-launcher__toggle"
12274
12499
  type="button"
12275
- id="-button"
12500
+ id="loading-state-demo-masthead-icon-group--app-launcher-button"
12276
12501
  aria-expanded="false"
12277
12502
  aria-label="Application launcher"
12278
12503
  >
@@ -12283,18 +12508,28 @@ wrapperTag: div
12283
12508
  hidden
12284
12509
  >
12285
12510
  <div class="pf-c-app-launcher__menu-search">
12286
- <input
12287
- class="pf-c-form-control"
12288
- type="search"
12289
- aria-label="Type to filter"
12290
- placeholder="Filter by name..."
12291
- id="loading-state-demo-masthead-application-launcher-text-input"
12292
- name="textInput1"
12293
- />
12294
- </div>
12295
- <section class="pf-c-app-launcher__group">
12296
- <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
12297
- <ul>
12511
+ <div class="pf-c-search-input">
12512
+ <div class="pf-c-search-input__bar">
12513
+ <span class="pf-c-search-input__text">
12514
+ <span class="pf-c-search-input__icon">
12515
+ <i
12516
+ class="fas fa-search fa-fw"
12517
+ aria-hidden="true"
12518
+ ></i>
12519
+ </span>
12520
+ <input
12521
+ class="pf-c-search-input__text-input"
12522
+ type="text"
12523
+ placeholder="Filter by name"
12524
+ aria-label="Filter by name"
12525
+ />
12526
+ </span>
12527
+ </div>
12528
+ </div>
12529
+ </div>
12530
+ <section class="pf-c-app-launcher__group">
12531
+ <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
12532
+ <ul>
12298
12533
  <li
12299
12534
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
12300
12535
  >
@@ -12772,13 +13007,24 @@ wrapperTag: div
12772
13007
  </div>
12773
13008
  <div class="pf-c-menu__search">
12774
13009
  <div class="pf-c-menu__search-input">
12775
- <input
12776
- class="pf-c-form-control pf-m-search"
12777
- type="search"
12778
- id="loading-state-demo-masthead-drilldown-menu-list-3-search-input"
12779
- name="loading-state-demo-masthead-drilldown-menu-list-3-search-input"
12780
- aria-label="Search"
12781
- />
13010
+ <div class="pf-c-search-input">
13011
+ <div class="pf-c-search-input__bar">
13012
+ <span class="pf-c-search-input__text">
13013
+ <span class="pf-c-search-input__icon">
13014
+ <i
13015
+ class="fas fa-search fa-fw"
13016
+ aria-hidden="true"
13017
+ ></i>
13018
+ </span>
13019
+ <input
13020
+ class="pf-c-search-input__text-input"
13021
+ type="text"
13022
+ placeholder="Search"
13023
+ aria-label="Search"
13024
+ />
13025
+ </span>
13026
+ </div>
13027
+ </div>
12782
13028
  </div>
12783
13029
  </div>
12784
13030
  <hr class="pf-c-divider" />
@@ -13195,7 +13441,7 @@ wrapperTag: div
13195
13441
  <button
13196
13442
  class="pf-c-app-launcher__toggle"
13197
13443
  type="button"
13198
- id="-button"
13444
+ id="empty-state-demo-masthead-icon-group--app-launcher-button"
13199
13445
  aria-expanded="false"
13200
13446
  aria-label="Application launcher"
13201
13447
  >
@@ -13206,14 +13452,24 @@ wrapperTag: div
13206
13452
  hidden
13207
13453
  >
13208
13454
  <div class="pf-c-app-launcher__menu-search">
13209
- <input
13210
- class="pf-c-form-control"
13211
- type="search"
13212
- aria-label="Type to filter"
13213
- placeholder="Filter by name..."
13214
- id="empty-state-demo-masthead-application-launcher-text-input"
13215
- name="textInput1"
13216
- />
13455
+ <div class="pf-c-search-input">
13456
+ <div class="pf-c-search-input__bar">
13457
+ <span class="pf-c-search-input__text">
13458
+ <span class="pf-c-search-input__icon">
13459
+ <i
13460
+ class="fas fa-search fa-fw"
13461
+ aria-hidden="true"
13462
+ ></i>
13463
+ </span>
13464
+ <input
13465
+ class="pf-c-search-input__text-input"
13466
+ type="text"
13467
+ placeholder="Filter by name"
13468
+ aria-label="Filter by name"
13469
+ />
13470
+ </span>
13471
+ </div>
13472
+ </div>
13217
13473
  </div>
13218
13474
  <section class="pf-c-app-launcher__group">
13219
13475
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -13695,13 +13951,24 @@ wrapperTag: div
13695
13951
  </div>
13696
13952
  <div class="pf-c-menu__search">
13697
13953
  <div class="pf-c-menu__search-input">
13698
- <input
13699
- class="pf-c-form-control pf-m-search"
13700
- type="search"
13701
- id="empty-state-demo-masthead-drilldown-menu-list-3-search-input"
13702
- name="empty-state-demo-masthead-drilldown-menu-list-3-search-input"
13703
- aria-label="Search"
13704
- />
13954
+ <div class="pf-c-search-input">
13955
+ <div class="pf-c-search-input__bar">
13956
+ <span class="pf-c-search-input__text">
13957
+ <span class="pf-c-search-input__icon">
13958
+ <i
13959
+ class="fas fa-search fa-fw"
13960
+ aria-hidden="true"
13961
+ ></i>
13962
+ </span>
13963
+ <input
13964
+ class="pf-c-search-input__text-input"
13965
+ type="text"
13966
+ placeholder="Search"
13967
+ aria-label="Search"
13968
+ />
13969
+ </span>
13970
+ </div>
13971
+ </div>
13705
13972
  </div>
13706
13973
  </div>
13707
13974
  <hr class="pf-c-divider" />
@@ -14121,7 +14388,7 @@ wrapperTag: div
14121
14388
  <button
14122
14389
  class="pf-c-app-launcher__toggle"
14123
14390
  type="button"
14124
- id="-button"
14391
+ id="static-bottom-pagination-demo-masthead-icon-group--app-launcher-button"
14125
14392
  aria-expanded="false"
14126
14393
  aria-label="Application launcher"
14127
14394
  >
@@ -14132,14 +14399,24 @@ wrapperTag: div
14132
14399
  hidden
14133
14400
  >
14134
14401
  <div class="pf-c-app-launcher__menu-search">
14135
- <input
14136
- class="pf-c-form-control"
14137
- type="search"
14138
- aria-label="Type to filter"
14139
- placeholder="Filter by name..."
14140
- id="static-bottom-pagination-demo-masthead-application-launcher-text-input"
14141
- name="textInput1"
14142
- />
14402
+ <div class="pf-c-search-input">
14403
+ <div class="pf-c-search-input__bar">
14404
+ <span class="pf-c-search-input__text">
14405
+ <span class="pf-c-search-input__icon">
14406
+ <i
14407
+ class="fas fa-search fa-fw"
14408
+ aria-hidden="true"
14409
+ ></i>
14410
+ </span>
14411
+ <input
14412
+ class="pf-c-search-input__text-input"
14413
+ type="text"
14414
+ placeholder="Filter by name"
14415
+ aria-label="Filter by name"
14416
+ />
14417
+ </span>
14418
+ </div>
14419
+ </div>
14143
14420
  </div>
14144
14421
  <section class="pf-c-app-launcher__group">
14145
14422
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -14621,13 +14898,24 @@ wrapperTag: div
14621
14898
  </div>
14622
14899
  <div class="pf-c-menu__search">
14623
14900
  <div class="pf-c-menu__search-input">
14624
- <input
14625
- class="pf-c-form-control pf-m-search"
14626
- type="search"
14627
- id="static-bottom-pagination-demo-masthead-drilldown-menu-list-3-search-input"
14628
- name="static-bottom-pagination-demo-masthead-drilldown-menu-list-3-search-input"
14629
- aria-label="Search"
14630
- />
14901
+ <div class="pf-c-search-input">
14902
+ <div class="pf-c-search-input__bar">
14903
+ <span class="pf-c-search-input__text">
14904
+ <span class="pf-c-search-input__icon">
14905
+ <i
14906
+ class="fas fa-search fa-fw"
14907
+ aria-hidden="true"
14908
+ ></i>
14909
+ </span>
14910
+ <input
14911
+ class="pf-c-search-input__text-input"
14912
+ type="text"
14913
+ placeholder="Search"
14914
+ aria-label="Search"
14915
+ />
14916
+ </span>
14917
+ </div>
14918
+ </div>
14631
14919
  </div>
14632
14920
  </div>
14633
14921
  <hr class="pf-c-divider" />
@@ -14986,64 +15274,88 @@ wrapperTag: div
14986
15274
  aria-label="search filter"
14987
15275
  role="group"
14988
15276
  >
14989
- <div class="pf-c-dropdown">
15277
+ <div class="pf-c-select" style="width: 175px">
15278
+ <span id="-select-name-label" hidden>Choose one</span>
15279
+
14990
15280
  <button
14991
- class="pf-c-dropdown__toggle"
14992
- id="--button"
14993
- aria-expanded="false"
15281
+ class="pf-c-select__toggle"
14994
15282
  type="button"
15283
+ id="-select-name-toggle"
15284
+ aria-haspopup="true"
15285
+ aria-expanded="false"
15286
+ aria-labelledby="-select-name-label -select-name-toggle"
14995
15287
  >
14996
- <span class="pf-c-dropdown__toggle-text">Name</span>
14997
- <span class="pf-c-dropdown__toggle-icon">
15288
+ <div class="pf-c-select__toggle-wrapper">
15289
+ <span class="pf-c-select__toggle-icon">
15290
+ <i class="fas fa-filter" aria-hidden="true"></i>
15291
+ </span>
15292
+ <span class="pf-c-select__toggle-text">Name</span>
15293
+ </div>
15294
+ <span class="pf-c-select__toggle-arrow">
14998
15295
  <i class="fas fa-caret-down" aria-hidden="true"></i>
14999
15296
  </span>
15000
15297
  </button>
15298
+
15001
15299
  <ul
15002
- class="pf-c-dropdown__menu"
15003
- aria-labelledby="--button"
15300
+ class="pf-c-select__menu"
15301
+ role="listbox"
15302
+ aria-labelledby="-select-name-label"
15004
15303
  hidden
15304
+ style="width: 175px"
15005
15305
  >
15006
- <li>
15007
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
15306
+ <li role="presentation">
15307
+ <button
15308
+ class="pf-c-select__menu-item"
15309
+ role="option"
15310
+ >Running</button>
15008
15311
  </li>
15009
- <li>
15312
+ <li role="presentation">
15010
15313
  <button
15011
- class="pf-c-dropdown__menu-item"
15012
- type="button"
15013
- >Action</button>
15314
+ class="pf-c-select__menu-item pf-m-selected"
15315
+ role="option"
15316
+ aria-selected="true"
15317
+ >
15318
+ Stopped
15319
+ <span class="pf-c-select__menu-item-icon">
15320
+ <i class="fas fa-check" aria-hidden="true"></i>
15321
+ </span>
15322
+ </button>
15014
15323
  </li>
15015
- <li>
15016
- <a
15017
- class="pf-c-dropdown__menu-item pf-m-disabled"
15018
- href="#"
15019
- aria-disabled="true"
15020
- tabindex="-1"
15021
- >Disabled link</a>
15324
+ <li role="presentation">
15325
+ <button
15326
+ class="pf-c-select__menu-item"
15327
+ role="option"
15328
+ >Down</button>
15022
15329
  </li>
15023
- <li>
15330
+ <li role="presentation">
15024
15331
  <button
15025
- class="pf-c-dropdown__menu-item"
15026
- type="button"
15027
- disabled
15028
- >Disabled action</button>
15332
+ class="pf-c-select__menu-item"
15333
+ role="option"
15334
+ >Degraded</button>
15029
15335
  </li>
15030
- <li class="pf-c-divider" role="separator"></li>
15031
- <li>
15032
- <a
15033
- class="pf-c-dropdown__menu-item"
15034
- href="#"
15035
- >Separated link</a>
15336
+ <li role="presentation">
15337
+ <button
15338
+ class="pf-c-select__menu-item"
15339
+ role="option"
15340
+ >Needs maintenance</button>
15036
15341
  </li>
15037
15342
  </ul>
15038
15343
  </div>
15039
- <input
15040
- class="pf-c-form-control"
15041
- type="search"
15042
- id="--search-filter-input"
15043
- name="-search-filter-input"
15044
- aria-label="input with dropdown and button"
15045
- aria-describedby="--button"
15046
- />
15344
+ <div class="pf-c-search-input">
15345
+ <div class="pf-c-search-input__bar">
15346
+ <span class="pf-c-search-input__text">
15347
+ <span class="pf-c-search-input__icon">
15348
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
15349
+ </span>
15350
+ <input
15351
+ class="pf-c-search-input__text-input"
15352
+ type="text"
15353
+ placeholder="Filter by name"
15354
+ aria-label="Filter by name"
15355
+ />
15356
+ </span>
15357
+ </div>
15358
+ </div>
15047
15359
  </div>
15048
15360
  </div>
15049
15361
 
@@ -15967,7 +16279,7 @@ wrapperTag: div
15967
16279
  <button
15968
16280
  class="pf-c-app-launcher__toggle"
15969
16281
  type="button"
15970
- id="-button"
16282
+ id="column-management-demo-masthead-icon-group--app-launcher-button"
15971
16283
  aria-expanded="false"
15972
16284
  aria-label="Application launcher"
15973
16285
  >
@@ -15978,14 +16290,24 @@ wrapperTag: div
15978
16290
  hidden
15979
16291
  >
15980
16292
  <div class="pf-c-app-launcher__menu-search">
15981
- <input
15982
- class="pf-c-form-control"
15983
- type="search"
15984
- aria-label="Type to filter"
15985
- placeholder="Filter by name..."
15986
- id="column-management-demo-masthead-application-launcher-text-input"
15987
- name="textInput1"
15988
- />
16293
+ <div class="pf-c-search-input">
16294
+ <div class="pf-c-search-input__bar">
16295
+ <span class="pf-c-search-input__text">
16296
+ <span class="pf-c-search-input__icon">
16297
+ <i
16298
+ class="fas fa-search fa-fw"
16299
+ aria-hidden="true"
16300
+ ></i>
16301
+ </span>
16302
+ <input
16303
+ class="pf-c-search-input__text-input"
16304
+ type="text"
16305
+ placeholder="Filter by name"
16306
+ aria-label="Filter by name"
16307
+ />
16308
+ </span>
16309
+ </div>
16310
+ </div>
15989
16311
  </div>
15990
16312
  <section class="pf-c-app-launcher__group">
15991
16313
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -16467,13 +16789,24 @@ wrapperTag: div
16467
16789
  </div>
16468
16790
  <div class="pf-c-menu__search">
16469
16791
  <div class="pf-c-menu__search-input">
16470
- <input
16471
- class="pf-c-form-control pf-m-search"
16472
- type="search"
16473
- id="column-management-demo-masthead-drilldown-menu-list-3-search-input"
16474
- name="column-management-demo-masthead-drilldown-menu-list-3-search-input"
16475
- aria-label="Search"
16476
- />
16792
+ <div class="pf-c-search-input">
16793
+ <div class="pf-c-search-input__bar">
16794
+ <span class="pf-c-search-input__text">
16795
+ <span class="pf-c-search-input__icon">
16796
+ <i
16797
+ class="fas fa-search fa-fw"
16798
+ aria-hidden="true"
16799
+ ></i>
16800
+ </span>
16801
+ <input
16802
+ class="pf-c-search-input__text-input"
16803
+ type="text"
16804
+ placeholder="Search"
16805
+ aria-label="Search"
16806
+ />
16807
+ </span>
16808
+ </div>
16809
+ </div>
16477
16810
  </div>
16478
16811
  </div>
16479
16812
  <hr class="pf-c-divider" />
@@ -16832,64 +17165,88 @@ wrapperTag: div
16832
17165
  aria-label="search filter"
16833
17166
  role="group"
16834
17167
  >
16835
- <div class="pf-c-dropdown">
17168
+ <div class="pf-c-select" style="width: 175px">
17169
+ <span id="-select-name-label" hidden>Choose one</span>
17170
+
16836
17171
  <button
16837
- class="pf-c-dropdown__toggle"
16838
- id="--button"
16839
- aria-expanded="false"
17172
+ class="pf-c-select__toggle"
16840
17173
  type="button"
17174
+ id="-select-name-toggle"
17175
+ aria-haspopup="true"
17176
+ aria-expanded="false"
17177
+ aria-labelledby="-select-name-label -select-name-toggle"
16841
17178
  >
16842
- <span class="pf-c-dropdown__toggle-text">Name</span>
16843
- <span class="pf-c-dropdown__toggle-icon">
17179
+ <div class="pf-c-select__toggle-wrapper">
17180
+ <span class="pf-c-select__toggle-icon">
17181
+ <i class="fas fa-filter" aria-hidden="true"></i>
17182
+ </span>
17183
+ <span class="pf-c-select__toggle-text">Name</span>
17184
+ </div>
17185
+ <span class="pf-c-select__toggle-arrow">
16844
17186
  <i class="fas fa-caret-down" aria-hidden="true"></i>
16845
17187
  </span>
16846
17188
  </button>
17189
+
16847
17190
  <ul
16848
- class="pf-c-dropdown__menu"
16849
- aria-labelledby="--button"
17191
+ class="pf-c-select__menu"
17192
+ role="listbox"
17193
+ aria-labelledby="-select-name-label"
16850
17194
  hidden
17195
+ style="width: 175px"
16851
17196
  >
16852
- <li>
16853
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
17197
+ <li role="presentation">
17198
+ <button
17199
+ class="pf-c-select__menu-item"
17200
+ role="option"
17201
+ >Running</button>
16854
17202
  </li>
16855
- <li>
17203
+ <li role="presentation">
16856
17204
  <button
16857
- class="pf-c-dropdown__menu-item"
16858
- type="button"
16859
- >Action</button>
17205
+ class="pf-c-select__menu-item pf-m-selected"
17206
+ role="option"
17207
+ aria-selected="true"
17208
+ >
17209
+ Stopped
17210
+ <span class="pf-c-select__menu-item-icon">
17211
+ <i class="fas fa-check" aria-hidden="true"></i>
17212
+ </span>
17213
+ </button>
16860
17214
  </li>
16861
- <li>
16862
- <a
16863
- class="pf-c-dropdown__menu-item pf-m-disabled"
16864
- href="#"
16865
- aria-disabled="true"
16866
- tabindex="-1"
16867
- >Disabled link</a>
17215
+ <li role="presentation">
17216
+ <button
17217
+ class="pf-c-select__menu-item"
17218
+ role="option"
17219
+ >Down</button>
16868
17220
  </li>
16869
- <li>
17221
+ <li role="presentation">
16870
17222
  <button
16871
- class="pf-c-dropdown__menu-item"
16872
- type="button"
16873
- disabled
16874
- >Disabled action</button>
17223
+ class="pf-c-select__menu-item"
17224
+ role="option"
17225
+ >Degraded</button>
16875
17226
  </li>
16876
- <li class="pf-c-divider" role="separator"></li>
16877
- <li>
16878
- <a
16879
- class="pf-c-dropdown__menu-item"
16880
- href="#"
16881
- >Separated link</a>
17227
+ <li role="presentation">
17228
+ <button
17229
+ class="pf-c-select__menu-item"
17230
+ role="option"
17231
+ >Needs maintenance</button>
16882
17232
  </li>
16883
17233
  </ul>
16884
17234
  </div>
16885
- <input
16886
- class="pf-c-form-control"
16887
- type="search"
16888
- id="--search-filter-input"
16889
- name="-search-filter-input"
16890
- aria-label="input with dropdown and button"
16891
- aria-describedby="--button"
16892
- />
17235
+ <div class="pf-c-search-input">
17236
+ <div class="pf-c-search-input__bar">
17237
+ <span class="pf-c-search-input__text">
17238
+ <span class="pf-c-search-input__icon">
17239
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
17240
+ </span>
17241
+ <input
17242
+ class="pf-c-search-input__text-input"
17243
+ type="text"
17244
+ placeholder="Filter by name"
17245
+ aria-label="Filter by name"
17246
+ />
17247
+ </span>
17248
+ </div>
17249
+ </div>
16893
17250
  </div>
16894
17251
  </div>
16895
17252
 
@@ -17893,7 +18250,7 @@ wrapperTag: div
17893
18250
  <button
17894
18251
  class="pf-c-app-launcher__toggle"
17895
18252
  type="button"
17896
- id="-button"
18253
+ id="sticky-header-demo-masthead-icon-group--app-launcher-button"
17897
18254
  aria-expanded="false"
17898
18255
  aria-label="Application launcher"
17899
18256
  >
@@ -17904,14 +18261,24 @@ wrapperTag: div
17904
18261
  hidden
17905
18262
  >
17906
18263
  <div class="pf-c-app-launcher__menu-search">
17907
- <input
17908
- class="pf-c-form-control"
17909
- type="search"
17910
- aria-label="Type to filter"
17911
- placeholder="Filter by name..."
17912
- id="sticky-header-demo-masthead-application-launcher-text-input"
17913
- name="textInput1"
17914
- />
18264
+ <div class="pf-c-search-input">
18265
+ <div class="pf-c-search-input__bar">
18266
+ <span class="pf-c-search-input__text">
18267
+ <span class="pf-c-search-input__icon">
18268
+ <i
18269
+ class="fas fa-search fa-fw"
18270
+ aria-hidden="true"
18271
+ ></i>
18272
+ </span>
18273
+ <input
18274
+ class="pf-c-search-input__text-input"
18275
+ type="text"
18276
+ placeholder="Filter by name"
18277
+ aria-label="Filter by name"
18278
+ />
18279
+ </span>
18280
+ </div>
18281
+ </div>
17915
18282
  </div>
17916
18283
  <section class="pf-c-app-launcher__group">
17917
18284
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -18393,13 +18760,24 @@ wrapperTag: div
18393
18760
  </div>
18394
18761
  <div class="pf-c-menu__search">
18395
18762
  <div class="pf-c-menu__search-input">
18396
- <input
18397
- class="pf-c-form-control pf-m-search"
18398
- type="search"
18399
- id="sticky-header-demo-masthead-drilldown-menu-list-3-search-input"
18400
- name="sticky-header-demo-masthead-drilldown-menu-list-3-search-input"
18401
- aria-label="Search"
18402
- />
18763
+ <div class="pf-c-search-input">
18764
+ <div class="pf-c-search-input__bar">
18765
+ <span class="pf-c-search-input__text">
18766
+ <span class="pf-c-search-input__icon">
18767
+ <i
18768
+ class="fas fa-search fa-fw"
18769
+ aria-hidden="true"
18770
+ ></i>
18771
+ </span>
18772
+ <input
18773
+ class="pf-c-search-input__text-input"
18774
+ type="text"
18775
+ placeholder="Search"
18776
+ aria-label="Search"
18777
+ />
18778
+ </span>
18779
+ </div>
18780
+ </div>
18403
18781
  </div>
18404
18782
  </div>
18405
18783
  <hr class="pf-c-divider" />
@@ -18758,64 +19136,88 @@ wrapperTag: div
18758
19136
  aria-label="search filter"
18759
19137
  role="group"
18760
19138
  >
18761
- <div class="pf-c-dropdown">
19139
+ <div class="pf-c-select" style="width: 175px">
19140
+ <span id="-select-name-label" hidden>Choose one</span>
19141
+
18762
19142
  <button
18763
- class="pf-c-dropdown__toggle"
18764
- id="--button"
18765
- aria-expanded="false"
19143
+ class="pf-c-select__toggle"
18766
19144
  type="button"
19145
+ id="-select-name-toggle"
19146
+ aria-haspopup="true"
19147
+ aria-expanded="false"
19148
+ aria-labelledby="-select-name-label -select-name-toggle"
18767
19149
  >
18768
- <span class="pf-c-dropdown__toggle-text">Name</span>
18769
- <span class="pf-c-dropdown__toggle-icon">
19150
+ <div class="pf-c-select__toggle-wrapper">
19151
+ <span class="pf-c-select__toggle-icon">
19152
+ <i class="fas fa-filter" aria-hidden="true"></i>
19153
+ </span>
19154
+ <span class="pf-c-select__toggle-text">Name</span>
19155
+ </div>
19156
+ <span class="pf-c-select__toggle-arrow">
18770
19157
  <i class="fas fa-caret-down" aria-hidden="true"></i>
18771
19158
  </span>
18772
19159
  </button>
19160
+
18773
19161
  <ul
18774
- class="pf-c-dropdown__menu"
18775
- aria-labelledby="--button"
19162
+ class="pf-c-select__menu"
19163
+ role="listbox"
19164
+ aria-labelledby="-select-name-label"
18776
19165
  hidden
19166
+ style="width: 175px"
18777
19167
  >
18778
- <li>
18779
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
19168
+ <li role="presentation">
19169
+ <button
19170
+ class="pf-c-select__menu-item"
19171
+ role="option"
19172
+ >Running</button>
18780
19173
  </li>
18781
- <li>
19174
+ <li role="presentation">
18782
19175
  <button
18783
- class="pf-c-dropdown__menu-item"
18784
- type="button"
18785
- >Action</button>
19176
+ class="pf-c-select__menu-item pf-m-selected"
19177
+ role="option"
19178
+ aria-selected="true"
19179
+ >
19180
+ Stopped
19181
+ <span class="pf-c-select__menu-item-icon">
19182
+ <i class="fas fa-check" aria-hidden="true"></i>
19183
+ </span>
19184
+ </button>
18786
19185
  </li>
18787
- <li>
18788
- <a
18789
- class="pf-c-dropdown__menu-item pf-m-disabled"
18790
- href="#"
18791
- aria-disabled="true"
18792
- tabindex="-1"
18793
- >Disabled link</a>
19186
+ <li role="presentation">
19187
+ <button
19188
+ class="pf-c-select__menu-item"
19189
+ role="option"
19190
+ >Down</button>
18794
19191
  </li>
18795
- <li>
19192
+ <li role="presentation">
18796
19193
  <button
18797
- class="pf-c-dropdown__menu-item"
18798
- type="button"
18799
- disabled
18800
- >Disabled action</button>
19194
+ class="pf-c-select__menu-item"
19195
+ role="option"
19196
+ >Degraded</button>
18801
19197
  </li>
18802
- <li class="pf-c-divider" role="separator"></li>
18803
- <li>
18804
- <a
18805
- class="pf-c-dropdown__menu-item"
18806
- href="#"
18807
- >Separated link</a>
19198
+ <li role="presentation">
19199
+ <button
19200
+ class="pf-c-select__menu-item"
19201
+ role="option"
19202
+ >Needs maintenance</button>
18808
19203
  </li>
18809
19204
  </ul>
18810
19205
  </div>
18811
- <input
18812
- class="pf-c-form-control"
18813
- type="search"
18814
- id="--search-filter-input"
18815
- name="-search-filter-input"
18816
- aria-label="input with dropdown and button"
18817
- aria-describedby="--button"
18818
- />
19206
+ <div class="pf-c-search-input">
19207
+ <div class="pf-c-search-input__bar">
19208
+ <span class="pf-c-search-input__text">
19209
+ <span class="pf-c-search-input__icon">
19210
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
19211
+ </span>
19212
+ <input
19213
+ class="pf-c-search-input__text-input"
19214
+ type="text"
19215
+ placeholder="Filter by name"
19216
+ aria-label="Filter by name"
19217
+ />
19218
+ </span>
19219
+ </div>
19220
+ </div>
18819
19221
  </div>
18820
19222
  </div>
18821
19223
 
@@ -19739,7 +20141,7 @@ wrapperTag: div
19739
20141
  <button
19740
20142
  class="pf-c-app-launcher__toggle"
19741
20143
  type="button"
19742
- id="-button"
20144
+ id="sticky-first-column-demo-masthead-icon-group--app-launcher-button"
19743
20145
  aria-expanded="false"
19744
20146
  aria-label="Application launcher"
19745
20147
  >
@@ -19750,14 +20152,24 @@ wrapperTag: div
19750
20152
  hidden
19751
20153
  >
19752
20154
  <div class="pf-c-app-launcher__menu-search">
19753
- <input
19754
- class="pf-c-form-control"
19755
- type="search"
19756
- aria-label="Type to filter"
19757
- placeholder="Filter by name..."
19758
- id="sticky-first-column-demo-masthead-application-launcher-text-input"
19759
- name="textInput1"
19760
- />
20155
+ <div class="pf-c-search-input">
20156
+ <div class="pf-c-search-input__bar">
20157
+ <span class="pf-c-search-input__text">
20158
+ <span class="pf-c-search-input__icon">
20159
+ <i
20160
+ class="fas fa-search fa-fw"
20161
+ aria-hidden="true"
20162
+ ></i>
20163
+ </span>
20164
+ <input
20165
+ class="pf-c-search-input__text-input"
20166
+ type="text"
20167
+ placeholder="Filter by name"
20168
+ aria-label="Filter by name"
20169
+ />
20170
+ </span>
20171
+ </div>
20172
+ </div>
19761
20173
  </div>
19762
20174
  <section class="pf-c-app-launcher__group">
19763
20175
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -20239,13 +20651,24 @@ wrapperTag: div
20239
20651
  </div>
20240
20652
  <div class="pf-c-menu__search">
20241
20653
  <div class="pf-c-menu__search-input">
20242
- <input
20243
- class="pf-c-form-control pf-m-search"
20244
- type="search"
20245
- id="sticky-first-column-demo-masthead-drilldown-menu-list-3-search-input"
20246
- name="sticky-first-column-demo-masthead-drilldown-menu-list-3-search-input"
20247
- aria-label="Search"
20248
- />
20654
+ <div class="pf-c-search-input">
20655
+ <div class="pf-c-search-input__bar">
20656
+ <span class="pf-c-search-input__text">
20657
+ <span class="pf-c-search-input__icon">
20658
+ <i
20659
+ class="fas fa-search fa-fw"
20660
+ aria-hidden="true"
20661
+ ></i>
20662
+ </span>
20663
+ <input
20664
+ class="pf-c-search-input__text-input"
20665
+ type="text"
20666
+ placeholder="Search"
20667
+ aria-label="Search"
20668
+ />
20669
+ </span>
20670
+ </div>
20671
+ </div>
20249
20672
  </div>
20250
20673
  </div>
20251
20674
  <hr class="pf-c-divider" />
@@ -20607,64 +21030,88 @@ wrapperTag: div
20607
21030
  aria-label="search filter"
20608
21031
  role="group"
20609
21032
  >
20610
- <div class="pf-c-dropdown">
21033
+ <div class="pf-c-select" style="width: 175px">
21034
+ <span id="-select-name-label" hidden>Choose one</span>
21035
+
20611
21036
  <button
20612
- class="pf-c-dropdown__toggle"
20613
- id="--button"
20614
- aria-expanded="false"
21037
+ class="pf-c-select__toggle"
20615
21038
  type="button"
21039
+ id="-select-name-toggle"
21040
+ aria-haspopup="true"
21041
+ aria-expanded="false"
21042
+ aria-labelledby="-select-name-label -select-name-toggle"
20616
21043
  >
20617
- <span class="pf-c-dropdown__toggle-text">Name</span>
20618
- <span class="pf-c-dropdown__toggle-icon">
21044
+ <div class="pf-c-select__toggle-wrapper">
21045
+ <span class="pf-c-select__toggle-icon">
21046
+ <i class="fas fa-filter" aria-hidden="true"></i>
21047
+ </span>
21048
+ <span class="pf-c-select__toggle-text">Name</span>
21049
+ </div>
21050
+ <span class="pf-c-select__toggle-arrow">
20619
21051
  <i class="fas fa-caret-down" aria-hidden="true"></i>
20620
21052
  </span>
20621
21053
  </button>
21054
+
20622
21055
  <ul
20623
- class="pf-c-dropdown__menu"
20624
- aria-labelledby="--button"
21056
+ class="pf-c-select__menu"
21057
+ role="listbox"
21058
+ aria-labelledby="-select-name-label"
20625
21059
  hidden
21060
+ style="width: 175px"
20626
21061
  >
20627
- <li>
20628
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
21062
+ <li role="presentation">
21063
+ <button
21064
+ class="pf-c-select__menu-item"
21065
+ role="option"
21066
+ >Running</button>
20629
21067
  </li>
20630
- <li>
21068
+ <li role="presentation">
20631
21069
  <button
20632
- class="pf-c-dropdown__menu-item"
20633
- type="button"
20634
- >Action</button>
21070
+ class="pf-c-select__menu-item pf-m-selected"
21071
+ role="option"
21072
+ aria-selected="true"
21073
+ >
21074
+ Stopped
21075
+ <span class="pf-c-select__menu-item-icon">
21076
+ <i class="fas fa-check" aria-hidden="true"></i>
21077
+ </span>
21078
+ </button>
20635
21079
  </li>
20636
- <li>
20637
- <a
20638
- class="pf-c-dropdown__menu-item pf-m-disabled"
20639
- href="#"
20640
- aria-disabled="true"
20641
- tabindex="-1"
20642
- >Disabled link</a>
21080
+ <li role="presentation">
21081
+ <button
21082
+ class="pf-c-select__menu-item"
21083
+ role="option"
21084
+ >Down</button>
20643
21085
  </li>
20644
- <li>
21086
+ <li role="presentation">
20645
21087
  <button
20646
- class="pf-c-dropdown__menu-item"
20647
- type="button"
20648
- disabled
20649
- >Disabled action</button>
21088
+ class="pf-c-select__menu-item"
21089
+ role="option"
21090
+ >Degraded</button>
20650
21091
  </li>
20651
- <li class="pf-c-divider" role="separator"></li>
20652
- <li>
20653
- <a
20654
- class="pf-c-dropdown__menu-item"
20655
- href="#"
20656
- >Separated link</a>
21092
+ <li role="presentation">
21093
+ <button
21094
+ class="pf-c-select__menu-item"
21095
+ role="option"
21096
+ >Needs maintenance</button>
20657
21097
  </li>
20658
21098
  </ul>
20659
21099
  </div>
20660
- <input
20661
- class="pf-c-form-control"
20662
- type="search"
20663
- id="--search-filter-input"
20664
- name="-search-filter-input"
20665
- aria-label="input with dropdown and button"
20666
- aria-describedby="--button"
20667
- />
21100
+ <div class="pf-c-search-input">
21101
+ <div class="pf-c-search-input__bar">
21102
+ <span class="pf-c-search-input__text">
21103
+ <span class="pf-c-search-input__icon">
21104
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
21105
+ </span>
21106
+ <input
21107
+ class="pf-c-search-input__text-input"
21108
+ type="text"
21109
+ placeholder="Filter by name"
21110
+ aria-label="Filter by name"
21111
+ />
21112
+ </span>
21113
+ </div>
21114
+ </div>
20668
21115
  </div>
20669
21116
  </div>
20670
21117
  </div>
@@ -21511,7 +21958,7 @@ wrapperTag: div
21511
21958
  <button
21512
21959
  class="pf-c-app-launcher__toggle"
21513
21960
  type="button"
21514
- id="-button"
21961
+ id="sticky-multiple-columns-demo-masthead-icon-group--app-launcher-button"
21515
21962
  aria-expanded="false"
21516
21963
  aria-label="Application launcher"
21517
21964
  >
@@ -21522,14 +21969,24 @@ wrapperTag: div
21522
21969
  hidden
21523
21970
  >
21524
21971
  <div class="pf-c-app-launcher__menu-search">
21525
- <input
21526
- class="pf-c-form-control"
21527
- type="search"
21528
- aria-label="Type to filter"
21529
- placeholder="Filter by name..."
21530
- id="sticky-multiple-columns-demo-masthead-application-launcher-text-input"
21531
- name="textInput1"
21532
- />
21972
+ <div class="pf-c-search-input">
21973
+ <div class="pf-c-search-input__bar">
21974
+ <span class="pf-c-search-input__text">
21975
+ <span class="pf-c-search-input__icon">
21976
+ <i
21977
+ class="fas fa-search fa-fw"
21978
+ aria-hidden="true"
21979
+ ></i>
21980
+ </span>
21981
+ <input
21982
+ class="pf-c-search-input__text-input"
21983
+ type="text"
21984
+ placeholder="Filter by name"
21985
+ aria-label="Filter by name"
21986
+ />
21987
+ </span>
21988
+ </div>
21989
+ </div>
21533
21990
  </div>
21534
21991
  <section class="pf-c-app-launcher__group">
21535
21992
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -22011,13 +22468,24 @@ wrapperTag: div
22011
22468
  </div>
22012
22469
  <div class="pf-c-menu__search">
22013
22470
  <div class="pf-c-menu__search-input">
22014
- <input
22015
- class="pf-c-form-control pf-m-search"
22016
- type="search"
22017
- id="sticky-multiple-columns-demo-masthead-drilldown-menu-list-3-search-input"
22018
- name="sticky-multiple-columns-demo-masthead-drilldown-menu-list-3-search-input"
22019
- aria-label="Search"
22020
- />
22471
+ <div class="pf-c-search-input">
22472
+ <div class="pf-c-search-input__bar">
22473
+ <span class="pf-c-search-input__text">
22474
+ <span class="pf-c-search-input__icon">
22475
+ <i
22476
+ class="fas fa-search fa-fw"
22477
+ aria-hidden="true"
22478
+ ></i>
22479
+ </span>
22480
+ <input
22481
+ class="pf-c-search-input__text-input"
22482
+ type="text"
22483
+ placeholder="Search"
22484
+ aria-label="Search"
22485
+ />
22486
+ </span>
22487
+ </div>
22488
+ </div>
22021
22489
  </div>
22022
22490
  </div>
22023
22491
  <hr class="pf-c-divider" />
@@ -22379,64 +22847,88 @@ wrapperTag: div
22379
22847
  aria-label="search filter"
22380
22848
  role="group"
22381
22849
  >
22382
- <div class="pf-c-dropdown">
22850
+ <div class="pf-c-select" style="width: 175px">
22851
+ <span id="-select-name-label" hidden>Choose one</span>
22852
+
22383
22853
  <button
22384
- class="pf-c-dropdown__toggle"
22385
- id="--button"
22386
- aria-expanded="false"
22854
+ class="pf-c-select__toggle"
22387
22855
  type="button"
22856
+ id="-select-name-toggle"
22857
+ aria-haspopup="true"
22858
+ aria-expanded="false"
22859
+ aria-labelledby="-select-name-label -select-name-toggle"
22388
22860
  >
22389
- <span class="pf-c-dropdown__toggle-text">Name</span>
22390
- <span class="pf-c-dropdown__toggle-icon">
22861
+ <div class="pf-c-select__toggle-wrapper">
22862
+ <span class="pf-c-select__toggle-icon">
22863
+ <i class="fas fa-filter" aria-hidden="true"></i>
22864
+ </span>
22865
+ <span class="pf-c-select__toggle-text">Name</span>
22866
+ </div>
22867
+ <span class="pf-c-select__toggle-arrow">
22391
22868
  <i class="fas fa-caret-down" aria-hidden="true"></i>
22392
22869
  </span>
22393
22870
  </button>
22871
+
22394
22872
  <ul
22395
- class="pf-c-dropdown__menu"
22396
- aria-labelledby="--button"
22873
+ class="pf-c-select__menu"
22874
+ role="listbox"
22875
+ aria-labelledby="-select-name-label"
22397
22876
  hidden
22877
+ style="width: 175px"
22398
22878
  >
22399
- <li>
22400
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
22879
+ <li role="presentation">
22880
+ <button
22881
+ class="pf-c-select__menu-item"
22882
+ role="option"
22883
+ >Running</button>
22401
22884
  </li>
22402
- <li>
22885
+ <li role="presentation">
22403
22886
  <button
22404
- class="pf-c-dropdown__menu-item"
22405
- type="button"
22406
- >Action</button>
22887
+ class="pf-c-select__menu-item pf-m-selected"
22888
+ role="option"
22889
+ aria-selected="true"
22890
+ >
22891
+ Stopped
22892
+ <span class="pf-c-select__menu-item-icon">
22893
+ <i class="fas fa-check" aria-hidden="true"></i>
22894
+ </span>
22895
+ </button>
22407
22896
  </li>
22408
- <li>
22409
- <a
22410
- class="pf-c-dropdown__menu-item pf-m-disabled"
22411
- href="#"
22412
- aria-disabled="true"
22413
- tabindex="-1"
22414
- >Disabled link</a>
22897
+ <li role="presentation">
22898
+ <button
22899
+ class="pf-c-select__menu-item"
22900
+ role="option"
22901
+ >Down</button>
22415
22902
  </li>
22416
- <li>
22903
+ <li role="presentation">
22417
22904
  <button
22418
- class="pf-c-dropdown__menu-item"
22419
- type="button"
22420
- disabled
22421
- >Disabled action</button>
22905
+ class="pf-c-select__menu-item"
22906
+ role="option"
22907
+ >Degraded</button>
22422
22908
  </li>
22423
- <li class="pf-c-divider" role="separator"></li>
22424
- <li>
22425
- <a
22426
- class="pf-c-dropdown__menu-item"
22427
- href="#"
22428
- >Separated link</a>
22909
+ <li role="presentation">
22910
+ <button
22911
+ class="pf-c-select__menu-item"
22912
+ role="option"
22913
+ >Needs maintenance</button>
22429
22914
  </li>
22430
22915
  </ul>
22431
22916
  </div>
22432
- <input
22433
- class="pf-c-form-control"
22434
- type="search"
22435
- id="--search-filter-input"
22436
- name="-search-filter-input"
22437
- aria-label="input with dropdown and button"
22438
- aria-describedby="--button"
22439
- />
22917
+ <div class="pf-c-search-input">
22918
+ <div class="pf-c-search-input__bar">
22919
+ <span class="pf-c-search-input__text">
22920
+ <span class="pf-c-search-input__icon">
22921
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
22922
+ </span>
22923
+ <input
22924
+ class="pf-c-search-input__text-input"
22925
+ type="text"
22926
+ placeholder="Filter by name"
22927
+ aria-label="Filter by name"
22928
+ />
22929
+ </span>
22930
+ </div>
22931
+ </div>
22440
22932
  </div>
22441
22933
  </div>
22442
22934
  </div>
@@ -23305,7 +23797,7 @@ wrapperTag: div
23305
23797
  <button
23306
23798
  class="pf-c-app-launcher__toggle"
23307
23799
  type="button"
23308
- id="-button"
23800
+ id="sticky-header-and-multiple columns-demo-masthead-icon-group--app-launcher-button"
23309
23801
  aria-expanded="false"
23310
23802
  aria-label="Application launcher"
23311
23803
  >
@@ -23316,14 +23808,24 @@ wrapperTag: div
23316
23808
  hidden
23317
23809
  >
23318
23810
  <div class="pf-c-app-launcher__menu-search">
23319
- <input
23320
- class="pf-c-form-control"
23321
- type="search"
23322
- aria-label="Type to filter"
23323
- placeholder="Filter by name..."
23324
- id="sticky-header-and-multiple columns-demo-masthead-application-launcher-text-input"
23325
- name="textInput1"
23326
- />
23811
+ <div class="pf-c-search-input">
23812
+ <div class="pf-c-search-input__bar">
23813
+ <span class="pf-c-search-input__text">
23814
+ <span class="pf-c-search-input__icon">
23815
+ <i
23816
+ class="fas fa-search fa-fw"
23817
+ aria-hidden="true"
23818
+ ></i>
23819
+ </span>
23820
+ <input
23821
+ class="pf-c-search-input__text-input"
23822
+ type="text"
23823
+ placeholder="Filter by name"
23824
+ aria-label="Filter by name"
23825
+ />
23826
+ </span>
23827
+ </div>
23828
+ </div>
23327
23829
  </div>
23328
23830
  <section class="pf-c-app-launcher__group">
23329
23831
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -23805,13 +24307,24 @@ wrapperTag: div
23805
24307
  </div>
23806
24308
  <div class="pf-c-menu__search">
23807
24309
  <div class="pf-c-menu__search-input">
23808
- <input
23809
- class="pf-c-form-control pf-m-search"
23810
- type="search"
23811
- id="sticky-header-and-multiple columns-demo-masthead-drilldown-menu-list-3-search-input"
23812
- name="sticky-header-and-multiple columns-demo-masthead-drilldown-menu-list-3-search-input"
23813
- aria-label="Search"
23814
- />
24310
+ <div class="pf-c-search-input">
24311
+ <div class="pf-c-search-input__bar">
24312
+ <span class="pf-c-search-input__text">
24313
+ <span class="pf-c-search-input__icon">
24314
+ <i
24315
+ class="fas fa-search fa-fw"
24316
+ aria-hidden="true"
24317
+ ></i>
24318
+ </span>
24319
+ <input
24320
+ class="pf-c-search-input__text-input"
24321
+ type="text"
24322
+ placeholder="Search"
24323
+ aria-label="Search"
24324
+ />
24325
+ </span>
24326
+ </div>
24327
+ </div>
23815
24328
  </div>
23816
24329
  </div>
23817
24330
  <hr class="pf-c-divider" />
@@ -24172,64 +24685,88 @@ wrapperTag: div
24172
24685
  aria-label="search filter"
24173
24686
  role="group"
24174
24687
  >
24175
- <div class="pf-c-dropdown">
24688
+ <div class="pf-c-select" style="width: 175px">
24689
+ <span id="-select-name-label" hidden>Choose one</span>
24690
+
24176
24691
  <button
24177
- class="pf-c-dropdown__toggle"
24178
- id="--button"
24179
- aria-expanded="false"
24692
+ class="pf-c-select__toggle"
24180
24693
  type="button"
24694
+ id="-select-name-toggle"
24695
+ aria-haspopup="true"
24696
+ aria-expanded="false"
24697
+ aria-labelledby="-select-name-label -select-name-toggle"
24181
24698
  >
24182
- <span class="pf-c-dropdown__toggle-text">Name</span>
24183
- <span class="pf-c-dropdown__toggle-icon">
24699
+ <div class="pf-c-select__toggle-wrapper">
24700
+ <span class="pf-c-select__toggle-icon">
24701
+ <i class="fas fa-filter" aria-hidden="true"></i>
24702
+ </span>
24703
+ <span class="pf-c-select__toggle-text">Name</span>
24704
+ </div>
24705
+ <span class="pf-c-select__toggle-arrow">
24184
24706
  <i class="fas fa-caret-down" aria-hidden="true"></i>
24185
24707
  </span>
24186
24708
  </button>
24709
+
24187
24710
  <ul
24188
- class="pf-c-dropdown__menu"
24189
- aria-labelledby="--button"
24711
+ class="pf-c-select__menu"
24712
+ role="listbox"
24713
+ aria-labelledby="-select-name-label"
24190
24714
  hidden
24715
+ style="width: 175px"
24191
24716
  >
24192
- <li>
24193
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
24717
+ <li role="presentation">
24718
+ <button
24719
+ class="pf-c-select__menu-item"
24720
+ role="option"
24721
+ >Running</button>
24194
24722
  </li>
24195
- <li>
24723
+ <li role="presentation">
24196
24724
  <button
24197
- class="pf-c-dropdown__menu-item"
24198
- type="button"
24199
- >Action</button>
24725
+ class="pf-c-select__menu-item pf-m-selected"
24726
+ role="option"
24727
+ aria-selected="true"
24728
+ >
24729
+ Stopped
24730
+ <span class="pf-c-select__menu-item-icon">
24731
+ <i class="fas fa-check" aria-hidden="true"></i>
24732
+ </span>
24733
+ </button>
24200
24734
  </li>
24201
- <li>
24202
- <a
24203
- class="pf-c-dropdown__menu-item pf-m-disabled"
24204
- href="#"
24205
- aria-disabled="true"
24206
- tabindex="-1"
24207
- >Disabled link</a>
24735
+ <li role="presentation">
24736
+ <button
24737
+ class="pf-c-select__menu-item"
24738
+ role="option"
24739
+ >Down</button>
24208
24740
  </li>
24209
- <li>
24741
+ <li role="presentation">
24210
24742
  <button
24211
- class="pf-c-dropdown__menu-item"
24212
- type="button"
24213
- disabled
24214
- >Disabled action</button>
24743
+ class="pf-c-select__menu-item"
24744
+ role="option"
24745
+ >Degraded</button>
24215
24746
  </li>
24216
- <li class="pf-c-divider" role="separator"></li>
24217
- <li>
24218
- <a
24219
- class="pf-c-dropdown__menu-item"
24220
- href="#"
24221
- >Separated link</a>
24747
+ <li role="presentation">
24748
+ <button
24749
+ class="pf-c-select__menu-item"
24750
+ role="option"
24751
+ >Needs maintenance</button>
24222
24752
  </li>
24223
24753
  </ul>
24224
24754
  </div>
24225
- <input
24226
- class="pf-c-form-control"
24227
- type="search"
24228
- id="--search-filter-input"
24229
- name="-search-filter-input"
24230
- aria-label="input with dropdown and button"
24231
- aria-describedby="--button"
24232
- />
24755
+ <div class="pf-c-search-input">
24756
+ <div class="pf-c-search-input__bar">
24757
+ <span class="pf-c-search-input__text">
24758
+ <span class="pf-c-search-input__icon">
24759
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
24760
+ </span>
24761
+ <input
24762
+ class="pf-c-search-input__text-input"
24763
+ type="text"
24764
+ placeholder="Filter by name"
24765
+ aria-label="Filter by name"
24766
+ />
24767
+ </span>
24768
+ </div>
24769
+ </div>
24233
24770
  </div>
24234
24771
  </div>
24235
24772
  </div>