@patternfly/patternfly 4.179.1 → 4.180.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 (36) hide show
  1. package/components/Dropdown/dropdown.css +4 -2
  2. package/components/Dropdown/dropdown.scss +4 -2
  3. package/components/FormControl/form-control.scss +3 -0
  4. package/components/MenuToggle/menu-toggle.css +4 -1
  5. package/components/MenuToggle/menu-toggle.scss +4 -3
  6. package/components/SearchInput/search-input.css +1 -0
  7. package/components/SearchInput/search-input.scss +1 -0
  8. package/components/Select/select.css +3 -2
  9. package/components/Select/select.scss +4 -2
  10. package/docs/components/AppLauncher/examples/application-launcher.md +15 -8
  11. package/docs/components/ContextSelector/examples/context-selector.md +84 -102
  12. package/docs/components/DualListSelector/examples/DualListSelector.md +240 -112
  13. package/docs/components/FormControl/examples/FormControl.md +0 -11
  14. package/docs/components/InputGroup/examples/InputGroup.md +6 -22
  15. package/docs/components/LabelGroup/examples/LabelGroup.md +135 -2
  16. package/docs/components/LogViewer/examples/LogViewer.md +567 -198
  17. package/docs/components/Menu/examples/Menu.md +1908 -983
  18. package/docs/components/MenuToggle/examples/MenuToggle.md +77 -44
  19. package/docs/components/Nav/examples/Navigation.md +563 -231
  20. package/docs/components/Select/examples/Select.md +30 -14
  21. package/docs/components/Spinner/examples/Spinner.md +50 -55
  22. package/docs/components/Toolbar/examples/Toolbar.md +300 -180
  23. package/docs/components/TreeView/examples/TreeView.md +15 -7
  24. package/docs/demos/ContextSelector/examples/ContextSelector.md +515 -218
  25. package/docs/demos/DataList/examples/DataList.md +159 -114
  26. package/docs/demos/Masthead/examples/Masthead.md +482 -237
  27. package/docs/demos/Page/examples/Page.md +945 -350
  28. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +3 -3
  29. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +207 -126
  30. package/docs/demos/Table/examples/Table.md +2459 -1090
  31. package/docs/demos/Toolbar/examples/Toolbar.md +55 -55
  32. package/package.json +1 -1
  33. package/patternfly-no-reset.css +12 -5
  34. package/patternfly.css +12 -5
  35. package/patternfly.min.css +1 -1
  36. package/patternfly.min.css.map +1 -1
package/docs/demos/Masthead/examples/Masthead.md CHANGED
@@ -316,23 +316,20 @@ wrapperTag: div
316
316
  </button>
317
317
  <div class="pf-c-context-selector__menu" hidden>
318
318
  <div class="pf-c-context-selector__menu-search">
319
- <div class="pf-c-input-group">
320
- <input
321
- class="pf-c-form-control"
322
- type="search"
323
- placeholder="Search"
324
- id="masthead-context-selecton-drilldown-example-masthead-context-selectortextInput1"
325
- name="masthead-context-selecton-drilldown-example-masthead-context-selectortextInput1"
326
- aria-labelledby="masthead-context-selecton-drilldown-example-masthead-context-selector-search-button"
327
- />
328
- <button
329
- class="pf-c-button pf-m-control"
330
- type="button"
331
- id="masthead-context-selecton-drilldown-example-masthead-context-selector-search-button"
332
- aria-label="Search menu items"
333
- >
334
- <i class="fas fa-search" aria-hidden="true"></i>
335
- </button>
319
+ <div class="pf-c-search-input">
320
+ <div class="pf-c-search-input__bar">
321
+ <span class="pf-c-search-input__text">
322
+ <span class="pf-c-search-input__icon">
323
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
324
+ </span>
325
+ <input
326
+ class="pf-c-search-input__text-input"
327
+ type="text"
328
+ placeholder="Search"
329
+ aria-label="Search"
330
+ />
331
+ </span>
332
+ </div>
336
333
  </div>
337
334
  </div>
338
335
  <ul class="pf-c-context-selector__menu-list">
@@ -737,64 +734,91 @@ wrapperTag: div
737
734
  aria-label="search filter"
738
735
  role="group"
739
736
  >
740
- <div class="pf-c-dropdown">
737
+ <div class="pf-c-select" style="width: 175px">
738
+ <span
739
+ id="masthead-toolbar-filters-example-masthead-toolbar-select-name-label"
740
+ hidden
741
+ >Choose one</span>
742
+
741
743
  <button
742
- class="pf-c-dropdown__toggle"
743
- id="masthead-toolbar-filters-example-masthead-toolbar-masthead-toolbar-filters-example-masthead-content-button"
744
- aria-expanded="false"
744
+ class="pf-c-select__toggle"
745
745
  type="button"
746
+ id="masthead-toolbar-filters-example-masthead-toolbar-select-name-toggle"
747
+ aria-haspopup="true"
748
+ aria-expanded="false"
749
+ aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-select-name-label masthead-toolbar-filters-example-masthead-toolbar-select-name-toggle"
746
750
  >
747
- <span class="pf-c-dropdown__toggle-text">Name</span>
748
- <span class="pf-c-dropdown__toggle-icon">
751
+ <div class="pf-c-select__toggle-wrapper">
752
+ <span class="pf-c-select__toggle-icon">
753
+ <i class="fas fa-filter" aria-hidden="true"></i>
754
+ </span>
755
+ <span class="pf-c-select__toggle-text">Name</span>
756
+ </div>
757
+ <span class="pf-c-select__toggle-arrow">
749
758
  <i class="fas fa-caret-down" aria-hidden="true"></i>
750
759
  </span>
751
760
  </button>
761
+
752
762
  <ul
753
- class="pf-c-dropdown__menu"
754
- aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-masthead-toolbar-filters-example-masthead-content-button"
763
+ class="pf-c-select__menu"
764
+ role="listbox"
765
+ aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-select-name-label"
755
766
  hidden
767
+ style="width: 175px"
756
768
  >
757
- <li>
758
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
769
+ <li role="presentation">
770
+ <button
771
+ class="pf-c-select__menu-item"
772
+ role="option"
773
+ >Running</button>
759
774
  </li>
760
- <li>
775
+ <li role="presentation">
761
776
  <button
762
- class="pf-c-dropdown__menu-item"
763
- type="button"
764
- >Action</button>
777
+ class="pf-c-select__menu-item pf-m-selected"
778
+ role="option"
779
+ aria-selected="true"
780
+ >
781
+ Stopped
782
+ <span class="pf-c-select__menu-item-icon">
783
+ <i class="fas fa-check" aria-hidden="true"></i>
784
+ </span>
785
+ </button>
765
786
  </li>
766
- <li>
767
- <a
768
- class="pf-c-dropdown__menu-item pf-m-disabled"
769
- href="#"
770
- aria-disabled="true"
771
- tabindex="-1"
772
- >Disabled link</a>
787
+ <li role="presentation">
788
+ <button
789
+ class="pf-c-select__menu-item"
790
+ role="option"
791
+ >Down</button>
773
792
  </li>
774
- <li>
793
+ <li role="presentation">
775
794
  <button
776
- class="pf-c-dropdown__menu-item"
777
- type="button"
778
- disabled
779
- >Disabled action</button>
795
+ class="pf-c-select__menu-item"
796
+ role="option"
797
+ >Degraded</button>
780
798
  </li>
781
- <li class="pf-c-divider" role="separator"></li>
782
- <li>
783
- <a
784
- class="pf-c-dropdown__menu-item"
785
- href="#"
786
- >Separated link</a>
799
+ <li role="presentation">
800
+ <button
801
+ class="pf-c-select__menu-item"
802
+ role="option"
803
+ >Needs maintenance</button>
787
804
  </li>
788
805
  </ul>
789
806
  </div>
790
- <input
791
- class="pf-c-form-control"
792
- type="search"
793
- id="masthead-toolbar-filters-example-masthead-toolbar-masthead-toolbar-filters-example-masthead-content-search-filter-input"
794
- name="masthead-toolbar-filters-example-masthead-toolbar-search-filter-input"
795
- aria-label="input with dropdown and button"
796
- aria-describedby="masthead-toolbar-filters-example-masthead-toolbar-masthead-toolbar-filters-example-masthead-content-button"
797
- />
807
+ <div class="pf-c-search-input">
808
+ <div class="pf-c-search-input__bar">
809
+ <span class="pf-c-search-input__text">
810
+ <span class="pf-c-search-input__icon">
811
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
812
+ </span>
813
+ <input
814
+ class="pf-c-search-input__text-input"
815
+ type="text"
816
+ placeholder="Filter by name"
817
+ aria-label="Filter by name"
818
+ />
819
+ </span>
820
+ </div>
821
+ </div>
798
822
  </div>
799
823
  </div>
800
824
  </div>
@@ -1063,64 +1087,91 @@ wrapperTag: div
1063
1087
  aria-label="search filter"
1064
1088
  role="group"
1065
1089
  >
1066
- <div class="pf-c-dropdown">
1090
+ <div class="pf-c-select" style="width: 175px">
1091
+ <span
1092
+ id="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label"
1093
+ hidden
1094
+ >Choose one</span>
1095
+
1067
1096
  <button
1068
- class="pf-c-dropdown__toggle"
1069
- id="masthead-toggle-group-filters-example-masthead-toolbar-masthead-toggle-group-filters-example-masthead-content-button"
1070
- aria-expanded="false"
1097
+ class="pf-c-select__toggle"
1071
1098
  type="button"
1099
+ id="masthead-toggle-group-filters-example-masthead-toolbar-select-name-toggle"
1100
+ aria-haspopup="true"
1101
+ aria-expanded="false"
1102
+ aria-labelledby="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label masthead-toggle-group-filters-example-masthead-toolbar-select-name-toggle"
1072
1103
  >
1073
- <span class="pf-c-dropdown__toggle-text">Name</span>
1074
- <span class="pf-c-dropdown__toggle-icon">
1104
+ <div class="pf-c-select__toggle-wrapper">
1105
+ <span class="pf-c-select__toggle-icon">
1106
+ <i class="fas fa-filter" aria-hidden="true"></i>
1107
+ </span>
1108
+ <span class="pf-c-select__toggle-text">Name</span>
1109
+ </div>
1110
+ <span class="pf-c-select__toggle-arrow">
1075
1111
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1076
1112
  </span>
1077
1113
  </button>
1114
+
1078
1115
  <ul
1079
- class="pf-c-dropdown__menu"
1080
- aria-labelledby="masthead-toggle-group-filters-example-masthead-toolbar-masthead-toggle-group-filters-example-masthead-content-button"
1116
+ class="pf-c-select__menu"
1117
+ role="listbox"
1118
+ aria-labelledby="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label"
1081
1119
  hidden
1120
+ style="width: 175px"
1082
1121
  >
1083
- <li>
1084
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1122
+ <li role="presentation">
1123
+ <button
1124
+ class="pf-c-select__menu-item"
1125
+ role="option"
1126
+ >Running</button>
1085
1127
  </li>
1086
- <li>
1128
+ <li role="presentation">
1087
1129
  <button
1088
- class="pf-c-dropdown__menu-item"
1089
- type="button"
1090
- >Action</button>
1130
+ class="pf-c-select__menu-item pf-m-selected"
1131
+ role="option"
1132
+ aria-selected="true"
1133
+ >
1134
+ Stopped
1135
+ <span class="pf-c-select__menu-item-icon">
1136
+ <i class="fas fa-check" aria-hidden="true"></i>
1137
+ </span>
1138
+ </button>
1091
1139
  </li>
1092
- <li>
1093
- <a
1094
- class="pf-c-dropdown__menu-item pf-m-disabled"
1095
- href="#"
1096
- aria-disabled="true"
1097
- tabindex="-1"
1098
- >Disabled link</a>
1140
+ <li role="presentation">
1141
+ <button
1142
+ class="pf-c-select__menu-item"
1143
+ role="option"
1144
+ >Down</button>
1099
1145
  </li>
1100
- <li>
1146
+ <li role="presentation">
1101
1147
  <button
1102
- class="pf-c-dropdown__menu-item"
1103
- type="button"
1104
- disabled
1105
- >Disabled action</button>
1148
+ class="pf-c-select__menu-item"
1149
+ role="option"
1150
+ >Degraded</button>
1106
1151
  </li>
1107
- <li class="pf-c-divider" role="separator"></li>
1108
- <li>
1109
- <a
1110
- class="pf-c-dropdown__menu-item"
1111
- href="#"
1112
- >Separated link</a>
1152
+ <li role="presentation">
1153
+ <button
1154
+ class="pf-c-select__menu-item"
1155
+ role="option"
1156
+ >Needs maintenance</button>
1113
1157
  </li>
1114
1158
  </ul>
1115
1159
  </div>
1116
- <input
1117
- class="pf-c-form-control"
1118
- type="search"
1119
- id="masthead-toggle-group-filters-example-masthead-toolbar-masthead-toggle-group-filters-example-masthead-content-search-filter-input"
1120
- name="masthead-toggle-group-filters-example-masthead-toolbar-search-filter-input"
1121
- aria-label="input with dropdown and button"
1122
- aria-describedby="masthead-toggle-group-filters-example-masthead-toolbar-masthead-toggle-group-filters-example-masthead-content-button"
1123
- />
1160
+ <div class="pf-c-search-input">
1161
+ <div class="pf-c-search-input__bar">
1162
+ <span class="pf-c-search-input__text">
1163
+ <span class="pf-c-search-input__icon">
1164
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1165
+ </span>
1166
+ <input
1167
+ class="pf-c-search-input__text-input"
1168
+ type="text"
1169
+ placeholder="Filter by name"
1170
+ aria-label="Filter by name"
1171
+ />
1172
+ </span>
1173
+ </div>
1174
+ </div>
1124
1175
  </div>
1125
1176
  </div>
1126
1177
  </div>
@@ -1406,14 +1457,24 @@ wrapperTag: div
1406
1457
  hidden
1407
1458
  >
1408
1459
  <div class="pf-c-app-launcher__menu-search">
1409
- <input
1410
- class="pf-c-form-control"
1411
- type="search"
1412
- aria-label="Type to filter"
1413
- placeholder="Filter by name..."
1414
- id="masthead-advanced-with-menu-example-masthead-application-launcher-text-input"
1415
- name="textInput1"
1416
- />
1460
+ <div class="pf-c-search-input">
1461
+ <div class="pf-c-search-input__bar">
1462
+ <span class="pf-c-search-input__text">
1463
+ <span class="pf-c-search-input__icon">
1464
+ <i
1465
+ class="fas fa-search fa-fw"
1466
+ aria-hidden="true"
1467
+ ></i>
1468
+ </span>
1469
+ <input
1470
+ class="pf-c-search-input__text-input"
1471
+ type="text"
1472
+ placeholder="Filter by name"
1473
+ aria-label="Filter by name"
1474
+ />
1475
+ </span>
1476
+ </div>
1477
+ </div>
1417
1478
  </div>
1418
1479
  <section class="pf-c-app-launcher__group">
1419
1480
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -1603,12 +1664,16 @@ wrapperTag: div
1603
1664
  <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
1604
1665
  <div class="pf-c-menu__content">
1605
1666
  <section class="pf-c-menu__group pf-m-hidden-on-sm">
1606
- <ul class="pf-c-menu__list">
1607
- <li class="pf-c-menu__list-item pf-m-disabled">
1667
+ <ul class="pf-c-menu__list" role="menu">
1668
+ <li
1669
+ class="pf-c-menu__list-item pf-m-disabled"
1670
+ role="none"
1671
+ >
1608
1672
  <button
1609
1673
  class="pf-c-menu__item"
1610
1674
  type="button"
1611
1675
  disabled
1676
+ role="menuitem"
1612
1677
  >
1613
1678
  <span class="pf-c-menu__item-description">
1614
1679
  <div class="pf-u-font-size-sm">Username:</div>
@@ -1618,11 +1683,15 @@ wrapperTag: div
1618
1683
  </span>
1619
1684
  </button>
1620
1685
  </li>
1621
- <li class="pf-c-menu__list-item pf-m-disabled">
1686
+ <li
1687
+ class="pf-c-menu__list-item pf-m-disabled"
1688
+ role="none"
1689
+ >
1622
1690
  <button
1623
1691
  class="pf-c-menu__item"
1624
1692
  type="button"
1625
1693
  disabled
1694
+ role="menuitem"
1626
1695
  >
1627
1696
  <span class="pf-c-menu__item-description">
1628
1697
  <div class="pf-u-font-size-sm">Account number:</div>
@@ -1631,15 +1700,23 @@ wrapperTag: div
1631
1700
  </button>
1632
1701
  </li>
1633
1702
  <li class="pf-c-divider" role="separator"></li>
1634
- <li class="pf-c-menu__list-item">
1635
- <button class="pf-c-menu__item" type="button">
1703
+ <li class="pf-c-menu__list-item" role="none">
1704
+ <button
1705
+ class="pf-c-menu__item"
1706
+ type="button"
1707
+ role="menuitem"
1708
+ >
1636
1709
  <span class="pf-c-menu__item-main">
1637
1710
  <span class="pf-c-menu__item-text">My profile</span>
1638
1711
  </span>
1639
1712
  </button>
1640
1713
  </li>
1641
- <li class="pf-c-menu__list-item">
1642
- <button class="pf-c-menu__item" type="button">
1714
+ <li class="pf-c-menu__list-item" role="none">
1715
+ <button
1716
+ class="pf-c-menu__item"
1717
+ type="button"
1718
+ role="menuitem"
1719
+ >
1643
1720
  <span class="pf-c-menu__item-main">
1644
1721
  <span
1645
1722
  class="pf-c-menu__item-text"
@@ -1647,8 +1724,12 @@ wrapperTag: div
1647
1724
  </span>
1648
1725
  </button>
1649
1726
  </li>
1650
- <li class="pf-c-menu__list-item">
1651
- <button class="pf-c-menu__item" type="button">
1727
+ <li class="pf-c-menu__list-item" role="none">
1728
+ <button
1729
+ class="pf-c-menu__item"
1730
+ type="button"
1731
+ role="menuitem"
1732
+ >
1652
1733
  <span class="pf-c-menu__item-main">
1653
1734
  <span class="pf-c-menu__item-text">Logout</span>
1654
1735
  </span>
@@ -1658,11 +1739,12 @@ wrapperTag: div
1658
1739
  </section>
1659
1740
  <hr class="pf-c-divider pf-m-hidden-on-sm" />
1660
1741
  <section class="pf-c-menu__group">
1661
- <ul class="pf-c-menu__list">
1662
- <li class="pf-c-menu__list-item">
1742
+ <ul class="pf-c-menu__list" role="menu">
1743
+ <li class="pf-c-menu__list-item" role="none">
1663
1744
  <button
1664
1745
  class="pf-c-menu__item"
1665
1746
  type="button"
1747
+ role="menuitem"
1666
1748
  aria-expanded="false"
1667
1749
  >
1668
1750
  <span class="pf-c-menu__item-main">
@@ -1680,13 +1762,15 @@ wrapperTag: div
1680
1762
  </button>
1681
1763
  <div class="pf-c-menu" hidden>
1682
1764
  <div class="pf-c-menu__content">
1683
- <ul class="pf-c-menu__list">
1765
+ <ul class="pf-c-menu__list" role="menu">
1684
1766
  <li
1685
1767
  class="pf-c-menu__list-item pf-m-drill-up"
1768
+ role="none"
1686
1769
  >
1687
1770
  <button
1688
1771
  class="pf-c-menu__item"
1689
1772
  type="button"
1773
+ role="menuitem"
1690
1774
  >
1691
1775
  <span class="pf-c-menu__item-main">
1692
1776
  <span
@@ -1707,8 +1791,12 @@ wrapperTag: div
1707
1791
  </button>
1708
1792
  </li>
1709
1793
  <li class="pf-c-divider" role="separator"></li>
1710
- <li class="pf-c-menu__list-item">
1711
- <a class="pf-c-menu__item" href="#">
1794
+ <li class="pf-c-menu__list-item" role="none">
1795
+ <a
1796
+ class="pf-c-menu__item"
1797
+ href="#"
1798
+ role="menuitem"
1799
+ >
1712
1800
  <span class="pf-c-menu__item-main">
1713
1801
  <span
1714
1802
  class="pf-c-menu__item-text"
@@ -1716,8 +1804,12 @@ wrapperTag: div
1716
1804
  </span>
1717
1805
  </a>
1718
1806
  </li>
1719
- <li class="pf-c-menu__list-item">
1720
- <a class="pf-c-menu__item" href="#">
1807
+ <li class="pf-c-menu__list-item" role="none">
1808
+ <a
1809
+ class="pf-c-menu__item"
1810
+ href="#"
1811
+ role="menuitem"
1812
+ >
1721
1813
  <span class="pf-c-menu__item-main">
1722
1814
  <span class="pf-c-menu__item-text">About</span>
1723
1815
  </span>
@@ -1728,10 +1820,11 @@ wrapperTag: div
1728
1820
  </div>
1729
1821
  </li>
1730
1822
 
1731
- <li class="pf-c-menu__list-item">
1823
+ <li class="pf-c-menu__list-item" role="none">
1732
1824
  <button
1733
1825
  class="pf-c-menu__item"
1734
1826
  type="button"
1827
+ role="menuitem"
1735
1828
  aria-expanded="false"
1736
1829
  >
1737
1830
  <span class="pf-c-menu__item-main">
@@ -1749,13 +1842,15 @@ wrapperTag: div
1749
1842
  </button>
1750
1843
  <div class="pf-c-menu" hidden>
1751
1844
  <div class="pf-c-menu__content">
1752
- <ul class="pf-c-menu__list">
1845
+ <ul class="pf-c-menu__list" role="menu">
1753
1846
  <li
1754
1847
  class="pf-c-menu__list-item pf-m-drill-up"
1848
+ role="none"
1755
1849
  >
1756
1850
  <button
1757
1851
  class="pf-c-menu__item"
1758
1852
  type="button"
1853
+ role="menuitem"
1759
1854
  >
1760
1855
  <span class="pf-c-menu__item-main">
1761
1856
  <span
@@ -1774,8 +1869,12 @@ wrapperTag: div
1774
1869
  </button>
1775
1870
  </li>
1776
1871
  <li class="pf-c-divider" role="separator"></li>
1777
- <li class="pf-c-menu__list-item">
1778
- <a class="pf-c-menu__item" href="#">
1872
+ <li class="pf-c-menu__list-item" role="none">
1873
+ <a
1874
+ class="pf-c-menu__item"
1875
+ href="#"
1876
+ role="menuitem"
1877
+ >
1779
1878
  <span class="pf-c-menu__item-main">
1780
1879
  <span
1781
1880
  class="pf-c-menu__item-text"
@@ -1783,8 +1882,12 @@ wrapperTag: div
1783
1882
  </span>
1784
1883
  </a>
1785
1884
  </li>
1786
- <li class="pf-c-menu__list-item">
1787
- <a class="pf-c-menu__item" href="#">
1885
+ <li class="pf-c-menu__list-item" role="none">
1886
+ <a
1887
+ class="pf-c-menu__item"
1888
+ href="#"
1889
+ role="menuitem"
1890
+ >
1788
1891
  <span class="pf-c-menu__item-main">
1789
1892
  <span
1790
1893
  class="pf-c-menu__item-text"
@@ -1792,8 +1895,12 @@ wrapperTag: div
1792
1895
  </span>
1793
1896
  </a>
1794
1897
  </li>
1795
- <li class="pf-c-menu__list-item">
1796
- <a class="pf-c-menu__item" href="#">
1898
+ <li class="pf-c-menu__list-item" role="none">
1899
+ <a
1900
+ class="pf-c-menu__item"
1901
+ href="#"
1902
+ role="menuitem"
1903
+ >
1797
1904
  <span class="pf-c-menu__item-main">
1798
1905
  <span
1799
1906
  class="pf-c-menu__item-text"
@@ -1806,8 +1913,12 @@ wrapperTag: div
1806
1913
  </div>
1807
1914
  </li>
1808
1915
 
1809
- <li class="pf-c-menu__list-item">
1810
- <button class="pf-c-menu__item" type="button">
1916
+ <li class="pf-c-menu__list-item" role="none">
1917
+ <button
1918
+ class="pf-c-menu__item"
1919
+ type="button"
1920
+ role="menuitem"
1921
+ >
1811
1922
  <span class="pf-c-menu__item-main">
1812
1923
  <span class="pf-c-menu__item-icon">
1813
1924
  <i class="fas fa-fw fa-th" aria-hidden="true"></i>
@@ -1822,7 +1933,11 @@ wrapperTag: div
1822
1933
  </button>
1823
1934
  <div class="pf-c-menu" hidden>
1824
1935
  <div class="pf-c-menu__header">
1825
- <button class="pf-c-menu__item" type="button">
1936
+ <button
1937
+ class="pf-c-menu__item"
1938
+ type="button"
1939
+ role="menuitem"
1940
+ >
1826
1941
  <span class="pf-c-menu__item-main">
1827
1942
  <span class="pf-c-menu__item-toggle-icon">
1828
1943
  <i class="fas fa-angle-left"></i>
@@ -1841,21 +1956,36 @@ wrapperTag: div
1841
1956
  </div>
1842
1957
  <div class="pf-c-menu__search">
1843
1958
  <div class="pf-c-menu__search-input">
1844
- <input
1845
- class="pf-c-form-control pf-m-search"
1846
- type="search"
1847
- id="masthead-advanced-with-menu-example-masthead-drilldown-menu-list-3-search-input"
1848
- name="masthead-advanced-with-menu-example-masthead-drilldown-menu-list-3-search-input"
1849
- aria-label="Search"
1850
- />
1959
+ <div class="pf-c-search-input">
1960
+ <div class="pf-c-search-input__bar">
1961
+ <span class="pf-c-search-input__text">
1962
+ <span class="pf-c-search-input__icon">
1963
+ <i
1964
+ class="fas fa-search fa-fw"
1965
+ aria-hidden="true"
1966
+ ></i>
1967
+ </span>
1968
+ <input
1969
+ class="pf-c-search-input__text-input"
1970
+ type="text"
1971
+ placeholder="Search"
1972
+ aria-label="Search"
1973
+ />
1974
+ </span>
1975
+ </div>
1976
+ </div>
1851
1977
  </div>
1852
1978
  </div>
1853
1979
  <hr class="pf-c-divider" />
1854
1980
  <section class="pf-c-menu__group">
1855
1981
  <h1 class="pf-c-menu__group-title">Favorites</h1>
1856
- <ul class="pf-c-menu__list">
1857
- <li class="pf-c-menu__list-item">
1858
- <a class="pf-c-menu__item" href="#">
1982
+ <ul class="pf-c-menu__list" role="menu">
1983
+ <li class="pf-c-menu__list-item" role="none">
1984
+ <a
1985
+ class="pf-c-menu__item"
1986
+ href="#"
1987
+ role="menuitem"
1988
+ >
1859
1989
  <span class="pf-c-menu__item-main">
1860
1990
  <span
1861
1991
  class="pf-c-menu__item-text"
@@ -1875,10 +2005,11 @@ wrapperTag: div
1875
2005
  </span>
1876
2006
  </button>
1877
2007
  </li>
1878
- <li class="pf-c-menu__list-item">
2008
+ <li class="pf-c-menu__list-item" role="none">
1879
2009
  <a
1880
2010
  class="pf-c-menu__item"
1881
2011
  href="#"
2012
+ role="menuitem"
1882
2013
  target="_blank"
1883
2014
  >
1884
2015
  <span class="pf-c-menu__item-main">
@@ -1916,9 +2047,13 @@ wrapperTag: div
1916
2047
  <hr class="pf-c-divider" />
1917
2048
  <section class="pf-c-menu__group">
1918
2049
  <h1 class="pf-c-menu__group-title">Group 1</h1>
1919
- <ul class="pf-c-menu__list">
1920
- <li class="pf-c-menu__list-item">
1921
- <a class="pf-c-menu__item" href="#">
2050
+ <ul class="pf-c-menu__list" role="menu">
2051
+ <li class="pf-c-menu__list-item" role="none">
2052
+ <a
2053
+ class="pf-c-menu__item"
2054
+ href="#"
2055
+ role="menuitem"
2056
+ >
1922
2057
  <span class="pf-c-menu__item-main">
1923
2058
  <span
1924
2059
  class="pf-c-menu__item-text"
@@ -1938,10 +2073,11 @@ wrapperTag: div
1938
2073
  </span>
1939
2074
  </button>
1940
2075
  </li>
1941
- <li class="pf-c-menu__list-item">
2076
+ <li class="pf-c-menu__list-item" role="none">
1942
2077
  <a
1943
2078
  class="pf-c-menu__item"
1944
2079
  href="#"
2080
+ role="menuitem"
1945
2081
  target="_blank"
1946
2082
  >
1947
2083
  <span class="pf-c-menu__item-main">
@@ -2302,14 +2438,24 @@ wrapperTag: div
2302
2438
  hidden
2303
2439
  >
2304
2440
  <div class="pf-c-app-launcher__menu-search">
2305
- <input
2306
- class="pf-c-form-control"
2307
- type="search"
2308
- aria-label="Type to filter"
2309
- placeholder="Filter by name..."
2310
- id="masthead-horizontal-nav-masthead-application-launcher-text-input"
2311
- name="textInput1"
2312
- />
2441
+ <div class="pf-c-search-input">
2442
+ <div class="pf-c-search-input__bar">
2443
+ <span class="pf-c-search-input__text">
2444
+ <span class="pf-c-search-input__icon">
2445
+ <i
2446
+ class="fas fa-search fa-fw"
2447
+ aria-hidden="true"
2448
+ ></i>
2449
+ </span>
2450
+ <input
2451
+ class="pf-c-search-input__text-input"
2452
+ type="text"
2453
+ placeholder="Filter by name"
2454
+ aria-label="Filter by name"
2455
+ />
2456
+ </span>
2457
+ </div>
2458
+ </div>
2313
2459
  </div>
2314
2460
  <section class="pf-c-app-launcher__group">
2315
2461
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -2499,12 +2645,16 @@ wrapperTag: div
2499
2645
  <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
2500
2646
  <div class="pf-c-menu__content">
2501
2647
  <section class="pf-c-menu__group pf-m-hidden-on-sm">
2502
- <ul class="pf-c-menu__list">
2503
- <li class="pf-c-menu__list-item pf-m-disabled">
2648
+ <ul class="pf-c-menu__list" role="menu">
2649
+ <li
2650
+ class="pf-c-menu__list-item pf-m-disabled"
2651
+ role="none"
2652
+ >
2504
2653
  <button
2505
2654
  class="pf-c-menu__item"
2506
2655
  type="button"
2507
2656
  disabled
2657
+ role="menuitem"
2508
2658
  >
2509
2659
  <span class="pf-c-menu__item-description">
2510
2660
  <div class="pf-u-font-size-sm">Username:</div>
@@ -2514,11 +2664,15 @@ wrapperTag: div
2514
2664
  </span>
2515
2665
  </button>
2516
2666
  </li>
2517
- <li class="pf-c-menu__list-item pf-m-disabled">
2667
+ <li
2668
+ class="pf-c-menu__list-item pf-m-disabled"
2669
+ role="none"
2670
+ >
2518
2671
  <button
2519
2672
  class="pf-c-menu__item"
2520
2673
  type="button"
2521
2674
  disabled
2675
+ role="menuitem"
2522
2676
  >
2523
2677
  <span class="pf-c-menu__item-description">
2524
2678
  <div class="pf-u-font-size-sm">Account number:</div>
@@ -2527,15 +2681,23 @@ wrapperTag: div
2527
2681
  </button>
2528
2682
  </li>
2529
2683
  <li class="pf-c-divider" role="separator"></li>
2530
- <li class="pf-c-menu__list-item">
2531
- <button class="pf-c-menu__item" type="button">
2684
+ <li class="pf-c-menu__list-item" role="none">
2685
+ <button
2686
+ class="pf-c-menu__item"
2687
+ type="button"
2688
+ role="menuitem"
2689
+ >
2532
2690
  <span class="pf-c-menu__item-main">
2533
2691
  <span class="pf-c-menu__item-text">My profile</span>
2534
2692
  </span>
2535
2693
  </button>
2536
2694
  </li>
2537
- <li class="pf-c-menu__list-item">
2538
- <button class="pf-c-menu__item" type="button">
2695
+ <li class="pf-c-menu__list-item" role="none">
2696
+ <button
2697
+ class="pf-c-menu__item"
2698
+ type="button"
2699
+ role="menuitem"
2700
+ >
2539
2701
  <span class="pf-c-menu__item-main">
2540
2702
  <span
2541
2703
  class="pf-c-menu__item-text"
@@ -2543,8 +2705,12 @@ wrapperTag: div
2543
2705
  </span>
2544
2706
  </button>
2545
2707
  </li>
2546
- <li class="pf-c-menu__list-item">
2547
- <button class="pf-c-menu__item" type="button">
2708
+ <li class="pf-c-menu__list-item" role="none">
2709
+ <button
2710
+ class="pf-c-menu__item"
2711
+ type="button"
2712
+ role="menuitem"
2713
+ >
2548
2714
  <span class="pf-c-menu__item-main">
2549
2715
  <span class="pf-c-menu__item-text">Logout</span>
2550
2716
  </span>
@@ -2554,11 +2720,12 @@ wrapperTag: div
2554
2720
  </section>
2555
2721
  <hr class="pf-c-divider pf-m-hidden-on-sm" />
2556
2722
  <section class="pf-c-menu__group">
2557
- <ul class="pf-c-menu__list">
2558
- <li class="pf-c-menu__list-item">
2723
+ <ul class="pf-c-menu__list" role="menu">
2724
+ <li class="pf-c-menu__list-item" role="none">
2559
2725
  <button
2560
2726
  class="pf-c-menu__item"
2561
2727
  type="button"
2728
+ role="menuitem"
2562
2729
  aria-expanded="false"
2563
2730
  >
2564
2731
  <span class="pf-c-menu__item-main">
@@ -2576,13 +2743,15 @@ wrapperTag: div
2576
2743
  </button>
2577
2744
  <div class="pf-c-menu" hidden>
2578
2745
  <div class="pf-c-menu__content">
2579
- <ul class="pf-c-menu__list">
2746
+ <ul class="pf-c-menu__list" role="menu">
2580
2747
  <li
2581
2748
  class="pf-c-menu__list-item pf-m-drill-up"
2749
+ role="none"
2582
2750
  >
2583
2751
  <button
2584
2752
  class="pf-c-menu__item"
2585
2753
  type="button"
2754
+ role="menuitem"
2586
2755
  >
2587
2756
  <span class="pf-c-menu__item-main">
2588
2757
  <span
@@ -2603,8 +2772,12 @@ wrapperTag: div
2603
2772
  </button>
2604
2773
  </li>
2605
2774
  <li class="pf-c-divider" role="separator"></li>
2606
- <li class="pf-c-menu__list-item">
2607
- <a class="pf-c-menu__item" href="#">
2775
+ <li class="pf-c-menu__list-item" role="none">
2776
+ <a
2777
+ class="pf-c-menu__item"
2778
+ href="#"
2779
+ role="menuitem"
2780
+ >
2608
2781
  <span class="pf-c-menu__item-main">
2609
2782
  <span
2610
2783
  class="pf-c-menu__item-text"
@@ -2612,8 +2785,12 @@ wrapperTag: div
2612
2785
  </span>
2613
2786
  </a>
2614
2787
  </li>
2615
- <li class="pf-c-menu__list-item">
2616
- <a class="pf-c-menu__item" href="#">
2788
+ <li class="pf-c-menu__list-item" role="none">
2789
+ <a
2790
+ class="pf-c-menu__item"
2791
+ href="#"
2792
+ role="menuitem"
2793
+ >
2617
2794
  <span class="pf-c-menu__item-main">
2618
2795
  <span class="pf-c-menu__item-text">About</span>
2619
2796
  </span>
@@ -2624,10 +2801,11 @@ wrapperTag: div
2624
2801
  </div>
2625
2802
  </li>
2626
2803
 
2627
- <li class="pf-c-menu__list-item">
2804
+ <li class="pf-c-menu__list-item" role="none">
2628
2805
  <button
2629
2806
  class="pf-c-menu__item"
2630
2807
  type="button"
2808
+ role="menuitem"
2631
2809
  aria-expanded="false"
2632
2810
  >
2633
2811
  <span class="pf-c-menu__item-main">
@@ -2645,13 +2823,15 @@ wrapperTag: div
2645
2823
  </button>
2646
2824
  <div class="pf-c-menu" hidden>
2647
2825
  <div class="pf-c-menu__content">
2648
- <ul class="pf-c-menu__list">
2826
+ <ul class="pf-c-menu__list" role="menu">
2649
2827
  <li
2650
2828
  class="pf-c-menu__list-item pf-m-drill-up"
2829
+ role="none"
2651
2830
  >
2652
2831
  <button
2653
2832
  class="pf-c-menu__item"
2654
2833
  type="button"
2834
+ role="menuitem"
2655
2835
  >
2656
2836
  <span class="pf-c-menu__item-main">
2657
2837
  <span
@@ -2670,8 +2850,12 @@ wrapperTag: div
2670
2850
  </button>
2671
2851
  </li>
2672
2852
  <li class="pf-c-divider" role="separator"></li>
2673
- <li class="pf-c-menu__list-item">
2674
- <a class="pf-c-menu__item" href="#">
2853
+ <li class="pf-c-menu__list-item" role="none">
2854
+ <a
2855
+ class="pf-c-menu__item"
2856
+ href="#"
2857
+ role="menuitem"
2858
+ >
2675
2859
  <span class="pf-c-menu__item-main">
2676
2860
  <span
2677
2861
  class="pf-c-menu__item-text"
@@ -2679,8 +2863,12 @@ wrapperTag: div
2679
2863
  </span>
2680
2864
  </a>
2681
2865
  </li>
2682
- <li class="pf-c-menu__list-item">
2683
- <a class="pf-c-menu__item" href="#">
2866
+ <li class="pf-c-menu__list-item" role="none">
2867
+ <a
2868
+ class="pf-c-menu__item"
2869
+ href="#"
2870
+ role="menuitem"
2871
+ >
2684
2872
  <span class="pf-c-menu__item-main">
2685
2873
  <span
2686
2874
  class="pf-c-menu__item-text"
@@ -2688,8 +2876,12 @@ wrapperTag: div
2688
2876
  </span>
2689
2877
  </a>
2690
2878
  </li>
2691
- <li class="pf-c-menu__list-item">
2692
- <a class="pf-c-menu__item" href="#">
2879
+ <li class="pf-c-menu__list-item" role="none">
2880
+ <a
2881
+ class="pf-c-menu__item"
2882
+ href="#"
2883
+ role="menuitem"
2884
+ >
2693
2885
  <span class="pf-c-menu__item-main">
2694
2886
  <span
2695
2887
  class="pf-c-menu__item-text"
@@ -2702,8 +2894,12 @@ wrapperTag: div
2702
2894
  </div>
2703
2895
  </li>
2704
2896
 
2705
- <li class="pf-c-menu__list-item">
2706
- <button class="pf-c-menu__item" type="button">
2897
+ <li class="pf-c-menu__list-item" role="none">
2898
+ <button
2899
+ class="pf-c-menu__item"
2900
+ type="button"
2901
+ role="menuitem"
2902
+ >
2707
2903
  <span class="pf-c-menu__item-main">
2708
2904
  <span class="pf-c-menu__item-icon">
2709
2905
  <i class="fas fa-fw fa-th" aria-hidden="true"></i>
@@ -2718,7 +2914,11 @@ wrapperTag: div
2718
2914
  </button>
2719
2915
  <div class="pf-c-menu" hidden>
2720
2916
  <div class="pf-c-menu__header">
2721
- <button class="pf-c-menu__item" type="button">
2917
+ <button
2918
+ class="pf-c-menu__item"
2919
+ type="button"
2920
+ role="menuitem"
2921
+ >
2722
2922
  <span class="pf-c-menu__item-main">
2723
2923
  <span class="pf-c-menu__item-toggle-icon">
2724
2924
  <i class="fas fa-angle-left"></i>
@@ -2737,21 +2937,36 @@ wrapperTag: div
2737
2937
  </div>
2738
2938
  <div class="pf-c-menu__search">
2739
2939
  <div class="pf-c-menu__search-input">
2740
- <input
2741
- class="pf-c-form-control pf-m-search"
2742
- type="search"
2743
- id="masthead-horizontal-nav-masthead-drilldown-menu-list-3-search-input"
2744
- name="masthead-horizontal-nav-masthead-drilldown-menu-list-3-search-input"
2745
- aria-label="Search"
2746
- />
2940
+ <div class="pf-c-search-input">
2941
+ <div class="pf-c-search-input__bar">
2942
+ <span class="pf-c-search-input__text">
2943
+ <span class="pf-c-search-input__icon">
2944
+ <i
2945
+ class="fas fa-search fa-fw"
2946
+ aria-hidden="true"
2947
+ ></i>
2948
+ </span>
2949
+ <input
2950
+ class="pf-c-search-input__text-input"
2951
+ type="text"
2952
+ placeholder="Search"
2953
+ aria-label="Search"
2954
+ />
2955
+ </span>
2956
+ </div>
2957
+ </div>
2747
2958
  </div>
2748
2959
  </div>
2749
2960
  <hr class="pf-c-divider" />
2750
2961
  <section class="pf-c-menu__group">
2751
2962
  <h1 class="pf-c-menu__group-title">Favorites</h1>
2752
- <ul class="pf-c-menu__list">
2753
- <li class="pf-c-menu__list-item">
2754
- <a class="pf-c-menu__item" href="#">
2963
+ <ul class="pf-c-menu__list" role="menu">
2964
+ <li class="pf-c-menu__list-item" role="none">
2965
+ <a
2966
+ class="pf-c-menu__item"
2967
+ href="#"
2968
+ role="menuitem"
2969
+ >
2755
2970
  <span class="pf-c-menu__item-main">
2756
2971
  <span
2757
2972
  class="pf-c-menu__item-text"
@@ -2771,10 +2986,11 @@ wrapperTag: div
2771
2986
  </span>
2772
2987
  </button>
2773
2988
  </li>
2774
- <li class="pf-c-menu__list-item">
2989
+ <li class="pf-c-menu__list-item" role="none">
2775
2990
  <a
2776
2991
  class="pf-c-menu__item"
2777
2992
  href="#"
2993
+ role="menuitem"
2778
2994
  target="_blank"
2779
2995
  >
2780
2996
  <span class="pf-c-menu__item-main">
@@ -2812,9 +3028,13 @@ wrapperTag: div
2812
3028
  <hr class="pf-c-divider" />
2813
3029
  <section class="pf-c-menu__group">
2814
3030
  <h1 class="pf-c-menu__group-title">Group 1</h1>
2815
- <ul class="pf-c-menu__list">
2816
- <li class="pf-c-menu__list-item">
2817
- <a class="pf-c-menu__item" href="#">
3031
+ <ul class="pf-c-menu__list" role="menu">
3032
+ <li class="pf-c-menu__list-item" role="none">
3033
+ <a
3034
+ class="pf-c-menu__item"
3035
+ href="#"
3036
+ role="menuitem"
3037
+ >
2818
3038
  <span class="pf-c-menu__item-main">
2819
3039
  <span
2820
3040
  class="pf-c-menu__item-text"
@@ -2834,10 +3054,11 @@ wrapperTag: div
2834
3054
  </span>
2835
3055
  </button>
2836
3056
  </li>
2837
- <li class="pf-c-menu__list-item">
3057
+ <li class="pf-c-menu__list-item" role="none">
2838
3058
  <a
2839
3059
  class="pf-c-menu__item"
2840
3060
  href="#"
3061
+ role="menuitem"
2841
3062
  target="_blank"
2842
3063
  >
2843
3064
  <span class="pf-c-menu__item-main">
@@ -3175,64 +3396,88 @@ wrapperTag: div
3175
3396
  aria-label="search filter"
3176
3397
  role="group"
3177
3398
  >
3178
- <div class="pf-c-dropdown">
3399
+ <div class="pf-c-select" style="width: 175px">
3400
+ <span
3401
+ id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label"
3402
+ hidden
3403
+ >Choose one</span>
3404
+
3179
3405
  <button
3180
- class="pf-c-dropdown__toggle"
3181
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-masthead-toggle-group-filters-expanded-mobile-example-masthead-expandable-content-button"
3182
- aria-expanded="false"
3406
+ class="pf-c-select__toggle"
3183
3407
  type="button"
3408
+ id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-toggle"
3409
+ aria-haspopup="true"
3410
+ aria-expanded="false"
3411
+ aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-toggle"
3184
3412
  >
3185
- <span class="pf-c-dropdown__toggle-text">Name</span>
3186
- <span class="pf-c-dropdown__toggle-icon">
3413
+ <div class="pf-c-select__toggle-wrapper">
3414
+ <span class="pf-c-select__toggle-icon">
3415
+ <i class="fas fa-filter" aria-hidden="true"></i>
3416
+ </span>
3417
+ <span class="pf-c-select__toggle-text">Name</span>
3418
+ </div>
3419
+ <span class="pf-c-select__toggle-arrow">
3187
3420
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3188
3421
  </span>
3189
3422
  </button>
3423
+
3190
3424
  <ul
3191
- class="pf-c-dropdown__menu"
3192
- aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-masthead-toggle-group-filters-expanded-mobile-example-masthead-expandable-content-button"
3425
+ class="pf-c-select__menu"
3426
+ role="listbox"
3427
+ aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label"
3193
3428
  hidden
3429
+ style="width: 175px"
3194
3430
  >
3195
- <li>
3196
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
3431
+ <li role="presentation">
3432
+ <button
3433
+ class="pf-c-select__menu-item"
3434
+ role="option"
3435
+ >Running</button>
3197
3436
  </li>
3198
- <li>
3437
+ <li role="presentation">
3199
3438
  <button
3200
- class="pf-c-dropdown__menu-item"
3201
- type="button"
3202
- >Action</button>
3439
+ class="pf-c-select__menu-item pf-m-selected"
3440
+ role="option"
3441
+ aria-selected="true"
3442
+ >
3443
+ Stopped
3444
+ <span class="pf-c-select__menu-item-icon">
3445
+ <i class="fas fa-check" aria-hidden="true"></i>
3446
+ </span>
3447
+ </button>
3203
3448
  </li>
3204
- <li>
3205
- <a
3206
- class="pf-c-dropdown__menu-item pf-m-disabled"
3207
- href="#"
3208
- aria-disabled="true"
3209
- tabindex="-1"
3210
- >Disabled link</a>
3449
+ <li role="presentation">
3450
+ <button class="pf-c-select__menu-item" role="option">Down</button>
3211
3451
  </li>
3212
- <li>
3452
+ <li role="presentation">
3213
3453
  <button
3214
- class="pf-c-dropdown__menu-item"
3215
- type="button"
3216
- disabled
3217
- >Disabled action</button>
3454
+ class="pf-c-select__menu-item"
3455
+ role="option"
3456
+ >Degraded</button>
3218
3457
  </li>
3219
- <li class="pf-c-divider" role="separator"></li>
3220
- <li>
3221
- <a
3222
- class="pf-c-dropdown__menu-item"
3223
- href="#"
3224
- >Separated link</a>
3458
+ <li role="presentation">
3459
+ <button
3460
+ class="pf-c-select__menu-item"
3461
+ role="option"
3462
+ >Needs maintenance</button>
3225
3463
  </li>
3226
3464
  </ul>
3227
3465
  </div>
3228
- <input
3229
- class="pf-c-form-control"
3230
- type="search"
3231
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-masthead-toggle-group-filters-expanded-mobile-example-masthead-expandable-content-search-filter-input"
3232
- name="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-search-filter-input"
3233
- aria-label="input with dropdown and button"
3234
- aria-describedby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-masthead-toggle-group-filters-expanded-mobile-example-masthead-expandable-content-button"
3235
- />
3466
+ <div class="pf-c-search-input">
3467
+ <div class="pf-c-search-input__bar">
3468
+ <span class="pf-c-search-input__text">
3469
+ <span class="pf-c-search-input__icon">
3470
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
3471
+ </span>
3472
+ <input
3473
+ class="pf-c-search-input__text-input"
3474
+ type="text"
3475
+ placeholder="Filter by name"
3476
+ aria-label="Filter by name"
3477
+ />
3478
+ </span>
3479
+ </div>
3480
+ </div>
3236
3481
  </div>
3237
3482
  </div>
3238
3483
  </div>