@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
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -459,58 +459,82 @@ In some instances, it may be necessary to adjust spacing explicitly where items
459
459
  </div>
460
460
  <div class="pf-c-toolbar__item pf-m-search-filter">
461
461
  <div class="pf-c-input-group" aria-label="search filter" role="group">
462
- <div class="pf-c-dropdown">
462
+ <div class="pf-c-select" style="width: 175px">
463
+ <span
464
+ id="toolbar-toggle-group-example-select-name-label"
465
+ hidden
466
+ >Choose one</span>
467
+
463
468
  <button
464
- class="pf-c-dropdown__toggle"
465
- id="toolbar-toggle-group-example-content-button"
466
- aria-expanded="false"
469
+ class="pf-c-select__toggle"
467
470
  type="button"
471
+ id="toolbar-toggle-group-example-select-name-toggle"
472
+ aria-haspopup="true"
473
+ aria-expanded="false"
474
+ aria-labelledby="toolbar-toggle-group-example-select-name-label toolbar-toggle-group-example-select-name-toggle"
468
475
  >
469
- <span class="pf-c-dropdown__toggle-text">Name</span>
470
- <span class="pf-c-dropdown__toggle-icon">
476
+ <div class="pf-c-select__toggle-wrapper">
477
+ <span class="pf-c-select__toggle-icon">
478
+ <i class="fas fa-filter" aria-hidden="true"></i>
479
+ </span>
480
+ <span class="pf-c-select__toggle-text">Name</span>
481
+ </div>
482
+ <span class="pf-c-select__toggle-arrow">
471
483
  <i class="fas fa-caret-down" aria-hidden="true"></i>
472
484
  </span>
473
485
  </button>
486
+
474
487
  <ul
475
- class="pf-c-dropdown__menu"
476
- aria-labelledby="toolbar-toggle-group-example-content-button"
488
+ class="pf-c-select__menu"
489
+ role="listbox"
490
+ aria-labelledby="toolbar-toggle-group-example-select-name-label"
477
491
  hidden
492
+ style="width: 175px"
478
493
  >
479
- <li>
480
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
494
+ <li role="presentation">
495
+ <button class="pf-c-select__menu-item" role="option">Running</button>
481
496
  </li>
482
- <li>
483
- <button class="pf-c-dropdown__menu-item" type="button">Action</button>
497
+ <li role="presentation">
498
+ <button
499
+ class="pf-c-select__menu-item pf-m-selected"
500
+ role="option"
501
+ aria-selected="true"
502
+ >
503
+ Stopped
504
+ <span class="pf-c-select__menu-item-icon">
505
+ <i class="fas fa-check" aria-hidden="true"></i>
506
+ </span>
507
+ </button>
484
508
  </li>
485
- <li>
486
- <a
487
- class="pf-c-dropdown__menu-item pf-m-disabled"
488
- href="#"
489
- aria-disabled="true"
490
- tabindex="-1"
491
- >Disabled link</a>
509
+ <li role="presentation">
510
+ <button class="pf-c-select__menu-item" role="option">Down</button>
492
511
  </li>
493
- <li>
494
- <button
495
- class="pf-c-dropdown__menu-item"
496
- type="button"
497
- disabled
498
- >Disabled action</button>
512
+ <li role="presentation">
513
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
499
514
  </li>
500
- <li class="pf-c-divider" role="separator"></li>
501
- <li>
502
- <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
515
+ <li role="presentation">
516
+ <button
517
+ class="pf-c-select__menu-item"
518
+ role="option"
519
+ >Needs maintenance</button>
503
520
  </li>
504
521
  </ul>
505
522
  </div>
506
- <input
507
- class="pf-c-form-control"
508
- type="search"
509
- id="toolbar-toggle-group-example-content-search-filter-input"
510
- name="toolbar-toggle-group-example-search-filter-input"
511
- aria-label="input with dropdown and button"
512
- aria-describedby="toolbar-toggle-group-example-content-button"
513
- />
523
+ <div class="pf-c-search-input">
524
+ <div class="pf-c-search-input__bar">
525
+ <span class="pf-c-search-input__text">
526
+ <span class="pf-c-search-input__icon">
527
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
528
+ </span>
529
+ <input
530
+ class="pf-c-search-input__text-input"
531
+ type="text"
532
+ placeholder="Filter by name"
533
+ aria-label="Filter by name"
534
+ />
535
+ </span>
536
+ </div>
537
+ </div>
514
538
  </div>
515
539
  </div>
516
540
  <div class="pf-c-toolbar__group pf-m-filter-group">
@@ -755,58 +779,82 @@ In some instances, it may be necessary to adjust spacing explicitly where items
755
779
  >
756
780
  <div class="pf-c-toolbar__item pf-m-search-filter">
757
781
  <div class="pf-c-input-group" aria-label="search filter" role="group">
758
- <div class="pf-c-dropdown">
782
+ <div class="pf-c-select" style="width: 175px">
783
+ <span
784
+ id="toolbar-toggle-group-collapsed-example-select-name-label"
785
+ hidden
786
+ >Choose one</span>
787
+
759
788
  <button
760
- class="pf-c-dropdown__toggle"
761
- id="toolbar-toggle-group-collapsed-example-expandable-content-button"
762
- aria-expanded="false"
789
+ class="pf-c-select__toggle"
763
790
  type="button"
791
+ id="toolbar-toggle-group-collapsed-example-select-name-toggle"
792
+ aria-haspopup="true"
793
+ aria-expanded="false"
794
+ aria-labelledby="toolbar-toggle-group-collapsed-example-select-name-label toolbar-toggle-group-collapsed-example-select-name-toggle"
764
795
  >
765
- <span class="pf-c-dropdown__toggle-text">Name</span>
766
- <span class="pf-c-dropdown__toggle-icon">
796
+ <div class="pf-c-select__toggle-wrapper">
797
+ <span class="pf-c-select__toggle-icon">
798
+ <i class="fas fa-filter" aria-hidden="true"></i>
799
+ </span>
800
+ <span class="pf-c-select__toggle-text">Name</span>
801
+ </div>
802
+ <span class="pf-c-select__toggle-arrow">
767
803
  <i class="fas fa-caret-down" aria-hidden="true"></i>
768
804
  </span>
769
805
  </button>
806
+
770
807
  <ul
771
- class="pf-c-dropdown__menu"
772
- aria-labelledby="toolbar-toggle-group-collapsed-example-expandable-content-button"
808
+ class="pf-c-select__menu"
809
+ role="listbox"
810
+ aria-labelledby="toolbar-toggle-group-collapsed-example-select-name-label"
773
811
  hidden
812
+ style="width: 175px"
774
813
  >
775
- <li>
776
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
814
+ <li role="presentation">
815
+ <button class="pf-c-select__menu-item" role="option">Running</button>
777
816
  </li>
778
- <li>
779
- <button class="pf-c-dropdown__menu-item" type="button">Action</button>
817
+ <li role="presentation">
818
+ <button
819
+ class="pf-c-select__menu-item pf-m-selected"
820
+ role="option"
821
+ aria-selected="true"
822
+ >
823
+ Stopped
824
+ <span class="pf-c-select__menu-item-icon">
825
+ <i class="fas fa-check" aria-hidden="true"></i>
826
+ </span>
827
+ </button>
780
828
  </li>
781
- <li>
782
- <a
783
- class="pf-c-dropdown__menu-item pf-m-disabled"
784
- href="#"
785
- aria-disabled="true"
786
- tabindex="-1"
787
- >Disabled link</a>
829
+ <li role="presentation">
830
+ <button class="pf-c-select__menu-item" role="option">Down</button>
788
831
  </li>
789
- <li>
790
- <button
791
- class="pf-c-dropdown__menu-item"
792
- type="button"
793
- disabled
794
- >Disabled action</button>
832
+ <li role="presentation">
833
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
795
834
  </li>
796
- <li class="pf-c-divider" role="separator"></li>
797
- <li>
798
- <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
835
+ <li role="presentation">
836
+ <button
837
+ class="pf-c-select__menu-item"
838
+ role="option"
839
+ >Needs maintenance</button>
799
840
  </li>
800
841
  </ul>
801
842
  </div>
802
- <input
803
- class="pf-c-form-control"
804
- type="search"
805
- id="toolbar-toggle-group-collapsed-example-expandable-content-search-filter-input"
806
- name="toolbar-toggle-group-collapsed-example-search-filter-input"
807
- aria-label="input with dropdown and button"
808
- aria-describedby="toolbar-toggle-group-collapsed-example-expandable-content-button"
809
- />
843
+ <div class="pf-c-search-input">
844
+ <div class="pf-c-search-input__bar">
845
+ <span class="pf-c-search-input__text">
846
+ <span class="pf-c-search-input__icon">
847
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
848
+ </span>
849
+ <input
850
+ class="pf-c-search-input__text-input"
851
+ type="text"
852
+ placeholder="Filter by name"
853
+ aria-label="Filter by name"
854
+ />
855
+ </span>
856
+ </div>
857
+ </div>
810
858
  </div>
811
859
  </div>
812
860
  <div class="pf-c-toolbar__group pf-m-filter-group">
@@ -1112,58 +1160,82 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1112
1160
  </div>
1113
1161
  <div class="pf-c-toolbar__item pf-m-search-filter">
1114
1162
  <div class="pf-c-input-group" aria-label="search filter" role="group">
1115
- <div class="pf-c-dropdown">
1163
+ <div class="pf-c-select" style="width: 175px">
1164
+ <span
1165
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label"
1166
+ hidden
1167
+ >Choose one</span>
1168
+
1116
1169
  <button
1117
- class="pf-c-dropdown__toggle"
1118
- id="toolbar-selected-filters-toggle-group-collapsed-example-content-button"
1119
- aria-expanded="false"
1170
+ class="pf-c-select__toggle"
1120
1171
  type="button"
1172
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-name-toggle"
1173
+ aria-haspopup="true"
1174
+ aria-expanded="false"
1175
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label toolbar-selected-filters-toggle-group-collapsed-example-select-name-toggle"
1121
1176
  >
1122
- <span class="pf-c-dropdown__toggle-text">Name</span>
1123
- <span class="pf-c-dropdown__toggle-icon">
1177
+ <div class="pf-c-select__toggle-wrapper">
1178
+ <span class="pf-c-select__toggle-icon">
1179
+ <i class="fas fa-filter" aria-hidden="true"></i>
1180
+ </span>
1181
+ <span class="pf-c-select__toggle-text">Name</span>
1182
+ </div>
1183
+ <span class="pf-c-select__toggle-arrow">
1124
1184
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1125
1185
  </span>
1126
1186
  </button>
1187
+
1127
1188
  <ul
1128
- class="pf-c-dropdown__menu"
1129
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-content-button"
1189
+ class="pf-c-select__menu"
1190
+ role="listbox"
1191
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label"
1130
1192
  hidden
1193
+ style="width: 175px"
1131
1194
  >
1132
- <li>
1133
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1195
+ <li role="presentation">
1196
+ <button class="pf-c-select__menu-item" role="option">Running</button>
1134
1197
  </li>
1135
- <li>
1136
- <button class="pf-c-dropdown__menu-item" type="button">Action</button>
1198
+ <li role="presentation">
1199
+ <button
1200
+ class="pf-c-select__menu-item pf-m-selected"
1201
+ role="option"
1202
+ aria-selected="true"
1203
+ >
1204
+ Stopped
1205
+ <span class="pf-c-select__menu-item-icon">
1206
+ <i class="fas fa-check" aria-hidden="true"></i>
1207
+ </span>
1208
+ </button>
1137
1209
  </li>
1138
- <li>
1139
- <a
1140
- class="pf-c-dropdown__menu-item pf-m-disabled"
1141
- href="#"
1142
- aria-disabled="true"
1143
- tabindex="-1"
1144
- >Disabled link</a>
1210
+ <li role="presentation">
1211
+ <button class="pf-c-select__menu-item" role="option">Down</button>
1145
1212
  </li>
1146
- <li>
1147
- <button
1148
- class="pf-c-dropdown__menu-item"
1149
- type="button"
1150
- disabled
1151
- >Disabled action</button>
1213
+ <li role="presentation">
1214
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
1152
1215
  </li>
1153
- <li class="pf-c-divider" role="separator"></li>
1154
- <li>
1155
- <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
1216
+ <li role="presentation">
1217
+ <button
1218
+ class="pf-c-select__menu-item"
1219
+ role="option"
1220
+ >Needs maintenance</button>
1156
1221
  </li>
1157
1222
  </ul>
1158
1223
  </div>
1159
- <input
1160
- class="pf-c-form-control"
1161
- type="search"
1162
- id="toolbar-selected-filters-toggle-group-collapsed-example-content-search-filter-input"
1163
- name="toolbar-selected-filters-toggle-group-collapsed-example-search-filter-input"
1164
- aria-label="input with dropdown and button"
1165
- aria-describedby="toolbar-selected-filters-toggle-group-collapsed-example-content-button"
1166
- />
1224
+ <div class="pf-c-search-input">
1225
+ <div class="pf-c-search-input__bar">
1226
+ <span class="pf-c-search-input__text">
1227
+ <span class="pf-c-search-input__icon">
1228
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1229
+ </span>
1230
+ <input
1231
+ class="pf-c-search-input__text-input"
1232
+ type="text"
1233
+ placeholder="Filter by name"
1234
+ aria-label="Filter by name"
1235
+ />
1236
+ </span>
1237
+ </div>
1238
+ </div>
1167
1239
  </div>
1168
1240
  </div>
1169
1241
  <div class="pf-c-toolbar__group pf-m-filter-group">
@@ -1669,58 +1741,82 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1669
1741
  >
1670
1742
  <div class="pf-c-toolbar__item pf-m-search-filter">
1671
1743
  <div class="pf-c-input-group" aria-label="search filter" role="group">
1672
- <div class="pf-c-dropdown">
1744
+ <div class="pf-c-select" style="width: 175px">
1745
+ <span
1746
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-name-label"
1747
+ hidden
1748
+ >Choose one</span>
1749
+
1673
1750
  <button
1674
- class="pf-c-dropdown__toggle"
1675
- id="toolbar-selected-filters-toggle-group-expanded-example-expanded-content-button"
1676
- aria-expanded="false"
1751
+ class="pf-c-select__toggle"
1677
1752
  type="button"
1753
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-name-toggle"
1754
+ aria-haspopup="true"
1755
+ aria-expanded="false"
1756
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-name-label toolbar-selected-filters-toggle-group-expanded-example-select-name-toggle"
1678
1757
  >
1679
- <span class="pf-c-dropdown__toggle-text">Name</span>
1680
- <span class="pf-c-dropdown__toggle-icon">
1758
+ <div class="pf-c-select__toggle-wrapper">
1759
+ <span class="pf-c-select__toggle-icon">
1760
+ <i class="fas fa-filter" aria-hidden="true"></i>
1761
+ </span>
1762
+ <span class="pf-c-select__toggle-text">Name</span>
1763
+ </div>
1764
+ <span class="pf-c-select__toggle-arrow">
1681
1765
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1682
1766
  </span>
1683
1767
  </button>
1768
+
1684
1769
  <ul
1685
- class="pf-c-dropdown__menu"
1686
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-expanded-content-button"
1770
+ class="pf-c-select__menu"
1771
+ role="listbox"
1772
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-name-label"
1687
1773
  hidden
1774
+ style="width: 175px"
1688
1775
  >
1689
- <li>
1690
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1776
+ <li role="presentation">
1777
+ <button class="pf-c-select__menu-item" role="option">Running</button>
1691
1778
  </li>
1692
- <li>
1693
- <button class="pf-c-dropdown__menu-item" type="button">Action</button>
1779
+ <li role="presentation">
1780
+ <button
1781
+ class="pf-c-select__menu-item pf-m-selected"
1782
+ role="option"
1783
+ aria-selected="true"
1784
+ >
1785
+ Stopped
1786
+ <span class="pf-c-select__menu-item-icon">
1787
+ <i class="fas fa-check" aria-hidden="true"></i>
1788
+ </span>
1789
+ </button>
1694
1790
  </li>
1695
- <li>
1696
- <a
1697
- class="pf-c-dropdown__menu-item pf-m-disabled"
1698
- href="#"
1699
- aria-disabled="true"
1700
- tabindex="-1"
1701
- >Disabled link</a>
1791
+ <li role="presentation">
1792
+ <button class="pf-c-select__menu-item" role="option">Down</button>
1702
1793
  </li>
1703
- <li>
1704
- <button
1705
- class="pf-c-dropdown__menu-item"
1706
- type="button"
1707
- disabled
1708
- >Disabled action</button>
1794
+ <li role="presentation">
1795
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
1709
1796
  </li>
1710
- <li class="pf-c-divider" role="separator"></li>
1711
- <li>
1712
- <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
1797
+ <li role="presentation">
1798
+ <button
1799
+ class="pf-c-select__menu-item"
1800
+ role="option"
1801
+ >Needs maintenance</button>
1713
1802
  </li>
1714
1803
  </ul>
1715
1804
  </div>
1716
- <input
1717
- class="pf-c-form-control"
1718
- type="search"
1719
- id="toolbar-selected-filters-toggle-group-expanded-example-expanded-content-search-filter-input"
1720
- name="toolbar-selected-filters-toggle-group-expanded-example-search-filter-input"
1721
- aria-label="input with dropdown and button"
1722
- aria-describedby="toolbar-selected-filters-toggle-group-expanded-example-expanded-content-button"
1723
- />
1805
+ <div class="pf-c-search-input">
1806
+ <div class="pf-c-search-input__bar">
1807
+ <span class="pf-c-search-input__text">
1808
+ <span class="pf-c-search-input__icon">
1809
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1810
+ </span>
1811
+ <input
1812
+ class="pf-c-search-input__text-input"
1813
+ type="text"
1814
+ placeholder="Filter by name"
1815
+ aria-label="Filter by name"
1816
+ />
1817
+ </span>
1818
+ </div>
1819
+ </div>
1724
1820
  </div>
1725
1821
  </div>
1726
1822
  <div class="pf-c-toolbar__group pf-m-filter-group">
@@ -3716,58 +3812,82 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3716
3812
  </div>
3717
3813
  <div class="pf-c-toolbar__item pf-m-search-filter">
3718
3814
  <div class="pf-c-input-group" aria-label="search filter" role="group">
3719
- <div class="pf-c-dropdown">
3815
+ <div class="pf-c-select" style="width: 175px">
3816
+ <span
3817
+ id="toolbar-expanded-elements-example-select-name-label"
3818
+ hidden
3819
+ >Choose one</span>
3820
+
3720
3821
  <button
3721
- class="pf-c-dropdown__toggle"
3722
- id="toolbar-expanded-elements-example-content-button"
3723
- aria-expanded="false"
3822
+ class="pf-c-select__toggle"
3724
3823
  type="button"
3824
+ id="toolbar-expanded-elements-example-select-name-toggle"
3825
+ aria-haspopup="true"
3826
+ aria-expanded="false"
3827
+ aria-labelledby="toolbar-expanded-elements-example-select-name-label toolbar-expanded-elements-example-select-name-toggle"
3725
3828
  >
3726
- <span class="pf-c-dropdown__toggle-text">Name</span>
3727
- <span class="pf-c-dropdown__toggle-icon">
3829
+ <div class="pf-c-select__toggle-wrapper">
3830
+ <span class="pf-c-select__toggle-icon">
3831
+ <i class="fas fa-filter" aria-hidden="true"></i>
3832
+ </span>
3833
+ <span class="pf-c-select__toggle-text">Name</span>
3834
+ </div>
3835
+ <span class="pf-c-select__toggle-arrow">
3728
3836
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3729
3837
  </span>
3730
3838
  </button>
3839
+
3731
3840
  <ul
3732
- class="pf-c-dropdown__menu"
3733
- aria-labelledby="toolbar-expanded-elements-example-content-button"
3841
+ class="pf-c-select__menu"
3842
+ role="listbox"
3843
+ aria-labelledby="toolbar-expanded-elements-example-select-name-label"
3734
3844
  hidden
3845
+ style="width: 175px"
3735
3846
  >
3736
- <li>
3737
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
3847
+ <li role="presentation">
3848
+ <button class="pf-c-select__menu-item" role="option">Running</button>
3738
3849
  </li>
3739
- <li>
3740
- <button class="pf-c-dropdown__menu-item" type="button">Action</button>
3850
+ <li role="presentation">
3851
+ <button
3852
+ class="pf-c-select__menu-item pf-m-selected"
3853
+ role="option"
3854
+ aria-selected="true"
3855
+ >
3856
+ Stopped
3857
+ <span class="pf-c-select__menu-item-icon">
3858
+ <i class="fas fa-check" aria-hidden="true"></i>
3859
+ </span>
3860
+ </button>
3741
3861
  </li>
3742
- <li>
3743
- <a
3744
- class="pf-c-dropdown__menu-item pf-m-disabled"
3745
- href="#"
3746
- aria-disabled="true"
3747
- tabindex="-1"
3748
- >Disabled link</a>
3862
+ <li role="presentation">
3863
+ <button class="pf-c-select__menu-item" role="option">Down</button>
3749
3864
  </li>
3750
- <li>
3751
- <button
3752
- class="pf-c-dropdown__menu-item"
3753
- type="button"
3754
- disabled
3755
- >Disabled action</button>
3865
+ <li role="presentation">
3866
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
3756
3867
  </li>
3757
- <li class="pf-c-divider" role="separator"></li>
3758
- <li>
3759
- <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
3868
+ <li role="presentation">
3869
+ <button
3870
+ class="pf-c-select__menu-item"
3871
+ role="option"
3872
+ >Needs maintenance</button>
3760
3873
  </li>
3761
3874
  </ul>
3762
3875
  </div>
3763
- <input
3764
- class="pf-c-form-control"
3765
- type="search"
3766
- id="toolbar-expanded-elements-example-content-search-filter-input"
3767
- name="toolbar-expanded-elements-example-search-filter-input"
3768
- aria-label="input with dropdown and button"
3769
- aria-describedby="toolbar-expanded-elements-example-content-button"
3770
- />
3876
+ <div class="pf-c-search-input">
3877
+ <div class="pf-c-search-input__bar">
3878
+ <span class="pf-c-search-input__text">
3879
+ <span class="pf-c-search-input__icon">
3880
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
3881
+ </span>
3882
+ <input
3883
+ class="pf-c-search-input__text-input"
3884
+ type="text"
3885
+ placeholder="Filter by name"
3886
+ aria-label="Filter by name"
3887
+ />
3888
+ </span>
3889
+ </div>
3890
+ </div>
3771
3891
  </div>
3772
3892
  </div>
3773
3893
  <div class="pf-c-toolbar__group pf-m-filter-group">
package/docs/components/TreeView/examples/TreeView.md CHANGED
@@ -273,13 +273,21 @@ beta: true
273
273
  ```html
274
274
  <div class="pf-c-tree-view">
275
275
  <div class="pf-c-tree-view__search">
276
- <input
277
- class="pf-c-form-control pf-m-search"
278
- type="search"
279
- id="input-search"
280
- name="search-input"
281
- aria-label="Search input example"
282
- />
276
+ <div class="pf-c-search-input">
277
+ <div class="pf-c-search-input__bar">
278
+ <span class="pf-c-search-input__text">
279
+ <span class="pf-c-search-input__icon">
280
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
281
+ </span>
282
+ <input
283
+ class="pf-c-search-input__text-input"
284
+ type="text"
285
+ placeholder="Search"
286
+ aria-label="Search"
287
+ />
288
+ </span>
289
+ </div>
290
+ </div>
283
291
  </div>
284
292
  <hr class="pf-c-divider" />
285
293
  <ul class="pf-c-tree-view__list" role="tree">