@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.40

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 (340) hide show
  1. package/RELEASE-NOTES.md +18 -1
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/images/pfbg-icon.svg +1 -0
  4. package/assets/pficon/pficon.scss +7 -2
  5. package/assets/pficon/pficon.woff2 +0 -0
  6. package/base/_base.scss +0 -18
  7. package/base/_chart-globals.scss +0 -4
  8. package/base/_common.scss +0 -22
  9. package/base/_fa-icons.scss +1 -2
  10. package/base/_fonts.scss +22 -27
  11. package/base/_globals.scss +92 -86
  12. package/base/_icons.scss +1 -28
  13. package/base/_svg-icons.scss +6 -0
  14. package/base/_variables.scss +4 -4
  15. package/base/patternfly-common.css +0 -10
  16. package/base/patternfly-fa-icons.css +1 -1
  17. package/base/patternfly-fonts.css +17 -17
  18. package/base/patternfly-globals.css +35 -41
  19. package/base/patternfly-icons.css +8 -22
  20. package/base/patternfly-pf-icons.css +6 -2
  21. package/base/patternfly-themes.css +0 -42
  22. package/base/patternfly-variables.css +3 -3
  23. package/base/themes/dark/_globals.scss +1 -1
  24. package/base/themes/dark/_variables.scss +1 -1
  25. package/components/AboutModalBox/about-modal-box.css +20 -50
  26. package/components/AboutModalBox/about-modal-box.scss +22 -14
  27. package/components/Accordion/accordion.css +2 -0
  28. package/components/Accordion/accordion.scss +2 -0
  29. package/components/Alert/alert.css +17 -8
  30. package/components/Alert/alert.scss +21 -7
  31. package/components/Alert/themes/dark/alert.scss +1 -1
  32. package/components/AppLauncher/app-launcher.css +2 -0
  33. package/components/AppLauncher/app-launcher.scss +2 -0
  34. package/components/Avatar/avatar.scss +2 -2
  35. package/components/BackgroundImage/background-image.css +8 -35
  36. package/components/BackgroundImage/background-image.scss +17 -43
  37. package/components/Banner/banner.css +14 -52
  38. package/components/Banner/banner.scss +9 -13
  39. package/components/Breadcrumb/breadcrumb.css +2 -0
  40. package/components/Breadcrumb/breadcrumb.scss +2 -0
  41. package/components/CalendarMonth/calendar-month.css +2 -2
  42. package/components/CalendarMonth/calendar-month.scss +3 -3
  43. package/components/Card/card.css +115 -50
  44. package/components/Card/card.scss +164 -63
  45. package/components/Chip/chip.css +33 -24
  46. package/components/Chip/chip.scss +40 -31
  47. package/components/ChipGroup/chip-group.css +27 -17
  48. package/components/ChipGroup/chip-group.scss +36 -22
  49. package/components/Content/content.css +11 -5
  50. package/components/Content/content.scss +17 -9
  51. package/components/ContextSelector/context-selector.css +13 -6
  52. package/components/ContextSelector/context-selector.scss +14 -7
  53. package/components/DataList/data-list-grid.css +7 -7
  54. package/components/DataList/data-list-grid.scss +1 -1
  55. package/components/DataList/data-list.css +46 -40
  56. package/components/DataList/data-list.scss +37 -28
  57. package/components/DatePicker/date-picker.css +0 -8
  58. package/components/DatePicker/date-picker.scss +0 -9
  59. package/components/DescriptionList/description-list.css +7 -7
  60. package/components/DescriptionList/description-list.scss +7 -7
  61. package/components/Divider/divider.css +2 -2
  62. package/components/Divider/divider.scss +3 -3
  63. package/components/Drawer/drawer.css +15 -16
  64. package/components/Drawer/drawer.scss +2 -3
  65. package/components/Dropdown/dropdown.css +26 -25
  66. package/components/Dropdown/dropdown.scss +17 -18
  67. package/components/DualListSelector/dual-list-selector.css +1 -1
  68. package/components/DualListSelector/dual-list-selector.scss +1 -1
  69. package/components/EmptyState/empty-state.css +46 -52
  70. package/components/EmptyState/empty-state.scss +58 -57
  71. package/components/ExpandableSection/expandable-section.css +2 -0
  72. package/components/ExpandableSection/expandable-section.scss +2 -0
  73. package/components/Form/form.css +14 -12
  74. package/components/Form/form.scss +9 -7
  75. package/components/FormControl/form-control.css +2 -5
  76. package/components/FormControl/themes/dark/form-control.scss +2 -6
  77. package/components/HelperText/helper-text.css +4 -0
  78. package/components/HelperText/helper-text.scss +5 -0
  79. package/components/Hint/hint.css +2 -2
  80. package/components/Hint/hint.scss +2 -2
  81. package/components/Icon/icon.css +3 -3
  82. package/components/Icon/icon.scss +3 -3
  83. package/components/InputGroup/input-group.css +61 -85
  84. package/components/InputGroup/input-group.scss +55 -61
  85. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  86. package/components/Label/label.css +49 -36
  87. package/components/Label/label.scss +53 -38
  88. package/components/Label/themes/dark/label.scss +2 -2
  89. package/components/LabelGroup/label-group.css +26 -22
  90. package/components/LabelGroup/label-group.scss +31 -26
  91. package/components/LogViewer/log-viewer.css +0 -38
  92. package/components/Login/login.css +20 -60
  93. package/components/Login/login.scss +16 -18
  94. package/components/Login/themes/dark/login.scss +4 -0
  95. package/components/Masthead/masthead.css +4 -42
  96. package/components/Masthead/masthead.scss +4 -4
  97. package/components/Menu/menu.css +9 -6
  98. package/components/Menu/menu.scss +34 -31
  99. package/components/MenuToggle/menu-toggle.css +3 -1
  100. package/components/MenuToggle/menu-toggle.scss +3 -1
  101. package/components/ModalBox/modal-box.css +12 -11
  102. package/components/ModalBox/modal-box.scss +14 -14
  103. package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
  104. package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
  105. package/components/Nav/nav.css +1 -1
  106. package/components/Nav/nav.scss +2 -2
  107. package/components/NotificationDrawer/notification-drawer.css +8 -8
  108. package/components/NotificationDrawer/notification-drawer.scss +8 -8
  109. package/components/OptionsMenu/options-menu.css +8 -10
  110. package/components/OptionsMenu/options-menu.scss +9 -11
  111. package/components/Page/page.css +101 -122
  112. package/components/Page/page.scss +49 -21
  113. package/components/Pagination/pagination.css +2 -110
  114. package/components/Pagination/pagination.scss +0 -6
  115. package/components/Popover/popover.css +31 -37
  116. package/components/Popover/popover.scss +32 -37
  117. package/components/Popover/themes/dark/popover.scss +3 -9
  118. package/components/Progress/progress.css +13 -10
  119. package/components/Progress/progress.scss +13 -10
  120. package/components/ProgressStepper/progress-stepper.css +5 -5
  121. package/components/ProgressStepper/progress-stepper.scss +5 -5
  122. package/components/SearchInput/search-input.css +4 -2
  123. package/components/SearchInput/search-input.scss +4 -2
  124. package/components/Select/select.css +1 -1
  125. package/components/Select/select.scss +1 -1
  126. package/components/Sidebar/sidebar.css +69 -26
  127. package/components/Sidebar/sidebar.scss +84 -27
  128. package/components/SimpleList/simple-list.css +1 -1
  129. package/components/SimpleList/simple-list.scss +2 -2
  130. package/components/Spinner/spinner.css +4 -4
  131. package/components/Spinner/spinner.scss +4 -4
  132. package/components/Table/table-grid.css +28 -28
  133. package/components/Table/table-scrollable.css +31 -26
  134. package/components/Table/table-scrollable.scss +33 -28
  135. package/components/Table/table-tree-view.css +14 -4
  136. package/components/Table/table-tree-view.scss +15 -0
  137. package/components/Table/table.css +67 -65
  138. package/components/Table/table.scss +65 -62
  139. package/components/Tabs/tabs.css +0 -4
  140. package/components/Tabs/tabs.scss +0 -7
  141. package/components/TextInputGroup/text-input-group.css +6 -4
  142. package/components/TextInputGroup/text-input-group.scss +6 -5
  143. package/components/Tile/tile.css +1 -1
  144. package/components/Tile/tile.scss +1 -1
  145. package/components/Timestamp/timestamp.css +3 -3
  146. package/components/Timestamp/timestamp.scss +3 -3
  147. package/components/Toolbar/toolbar.css +78 -43
  148. package/components/Toolbar/toolbar.scss +50 -10
  149. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  150. package/components/Tooltip/tooltip.css +7 -12
  151. package/components/Tooltip/tooltip.scss +6 -3
  152. package/components/TreeView/tree-view.css +7 -15
  153. package/components/TreeView/tree-view.scss +7 -18
  154. package/components/Wizard/wizard.css +16 -39
  155. package/components/Wizard/wizard.scss +20 -2
  156. package/docs/components/AboutModalBox/examples/AboutModalBox.md +20 -14
  157. package/docs/components/Accordion/examples/Accordion.md +12 -12
  158. package/docs/components/ActionList/examples/ActionList.md +6 -6
  159. package/docs/components/Alert/examples/Alert.md +29 -29
  160. package/docs/components/AlertGroup/examples/AlertGroup.md +15 -15
  161. package/docs/components/AppLauncher/examples/application-launcher.md +52 -46
  162. package/docs/components/Avatar/examples/Avatar.md +11 -11
  163. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  164. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  165. package/docs/components/BackgroundImage/examples/BackgroundImage.md +13 -29
  166. package/docs/components/Badge/examples/Badge.md +5 -5
  167. package/docs/components/Banner/examples/Banner.md +8 -8
  168. package/docs/components/Brand/examples/Brand.md +9 -9
  169. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  170. package/docs/components/Button/examples/Button.md +35 -35
  171. package/docs/components/CalendarMonth/examples/CalendarMonth.md +301 -284
  172. package/docs/components/Card/examples/Card.md +676 -116
  173. package/docs/components/Check/examples/Check.md +16 -19
  174. package/docs/components/Chip/examples/Chip.md +70 -52
  175. package/docs/components/ChipGroup/examples/ChipGroup.md +452 -673
  176. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  177. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  178. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  179. package/docs/components/Content/examples/Content.md +37 -9
  180. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  181. package/docs/components/ContextSelector/examples/context-selector.md +87 -80
  182. package/docs/components/DataList/examples/DataList.md +239 -202
  183. package/docs/components/DatePicker/examples/DatePicker.md +139 -104
  184. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  185. package/docs/components/Divider/examples/Divider.md +10 -10
  186. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  187. package/docs/components/Drawer/examples/Drawer.md +43 -43
  188. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  189. package/docs/components/Dropdown/examples/Dropdown.md +125 -100
  190. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  191. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  192. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  193. package/docs/components/FileUpload/examples/FileUpload.md +146 -105
  194. package/docs/components/Form/examples/Form.md +152 -130
  195. package/docs/components/FormControl/examples/FormControl.md +21 -20
  196. package/docs/components/HelperText/examples/HelperText.md +24 -35
  197. package/docs/components/Hint/examples/Hint.md +7 -7
  198. package/docs/components/Icon/examples/Icon.md +11 -12
  199. package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
  200. package/docs/components/InputGroup/examples/InputGroup.md +229 -179
  201. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  202. package/docs/components/Label/examples/Label.md +1427 -746
  203. package/docs/components/LabelGroup/examples/LabelGroup.md +295 -242
  204. package/docs/components/List/examples/List.md +18 -18
  205. package/docs/components/LogViewer/examples/LogViewer.md +79 -74
  206. package/docs/components/Login/examples/Login.md +103 -181
  207. package/docs/components/Masthead/examples/masthead.md +9 -9
  208. package/docs/components/Menu/examples/Menu.md +83 -80
  209. package/docs/components/MenuToggle/examples/MenuToggle.md +29 -28
  210. package/docs/components/ModalBox/examples/ModalBox.md +113 -92
  211. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +27 -26
  212. package/docs/components/Nav/examples/Navigation.md +69 -69
  213. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  214. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +64 -64
  215. package/docs/components/NumberInput/examples/NumberInput.md +311 -239
  216. package/docs/components/OptionsMenu/examples/options-menu.md +28 -28
  217. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  218. package/docs/components/Page/examples/Page.css +7 -1
  219. package/docs/components/Page/examples/Page.md +81 -54
  220. package/docs/components/Pagination/examples/Pagination.md +27 -27
  221. package/docs/components/Panel/examples/Panel.md +10 -10
  222. package/docs/components/Popover/examples/Popover.md +206 -149
  223. package/docs/components/Progress/examples/Progress.md +32 -61
  224. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -39
  225. package/docs/components/Radio/examples/Radio.md +12 -11
  226. package/docs/components/SearchInput/examples/SearchInput.md +185 -148
  227. package/docs/components/Select/examples/Select.md +368 -313
  228. package/docs/components/Sidebar/examples/Sidebar.md +70 -14
  229. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  230. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  231. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  232. package/docs/components/Slider/examples/Slider.md +84 -62
  233. package/docs/components/Spinner/examples/Spinner.md +24 -24
  234. package/docs/components/Switch/examples/Switch.md +19 -19
  235. package/docs/components/TabContent/examples/TabContent.md +13 -13
  236. package/docs/components/Table/examples/Table.css +4 -0
  237. package/docs/components/Table/examples/Table.md +5212 -5750
  238. package/docs/components/Tabs/examples/Tabs.md +155 -155
  239. package/docs/components/TextInputGroup/examples/TextInputGroup.md +523 -406
  240. package/docs/components/Tile/examples/Tile.md +16 -17
  241. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  242. package/docs/components/Title/examples/Title.md +17 -17
  243. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  244. package/docs/components/Toolbar/examples/Toolbar.md +848 -726
  245. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  246. package/docs/components/TreeView/examples/TreeView.md +34 -34
  247. package/docs/components/Truncate/examples/Truncate.md +4 -5
  248. package/docs/components/Wizard/examples/Wizard.md +119 -127
  249. package/docs/demos/AboutModal/examples/AboutModal.md +4 -5
  250. package/docs/demos/Alert/examples/Alert.md +118 -71
  251. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  252. package/docs/demos/Banner/examples/Banner.md +8 -9
  253. package/docs/demos/Card/examples/Card.md +216 -153
  254. package/docs/demos/CardView/examples/CardView.md +57 -30
  255. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  256. package/docs/demos/Dashboard/examples/Dashboard.md +51 -33
  257. package/docs/demos/DataList/examples/DataList.md +312 -255
  258. package/docs/demos/DescriptionList/examples/DescriptionList.md +33 -22
  259. package/docs/demos/Drawer/examples/Drawer.md +24 -22
  260. package/docs/demos/Form/examples/BasicForms.md +220 -213
  261. package/docs/demos/HelperText/examples/HelperText.md +16 -14
  262. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  263. package/docs/demos/Masthead/examples/Masthead.md +302 -284
  264. package/docs/demos/Modal/examples/Modal.md +54 -66
  265. package/docs/demos/Nav/examples/Nav.md +47 -47
  266. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +70 -58
  267. package/docs/demos/Page/examples/Page.md +982 -51
  268. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +22 -18
  269. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +121 -106
  270. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +345 -311
  271. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  272. package/docs/demos/Table/examples/Table.md +3323 -1288
  273. package/docs/demos/Tabs/examples/Tabs.md +141 -90
  274. package/docs/demos/Toolbar/examples/Toolbar.md +1994 -329
  275. package/docs/demos/Wizard/examples/Wizard.md +289 -266
  276. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  277. package/docs/layouts/Flex/examples/Flex.md +98 -98
  278. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  279. package/docs/layouts/Grid/examples/Grid.md +9 -9
  280. package/docs/layouts/Level/examples/Level.md +5 -5
  281. package/docs/layouts/Split/examples/Split.md +7 -7
  282. package/docs/layouts/Stack/examples/Stack.md +6 -6
  283. package/docs/utilities/Accessibility/examples/Accessibility.md +5 -5
  284. package/docs/utilities/Alignment/examples/Alignment.md +7 -7
  285. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +13 -13
  286. package/docs/utilities/BoxShadow/examples/box-shadow.md +23 -23
  287. package/docs/utilities/Display/examples/Display.md +12 -12
  288. package/docs/utilities/Flex/examples/Flex.md +35 -35
  289. package/docs/utilities/Float/examples/Float.md +5 -5
  290. package/docs/utilities/Sizing/examples/Sizing.md +51 -51
  291. package/docs/utilities/Spacing/examples/Spacing.md +35 -35
  292. package/docs/utilities/Text/examples/Text.md +31 -31
  293. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  294. package/layouts/Gallery/gallery.css +1 -1
  295. package/layouts/Gallery/gallery.scss +1 -1
  296. package/layouts/Grid/grid.css +7 -7
  297. package/layouts/Grid/grid.scss +2 -2
  298. package/package.json +59 -65
  299. package/patternfly-addons.css +48 -48
  300. package/{patternfly-base-no-reset.css → patternfly-base-no-globals.css} +28 -73
  301. package/{patternfly-base-no-reset.scss → patternfly-base-no-globals.scss} +1 -0
  302. package/patternfly-base.css +63 -114
  303. package/{patternfly-no-reset.css → patternfly-no-globals.css} +1179 -2293
  304. package/{patternfly-no-reset.scss → patternfly-no-globals.scss} +1 -0
  305. package/patternfly.css +1207 -2327
  306. package/patternfly.min.css +1 -1
  307. package/patternfly.min.css.map +1 -1
  308. package/sass-utilities/functions.scss +8 -24
  309. package/sass-utilities/mixins.scss +15 -39
  310. package/sass-utilities/placeholders.scss +0 -23
  311. package/sass-utilities/scss-variables.scss +5 -6
  312. package/sass-utilities/themes/dark/placeholders.scss +0 -22
  313. package/sass-utilities/themes/dark/scss-variables.scss +1 -1
  314. package/utilities/Spacing/spacing.scss +2 -2
  315. package/utilities/Text/text.css +48 -48
  316. package/utilities/Text/text.scss +6 -6
  317. package/utilities/Text/themes/dark/text.scss +2 -2
  318. package/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff +0 -0
  319. package/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff +0 -0
  320. package/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff +0 -0
  321. package/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff +0 -0
  322. package/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff +0 -0
  323. package/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff +0 -0
  324. package/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff +0 -0
  325. package/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff +0 -0
  326. package/assets/fonts/RedHatText/RedHatText-Bold.woff +0 -0
  327. package/assets/fonts/RedHatText/RedHatText-BoldItalic.woff +0 -0
  328. package/assets/fonts/RedHatText/RedHatText-Italic.woff +0 -0
  329. package/assets/fonts/RedHatText/RedHatText-Medium.woff +0 -0
  330. package/assets/fonts/RedHatText/RedHatText-MediumItalic.woff +0 -0
  331. package/assets/fonts/RedHatText/RedHatText-Regular.woff +0 -0
  332. package/assets/fonts/webfonts/fa-solid-900.woff +0 -0
  333. package/assets/pficon/pficon.woff +0 -0
  334. package/base/_shield-inheritable.scss +0 -69
  335. package/base/_shield-noninheritable.scss +0 -13
  336. package/base/patternfly-shield-inheritable.css +0 -66
  337. package/base/patternfly-shield-inheritable.scss +0 -4
  338. package/base/patternfly-shield-noninheritable.css +0 -9
  339. package/base/patternfly-shield-noninheritable.scss +0 -4
  340. package/sass-utilities/bs-variables.scss +0 -709
package/docs/demos/Alert/examples/Alert.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="alert-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>
@@ -913,7 +913,7 @@ section: components
913
913
  </section>
914
914
  </main>
915
915
  </div>
916
- <ul class="pf-c-alert-group pf-m-toast">
916
+ <ul class="pf-c-alert-group pf-m-toast" role="list">
917
917
  <li class="pf-c-alert-group__item">
918
918
  <div class="pf-c-alert pf-m-success" aria-label="Success alert">
919
919
  <div class="pf-c-alert__icon">
@@ -1079,7 +1079,7 @@ section: components
1079
1079
  </div>
1080
1080
  <section class="pf-c-app-launcher__group">
1081
1081
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
1082
- <ul>
1082
+ <ul role="list">
1083
1083
  <li
1084
1084
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1085
1085
  >
@@ -1131,7 +1131,7 @@ section: components
1131
1131
  <hr class="pf-c-divider" />
1132
1132
  <section class="pf-c-app-launcher__group">
1133
1133
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
1134
- <ul>
1134
+ <ul role="list">
1135
1135
  <li
1136
1136
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
1137
1137
  >
@@ -1786,7 +1786,7 @@ section: components
1786
1786
  id="alert-horizontal-example-primary-nav"
1787
1787
  aria-label="Global"
1788
1788
  >
1789
- <ul class="pf-c-nav__list">
1789
+ <ul class="pf-c-nav__list" role="list">
1790
1790
  <li class="pf-c-nav__item">
1791
1791
  <a href="#" class="pf-c-nav__link">System panel</a>
1792
1792
  </li>
@@ -1818,7 +1818,7 @@ section: components
1818
1818
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
1819
1819
  <div class="pf-c-page__main-body">
1820
1820
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
1821
- <ol class="pf-c-breadcrumb__list">
1821
+ <ol class="pf-c-breadcrumb__list" role="list">
1822
1822
  <li class="pf-c-breadcrumb__item">
1823
1823
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
1824
1824
  </li>
@@ -1892,11 +1892,16 @@ section: components
1892
1892
  aria-invalid="true"
1893
1893
  aria-describedby="alert-horizontal-example-form-name-helper"
1894
1894
  />
1895
- <p
1896
- class="pf-c-form__helper-text pf-m-error"
1897
- id="alert-horizontal-example-form-name-helper"
1898
- aria-live="polite"
1899
- >Required field</p>
1895
+ <div class="pf-c-form__helper-text" aria-live="polite">
1896
+ <div class="pf-c-helper-text">
1897
+ <div
1898
+ class="pf-c-helper-text__item pf-m-error"
1899
+ id="alert-horizontal-example-form-name-helper"
1900
+ >
1901
+ <span class="pf-c-helper-text__item-text">Required field</span>
1902
+ </div>
1903
+ </div>
1904
+ </div>
1900
1905
  </div>
1901
1906
  </div>
1902
1907
  <div class="pf-c-form__group">
@@ -1934,38 +1939,51 @@ section: components
1934
1939
  aria-invalid="true"
1935
1940
  aria-describedby="alert-horizontal-example-form-phone-helper"
1936
1941
  />
1937
- <p
1938
- class="pf-c-form__helper-text pf-m-error"
1939
- id="alert-horizontal-example-form-phone-helper"
1940
- aria-live="polite"
1941
- >Required field</p>
1942
+ <div class="pf-c-form__helper-text" aria-live="polite">
1943
+ <div class="pf-c-helper-text">
1944
+ <div
1945
+ class="pf-c-helper-text__item pf-m-error"
1946
+ id="alert-horizontal-example-form-phone-helper"
1947
+ >
1948
+ <span class="pf-c-helper-text__item-text">Required field</span>
1949
+ </div>
1950
+ </div>
1951
+ </div>
1942
1952
  </div>
1943
1953
  </div>
1944
1954
  <div
1945
1955
  class="pf-c-form__group"
1946
1956
  role="group"
1947
- aria-labelledby="alert-horizontal-example-form-check-group-legend"
1957
+ aria-labelledby="alert-horizontal-example-formalert-horizontal-example-form-check-group-legend"
1948
1958
  >
1949
1959
  <div
1950
1960
  class="pf-c-form__group-label pf-m-no-padding-top"
1951
- id="alert-horizontal-example-form-check-group-legend"
1961
+ id="alert-horizontal-example-formalert-horizontal-example-form-check-group-legend"
1952
1962
  ><span
1953
1963
  class="pf-c-form__label"
1954
- for="alert-horizontal-example-form-experience"
1964
+ for="alert-horizontal-example-form-check-group"
1955
1965
  >
1956
1966
  <span class="pf-c-form__label-text">Your experience</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></span>
1957
1967
  </div>
1958
1968
  <div class="pf-c-form__group-control">
1959
- <p
1960
- class="pf-c-form__helper-text pf-m-error"
1961
- id="alert-horizontal-example-form-simple-info-helper"
1962
- aria-live="polite"
1963
- >
1964
- <span class="pf-c-form__helper-text-icon">
1965
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1966
- </span>
1967
- This is a requied field
1968
- </p>
1969
+ <div class="pf-c-form__helper-text" aria-live="polite">
1970
+ <div class="pf-c-helper-text">
1971
+ <div
1972
+ class="pf-c-helper-text__item pf-m-error"
1973
+ id="alert-horizontal-example-form-check-group-helper"
1974
+ >
1975
+ <span class="pf-c-helper-text__item-icon">
1976
+ <i
1977
+ class="fas fa-fw fa-exclamation-circle"
1978
+ aria-hidden="true"
1979
+ ></i>
1980
+ </span>
1981
+ <span
1982
+ class="pf-c-helper-text__item-text"
1983
+ >This is a required field</span>
1984
+ </div>
1985
+ </div>
1986
+ </div>
1969
1987
  <div class="pf-c-check">
1970
1988
  <input
1971
1989
  class="pf-c-check__input"
@@ -2101,7 +2119,7 @@ section: components
2101
2119
  </div>
2102
2120
  <section class="pf-c-app-launcher__group">
2103
2121
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
2104
- <ul>
2122
+ <ul role="list">
2105
2123
  <li
2106
2124
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
2107
2125
  >
@@ -2153,7 +2171,7 @@ section: components
2153
2171
  <hr class="pf-c-divider" />
2154
2172
  <section class="pf-c-app-launcher__group">
2155
2173
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
2156
- <ul>
2174
+ <ul role="list">
2157
2175
  <li
2158
2176
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
2159
2177
  >
@@ -2808,7 +2826,7 @@ section: components
2808
2826
  id="alert-stacked-example-primary-nav"
2809
2827
  aria-label="Global"
2810
2828
  >
2811
- <ul class="pf-c-nav__list">
2829
+ <ul class="pf-c-nav__list" role="list">
2812
2830
  <li class="pf-c-nav__item">
2813
2831
  <a href="#" class="pf-c-nav__link">System panel</a>
2814
2832
  </li>
@@ -2840,7 +2858,7 @@ section: components
2840
2858
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
2841
2859
  <div class="pf-c-page__main-body">
2842
2860
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
2843
- <ol class="pf-c-breadcrumb__list">
2861
+ <ol class="pf-c-breadcrumb__list" role="list">
2844
2862
  <li class="pf-c-breadcrumb__item">
2845
2863
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
2846
2864
  </li>
@@ -2900,7 +2918,7 @@ section: components
2900
2918
  <div class="pf-c-form__group">
2901
2919
  <div class="pf-c-form__group-label"><label
2902
2920
  class="pf-c-form__label"
2903
- for="alert-stacked-example-form-form-name"
2921
+ for="alert-stacked-example-form-name"
2904
2922
  >
2905
2923
  <span class="pf-c-form__label-text">Full name</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
2906
2924
  </div>
@@ -2909,22 +2927,27 @@ section: components
2909
2927
  class="pf-c-form-control"
2910
2928
  required
2911
2929
  type="text"
2912
- id="alert-stacked-example-form-form-name"
2913
- name="alert-stacked-example-form-form-name"
2930
+ id="alert-stacked-example-form-name"
2931
+ name="alert-stacked-example-form-name"
2914
2932
  aria-invalid="true"
2915
- aria-describedby="alert-stacked-example-form-form-name-helper"
2933
+ aria-describedby="alert-stacked-example-form-helper"
2916
2934
  />
2917
- <p
2918
- class="pf-c-form__helper-text pf-m-error"
2919
- id="alert-stacked-example-form-form-name-helper-name"
2920
- aria-live="polite"
2921
- >Required field</p>
2935
+ <div class="pf-c-form__helper-text" aria-live="polite">
2936
+ <div class="pf-c-helper-text">
2937
+ <div
2938
+ class="pf-c-helper-text__item pf-m-error"
2939
+ id="alert-stacked-example-form-name-helper"
2940
+ >
2941
+ <span class="pf-c-helper-text__item-text">Required field</span>
2942
+ </div>
2943
+ </div>
2944
+ </div>
2922
2945
  </div>
2923
2946
  </div>
2924
2947
  <div class="pf-c-form__group">
2925
2948
  <div class="pf-c-form__group-label"><label
2926
2949
  class="pf-c-form__label"
2927
- for="alert-stacked-example-form-form-email"
2950
+ for="alert-stacked-example-form-email"
2928
2951
  >
2929
2952
  <span class="pf-c-form__label-text">Email</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
2930
2953
  </div>
@@ -2933,21 +2956,28 @@ section: components
2933
2956
  class="pf-c-form-control"
2934
2957
  type="text"
2935
2958
  value="patternfly.com"
2936
- id="alert-stacked-example-form-form-email"
2937
- name="alert-stacked-example-form-form-email"
2959
+ id="alert-stacked-example-form-email"
2960
+ name="alert-stacked-example-form-email"
2938
2961
  required
2939
2962
  />
2940
2963
  </div>
2941
- <p
2942
- class="pf-c-form__helper-text pf-m-error"
2943
- id="alert-stacked-example-form-form-email-helper-email"
2944
- aria-live="polite"
2945
- >Enter a valid email address: example@gmail.com</p>
2964
+ <div class="pf-c-form__helper-text" aria-live="polite">
2965
+ <div class="pf-c-helper-text">
2966
+ <div
2967
+ class="pf-c-helper-text__item pf-m-error"
2968
+ id="alert-stacked-example-form-email-helper"
2969
+ >
2970
+ <span
2971
+ class="pf-c-helper-text__item-text"
2972
+ >Enter a valid email address: example@gmail.com</span>
2973
+ </div>
2974
+ </div>
2975
+ </div>
2946
2976
  </div>
2947
2977
  <div class="pf-c-form__group">
2948
2978
  <div class="pf-c-form__group-label"><label
2949
2979
  class="pf-c-form__label"
2950
- for="alert-stacked-example-form-form-state"
2980
+ for="alert-stacked-example-form-state"
2951
2981
  >
2952
2982
  <span class="pf-c-form__label-text">State of residence</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
2953
2983
  </div>
@@ -2965,35 +2995,52 @@ section: components
2965
2995
  <option value="Option 3">MA</option>
2966
2996
  <option value="Option 4">NY</option>
2967
2997
  </select>
2968
- <p
2969
- class="pf-c-form__helper-text pf-m-error"
2970
- id="alert-stacked-example-form-form-email-helper-state"
2998
+ <div
2999
+ class="pf-c-form__helper-text"
2971
3000
  aria-live="polite"
2972
- >Required field</p>
3001
+ id="alert-stacked-example-form-state-form-email-helper-state"
3002
+ >
3003
+ <div class="pf-c-helper-text">
3004
+ <div
3005
+ class="pf-c-helper-text__item pf-m-error"
3006
+ id="alert-stacked-example-form-state-helper"
3007
+ >
3008
+ <span class="pf-c-helper-text__item-text">Required field</span>
3009
+ </div>
3010
+ </div>
3011
+ </div>
2973
3012
  </div>
2974
3013
  <div
2975
3014
  class="pf-c-form__group"
2976
3015
  role="group"
2977
- aria-labelledby="alert-stacked-example-form-check-group-legend"
3016
+ aria-labelledby="alert-stacked-example-formalert-stacked-example-form-check-group-legend"
2978
3017
  >
2979
3018
  <div
2980
3019
  class="pf-c-form__group-label pf-m-no-padding-top"
2981
- id="alert-stacked-example-form-check-group-legend"
3020
+ id="alert-stacked-example-formalert-stacked-example-form-check-group-legend"
2982
3021
  ><span
2983
3022
  class="pf-c-form__label"
2984
- for="alert-stacked-example-form-form-experience"
3023
+ for="alert-stacked-example-form-check-group"
2985
3024
  >
2986
3025
  <span class="pf-c-form__label-text">How can we contact you?</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></span>
2987
- <p
2988
- class="pf-c-form__helper-text pf-m-error"
2989
- id="alert-stacked-example-form-simple-form-info-helper-contact"
2990
- aria-live="polite"
2991
- >
2992
- <span class="pf-c-form__helper-text-icon">
2993
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
2994
- </span>
2995
- This is a requied field
2996
- </p>
3026
+ <div class="pf-c-form__helper-text" aria-live="polite">
3027
+ <div class="pf-c-helper-text">
3028
+ <div
3029
+ class="pf-c-helper-text__item pf-m-error"
3030
+ id="alert-stacked-example-form-check-group-helper"
3031
+ >
3032
+ <span class="pf-c-helper-text__item-icon">
3033
+ <i
3034
+ class="fas fa-fw fa-exclamation-circle"
3035
+ aria-hidden="true"
3036
+ ></i>
3037
+ </span>
3038
+ <span
3039
+ class="pf-c-helper-text__item-text"
3040
+ >This is a required field</span>
3041
+ </div>
3042
+ </div>
3043
+ </div>
2997
3044
  </div>
2998
3045
  <div class="pf-c-form__group-control pf-m-inline">
2999
3046
  <div class="pf-c-check">
package/docs/demos/BackToTop/examples/BackToTop.md CHANGED
@@ -96,7 +96,7 @@ cssPrefix: pf-d-back-to-top
96
96
  </div>
97
97
  <section class="pf-c-app-launcher__group">
98
98
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
99
- <ul>
99
+ <ul role="list">
100
100
  <li
101
101
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
102
102
  >
@@ -148,7 +148,7 @@ cssPrefix: pf-d-back-to-top
148
148
  <hr class="pf-c-divider" />
149
149
  <section class="pf-c-app-launcher__group">
150
150
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
151
- <ul>
151
+ <ul role="list">
152
152
  <li
153
153
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
154
154
  >
@@ -803,7 +803,7 @@ cssPrefix: pf-d-back-to-top
803
803
  id="back-to-top-basic-example-primary-nav"
804
804
  aria-label="Global"
805
805
  >
806
- <ul class="pf-c-nav__list">
806
+ <ul class="pf-c-nav__list" role="list">
807
807
  <li class="pf-c-nav__item">
808
808
  <a href="#" class="pf-c-nav__link">System panel</a>
809
809
  </li>
@@ -835,7 +835,7 @@ cssPrefix: pf-d-back-to-top
835
835
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
836
836
  <div class="pf-c-page__main-body">
837
837
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
838
- <ol class="pf-c-breadcrumb__list">
838
+ <ol class="pf-c-breadcrumb__list" role="list">
839
839
  <li class="pf-c-breadcrumb__item">
840
840
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
841
841
  </li>
package/docs/demos/Banner/examples/Banner.md CHANGED
@@ -1,7 +1,6 @@
1
1
  ---
2
2
  id: 'Banner'
3
3
  section: components
4
- beta: true
5
4
  cssPrefix: pf-c-banner
6
5
  wrapperTag: div
7
6
  ---## Examples
@@ -98,7 +97,7 @@ wrapperTag: div
98
97
  </div>
99
98
  <section class="pf-c-app-launcher__group">
100
99
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
101
- <ul>
100
+ <ul role="list">
102
101
  <li
103
102
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
104
103
  >
@@ -150,7 +149,7 @@ wrapperTag: div
150
149
  <hr class="pf-c-divider" />
151
150
  <section class="pf-c-app-launcher__group">
152
151
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
153
- <ul>
152
+ <ul role="list">
154
153
  <li
155
154
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
156
155
  >
@@ -805,7 +804,7 @@ wrapperTag: div
805
804
  id="banner-basic-example-primary-nav"
806
805
  aria-label="Global"
807
806
  >
808
- <ul class="pf-c-nav__list">
807
+ <ul class="pf-c-nav__list" role="list">
809
808
  <li class="pf-c-nav__item">
810
809
  <a href="#" class="pf-c-nav__link">System panel</a>
811
810
  </li>
@@ -851,7 +850,7 @@ wrapperTag: div
851
850
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
852
851
  <div class="pf-c-page__main-body">
853
852
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
854
- <ol class="pf-c-breadcrumb__list">
853
+ <ol class="pf-c-breadcrumb__list" role="list">
855
854
  <li class="pf-c-breadcrumb__item">
856
855
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
857
856
  </li>
@@ -1165,7 +1164,7 @@ wrapperTag: div
1165
1164
  </div>
1166
1165
  <section class="pf-c-app-launcher__group">
1167
1166
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
1168
- <ul>
1167
+ <ul role="list">
1169
1168
  <li
1170
1169
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1171
1170
  >
@@ -1221,7 +1220,7 @@ wrapperTag: div
1221
1220
  <hr class="pf-c-divider" />
1222
1221
  <section class="pf-c-app-launcher__group">
1223
1222
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
1224
- <ul>
1223
+ <ul role="list">
1225
1224
  <li
1226
1225
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
1227
1226
  >
@@ -1936,7 +1935,7 @@ wrapperTag: div
1936
1935
  id="banner-top-bottom-example-primary-nav"
1937
1936
  aria-label="Global"
1938
1937
  >
1939
- <ul class="pf-c-nav__list">
1938
+ <ul class="pf-c-nav__list" role="list">
1940
1939
  <li class="pf-c-nav__item">
1941
1940
  <a href="#" class="pf-c-nav__link">System panel</a>
1942
1941
  </li>
@@ -1968,7 +1967,7 @@ wrapperTag: div
1968
1967
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
1969
1968
  <div class="pf-c-page__main-body">
1970
1969
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
1971
- <ol class="pf-c-breadcrumb__list">
1970
+ <ol class="pf-c-breadcrumb__list" role="list">
1972
1971
  <li class="pf-c-breadcrumb__item">
1973
1972
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
1974
1973
  </li>