@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/NotificationDrawer/examples/NotificationDrawer.md CHANGED
@@ -62,7 +62,7 @@ cssPrefix: pf-c-notification-drawer
62
62
  </div>
63
63
  </div>
64
64
  <div class="pf-c-notification-drawer__body">
65
- <ul class="pf-c-notification-drawer__list">
65
+ <ul class="pf-c-notification-drawer__list" role="list">
66
66
  <li
67
67
  class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-info"
68
68
  tabindex="0"
@@ -128,7 +128,7 @@ cssPrefix: pf-c-notification-drawer
128
128
  </li>
129
129
 
130
130
  <li
131
- class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
131
+ class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
132
132
  tabindex="0"
133
133
  >
134
134
  <div class="pf-c-notification-drawer__list-item-header">
@@ -136,7 +136,7 @@ cssPrefix: pf-c-notification-drawer
136
136
  <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
137
137
  </span>
138
138
  <h2 class="pf-c-notification-drawer__list-item-header-title">
139
- <span class="pf-screen-reader">Default notification:</span>
139
+ <span class="pf-screen-reader">Custom notification:</span>
140
140
  Unread
141
141
  recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
142
142
  </h2>
@@ -194,7 +194,7 @@ cssPrefix: pf-c-notification-drawer
194
194
  </li>
195
195
 
196
196
  <li
197
- class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
197
+ class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
198
198
  tabindex="0"
199
199
  >
200
200
  <div class="pf-c-notification-drawer__list-item-header">
@@ -202,7 +202,7 @@ cssPrefix: pf-c-notification-drawer
202
202
  <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
203
203
  </span>
204
204
  <h2 class="pf-c-notification-drawer__list-item-header-title">
205
- <span class="pf-screen-reader">Default notification:</span>
205
+ <span class="pf-screen-reader">Custom notification:</span>
206
206
  Unread
207
207
  recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
208
208
  </h2>
@@ -597,7 +597,7 @@ cssPrefix: pf-c-notification-drawer
597
597
  </span>
598
598
  </button>
599
599
  </h1>
600
- <ul class="pf-c-notification-drawer__list" hidden>
600
+ <ul class="pf-c-notification-drawer__list" role="list" hidden>
601
601
  <li
602
602
  class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-info"
603
603
  tabindex="0"
@@ -668,7 +668,7 @@ cssPrefix: pf-c-notification-drawer
668
668
  </li>
669
669
 
670
670
  <li
671
- class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
671
+ class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
672
672
  tabindex="0"
673
673
  >
674
674
  <div class="pf-c-notification-drawer__list-item-header">
@@ -676,7 +676,7 @@ cssPrefix: pf-c-notification-drawer
676
676
  <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
677
677
  </span>
678
678
  <h2 class="pf-c-notification-drawer__list-item-header-title">
679
- <span class="pf-screen-reader">Default notification:</span>
679
+ <span class="pf-screen-reader">Custom notification:</span>
680
680
  Unread
681
681
  recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
682
682
  </h2>
@@ -737,7 +737,7 @@ cssPrefix: pf-c-notification-drawer
737
737
  </li>
738
738
 
739
739
  <li
740
- class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
740
+ class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
741
741
  tabindex="0"
742
742
  >
743
743
  <div class="pf-c-notification-drawer__list-item-header">
@@ -745,7 +745,7 @@ cssPrefix: pf-c-notification-drawer
745
745
  <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
746
746
  </span>
747
747
  <h2 class="pf-c-notification-drawer__list-item-header-title">
748
- <span class="pf-screen-reader">Default notification:</span>
748
+ <span class="pf-screen-reader">Custom notification:</span>
749
749
  Unread
750
750
  recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
751
751
  </h2>
@@ -1092,7 +1092,7 @@ cssPrefix: pf-c-notification-drawer
1092
1092
  </span>
1093
1093
  </button>
1094
1094
  </h1>
1095
- <ul class="pf-c-notification-drawer__list">
1095
+ <ul class="pf-c-notification-drawer__list" role="list">
1096
1096
  <li
1097
1097
  class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-info"
1098
1098
  tabindex="0"
@@ -1163,7 +1163,7 @@ cssPrefix: pf-c-notification-drawer
1163
1163
  </li>
1164
1164
 
1165
1165
  <li
1166
- class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
1166
+ class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
1167
1167
  tabindex="0"
1168
1168
  >
1169
1169
  <div class="pf-c-notification-drawer__list-item-header">
@@ -1171,7 +1171,7 @@ cssPrefix: pf-c-notification-drawer
1171
1171
  <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
1172
1172
  </span>
1173
1173
  <h2 class="pf-c-notification-drawer__list-item-header-title">
1174
- <span class="pf-screen-reader">Default notification:</span>
1174
+ <span class="pf-screen-reader">Custom notification:</span>
1175
1175
  Unread
1176
1176
  recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
1177
1177
  </h2>
@@ -1232,7 +1232,7 @@ cssPrefix: pf-c-notification-drawer
1232
1232
  </li>
1233
1233
 
1234
1234
  <li
1235
- class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
1235
+ class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
1236
1236
  tabindex="0"
1237
1237
  >
1238
1238
  <div class="pf-c-notification-drawer__list-item-header">
@@ -1240,7 +1240,7 @@ cssPrefix: pf-c-notification-drawer
1240
1240
  <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
1241
1241
  </span>
1242
1242
  <h2 class="pf-c-notification-drawer__list-item-header-title">
1243
- <span class="pf-screen-reader">Default notification:</span>
1243
+ <span class="pf-screen-reader">Custom notification:</span>
1244
1244
  Unread
1245
1245
  recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
1246
1246
  </h2>
@@ -1587,7 +1587,7 @@ cssPrefix: pf-c-notification-drawer
1587
1587
  </span>
1588
1588
  </button>
1589
1589
  </h1>
1590
- <ul class="pf-c-notification-drawer__list" hidden>
1590
+ <ul class="pf-c-notification-drawer__list" role="list" hidden>
1591
1591
  <li
1592
1592
  class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-info"
1593
1593
  tabindex="0"
@@ -1658,7 +1658,7 @@ cssPrefix: pf-c-notification-drawer
1658
1658
  </li>
1659
1659
 
1660
1660
  <li
1661
- class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
1661
+ class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
1662
1662
  tabindex="0"
1663
1663
  >
1664
1664
  <div class="pf-c-notification-drawer__list-item-header">
@@ -1666,7 +1666,7 @@ cssPrefix: pf-c-notification-drawer
1666
1666
  <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
1667
1667
  </span>
1668
1668
  <h2 class="pf-c-notification-drawer__list-item-header-title">
1669
- <span class="pf-screen-reader">Default notification:</span>
1669
+ <span class="pf-screen-reader">Custom notification:</span>
1670
1670
  Unread
1671
1671
  recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
1672
1672
  </h2>
@@ -1727,7 +1727,7 @@ cssPrefix: pf-c-notification-drawer
1727
1727
  </li>
1728
1728
 
1729
1729
  <li
1730
- class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
1730
+ class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
1731
1731
  tabindex="0"
1732
1732
  >
1733
1733
  <div class="pf-c-notification-drawer__list-item-header">
@@ -1735,7 +1735,7 @@ cssPrefix: pf-c-notification-drawer
1735
1735
  <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
1736
1736
  </span>
1737
1737
  <h2 class="pf-c-notification-drawer__list-item-header-title">
1738
- <span class="pf-screen-reader">Default notification:</span>
1738
+ <span class="pf-screen-reader">Custom notification:</span>
1739
1739
  Unread
1740
1740
  recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
1741
1741
  </h2>
@@ -2082,7 +2082,7 @@ cssPrefix: pf-c-notification-drawer
2082
2082
  </span>
2083
2083
  </button>
2084
2084
  </h1>
2085
- <ul class="pf-c-notification-drawer__list" hidden>
2085
+ <ul class="pf-c-notification-drawer__list" role="list" hidden>
2086
2086
  <li
2087
2087
  class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-info"
2088
2088
  tabindex="0"
@@ -2153,7 +2153,7 @@ cssPrefix: pf-c-notification-drawer
2153
2153
  </li>
2154
2154
 
2155
2155
  <li
2156
- class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
2156
+ class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
2157
2157
  tabindex="0"
2158
2158
  >
2159
2159
  <div class="pf-c-notification-drawer__list-item-header">
@@ -2161,7 +2161,7 @@ cssPrefix: pf-c-notification-drawer
2161
2161
  <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
2162
2162
  </span>
2163
2163
  <h2 class="pf-c-notification-drawer__list-item-header-title">
2164
- <span class="pf-screen-reader">Default notification:</span>
2164
+ <span class="pf-screen-reader">Custom notification:</span>
2165
2165
  Unread
2166
2166
  recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
2167
2167
  </h2>
@@ -2222,7 +2222,7 @@ cssPrefix: pf-c-notification-drawer
2222
2222
  </li>
2223
2223
 
2224
2224
  <li
2225
- class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
2225
+ class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
2226
2226
  tabindex="0"
2227
2227
  >
2228
2228
  <div class="pf-c-notification-drawer__list-item-header">
@@ -2230,7 +2230,7 @@ cssPrefix: pf-c-notification-drawer
2230
2230
  <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
2231
2231
  </span>
2232
2232
  <h2 class="pf-c-notification-drawer__list-item-header-title">
2233
- <span class="pf-screen-reader">Default notification:</span>
2233
+ <span class="pf-screen-reader">Custom notification:</span>
2234
2234
  Unread
2235
2235
  recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
2236
2236
  </h2>
@@ -2568,45 +2568,45 @@ cssPrefix: pf-c-notification-drawer
2568
2568
 
2569
2569
  ### Accessibility
2570
2570
 
2571
- | Attribute | Applied to | Outcome |
2572
- | ----------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
2573
- | `aria-expanded="false"` | `.pf-c-notification-drawer__group-toggle` | Indicates that the group notification list is hidden. |
2574
- | `aria-expanded="true"` | `.pf-c-notification-drawer__group-toggle` | Indicates that the group notification list is visible. |
2575
- | `hidden` | `.pf-c-notification-drawer__list` | Indicates that the group notification list is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
2576
- | `tabindex="0"` | `.pf-c-notification-drawer__list-item.pf-m-hoverable` | Inserts the hoverable list item into the tab order of the page so that it is focusable. |
2577
- | `aria-hidden="true"` | `.pf-c-notification-drawer__group-toggle-icon > *`, `.pf-c-notification-drawer__list-item-header-icon > *` | Hides icon for assistive technologies. |
2571
+ | Attribute | Applied to | Outcome |
2572
+ | -- | -- | -- |
2573
+ | `aria-expanded="false"` | `.pf-c-notification-drawer__group-toggle` | Indicates that the group notification list is hidden. |
2574
+ | `aria-expanded="true"` | `.pf-c-notification-drawer__group-toggle` | Indicates that the group notification list is visible. |
2575
+ | `hidden` | `.pf-c-notification-drawer__list` | Indicates that the group notification list is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
2576
+ | `tabindex="0"` | `.pf-c-notification-drawer__list-item.pf-m-hoverable` | Inserts the hoverable list item into the tab order of the page so that it is focusable. |
2577
+ | `aria-hidden="true"` | `.pf-c-notification-drawer__group-toggle-icon > *`, `.pf-c-notification-drawer__list-item-header-icon > *` | Hides icon for assistive technologies. |
2578
2578
 
2579
2579
  ### Usage
2580
2580
 
2581
- | Class | Applied to | Outcome |
2582
- | --------------------------------------------------- | --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
2583
- | `.pf-c-notification-drawer` | `<div>` | Initiates the notification drawer. **Required** |
2584
- | `.pf-c-notification-drawer__header` | `<div>` | Initiates the notification drawer header. **Required** |
2585
- | `.pf-c-notification-drawer__header-title` | `<h1>` | Initiates the notification drawer header title. **Required** |
2586
- | `.pf-c-notification-drawer__header-status` | `<span>` | Initiates the notification drawer header status. |
2587
- | `.pf-c-notification-drawer__header-action` | `<div>` | Initiates the notification drawer header action. |
2588
- | `.pf-c-notification-drawer__header-action-close` | `<div>` | Initiates the notification drawer header action button. |
2589
- | `.pf-c-notification-drawer__body` | `<div>` | Initiates the notification drawer body. **Required** |
2590
- | `.pf-c-notification-drawer__list` | `<ul>` | Initiates a notification list. **Required** |
2591
- | `.pf-c-notification-drawer__list-item` | `<li>` | Initiates a notification list item. **Always use with a state modifier - one of `.pf-m-info`, `.pf-m-warning`, `.pf-m-danger`, `.pf-m-success`.** **Required** |
2592
- | `.pf-c-notification-drawer__list-item-header` | `<div>` | Initiates a notification list item header. **Required** |
2593
- | `.pf-c-notification-drawer__list-item-header-icon` | `<span>` | Initiates a notification list item header icon. **Required** |
2594
- | `.pf-c-notification-drawer__list-item-header-title` | `<h2>` | Initiates a notification list item header title. **Required** |
2595
- | `.pf-c-notification-drawer__list-item-action` | `<div>` | Initiates a notification list item action. |
2596
- | `.pf-c-notification-drawer__list-item-description` | `<div>` | Initiates a notification list item description. **Required** |
2597
- | `.pf-c-notification-drawer__list-item-timestamp` | `<div>` | Initiates a notification list item timestamp. **Required** |
2598
- | `.pf-c-notification-drawer__group-list` | `<div>` | Initiates a notification group list. **Required when notifications are grouped** |
2599
- | `.pf-c-notification-drawer__group` | `<section>` | Initiates a notification group. **Required** |
2600
- | `.pf-c-notification-drawer__group-toggle` | `<button>` | Initiates a notification group toggle. **Required** |
2601
- | `.pf-c-notification-drawer__group-title` | `<div>` | Initiates a notification group toggle title. **Required** |
2602
- | `.pf-c-notification-drawer__group-count` | `<div>` | Initiates a notification group toggle count. |
2603
- | `.pf-c-notification-drawer__group-icon` | `<span>` | Initiates a notification group toggle icon. **Required** |
2604
- | `.pf-m-default` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item for the default state. |
2605
- | `.pf-m-info` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item for the info state. |
2606
- | `.pf-m-warning` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item for the warning state. |
2607
- | `.pf-m-danger` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item for the danger state. |
2608
- | `.pf-m-success` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item for the success state. |
2609
- | `.pf-m-read` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item for the read state. |
2610
- | `.pf-m-hoverable` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item hover states to inidicate it is clickable. |
2611
- | `.pf-m-expanded` | `.pf-c-notification-drawer__group` | Modifies a notification group for the expanded state. |
2612
- | `.pf-m-truncate` | `.pf-c-notification-drawer__list-item-header-title` | Modifies the title to display a single line and truncate any overflow text with ellipses. **Note:** you can specify the max number of lines to show by setting the `--pf-c-notification-drawer__list-item-header-title--max-lines` (the default value is `1`). |
2581
+ | Class | Applied to | Outcome |
2582
+ | -- | -- | -- |
2583
+ | `.pf-c-notification-drawer` | `<div>` | Initiates the notification drawer. **Required** |
2584
+ | `.pf-c-notification-drawer__header` | `<div>` | Initiates the notification drawer header. **Required** |
2585
+ | `.pf-c-notification-drawer__header-title` | `<h1>` | Initiates the notification drawer header title. **Required** |
2586
+ | `.pf-c-notification-drawer__header-status` | `<span>` | Initiates the notification drawer header status. |
2587
+ | `.pf-c-notification-drawer__header-action` | `<div>` | Initiates the notification drawer header action. |
2588
+ | `.pf-c-notification-drawer__header-action-close` | `<div>` | Initiates the notification drawer header action button. |
2589
+ | `.pf-c-notification-drawer__body` | `<div>` | Initiates the notification drawer body. **Required** |
2590
+ | `.pf-c-notification-drawer__list` | `<ul>` | Initiates a notification list. **Required** |
2591
+ | `.pf-c-notification-drawer__list-item` | `<li>` | Initiates a notification list item. Always use with a state modifier class. **Required** |
2592
+ | `.pf-c-notification-drawer__list-item-header` | `<div>` | Initiates a notification list item header. **Required** |
2593
+ | `.pf-c-notification-drawer__list-item-header-icon` | `<span>` | Initiates a notification list item header icon. **Required** |
2594
+ | `.pf-c-notification-drawer__list-item-header-title` | `<h2>` | Initiates a notification list item header title. **Required** |
2595
+ | `.pf-c-notification-drawer__list-item-action` | `<div>` | Initiates a notification list item action. |
2596
+ | `.pf-c-notification-drawer__list-item-description` | `<div>` | Initiates a notification list item description. **Required** |
2597
+ | `.pf-c-notification-drawer__list-item-timestamp` | `<div>` | Initiates a notification list item timestamp. **Required** |
2598
+ | `.pf-c-notification-drawer__group-list` | `<div>` | Initiates a notification group list. **Required when notifications are grouped** |
2599
+ | `.pf-c-notification-drawer__group` | `<section>` | Initiates a notification group. **Required** |
2600
+ | `.pf-c-notification-drawer__group-toggle` | `<button>` | Initiates a notification group toggle. **Required** |
2601
+ | `.pf-c-notification-drawer__group-title` | `<div>` | Initiates a notification group toggle title. **Required** |
2602
+ | `.pf-c-notification-drawer__group-count` | `<div>` | Initiates a notification group toggle count. |
2603
+ | `.pf-c-notification-drawer__group-icon` | `<span>` | Initiates a notification group toggle icon. **Required** |
2604
+ | `.pf-m-custom` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item for the custom state. |
2605
+ | `.pf-m-info` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item for the info state. |
2606
+ | `.pf-m-warning` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item for the warning state. |
2607
+ | `.pf-m-danger` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item for the danger state. |
2608
+ | `.pf-m-success` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item for the success state. |
2609
+ | `.pf-m-read` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item for the read state. |
2610
+ | `.pf-m-hoverable` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item hover states to inidicate it is clickable. |
2611
+ | `.pf-m-expanded` | `.pf-c-notification-drawer__group` | Modifies a notification group for the expanded state. |
2612
+ | `.pf-m-truncate` | `.pf-c-notification-drawer__list-item-header-title` | Modifies the title to display a single line and truncate any overflow text with ellipses. **Note:** you can specify the max number of lines to show by setting the `--pf-c-notification-drawer__list-item-header-title--max-lines` (the default value is `1`). |