@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/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>
@@ -1395,7 +1366,7 @@ wrapperTag: div
1395
1366
  <button
1396
1367
  class="pf-c-app-launcher__toggle"
1397
1368
  type="button"
1398
- id="-button"
1369
+ id="masthead-advanced-with-menu-example-masthead-icon-group--app-launcher-button"
1399
1370
  aria-expanded="false"
1400
1371
  aria-label="Application launcher"
1401
1372
  >
@@ -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>
@@ -1895,13 +1876,24 @@ wrapperTag: div
1895
1876
  </div>
1896
1877
  <div class="pf-c-menu__search">
1897
1878
  <div class="pf-c-menu__search-input">
1898
- <input
1899
- class="pf-c-form-control pf-m-search"
1900
- type="search"
1901
- id="masthead-advanced-with-menu-example-masthead-drilldown-menu-list-3-search-input"
1902
- name="masthead-advanced-with-menu-example-masthead-drilldown-menu-list-3-search-input"
1903
- aria-label="Search"
1904
- />
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>
1905
1897
  </div>
1906
1898
  </div>
1907
1899
  <hr class="pf-c-divider" />
@@ -2191,55 +2183,35 @@ wrapperTag: div
2191
2183
  <section class="pf-c-page__main-section pf-m-limit-width">
2192
2184
  <div class="pf-c-page__main-body">
2193
2185
  <div class="pf-l-gallery pf-m-gutter">
2194
- <div class="pf-l-gallery__item">
2195
- <div class="pf-c-card">
2196
- <div class="pf-c-card__body">This is a card</div>
2197
- </div>
2186
+ <div class="pf-c-card">
2187
+ <div class="pf-c-card__body">This is a card</div>
2198
2188
  </div>
2199
- <div class="pf-l-gallery__item">
2200
- <div class="pf-c-card">
2201
- <div class="pf-c-card__body">This is a card</div>
2202
- </div>
2189
+ <div class="pf-c-card">
2190
+ <div class="pf-c-card__body">This is a card</div>
2203
2191
  </div>
2204
- <div class="pf-l-gallery__item">
2205
- <div class="pf-c-card">
2206
- <div class="pf-c-card__body">This is a card</div>
2207
- </div>
2192
+ <div class="pf-c-card">
2193
+ <div class="pf-c-card__body">This is a card</div>
2208
2194
  </div>
2209
- <div class="pf-l-gallery__item">
2210
- <div class="pf-c-card">
2211
- <div class="pf-c-card__body">This is a card</div>
2212
- </div>
2195
+ <div class="pf-c-card">
2196
+ <div class="pf-c-card__body">This is a card</div>
2213
2197
  </div>
2214
- <div class="pf-l-gallery__item">
2215
- <div class="pf-c-card">
2216
- <div class="pf-c-card__body">This is a card</div>
2217
- </div>
2198
+ <div class="pf-c-card">
2199
+ <div class="pf-c-card__body">This is a card</div>
2218
2200
  </div>
2219
- <div class="pf-l-gallery__item">
2220
- <div class="pf-c-card">
2221
- <div class="pf-c-card__body">This is a card</div>
2222
- </div>
2201
+ <div class="pf-c-card">
2202
+ <div class="pf-c-card__body">This is a card</div>
2223
2203
  </div>
2224
- <div class="pf-l-gallery__item">
2225
- <div class="pf-c-card">
2226
- <div class="pf-c-card__body">This is a card</div>
2227
- </div>
2204
+ <div class="pf-c-card">
2205
+ <div class="pf-c-card__body">This is a card</div>
2228
2206
  </div>
2229
- <div class="pf-l-gallery__item">
2230
- <div class="pf-c-card">
2231
- <div class="pf-c-card__body">This is a card</div>
2232
- </div>
2207
+ <div class="pf-c-card">
2208
+ <div class="pf-c-card__body">This is a card</div>
2233
2209
  </div>
2234
- <div class="pf-l-gallery__item">
2235
- <div class="pf-c-card">
2236
- <div class="pf-c-card__body">This is a card</div>
2237
- </div>
2210
+ <div class="pf-c-card">
2211
+ <div class="pf-c-card__body">This is a card</div>
2238
2212
  </div>
2239
- <div class="pf-l-gallery__item">
2240
- <div class="pf-c-card">
2241
- <div class="pf-c-card__body">This is a card</div>
2242
- </div>
2213
+ <div class="pf-c-card">
2214
+ <div class="pf-c-card__body">This is a card</div>
2243
2215
  </div>
2244
2216
  </div>
2245
2217
  </div>
@@ -2355,7 +2327,7 @@ wrapperTag: div
2355
2327
  <button
2356
2328
  class="pf-c-app-launcher__toggle"
2357
2329
  type="button"
2358
- id="-button"
2330
+ id="masthead-horizontal-nav-masthead-icon-group--app-launcher-button"
2359
2331
  aria-expanded="false"
2360
2332
  aria-label="Application launcher"
2361
2333
  >
@@ -2366,14 +2338,24 @@ wrapperTag: div
2366
2338
  hidden
2367
2339
  >
2368
2340
  <div class="pf-c-app-launcher__menu-search">
2369
- <input
2370
- class="pf-c-form-control"
2371
- type="search"
2372
- aria-label="Type to filter"
2373
- placeholder="Filter by name..."
2374
- id="masthead-horizontal-nav-masthead-application-launcher-text-input"
2375
- name="textInput1"
2376
- />
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>
2377
2359
  </div>
2378
2360
  <section class="pf-c-app-launcher__group">
2379
2361
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -2855,13 +2837,24 @@ wrapperTag: div
2855
2837
  </div>
2856
2838
  <div class="pf-c-menu__search">
2857
2839
  <div class="pf-c-menu__search-input">
2858
- <input
2859
- class="pf-c-form-control pf-m-search"
2860
- type="search"
2861
- id="masthead-horizontal-nav-masthead-drilldown-menu-list-3-search-input"
2862
- name="masthead-horizontal-nav-masthead-drilldown-menu-list-3-search-input"
2863
- aria-label="Search"
2864
- />
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>
2865
2858
  </div>
2866
2859
  </div>
2867
2860
  <hr class="pf-c-divider" />
@@ -3120,55 +3113,35 @@ wrapperTag: div
3120
3113
  <section class="pf-c-page__main-section pf-m-limit-width">
3121
3114
  <div class="pf-c-page__main-body">
3122
3115
  <div class="pf-l-gallery pf-m-gutter">
3123
- <div class="pf-l-gallery__item">
3124
- <div class="pf-c-card">
3125
- <div class="pf-c-card__body">This is a card</div>
3126
- </div>
3116
+ <div class="pf-c-card">
3117
+ <div class="pf-c-card__body">This is a card</div>
3127
3118
  </div>
3128
- <div class="pf-l-gallery__item">
3129
- <div class="pf-c-card">
3130
- <div class="pf-c-card__body">This is a card</div>
3131
- </div>
3119
+ <div class="pf-c-card">
3120
+ <div class="pf-c-card__body">This is a card</div>
3132
3121
  </div>
3133
- <div class="pf-l-gallery__item">
3134
- <div class="pf-c-card">
3135
- <div class="pf-c-card__body">This is a card</div>
3136
- </div>
3122
+ <div class="pf-c-card">
3123
+ <div class="pf-c-card__body">This is a card</div>
3137
3124
  </div>
3138
- <div class="pf-l-gallery__item">
3139
- <div class="pf-c-card">
3140
- <div class="pf-c-card__body">This is a card</div>
3141
- </div>
3125
+ <div class="pf-c-card">
3126
+ <div class="pf-c-card__body">This is a card</div>
3142
3127
  </div>
3143
- <div class="pf-l-gallery__item">
3144
- <div class="pf-c-card">
3145
- <div class="pf-c-card__body">This is a card</div>
3146
- </div>
3128
+ <div class="pf-c-card">
3129
+ <div class="pf-c-card__body">This is a card</div>
3147
3130
  </div>
3148
- <div class="pf-l-gallery__item">
3149
- <div class="pf-c-card">
3150
- <div class="pf-c-card__body">This is a card</div>
3151
- </div>
3131
+ <div class="pf-c-card">
3132
+ <div class="pf-c-card__body">This is a card</div>
3152
3133
  </div>
3153
- <div class="pf-l-gallery__item">
3154
- <div class="pf-c-card">
3155
- <div class="pf-c-card__body">This is a card</div>
3156
- </div>
3134
+ <div class="pf-c-card">
3135
+ <div class="pf-c-card__body">This is a card</div>
3157
3136
  </div>
3158
- <div class="pf-l-gallery__item">
3159
- <div class="pf-c-card">
3160
- <div class="pf-c-card__body">This is a card</div>
3161
- </div>
3137
+ <div class="pf-c-card">
3138
+ <div class="pf-c-card__body">This is a card</div>
3162
3139
  </div>
3163
- <div class="pf-l-gallery__item">
3164
- <div class="pf-c-card">
3165
- <div class="pf-c-card__body">This is a card</div>
3166
- </div>
3140
+ <div class="pf-c-card">
3141
+ <div class="pf-c-card__body">This is a card</div>
3167
3142
  </div>
3168
- <div class="pf-l-gallery__item">
3169
- <div class="pf-c-card">
3170
- <div class="pf-c-card__body">This is a card</div>
3171
- </div>
3143
+ <div class="pf-c-card">
3144
+ <div class="pf-c-card__body">This is a card</div>
3172
3145
  </div>
3173
3146
  </div>
3174
3147
  </div>
@@ -3303,64 +3276,88 @@ wrapperTag: div
3303
3276
  aria-label="search filter"
3304
3277
  role="group"
3305
3278
  >
3306
- <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
+
3307
3285
  <button
3308
- class="pf-c-dropdown__toggle"
3309
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-masthead-toggle-group-filters-expanded-mobile-example-masthead-expandable-content-button"
3310
- aria-expanded="false"
3286
+ class="pf-c-select__toggle"
3311
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"
3312
3292
  >
3313
- <span class="pf-c-dropdown__toggle-text">Name</span>
3314
- <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">
3315
3300
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3316
3301
  </span>
3317
3302
  </button>
3303
+
3318
3304
  <ul
3319
- class="pf-c-dropdown__menu"
3320
- 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"
3321
3308
  hidden
3309
+ style="width: 175px"
3322
3310
  >
3323
- <li>
3324
- <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>
3325
3316
  </li>
3326
- <li>
3317
+ <li role="presentation">
3327
3318
  <button
3328
- class="pf-c-dropdown__menu-item"
3329
- type="button"
3330
- >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>
3331
3328
  </li>
3332
- <li>
3333
- <a
3334
- class="pf-c-dropdown__menu-item pf-m-disabled"
3335
- href="#"
3336
- aria-disabled="true"
3337
- tabindex="-1"
3338
- >Disabled link</a>
3329
+ <li role="presentation">
3330
+ <button class="pf-c-select__menu-item" role="option">Down</button>
3339
3331
  </li>
3340
- <li>
3332
+ <li role="presentation">
3341
3333
  <button
3342
- class="pf-c-dropdown__menu-item"
3343
- type="button"
3344
- disabled
3345
- >Disabled action</button>
3334
+ class="pf-c-select__menu-item"
3335
+ role="option"
3336
+ >Degraded</button>
3346
3337
  </li>
3347
- <li class="pf-c-divider" role="separator"></li>
3348
- <li>
3349
- <a
3350
- class="pf-c-dropdown__menu-item"
3351
- href="#"
3352
- >Separated link</a>
3338
+ <li role="presentation">
3339
+ <button
3340
+ class="pf-c-select__menu-item"
3341
+ role="option"
3342
+ >Needs maintenance</button>
3353
3343
  </li>
3354
3344
  </ul>
3355
3345
  </div>
3356
- <input
3357
- class="pf-c-form-control"
3358
- type="search"
3359
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-masthead-toggle-group-filters-expanded-mobile-example-masthead-expandable-content-search-filter-input"
3360
- name="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-search-filter-input"
3361
- aria-label="input with dropdown and button"
3362
- aria-describedby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-masthead-toggle-group-filters-expanded-mobile-example-masthead-expandable-content-button"
3363
- />
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>
3364
3361
  </div>
3365
3362
  </div>
3366
3363
  </div>
@@ -3451,55 +3448,35 @@ wrapperTag: div
3451
3448
  <section class="pf-c-page__main-section pf-m-limit-width">
3452
3449
  <div class="pf-c-page__main-body">
3453
3450
  <div class="pf-l-gallery pf-m-gutter">
3454
- <div class="pf-l-gallery__item">
3455
- <div class="pf-c-card">
3456
- <div class="pf-c-card__body">This is a card</div>
3457
- </div>
3451
+ <div class="pf-c-card">
3452
+ <div class="pf-c-card__body">This is a card</div>
3458
3453
  </div>
3459
- <div class="pf-l-gallery__item">
3460
- <div class="pf-c-card">
3461
- <div class="pf-c-card__body">This is a card</div>
3462
- </div>
3454
+ <div class="pf-c-card">
3455
+ <div class="pf-c-card__body">This is a card</div>
3463
3456
  </div>
3464
- <div class="pf-l-gallery__item">
3465
- <div class="pf-c-card">
3466
- <div class="pf-c-card__body">This is a card</div>
3467
- </div>
3457
+ <div class="pf-c-card">
3458
+ <div class="pf-c-card__body">This is a card</div>
3468
3459
  </div>
3469
- <div class="pf-l-gallery__item">
3470
- <div class="pf-c-card">
3471
- <div class="pf-c-card__body">This is a card</div>
3472
- </div>
3460
+ <div class="pf-c-card">
3461
+ <div class="pf-c-card__body">This is a card</div>
3473
3462
  </div>
3474
- <div class="pf-l-gallery__item">
3475
- <div class="pf-c-card">
3476
- <div class="pf-c-card__body">This is a card</div>
3477
- </div>
3463
+ <div class="pf-c-card">
3464
+ <div class="pf-c-card__body">This is a card</div>
3478
3465
  </div>
3479
- <div class="pf-l-gallery__item">
3480
- <div class="pf-c-card">
3481
- <div class="pf-c-card__body">This is a card</div>
3482
- </div>
3466
+ <div class="pf-c-card">
3467
+ <div class="pf-c-card__body">This is a card</div>
3483
3468
  </div>
3484
- <div class="pf-l-gallery__item">
3485
- <div class="pf-c-card">
3486
- <div class="pf-c-card__body">This is a card</div>
3487
- </div>
3469
+ <div class="pf-c-card">
3470
+ <div class="pf-c-card__body">This is a card</div>
3488
3471
  </div>
3489
- <div class="pf-l-gallery__item">
3490
- <div class="pf-c-card">
3491
- <div class="pf-c-card__body">This is a card</div>
3492
- </div>
3472
+ <div class="pf-c-card">
3473
+ <div class="pf-c-card__body">This is a card</div>
3493
3474
  </div>
3494
- <div class="pf-l-gallery__item">
3495
- <div class="pf-c-card">
3496
- <div class="pf-c-card__body">This is a card</div>
3497
- </div>
3475
+ <div class="pf-c-card">
3476
+ <div class="pf-c-card__body">This is a card</div>
3498
3477
  </div>
3499
- <div class="pf-l-gallery__item">
3500
- <div class="pf-c-card">
3501
- <div class="pf-c-card__body">This is a card</div>
3502
- </div>
3478
+ <div class="pf-c-card">
3479
+ <div class="pf-c-card__body">This is a card</div>
3503
3480
  </div>
3504
3481
  </div>
3505
3482
  </div>