@patternfly/patternfly 4.179.2 → 4.180.1

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/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 +10 -7
  5. package/components/MenuToggle/menu-toggle.scss +11 -9
  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/LogViewer/examples/LogViewer.md +567 -198
  16. package/docs/components/Menu/examples/Menu.md +1908 -983
  17. package/docs/components/MenuToggle/examples/MenuToggle.md +77 -44
  18. package/docs/components/Nav/examples/Navigation.md +563 -231
  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 +595 -378
  28. package/docs/demos/DataList/examples/DataList.md +159 -114
  29. package/docs/demos/Drawer/examples/Drawer.md +60 -120
  30. package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -31
  31. package/docs/demos/Masthead/examples/Masthead.md +622 -517
  32. package/docs/demos/Nav/examples/Nav.md +203 -343
  33. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +100 -200
  34. package/docs/demos/Page/examples/Page.md +1522 -1475
  35. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +3 -3
  36. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +207 -126
  37. package/docs/demos/Table/examples/Table.md +2459 -1090
  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 +18 -11
  43. package/patternfly.css +18 -11
  44. package/patternfly.min.css +1 -1
  45. package/patternfly.min.css.map +1 -1
package/docs/demos/Masthead/examples/Masthead.md CHANGED
@@ -189,55 +189,35 @@ wrapperTag: div
189
189
  <section class="pf-c-page__main-section pf-m-limit-width">
190
190
  <div class="pf-c-page__main-body">
191
191
  <div class="pf-l-gallery pf-m-gutter">
192
- <div class="pf-l-gallery__item">
193
- <div class="pf-c-card">
194
- <div class="pf-c-card__body">This is a card</div>
195
- </div>
192
+ <div class="pf-c-card">
193
+ <div class="pf-c-card__body">This is a card</div>
196
194
  </div>
197
- <div class="pf-l-gallery__item">
198
- <div class="pf-c-card">
199
- <div class="pf-c-card__body">This is a card</div>
200
- </div>
195
+ <div class="pf-c-card">
196
+ <div class="pf-c-card__body">This is a card</div>
201
197
  </div>
202
- <div class="pf-l-gallery__item">
203
- <div class="pf-c-card">
204
- <div class="pf-c-card__body">This is a card</div>
205
- </div>
198
+ <div class="pf-c-card">
199
+ <div class="pf-c-card__body">This is a card</div>
206
200
  </div>
207
- <div class="pf-l-gallery__item">
208
- <div class="pf-c-card">
209
- <div class="pf-c-card__body">This is a card</div>
210
- </div>
201
+ <div class="pf-c-card">
202
+ <div class="pf-c-card__body">This is a card</div>
211
203
  </div>
212
- <div class="pf-l-gallery__item">
213
- <div class="pf-c-card">
214
- <div class="pf-c-card__body">This is a card</div>
215
- </div>
204
+ <div class="pf-c-card">
205
+ <div class="pf-c-card__body">This is a card</div>
216
206
  </div>
217
- <div class="pf-l-gallery__item">
218
- <div class="pf-c-card">
219
- <div class="pf-c-card__body">This is a card</div>
220
- </div>
207
+ <div class="pf-c-card">
208
+ <div class="pf-c-card__body">This is a card</div>
221
209
  </div>
222
- <div class="pf-l-gallery__item">
223
- <div class="pf-c-card">
224
- <div class="pf-c-card__body">This is a card</div>
225
- </div>
210
+ <div class="pf-c-card">
211
+ <div class="pf-c-card__body">This is a card</div>
226
212
  </div>
227
- <div class="pf-l-gallery__item">
228
- <div class="pf-c-card">
229
- <div class="pf-c-card__body">This is a card</div>
230
- </div>
213
+ <div class="pf-c-card">
214
+ <div class="pf-c-card__body">This is a card</div>
231
215
  </div>
232
- <div class="pf-l-gallery__item">
233
- <div class="pf-c-card">
234
- <div class="pf-c-card__body">This is a card</div>
235
- </div>
216
+ <div class="pf-c-card">
217
+ <div class="pf-c-card__body">This is a card</div>
236
218
  </div>
237
- <div class="pf-l-gallery__item">
238
- <div class="pf-c-card">
239
- <div class="pf-c-card__body">This is a card</div>
240
- </div>
219
+ <div class="pf-c-card">
220
+ <div class="pf-c-card__body">This is a card</div>
241
221
  </div>
242
222
  </div>
243
223
  </div>
@@ -316,23 +296,20 @@ wrapperTag: div
316
296
  </button>
317
297
  <div class="pf-c-context-selector__menu" hidden>
318
298
  <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>
299
+ <div class="pf-c-search-input">
300
+ <div class="pf-c-search-input__bar">
301
+ <span class="pf-c-search-input__text">
302
+ <span class="pf-c-search-input__icon">
303
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
304
+ </span>
305
+ <input
306
+ class="pf-c-search-input__text-input"
307
+ type="text"
308
+ placeholder="Search"
309
+ aria-label="Search"
310
+ />
311
+ </span>
312
+ </div>
336
313
  </div>
337
314
  </div>
338
315
  <ul class="pf-c-context-selector__menu-list">
@@ -615,55 +592,35 @@ wrapperTag: div
615
592
  <section class="pf-c-page__main-section pf-m-limit-width">
616
593
  <div class="pf-c-page__main-body">
617
594
  <div class="pf-l-gallery pf-m-gutter">
618
- <div class="pf-l-gallery__item">
619
- <div class="pf-c-card">
620
- <div class="pf-c-card__body">This is a card</div>
621
- </div>
595
+ <div class="pf-c-card">
596
+ <div class="pf-c-card__body">This is a card</div>
622
597
  </div>
623
- <div class="pf-l-gallery__item">
624
- <div class="pf-c-card">
625
- <div class="pf-c-card__body">This is a card</div>
626
- </div>
598
+ <div class="pf-c-card">
599
+ <div class="pf-c-card__body">This is a card</div>
627
600
  </div>
628
- <div class="pf-l-gallery__item">
629
- <div class="pf-c-card">
630
- <div class="pf-c-card__body">This is a card</div>
631
- </div>
601
+ <div class="pf-c-card">
602
+ <div class="pf-c-card__body">This is a card</div>
632
603
  </div>
633
- <div class="pf-l-gallery__item">
634
- <div class="pf-c-card">
635
- <div class="pf-c-card__body">This is a card</div>
636
- </div>
604
+ <div class="pf-c-card">
605
+ <div class="pf-c-card__body">This is a card</div>
637
606
  </div>
638
- <div class="pf-l-gallery__item">
639
- <div class="pf-c-card">
640
- <div class="pf-c-card__body">This is a card</div>
641
- </div>
607
+ <div class="pf-c-card">
608
+ <div class="pf-c-card__body">This is a card</div>
642
609
  </div>
643
- <div class="pf-l-gallery__item">
644
- <div class="pf-c-card">
645
- <div class="pf-c-card__body">This is a card</div>
646
- </div>
610
+ <div class="pf-c-card">
611
+ <div class="pf-c-card__body">This is a card</div>
647
612
  </div>
648
- <div class="pf-l-gallery__item">
649
- <div class="pf-c-card">
650
- <div class="pf-c-card__body">This is a card</div>
651
- </div>
613
+ <div class="pf-c-card">
614
+ <div class="pf-c-card__body">This is a card</div>
652
615
  </div>
653
- <div class="pf-l-gallery__item">
654
- <div class="pf-c-card">
655
- <div class="pf-c-card__body">This is a card</div>
656
- </div>
616
+ <div class="pf-c-card">
617
+ <div class="pf-c-card__body">This is a card</div>
657
618
  </div>
658
- <div class="pf-l-gallery__item">
659
- <div class="pf-c-card">
660
- <div class="pf-c-card__body">This is a card</div>
661
- </div>
619
+ <div class="pf-c-card">
620
+ <div class="pf-c-card__body">This is a card</div>
662
621
  </div>
663
- <div class="pf-l-gallery__item">
664
- <div class="pf-c-card">
665
- <div class="pf-c-card__body">This is a card</div>
666
- </div>
622
+ <div class="pf-c-card">
623
+ <div class="pf-c-card__body">This is a card</div>
667
624
  </div>
668
625
  </div>
669
626
  </div>
@@ -737,64 +694,91 @@ wrapperTag: div
737
694
  aria-label="search filter"
738
695
  role="group"
739
696
  >
740
- <div class="pf-c-dropdown">
697
+ <div class="pf-c-select" style="width: 175px">
698
+ <span
699
+ id="masthead-toolbar-filters-example-masthead-toolbar-select-name-label"
700
+ hidden
701
+ >Choose one</span>
702
+
741
703
  <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"
704
+ class="pf-c-select__toggle"
745
705
  type="button"
706
+ id="masthead-toolbar-filters-example-masthead-toolbar-select-name-toggle"
707
+ aria-haspopup="true"
708
+ aria-expanded="false"
709
+ aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-select-name-label masthead-toolbar-filters-example-masthead-toolbar-select-name-toggle"
746
710
  >
747
- <span class="pf-c-dropdown__toggle-text">Name</span>
748
- <span class="pf-c-dropdown__toggle-icon">
711
+ <div class="pf-c-select__toggle-wrapper">
712
+ <span class="pf-c-select__toggle-icon">
713
+ <i class="fas fa-filter" aria-hidden="true"></i>
714
+ </span>
715
+ <span class="pf-c-select__toggle-text">Name</span>
716
+ </div>
717
+ <span class="pf-c-select__toggle-arrow">
749
718
  <i class="fas fa-caret-down" aria-hidden="true"></i>
750
719
  </span>
751
720
  </button>
721
+
752
722
  <ul
753
- class="pf-c-dropdown__menu"
754
- aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-masthead-toolbar-filters-example-masthead-content-button"
723
+ class="pf-c-select__menu"
724
+ role="listbox"
725
+ aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-select-name-label"
755
726
  hidden
727
+ style="width: 175px"
756
728
  >
757
- <li>
758
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
729
+ <li role="presentation">
730
+ <button
731
+ class="pf-c-select__menu-item"
732
+ role="option"
733
+ >Running</button>
759
734
  </li>
760
- <li>
735
+ <li role="presentation">
761
736
  <button
762
- class="pf-c-dropdown__menu-item"
763
- type="button"
764
- >Action</button>
737
+ class="pf-c-select__menu-item pf-m-selected"
738
+ role="option"
739
+ aria-selected="true"
740
+ >
741
+ Stopped
742
+ <span class="pf-c-select__menu-item-icon">
743
+ <i class="fas fa-check" aria-hidden="true"></i>
744
+ </span>
745
+ </button>
765
746
  </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>
747
+ <li role="presentation">
748
+ <button
749
+ class="pf-c-select__menu-item"
750
+ role="option"
751
+ >Down</button>
773
752
  </li>
774
- <li>
753
+ <li role="presentation">
775
754
  <button
776
- class="pf-c-dropdown__menu-item"
777
- type="button"
778
- disabled
779
- >Disabled action</button>
755
+ class="pf-c-select__menu-item"
756
+ role="option"
757
+ >Degraded</button>
780
758
  </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>
759
+ <li role="presentation">
760
+ <button
761
+ class="pf-c-select__menu-item"
762
+ role="option"
763
+ >Needs maintenance</button>
787
764
  </li>
788
765
  </ul>
789
766
  </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
- />
767
+ <div class="pf-c-search-input">
768
+ <div class="pf-c-search-input__bar">
769
+ <span class="pf-c-search-input__text">
770
+ <span class="pf-c-search-input__icon">
771
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
772
+ </span>
773
+ <input
774
+ class="pf-c-search-input__text-input"
775
+ type="text"
776
+ placeholder="Filter by name"
777
+ aria-label="Filter by name"
778
+ />
779
+ </span>
780
+ </div>
781
+ </div>
798
782
  </div>
799
783
  </div>
800
784
  </div>
@@ -938,55 +922,35 @@ wrapperTag: div
938
922
  <section class="pf-c-page__main-section pf-m-limit-width">
939
923
  <div class="pf-c-page__main-body">
940
924
  <div class="pf-l-gallery pf-m-gutter">
941
- <div class="pf-l-gallery__item">
942
- <div class="pf-c-card">
943
- <div class="pf-c-card__body">This is a card</div>
944
- </div>
925
+ <div class="pf-c-card">
926
+ <div class="pf-c-card__body">This is a card</div>
945
927
  </div>
946
- <div class="pf-l-gallery__item">
947
- <div class="pf-c-card">
948
- <div class="pf-c-card__body">This is a card</div>
949
- </div>
928
+ <div class="pf-c-card">
929
+ <div class="pf-c-card__body">This is a card</div>
950
930
  </div>
951
- <div class="pf-l-gallery__item">
952
- <div class="pf-c-card">
953
- <div class="pf-c-card__body">This is a card</div>
954
- </div>
931
+ <div class="pf-c-card">
932
+ <div class="pf-c-card__body">This is a card</div>
955
933
  </div>
956
- <div class="pf-l-gallery__item">
957
- <div class="pf-c-card">
958
- <div class="pf-c-card__body">This is a card</div>
959
- </div>
934
+ <div class="pf-c-card">
935
+ <div class="pf-c-card__body">This is a card</div>
960
936
  </div>
961
- <div class="pf-l-gallery__item">
962
- <div class="pf-c-card">
963
- <div class="pf-c-card__body">This is a card</div>
964
- </div>
937
+ <div class="pf-c-card">
938
+ <div class="pf-c-card__body">This is a card</div>
965
939
  </div>
966
- <div class="pf-l-gallery__item">
967
- <div class="pf-c-card">
968
- <div class="pf-c-card__body">This is a card</div>
969
- </div>
940
+ <div class="pf-c-card">
941
+ <div class="pf-c-card__body">This is a card</div>
970
942
  </div>
971
- <div class="pf-l-gallery__item">
972
- <div class="pf-c-card">
973
- <div class="pf-c-card__body">This is a card</div>
974
- </div>
943
+ <div class="pf-c-card">
944
+ <div class="pf-c-card__body">This is a card</div>
975
945
  </div>
976
- <div class="pf-l-gallery__item">
977
- <div class="pf-c-card">
978
- <div class="pf-c-card__body">This is a card</div>
979
- </div>
946
+ <div class="pf-c-card">
947
+ <div class="pf-c-card__body">This is a card</div>
980
948
  </div>
981
- <div class="pf-l-gallery__item">
982
- <div class="pf-c-card">
983
- <div class="pf-c-card__body">This is a card</div>
984
- </div>
949
+ <div class="pf-c-card">
950
+ <div class="pf-c-card__body">This is a card</div>
985
951
  </div>
986
- <div class="pf-l-gallery__item">
987
- <div class="pf-c-card">
988
- <div class="pf-c-card__body">This is a card</div>
989
- </div>
952
+ <div class="pf-c-card">
953
+ <div class="pf-c-card__body">This is a card</div>
990
954
  </div>
991
955
  </div>
992
956
  </div>
@@ -1063,64 +1027,91 @@ wrapperTag: div
1063
1027
  aria-label="search filter"
1064
1028
  role="group"
1065
1029
  >
1066
- <div class="pf-c-dropdown">
1030
+ <div class="pf-c-select" style="width: 175px">
1031
+ <span
1032
+ id="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label"
1033
+ hidden
1034
+ >Choose one</span>
1035
+
1067
1036
  <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"
1037
+ class="pf-c-select__toggle"
1071
1038
  type="button"
1039
+ id="masthead-toggle-group-filters-example-masthead-toolbar-select-name-toggle"
1040
+ aria-haspopup="true"
1041
+ aria-expanded="false"
1042
+ aria-labelledby="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label masthead-toggle-group-filters-example-masthead-toolbar-select-name-toggle"
1072
1043
  >
1073
- <span class="pf-c-dropdown__toggle-text">Name</span>
1074
- <span class="pf-c-dropdown__toggle-icon">
1044
+ <div class="pf-c-select__toggle-wrapper">
1045
+ <span class="pf-c-select__toggle-icon">
1046
+ <i class="fas fa-filter" aria-hidden="true"></i>
1047
+ </span>
1048
+ <span class="pf-c-select__toggle-text">Name</span>
1049
+ </div>
1050
+ <span class="pf-c-select__toggle-arrow">
1075
1051
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1076
1052
  </span>
1077
1053
  </button>
1054
+
1078
1055
  <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"
1056
+ class="pf-c-select__menu"
1057
+ role="listbox"
1058
+ aria-labelledby="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label"
1081
1059
  hidden
1060
+ style="width: 175px"
1082
1061
  >
1083
- <li>
1084
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1062
+ <li role="presentation">
1063
+ <button
1064
+ class="pf-c-select__menu-item"
1065
+ role="option"
1066
+ >Running</button>
1085
1067
  </li>
1086
- <li>
1068
+ <li role="presentation">
1087
1069
  <button
1088
- class="pf-c-dropdown__menu-item"
1089
- type="button"
1090
- >Action</button>
1070
+ class="pf-c-select__menu-item pf-m-selected"
1071
+ role="option"
1072
+ aria-selected="true"
1073
+ >
1074
+ Stopped
1075
+ <span class="pf-c-select__menu-item-icon">
1076
+ <i class="fas fa-check" aria-hidden="true"></i>
1077
+ </span>
1078
+ </button>
1091
1079
  </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>
1080
+ <li role="presentation">
1081
+ <button
1082
+ class="pf-c-select__menu-item"
1083
+ role="option"
1084
+ >Down</button>
1099
1085
  </li>
1100
- <li>
1086
+ <li role="presentation">
1101
1087
  <button
1102
- class="pf-c-dropdown__menu-item"
1103
- type="button"
1104
- disabled
1105
- >Disabled action</button>
1088
+ class="pf-c-select__menu-item"
1089
+ role="option"
1090
+ >Degraded</button>
1106
1091
  </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>
1092
+ <li role="presentation">
1093
+ <button
1094
+ class="pf-c-select__menu-item"
1095
+ role="option"
1096
+ >Needs maintenance</button>
1113
1097
  </li>
1114
1098
  </ul>
1115
1099
  </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
- />
1100
+ <div class="pf-c-search-input">
1101
+ <div class="pf-c-search-input__bar">
1102
+ <span class="pf-c-search-input__text">
1103
+ <span class="pf-c-search-input__icon">
1104
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1105
+ </span>
1106
+ <input
1107
+ class="pf-c-search-input__text-input"
1108
+ type="text"
1109
+ placeholder="Filter by name"
1110
+ aria-label="Filter by name"
1111
+ />
1112
+ </span>
1113
+ </div>
1114
+ </div>
1124
1115
  </div>
1125
1116
  </div>
1126
1117
  </div>
@@ -1264,55 +1255,35 @@ wrapperTag: div
1264
1255
  <section class="pf-c-page__main-section pf-m-limit-width">
1265
1256
  <div class="pf-c-page__main-body">
1266
1257
  <div class="pf-l-gallery pf-m-gutter">
1267
- <div class="pf-l-gallery__item">
1268
- <div class="pf-c-card">
1269
- <div class="pf-c-card__body">This is a card</div>
1270
- </div>
1258
+ <div class="pf-c-card">
1259
+ <div class="pf-c-card__body">This is a card</div>
1271
1260
  </div>
1272
- <div class="pf-l-gallery__item">
1273
- <div class="pf-c-card">
1274
- <div class="pf-c-card__body">This is a card</div>
1275
- </div>
1261
+ <div class="pf-c-card">
1262
+ <div class="pf-c-card__body">This is a card</div>
1276
1263
  </div>
1277
- <div class="pf-l-gallery__item">
1278
- <div class="pf-c-card">
1279
- <div class="pf-c-card__body">This is a card</div>
1280
- </div>
1264
+ <div class="pf-c-card">
1265
+ <div class="pf-c-card__body">This is a card</div>
1281
1266
  </div>
1282
- <div class="pf-l-gallery__item">
1283
- <div class="pf-c-card">
1284
- <div class="pf-c-card__body">This is a card</div>
1285
- </div>
1267
+ <div class="pf-c-card">
1268
+ <div class="pf-c-card__body">This is a card</div>
1286
1269
  </div>
1287
- <div class="pf-l-gallery__item">
1288
- <div class="pf-c-card">
1289
- <div class="pf-c-card__body">This is a card</div>
1290
- </div>
1270
+ <div class="pf-c-card">
1271
+ <div class="pf-c-card__body">This is a card</div>
1291
1272
  </div>
1292
- <div class="pf-l-gallery__item">
1293
- <div class="pf-c-card">
1294
- <div class="pf-c-card__body">This is a card</div>
1295
- </div>
1273
+ <div class="pf-c-card">
1274
+ <div class="pf-c-card__body">This is a card</div>
1296
1275
  </div>
1297
- <div class="pf-l-gallery__item">
1298
- <div class="pf-c-card">
1299
- <div class="pf-c-card__body">This is a card</div>
1300
- </div>
1276
+ <div class="pf-c-card">
1277
+ <div class="pf-c-card__body">This is a card</div>
1301
1278
  </div>
1302
- <div class="pf-l-gallery__item">
1303
- <div class="pf-c-card">
1304
- <div class="pf-c-card__body">This is a card</div>
1305
- </div>
1279
+ <div class="pf-c-card">
1280
+ <div class="pf-c-card__body">This is a card</div>
1306
1281
  </div>
1307
- <div class="pf-l-gallery__item">
1308
- <div class="pf-c-card">
1309
- <div class="pf-c-card__body">This is a card</div>
1310
- </div>
1282
+ <div class="pf-c-card">
1283
+ <div class="pf-c-card__body">This is a card</div>
1311
1284
  </div>
1312
- <div class="pf-l-gallery__item">
1313
- <div class="pf-c-card">
1314
- <div class="pf-c-card__body">This is a card</div>
1315
- </div>
1285
+ <div class="pf-c-card">
1286
+ <div class="pf-c-card__body">This is a card</div>
1316
1287
  </div>
1317
1288
  </div>
1318
1289
  </div>
@@ -1406,14 +1377,24 @@ wrapperTag: div
1406
1377
  hidden
1407
1378
  >
1408
1379
  <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
- />
1380
+ <div class="pf-c-search-input">
1381
+ <div class="pf-c-search-input__bar">
1382
+ <span class="pf-c-search-input__text">
1383
+ <span class="pf-c-search-input__icon">
1384
+ <i
1385
+ class="fas fa-search fa-fw"
1386
+ aria-hidden="true"
1387
+ ></i>
1388
+ </span>
1389
+ <input
1390
+ class="pf-c-search-input__text-input"
1391
+ type="text"
1392
+ placeholder="Filter by name"
1393
+ aria-label="Filter by name"
1394
+ />
1395
+ </span>
1396
+ </div>
1397
+ </div>
1417
1398
  </div>
1418
1399
  <section class="pf-c-app-launcher__group">
1419
1400
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -1603,12 +1584,16 @@ wrapperTag: div
1603
1584
  <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
1604
1585
  <div class="pf-c-menu__content">
1605
1586
  <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">
1587
+ <ul class="pf-c-menu__list" role="menu">
1588
+ <li
1589
+ class="pf-c-menu__list-item pf-m-disabled"
1590
+ role="none"
1591
+ >
1608
1592
  <button
1609
1593
  class="pf-c-menu__item"
1610
1594
  type="button"
1611
1595
  disabled
1596
+ role="menuitem"
1612
1597
  >
1613
1598
  <span class="pf-c-menu__item-description">
1614
1599
  <div class="pf-u-font-size-sm">Username:</div>
@@ -1618,11 +1603,15 @@ wrapperTag: div
1618
1603
  </span>
1619
1604
  </button>
1620
1605
  </li>
1621
- <li class="pf-c-menu__list-item pf-m-disabled">
1606
+ <li
1607
+ class="pf-c-menu__list-item pf-m-disabled"
1608
+ role="none"
1609
+ >
1622
1610
  <button
1623
1611
  class="pf-c-menu__item"
1624
1612
  type="button"
1625
1613
  disabled
1614
+ role="menuitem"
1626
1615
  >
1627
1616
  <span class="pf-c-menu__item-description">
1628
1617
  <div class="pf-u-font-size-sm">Account number:</div>
@@ -1631,15 +1620,23 @@ wrapperTag: div
1631
1620
  </button>
1632
1621
  </li>
1633
1622
  <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">
1623
+ <li class="pf-c-menu__list-item" role="none">
1624
+ <button
1625
+ class="pf-c-menu__item"
1626
+ type="button"
1627
+ role="menuitem"
1628
+ >
1636
1629
  <span class="pf-c-menu__item-main">
1637
1630
  <span class="pf-c-menu__item-text">My profile</span>
1638
1631
  </span>
1639
1632
  </button>
1640
1633
  </li>
1641
- <li class="pf-c-menu__list-item">
1642
- <button class="pf-c-menu__item" type="button">
1634
+ <li class="pf-c-menu__list-item" role="none">
1635
+ <button
1636
+ class="pf-c-menu__item"
1637
+ type="button"
1638
+ role="menuitem"
1639
+ >
1643
1640
  <span class="pf-c-menu__item-main">
1644
1641
  <span
1645
1642
  class="pf-c-menu__item-text"
@@ -1647,8 +1644,12 @@ wrapperTag: div
1647
1644
  </span>
1648
1645
  </button>
1649
1646
  </li>
1650
- <li class="pf-c-menu__list-item">
1651
- <button class="pf-c-menu__item" type="button">
1647
+ <li class="pf-c-menu__list-item" role="none">
1648
+ <button
1649
+ class="pf-c-menu__item"
1650
+ type="button"
1651
+ role="menuitem"
1652
+ >
1652
1653
  <span class="pf-c-menu__item-main">
1653
1654
  <span class="pf-c-menu__item-text">Logout</span>
1654
1655
  </span>
@@ -1658,11 +1659,12 @@ wrapperTag: div
1658
1659
  </section>
1659
1660
  <hr class="pf-c-divider pf-m-hidden-on-sm" />
1660
1661
  <section class="pf-c-menu__group">
1661
- <ul class="pf-c-menu__list">
1662
- <li class="pf-c-menu__list-item">
1662
+ <ul class="pf-c-menu__list" role="menu">
1663
+ <li class="pf-c-menu__list-item" role="none">
1663
1664
  <button
1664
1665
  class="pf-c-menu__item"
1665
1666
  type="button"
1667
+ role="menuitem"
1666
1668
  aria-expanded="false"
1667
1669
  >
1668
1670
  <span class="pf-c-menu__item-main">
@@ -1680,13 +1682,15 @@ wrapperTag: div
1680
1682
  </button>
1681
1683
  <div class="pf-c-menu" hidden>
1682
1684
  <div class="pf-c-menu__content">
1683
- <ul class="pf-c-menu__list">
1685
+ <ul class="pf-c-menu__list" role="menu">
1684
1686
  <li
1685
1687
  class="pf-c-menu__list-item pf-m-drill-up"
1688
+ role="none"
1686
1689
  >
1687
1690
  <button
1688
1691
  class="pf-c-menu__item"
1689
1692
  type="button"
1693
+ role="menuitem"
1690
1694
  >
1691
1695
  <span class="pf-c-menu__item-main">
1692
1696
  <span
@@ -1707,8 +1711,12 @@ wrapperTag: div
1707
1711
  </button>
1708
1712
  </li>
1709
1713
  <li class="pf-c-divider" role="separator"></li>
1710
- <li class="pf-c-menu__list-item">
1711
- <a class="pf-c-menu__item" href="#">
1714
+ <li class="pf-c-menu__list-item" role="none">
1715
+ <a
1716
+ class="pf-c-menu__item"
1717
+ href="#"
1718
+ role="menuitem"
1719
+ >
1712
1720
  <span class="pf-c-menu__item-main">
1713
1721
  <span
1714
1722
  class="pf-c-menu__item-text"
@@ -1716,8 +1724,12 @@ wrapperTag: div
1716
1724
  </span>
1717
1725
  </a>
1718
1726
  </li>
1719
- <li class="pf-c-menu__list-item">
1720
- <a class="pf-c-menu__item" href="#">
1727
+ <li class="pf-c-menu__list-item" role="none">
1728
+ <a
1729
+ class="pf-c-menu__item"
1730
+ href="#"
1731
+ role="menuitem"
1732
+ >
1721
1733
  <span class="pf-c-menu__item-main">
1722
1734
  <span class="pf-c-menu__item-text">About</span>
1723
1735
  </span>
@@ -1728,10 +1740,11 @@ wrapperTag: div
1728
1740
  </div>
1729
1741
  </li>
1730
1742
 
1731
- <li class="pf-c-menu__list-item">
1743
+ <li class="pf-c-menu__list-item" role="none">
1732
1744
  <button
1733
1745
  class="pf-c-menu__item"
1734
1746
  type="button"
1747
+ role="menuitem"
1735
1748
  aria-expanded="false"
1736
1749
  >
1737
1750
  <span class="pf-c-menu__item-main">
@@ -1749,13 +1762,15 @@ wrapperTag: div
1749
1762
  </button>
1750
1763
  <div class="pf-c-menu" hidden>
1751
1764
  <div class="pf-c-menu__content">
1752
- <ul class="pf-c-menu__list">
1765
+ <ul class="pf-c-menu__list" role="menu">
1753
1766
  <li
1754
1767
  class="pf-c-menu__list-item pf-m-drill-up"
1768
+ role="none"
1755
1769
  >
1756
1770
  <button
1757
1771
  class="pf-c-menu__item"
1758
1772
  type="button"
1773
+ role="menuitem"
1759
1774
  >
1760
1775
  <span class="pf-c-menu__item-main">
1761
1776
  <span
@@ -1774,8 +1789,12 @@ wrapperTag: div
1774
1789
  </button>
1775
1790
  </li>
1776
1791
  <li class="pf-c-divider" role="separator"></li>
1777
- <li class="pf-c-menu__list-item">
1778
- <a class="pf-c-menu__item" href="#">
1792
+ <li class="pf-c-menu__list-item" role="none">
1793
+ <a
1794
+ class="pf-c-menu__item"
1795
+ href="#"
1796
+ role="menuitem"
1797
+ >
1779
1798
  <span class="pf-c-menu__item-main">
1780
1799
  <span
1781
1800
  class="pf-c-menu__item-text"
@@ -1783,8 +1802,12 @@ wrapperTag: div
1783
1802
  </span>
1784
1803
  </a>
1785
1804
  </li>
1786
- <li class="pf-c-menu__list-item">
1787
- <a class="pf-c-menu__item" href="#">
1805
+ <li class="pf-c-menu__list-item" role="none">
1806
+ <a
1807
+ class="pf-c-menu__item"
1808
+ href="#"
1809
+ role="menuitem"
1810
+ >
1788
1811
  <span class="pf-c-menu__item-main">
1789
1812
  <span
1790
1813
  class="pf-c-menu__item-text"
@@ -1792,8 +1815,12 @@ wrapperTag: div
1792
1815
  </span>
1793
1816
  </a>
1794
1817
  </li>
1795
- <li class="pf-c-menu__list-item">
1796
- <a class="pf-c-menu__item" href="#">
1818
+ <li class="pf-c-menu__list-item" role="none">
1819
+ <a
1820
+ class="pf-c-menu__item"
1821
+ href="#"
1822
+ role="menuitem"
1823
+ >
1797
1824
  <span class="pf-c-menu__item-main">
1798
1825
  <span
1799
1826
  class="pf-c-menu__item-text"
@@ -1806,8 +1833,12 @@ wrapperTag: div
1806
1833
  </div>
1807
1834
  </li>
1808
1835
 
1809
- <li class="pf-c-menu__list-item">
1810
- <button class="pf-c-menu__item" type="button">
1836
+ <li class="pf-c-menu__list-item" role="none">
1837
+ <button
1838
+ class="pf-c-menu__item"
1839
+ type="button"
1840
+ role="menuitem"
1841
+ >
1811
1842
  <span class="pf-c-menu__item-main">
1812
1843
  <span class="pf-c-menu__item-icon">
1813
1844
  <i class="fas fa-fw fa-th" aria-hidden="true"></i>
@@ -1822,7 +1853,11 @@ wrapperTag: div
1822
1853
  </button>
1823
1854
  <div class="pf-c-menu" hidden>
1824
1855
  <div class="pf-c-menu__header">
1825
- <button class="pf-c-menu__item" type="button">
1856
+ <button
1857
+ class="pf-c-menu__item"
1858
+ type="button"
1859
+ role="menuitem"
1860
+ >
1826
1861
  <span class="pf-c-menu__item-main">
1827
1862
  <span class="pf-c-menu__item-toggle-icon">
1828
1863
  <i class="fas fa-angle-left"></i>
@@ -1841,21 +1876,36 @@ wrapperTag: div
1841
1876
  </div>
1842
1877
  <div class="pf-c-menu__search">
1843
1878
  <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
- />
1879
+ <div class="pf-c-search-input">
1880
+ <div class="pf-c-search-input__bar">
1881
+ <span class="pf-c-search-input__text">
1882
+ <span class="pf-c-search-input__icon">
1883
+ <i
1884
+ class="fas fa-search fa-fw"
1885
+ aria-hidden="true"
1886
+ ></i>
1887
+ </span>
1888
+ <input
1889
+ class="pf-c-search-input__text-input"
1890
+ type="text"
1891
+ placeholder="Search"
1892
+ aria-label="Search"
1893
+ />
1894
+ </span>
1895
+ </div>
1896
+ </div>
1851
1897
  </div>
1852
1898
  </div>
1853
1899
  <hr class="pf-c-divider" />
1854
1900
  <section class="pf-c-menu__group">
1855
1901
  <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="#">
1902
+ <ul class="pf-c-menu__list" role="menu">
1903
+ <li class="pf-c-menu__list-item" role="none">
1904
+ <a
1905
+ class="pf-c-menu__item"
1906
+ href="#"
1907
+ role="menuitem"
1908
+ >
1859
1909
  <span class="pf-c-menu__item-main">
1860
1910
  <span
1861
1911
  class="pf-c-menu__item-text"
@@ -1875,10 +1925,11 @@ wrapperTag: div
1875
1925
  </span>
1876
1926
  </button>
1877
1927
  </li>
1878
- <li class="pf-c-menu__list-item">
1928
+ <li class="pf-c-menu__list-item" role="none">
1879
1929
  <a
1880
1930
  class="pf-c-menu__item"
1881
1931
  href="#"
1932
+ role="menuitem"
1882
1933
  target="_blank"
1883
1934
  >
1884
1935
  <span class="pf-c-menu__item-main">
@@ -1916,9 +1967,13 @@ wrapperTag: div
1916
1967
  <hr class="pf-c-divider" />
1917
1968
  <section class="pf-c-menu__group">
1918
1969
  <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="#">
1970
+ <ul class="pf-c-menu__list" role="menu">
1971
+ <li class="pf-c-menu__list-item" role="none">
1972
+ <a
1973
+ class="pf-c-menu__item"
1974
+ href="#"
1975
+ role="menuitem"
1976
+ >
1922
1977
  <span class="pf-c-menu__item-main">
1923
1978
  <span
1924
1979
  class="pf-c-menu__item-text"
@@ -1938,10 +1993,11 @@ wrapperTag: div
1938
1993
  </span>
1939
1994
  </button>
1940
1995
  </li>
1941
- <li class="pf-c-menu__list-item">
1996
+ <li class="pf-c-menu__list-item" role="none">
1942
1997
  <a
1943
1998
  class="pf-c-menu__item"
1944
1999
  href="#"
2000
+ role="menuitem"
1945
2001
  target="_blank"
1946
2002
  >
1947
2003
  <span class="pf-c-menu__item-main">
@@ -2127,55 +2183,35 @@ wrapperTag: div
2127
2183
  <section class="pf-c-page__main-section pf-m-limit-width">
2128
2184
  <div class="pf-c-page__main-body">
2129
2185
  <div class="pf-l-gallery pf-m-gutter">
2130
- <div class="pf-l-gallery__item">
2131
- <div class="pf-c-card">
2132
- <div class="pf-c-card__body">This is a card</div>
2133
- </div>
2186
+ <div class="pf-c-card">
2187
+ <div class="pf-c-card__body">This is a card</div>
2134
2188
  </div>
2135
- <div class="pf-l-gallery__item">
2136
- <div class="pf-c-card">
2137
- <div class="pf-c-card__body">This is a card</div>
2138
- </div>
2189
+ <div class="pf-c-card">
2190
+ <div class="pf-c-card__body">This is a card</div>
2139
2191
  </div>
2140
- <div class="pf-l-gallery__item">
2141
- <div class="pf-c-card">
2142
- <div class="pf-c-card__body">This is a card</div>
2143
- </div>
2192
+ <div class="pf-c-card">
2193
+ <div class="pf-c-card__body">This is a card</div>
2144
2194
  </div>
2145
- <div class="pf-l-gallery__item">
2146
- <div class="pf-c-card">
2147
- <div class="pf-c-card__body">This is a card</div>
2148
- </div>
2195
+ <div class="pf-c-card">
2196
+ <div class="pf-c-card__body">This is a card</div>
2149
2197
  </div>
2150
- <div class="pf-l-gallery__item">
2151
- <div class="pf-c-card">
2152
- <div class="pf-c-card__body">This is a card</div>
2153
- </div>
2198
+ <div class="pf-c-card">
2199
+ <div class="pf-c-card__body">This is a card</div>
2154
2200
  </div>
2155
- <div class="pf-l-gallery__item">
2156
- <div class="pf-c-card">
2157
- <div class="pf-c-card__body">This is a card</div>
2158
- </div>
2201
+ <div class="pf-c-card">
2202
+ <div class="pf-c-card__body">This is a card</div>
2159
2203
  </div>
2160
- <div class="pf-l-gallery__item">
2161
- <div class="pf-c-card">
2162
- <div class="pf-c-card__body">This is a card</div>
2163
- </div>
2204
+ <div class="pf-c-card">
2205
+ <div class="pf-c-card__body">This is a card</div>
2164
2206
  </div>
2165
- <div class="pf-l-gallery__item">
2166
- <div class="pf-c-card">
2167
- <div class="pf-c-card__body">This is a card</div>
2168
- </div>
2207
+ <div class="pf-c-card">
2208
+ <div class="pf-c-card__body">This is a card</div>
2169
2209
  </div>
2170
- <div class="pf-l-gallery__item">
2171
- <div class="pf-c-card">
2172
- <div class="pf-c-card__body">This is a card</div>
2173
- </div>
2210
+ <div class="pf-c-card">
2211
+ <div class="pf-c-card__body">This is a card</div>
2174
2212
  </div>
2175
- <div class="pf-l-gallery__item">
2176
- <div class="pf-c-card">
2177
- <div class="pf-c-card__body">This is a card</div>
2178
- </div>
2213
+ <div class="pf-c-card">
2214
+ <div class="pf-c-card__body">This is a card</div>
2179
2215
  </div>
2180
2216
  </div>
2181
2217
  </div>
@@ -2302,14 +2338,24 @@ wrapperTag: div
2302
2338
  hidden
2303
2339
  >
2304
2340
  <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
- />
2341
+ <div class="pf-c-search-input">
2342
+ <div class="pf-c-search-input__bar">
2343
+ <span class="pf-c-search-input__text">
2344
+ <span class="pf-c-search-input__icon">
2345
+ <i
2346
+ class="fas fa-search fa-fw"
2347
+ aria-hidden="true"
2348
+ ></i>
2349
+ </span>
2350
+ <input
2351
+ class="pf-c-search-input__text-input"
2352
+ type="text"
2353
+ placeholder="Filter by name"
2354
+ aria-label="Filter by name"
2355
+ />
2356
+ </span>
2357
+ </div>
2358
+ </div>
2313
2359
  </div>
2314
2360
  <section class="pf-c-app-launcher__group">
2315
2361
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -2499,12 +2545,16 @@ wrapperTag: div
2499
2545
  <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
2500
2546
  <div class="pf-c-menu__content">
2501
2547
  <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">
2548
+ <ul class="pf-c-menu__list" role="menu">
2549
+ <li
2550
+ class="pf-c-menu__list-item pf-m-disabled"
2551
+ role="none"
2552
+ >
2504
2553
  <button
2505
2554
  class="pf-c-menu__item"
2506
2555
  type="button"
2507
2556
  disabled
2557
+ role="menuitem"
2508
2558
  >
2509
2559
  <span class="pf-c-menu__item-description">
2510
2560
  <div class="pf-u-font-size-sm">Username:</div>
@@ -2514,11 +2564,15 @@ wrapperTag: div
2514
2564
  </span>
2515
2565
  </button>
2516
2566
  </li>
2517
- <li class="pf-c-menu__list-item pf-m-disabled">
2567
+ <li
2568
+ class="pf-c-menu__list-item pf-m-disabled"
2569
+ role="none"
2570
+ >
2518
2571
  <button
2519
2572
  class="pf-c-menu__item"
2520
2573
  type="button"
2521
2574
  disabled
2575
+ role="menuitem"
2522
2576
  >
2523
2577
  <span class="pf-c-menu__item-description">
2524
2578
  <div class="pf-u-font-size-sm">Account number:</div>
@@ -2527,15 +2581,23 @@ wrapperTag: div
2527
2581
  </button>
2528
2582
  </li>
2529
2583
  <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">
2584
+ <li class="pf-c-menu__list-item" role="none">
2585
+ <button
2586
+ class="pf-c-menu__item"
2587
+ type="button"
2588
+ role="menuitem"
2589
+ >
2532
2590
  <span class="pf-c-menu__item-main">
2533
2591
  <span class="pf-c-menu__item-text">My profile</span>
2534
2592
  </span>
2535
2593
  </button>
2536
2594
  </li>
2537
- <li class="pf-c-menu__list-item">
2538
- <button class="pf-c-menu__item" type="button">
2595
+ <li class="pf-c-menu__list-item" role="none">
2596
+ <button
2597
+ class="pf-c-menu__item"
2598
+ type="button"
2599
+ role="menuitem"
2600
+ >
2539
2601
  <span class="pf-c-menu__item-main">
2540
2602
  <span
2541
2603
  class="pf-c-menu__item-text"
@@ -2543,8 +2605,12 @@ wrapperTag: div
2543
2605
  </span>
2544
2606
  </button>
2545
2607
  </li>
2546
- <li class="pf-c-menu__list-item">
2547
- <button class="pf-c-menu__item" type="button">
2608
+ <li class="pf-c-menu__list-item" role="none">
2609
+ <button
2610
+ class="pf-c-menu__item"
2611
+ type="button"
2612
+ role="menuitem"
2613
+ >
2548
2614
  <span class="pf-c-menu__item-main">
2549
2615
  <span class="pf-c-menu__item-text">Logout</span>
2550
2616
  </span>
@@ -2554,11 +2620,12 @@ wrapperTag: div
2554
2620
  </section>
2555
2621
  <hr class="pf-c-divider pf-m-hidden-on-sm" />
2556
2622
  <section class="pf-c-menu__group">
2557
- <ul class="pf-c-menu__list">
2558
- <li class="pf-c-menu__list-item">
2623
+ <ul class="pf-c-menu__list" role="menu">
2624
+ <li class="pf-c-menu__list-item" role="none">
2559
2625
  <button
2560
2626
  class="pf-c-menu__item"
2561
2627
  type="button"
2628
+ role="menuitem"
2562
2629
  aria-expanded="false"
2563
2630
  >
2564
2631
  <span class="pf-c-menu__item-main">
@@ -2576,13 +2643,15 @@ wrapperTag: div
2576
2643
  </button>
2577
2644
  <div class="pf-c-menu" hidden>
2578
2645
  <div class="pf-c-menu__content">
2579
- <ul class="pf-c-menu__list">
2646
+ <ul class="pf-c-menu__list" role="menu">
2580
2647
  <li
2581
2648
  class="pf-c-menu__list-item pf-m-drill-up"
2649
+ role="none"
2582
2650
  >
2583
2651
  <button
2584
2652
  class="pf-c-menu__item"
2585
2653
  type="button"
2654
+ role="menuitem"
2586
2655
  >
2587
2656
  <span class="pf-c-menu__item-main">
2588
2657
  <span
@@ -2603,8 +2672,12 @@ wrapperTag: div
2603
2672
  </button>
2604
2673
  </li>
2605
2674
  <li class="pf-c-divider" role="separator"></li>
2606
- <li class="pf-c-menu__list-item">
2607
- <a class="pf-c-menu__item" href="#">
2675
+ <li class="pf-c-menu__list-item" role="none">
2676
+ <a
2677
+ class="pf-c-menu__item"
2678
+ href="#"
2679
+ role="menuitem"
2680
+ >
2608
2681
  <span class="pf-c-menu__item-main">
2609
2682
  <span
2610
2683
  class="pf-c-menu__item-text"
@@ -2612,8 +2685,12 @@ wrapperTag: div
2612
2685
  </span>
2613
2686
  </a>
2614
2687
  </li>
2615
- <li class="pf-c-menu__list-item">
2616
- <a class="pf-c-menu__item" href="#">
2688
+ <li class="pf-c-menu__list-item" role="none">
2689
+ <a
2690
+ class="pf-c-menu__item"
2691
+ href="#"
2692
+ role="menuitem"
2693
+ >
2617
2694
  <span class="pf-c-menu__item-main">
2618
2695
  <span class="pf-c-menu__item-text">About</span>
2619
2696
  </span>
@@ -2624,10 +2701,11 @@ wrapperTag: div
2624
2701
  </div>
2625
2702
  </li>
2626
2703
 
2627
- <li class="pf-c-menu__list-item">
2704
+ <li class="pf-c-menu__list-item" role="none">
2628
2705
  <button
2629
2706
  class="pf-c-menu__item"
2630
2707
  type="button"
2708
+ role="menuitem"
2631
2709
  aria-expanded="false"
2632
2710
  >
2633
2711
  <span class="pf-c-menu__item-main">
@@ -2645,13 +2723,15 @@ wrapperTag: div
2645
2723
  </button>
2646
2724
  <div class="pf-c-menu" hidden>
2647
2725
  <div class="pf-c-menu__content">
2648
- <ul class="pf-c-menu__list">
2726
+ <ul class="pf-c-menu__list" role="menu">
2649
2727
  <li
2650
2728
  class="pf-c-menu__list-item pf-m-drill-up"
2729
+ role="none"
2651
2730
  >
2652
2731
  <button
2653
2732
  class="pf-c-menu__item"
2654
2733
  type="button"
2734
+ role="menuitem"
2655
2735
  >
2656
2736
  <span class="pf-c-menu__item-main">
2657
2737
  <span
@@ -2670,8 +2750,12 @@ wrapperTag: div
2670
2750
  </button>
2671
2751
  </li>
2672
2752
  <li class="pf-c-divider" role="separator"></li>
2673
- <li class="pf-c-menu__list-item">
2674
- <a class="pf-c-menu__item" href="#">
2753
+ <li class="pf-c-menu__list-item" role="none">
2754
+ <a
2755
+ class="pf-c-menu__item"
2756
+ href="#"
2757
+ role="menuitem"
2758
+ >
2675
2759
  <span class="pf-c-menu__item-main">
2676
2760
  <span
2677
2761
  class="pf-c-menu__item-text"
@@ -2679,8 +2763,12 @@ wrapperTag: div
2679
2763
  </span>
2680
2764
  </a>
2681
2765
  </li>
2682
- <li class="pf-c-menu__list-item">
2683
- <a class="pf-c-menu__item" href="#">
2766
+ <li class="pf-c-menu__list-item" role="none">
2767
+ <a
2768
+ class="pf-c-menu__item"
2769
+ href="#"
2770
+ role="menuitem"
2771
+ >
2684
2772
  <span class="pf-c-menu__item-main">
2685
2773
  <span
2686
2774
  class="pf-c-menu__item-text"
@@ -2688,8 +2776,12 @@ wrapperTag: div
2688
2776
  </span>
2689
2777
  </a>
2690
2778
  </li>
2691
- <li class="pf-c-menu__list-item">
2692
- <a class="pf-c-menu__item" href="#">
2779
+ <li class="pf-c-menu__list-item" role="none">
2780
+ <a
2781
+ class="pf-c-menu__item"
2782
+ href="#"
2783
+ role="menuitem"
2784
+ >
2693
2785
  <span class="pf-c-menu__item-main">
2694
2786
  <span
2695
2787
  class="pf-c-menu__item-text"
@@ -2702,8 +2794,12 @@ wrapperTag: div
2702
2794
  </div>
2703
2795
  </li>
2704
2796
 
2705
- <li class="pf-c-menu__list-item">
2706
- <button class="pf-c-menu__item" type="button">
2797
+ <li class="pf-c-menu__list-item" role="none">
2798
+ <button
2799
+ class="pf-c-menu__item"
2800
+ type="button"
2801
+ role="menuitem"
2802
+ >
2707
2803
  <span class="pf-c-menu__item-main">
2708
2804
  <span class="pf-c-menu__item-icon">
2709
2805
  <i class="fas fa-fw fa-th" aria-hidden="true"></i>
@@ -2718,7 +2814,11 @@ wrapperTag: div
2718
2814
  </button>
2719
2815
  <div class="pf-c-menu" hidden>
2720
2816
  <div class="pf-c-menu__header">
2721
- <button class="pf-c-menu__item" type="button">
2817
+ <button
2818
+ class="pf-c-menu__item"
2819
+ type="button"
2820
+ role="menuitem"
2821
+ >
2722
2822
  <span class="pf-c-menu__item-main">
2723
2823
  <span class="pf-c-menu__item-toggle-icon">
2724
2824
  <i class="fas fa-angle-left"></i>
@@ -2737,21 +2837,36 @@ wrapperTag: div
2737
2837
  </div>
2738
2838
  <div class="pf-c-menu__search">
2739
2839
  <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
- />
2840
+ <div class="pf-c-search-input">
2841
+ <div class="pf-c-search-input__bar">
2842
+ <span class="pf-c-search-input__text">
2843
+ <span class="pf-c-search-input__icon">
2844
+ <i
2845
+ class="fas fa-search fa-fw"
2846
+ aria-hidden="true"
2847
+ ></i>
2848
+ </span>
2849
+ <input
2850
+ class="pf-c-search-input__text-input"
2851
+ type="text"
2852
+ placeholder="Search"
2853
+ aria-label="Search"
2854
+ />
2855
+ </span>
2856
+ </div>
2857
+ </div>
2747
2858
  </div>
2748
2859
  </div>
2749
2860
  <hr class="pf-c-divider" />
2750
2861
  <section class="pf-c-menu__group">
2751
2862
  <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="#">
2863
+ <ul class="pf-c-menu__list" role="menu">
2864
+ <li class="pf-c-menu__list-item" role="none">
2865
+ <a
2866
+ class="pf-c-menu__item"
2867
+ href="#"
2868
+ role="menuitem"
2869
+ >
2755
2870
  <span class="pf-c-menu__item-main">
2756
2871
  <span
2757
2872
  class="pf-c-menu__item-text"
@@ -2771,10 +2886,11 @@ wrapperTag: div
2771
2886
  </span>
2772
2887
  </button>
2773
2888
  </li>
2774
- <li class="pf-c-menu__list-item">
2889
+ <li class="pf-c-menu__list-item" role="none">
2775
2890
  <a
2776
2891
  class="pf-c-menu__item"
2777
2892
  href="#"
2893
+ role="menuitem"
2778
2894
  target="_blank"
2779
2895
  >
2780
2896
  <span class="pf-c-menu__item-main">
@@ -2812,9 +2928,13 @@ wrapperTag: div
2812
2928
  <hr class="pf-c-divider" />
2813
2929
  <section class="pf-c-menu__group">
2814
2930
  <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="#">
2931
+ <ul class="pf-c-menu__list" role="menu">
2932
+ <li class="pf-c-menu__list-item" role="none">
2933
+ <a
2934
+ class="pf-c-menu__item"
2935
+ href="#"
2936
+ role="menuitem"
2937
+ >
2818
2938
  <span class="pf-c-menu__item-main">
2819
2939
  <span
2820
2940
  class="pf-c-menu__item-text"
@@ -2834,10 +2954,11 @@ wrapperTag: div
2834
2954
  </span>
2835
2955
  </button>
2836
2956
  </li>
2837
- <li class="pf-c-menu__list-item">
2957
+ <li class="pf-c-menu__list-item" role="none">
2838
2958
  <a
2839
2959
  class="pf-c-menu__item"
2840
2960
  href="#"
2961
+ role="menuitem"
2841
2962
  target="_blank"
2842
2963
  >
2843
2964
  <span class="pf-c-menu__item-main">
@@ -2992,55 +3113,35 @@ wrapperTag: div
2992
3113
  <section class="pf-c-page__main-section pf-m-limit-width">
2993
3114
  <div class="pf-c-page__main-body">
2994
3115
  <div class="pf-l-gallery pf-m-gutter">
2995
- <div class="pf-l-gallery__item">
2996
- <div class="pf-c-card">
2997
- <div class="pf-c-card__body">This is a card</div>
2998
- </div>
3116
+ <div class="pf-c-card">
3117
+ <div class="pf-c-card__body">This is a card</div>
2999
3118
  </div>
3000
- <div class="pf-l-gallery__item">
3001
- <div class="pf-c-card">
3002
- <div class="pf-c-card__body">This is a card</div>
3003
- </div>
3119
+ <div class="pf-c-card">
3120
+ <div class="pf-c-card__body">This is a card</div>
3004
3121
  </div>
3005
- <div class="pf-l-gallery__item">
3006
- <div class="pf-c-card">
3007
- <div class="pf-c-card__body">This is a card</div>
3008
- </div>
3122
+ <div class="pf-c-card">
3123
+ <div class="pf-c-card__body">This is a card</div>
3009
3124
  </div>
3010
- <div class="pf-l-gallery__item">
3011
- <div class="pf-c-card">
3012
- <div class="pf-c-card__body">This is a card</div>
3013
- </div>
3125
+ <div class="pf-c-card">
3126
+ <div class="pf-c-card__body">This is a card</div>
3014
3127
  </div>
3015
- <div class="pf-l-gallery__item">
3016
- <div class="pf-c-card">
3017
- <div class="pf-c-card__body">This is a card</div>
3018
- </div>
3128
+ <div class="pf-c-card">
3129
+ <div class="pf-c-card__body">This is a card</div>
3019
3130
  </div>
3020
- <div class="pf-l-gallery__item">
3021
- <div class="pf-c-card">
3022
- <div class="pf-c-card__body">This is a card</div>
3023
- </div>
3131
+ <div class="pf-c-card">
3132
+ <div class="pf-c-card__body">This is a card</div>
3024
3133
  </div>
3025
- <div class="pf-l-gallery__item">
3026
- <div class="pf-c-card">
3027
- <div class="pf-c-card__body">This is a card</div>
3028
- </div>
3134
+ <div class="pf-c-card">
3135
+ <div class="pf-c-card__body">This is a card</div>
3029
3136
  </div>
3030
- <div class="pf-l-gallery__item">
3031
- <div class="pf-c-card">
3032
- <div class="pf-c-card__body">This is a card</div>
3033
- </div>
3137
+ <div class="pf-c-card">
3138
+ <div class="pf-c-card__body">This is a card</div>
3034
3139
  </div>
3035
- <div class="pf-l-gallery__item">
3036
- <div class="pf-c-card">
3037
- <div class="pf-c-card__body">This is a card</div>
3038
- </div>
3140
+ <div class="pf-c-card">
3141
+ <div class="pf-c-card__body">This is a card</div>
3039
3142
  </div>
3040
- <div class="pf-l-gallery__item">
3041
- <div class="pf-c-card">
3042
- <div class="pf-c-card__body">This is a card</div>
3043
- </div>
3143
+ <div class="pf-c-card">
3144
+ <div class="pf-c-card__body">This is a card</div>
3044
3145
  </div>
3045
3146
  </div>
3046
3147
  </div>
@@ -3175,64 +3276,88 @@ wrapperTag: div
3175
3276
  aria-label="search filter"
3176
3277
  role="group"
3177
3278
  >
3178
- <div class="pf-c-dropdown">
3279
+ <div class="pf-c-select" style="width: 175px">
3280
+ <span
3281
+ id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label"
3282
+ hidden
3283
+ >Choose one</span>
3284
+
3179
3285
  <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"
3286
+ class="pf-c-select__toggle"
3183
3287
  type="button"
3288
+ id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-toggle"
3289
+ aria-haspopup="true"
3290
+ aria-expanded="false"
3291
+ 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
3292
  >
3185
- <span class="pf-c-dropdown__toggle-text">Name</span>
3186
- <span class="pf-c-dropdown__toggle-icon">
3293
+ <div class="pf-c-select__toggle-wrapper">
3294
+ <span class="pf-c-select__toggle-icon">
3295
+ <i class="fas fa-filter" aria-hidden="true"></i>
3296
+ </span>
3297
+ <span class="pf-c-select__toggle-text">Name</span>
3298
+ </div>
3299
+ <span class="pf-c-select__toggle-arrow">
3187
3300
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3188
3301
  </span>
3189
3302
  </button>
3303
+
3190
3304
  <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"
3305
+ class="pf-c-select__menu"
3306
+ role="listbox"
3307
+ aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label"
3193
3308
  hidden
3309
+ style="width: 175px"
3194
3310
  >
3195
- <li>
3196
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
3311
+ <li role="presentation">
3312
+ <button
3313
+ class="pf-c-select__menu-item"
3314
+ role="option"
3315
+ >Running</button>
3197
3316
  </li>
3198
- <li>
3317
+ <li role="presentation">
3199
3318
  <button
3200
- class="pf-c-dropdown__menu-item"
3201
- type="button"
3202
- >Action</button>
3319
+ class="pf-c-select__menu-item pf-m-selected"
3320
+ role="option"
3321
+ aria-selected="true"
3322
+ >
3323
+ Stopped
3324
+ <span class="pf-c-select__menu-item-icon">
3325
+ <i class="fas fa-check" aria-hidden="true"></i>
3326
+ </span>
3327
+ </button>
3203
3328
  </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>
3329
+ <li role="presentation">
3330
+ <button class="pf-c-select__menu-item" role="option">Down</button>
3211
3331
  </li>
3212
- <li>
3332
+ <li role="presentation">
3213
3333
  <button
3214
- class="pf-c-dropdown__menu-item"
3215
- type="button"
3216
- disabled
3217
- >Disabled action</button>
3334
+ class="pf-c-select__menu-item"
3335
+ role="option"
3336
+ >Degraded</button>
3218
3337
  </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>
3338
+ <li role="presentation">
3339
+ <button
3340
+ class="pf-c-select__menu-item"
3341
+ role="option"
3342
+ >Needs maintenance</button>
3225
3343
  </li>
3226
3344
  </ul>
3227
3345
  </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
- />
3346
+ <div class="pf-c-search-input">
3347
+ <div class="pf-c-search-input__bar">
3348
+ <span class="pf-c-search-input__text">
3349
+ <span class="pf-c-search-input__icon">
3350
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
3351
+ </span>
3352
+ <input
3353
+ class="pf-c-search-input__text-input"
3354
+ type="text"
3355
+ placeholder="Filter by name"
3356
+ aria-label="Filter by name"
3357
+ />
3358
+ </span>
3359
+ </div>
3360
+ </div>
3236
3361
  </div>
3237
3362
  </div>
3238
3363
  </div>
@@ -3323,55 +3448,35 @@ wrapperTag: div
3323
3448
  <section class="pf-c-page__main-section pf-m-limit-width">
3324
3449
  <div class="pf-c-page__main-body">
3325
3450
  <div class="pf-l-gallery pf-m-gutter">
3326
- <div class="pf-l-gallery__item">
3327
- <div class="pf-c-card">
3328
- <div class="pf-c-card__body">This is a card</div>
3329
- </div>
3451
+ <div class="pf-c-card">
3452
+ <div class="pf-c-card__body">This is a card</div>
3330
3453
  </div>
3331
- <div class="pf-l-gallery__item">
3332
- <div class="pf-c-card">
3333
- <div class="pf-c-card__body">This is a card</div>
3334
- </div>
3454
+ <div class="pf-c-card">
3455
+ <div class="pf-c-card__body">This is a card</div>
3335
3456
  </div>
3336
- <div class="pf-l-gallery__item">
3337
- <div class="pf-c-card">
3338
- <div class="pf-c-card__body">This is a card</div>
3339
- </div>
3457
+ <div class="pf-c-card">
3458
+ <div class="pf-c-card__body">This is a card</div>
3340
3459
  </div>
3341
- <div class="pf-l-gallery__item">
3342
- <div class="pf-c-card">
3343
- <div class="pf-c-card__body">This is a card</div>
3344
- </div>
3460
+ <div class="pf-c-card">
3461
+ <div class="pf-c-card__body">This is a card</div>
3345
3462
  </div>
3346
- <div class="pf-l-gallery__item">
3347
- <div class="pf-c-card">
3348
- <div class="pf-c-card__body">This is a card</div>
3349
- </div>
3463
+ <div class="pf-c-card">
3464
+ <div class="pf-c-card__body">This is a card</div>
3350
3465
  </div>
3351
- <div class="pf-l-gallery__item">
3352
- <div class="pf-c-card">
3353
- <div class="pf-c-card__body">This is a card</div>
3354
- </div>
3466
+ <div class="pf-c-card">
3467
+ <div class="pf-c-card__body">This is a card</div>
3355
3468
  </div>
3356
- <div class="pf-l-gallery__item">
3357
- <div class="pf-c-card">
3358
- <div class="pf-c-card__body">This is a card</div>
3359
- </div>
3469
+ <div class="pf-c-card">
3470
+ <div class="pf-c-card__body">This is a card</div>
3360
3471
  </div>
3361
- <div class="pf-l-gallery__item">
3362
- <div class="pf-c-card">
3363
- <div class="pf-c-card__body">This is a card</div>
3364
- </div>
3472
+ <div class="pf-c-card">
3473
+ <div class="pf-c-card__body">This is a card</div>
3365
3474
  </div>
3366
- <div class="pf-l-gallery__item">
3367
- <div class="pf-c-card">
3368
- <div class="pf-c-card__body">This is a card</div>
3369
- </div>
3475
+ <div class="pf-c-card">
3476
+ <div class="pf-c-card__body">This is a card</div>
3370
3477
  </div>
3371
- <div class="pf-l-gallery__item">
3372
- <div class="pf-c-card">
3373
- <div class="pf-c-card__body">This is a card</div>
3374
- </div>
3478
+ <div class="pf-c-card">
3479
+ <div class="pf-c-card__body">This is a card</div>
3375
3480
  </div>
3376
3481
  </div>
3377
3482
  </div>