@patternfly/patternfly 5.0.0-alpha.2 → 5.0.0-alpha.21

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 (224) hide show
  1. package/README.md +1 -1
  2. package/RELEASE-NOTES.md +47 -0
  3. package/assets/icons/iconUnicodes.json +1 -0
  4. package/assets/pficon/pficon.scss +6 -0
  5. package/assets/pficon/pficon.woff +0 -0
  6. package/assets/pficon/pficon.woff2 +0 -0
  7. package/base/_chart-globals.scss +0 -4
  8. package/base/_common.scss +0 -22
  9. package/base/patternfly-common.css +0 -10
  10. package/base/patternfly-icons.css +5 -1
  11. package/base/patternfly-pf-icons.css +5 -1
  12. package/components/Accordion/accordion.css +2 -0
  13. package/components/Accordion/accordion.scss +2 -0
  14. package/components/AppLauncher/app-launcher.css +2 -0
  15. package/components/AppLauncher/app-launcher.scss +2 -0
  16. package/components/Breadcrumb/breadcrumb.css +2 -0
  17. package/components/Breadcrumb/breadcrumb.scss +2 -0
  18. package/components/CalendarMonth/calendar-month.css +1 -1
  19. package/components/CalendarMonth/calendar-month.scss +1 -1
  20. package/components/Card/card.css +9 -12
  21. package/components/Card/card.scss +11 -17
  22. package/components/ChipGroup/chip-group.css +27 -17
  23. package/components/ChipGroup/chip-group.scss +36 -22
  24. package/components/Content/content.css +6 -0
  25. package/components/Content/content.scss +8 -0
  26. package/components/ContextSelector/context-selector.css +5 -1
  27. package/components/ContextSelector/context-selector.scss +6 -2
  28. package/components/DataList/data-list.css +2 -1
  29. package/components/DataList/data-list.scss +2 -1
  30. package/components/Drawer/drawer.css +13 -14
  31. package/components/Drawer/drawer.scss +0 -1
  32. package/components/Dropdown/dropdown.css +27 -10
  33. package/components/Dropdown/dropdown.scss +22 -0
  34. package/components/EmptyState/empty-state.css +46 -52
  35. package/components/EmptyState/empty-state.scss +58 -57
  36. package/components/ExpandableSection/expandable-section.css +2 -0
  37. package/components/ExpandableSection/expandable-section.scss +2 -0
  38. package/components/FormControl/form-control.css +1 -1
  39. package/components/FormControl/themes/dark/form-control.scss +1 -1
  40. package/components/InputGroup/input-group.css +14 -0
  41. package/components/InputGroup/input-group.scss +9 -0
  42. package/components/InputGroup/themes/dark/input-group.scss +8 -0
  43. package/components/Label/label.css +2 -0
  44. package/components/Label/label.scss +2 -0
  45. package/components/LabelGroup/label-group.css +26 -22
  46. package/components/LabelGroup/label-group.scss +31 -26
  47. package/components/Login/login.css +1 -1
  48. package/components/Menu/menu.css +7 -0
  49. package/components/Menu/menu.scss +8 -0
  50. package/components/MenuToggle/menu-toggle.css +2 -0
  51. package/components/MenuToggle/menu-toggle.scss +2 -0
  52. package/components/ModalBox/modal-box.css +9 -8
  53. package/components/ModalBox/modal-box.scss +11 -11
  54. package/components/Page/page.css +60 -60
  55. package/components/Pagination/pagination.css +122 -2
  56. package/components/Pagination/pagination.scss +24 -1
  57. package/components/Popover/popover.css +2 -7
  58. package/components/Popover/themes/dark/popover.scss +2 -8
  59. package/components/Progress/progress.css +5 -2
  60. package/components/Progress/progress.scss +5 -2
  61. package/components/SearchInput/search-input.css +2 -0
  62. package/components/SearchInput/search-input.scss +2 -0
  63. package/components/Slider/slider.css +0 -7
  64. package/components/Slider/slider.scss +0 -9
  65. package/components/Table/table-grid.css +28 -28
  66. package/components/Table/table-tree-view.css +4 -4
  67. package/components/Table/table.css +4 -0
  68. package/components/Table/table.scss +4 -0
  69. package/components/Tabs/tabs.css +0 -4
  70. package/components/Tabs/tabs.scss +0 -7
  71. package/components/TextInputGroup/text-input-group.css +4 -2
  72. package/components/TextInputGroup/text-input-group.scss +4 -3
  73. package/components/Toolbar/toolbar.css +65 -37
  74. package/components/Toolbar/toolbar.scss +37 -3
  75. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  76. package/components/Tooltip/tooltip.css +7 -12
  77. package/components/Tooltip/tooltip.scss +6 -3
  78. package/components/TreeView/tree-view.css +7 -15
  79. package/components/TreeView/tree-view.scss +7 -18
  80. package/components/Wizard/wizard.css +2 -0
  81. package/components/Wizard/wizard.scss +2 -0
  82. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -13
  83. package/docs/components/Accordion/examples/Accordion.md +12 -12
  84. package/docs/components/ActionList/examples/ActionList.md +6 -6
  85. package/docs/components/Alert/examples/Alert.md +19 -19
  86. package/docs/components/AlertGroup/examples/AlertGroup.md +12 -12
  87. package/docs/components/AppLauncher/examples/application-launcher.md +51 -46
  88. package/docs/components/Avatar/examples/Avatar.md +11 -11
  89. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  90. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  91. package/docs/components/BackgroundImage/examples/BackgroundImage.md +4 -4
  92. package/docs/components/Badge/examples/Badge.md +5 -5
  93. package/docs/components/Banner/examples/Banner.md +8 -8
  94. package/docs/components/Brand/examples/Brand.md +9 -9
  95. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  96. package/docs/components/Button/examples/Button.md +35 -35
  97. package/docs/components/CalendarMonth/examples/CalendarMonth.md +32 -32
  98. package/docs/components/Card/examples/Card.md +61 -44
  99. package/docs/components/Check/examples/Check.md +15 -19
  100. package/docs/components/Chip/examples/Chip.md +13 -13
  101. package/docs/components/ChipGroup/examples/ChipGroup.md +15 -344
  102. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  103. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  104. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  105. package/docs/components/Content/examples/Content.md +37 -9
  106. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  107. package/docs/components/ContextSelector/examples/context-selector.md +86 -80
  108. package/docs/components/DataList/examples/DataList.md +187 -148
  109. package/docs/components/DatePicker/examples/DatePicker.md +10 -10
  110. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  111. package/docs/components/Divider/examples/Divider.md +10 -10
  112. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  113. package/docs/components/Drawer/examples/Drawer.md +43 -43
  114. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  115. package/docs/components/Dropdown/examples/Dropdown.md +311 -71
  116. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  117. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  118. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  119. package/docs/components/FileUpload/examples/FileUpload.md +8 -8
  120. package/docs/components/Form/examples/Form.md +64 -64
  121. package/docs/components/FormControl/examples/FormControl.md +20 -20
  122. package/docs/components/HelperText/examples/HelperText.md +12 -12
  123. package/docs/components/Hint/examples/Hint.md +7 -7
  124. package/docs/components/Icon/examples/Icon.md +10 -10
  125. package/docs/components/InlineEdit/examples/InlineEdit.md +24 -24
  126. package/docs/components/InputGroup/examples/InputGroup.md +10 -9
  127. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  128. package/docs/components/Label/examples/Label.md +31 -31
  129. package/docs/components/LabelGroup/examples/LabelGroup.md +24 -36
  130. package/docs/components/List/examples/List.md +18 -18
  131. package/docs/components/LogViewer/examples/LogViewer.md +69 -69
  132. package/docs/components/Login/examples/Login.md +32 -32
  133. package/docs/components/Masthead/examples/masthead.md +9 -9
  134. package/docs/components/Menu/examples/Menu.md +82 -80
  135. package/docs/components/MenuToggle/examples/MenuToggle.md +28 -28
  136. package/docs/components/ModalBox/examples/ModalBox.md +106 -85
  137. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +25 -25
  138. package/docs/components/Nav/examples/Navigation.md +69 -69
  139. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  140. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +44 -44
  141. package/docs/components/NumberInput/examples/NumberInput.md +12 -12
  142. package/docs/components/OptionsMenu/examples/options-menu.md +27 -28
  143. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  144. package/docs/components/Page/examples/Page.md +54 -54
  145. package/docs/components/Pagination/examples/Pagination.md +129 -30
  146. package/docs/components/Panel/examples/Panel.md +10 -10
  147. package/docs/components/Popover/examples/Popover.md +34 -34
  148. package/docs/components/Progress/examples/Progress.md +31 -60
  149. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -38
  150. package/docs/components/Radio/examples/Radio.md +11 -11
  151. package/docs/components/SearchInput/examples/SearchInput.md +34 -34
  152. package/docs/components/Select/examples/Select.md +143 -143
  153. package/docs/components/Sidebar/examples/Sidebar.md +14 -14
  154. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  155. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  156. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  157. package/docs/components/Slider/examples/Slider.md +30 -30
  158. package/docs/components/Spinner/examples/Spinner.md +24 -24
  159. package/docs/components/Switch/examples/Switch.md +19 -19
  160. package/docs/components/TabContent/examples/TabContent.md +13 -13
  161. package/docs/components/Table/examples/Table.md +1272 -855
  162. package/docs/components/Tabs/examples/Tabs.md +149 -149
  163. package/docs/components/TextInputGroup/examples/TextInputGroup.md +19 -19
  164. package/docs/components/Tile/examples/Tile.md +15 -15
  165. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  166. package/docs/components/Title/examples/Title.md +17 -17
  167. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  168. package/docs/components/Toolbar/examples/Toolbar.md +165 -144
  169. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  170. package/docs/components/TreeView/examples/TreeView.md +34 -34
  171. package/docs/components/Truncate/examples/Truncate.md +4 -4
  172. package/docs/components/Wizard/examples/Wizard.md +63 -70
  173. package/docs/demos/AboutModal/examples/AboutModal.md +4 -4
  174. package/docs/demos/Alert/examples/Alert.md +13 -13
  175. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  176. package/docs/demos/Banner/examples/Banner.md +10 -11
  177. package/docs/demos/Card/examples/Card.md +151 -116
  178. package/docs/demos/CardView/examples/CardView.md +16 -15
  179. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  180. package/docs/demos/Dashboard/examples/Dashboard.md +10 -9
  181. package/docs/demos/DataList/examples/DataList.md +160 -111
  182. package/docs/demos/DescriptionList/examples/DescriptionList.md +12 -13
  183. package/docs/demos/Drawer/examples/Drawer.md +20 -20
  184. package/docs/demos/HelperText/examples/HelperText.md +8 -9
  185. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  186. package/docs/demos/Masthead/examples/Masthead.md +32 -35
  187. package/docs/demos/Modal/examples/Modal.md +54 -66
  188. package/docs/demos/Nav/examples/Nav.md +720 -767
  189. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +40 -28
  190. package/docs/demos/Page/examples/Page.md +37 -37
  191. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +32 -33
  192. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +53 -49
  193. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  194. package/docs/demos/Table/examples/Table.md +522 -378
  195. package/docs/demos/Tabs/examples/Tabs.md +120 -601
  196. package/docs/demos/Toolbar/examples/Toolbar.md +1781 -171
  197. package/docs/demos/Wizard/examples/Wizard.md +229 -225
  198. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  199. package/docs/layouts/Flex/examples/Flex.md +98 -98
  200. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  201. package/docs/layouts/Grid/examples/Grid.md +9 -9
  202. package/docs/layouts/Level/examples/Level.md +5 -5
  203. package/docs/layouts/Split/examples/Split.md +7 -7
  204. package/docs/layouts/Stack/examples/Stack.md +6 -6
  205. package/docs/utilities/Accessibility/examples/Accessibility.md +4 -4
  206. package/docs/utilities/Alignment/examples/Alignment.md +6 -6
  207. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +12 -12
  208. package/docs/utilities/BoxShadow/examples/box-shadow.md +22 -22
  209. package/docs/utilities/Display/examples/Display.md +11 -11
  210. package/docs/utilities/Flex/examples/Flex.md +34 -34
  211. package/docs/utilities/Float/examples/Float.md +4 -4
  212. package/docs/utilities/Sizing/examples/Sizing.md +50 -50
  213. package/docs/utilities/Spacing/examples/Spacing.md +34 -34
  214. package/docs/utilities/Text/examples/Text.md +27 -27
  215. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  216. package/layouts/Grid/grid.css +5 -5
  217. package/package.json +59 -64
  218. package/patternfly-base-no-reset.css +5 -11
  219. package/patternfly-base.css +5 -11
  220. package/patternfly-no-reset.css +528 -336
  221. package/patternfly.css +528 -336
  222. package/patternfly.min.css +1 -1
  223. package/patternfly.min.css.map +1 -1
  224. package/sass-utilities/scss-variables.scss +0 -1
package/docs/demos/Masthead/examples/Masthead.md CHANGED
@@ -113,7 +113,7 @@ wrapperTag: div
113
113
  id="masthead-basic-example-primary-nav"
114
114
  aria-label="Global"
115
115
  >
116
- <ul class="pf-c-nav__list">
116
+ <ul class="pf-c-nav__list" role="list">
117
117
  <li class="pf-c-nav__item">
118
118
  <a href="#" class="pf-c-nav__link">System panel</a>
119
119
  </li>
@@ -145,7 +145,7 @@ wrapperTag: div
145
145
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
146
146
  <div class="pf-c-page__main-body">
147
147
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
148
- <ol class="pf-c-breadcrumb__list">
148
+ <ol class="pf-c-breadcrumb__list" role="list">
149
149
  <li class="pf-c-breadcrumb__item">
150
150
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
151
151
  </li>
@@ -313,7 +313,7 @@ wrapperTag: div
313
313
  </div>
314
314
  </div>
315
315
  </div>
316
- <ul class="pf-c-context-selector__menu-list">
316
+ <ul class="pf-c-context-selector__menu-list" role="list">
317
317
  <li>
318
318
  <a
319
319
  class="pf-c-context-selector__menu-list-item"
@@ -517,7 +517,7 @@ wrapperTag: div
517
517
  id="masthead-context-selecton-drilldown-example-primary-nav"
518
518
  aria-label="Global"
519
519
  >
520
- <ul class="pf-c-nav__list">
520
+ <ul class="pf-c-nav__list" role="list">
521
521
  <li class="pf-c-nav__item">
522
522
  <a href="#" class="pf-c-nav__link">System panel</a>
523
523
  </li>
@@ -549,7 +549,7 @@ wrapperTag: div
549
549
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
550
550
  <div class="pf-c-page__main-body">
551
551
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
552
- <ol class="pf-c-breadcrumb__list">
552
+ <ol class="pf-c-breadcrumb__list" role="list">
553
553
  <li class="pf-c-breadcrumb__item">
554
554
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
555
555
  </li>
@@ -726,7 +726,6 @@ wrapperTag: div
726
726
  role="listbox"
727
727
  aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-select-name-label"
728
728
  hidden
729
- style="width: 175px"
730
729
  >
731
730
  <li role="presentation">
732
731
  <button
@@ -766,7 +765,7 @@ wrapperTag: div
766
765
  </li>
767
766
  </ul>
768
767
  </div>
769
- <div class="pf-c-text-input-group">
768
+ <div class="pf-c-text-input-group" style="width: auto">
770
769
  <div class="pf-c-text-input-group__main pf-m-icon">
771
770
  <span class="pf-c-text-input-group__text">
772
771
  <span class="pf-c-text-input-group__icon">
@@ -774,9 +773,9 @@ wrapperTag: div
774
773
  </span>
775
774
  <input
776
775
  class="pf-c-text-input-group__text-input"
777
- type="text"
778
- value
776
+ type="search"
779
777
  placeholder="Filter by name"
778
+ value
780
779
  aria-label="Type to filter"
781
780
  />
782
781
  </span>
@@ -849,7 +848,7 @@ wrapperTag: div
849
848
  id="masthead-toolbar-filters-example-primary-nav"
850
849
  aria-label="Global"
851
850
  >
852
- <ul class="pf-c-nav__list">
851
+ <ul class="pf-c-nav__list" role="list">
853
852
  <li class="pf-c-nav__item">
854
853
  <a href="#" class="pf-c-nav__link">System panel</a>
855
854
  </li>
@@ -881,7 +880,7 @@ wrapperTag: div
881
880
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
882
881
  <div class="pf-c-page__main-body">
883
882
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
884
- <ol class="pf-c-breadcrumb__list">
883
+ <ol class="pf-c-breadcrumb__list" role="list">
885
884
  <li class="pf-c-breadcrumb__item">
886
885
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
887
886
  </li>
@@ -1061,7 +1060,6 @@ wrapperTag: div
1061
1060
  role="listbox"
1062
1061
  aria-labelledby="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label"
1063
1062
  hidden
1064
- style="width: 175px"
1065
1063
  >
1066
1064
  <li role="presentation">
1067
1065
  <button
@@ -1101,7 +1099,7 @@ wrapperTag: div
1101
1099
  </li>
1102
1100
  </ul>
1103
1101
  </div>
1104
- <div class="pf-c-text-input-group">
1102
+ <div class="pf-c-text-input-group" style="width: auto">
1105
1103
  <div class="pf-c-text-input-group__main pf-m-icon">
1106
1104
  <span class="pf-c-text-input-group__text">
1107
1105
  <span class="pf-c-text-input-group__icon">
@@ -1109,9 +1107,9 @@ wrapperTag: div
1109
1107
  </span>
1110
1108
  <input
1111
1109
  class="pf-c-text-input-group__text-input"
1112
- type="text"
1113
- value
1110
+ type="search"
1114
1111
  placeholder="Filter by name"
1112
+ value
1115
1113
  aria-label="Type to filter"
1116
1114
  />
1117
1115
  </span>
@@ -1184,7 +1182,7 @@ wrapperTag: div
1184
1182
  id="masthead-toggle-group-filters-example-primary-nav"
1185
1183
  aria-label="Global"
1186
1184
  >
1187
- <ul class="pf-c-nav__list">
1185
+ <ul class="pf-c-nav__list" role="list">
1188
1186
  <li class="pf-c-nav__item">
1189
1187
  <a href="#" class="pf-c-nav__link">System panel</a>
1190
1188
  </li>
@@ -1216,7 +1214,7 @@ wrapperTag: div
1216
1214
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
1217
1215
  <div class="pf-c-page__main-body">
1218
1216
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
1219
- <ol class="pf-c-breadcrumb__list">
1217
+ <ol class="pf-c-breadcrumb__list" role="list">
1220
1218
  <li class="pf-c-breadcrumb__item">
1221
1219
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
1222
1220
  </li>
@@ -1371,7 +1369,7 @@ wrapperTag: div
1371
1369
  id="masthead-expandable-search-example-primary-nav"
1372
1370
  aria-label="Global"
1373
1371
  >
1374
- <ul class="pf-c-nav__list">
1372
+ <ul class="pf-c-nav__list" role="list">
1375
1373
  <li class="pf-c-nav__item">
1376
1374
  <a href="#" class="pf-c-nav__link">System panel</a>
1377
1375
  </li>
@@ -1403,7 +1401,7 @@ wrapperTag: div
1403
1401
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
1404
1402
  <div class="pf-c-page__main-body">
1405
1403
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
1406
- <ol class="pf-c-breadcrumb__list">
1404
+ <ol class="pf-c-breadcrumb__list" role="list">
1407
1405
  <li class="pf-c-breadcrumb__item">
1408
1406
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
1409
1407
  </li>
@@ -1574,7 +1572,7 @@ wrapperTag: div
1574
1572
  id="masthead-expandable-search-expanded-example-primary-nav"
1575
1573
  aria-label="Global"
1576
1574
  >
1577
- <ul class="pf-c-nav__list">
1575
+ <ul class="pf-c-nav__list" role="list">
1578
1576
  <li class="pf-c-nav__item">
1579
1577
  <a href="#" class="pf-c-nav__link">System panel</a>
1580
1578
  </li>
@@ -1606,7 +1604,7 @@ wrapperTag: div
1606
1604
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
1607
1605
  <div class="pf-c-page__main-body">
1608
1606
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
1609
- <ol class="pf-c-breadcrumb__list">
1607
+ <ol class="pf-c-breadcrumb__list" role="list">
1610
1608
  <li class="pf-c-breadcrumb__item">
1611
1609
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
1612
1610
  </li>
@@ -1783,7 +1781,7 @@ wrapperTag: div
1783
1781
  </div>
1784
1782
  <section class="pf-c-app-launcher__group">
1785
1783
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
1786
- <ul>
1784
+ <ul role="list">
1787
1785
  <li
1788
1786
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1789
1787
  >
@@ -1835,7 +1833,7 @@ wrapperTag: div
1835
1833
  <hr class="pf-c-divider" />
1836
1834
  <section class="pf-c-app-launcher__group">
1837
1835
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
1838
- <ul>
1836
+ <ul role="list">
1839
1837
  <li
1840
1838
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
1841
1839
  >
@@ -2490,7 +2488,7 @@ wrapperTag: div
2490
2488
  id="masthead-advanced-with-menu-example-primary-nav"
2491
2489
  aria-label="Global"
2492
2490
  >
2493
- <ul class="pf-c-nav__list">
2491
+ <ul class="pf-c-nav__list" role="list">
2494
2492
  <li class="pf-c-nav__item">
2495
2493
  <a href="#" class="pf-c-nav__link">System panel</a>
2496
2494
  </li>
@@ -2522,7 +2520,7 @@ wrapperTag: div
2522
2520
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
2523
2521
  <div class="pf-c-page__main-body">
2524
2522
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
2525
- <ol class="pf-c-breadcrumb__list">
2523
+ <ol class="pf-c-breadcrumb__list" role="list">
2526
2524
  <li class="pf-c-breadcrumb__item">
2527
2525
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
2528
2526
  </li>
@@ -2656,7 +2654,7 @@ wrapperTag: div
2656
2654
  >
2657
2655
  <i class="fas fa-angle-left" aria-hidden="true"></i>
2658
2656
  </button>
2659
- <ul class="pf-c-nav__list">
2657
+ <ul class="pf-c-nav__list" role="list">
2660
2658
  <li class="pf-c-nav__item">
2661
2659
  <a href="#" class="pf-c-nav__link">Horizontal nav item 1</a>
2662
2660
  </li>
@@ -2732,7 +2730,7 @@ wrapperTag: div
2732
2730
  </div>
2733
2731
  <section class="pf-c-app-launcher__group">
2734
2732
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
2735
- <ul>
2733
+ <ul role="list">
2736
2734
  <li
2737
2735
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
2738
2736
  >
@@ -2784,7 +2782,7 @@ wrapperTag: div
2784
2782
  <hr class="pf-c-divider" />
2785
2783
  <section class="pf-c-app-launcher__group">
2786
2784
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
2787
- <ul>
2785
+ <ul role="list">
2788
2786
  <li
2789
2787
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
2790
2788
  >
@@ -3440,7 +3438,7 @@ wrapperTag: div
3440
3438
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
3441
3439
  <div class="pf-c-page__main-body">
3442
3440
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
3443
- <ol class="pf-c-breadcrumb__list">
3441
+ <ol class="pf-c-breadcrumb__list" role="list">
3444
3442
  <li class="pf-c-breadcrumb__item">
3445
3443
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
3446
3444
  </li>
@@ -3678,7 +3676,6 @@ wrapperTag: div
3678
3676
  role="listbox"
3679
3677
  aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label"
3680
3678
  hidden
3681
- style="width: 175px"
3682
3679
  >
3683
3680
  <li role="presentation">
3684
3681
  <button
@@ -3715,7 +3712,7 @@ wrapperTag: div
3715
3712
  </li>
3716
3713
  </ul>
3717
3714
  </div>
3718
- <div class="pf-c-text-input-group">
3715
+ <div class="pf-c-text-input-group" style="width: auto">
3719
3716
  <div class="pf-c-text-input-group__main pf-m-icon">
3720
3717
  <span class="pf-c-text-input-group__text">
3721
3718
  <span class="pf-c-text-input-group__icon">
@@ -3723,9 +3720,9 @@ wrapperTag: div
3723
3720
  </span>
3724
3721
  <input
3725
3722
  class="pf-c-text-input-group__text-input"
3726
- type="text"
3727
- value
3723
+ type="search"
3728
3724
  placeholder="Filter by name"
3725
+ value
3729
3726
  aria-label="Type to filter"
3730
3727
  />
3731
3728
  </span>
@@ -3745,7 +3742,7 @@ wrapperTag: div
3745
3742
  id="masthead-toggle-group-filters-expanded-mobile-example-primary-nav"
3746
3743
  aria-label="Global"
3747
3744
  >
3748
- <ul class="pf-c-nav__list">
3745
+ <ul class="pf-c-nav__list" role="list">
3749
3746
  <li class="pf-c-nav__item">
3750
3747
  <a href="#" class="pf-c-nav__link">System panel</a>
3751
3748
  </li>
@@ -3777,7 +3774,7 @@ wrapperTag: div
3777
3774
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
3778
3775
  <div class="pf-c-page__main-body">
3779
3776
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
3780
- <ol class="pf-c-breadcrumb__list">
3777
+ <ol class="pf-c-breadcrumb__list" role="list">
3781
3778
  <li class="pf-c-breadcrumb__item">
3782
3779
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
3783
3780
  </li>
package/docs/demos/Modal/examples/Modal.md CHANGED
@@ -95,7 +95,7 @@ section: components
95
95
  </div>
96
96
  <section class="pf-c-app-launcher__group">
97
97
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
98
- <ul>
98
+ <ul role="list">
99
99
  <li
100
100
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
101
101
  >
@@ -147,7 +147,7 @@ section: components
147
147
  <hr class="pf-c-divider" />
148
148
  <section class="pf-c-app-launcher__group">
149
149
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
150
- <ul>
150
+ <ul role="list">
151
151
  <li
152
152
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
153
153
  >
@@ -802,7 +802,7 @@ section: components
802
802
  id="modal-basic-example-primary-nav"
803
803
  aria-label="Global"
804
804
  >
805
- <ul class="pf-c-nav__list">
805
+ <ul class="pf-c-nav__list" role="list">
806
806
  <li class="pf-c-nav__item">
807
807
  <a href="#" class="pf-c-nav__link">System panel</a>
808
808
  </li>
@@ -834,7 +834,7 @@ section: components
834
834
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
835
835
  <div class="pf-c-page__main-body">
836
836
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
837
- <ol class="pf-c-breadcrumb__list">
837
+ <ol class="pf-c-breadcrumb__list" role="list">
838
838
  <li class="pf-c-breadcrumb__item">
839
839
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
840
840
  </li>
@@ -922,13 +922,11 @@ section: components
922
922
  aria-labelledby="modal-title-modal-basic-example-modal"
923
923
  aria-describedby="modal-description-modal-basic-example-modal"
924
924
  >
925
- <button
926
- class="pf-c-button pf-m-plain"
927
- type="button"
928
- aria-label="Close dialog"
929
- >
930
- <i class="fas fa-times" aria-hidden="true"></i>
931
- </button>
925
+ <div class="pf-c-modal-box__close">
926
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
927
+ <i class="fas fa-times" aria-hidden="true"></i>
928
+ </button>
929
+ </div>
932
930
  <header class="pf-c-modal-box__header">
933
931
  <h1
934
932
  class="pf-c-modal-box__title"
@@ -1044,7 +1042,7 @@ section: components
1044
1042
  </div>
1045
1043
  <section class="pf-c-app-launcher__group">
1046
1044
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
1047
- <ul>
1045
+ <ul role="list">
1048
1046
  <li
1049
1047
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1050
1048
  >
@@ -1096,7 +1094,7 @@ section: components
1096
1094
  <hr class="pf-c-divider" />
1097
1095
  <section class="pf-c-app-launcher__group">
1098
1096
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
1099
- <ul>
1097
+ <ul role="list">
1100
1098
  <li
1101
1099
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
1102
1100
  >
@@ -1751,7 +1749,7 @@ section: components
1751
1749
  id="modal-scrollable-content-example-primary-nav"
1752
1750
  aria-label="Global"
1753
1751
  >
1754
- <ul class="pf-c-nav__list">
1752
+ <ul class="pf-c-nav__list" role="list">
1755
1753
  <li class="pf-c-nav__item">
1756
1754
  <a href="#" class="pf-c-nav__link">System panel</a>
1757
1755
  </li>
@@ -1783,7 +1781,7 @@ section: components
1783
1781
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
1784
1782
  <div class="pf-c-page__main-body">
1785
1783
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
1786
- <ol class="pf-c-breadcrumb__list">
1784
+ <ol class="pf-c-breadcrumb__list" role="list">
1787
1785
  <li class="pf-c-breadcrumb__item">
1788
1786
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
1789
1787
  </li>
@@ -1871,13 +1869,11 @@ section: components
1871
1869
  aria-labelledby="modal-scroll-title"
1872
1870
  aria-describedby="modal-scroll-description"
1873
1871
  >
1874
- <button
1875
- class="pf-c-button pf-m-plain"
1876
- type="button"
1877
- aria-label="Close dialog"
1878
- >
1879
- <i class="fas fa-times" aria-hidden="true"></i>
1880
- </button>
1872
+ <div class="pf-c-modal-box__close">
1873
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
1874
+ <i class="fas fa-times" aria-hidden="true"></i>
1875
+ </button>
1876
+ </div>
1881
1877
  <header class="pf-c-modal-box__header">
1882
1878
  <h1
1883
1879
  class="pf-c-modal-box__title"
@@ -2002,7 +1998,7 @@ section: components
2002
1998
  </div>
2003
1999
  <section class="pf-c-app-launcher__group">
2004
2000
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
2005
- <ul>
2001
+ <ul role="list">
2006
2002
  <li
2007
2003
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
2008
2004
  >
@@ -2054,7 +2050,7 @@ section: components
2054
2050
  <hr class="pf-c-divider" />
2055
2051
  <section class="pf-c-app-launcher__group">
2056
2052
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
2057
- <ul>
2053
+ <ul role="list">
2058
2054
  <li
2059
2055
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
2060
2056
  >
@@ -2709,7 +2705,7 @@ section: components
2709
2705
  id="modal-medium-example-primary-nav"
2710
2706
  aria-label="Global"
2711
2707
  >
2712
- <ul class="pf-c-nav__list">
2708
+ <ul class="pf-c-nav__list" role="list">
2713
2709
  <li class="pf-c-nav__item">
2714
2710
  <a href="#" class="pf-c-nav__link">System panel</a>
2715
2711
  </li>
@@ -2741,7 +2737,7 @@ section: components
2741
2737
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
2742
2738
  <div class="pf-c-page__main-body">
2743
2739
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
2744
- <ol class="pf-c-breadcrumb__list">
2740
+ <ol class="pf-c-breadcrumb__list" role="list">
2745
2741
  <li class="pf-c-breadcrumb__item">
2746
2742
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
2747
2743
  </li>
@@ -2829,13 +2825,11 @@ section: components
2829
2825
  aria-labelledby="modal-md-title"
2830
2826
  aria-describedby="modal-md-description"
2831
2827
  >
2832
- <button
2833
- class="pf-c-button pf-m-plain"
2834
- type="button"
2835
- aria-label="Close dialog"
2836
- >
2837
- <i class="fas fa-times" aria-hidden="true"></i>
2838
- </button>
2828
+ <div class="pf-c-modal-box__close">
2829
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
2830
+ <i class="fas fa-times" aria-hidden="true"></i>
2831
+ </button>
2832
+ </div>
2839
2833
  <header class="pf-c-modal-box__header">
2840
2834
  <h1
2841
2835
  class="pf-c-modal-box__title"
@@ -2950,7 +2944,7 @@ section: components
2950
2944
  </div>
2951
2945
  <section class="pf-c-app-launcher__group">
2952
2946
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
2953
- <ul>
2947
+ <ul role="list">
2954
2948
  <li
2955
2949
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
2956
2950
  >
@@ -3002,7 +2996,7 @@ section: components
3002
2996
  <hr class="pf-c-divider" />
3003
2997
  <section class="pf-c-app-launcher__group">
3004
2998
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
3005
- <ul>
2999
+ <ul role="list">
3006
3000
  <li
3007
3001
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
3008
3002
  >
@@ -3657,7 +3651,7 @@ section: components
3657
3651
  id="modal-large-example-primary-nav"
3658
3652
  aria-label="Global"
3659
3653
  >
3660
- <ul class="pf-c-nav__list">
3654
+ <ul class="pf-c-nav__list" role="list">
3661
3655
  <li class="pf-c-nav__item">
3662
3656
  <a href="#" class="pf-c-nav__link">System panel</a>
3663
3657
  </li>
@@ -3689,7 +3683,7 @@ section: components
3689
3683
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
3690
3684
  <div class="pf-c-page__main-body">
3691
3685
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
3692
- <ol class="pf-c-breadcrumb__list">
3686
+ <ol class="pf-c-breadcrumb__list" role="list">
3693
3687
  <li class="pf-c-breadcrumb__item">
3694
3688
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
3695
3689
  </li>
@@ -3777,13 +3771,11 @@ section: components
3777
3771
  aria-labelledby="modal-lg-title"
3778
3772
  aria-describedby="modal-lg-description"
3779
3773
  >
3780
- <button
3781
- class="pf-c-button pf-m-plain"
3782
- type="button"
3783
- aria-label="Close dialog"
3784
- >
3785
- <i class="fas fa-times" aria-hidden="true"></i>
3786
- </button>
3774
+ <div class="pf-c-modal-box__close">
3775
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
3776
+ <i class="fas fa-times" aria-hidden="true"></i>
3777
+ </button>
3778
+ </div>
3787
3779
  <header class="pf-c-modal-box__header">
3788
3780
  <h1
3789
3781
  class="pf-c-modal-box__title"
@@ -3898,7 +3890,7 @@ section: components
3898
3890
  </div>
3899
3891
  <section class="pf-c-app-launcher__group">
3900
3892
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
3901
- <ul>
3893
+ <ul role="list">
3902
3894
  <li
3903
3895
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
3904
3896
  >
@@ -3950,7 +3942,7 @@ section: components
3950
3942
  <hr class="pf-c-divider" />
3951
3943
  <section class="pf-c-app-launcher__group">
3952
3944
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
3953
- <ul>
3945
+ <ul role="list">
3954
3946
  <li
3955
3947
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
3956
3948
  >
@@ -4605,7 +4597,7 @@ section: components
4605
4597
  id="modal-large-example-primary-nav"
4606
4598
  aria-label="Global"
4607
4599
  >
4608
- <ul class="pf-c-nav__list">
4600
+ <ul class="pf-c-nav__list" role="list">
4609
4601
  <li class="pf-c-nav__item">
4610
4602
  <a href="#" class="pf-c-nav__link">System panel</a>
4611
4603
  </li>
@@ -4637,7 +4629,7 @@ section: components
4637
4629
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
4638
4630
  <div class="pf-c-page__main-body">
4639
4631
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
4640
- <ol class="pf-c-breadcrumb__list">
4632
+ <ol class="pf-c-breadcrumb__list" role="list">
4641
4633
  <li class="pf-c-breadcrumb__item">
4642
4634
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
4643
4635
  </li>
@@ -4725,13 +4717,11 @@ section: components
4725
4717
  aria-labelledby="modal-top-aligned-title"
4726
4718
  aria-describedby="modal-top-aligned-description"
4727
4719
  >
4728
- <button
4729
- class="pf-c-button pf-m-plain"
4730
- type="button"
4731
- aria-label="Close dialog"
4732
- >
4733
- <i class="fas fa-times" aria-hidden="true"></i>
4734
- </button>
4720
+ <div class="pf-c-modal-box__close">
4721
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
4722
+ <i class="fas fa-times" aria-hidden="true"></i>
4723
+ </button>
4724
+ </div>
4735
4725
  <header class="pf-c-modal-box__header">
4736
4726
  <h1
4737
4727
  class="pf-c-modal-box__title"
@@ -4846,7 +4836,7 @@ section: components
4846
4836
  </div>
4847
4837
  <section class="pf-c-app-launcher__group">
4848
4838
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
4849
- <ul>
4839
+ <ul role="list">
4850
4840
  <li
4851
4841
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
4852
4842
  >
@@ -4898,7 +4888,7 @@ section: components
4898
4888
  <hr class="pf-c-divider" />
4899
4889
  <section class="pf-c-app-launcher__group">
4900
4890
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
4901
- <ul>
4891
+ <ul role="list">
4902
4892
  <li
4903
4893
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
4904
4894
  >
@@ -5553,7 +5543,7 @@ section: components
5553
5543
  id="modal-with-form-example-primary-nav"
5554
5544
  aria-label="Global"
5555
5545
  >
5556
- <ul class="pf-c-nav__list">
5546
+ <ul class="pf-c-nav__list" role="list">
5557
5547
  <li class="pf-c-nav__item">
5558
5548
  <a href="#" class="pf-c-nav__link">System panel</a>
5559
5549
  </li>
@@ -5585,7 +5575,7 @@ section: components
5585
5575
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
5586
5576
  <div class="pf-c-page__main-body">
5587
5577
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
5588
- <ol class="pf-c-breadcrumb__list">
5578
+ <ol class="pf-c-breadcrumb__list" role="list">
5589
5579
  <li class="pf-c-breadcrumb__item">
5590
5580
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
5591
5581
  </li>
@@ -5673,13 +5663,11 @@ section: components
5673
5663
  aria-labelledby="modal-title-"
5674
5664
  aria-describedby="modal-description-"
5675
5665
  >
5676
- <button
5677
- class="pf-c-button pf-m-plain"
5678
- type="button"
5679
- aria-label="Close dialog"
5680
- >
5681
- <i class="fas fa-times" aria-hidden="true"></i>
5682
- </button>
5666
+ <div class="pf-c-modal-box__close">
5667
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
5668
+ <i class="fas fa-times" aria-hidden="true"></i>
5669
+ </button>
5670
+ </div>
5683
5671
  <header class="pf-c-modal-box__header">
5684
5672
  <h1 class="pf-c-modal-box__title" id="modal-title-">Create account</h1>
5685
5673
  </header>