@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/components/Nav/examples/Navigation.md CHANGED
@@ -10,7 +10,7 @@ cssPrefix: pf-c-nav
10
10
 
11
11
  ```html
12
12
  <nav class="pf-c-nav" aria-label="Global">
13
- <ul class="pf-c-nav__list">
13
+ <ul class="pf-c-nav__list" role="list">
14
14
  <li class="pf-c-nav__item">
15
15
  <a href="#" class="pf-c-nav__link">Link 1</a>
16
16
  </li>
@@ -38,7 +38,7 @@ cssPrefix: pf-c-nav
38
38
  <nav class="pf-c-nav" aria-label="Global">
39
39
  <section class="pf-c-nav__section" aria-labelledby="grouped-title1">
40
40
  <h2 class="pf-c-nav__section-title" id="grouped-title1">Section title 1</h2>
41
- <ul class="pf-c-nav__list">
41
+ <ul class="pf-c-nav__list" role="list">
42
42
  <li class="pf-c-nav__item">
43
43
  <a href="#" class="pf-c-nav__link">Link 1</a>
44
44
  </li>
@@ -52,7 +52,7 @@ cssPrefix: pf-c-nav
52
52
  </section>
53
53
  <section class="pf-c-nav__section" aria-labelledby="grouped-title2">
54
54
  <h2 class="pf-c-nav__section-title" id="grouped-title2">Section title 2</h2>
55
- <ul class="pf-c-nav__list">
55
+ <ul class="pf-c-nav__list" role="list">
56
56
  <li class="pf-c-nav__item">
57
57
  <a href="#" class="pf-c-nav__link">Link 1</a>
58
58
  </li>
@@ -77,7 +77,7 @@ cssPrefix: pf-c-nav
77
77
  ```html
78
78
  <nav class="pf-c-nav" aria-label="Global">
79
79
  <section class="pf-c-nav__section pf-m-no-title" aria-label="Section one">
80
- <ul class="pf-c-nav__list">
80
+ <ul class="pf-c-nav__list" role="list">
81
81
  <li class="pf-c-nav__item">
82
82
  <a href="#" class="pf-c-nav__link">Link 1</a>
83
83
  </li>
@@ -91,7 +91,7 @@ cssPrefix: pf-c-nav
91
91
  </section>
92
92
  <hr class="pf-c-divider" />
93
93
  <section class="pf-c-nav__section pf-m-no-title" aria-label="Section two">
94
- <ul class="pf-c-nav__list">
94
+ <ul class="pf-c-nav__list" role="list">
95
95
  <li class="pf-c-nav__item">
96
96
  <a href="#" class="pf-c-nav__link">Section 2, link 1</a>
97
97
  </li>
@@ -116,7 +116,7 @@ cssPrefix: pf-c-nav
116
116
  ```html
117
117
  <nav class="pf-c-nav" aria-label="Global">
118
118
  <section class="pf-c-nav__section pf-m-no-title" aria-label="Section one">
119
- <ul class="pf-c-nav__list">
119
+ <ul class="pf-c-nav__list" role="list">
120
120
  <li class="pf-c-nav__item">
121
121
  <a href="#" class="pf-c-nav__link">Link 1</a>
122
122
  </li>
@@ -129,7 +129,7 @@ cssPrefix: pf-c-nav
129
129
  </ul>
130
130
  </section>
131
131
  <section class="pf-c-nav__section pf-m-no-title" aria-label="Section two">
132
- <ul class="pf-c-nav__list">
132
+ <ul class="pf-c-nav__list" role="list">
133
133
  <li class="pf-c-nav__item">
134
134
  <a href="#" class="pf-c-nav__link">Section 2, link 1</a>
135
135
  </li>
@@ -153,7 +153,7 @@ cssPrefix: pf-c-nav
153
153
 
154
154
  ```html
155
155
  <nav class="pf-c-nav" aria-label="Global">
156
- <ul class="pf-c-nav__list">
156
+ <ul class="pf-c-nav__list" role="list">
157
157
  <li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
158
158
  <button
159
159
  class="pf-c-nav__link"
@@ -168,7 +168,7 @@ cssPrefix: pf-c-nav
168
168
  </span>
169
169
  </button>
170
170
  <section class="pf-c-nav__subnav" aria-labelledby="expandable-example1">
171
- <ul class="pf-c-nav__list">
171
+ <ul class="pf-c-nav__list" role="list">
172
172
  <li class="pf-c-nav__item">
173
173
  <a href="#" class="pf-c-nav__link">Current link</a>
174
174
  </li>
@@ -202,7 +202,7 @@ cssPrefix: pf-c-nav
202
202
  </span>
203
203
  </button>
204
204
  <section class="pf-c-nav__subnav" aria-labelledby="expandable-example2">
205
- <ul class="pf-c-nav__list">
205
+ <ul class="pf-c-nav__list" role="list">
206
206
  <li class="pf-c-nav__item">
207
207
  <a href="#" class="pf-c-nav__link">Subnav link 1</a>
208
208
  </li>
@@ -230,7 +230,7 @@ cssPrefix: pf-c-nav
230
230
  aria-labelledby="expandable-example3"
231
231
  hidden
232
232
  >
233
- <ul class="pf-c-nav__list">
233
+ <ul class="pf-c-nav__list" role="list">
234
234
  <li class="pf-c-nav__item">
235
235
  <a href="#" class="pf-c-nav__link">Subnav link 1</a>
236
236
  </li>
@@ -249,7 +249,7 @@ cssPrefix: pf-c-nav
249
249
 
250
250
  ```html
251
251
  <nav class="pf-c-nav" aria-label="Global">
252
- <ul class="pf-c-nav__list">
252
+ <ul class="pf-c-nav__list" role="list">
253
253
  <li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
254
254
  <button class="pf-c-nav__link" aria-expanded="true">
255
255
  Link 1
@@ -264,7 +264,7 @@ cssPrefix: pf-c-nav
264
264
  class="pf-c-nav__subnav-title pf-screen-reader"
265
265
  id="subnav-title1"
266
266
  >Current and expanded example sub-navigation</h2>
267
- <ul class="pf-c-nav__list">
267
+ <ul class="pf-c-nav__list" role="list">
268
268
  <li class="pf-c-nav__item">
269
269
  <a href="#" class="pf-c-nav__link">Current link</a>
270
270
  </li>
@@ -295,7 +295,7 @@ cssPrefix: pf-c-nav
295
295
  class="pf-c-nav__subnav-title pf-screen-reader"
296
296
  id="subnav-title2"
297
297
  >Expanded, but not current example sub-navigation</h2>
298
- <ul class="pf-c-nav__list">
298
+ <ul class="pf-c-nav__list" role="list">
299
299
  <li class="pf-c-nav__item">
300
300
  <a href="#" class="pf-c-nav__link">Subnav link 1</a>
301
301
  </li>
@@ -314,7 +314,7 @@ cssPrefix: pf-c-nav
314
314
 
315
315
  ```html
316
316
  <nav class="pf-c-nav" aria-label="Global">
317
- <ul class="pf-c-nav__list">
317
+ <ul class="pf-c-nav__list" role="list">
318
318
  <li class="pf-c-nav__item">
319
319
  <a href="#" class="pf-c-nav__link">Link 1 (not expandable)</a>
320
320
  </li>
@@ -330,7 +330,7 @@ cssPrefix: pf-c-nav
330
330
  </span>
331
331
  </button>
332
332
  <section class="pf-c-nav__subnav" aria-labelledby="nav-mixed-link2">
333
- <ul class="pf-c-nav__list">
333
+ <ul class="pf-c-nav__list" role="list">
334
334
  <li class="pf-c-nav__item">
335
335
  <a href="#" class="pf-c-nav__link">Subnav link 1</a>
336
336
  </li>
@@ -356,7 +356,7 @@ cssPrefix: pf-c-nav
356
356
  aria-labelledby="nav-mixed-link4"
357
357
  hidden
358
358
  >
359
- <ul class="pf-c-nav__list">
359
+ <ul class="pf-c-nav__list" role="list">
360
360
  <li class="pf-c-nav__item">
361
361
  <a href="#" class="pf-c-nav__link">Subnav link 1</a>
362
362
  </li>
@@ -382,7 +382,7 @@ cssPrefix: pf-c-nav
382
382
 
383
383
  ```html
384
384
  <nav class="pf-c-nav" aria-label="Global">
385
- <ul class="pf-c-nav__list">
385
+ <ul class="pf-c-nav__list" role="list">
386
386
  <li class="pf-c-nav__item">
387
387
  <a href="#" class="pf-c-nav__link">Clusters</a>
388
388
  </li>
@@ -410,7 +410,7 @@ cssPrefix: pf-c-nav
410
410
  aria-labelledby="expandable-third-level-example-example-1"
411
411
  hidden
412
412
  >
413
- <ul class="pf-c-nav__list">
413
+ <ul class="pf-c-nav__list" role="list">
414
414
  <li class="pf-c-nav__item">
415
415
  <a href="#" class="pf-c-nav__link">Subnav link 1</a>
416
416
  </li>
@@ -437,7 +437,7 @@ cssPrefix: pf-c-nav
437
437
  class="pf-c-nav__subnav"
438
438
  aria-labelledby="expandable-third-level-example-example-2"
439
439
  >
440
- <ul class="pf-c-nav__list">
440
+ <ul class="pf-c-nav__list" role="list">
441
441
  <li class="pf-c-nav__item">
442
442
  <a href="#" class="pf-c-nav__link">Overview</a>
443
443
  </li>
@@ -461,7 +461,7 @@ cssPrefix: pf-c-nav
461
461
  class="pf-c-nav__subnav"
462
462
  aria-labelledby="expandable-third-level-example-sub-example-1"
463
463
  >
464
- <ul class="pf-c-nav__list">
464
+ <ul class="pf-c-nav__list" role="list">
465
465
  <li class="pf-c-nav__item">
466
466
  <a href="#" class="pf-c-nav__link">Amazon Web Services</a>
467
467
  </li>
@@ -498,7 +498,7 @@ cssPrefix: pf-c-nav
498
498
  <button class="pf-c-nav__scroll-button" disabled aria-label="Scroll left">
499
499
  <i class="fas fa-angle-left" aria-hidden="true"></i>
500
500
  </button>
501
- <ul class="pf-c-nav__list">
501
+ <ul class="pf-c-nav__list" role="list">
502
502
  <li class="pf-c-nav__item">
503
503
  <a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">Item 1</a>
504
504
  </li>
@@ -523,7 +523,7 @@ cssPrefix: pf-c-nav
523
523
  <button class="pf-c-nav__scroll-button" disabled aria-label="Scroll left">
524
524
  <i class="fas fa-angle-left" aria-hidden="true"></i>
525
525
  </button>
526
- <ul class="pf-c-nav__list">
526
+ <ul class="pf-c-nav__list" role="list">
527
527
  <li class="pf-c-nav__item">
528
528
  <a href="#" class="pf-c-nav__link">Horizontal nav item 1</a>
529
529
  </li>
@@ -555,7 +555,7 @@ cssPrefix: pf-c-nav
555
555
 
556
556
  ```html
557
557
  <nav class="pf-c-nav pf-m-horizontal-subnav" aria-label="Local">
558
- <ul class="pf-c-nav__list">
558
+ <ul class="pf-c-nav__list" role="list">
559
559
  <li class="pf-c-nav__item">
560
560
  <a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">Item 1</a>
561
561
  </li>
@@ -580,7 +580,7 @@ cssPrefix: pf-c-nav
580
580
  <button class="pf-c-nav__scroll-button" disabled aria-label="Scroll left">
581
581
  <i class="fas fa-angle-left" aria-hidden="true"></i>
582
582
  </button>
583
- <ul class="pf-c-nav__list">
583
+ <ul class="pf-c-nav__list" role="list">
584
584
  <li class="pf-c-nav__item">
585
585
  <a href="#" class="pf-c-nav__link">Horizontal nav item 1</a>
586
586
  </li>
@@ -615,7 +615,7 @@ cssPrefix: pf-c-nav
615
615
  <button class="pf-c-nav__scroll-button" disabled aria-label="Scroll left">
616
616
  <i class="fas fa-angle-left" aria-hidden="true"></i>
617
617
  </button>
618
- <ul class="pf-c-nav__list">
618
+ <ul class="pf-c-nav__list" role="list">
619
619
  <li class="pf-c-nav__item">
620
620
  <a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">Item 1</a>
621
621
  </li>
@@ -640,7 +640,7 @@ cssPrefix: pf-c-nav
640
640
  <button class="pf-c-nav__scroll-button" disabled aria-label="Scroll left">
641
641
  <i class="fas fa-angle-left" aria-hidden="true"></i>
642
642
  </button>
643
- <ul class="pf-c-nav__list">
643
+ <ul class="pf-c-nav__list" role="list">
644
644
  <li class="pf-c-nav__item">
645
645
  <a
646
646
  href="#"
@@ -672,7 +672,7 @@ cssPrefix: pf-c-nav
672
672
 
673
673
  ```html
674
674
  <nav class="pf-c-nav pf-m-light" aria-label="Global">
675
- <ul class="pf-c-nav__list">
675
+ <ul class="pf-c-nav__list" role="list">
676
676
  <li class="pf-c-nav__item">
677
677
  <a href="#" class="pf-c-nav__link">Current link</a>
678
678
  </li>
@@ -694,7 +694,7 @@ cssPrefix: pf-c-nav
694
694
 
695
695
  ```html
696
696
  <nav class="pf-c-nav pf-m-light" aria-label="Global">
697
- <ul class="pf-c-nav__list">
697
+ <ul class="pf-c-nav__list" role="list">
698
698
  <li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
699
699
  <button
700
700
  class="pf-c-nav__link"
@@ -712,7 +712,7 @@ cssPrefix: pf-c-nav
712
712
  class="pf-c-nav__subnav"
713
713
  aria-labelledby="expandable-light-example1"
714
714
  >
715
- <ul class="pf-c-nav__list">
715
+ <ul class="pf-c-nav__list" role="list">
716
716
  <li class="pf-c-nav__item">
717
717
  <a href="#" class="pf-c-nav__link">Current link</a>
718
718
  </li>
@@ -749,7 +749,7 @@ cssPrefix: pf-c-nav
749
749
  class="pf-c-nav__subnav"
750
750
  aria-labelledby="expandable-light-example2"
751
751
  >
752
- <ul class="pf-c-nav__list">
752
+ <ul class="pf-c-nav__list" role="list">
753
753
  <li class="pf-c-nav__item">
754
754
  <a href="#" class="pf-c-nav__link">Subnav link 1</a>
755
755
  </li>
@@ -777,7 +777,7 @@ cssPrefix: pf-c-nav
777
777
  aria-labelledby="expandable-light-example3"
778
778
  hidden
779
779
  >
780
- <ul class="pf-c-nav__list">
780
+ <ul class="pf-c-nav__list" role="list">
781
781
  <li class="pf-c-nav__item">
782
782
  <a href="#" class="pf-c-nav__link">Subnav link 1</a>
783
783
  </li>
@@ -796,7 +796,7 @@ cssPrefix: pf-c-nav
796
796
 
797
797
  ```html isBeta
798
798
  <nav class="pf-c-nav" aria-label="Global">
799
- <ul class="pf-c-nav__list">
799
+ <ul class="pf-c-nav__list" role="list">
800
800
  <li class="pf-c-nav__item">
801
801
  <a href="#" class="pf-c-nav__link">Clusters</a>
802
802
  </li>
@@ -2404,45 +2404,45 @@ cssPrefix: pf-c-nav
2404
2404
 
2405
2405
  The navigation system relies on several different sub-components:
2406
2406
 
2407
- - `.pf-c-nav__list` - default navigation list. It is the basis for both default and expandable, vertical navigation.
2407
+ * `.pf-c-nav__list` - default navigation list. It is the basis for both default and expandable, vertical navigation.
2408
2408
 
2409
2409
  ### Accessibility
2410
2410
 
2411
- | Attribute | Applied to | Outcome |
2412
- | -------------------------------------------------------- | -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
2413
- | `aria-label="[landmark description]"` | `.pf-c-nav` | Describes `<nav>` landmark. |
2414
- | `aria-label="[section title]"` | `.pf-c-nav__section` | Describes a nav `<section>`, where a `.pf-c-nav__section-title` is not present. |
2415
- | `aria-labelledby="[id value of link describing subnav]"` | `.pf-c-nav__subnav` | Gives the subnav `<section>` landmark an accessible name by referring to the element that provides the subnav `<section>` landmark title. |
2416
- | `aria-expanded="false"` | `.pf-c-nav__link` | Indicates that subnav section is hidden. |
2417
- | `aria-expanded="true"` | `.pf-c-nav__link` | Indicates that subnav section is visible. |
2418
- | `hidden` | `.pf-c-nav__subnav` | Indicates that the subnav section is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
2419
- | `disabled` | `.pf-c-nav__scroll-button` | Indicates that a scroll button is disabled, when at the first or last item of a list. **Required when disabled** |
2420
- | `aria-current="page"` | `.pf-c-nav__link` | Indicates the current page link. Can only occur once on page. |
2421
- | `aria-haspopup="true"` | `.pf-c-nav__link` | Declares that a nav item has a submenu. |
2411
+ | Attribute | Applied to | Outcome |
2412
+ | -- | -- | -- |
2413
+ | `aria-label="[landmark description]"` | `.pf-c-nav` | Describes `<nav>` landmark. |
2414
+ | `aria-label="[section title]"` | `.pf-c-nav__section` | Describes a nav `<section>`, where a `.pf-c-nav__section-title` is not present. |
2415
+ | `aria-labelledby="[id value of link describing subnav]"` | `.pf-c-nav__subnav` | Gives the subnav `<section>` landmark an accessible name by referring to the element that provides the subnav `<section>` landmark title. |
2416
+ | `aria-expanded="false"` | `.pf-c-nav__link` | Indicates that subnav section is hidden. |
2417
+ | `aria-expanded="true"` | `.pf-c-nav__link` | Indicates that subnav section is visible. |
2418
+ | `hidden` | `.pf-c-nav__subnav` | Indicates that the subnav section is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
2419
+ | `disabled` | `.pf-c-nav__scroll-button` | Indicates that a scroll button is disabled, when at the first or last item of a list. **Required when disabled** |
2420
+ | `aria-current="page"` | `.pf-c-nav__link` | Indicates the current page link. Can only occur once on page. |
2421
+ | `aria-haspopup="true"` | `.pf-c-nav__link` | Declares that a nav item has a submenu. |
2422
2422
 
2423
2423
  ### Usage
2424
2424
 
2425
- | Class | Applied to | Outcome |
2426
- | -------------------------- | ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
2427
- | `.pf-c-nav` | `<nav>` | Initiates a primary nav element. |
2428
- | `.pf-c-nav__subnav` | `<section>` | Initiates a subnav section. |
2429
- | `.pf-c-nav__list` | `<ul>` | Initiates nav list. |
2430
- | `.pf-c-nav__item` | `<li>` | Initiates nav list item. |
2431
- | `.pf-c-nav__link` | `<a>` | Initiates nav list link. |
2432
- | `.pf-c-nav__section` | `<section>` | Initiates a nav section element. |
2433
- | `.pf-c-nav__section-title` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` | Initiates a nav section title. |
2434
- | `.pf-c-nav__toggle` | `<span>` | Initiates the nav toggle wrapper. |
2435
- | `.pf-c-nav__toggle-icon` | `<span>` | Initiates a nav toggle icon wrapper. |
2436
- | `.pf-c-nav__scroll-button` | `<button>` | Initiates a nav scroll button. **Required for horizontal navs** |
2437
- | `.pf-m-horizontal` | `.pf-c-nav` | Modifies nav for the horizontal variation. |
2438
- | `.pf-m-no-title` | `.pf-c-nav__section` | Modifies nav section margin top to 0. |
2439
- | `.pf-m-horizontal-subnav` | `.pf-c-nav` | Modifies nav for the horizontal subnav variation. |
2440
- | `.pf-m-tertiary` | `.pf-c-nav` | Modifies nav for the tertiary variation. |
2441
- | `.pf-m-light` | `.pf-c-nav` | Modifies nav for the light variation. **Note: only for use with vertical navs, and requires `.pf-m-light` on the page component's sidebar element (`.pf-c-page__sidebar`)**. |
2442
- | `.pf-m-flyout` | `.pf-c-nav__item` | Modifies nav item for the flyout variation. |
2443
- | `.pf-m-scrollable` | `.pf-c-nav` | Modifies nav for the scrollable state. |
2444
- | `.pf-m-expandable` | `.pf-c-nav__item` | Modifies for the expandable state. |
2445
- | `.pf-m-expanded` | `.pf-c-nav__item` | Modifies for the expanded state. |
2446
- | `.pf-m-current` | `.pf-c-nav__link` | Modifies for the current state. |
2447
- | `.pf-m-hover` | `.pf-c-nav__link` | Modifies for the hover state. |
2448
- | `.pf-m-start` | `.pf-c-nav__toggle` | Modifies nav toggle to align left. |
2425
+ | Class | Applied to | Outcome |
2426
+ | -- | -- | -- |
2427
+ | `.pf-c-nav` | `<nav>` | Initiates a primary nav element. |
2428
+ | `.pf-c-nav__subnav` | `<section>` | Initiates a subnav section. |
2429
+ | `.pf-c-nav__list` | `<ul>` | Initiates nav list. |
2430
+ | `.pf-c-nav__item` | `<li>` | Initiates nav list item. |
2431
+ | `.pf-c-nav__link` | `<a>` | Initiates nav list link. |
2432
+ | `.pf-c-nav__section` | `<section>` | Initiates a nav section element. |
2433
+ | `.pf-c-nav__section-title` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` | Initiates a nav section title. |
2434
+ | `.pf-c-nav__toggle` | `<span>` | Initiates the nav toggle wrapper. |
2435
+ | `.pf-c-nav__toggle-icon` | `<span>` | Initiates a nav toggle icon wrapper. |
2436
+ | `.pf-c-nav__scroll-button` | `<button>` | Initiates a nav scroll button. **Required for horizontal navs** |
2437
+ | `.pf-m-horizontal` | `.pf-c-nav` | Modifies nav for the horizontal variation. |
2438
+ | `.pf-m-no-title` | `.pf-c-nav__section` | Modifies nav section margin top to 0. |
2439
+ | `.pf-m-horizontal-subnav` | `.pf-c-nav` | Modifies nav for the horizontal subnav variation. |
2440
+ | `.pf-m-tertiary` | `.pf-c-nav` | Modifies nav for the tertiary variation. |
2441
+ | `.pf-m-light` | `.pf-c-nav` | Modifies nav for the light variation. **Note: only for use with vertical navs, and requires `.pf-m-light` on the page component's sidebar element (`.pf-c-page__sidebar`)**. |
2442
+ | `.pf-m-flyout` | `.pf-c-nav__item` | Modifies nav item for the flyout variation. |
2443
+ | `.pf-m-scrollable` | `.pf-c-nav` | Modifies nav for the scrollable state. |
2444
+ | `.pf-m-expandable` | `.pf-c-nav__item` | Modifies for the expandable state. |
2445
+ | `.pf-m-expanded` | `.pf-c-nav__item` | Modifies for the expanded state. |
2446
+ | `.pf-m-current` | `.pf-c-nav__link` | Modifies for the current state. |
2447
+ | `.pf-m-hover` | `.pf-c-nav__link` | Modifies for the hover state. |
2448
+ | `.pf-m-start` | `.pf-c-nav__toggle` | Modifies nav toggle to align left. |
package/docs/components/NotificationBadge/examples/NotificationBadge.md CHANGED
@@ -214,11 +214,11 @@ Be sure that the component associated with this indicator handles screen reader
214
214
 
215
215
  ### Usage
216
216
 
217
- | Class | Applied to | Outcome |
218
- | --------------------------------- | -------------------------- | ------------------------------------------------------------------------ |
219
- | `.pf-c-notification-badge` | `<div>` | Initiates a notification badge. **Always use it with a modifier class.** |
220
- | `.pf-c-notification-badge__count` | `<span>` | Initiates a notification badge count. |
221
- | `.pf-m-read` | `.pf-c-notification-badge` | Applies read notification badge styling. |
222
- | `.pf-m-unread` | `.pf-c-notification-badge` | Applies unread notification badge styling. |
223
- | `.pf-m-attention` | `.pf-c-notification-badge` | Applies attention notification badge styling. |
224
- | `.pf-m-expanded` | `.pf-c-notification-badge` | Applies expanded notification badge styling. |
217
+ | Class | Applied to | Outcome |
218
+ | -- | -- | -- |
219
+ | `.pf-c-notification-badge` | `<div>` | Initiates a notification badge. **Always use it with a modifier class.** |
220
+ | `.pf-c-notification-badge__count` | `<span>` | Initiates a notification badge count. |
221
+ | `.pf-m-read` | `.pf-c-notification-badge` | Applies read notification badge styling. |
222
+ | `.pf-m-unread` | `.pf-c-notification-badge` | Applies unread notification badge styling. |
223
+ | `.pf-m-attention` | `.pf-c-notification-badge` | Applies attention notification badge styling. |
224
+ | `.pf-m-expanded` | `.pf-c-notification-badge` | Applies expanded notification badge styling. |