@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.10

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 (501) hide show
  1. package/README.md +1 -2
  2. package/assets/fontawesome/_animated.scss +1 -0
  3. package/assets/fontawesome/_bordered-pulled.scss +1 -0
  4. package/assets/fontawesome/_fixed-width.scss +3 -1
  5. package/assets/fontawesome/_icons.scss +1333 -1330
  6. package/assets/fontawesome/_index.scss +11 -0
  7. package/assets/fontawesome/_larger.scss +4 -2
  8. package/assets/fontawesome/_list.scss +4 -2
  9. package/assets/fontawesome/_rotated-flipped.scss +2 -0
  10. package/assets/fontawesome/_screen-reader.scss +1 -0
  11. package/assets/fontawesome/_stacked.scss +3 -1
  12. package/assets/fontawesome/_variables.scss +4 -4
  13. package/assets/fontawesome/fontawesome.scss +12 -12
  14. package/assets/icons/iconUnicodes.json +6 -0
  15. package/assets/images/img_avatar-dark.svg +22 -16
  16. package/assets/images/img_avatar-light.svg +25 -18
  17. package/assets/images/pf-background.svg +21 -21
  18. package/assets/images/pf_logo.svg +11 -11
  19. package/assets/images/pf_logo_white.svg +16 -17
  20. package/assets/pficon/pf-v6-pficon.woff2 +0 -0
  21. package/assets/pficon/pficon.scss +310 -271
  22. package/base/_index.scss +10 -0
  23. package/base/{_globals.scss → normalize.scss} +15 -48
  24. package/base/patternfly-common.css +14 -0
  25. package/base/patternfly-common.scss +69 -2
  26. package/base/patternfly-fa-icons.css +2787 -1420
  27. package/base/patternfly-fa-icons.scss +53 -2
  28. package/base/patternfly-fonts.css +10 -80
  29. package/base/patternfly-fonts.scss +49 -2
  30. package/base/patternfly-pf-icons.css +158 -134
  31. package/base/patternfly-pf-icons.scss +1 -2
  32. package/base/patternfly-svg-icons.css +5 -0
  33. package/base/{_svg-icons.scss → patternfly-svg-icons.scss} +2 -0
  34. package/base/patternfly-variables.css +1094 -1206
  35. package/base/patternfly-variables.scss +20 -2
  36. package/base/reset.scss +33 -0
  37. package/base/tokens/_index.scss +6 -0
  38. package/base/tokens/tokens-charts-dark.scss +173 -0
  39. package/base/tokens/{_tokens-charts.scss → tokens-charts.scss} +162 -148
  40. package/base/tokens/{_tokens-dark.scss → tokens-dark.scss} +310 -294
  41. package/base/tokens/{_tokens-default.scss → tokens-default.scss} +580 -447
  42. package/base/tokens/{_tokens-font.scss → tokens-local.scss} +16 -34
  43. package/base/tokens/{_tokens-palette.scss → tokens-palette.scss} +69 -70
  44. package/components/AboutModalBox/about-modal-box.css +86 -81
  45. package/components/AboutModalBox/about-modal-box.scss +80 -82
  46. package/components/Accordion/accordion.css +46 -45
  47. package/components/Accordion/accordion.scss +56 -55
  48. package/components/ActionList/action-list.css +6 -5
  49. package/components/ActionList/action-list.scss +7 -5
  50. package/components/Alert/alert-group.css +72 -19
  51. package/components/Alert/alert-group.scss +105 -18
  52. package/components/Alert/alert.css +52 -59
  53. package/components/Alert/alert.scss +56 -65
  54. package/components/Avatar/avatar.css +42 -41
  55. package/components/Avatar/avatar.scss +8 -7
  56. package/components/BackToTop/back-to-top.css +19 -17
  57. package/components/BackToTop/back-to-top.scss +17 -17
  58. package/components/Backdrop/backdrop.css +1 -1
  59. package/components/Backdrop/backdrop.scss +3 -4
  60. package/components/BackgroundImage/background-image.scss +3 -4
  61. package/components/Badge/badge.css +29 -7
  62. package/components/Badge/badge.scss +33 -9
  63. package/components/Banner/banner.css +30 -37
  64. package/components/Banner/banner.scss +30 -43
  65. package/components/Brand/brand.css +14 -10
  66. package/components/Brand/brand.scss +8 -5
  67. package/components/Breadcrumb/breadcrumb.css +23 -24
  68. package/components/Breadcrumb/breadcrumb.scss +25 -28
  69. package/components/Button/button.css +152 -130
  70. package/components/Button/button.scss +157 -133
  71. package/components/CalendarMonth/calendar-month.css +47 -47
  72. package/components/CalendarMonth/calendar-month.scss +50 -51
  73. package/components/Card/card.css +111 -94
  74. package/components/Card/card.scss +119 -93
  75. package/components/Check/check.css +6 -6
  76. package/components/Check/check.scss +8 -9
  77. package/components/ClipboardCopy/clipboard-copy.css +34 -45
  78. package/components/ClipboardCopy/clipboard-copy.scss +36 -49
  79. package/components/CodeBlock/code-block.css +21 -20
  80. package/components/CodeBlock/code-block.scss +21 -21
  81. package/components/CodeEditor/code-editor.css +36 -35
  82. package/components/CodeEditor/code-editor.scss +36 -36
  83. package/components/Content/content.css +167 -153
  84. package/components/Content/content.scss +204 -145
  85. package/components/DataList/data-list-grid.css +117 -117
  86. package/components/DataList/data-list-grid.scss +22 -20
  87. package/components/DataList/data-list.css +308 -312
  88. package/components/DataList/data-list.scss +145 -152
  89. package/components/DatePicker/date-picker.css +17 -17
  90. package/components/DatePicker/date-picker.scss +17 -18
  91. package/components/DescriptionList/description-list-order.css +5 -5
  92. package/components/DescriptionList/description-list-order.scss +3 -1
  93. package/components/DescriptionList/description-list.css +52 -50
  94. package/components/DescriptionList/description-list.scss +32 -37
  95. package/components/Divider/divider.css +104 -107
  96. package/components/Divider/divider.scss +19 -19
  97. package/components/DragDrop/drag-drop.css +4 -2
  98. package/components/DragDrop/drag-drop.scss +3 -3
  99. package/components/Drawer/drawer.css +119 -114
  100. package/components/Drawer/drawer.scss +139 -134
  101. package/components/DualListSelector/dual-list-selector.css +65 -62
  102. package/components/DualListSelector/dual-list-selector.scss +55 -52
  103. package/components/EmptyState/empty-state.css +38 -37
  104. package/components/EmptyState/empty-state.scss +39 -39
  105. package/components/ExpandableSection/expandable-section.css +27 -86
  106. package/components/ExpandableSection/expandable-section.scss +32 -101
  107. package/components/FileUpload/file-upload.css +3 -3
  108. package/components/FileUpload/file-upload.scss +3 -4
  109. package/components/Form/form.css +177 -125
  110. package/components/Form/form.scss +121 -115
  111. package/components/FormControl/form-control.css +68 -64
  112. package/components/FormControl/form-control.scss +80 -74
  113. package/components/HelperText/helper-text.css +5 -4
  114. package/components/HelperText/helper-text.scss +8 -6
  115. package/components/Hint/hint.css +25 -25
  116. package/components/Hint/hint.scss +25 -27
  117. package/components/Icon/icon.css +10 -10
  118. package/components/Icon/icon.scss +11 -12
  119. package/components/InlineEdit/inline-edit.css +12 -12
  120. package/components/InlineEdit/inline-edit.scss +12 -13
  121. package/components/InputGroup/input-group.css +17 -17
  122. package/components/InputGroup/input-group.scss +19 -20
  123. package/components/JumpLinks/jump-links.css +80 -96
  124. package/components/JumpLinks/jump-links.scss +80 -100
  125. package/components/Label/label-group.css +28 -28
  126. package/components/Label/label-group.scss +29 -30
  127. package/components/Label/label.css +103 -88
  128. package/components/Label/label.scss +114 -95
  129. package/components/List/list.css +44 -47
  130. package/components/List/list.scss +51 -58
  131. package/components/Login/login.css +122 -118
  132. package/components/Login/login.scss +105 -112
  133. package/components/Masthead/masthead.css +273 -175
  134. package/components/Masthead/masthead.scss +102 -68
  135. package/components/Menu/menu.css +151 -95
  136. package/components/Menu/menu.scss +59 -40
  137. package/components/MenuToggle/menu-toggle.css +131 -110
  138. package/components/MenuToggle/menu-toggle.scss +152 -130
  139. package/components/ModalBox/modal-box.css +53 -45
  140. package/components/ModalBox/modal-box.scss +52 -46
  141. package/components/MultipleFileUpload/multiple-file-upload.css +37 -37
  142. package/components/MultipleFileUpload/multiple-file-upload.scss +38 -39
  143. package/components/Nav/nav.css +33 -9
  144. package/components/Nav/nav.scss +46 -13
  145. package/components/NotificationDrawer/notification-drawer.css +50 -51
  146. package/components/NotificationDrawer/notification-drawer.scss +58 -57
  147. package/components/NumberInput/number-input.css +7 -11
  148. package/components/NumberInput/number-input.scss +5 -7
  149. package/components/OverflowMenu/overflow-menu.css +2 -1
  150. package/components/OverflowMenu/overflow-menu.scss +3 -1
  151. package/components/Page/page.css +177 -517
  152. package/components/Page/page.scss +157 -384
  153. package/components/Pagination/pagination.css +82 -79
  154. package/components/Pagination/pagination.scss +43 -40
  155. package/components/Panel/panel.css +33 -30
  156. package/components/Panel/panel.scss +35 -33
  157. package/components/Popover/popover.css +54 -52
  158. package/components/Popover/popover.scss +55 -54
  159. package/components/Progress/progress.css +8 -4
  160. package/components/Progress/progress.scss +14 -11
  161. package/components/ProgressStepper/progress-stepper.css +246 -245
  162. package/components/ProgressStepper/progress-stepper.scss +118 -118
  163. package/components/Radio/radio.css +9 -9
  164. package/components/Radio/radio.scss +11 -12
  165. package/components/Sidebar/sidebar.css +139 -139
  166. package/components/Sidebar/sidebar.scss +61 -61
  167. package/components/SimpleList/simple-list.css +21 -20
  168. package/components/SimpleList/simple-list.scss +22 -23
  169. package/components/Skeleton/skeleton.css +4 -4
  170. package/components/Skeleton/skeleton.scss +7 -8
  171. package/components/SkipToContent/skip-to-content.css +7 -6
  172. package/components/SkipToContent/skip-to-content.scss +7 -7
  173. package/components/Slider/slider.css +31 -31
  174. package/components/Slider/slider.scss +54 -55
  175. package/components/Spinner/spinner.scss +4 -5
  176. package/components/Switch/switch.css +4 -10
  177. package/components/Switch/switch.scss +8 -17
  178. package/components/TabContent/tab-content.css +25 -25
  179. package/components/TabContent/tab-content.scss +28 -28
  180. package/components/Table/table-grid.css +434 -508
  181. package/components/Table/table-grid.scss +131 -150
  182. package/components/Table/table-scrollable.css +31 -34
  183. package/components/Table/table-scrollable.scss +44 -41
  184. package/components/Table/table-tree-view.css +287 -279
  185. package/components/Table/table-tree-view.scss +84 -84
  186. package/components/Table/table.css +316 -279
  187. package/components/Table/table.scss +346 -301
  188. package/components/Tabs/tabs.css +215 -240
  189. package/components/Tabs/tabs.scss +130 -162
  190. package/components/TextInputGroup/text-input-group.css +122 -64
  191. package/components/TextInputGroup/text-input-group.scss +144 -87
  192. package/components/Tile/tile.css +15 -15
  193. package/components/Tile/tile.scss +16 -17
  194. package/components/Timestamp/timestamp.css +13 -19
  195. package/components/Timestamp/timestamp.scss +16 -22
  196. package/components/Title/title.css +14 -13
  197. package/components/Title/title.scss +15 -15
  198. package/components/ToggleGroup/toggle-group.css +37 -37
  199. package/components/ToggleGroup/toggle-group.scss +38 -41
  200. package/components/Toolbar/toolbar.css +547 -1431
  201. package/components/Toolbar/toolbar.scss +159 -123
  202. package/components/Tooltip/tooltip.css +28 -27
  203. package/components/Tooltip/tooltip.scss +31 -30
  204. package/components/TreeView/tree-view.css +184 -184
  205. package/components/TreeView/tree-view.scss +133 -133
  206. package/components/Truncate/truncate.css +2 -2
  207. package/components/Truncate/truncate.scss +7 -8
  208. package/components/Wizard/wizard.css +190 -154
  209. package/components/Wizard/wizard.scss +211 -165
  210. package/components/_index.css +22381 -0
  211. package/components/_index.scss +82 -0
  212. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  213. package/docs/components/Accordion/examples/Accordion.md +1 -1
  214. package/docs/components/ActionList/examples/ActionList.md +64 -24
  215. package/docs/components/Alert/examples/Alert.md +116 -74
  216. package/docs/components/BackToTop/examples/BackToTop.md +1 -1
  217. package/docs/components/Badge/examples/Badge.md +6 -16
  218. package/docs/components/Banner/examples/Banner.md +16 -10
  219. package/docs/components/Brand/examples/Brand.md +2 -2
  220. package/docs/components/Breadcrumb/examples/Breadcrumb.md +19 -59
  221. package/docs/components/Button/examples/Button.md +537 -368
  222. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  223. package/docs/components/Card/examples/Card.md +372 -658
  224. package/docs/components/Check/examples/Check.md +10 -15
  225. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +92 -47
  226. package/docs/components/CodeBlock/examples/CodeBlock.md +51 -28
  227. package/docs/components/CodeEditor/examples/CodeEditor.md +41 -22
  228. package/docs/components/Content/examples/Content.md +600 -60
  229. package/docs/components/DataList/examples/DataList.md +291 -1028
  230. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  231. package/docs/components/DescriptionList/examples/DescriptionList.md +80 -55
  232. package/docs/components/Drawer/examples/Drawer.md +60 -21
  233. package/docs/components/DualListSelector/examples/DualListSelector.md +364 -996
  234. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  235. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  236. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  237. package/docs/components/Form/examples/Form.md +100 -26
  238. package/docs/components/Hint/examples/Hint.md +54 -164
  239. package/docs/components/InlineEdit/examples/InlineEdit.md +132 -45
  240. package/docs/components/InputGroup/examples/InputGroup.md +38 -62
  241. package/docs/components/JumpLinks/examples/JumpLinks.md +189 -72
  242. package/docs/components/Label/examples/Label.md +2577 -406
  243. package/docs/components/Login/examples/Login.md +372 -334
  244. package/docs/components/Masthead/examples/masthead.md +515 -484
  245. package/docs/components/Menu/examples/Menu.md +77 -138
  246. package/docs/components/MenuToggle/examples/MenuToggle.md +289 -39
  247. package/docs/components/ModalBox/examples/ModalBox.md +158 -100
  248. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +137 -97
  249. package/docs/components/Nav/examples/Navigation.css +2 -7
  250. package/docs/components/Nav/examples/Navigation.md +337 -270
  251. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +515 -2076
  252. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  253. package/docs/components/OverflowMenu/examples/overflow-menu.css +4 -28
  254. package/docs/components/OverflowMenu/examples/overflow-menu.md +104 -159
  255. package/docs/components/Page/examples/Page.css +5 -9
  256. package/docs/components/Page/examples/Page.md +254 -181
  257. package/docs/components/Pagination/examples/Pagination.md +336 -756
  258. package/docs/components/Panel/examples/Panel.md +3 -2
  259. package/docs/components/Popover/examples/Popover.md +60 -15
  260. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
  261. package/docs/components/Sidebar/examples/Sidebar.css +4 -2
  262. package/docs/components/Sidebar/examples/Sidebar.md +3 -3
  263. package/docs/components/Skeleton/examples/Skeleton.css +1 -1
  264. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  265. package/docs/components/Slider/examples/Slider.md +53 -45
  266. package/docs/components/Spinner/examples/Spinner.md +1 -1
  267. package/docs/components/Switch/examples/Switch.md +33 -148
  268. package/docs/components/Table/examples/Table.css +11 -6
  269. package/docs/components/Table/examples/Table.md +5302 -2464
  270. package/docs/components/Tabs/examples/Tabs.md +1267 -607
  271. package/docs/components/TextInputGroup/examples/TextInputGroup.css +8 -3
  272. package/docs/components/TextInputGroup/examples/TextInputGroup.md +469 -278
  273. package/docs/components/Tile/examples/Tile.css +5 -5
  274. package/docs/components/Timestamp/examples/Timestamp.md +7 -1
  275. package/docs/components/ToggleGroup/examples/toggle-group.md +1 -3
  276. package/docs/components/Toolbar/examples/Toolbar.css +50 -39
  277. package/docs/components/Toolbar/examples/Toolbar.md +1562 -1200
  278. package/docs/components/Tooltip/examples/Tooltip.css +1 -1
  279. package/docs/components/TreeView/examples/TreeView.md +627 -49
  280. package/docs/components/Truncate/examples/Truncate.css +1 -2
  281. package/docs/components/Wizard/examples/Wizard.md +1595 -126
  282. package/docs/demos/AboutModal/examples/AboutModal.md +191 -198
  283. package/docs/demos/Alert/examples/Alert.md +924 -909
  284. package/docs/demos/BackToTop/examples/BackToTop.md +318 -327
  285. package/docs/demos/Banner/examples/Banner.md +641 -659
  286. package/docs/demos/Button/examples/Button.md +8 -8
  287. package/docs/demos/Card/examples/Card.css +6 -6
  288. package/docs/demos/Card/examples/Card.md +419 -606
  289. package/docs/demos/CardView/examples/CardView.md +822 -1435
  290. package/docs/demos/Dashboard/examples/Dashboard.md +1308 -1442
  291. package/docs/demos/DataList/examples/DataList.md +3210 -3424
  292. package/docs/demos/DescriptionList/examples/DescriptionList.md +899 -937
  293. package/docs/demos/Drawer/examples/Drawer.md +1165 -1176
  294. package/docs/demos/Form/examples/BasicForms.md +153 -88
  295. package/docs/demos/JumpLinks/examples/JumpLinks.md +1710 -1602
  296. package/docs/demos/Masthead/examples/Masthead.md +1719 -1583
  297. package/docs/demos/Modal/examples/Modal.md +1231 -1235
  298. package/docs/demos/Nav/examples/Nav.md +1216 -1230
  299. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1910 -4577
  300. package/docs/demos/Page/examples/Page.css +11 -0
  301. package/docs/demos/Page/examples/Page.md +3753 -2540
  302. package/docs/demos/Panel/Panel.md +88 -0
  303. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  304. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +16 -48
  305. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5150 -6255
  306. package/docs/demos/Skeleton/examples/Skeleton.md +297 -304
  307. package/docs/demos/Table/examples/Table.md +14272 -15154
  308. package/docs/demos/Tabs/examples/Tabs.md +2821 -2891
  309. package/docs/demos/Toolbar/examples/Toolbar.css +10 -18
  310. package/docs/demos/Toolbar/examples/Toolbar.md +2487 -2663
  311. package/docs/demos/Wizard/examples/Wizard.md +3021 -2784
  312. package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
  313. package/docs/layouts/Flex/examples/Flex.css +4 -4
  314. package/docs/layouts/Flex/examples/Flex.md +50 -50
  315. package/docs/layouts/Gallery/examples/Gallery.css +4 -4
  316. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  317. package/docs/layouts/Grid/examples/Grid.css +3 -3
  318. package/docs/layouts/Grid/examples/Grid.md +33 -33
  319. package/docs/layouts/Level/examples/Level.css +5 -5
  320. package/docs/layouts/Split/examples/Split.css +4 -4
  321. package/docs/layouts/Stack/examples/Stack.css +5 -5
  322. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  323. package/docs/utilities/Alignment/examples/Alignment.css +6 -6
  324. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  325. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
  326. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  327. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  328. package/docs/utilities/Display/examples/Display.css +3 -10
  329. package/docs/utilities/Display/examples/Display.md +21 -12
  330. package/docs/utilities/Flex/examples/Flex.css +7 -7
  331. package/docs/utilities/Flex/examples/Flex.md +82 -40
  332. package/docs/utilities/Float/examples/Float.css +5 -5
  333. package/docs/utilities/Float/examples/Float.md +6 -6
  334. package/docs/utilities/Sizing/examples/Sizing.css +6 -6
  335. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  336. package/docs/utilities/Spacing/examples/Spacing.css +3 -3
  337. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  338. package/docs/utilities/Text/examples/Text.md +78 -77
  339. package/icons/pficons.mjs +6 -0
  340. package/layouts/Bullseye/bullseye.css +4 -0
  341. package/layouts/Bullseye/bullseye.scss +5 -1
  342. package/layouts/Flex/flex.css +241 -237
  343. package/layouts/Flex/flex.scss +48 -44
  344. package/layouts/Gallery/gallery.css +15 -11
  345. package/layouts/Gallery/gallery.scss +9 -5
  346. package/layouts/Grid/grid.css +20 -16
  347. package/layouts/Grid/grid.scss +12 -8
  348. package/layouts/Level/level.css +5 -1
  349. package/layouts/Level/level.scss +6 -2
  350. package/layouts/Split/split.css +5 -1
  351. package/layouts/Split/split.scss +6 -2
  352. package/layouts/Stack/stack.css +5 -1
  353. package/layouts/Stack/stack.scss +6 -2
  354. package/layouts/_index.css +3461 -0
  355. package/layouts/_index.scss +8 -0
  356. package/package.json +39 -39
  357. package/patternfly-addons.css +2071 -2648
  358. package/patternfly-addons.scss +2 -12
  359. package/patternfly-base-no-globals.css +4227 -3064
  360. package/patternfly-base-no-globals.scss +5 -3
  361. package/patternfly-base.css +4307 -3140
  362. package/patternfly-base.scss +2 -6
  363. package/patternfly-charts.css +579 -240
  364. package/patternfly-charts.scss +352 -337
  365. package/patternfly-no-globals.css +21105 -23238
  366. package/patternfly-no-globals.scss +5 -4
  367. package/patternfly.css +21209 -23338
  368. package/patternfly.min.css +1 -1
  369. package/patternfly.min.css.map +1 -1
  370. package/patternfly.scss +6 -4
  371. package/sass-utilities/_index.scss +6 -0
  372. package/sass-utilities/functions.scss +25 -25
  373. package/sass-utilities/{_init.scss → init.scss} +6 -6
  374. package/sass-utilities/mixins.scss +108 -72
  375. package/sass-utilities/{component-namespaces.scss → namespaces-components.scss} +3 -27
  376. package/sass-utilities/{layout-namespaces.scss → namespaces-layouts.scss} +3 -1
  377. package/sass-utilities/scss-variables.scss +48 -261
  378. package/utilities/Accessibility/accessibility.css +15 -15
  379. package/utilities/Accessibility/accessibility.scss +8 -6
  380. package/utilities/Alignment/alignment.css +29 -29
  381. package/utilities/Alignment/alignment.scss +6 -4
  382. package/utilities/BackgroundColor/background-color.css +67 -0
  383. package/utilities/BackgroundColor/background-color.scss +16 -0
  384. package/utilities/BoxShadow/box-shadow.css +15 -39
  385. package/utilities/BoxShadow/box-shadow.scss +19 -28
  386. package/utilities/Display/display.css +43 -5
  387. package/utilities/Display/display.scss +7 -4
  388. package/utilities/Flex/flex.css +50 -50
  389. package/utilities/Flex/flex.scss +21 -20
  390. package/utilities/Float/float.css +29 -29
  391. package/utilities/Float/float.scss +6 -6
  392. package/utilities/Sizing/sizing.css +58 -58
  393. package/utilities/Sizing/sizing.scss +23 -21
  394. package/utilities/Spacing/spacing.css +1372 -1372
  395. package/utilities/Spacing/spacing.scss +6 -6
  396. package/utilities/Text/text.css +419 -662
  397. package/utilities/Text/text.scss +81 -107
  398. package/utilities/_index.css +7815 -0
  399. package/utilities/_index.scss +10 -0
  400. package/assets/fontawesome/_core.scss +0 -20
  401. package/assets/images/pf-logo-small.svg +0 -23
  402. package/assets/images/pf_logo_white.hbs +0 -35
  403. package/assets/images/pfbg-icon.svg +0 -1
  404. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  405. package/base/_base.scss +0 -2
  406. package/base/_chart-globals.scss +0 -415
  407. package/base/_common.scss +0 -50
  408. package/base/_fa-icons.scss +0 -33
  409. package/base/_fonts.scss +0 -136
  410. package/base/_icons.scss +0 -3
  411. package/base/_pficons.scss +0 -2
  412. package/base/_themes.scss +0 -43
  413. package/base/_variables.scss +0 -299
  414. package/base/patternfly-globals.css +0 -120
  415. package/base/patternfly-globals.scss +0 -2
  416. package/base/patternfly-icons.css +0 -4728
  417. package/base/patternfly-icons.scss +0 -2
  418. package/base/patternfly-themes.css +0 -82
  419. package/base/patternfly-themes.scss +0 -2
  420. package/base/themes/dark/_chart-globals.scss +0 -42
  421. package/base/themes/dark/_globals.scss +0 -5
  422. package/base/tokens/_workspace-overrides.scss +0 -7
  423. package/components/AppLauncher/app-launcher.css +0 -244
  424. package/components/AppLauncher/app-launcher.scss +0 -308
  425. package/components/AppLauncher/themes/dark/app-launcher.scss +0 -13
  426. package/components/Chip/chip-group.css +0 -93
  427. package/components/Chip/chip-group.scss +0 -98
  428. package/components/Chip/chip.css +0 -122
  429. package/components/Chip/chip.scss +0 -140
  430. package/components/Chip/themes/dark/chip.scss +0 -9
  431. package/components/ContextSelector/context-selector.css +0 -336
  432. package/components/ContextSelector/context-selector.scss +0 -384
  433. package/components/ContextSelector/themes/dark/context-selector.scss +0 -24
  434. package/components/Dropdown/dropdown.css +0 -686
  435. package/components/Dropdown/dropdown.scss +0 -820
  436. package/components/Dropdown/themes/dark/dropdown.scss +0 -32
  437. package/components/LogViewer/log-viewer.css +0 -197
  438. package/components/LogViewer/log-viewer.scss +0 -226
  439. package/components/LogViewer/themes/dark/log-viewer.scss +0 -7
  440. package/components/NotificationBadge/notification-badge.css +0 -87
  441. package/components/NotificationBadge/notification-badge.scss +0 -108
  442. package/components/OptionsMenu/options-menu.css +0 -279
  443. package/components/OptionsMenu/options-menu.scss +0 -332
  444. package/components/OptionsMenu/themes/dark/options-menu.scss +0 -21
  445. package/components/Select/select.css +0 -599
  446. package/components/Select/select.scss +0 -713
  447. package/components/Select/themes/dark/select.scss +0 -23
  448. package/components/_all.scss +0 -91
  449. package/docs/components/AppLauncher/deprecated/application-launcher.css +0 -25
  450. package/docs/components/AppLauncher/deprecated/application-launcher.md +0 -792
  451. package/docs/components/Breadcrumb/examples/Breadcrumb.css +0 -3
  452. package/docs/components/Chip/examples/Chip.md +0 -846
  453. package/docs/components/ContextSelector/deprecated/context-selector.css +0 -7
  454. package/docs/components/ContextSelector/deprecated/context-selector.md +0 -909
  455. package/docs/components/Dropdown/deprecated/Dropdown.css +0 -64
  456. package/docs/components/Dropdown/deprecated/Dropdown.md +0 -2920
  457. package/docs/components/LogViewer/examples/LogViewer.css +0 -17
  458. package/docs/components/LogViewer/examples/LogViewer.md +0 -5936
  459. package/docs/components/NotificationBadge/examples/NotificationBadge.md +0 -222
  460. package/docs/components/OptionsMenu/deprecated/options-menu.css +0 -25
  461. package/docs/components/OptionsMenu/deprecated/options-menu.md +0 -1014
  462. package/docs/components/Page/deprecated/PageHeader.css +0 -17
  463. package/docs/components/Page/deprecated/PageHeader.md +0 -261
  464. package/docs/components/Pagination/examples/Pagination.css +0 -3
  465. package/docs/components/Select/deprecated/Select.css +0 -56
  466. package/docs/components/Select/deprecated/Select.md +0 -3525
  467. package/docs/components/Tabs/examples/Tabs.css +0 -10
  468. package/docs/components/ToggleGroup/examples/toggle-group.css +0 -4
  469. package/docs/demos/ContextSelector/examples/ContextSelector.md +0 -1712
  470. package/docs/demos/Page/examples/Penta.md +0 -821
  471. package/docs/utilities/Text/examples/Text.css +0 -0
  472. package/layouts/_all.scss +0 -7
  473. package/patternfly-base-no-globals-theme-dark-unversioned.css +0 -6276
  474. package/patternfly-base-no-globals-theme-dark-unversioned.scss +0 -11
  475. package/patternfly-base-theme-dark-unversioned.css +0 -6393
  476. package/patternfly-base-theme-dark-unversioned.scss +0 -5
  477. package/patternfly-charts-theme-dark-unversioned.css +0 -70
  478. package/patternfly-charts-theme-dark-unversioned.scss +0 -8
  479. package/patternfly-charts-theme-dark.css +0 -70
  480. package/patternfly-charts-theme-dark.scss +0 -8
  481. package/patternfly-theme-dark-unversioned.css +0 -35533
  482. package/patternfly-theme-dark-unversioned.scss +0 -6
  483. package/patternfly-theme-dark.css +0 -0
  484. package/patternfly-theme-dark.scss +0 -1
  485. package/sass-utilities/_all.scss +0 -9
  486. package/sass-utilities/colors.scss +0 -82
  487. package/sass-utilities/div.import.scss +0 -3
  488. package/sass-utilities/div.scss +0 -4
  489. package/sass-utilities/placeholders.scss +0 -72
  490. package/sass-utilities/themes/dark/_all.scss +0 -4
  491. package/sass-utilities/themes/dark/colors.scss +0 -16
  492. package/sass-utilities/themes/dark/mixins.scss +0 -7
  493. package/sass-utilities/themes/dark/placeholders.scss +0 -5
  494. package/sass-utilities/themes/dark/scss-variables.scss +0 -92
  495. package/themes/dark/_patternfly-charts-theme-dark.scss +0 -98
  496. package/utilities/BackgroundColor/BackgroundColor.css +0 -414
  497. package/utilities/BackgroundColor/BackgroundColor.scss +0 -64
  498. package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  499. package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
  500. package/utilities/Text/themes/dark/text.css +0 -0
  501. package/utilities/Text/themes/dark/text.scss +0 -33
package/docs/components/NotificationDrawer/examples/NotificationDrawer.md CHANGED
@@ -12,66 +12,26 @@ cssPrefix: pf-v6-c-notification-drawer
12
12
  <h1 class="pf-v6-c-notification-drawer__header-title">Notifications</h1>
13
13
  <span class="pf-v6-c-notification-drawer__header-status">3 unread</span>
14
14
  <div class="pf-v6-c-notification-drawer__header-action">
15
- <div class="pf-v6-c-dropdown">
16
- <button
17
- class="pf-v6-c-dropdown__toggle pf-m-plain"
18
- id="notification-drawer-basic-header-action-button"
19
- aria-expanded="false"
20
- type="button"
21
- aria-label="Actions"
22
- >
15
+ <button
16
+ class="pf-v6-c-menu-toggle pf-m-plain"
17
+ type="button"
18
+ aria-expanded="false"
19
+ aria-label="Menu toggle"
20
+ id="notification-drawer-basic-example-menu-toggle"
21
+ >
22
+ <span class="pf-v6-c-menu-toggle__icon">
23
23
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
24
- </button>
25
- <ul
26
- class="pf-v6-c-dropdown__menu pf-m-align-right"
27
- aria-labelledby="notification-drawer-basic-header-action-button"
28
- hidden
29
- role="menu"
30
- >
31
- <li role="none">
32
- <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
33
- </li>
34
- <li role="none">
35
- <button
36
- class="pf-v6-c-dropdown__menu-item"
37
- role="menuitem"
38
- type="button"
39
- >Action</button>
40
- </li>
41
- <li role="none">
42
- <a
43
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
44
- role="menuitem"
45
- href="#"
46
- aria-disabled="true"
47
- tabindex="-1"
48
- >Disabled link</a>
49
- </li>
50
- <li role="none">
51
- <button
52
- class="pf-v6-c-dropdown__menu-item"
53
- role="menuitem"
54
- type="button"
55
- disabled
56
- >Disabled action</button>
57
- </li>
58
- <li class="pf-v6-c-divider" role="separator"></li>
59
- <li role="none">
60
- <a
61
- class="pf-v6-c-dropdown__menu-item"
62
- role="menuitem"
63
- href="#"
64
- >Separated link</a>
65
- </li>
66
- </ul>
67
- </div>
24
+ </span>
25
+ </button>
68
26
  <div class="pf-v6-c-notification-drawer__header-action-close">
69
27
  <button
70
28
  class="pf-v6-c-button pf-m-plain"
71
29
  type="button"
72
30
  aria-label="Close"
73
31
  >
74
- <i class="fas fa-times" aria-hidden="true"></i>
32
+ <span class="pf-v6-c-button__icon">
33
+ <i class="fas fa-times" aria-hidden="true"></i>
34
+ </span>
75
35
  </button>
76
36
  </div>
77
37
  </div>
@@ -93,63 +53,17 @@ cssPrefix: pf-v6-c-notification-drawer
93
53
  </h2>
94
54
  </div>
95
55
  <div class="pf-v6-c-notification-drawer__list-item-action">
96
- <div class="pf-v6-c-dropdown">
97
- <button
98
- class="pf-v6-c-dropdown__toggle pf-m-plain"
99
- id="notification-drawer-basicdropdown-kebab-1-button"
100
- aria-expanded="false"
101
- type="button"
102
- aria-label="Actions"
103
- >
56
+ <button
57
+ class="pf-v6-c-menu-toggle pf-m-plain"
58
+ type="button"
59
+ aria-expanded="false"
60
+ aria-label="Menu toggle"
61
+ id="notification-drawer-basic-example-menu-toggle-1"
62
+ >
63
+ <span class="pf-v6-c-menu-toggle__icon">
104
64
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
105
- </button>
106
- <ul
107
- class="pf-v6-c-dropdown__menu pf-m-align-right"
108
- aria-labelledby="notification-drawer-basicdropdown-kebab-1-button"
109
- hidden
110
- role="menu"
111
- >
112
- <li role="none">
113
- <a
114
- class="pf-v6-c-dropdown__menu-item"
115
- role="menuitem"
116
- href="#"
117
- >Link</a>
118
- </li>
119
- <li role="none">
120
- <button
121
- class="pf-v6-c-dropdown__menu-item"
122
- role="menuitem"
123
- type="button"
124
- >Action</button>
125
- </li>
126
- <li role="none">
127
- <a
128
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
129
- role="menuitem"
130
- href="#"
131
- aria-disabled="true"
132
- tabindex="-1"
133
- >Disabled link</a>
134
- </li>
135
- <li role="none">
136
- <button
137
- class="pf-v6-c-dropdown__menu-item"
138
- role="menuitem"
139
- type="button"
140
- disabled
141
- >Disabled action</button>
142
- </li>
143
- <li class="pf-v6-c-divider" role="separator"></li>
144
- <li role="none">
145
- <a
146
- class="pf-v6-c-dropdown__menu-item"
147
- role="menuitem"
148
- href="#"
149
- >Separated link</a>
150
- </li>
151
- </ul>
152
- </div>
65
+ </span>
66
+ </button>
153
67
  </div>
154
68
  <div
155
69
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -174,63 +88,17 @@ cssPrefix: pf-v6-c-notification-drawer
174
88
  </h2>
175
89
  </div>
176
90
  <div class="pf-v6-c-notification-drawer__list-item-action">
177
- <div class="pf-v6-c-dropdown">
178
- <button
179
- class="pf-v6-c-dropdown__toggle pf-m-plain"
180
- id="notification-drawer-basicdropdown-kebab-2-button"
181
- aria-expanded="false"
182
- type="button"
183
- aria-label="Actions"
184
- >
91
+ <button
92
+ class="pf-v6-c-menu-toggle pf-m-plain"
93
+ type="button"
94
+ aria-expanded="false"
95
+ aria-label="Menu toggle"
96
+ id="notification-drawer-basic-example-menu-toggle-3"
97
+ >
98
+ <span class="pf-v6-c-menu-toggle__icon">
185
99
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
186
- </button>
187
- <ul
188
- class="pf-v6-c-dropdown__menu pf-m-align-right"
189
- aria-labelledby="notification-drawer-basicdropdown-kebab-2-button"
190
- hidden
191
- role="menu"
192
- >
193
- <li role="none">
194
- <a
195
- class="pf-v6-c-dropdown__menu-item"
196
- role="menuitem"
197
- href="#"
198
- >Link</a>
199
- </li>
200
- <li role="none">
201
- <button
202
- class="pf-v6-c-dropdown__menu-item"
203
- role="menuitem"
204
- type="button"
205
- >Action</button>
206
- </li>
207
- <li role="none">
208
- <a
209
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
210
- role="menuitem"
211
- href="#"
212
- aria-disabled="true"
213
- tabindex="-1"
214
- >Disabled link</a>
215
- </li>
216
- <li role="none">
217
- <button
218
- class="pf-v6-c-dropdown__menu-item"
219
- role="menuitem"
220
- type="button"
221
- disabled
222
- >Disabled action</button>
223
- </li>
224
- <li class="pf-v6-c-divider" role="separator"></li>
225
- <li role="none">
226
- <a
227
- class="pf-v6-c-dropdown__menu-item"
228
- role="menuitem"
229
- href="#"
230
- >Separated link</a>
231
- </li>
232
- </ul>
233
- </div>
100
+ </span>
101
+ </button>
234
102
  </div>
235
103
  <div
236
104
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -255,63 +123,17 @@ cssPrefix: pf-v6-c-notification-drawer
255
123
  </h2>
256
124
  </div>
257
125
  <div class="pf-v6-c-notification-drawer__list-item-action">
258
- <div class="pf-v6-c-dropdown">
259
- <button
260
- class="pf-v6-c-dropdown__toggle pf-m-plain"
261
- id="notification-drawer-basicdropdown-kebab-3-button"
262
- aria-expanded="false"
263
- type="button"
264
- aria-label="Actions"
265
- >
126
+ <button
127
+ class="pf-v6-c-menu-toggle pf-m-plain"
128
+ type="button"
129
+ aria-expanded="false"
130
+ aria-label="Menu toggle"
131
+ id="notification-drawer-basic-example-menu-toggle-4"
132
+ >
133
+ <span class="pf-v6-c-menu-toggle__icon">
266
134
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
267
- </button>
268
- <ul
269
- class="pf-v6-c-dropdown__menu pf-m-align-right"
270
- aria-labelledby="notification-drawer-basicdropdown-kebab-3-button"
271
- hidden
272
- role="menu"
273
- >
274
- <li role="none">
275
- <a
276
- class="pf-v6-c-dropdown__menu-item"
277
- role="menuitem"
278
- href="#"
279
- >Link</a>
280
- </li>
281
- <li role="none">
282
- <button
283
- class="pf-v6-c-dropdown__menu-item"
284
- role="menuitem"
285
- type="button"
286
- >Action</button>
287
- </li>
288
- <li role="none">
289
- <a
290
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
291
- role="menuitem"
292
- href="#"
293
- aria-disabled="true"
294
- tabindex="-1"
295
- >Disabled link</a>
296
- </li>
297
- <li role="none">
298
- <button
299
- class="pf-v6-c-dropdown__menu-item"
300
- role="menuitem"
301
- type="button"
302
- disabled
303
- >Disabled action</button>
304
- </li>
305
- <li class="pf-v6-c-divider" role="separator"></li>
306
- <li role="none">
307
- <a
308
- class="pf-v6-c-dropdown__menu-item"
309
- role="menuitem"
310
- href="#"
311
- >Separated link</a>
312
- </li>
313
- </ul>
314
- </div>
135
+ </span>
136
+ </button>
315
137
  </div>
316
138
  <div
317
139
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -333,63 +155,17 @@ cssPrefix: pf-v6-c-notification-drawer
333
155
  </h2>
334
156
  </div>
335
157
  <div class="pf-v6-c-notification-drawer__list-item-action">
336
- <div class="pf-v6-c-dropdown pf-m-top">
337
- <button
338
- class="pf-v6-c-dropdown__toggle pf-m-plain"
339
- id="notification-drawer-basicdropdown-kebab-4-button"
340
- aria-expanded="false"
341
- type="button"
342
- aria-label="Actions"
343
- >
158
+ <button
159
+ class="pf-v6-c-menu-toggle pf-m-plain"
160
+ type="button"
161
+ aria-expanded="false"
162
+ aria-label="Menu toggle"
163
+ id="notification-drawer-basic-example-menu-toggle-5"
164
+ >
165
+ <span class="pf-v6-c-menu-toggle__icon">
344
166
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
345
- </button>
346
- <ul
347
- class="pf-v6-c-dropdown__menu pf-m-align-right"
348
- aria-labelledby="notification-drawer-basicdropdown-kebab-4-button"
349
- hidden
350
- role="menu"
351
- >
352
- <li role="none">
353
- <a
354
- class="pf-v6-c-dropdown__menu-item"
355
- role="menuitem"
356
- href="#"
357
- >Link</a>
358
- </li>
359
- <li role="none">
360
- <button
361
- class="pf-v6-c-dropdown__menu-item"
362
- role="menuitem"
363
- type="button"
364
- >Action</button>
365
- </li>
366
- <li role="none">
367
- <a
368
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
369
- role="menuitem"
370
- href="#"
371
- aria-disabled="true"
372
- tabindex="-1"
373
- >Disabled link</a>
374
- </li>
375
- <li role="none">
376
- <button
377
- class="pf-v6-c-dropdown__menu-item"
378
- role="menuitem"
379
- type="button"
380
- disabled
381
- >Disabled action</button>
382
- </li>
383
- <li class="pf-v6-c-divider" role="separator"></li>
384
- <li role="none">
385
- <a
386
- class="pf-v6-c-dropdown__menu-item"
387
- role="menuitem"
388
- href="#"
389
- >Separated link</a>
390
- </li>
391
- </ul>
392
- </div>
167
+ </span>
168
+ </button>
393
169
  </div>
394
170
  <div
395
171
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -411,63 +187,17 @@ cssPrefix: pf-v6-c-notification-drawer
411
187
  </h2>
412
188
  </div>
413
189
  <div class="pf-v6-c-notification-drawer__list-item-action">
414
- <div class="pf-v6-c-dropdown pf-m-top">
415
- <button
416
- class="pf-v6-c-dropdown__toggle pf-m-plain"
417
- id="notification-drawer-basicdropdown-kebab-5-button"
418
- aria-expanded="false"
419
- type="button"
420
- aria-label="Actions"
421
- >
190
+ <button
191
+ class="pf-v6-c-menu-toggle pf-m-plain"
192
+ type="button"
193
+ aria-expanded="false"
194
+ aria-label="Menu toggle"
195
+ id="notification-drawer-basic-example-menu-toggle-6"
196
+ >
197
+ <span class="pf-v6-c-menu-toggle__icon">
422
198
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
423
- </button>
424
- <ul
425
- class="pf-v6-c-dropdown__menu pf-m-align-right"
426
- aria-labelledby="notification-drawer-basicdropdown-kebab-5-button"
427
- hidden
428
- role="menu"
429
- >
430
- <li role="none">
431
- <a
432
- class="pf-v6-c-dropdown__menu-item"
433
- role="menuitem"
434
- href="#"
435
- >Link</a>
436
- </li>
437
- <li role="none">
438
- <button
439
- class="pf-v6-c-dropdown__menu-item"
440
- role="menuitem"
441
- type="button"
442
- >Action</button>
443
- </li>
444
- <li role="none">
445
- <a
446
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
447
- role="menuitem"
448
- href="#"
449
- aria-disabled="true"
450
- tabindex="-1"
451
- >Disabled link</a>
452
- </li>
453
- <li role="none">
454
- <button
455
- class="pf-v6-c-dropdown__menu-item"
456
- role="menuitem"
457
- type="button"
458
- disabled
459
- >Disabled action</button>
460
- </li>
461
- <li class="pf-v6-c-divider" role="separator"></li>
462
- <li role="none">
463
- <a
464
- class="pf-v6-c-dropdown__menu-item"
465
- role="menuitem"
466
- href="#"
467
- >Separated link</a>
468
- </li>
469
- </ul>
470
- </div>
199
+ </span>
200
+ </button>
471
201
  </div>
472
202
  <div
473
203
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -491,63 +221,17 @@ cssPrefix: pf-v6-c-notification-drawer
491
221
  </h2>
492
222
  </div>
493
223
  <div class="pf-v6-c-notification-drawer__list-item-action">
494
- <div class="pf-v6-c-dropdown pf-m-top">
495
- <button
496
- class="pf-v6-c-dropdown__toggle pf-m-plain"
497
- id="notification-drawer-basicdropdown-kebab-6-button"
498
- aria-expanded="false"
499
- type="button"
500
- aria-label="Actions"
501
- >
224
+ <button
225
+ class="pf-v6-c-menu-toggle pf-m-plain"
226
+ type="button"
227
+ aria-expanded="false"
228
+ aria-label="Menu toggle"
229
+ id="notification-drawer-basic-example-menu-toggle-7"
230
+ >
231
+ <span class="pf-v6-c-menu-toggle__icon">
502
232
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
503
- </button>
504
- <ul
505
- class="pf-v6-c-dropdown__menu pf-m-align-right"
506
- aria-labelledby="notification-drawer-basicdropdown-kebab-6-button"
507
- hidden
508
- role="menu"
509
- >
510
- <li role="none">
511
- <a
512
- class="pf-v6-c-dropdown__menu-item"
513
- role="menuitem"
514
- href="#"
515
- >Link</a>
516
- </li>
517
- <li role="none">
518
- <button
519
- class="pf-v6-c-dropdown__menu-item"
520
- role="menuitem"
521
- type="button"
522
- >Action</button>
523
- </li>
524
- <li role="none">
525
- <a
526
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
527
- role="menuitem"
528
- href="#"
529
- aria-disabled="true"
530
- tabindex="-1"
531
- >Disabled link</a>
532
- </li>
533
- <li role="none">
534
- <button
535
- class="pf-v6-c-dropdown__menu-item"
536
- role="menuitem"
537
- type="button"
538
- disabled
539
- >Disabled action</button>
540
- </li>
541
- <li class="pf-v6-c-divider" role="separator"></li>
542
- <li role="none">
543
- <a
544
- class="pf-v6-c-dropdown__menu-item"
545
- role="menuitem"
546
- href="#"
547
- >Separated link</a>
548
- </li>
549
- </ul>
550
- </div>
233
+ </span>
234
+ </button>
551
235
  </div>
552
236
  <div
553
237
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -565,78 +249,56 @@ cssPrefix: pf-v6-c-notification-drawer
565
249
  </span>
566
250
  <h2
567
251
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
568
- style="--pf-v5-c-notification-drawer__list-item-header-title--max-lines: 2"
252
+ style="--pf-v6-c-notification-drawer__list-item-header-title--max-lines: 2"
569
253
  >
570
254
  <span class="pf-v6-screen-reader">Success notification:</span>
571
255
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis odio risus. Ut dictum vitae sapien at posuere. Nullam suscipit massa quis lacus pellentesque scelerisque. Donec non maximus neque, quis ornare nunc. Vivamus in nibh sed libero feugiat feugiat. Nulla lacinia rutrum est, a commodo odio vestibulum suscipit. Nullam id quam et quam porttitor interdum quis nec tellus. Vestibulum arcu dui, pulvinar eu tellus in, semper mattis diam. Sed commodo tincidunt lacus non pulvinar. Curabitur tempor molestie vestibulum. Vivamus vel mi dignissim, efficitur neque eget, efficitur massa. Mauris vitae nunc augue. Donec augue lorem, malesuada et quam vitae, volutpat mattis nisi. Nullam nec venenatis ex, quis lobortis purus. Sed nisl dolor, mattis sit amet tincidunt quis, mollis sed massa.
572
256
  </h2>
573
257
  </div>
574
258
  <div class="pf-v6-c-notification-drawer__list-item-action">
575
- <div class="pf-v6-c-dropdown pf-m-top">
576
- <button
577
- class="pf-v6-c-dropdown__toggle pf-m-plain"
578
- id="notification-drawer-basicdropdown-kebab-7-button"
579
- aria-expanded="false"
580
- type="button"
581
- aria-label="Actions"
582
- >
259
+ <button
260
+ class="pf-v6-c-menu-toggle pf-m-plain"
261
+ type="button"
262
+ aria-expanded="false"
263
+ aria-label="Menu toggle"
264
+ id="notification-drawer-basic-example-menu-toggle-8"
265
+ >
266
+ <span class="pf-v6-c-menu-toggle__icon">
583
267
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
584
- </button>
585
- <ul
586
- class="pf-v6-c-dropdown__menu pf-m-align-right"
587
- aria-labelledby="notification-drawer-basicdropdown-kebab-7-button"
588
- hidden
589
- role="menu"
590
- >
591
- <li role="none">
592
- <a
593
- class="pf-v6-c-dropdown__menu-item"
594
- role="menuitem"
595
- href="#"
596
- >Link</a>
597
- </li>
598
- <li role="none">
599
- <button
600
- class="pf-v6-c-dropdown__menu-item"
601
- role="menuitem"
602
- type="button"
603
- >Action</button>
604
- </li>
605
- <li role="none">
606
- <a
607
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
608
- role="menuitem"
609
- href="#"
610
- aria-disabled="true"
611
- tabindex="-1"
612
- >Disabled link</a>
613
- </li>
614
- <li role="none">
615
- <button
616
- class="pf-v6-c-dropdown__menu-item"
617
- role="menuitem"
618
- type="button"
619
- disabled
620
- >Disabled action</button>
621
- </li>
622
- <li class="pf-v6-c-divider" role="separator"></li>
623
- <li role="none">
624
- <a
625
- class="pf-v6-c-dropdown__menu-item"
626
- role="menuitem"
627
- href="#"
628
- >Separated link</a>
629
- </li>
630
- </ul>
631
- </div>
268
+ </span>
269
+ </button>
632
270
  </div>
633
271
  <div
634
272
  class="pf-v6-c-notification-drawer__list-item-description"
635
- >This example uses ".pf-m-truncate" and sets "--pf-v5-c-notification-drawer__list-item-header-title--max-lines: 2" to limit title to two lines and truncate any overflow text with ellipses.</div>
273
+ >This example uses ".pf-m-truncate" and sets "--pf-v6-c-notification-drawer__list-item-header-title--max-lines: 2" to limit title to two lines and truncate any overflow text with ellipses.</div>
636
274
  <div
637
275
  class="pf-v6-c-notification-drawer__list-item-timestamp"
638
276
  >50 minutes ago</div>
639
277
  </li>
278
+ <li class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success">
279
+ <div class="pf-v6-c-notification-drawer__list-item-header">
280
+ <span class="pf-v6-c-notification-drawer__list-item-header-icon">
281
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
282
+ </span>
283
+ <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
284
+ <span class="pf-v6-screen-reader">Success notification:</span>
285
+ Notification drawer item title
286
+ </h2>
287
+ </div>
288
+ <div
289
+ class="pf-v6-c-notification-drawer__list-item-action pf-m-no-offset"
290
+ >
291
+ <button class="pf-v6-c-button pf-m-primary" type="button">
292
+ <span class="pf-v6-c-button__text">Action</span>
293
+ </button>
294
+ </div>
295
+ <div
296
+ class="pf-v6-c-notification-drawer__list-item-description"
297
+ >This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.</div>
298
+ <div
299
+ class="pf-v6-c-notification-drawer__list-item-timestamp"
300
+ >55 minutes ago</div>
301
+ </li>
640
302
  </ul>
641
303
  </div>
642
304
  </div>
@@ -651,66 +313,26 @@ cssPrefix: pf-v6-c-notification-drawer
651
313
  <h1 class="pf-v6-c-notification-drawer__header-title">Notifications</h1>
652
314
  <span class="pf-v6-c-notification-drawer__header-status">9 unread</span>
653
315
  <div class="pf-v6-c-notification-drawer__header-action">
654
- <div class="pf-v6-c-dropdown">
655
- <button
656
- class="pf-v6-c-dropdown__toggle pf-m-plain"
657
- id="notification-drawer-groups-header-action-button"
658
- aria-expanded="false"
659
- type="button"
660
- aria-label="Actions"
661
- >
316
+ <button
317
+ class="pf-v6-c-menu-toggle pf-m-plain"
318
+ type="button"
319
+ aria-expanded="false"
320
+ aria-label="Menu toggle"
321
+ id="notification-drawer-groups-example-menu-toggle"
322
+ >
323
+ <span class="pf-v6-c-menu-toggle__icon">
662
324
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
663
- </button>
664
- <ul
665
- class="pf-v6-c-dropdown__menu pf-m-align-right"
666
- aria-labelledby="notification-drawer-groups-header-action-button"
667
- hidden
668
- role="menu"
669
- >
670
- <li role="none">
671
- <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
672
- </li>
673
- <li role="none">
674
- <button
675
- class="pf-v6-c-dropdown__menu-item"
676
- role="menuitem"
677
- type="button"
678
- >Action</button>
679
- </li>
680
- <li role="none">
681
- <a
682
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
683
- role="menuitem"
684
- href="#"
685
- aria-disabled="true"
686
- tabindex="-1"
687
- >Disabled link</a>
688
- </li>
689
- <li role="none">
690
- <button
691
- class="pf-v6-c-dropdown__menu-item"
692
- role="menuitem"
693
- type="button"
694
- disabled
695
- >Disabled action</button>
696
- </li>
697
- <li class="pf-v6-c-divider" role="separator"></li>
698
- <li role="none">
699
- <a
700
- class="pf-v6-c-dropdown__menu-item"
701
- role="menuitem"
702
- href="#"
703
- >Separated link</a>
704
- </li>
705
- </ul>
706
- </div>
325
+ </span>
326
+ </button>
707
327
  <div class="pf-v6-c-notification-drawer__header-action-close">
708
328
  <button
709
329
  class="pf-v6-c-button pf-m-plain"
710
330
  type="button"
711
331
  aria-label="Close"
712
332
  >
713
- <i class="fas fa-times" aria-hidden="true"></i>
333
+ <span class="pf-v6-c-button__icon">
334
+ <i class="fas fa-times" aria-hidden="true"></i>
335
+ </span>
714
336
  </button>
715
337
  </div>
716
338
  </div>
@@ -750,63 +372,17 @@ cssPrefix: pf-v6-c-notification-drawer
750
372
  </h2>
751
373
  </div>
752
374
  <div class="pf-v6-c-notification-drawer__list-item-action">
753
- <div class="pf-v6-c-dropdown">
754
- <button
755
- class="pf-v6-c-dropdown__toggle pf-m-plain"
756
- id="notification-drawer-groups-group1dropdown-kebab-1-button"
757
- aria-expanded="false"
758
- type="button"
759
- aria-label="Actions"
760
- >
375
+ <button
376
+ class="pf-v6-c-menu-toggle pf-m-plain"
377
+ type="button"
378
+ aria-expanded="false"
379
+ aria-label="Menu toggle"
380
+ id="notification-drawer-groups-example-group1-menu-toggle-1"
381
+ >
382
+ <span class="pf-v6-c-menu-toggle__icon">
761
383
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
762
- </button>
763
- <ul
764
- class="pf-v6-c-dropdown__menu pf-m-align-right"
765
- aria-labelledby="notification-drawer-groups-group1dropdown-kebab-1-button"
766
- hidden
767
- role="menu"
768
- >
769
- <li role="none">
770
- <a
771
- class="pf-v6-c-dropdown__menu-item"
772
- role="menuitem"
773
- href="#"
774
- >Link</a>
775
- </li>
776
- <li role="none">
777
- <button
778
- class="pf-v6-c-dropdown__menu-item"
779
- role="menuitem"
780
- type="button"
781
- >Action</button>
782
- </li>
783
- <li role="none">
784
- <a
785
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
786
- role="menuitem"
787
- href="#"
788
- aria-disabled="true"
789
- tabindex="-1"
790
- >Disabled link</a>
791
- </li>
792
- <li role="none">
793
- <button
794
- class="pf-v6-c-dropdown__menu-item"
795
- role="menuitem"
796
- type="button"
797
- disabled
798
- >Disabled action</button>
799
- </li>
800
- <li class="pf-v6-c-divider" role="separator"></li>
801
- <li role="none">
802
- <a
803
- class="pf-v6-c-dropdown__menu-item"
804
- role="menuitem"
805
- href="#"
806
- >Separated link</a>
807
- </li>
808
- </ul>
809
- </div>
384
+ </span>
385
+ </button>
810
386
  </div>
811
387
  <div
812
388
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -831,63 +407,17 @@ cssPrefix: pf-v6-c-notification-drawer
831
407
  </h2>
832
408
  </div>
833
409
  <div class="pf-v6-c-notification-drawer__list-item-action">
834
- <div class="pf-v6-c-dropdown">
835
- <button
836
- class="pf-v6-c-dropdown__toggle pf-m-plain"
837
- id="notification-drawer-groups-group1dropdown-kebab-2-button"
838
- aria-expanded="false"
839
- type="button"
840
- aria-label="Actions"
841
- >
410
+ <button
411
+ class="pf-v6-c-menu-toggle pf-m-plain"
412
+ type="button"
413
+ aria-expanded="false"
414
+ aria-label="Menu toggle"
415
+ id="notification-drawer-groups-example-group1-menu-toggle-3"
416
+ >
417
+ <span class="pf-v6-c-menu-toggle__icon">
842
418
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
843
- </button>
844
- <ul
845
- class="pf-v6-c-dropdown__menu pf-m-align-right"
846
- aria-labelledby="notification-drawer-groups-group1dropdown-kebab-2-button"
847
- hidden
848
- role="menu"
849
- >
850
- <li role="none">
851
- <a
852
- class="pf-v6-c-dropdown__menu-item"
853
- role="menuitem"
854
- href="#"
855
- >Link</a>
856
- </li>
857
- <li role="none">
858
- <button
859
- class="pf-v6-c-dropdown__menu-item"
860
- role="menuitem"
861
- type="button"
862
- >Action</button>
863
- </li>
864
- <li role="none">
865
- <a
866
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
867
- role="menuitem"
868
- href="#"
869
- aria-disabled="true"
870
- tabindex="-1"
871
- >Disabled link</a>
872
- </li>
873
- <li role="none">
874
- <button
875
- class="pf-v6-c-dropdown__menu-item"
876
- role="menuitem"
877
- type="button"
878
- disabled
879
- >Disabled action</button>
880
- </li>
881
- <li class="pf-v6-c-divider" role="separator"></li>
882
- <li role="none">
883
- <a
884
- class="pf-v6-c-dropdown__menu-item"
885
- role="menuitem"
886
- href="#"
887
- >Separated link</a>
888
- </li>
889
- </ul>
890
- </div>
419
+ </span>
420
+ </button>
891
421
  </div>
892
422
  <div
893
423
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -912,63 +442,17 @@ cssPrefix: pf-v6-c-notification-drawer
912
442
  </h2>
913
443
  </div>
914
444
  <div class="pf-v6-c-notification-drawer__list-item-action">
915
- <div class="pf-v6-c-dropdown">
916
- <button
917
- class="pf-v6-c-dropdown__toggle pf-m-plain"
918
- id="notification-drawer-groups-group1dropdown-kebab-3-button"
919
- aria-expanded="false"
920
- type="button"
921
- aria-label="Actions"
922
- >
445
+ <button
446
+ class="pf-v6-c-menu-toggle pf-m-plain"
447
+ type="button"
448
+ aria-expanded="false"
449
+ aria-label="Menu toggle"
450
+ id="notification-drawer-groups-example-group1-menu-toggle-4"
451
+ >
452
+ <span class="pf-v6-c-menu-toggle__icon">
923
453
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
924
- </button>
925
- <ul
926
- class="pf-v6-c-dropdown__menu pf-m-align-right"
927
- aria-labelledby="notification-drawer-groups-group1dropdown-kebab-3-button"
928
- hidden
929
- role="menu"
930
- >
931
- <li role="none">
932
- <a
933
- class="pf-v6-c-dropdown__menu-item"
934
- role="menuitem"
935
- href="#"
936
- >Link</a>
937
- </li>
938
- <li role="none">
939
- <button
940
- class="pf-v6-c-dropdown__menu-item"
941
- role="menuitem"
942
- type="button"
943
- >Action</button>
944
- </li>
945
- <li role="none">
946
- <a
947
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
948
- role="menuitem"
949
- href="#"
950
- aria-disabled="true"
951
- tabindex="-1"
952
- >Disabled link</a>
953
- </li>
954
- <li role="none">
955
- <button
956
- class="pf-v6-c-dropdown__menu-item"
957
- role="menuitem"
958
- type="button"
959
- disabled
960
- >Disabled action</button>
961
- </li>
962
- <li class="pf-v6-c-divider" role="separator"></li>
963
- <li role="none">
964
- <a
965
- class="pf-v6-c-dropdown__menu-item"
966
- role="menuitem"
967
- href="#"
968
- >Separated link</a>
969
- </li>
970
- </ul>
971
- </div>
454
+ </span>
455
+ </button>
972
456
  </div>
973
457
  <div
974
458
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -990,63 +474,17 @@ cssPrefix: pf-v6-c-notification-drawer
990
474
  </h2>
991
475
  </div>
992
476
  <div class="pf-v6-c-notification-drawer__list-item-action">
993
- <div class="pf-v6-c-dropdown pf-m-top">
994
- <button
995
- class="pf-v6-c-dropdown__toggle pf-m-plain"
996
- id="notification-drawer-groups-group1dropdown-kebab-4-button"
997
- aria-expanded="false"
998
- type="button"
999
- aria-label="Actions"
1000
- >
477
+ <button
478
+ class="pf-v6-c-menu-toggle pf-m-plain"
479
+ type="button"
480
+ aria-expanded="false"
481
+ aria-label="Menu toggle"
482
+ id="notification-drawer-groups-example-group1-menu-toggle-5"
483
+ >
484
+ <span class="pf-v6-c-menu-toggle__icon">
1001
485
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1002
- </button>
1003
- <ul
1004
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1005
- aria-labelledby="notification-drawer-groups-group1dropdown-kebab-4-button"
1006
- hidden
1007
- role="menu"
1008
- >
1009
- <li role="none">
1010
- <a
1011
- class="pf-v6-c-dropdown__menu-item"
1012
- role="menuitem"
1013
- href="#"
1014
- >Link</a>
1015
- </li>
1016
- <li role="none">
1017
- <button
1018
- class="pf-v6-c-dropdown__menu-item"
1019
- role="menuitem"
1020
- type="button"
1021
- >Action</button>
1022
- </li>
1023
- <li role="none">
1024
- <a
1025
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1026
- role="menuitem"
1027
- href="#"
1028
- aria-disabled="true"
1029
- tabindex="-1"
1030
- >Disabled link</a>
1031
- </li>
1032
- <li role="none">
1033
- <button
1034
- class="pf-v6-c-dropdown__menu-item"
1035
- role="menuitem"
1036
- type="button"
1037
- disabled
1038
- >Disabled action</button>
1039
- </li>
1040
- <li class="pf-v6-c-divider" role="separator"></li>
1041
- <li role="none">
1042
- <a
1043
- class="pf-v6-c-dropdown__menu-item"
1044
- role="menuitem"
1045
- href="#"
1046
- >Separated link</a>
1047
- </li>
1048
- </ul>
1049
- </div>
486
+ </span>
487
+ </button>
1050
488
  </div>
1051
489
  <div
1052
490
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -1068,63 +506,17 @@ cssPrefix: pf-v6-c-notification-drawer
1068
506
  </h2>
1069
507
  </div>
1070
508
  <div class="pf-v6-c-notification-drawer__list-item-action">
1071
- <div class="pf-v6-c-dropdown pf-m-top">
1072
- <button
1073
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1074
- id="notification-drawer-groups-group1dropdown-kebab-5-button"
1075
- aria-expanded="false"
1076
- type="button"
1077
- aria-label="Actions"
1078
- >
509
+ <button
510
+ class="pf-v6-c-menu-toggle pf-m-plain"
511
+ type="button"
512
+ aria-expanded="false"
513
+ aria-label="Menu toggle"
514
+ id="notification-drawer-groups-example-group1-menu-toggle-6"
515
+ >
516
+ <span class="pf-v6-c-menu-toggle__icon">
1079
517
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1080
- </button>
1081
- <ul
1082
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1083
- aria-labelledby="notification-drawer-groups-group1dropdown-kebab-5-button"
1084
- hidden
1085
- role="menu"
1086
- >
1087
- <li role="none">
1088
- <a
1089
- class="pf-v6-c-dropdown__menu-item"
1090
- role="menuitem"
1091
- href="#"
1092
- >Link</a>
1093
- </li>
1094
- <li role="none">
1095
- <button
1096
- class="pf-v6-c-dropdown__menu-item"
1097
- role="menuitem"
1098
- type="button"
1099
- >Action</button>
1100
- </li>
1101
- <li role="none">
1102
- <a
1103
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1104
- role="menuitem"
1105
- href="#"
1106
- aria-disabled="true"
1107
- tabindex="-1"
1108
- >Disabled link</a>
1109
- </li>
1110
- <li role="none">
1111
- <button
1112
- class="pf-v6-c-dropdown__menu-item"
1113
- role="menuitem"
1114
- type="button"
1115
- disabled
1116
- >Disabled action</button>
1117
- </li>
1118
- <li class="pf-v6-c-divider" role="separator"></li>
1119
- <li role="none">
1120
- <a
1121
- class="pf-v6-c-dropdown__menu-item"
1122
- role="menuitem"
1123
- href="#"
1124
- >Separated link</a>
1125
- </li>
1126
- </ul>
1127
- </div>
518
+ </span>
519
+ </button>
1128
520
  </div>
1129
521
  <div
1130
522
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -1148,63 +540,17 @@ cssPrefix: pf-v6-c-notification-drawer
1148
540
  </h2>
1149
541
  </div>
1150
542
  <div class="pf-v6-c-notification-drawer__list-item-action">
1151
- <div class="pf-v6-c-dropdown pf-m-top">
1152
- <button
1153
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1154
- id="notification-drawer-groups-group1dropdown-kebab-6-button"
1155
- aria-expanded="false"
1156
- type="button"
1157
- aria-label="Actions"
1158
- >
543
+ <button
544
+ class="pf-v6-c-menu-toggle pf-m-plain"
545
+ type="button"
546
+ aria-expanded="false"
547
+ aria-label="Menu toggle"
548
+ id="notification-drawer-groups-example-group1-menu-toggle-7"
549
+ >
550
+ <span class="pf-v6-c-menu-toggle__icon">
1159
551
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1160
- </button>
1161
- <ul
1162
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1163
- aria-labelledby="notification-drawer-groups-group1dropdown-kebab-6-button"
1164
- hidden
1165
- role="menu"
1166
- >
1167
- <li role="none">
1168
- <a
1169
- class="pf-v6-c-dropdown__menu-item"
1170
- role="menuitem"
1171
- href="#"
1172
- >Link</a>
1173
- </li>
1174
- <li role="none">
1175
- <button
1176
- class="pf-v6-c-dropdown__menu-item"
1177
- role="menuitem"
1178
- type="button"
1179
- >Action</button>
1180
- </li>
1181
- <li role="none">
1182
- <a
1183
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1184
- role="menuitem"
1185
- href="#"
1186
- aria-disabled="true"
1187
- tabindex="-1"
1188
- >Disabled link</a>
1189
- </li>
1190
- <li role="none">
1191
- <button
1192
- class="pf-v6-c-dropdown__menu-item"
1193
- role="menuitem"
1194
- type="button"
1195
- disabled
1196
- >Disabled action</button>
1197
- </li>
1198
- <li class="pf-v6-c-divider" role="separator"></li>
1199
- <li role="none">
1200
- <a
1201
- class="pf-v6-c-dropdown__menu-item"
1202
- role="menuitem"
1203
- href="#"
1204
- >Separated link</a>
1205
- </li>
1206
- </ul>
1207
- </div>
552
+ </span>
553
+ </button>
1208
554
  </div>
1209
555
  <div
1210
556
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -1222,78 +568,58 @@ cssPrefix: pf-v6-c-notification-drawer
1222
568
  </span>
1223
569
  <h2
1224
570
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
1225
- style="--pf-v5-c-notification-drawer__list-item-header-title--max-lines: 2"
571
+ style="--pf-v6-c-notification-drawer__list-item-header-title--max-lines: 2"
1226
572
  >
1227
573
  <span class="pf-v6-screen-reader">Success notification:</span>
1228
574
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis odio risus. Ut dictum vitae sapien at posuere. Nullam suscipit massa quis lacus pellentesque scelerisque. Donec non maximus neque, quis ornare nunc. Vivamus in nibh sed libero feugiat feugiat. Nulla lacinia rutrum est, a commodo odio vestibulum suscipit. Nullam id quam et quam porttitor interdum quis nec tellus. Vestibulum arcu dui, pulvinar eu tellus in, semper mattis diam. Sed commodo tincidunt lacus non pulvinar. Curabitur tempor molestie vestibulum. Vivamus vel mi dignissim, efficitur neque eget, efficitur massa. Mauris vitae nunc augue. Donec augue lorem, malesuada et quam vitae, volutpat mattis nisi. Nullam nec venenatis ex, quis lobortis purus. Sed nisl dolor, mattis sit amet tincidunt quis, mollis sed massa.
1229
575
  </h2>
1230
576
  </div>
1231
577
  <div class="pf-v6-c-notification-drawer__list-item-action">
1232
- <div class="pf-v6-c-dropdown pf-m-top">
1233
- <button
1234
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1235
- id="notification-drawer-groups-group1dropdown-kebab-7-button"
1236
- aria-expanded="false"
1237
- type="button"
1238
- aria-label="Actions"
1239
- >
578
+ <button
579
+ class="pf-v6-c-menu-toggle pf-m-plain"
580
+ type="button"
581
+ aria-expanded="false"
582
+ aria-label="Menu toggle"
583
+ id="notification-drawer-groups-example-group1-menu-toggle-8"
584
+ >
585
+ <span class="pf-v6-c-menu-toggle__icon">
1240
586
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1241
- </button>
1242
- <ul
1243
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1244
- aria-labelledby="notification-drawer-groups-group1dropdown-kebab-7-button"
1245
- hidden
1246
- role="menu"
1247
- >
1248
- <li role="none">
1249
- <a
1250
- class="pf-v6-c-dropdown__menu-item"
1251
- role="menuitem"
1252
- href="#"
1253
- >Link</a>
1254
- </li>
1255
- <li role="none">
1256
- <button
1257
- class="pf-v6-c-dropdown__menu-item"
1258
- role="menuitem"
1259
- type="button"
1260
- >Action</button>
1261
- </li>
1262
- <li role="none">
1263
- <a
1264
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1265
- role="menuitem"
1266
- href="#"
1267
- aria-disabled="true"
1268
- tabindex="-1"
1269
- >Disabled link</a>
1270
- </li>
1271
- <li role="none">
1272
- <button
1273
- class="pf-v6-c-dropdown__menu-item"
1274
- role="menuitem"
1275
- type="button"
1276
- disabled
1277
- >Disabled action</button>
1278
- </li>
1279
- <li class="pf-v6-c-divider" role="separator"></li>
1280
- <li role="none">
1281
- <a
1282
- class="pf-v6-c-dropdown__menu-item"
1283
- role="menuitem"
1284
- href="#"
1285
- >Separated link</a>
1286
- </li>
1287
- </ul>
1288
- </div>
587
+ </span>
588
+ </button>
1289
589
  </div>
1290
590
  <div
1291
591
  class="pf-v6-c-notification-drawer__list-item-description"
1292
- >This example uses ".pf-m-truncate" and sets "--pf-v5-c-notification-drawer__list-item-header-title--max-lines: 2" to limit title to two lines and truncate any overflow text with ellipses.</div>
592
+ >This example uses ".pf-m-truncate" and sets "--pf-v6-c-notification-drawer__list-item-header-title--max-lines: 2" to limit title to two lines and truncate any overflow text with ellipses.</div>
1293
593
  <div
1294
594
  class="pf-v6-c-notification-drawer__list-item-timestamp"
1295
595
  >50 minutes ago</div>
1296
596
  </li>
597
+ <li
598
+ class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success"
599
+ >
600
+ <div class="pf-v6-c-notification-drawer__list-item-header">
601
+ <span class="pf-v6-c-notification-drawer__list-item-header-icon">
602
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
603
+ </span>
604
+ <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
605
+ <span class="pf-v6-screen-reader">Success notification:</span>
606
+ Notification drawer item title
607
+ </h2>
608
+ </div>
609
+ <div
610
+ class="pf-v6-c-notification-drawer__list-item-action pf-m-no-offset"
611
+ >
612
+ <button class="pf-v6-c-button pf-m-primary" type="button">
613
+ <span class="pf-v6-c-button__text">Action</span>
614
+ </button>
615
+ </div>
616
+ <div
617
+ class="pf-v6-c-notification-drawer__list-item-description"
618
+ >This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.</div>
619
+ <div
620
+ class="pf-v6-c-notification-drawer__list-item-timestamp"
621
+ >55 minutes ago</div>
622
+ </li>
1297
623
  </ul>
1298
624
  </section>
1299
625
  <section class="pf-v6-c-notification-drawer__group pf-m-expanded">
@@ -1329,63 +655,17 @@ cssPrefix: pf-v6-c-notification-drawer
1329
655
  </h2>
1330
656
  </div>
1331
657
  <div class="pf-v6-c-notification-drawer__list-item-action">
1332
- <div class="pf-v6-c-dropdown">
1333
- <button
1334
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1335
- id="notification-drawer-groups-group2dropdown-kebab-1-button"
1336
- aria-expanded="false"
1337
- type="button"
1338
- aria-label="Actions"
1339
- >
658
+ <button
659
+ class="pf-v6-c-menu-toggle pf-m-plain"
660
+ type="button"
661
+ aria-expanded="false"
662
+ aria-label="Menu toggle"
663
+ id="notification-drawer-groups-example-group2-menu-toggle-1"
664
+ >
665
+ <span class="pf-v6-c-menu-toggle__icon">
1340
666
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1341
- </button>
1342
- <ul
1343
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1344
- aria-labelledby="notification-drawer-groups-group2dropdown-kebab-1-button"
1345
- hidden
1346
- role="menu"
1347
- >
1348
- <li role="none">
1349
- <a
1350
- class="pf-v6-c-dropdown__menu-item"
1351
- role="menuitem"
1352
- href="#"
1353
- >Link</a>
1354
- </li>
1355
- <li role="none">
1356
- <button
1357
- class="pf-v6-c-dropdown__menu-item"
1358
- role="menuitem"
1359
- type="button"
1360
- >Action</button>
1361
- </li>
1362
- <li role="none">
1363
- <a
1364
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1365
- role="menuitem"
1366
- href="#"
1367
- aria-disabled="true"
1368
- tabindex="-1"
1369
- >Disabled link</a>
1370
- </li>
1371
- <li role="none">
1372
- <button
1373
- class="pf-v6-c-dropdown__menu-item"
1374
- role="menuitem"
1375
- type="button"
1376
- disabled
1377
- >Disabled action</button>
1378
- </li>
1379
- <li class="pf-v6-c-divider" role="separator"></li>
1380
- <li role="none">
1381
- <a
1382
- class="pf-v6-c-dropdown__menu-item"
1383
- role="menuitem"
1384
- href="#"
1385
- >Separated link</a>
1386
- </li>
1387
- </ul>
1388
- </div>
667
+ </span>
668
+ </button>
1389
669
  </div>
1390
670
  <div
1391
671
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -1410,63 +690,17 @@ cssPrefix: pf-v6-c-notification-drawer
1410
690
  </h2>
1411
691
  </div>
1412
692
  <div class="pf-v6-c-notification-drawer__list-item-action">
1413
- <div class="pf-v6-c-dropdown">
1414
- <button
1415
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1416
- id="notification-drawer-groups-group2dropdown-kebab-2-button"
1417
- aria-expanded="false"
1418
- type="button"
1419
- aria-label="Actions"
1420
- >
693
+ <button
694
+ class="pf-v6-c-menu-toggle pf-m-plain"
695
+ type="button"
696
+ aria-expanded="false"
697
+ aria-label="Menu toggle"
698
+ id="notification-drawer-groups-example-group2-menu-toggle-3"
699
+ >
700
+ <span class="pf-v6-c-menu-toggle__icon">
1421
701
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1422
- </button>
1423
- <ul
1424
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1425
- aria-labelledby="notification-drawer-groups-group2dropdown-kebab-2-button"
1426
- hidden
1427
- role="menu"
1428
- >
1429
- <li role="none">
1430
- <a
1431
- class="pf-v6-c-dropdown__menu-item"
1432
- role="menuitem"
1433
- href="#"
1434
- >Link</a>
1435
- </li>
1436
- <li role="none">
1437
- <button
1438
- class="pf-v6-c-dropdown__menu-item"
1439
- role="menuitem"
1440
- type="button"
1441
- >Action</button>
1442
- </li>
1443
- <li role="none">
1444
- <a
1445
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1446
- role="menuitem"
1447
- href="#"
1448
- aria-disabled="true"
1449
- tabindex="-1"
1450
- >Disabled link</a>
1451
- </li>
1452
- <li role="none">
1453
- <button
1454
- class="pf-v6-c-dropdown__menu-item"
1455
- role="menuitem"
1456
- type="button"
1457
- disabled
1458
- >Disabled action</button>
1459
- </li>
1460
- <li class="pf-v6-c-divider" role="separator"></li>
1461
- <li role="none">
1462
- <a
1463
- class="pf-v6-c-dropdown__menu-item"
1464
- role="menuitem"
1465
- href="#"
1466
- >Separated link</a>
1467
- </li>
1468
- </ul>
1469
- </div>
702
+ </span>
703
+ </button>
1470
704
  </div>
1471
705
  <div
1472
706
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -1491,63 +725,17 @@ cssPrefix: pf-v6-c-notification-drawer
1491
725
  </h2>
1492
726
  </div>
1493
727
  <div class="pf-v6-c-notification-drawer__list-item-action">
1494
- <div class="pf-v6-c-dropdown">
1495
- <button
1496
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1497
- id="notification-drawer-groups-group2dropdown-kebab-3-button"
1498
- aria-expanded="false"
1499
- type="button"
1500
- aria-label="Actions"
1501
- >
728
+ <button
729
+ class="pf-v6-c-menu-toggle pf-m-plain"
730
+ type="button"
731
+ aria-expanded="false"
732
+ aria-label="Menu toggle"
733
+ id="notification-drawer-groups-example-group2-menu-toggle-4"
734
+ >
735
+ <span class="pf-v6-c-menu-toggle__icon">
1502
736
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1503
- </button>
1504
- <ul
1505
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1506
- aria-labelledby="notification-drawer-groups-group2dropdown-kebab-3-button"
1507
- hidden
1508
- role="menu"
1509
- >
1510
- <li role="none">
1511
- <a
1512
- class="pf-v6-c-dropdown__menu-item"
1513
- role="menuitem"
1514
- href="#"
1515
- >Link</a>
1516
- </li>
1517
- <li role="none">
1518
- <button
1519
- class="pf-v6-c-dropdown__menu-item"
1520
- role="menuitem"
1521
- type="button"
1522
- >Action</button>
1523
- </li>
1524
- <li role="none">
1525
- <a
1526
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1527
- role="menuitem"
1528
- href="#"
1529
- aria-disabled="true"
1530
- tabindex="-1"
1531
- >Disabled link</a>
1532
- </li>
1533
- <li role="none">
1534
- <button
1535
- class="pf-v6-c-dropdown__menu-item"
1536
- role="menuitem"
1537
- type="button"
1538
- disabled
1539
- >Disabled action</button>
1540
- </li>
1541
- <li class="pf-v6-c-divider" role="separator"></li>
1542
- <li role="none">
1543
- <a
1544
- class="pf-v6-c-dropdown__menu-item"
1545
- role="menuitem"
1546
- href="#"
1547
- >Separated link</a>
1548
- </li>
1549
- </ul>
1550
- </div>
737
+ </span>
738
+ </button>
1551
739
  </div>
1552
740
  <div
1553
741
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -1569,63 +757,17 @@ cssPrefix: pf-v6-c-notification-drawer
1569
757
  </h2>
1570
758
  </div>
1571
759
  <div class="pf-v6-c-notification-drawer__list-item-action">
1572
- <div class="pf-v6-c-dropdown pf-m-top">
1573
- <button
1574
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1575
- id="notification-drawer-groups-group2dropdown-kebab-4-button"
1576
- aria-expanded="false"
1577
- type="button"
1578
- aria-label="Actions"
1579
- >
760
+ <button
761
+ class="pf-v6-c-menu-toggle pf-m-plain"
762
+ type="button"
763
+ aria-expanded="false"
764
+ aria-label="Menu toggle"
765
+ id="notification-drawer-groups-example-group2-menu-toggle-5"
766
+ >
767
+ <span class="pf-v6-c-menu-toggle__icon">
1580
768
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1581
- </button>
1582
- <ul
1583
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1584
- aria-labelledby="notification-drawer-groups-group2dropdown-kebab-4-button"
1585
- hidden
1586
- role="menu"
1587
- >
1588
- <li role="none">
1589
- <a
1590
- class="pf-v6-c-dropdown__menu-item"
1591
- role="menuitem"
1592
- href="#"
1593
- >Link</a>
1594
- </li>
1595
- <li role="none">
1596
- <button
1597
- class="pf-v6-c-dropdown__menu-item"
1598
- role="menuitem"
1599
- type="button"
1600
- >Action</button>
1601
- </li>
1602
- <li role="none">
1603
- <a
1604
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1605
- role="menuitem"
1606
- href="#"
1607
- aria-disabled="true"
1608
- tabindex="-1"
1609
- >Disabled link</a>
1610
- </li>
1611
- <li role="none">
1612
- <button
1613
- class="pf-v6-c-dropdown__menu-item"
1614
- role="menuitem"
1615
- type="button"
1616
- disabled
1617
- >Disabled action</button>
1618
- </li>
1619
- <li class="pf-v6-c-divider" role="separator"></li>
1620
- <li role="none">
1621
- <a
1622
- class="pf-v6-c-dropdown__menu-item"
1623
- role="menuitem"
1624
- href="#"
1625
- >Separated link</a>
1626
- </li>
1627
- </ul>
1628
- </div>
769
+ </span>
770
+ </button>
1629
771
  </div>
1630
772
  <div
1631
773
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -1647,63 +789,17 @@ cssPrefix: pf-v6-c-notification-drawer
1647
789
  </h2>
1648
790
  </div>
1649
791
  <div class="pf-v6-c-notification-drawer__list-item-action">
1650
- <div class="pf-v6-c-dropdown pf-m-top">
1651
- <button
1652
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1653
- id="notification-drawer-groups-group2dropdown-kebab-5-button"
1654
- aria-expanded="false"
1655
- type="button"
1656
- aria-label="Actions"
1657
- >
792
+ <button
793
+ class="pf-v6-c-menu-toggle pf-m-plain"
794
+ type="button"
795
+ aria-expanded="false"
796
+ aria-label="Menu toggle"
797
+ id="notification-drawer-groups-example-group2-menu-toggle-6"
798
+ >
799
+ <span class="pf-v6-c-menu-toggle__icon">
1658
800
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1659
- </button>
1660
- <ul
1661
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1662
- aria-labelledby="notification-drawer-groups-group2dropdown-kebab-5-button"
1663
- hidden
1664
- role="menu"
1665
- >
1666
- <li role="none">
1667
- <a
1668
- class="pf-v6-c-dropdown__menu-item"
1669
- role="menuitem"
1670
- href="#"
1671
- >Link</a>
1672
- </li>
1673
- <li role="none">
1674
- <button
1675
- class="pf-v6-c-dropdown__menu-item"
1676
- role="menuitem"
1677
- type="button"
1678
- >Action</button>
1679
- </li>
1680
- <li role="none">
1681
- <a
1682
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1683
- role="menuitem"
1684
- href="#"
1685
- aria-disabled="true"
1686
- tabindex="-1"
1687
- >Disabled link</a>
1688
- </li>
1689
- <li role="none">
1690
- <button
1691
- class="pf-v6-c-dropdown__menu-item"
1692
- role="menuitem"
1693
- type="button"
1694
- disabled
1695
- >Disabled action</button>
1696
- </li>
1697
- <li class="pf-v6-c-divider" role="separator"></li>
1698
- <li role="none">
1699
- <a
1700
- class="pf-v6-c-dropdown__menu-item"
1701
- role="menuitem"
1702
- href="#"
1703
- >Separated link</a>
1704
- </li>
1705
- </ul>
1706
- </div>
801
+ </span>
802
+ </button>
1707
803
  </div>
1708
804
  <div
1709
805
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -1727,63 +823,17 @@ cssPrefix: pf-v6-c-notification-drawer
1727
823
  </h2>
1728
824
  </div>
1729
825
  <div class="pf-v6-c-notification-drawer__list-item-action">
1730
- <div class="pf-v6-c-dropdown pf-m-top">
1731
- <button
1732
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1733
- id="notification-drawer-groups-group2dropdown-kebab-6-button"
1734
- aria-expanded="false"
1735
- type="button"
1736
- aria-label="Actions"
1737
- >
826
+ <button
827
+ class="pf-v6-c-menu-toggle pf-m-plain"
828
+ type="button"
829
+ aria-expanded="false"
830
+ aria-label="Menu toggle"
831
+ id="notification-drawer-groups-example-group2-menu-toggle-7"
832
+ >
833
+ <span class="pf-v6-c-menu-toggle__icon">
1738
834
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1739
- </button>
1740
- <ul
1741
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1742
- aria-labelledby="notification-drawer-groups-group2dropdown-kebab-6-button"
1743
- hidden
1744
- role="menu"
1745
- >
1746
- <li role="none">
1747
- <a
1748
- class="pf-v6-c-dropdown__menu-item"
1749
- role="menuitem"
1750
- href="#"
1751
- >Link</a>
1752
- </li>
1753
- <li role="none">
1754
- <button
1755
- class="pf-v6-c-dropdown__menu-item"
1756
- role="menuitem"
1757
- type="button"
1758
- >Action</button>
1759
- </li>
1760
- <li role="none">
1761
- <a
1762
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1763
- role="menuitem"
1764
- href="#"
1765
- aria-disabled="true"
1766
- tabindex="-1"
1767
- >Disabled link</a>
1768
- </li>
1769
- <li role="none">
1770
- <button
1771
- class="pf-v6-c-dropdown__menu-item"
1772
- role="menuitem"
1773
- type="button"
1774
- disabled
1775
- >Disabled action</button>
1776
- </li>
1777
- <li class="pf-v6-c-divider" role="separator"></li>
1778
- <li role="none">
1779
- <a
1780
- class="pf-v6-c-dropdown__menu-item"
1781
- role="menuitem"
1782
- href="#"
1783
- >Separated link</a>
1784
- </li>
1785
- </ul>
1786
- </div>
835
+ </span>
836
+ </button>
1787
837
  </div>
1788
838
  <div
1789
839
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -1801,78 +851,58 @@ cssPrefix: pf-v6-c-notification-drawer
1801
851
  </span>
1802
852
  <h2
1803
853
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
1804
- style="--pf-v5-c-notification-drawer__list-item-header-title--max-lines: 2"
854
+ style="--pf-v6-c-notification-drawer__list-item-header-title--max-lines: 2"
1805
855
  >
1806
856
  <span class="pf-v6-screen-reader">Success notification:</span>
1807
857
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis odio risus. Ut dictum vitae sapien at posuere. Nullam suscipit massa quis lacus pellentesque scelerisque. Donec non maximus neque, quis ornare nunc. Vivamus in nibh sed libero feugiat feugiat. Nulla lacinia rutrum est, a commodo odio vestibulum suscipit. Nullam id quam et quam porttitor interdum quis nec tellus. Vestibulum arcu dui, pulvinar eu tellus in, semper mattis diam. Sed commodo tincidunt lacus non pulvinar. Curabitur tempor molestie vestibulum. Vivamus vel mi dignissim, efficitur neque eget, efficitur massa. Mauris vitae nunc augue. Donec augue lorem, malesuada et quam vitae, volutpat mattis nisi. Nullam nec venenatis ex, quis lobortis purus. Sed nisl dolor, mattis sit amet tincidunt quis, mollis sed massa.
1808
858
  </h2>
1809
859
  </div>
1810
860
  <div class="pf-v6-c-notification-drawer__list-item-action">
1811
- <div class="pf-v6-c-dropdown pf-m-top">
1812
- <button
1813
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1814
- id="notification-drawer-groups-group2dropdown-kebab-7-button"
1815
- aria-expanded="false"
1816
- type="button"
1817
- aria-label="Actions"
1818
- >
861
+ <button
862
+ class="pf-v6-c-menu-toggle pf-m-plain"
863
+ type="button"
864
+ aria-expanded="false"
865
+ aria-label="Menu toggle"
866
+ id="notification-drawer-groups-example-group2-menu-toggle-8"
867
+ >
868
+ <span class="pf-v6-c-menu-toggle__icon">
1819
869
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1820
- </button>
1821
- <ul
1822
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1823
- aria-labelledby="notification-drawer-groups-group2dropdown-kebab-7-button"
1824
- hidden
1825
- role="menu"
1826
- >
1827
- <li role="none">
1828
- <a
1829
- class="pf-v6-c-dropdown__menu-item"
1830
- role="menuitem"
1831
- href="#"
1832
- >Link</a>
1833
- </li>
1834
- <li role="none">
1835
- <button
1836
- class="pf-v6-c-dropdown__menu-item"
1837
- role="menuitem"
1838
- type="button"
1839
- >Action</button>
1840
- </li>
1841
- <li role="none">
1842
- <a
1843
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1844
- role="menuitem"
1845
- href="#"
1846
- aria-disabled="true"
1847
- tabindex="-1"
1848
- >Disabled link</a>
1849
- </li>
1850
- <li role="none">
1851
- <button
1852
- class="pf-v6-c-dropdown__menu-item"
1853
- role="menuitem"
1854
- type="button"
1855
- disabled
1856
- >Disabled action</button>
1857
- </li>
1858
- <li class="pf-v6-c-divider" role="separator"></li>
1859
- <li role="none">
1860
- <a
1861
- class="pf-v6-c-dropdown__menu-item"
1862
- role="menuitem"
1863
- href="#"
1864
- >Separated link</a>
1865
- </li>
1866
- </ul>
1867
- </div>
870
+ </span>
871
+ </button>
1868
872
  </div>
1869
873
  <div
1870
874
  class="pf-v6-c-notification-drawer__list-item-description"
1871
- >This example uses ".pf-m-truncate" and sets "--pf-v5-c-notification-drawer__list-item-header-title--max-lines: 2" to limit title to two lines and truncate any overflow text with ellipses.</div>
875
+ >This example uses ".pf-m-truncate" and sets "--pf-v6-c-notification-drawer__list-item-header-title--max-lines: 2" to limit title to two lines and truncate any overflow text with ellipses.</div>
1872
876
  <div
1873
877
  class="pf-v6-c-notification-drawer__list-item-timestamp"
1874
878
  >50 minutes ago</div>
1875
879
  </li>
880
+ <li
881
+ class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success"
882
+ >
883
+ <div class="pf-v6-c-notification-drawer__list-item-header">
884
+ <span class="pf-v6-c-notification-drawer__list-item-header-icon">
885
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
886
+ </span>
887
+ <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
888
+ <span class="pf-v6-screen-reader">Success notification:</span>
889
+ Notification drawer item title
890
+ </h2>
891
+ </div>
892
+ <div
893
+ class="pf-v6-c-notification-drawer__list-item-action pf-m-no-offset"
894
+ >
895
+ <button class="pf-v6-c-button pf-m-primary" type="button">
896
+ <span class="pf-v6-c-button__text">Action</span>
897
+ </button>
898
+ </div>
899
+ <div
900
+ class="pf-v6-c-notification-drawer__list-item-description"
901
+ >This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.</div>
902
+ <div
903
+ class="pf-v6-c-notification-drawer__list-item-timestamp"
904
+ >55 minutes ago</div>
905
+ </li>
1876
906
  </ul>
1877
907
  </section>
1878
908
  <section class="pf-v6-c-notification-drawer__group">
@@ -1908,63 +938,17 @@ cssPrefix: pf-v6-c-notification-drawer
1908
938
  </h2>
1909
939
  </div>
1910
940
  <div class="pf-v6-c-notification-drawer__list-item-action">
1911
- <div class="pf-v6-c-dropdown">
1912
- <button
1913
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1914
- id="notification-drawer-groups-group3dropdown-kebab-1-button"
1915
- aria-expanded="false"
1916
- type="button"
1917
- aria-label="Actions"
1918
- >
941
+ <button
942
+ class="pf-v6-c-menu-toggle pf-m-plain"
943
+ type="button"
944
+ aria-expanded="false"
945
+ aria-label="Menu toggle"
946
+ id="notification-drawer-groups-example-group3-menu-toggle-1"
947
+ >
948
+ <span class="pf-v6-c-menu-toggle__icon">
1919
949
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1920
- </button>
1921
- <ul
1922
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1923
- aria-labelledby="notification-drawer-groups-group3dropdown-kebab-1-button"
1924
- hidden
1925
- role="menu"
1926
- >
1927
- <li role="none">
1928
- <a
1929
- class="pf-v6-c-dropdown__menu-item"
1930
- role="menuitem"
1931
- href="#"
1932
- >Link</a>
1933
- </li>
1934
- <li role="none">
1935
- <button
1936
- class="pf-v6-c-dropdown__menu-item"
1937
- role="menuitem"
1938
- type="button"
1939
- >Action</button>
1940
- </li>
1941
- <li role="none">
1942
- <a
1943
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1944
- role="menuitem"
1945
- href="#"
1946
- aria-disabled="true"
1947
- tabindex="-1"
1948
- >Disabled link</a>
1949
- </li>
1950
- <li role="none">
1951
- <button
1952
- class="pf-v6-c-dropdown__menu-item"
1953
- role="menuitem"
1954
- type="button"
1955
- disabled
1956
- >Disabled action</button>
1957
- </li>
1958
- <li class="pf-v6-c-divider" role="separator"></li>
1959
- <li role="none">
1960
- <a
1961
- class="pf-v6-c-dropdown__menu-item"
1962
- role="menuitem"
1963
- href="#"
1964
- >Separated link</a>
1965
- </li>
1966
- </ul>
1967
- </div>
950
+ </span>
951
+ </button>
1968
952
  </div>
1969
953
  <div
1970
954
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -1989,63 +973,17 @@ cssPrefix: pf-v6-c-notification-drawer
1989
973
  </h2>
1990
974
  </div>
1991
975
  <div class="pf-v6-c-notification-drawer__list-item-action">
1992
- <div class="pf-v6-c-dropdown">
1993
- <button
1994
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1995
- id="notification-drawer-groups-group3dropdown-kebab-2-button"
1996
- aria-expanded="false"
1997
- type="button"
1998
- aria-label="Actions"
1999
- >
976
+ <button
977
+ class="pf-v6-c-menu-toggle pf-m-plain"
978
+ type="button"
979
+ aria-expanded="false"
980
+ aria-label="Menu toggle"
981
+ id="notification-drawer-groups-example-group3-menu-toggle-3"
982
+ >
983
+ <span class="pf-v6-c-menu-toggle__icon">
2000
984
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2001
- </button>
2002
- <ul
2003
- class="pf-v6-c-dropdown__menu pf-m-align-right"
2004
- aria-labelledby="notification-drawer-groups-group3dropdown-kebab-2-button"
2005
- hidden
2006
- role="menu"
2007
- >
2008
- <li role="none">
2009
- <a
2010
- class="pf-v6-c-dropdown__menu-item"
2011
- role="menuitem"
2012
- href="#"
2013
- >Link</a>
2014
- </li>
2015
- <li role="none">
2016
- <button
2017
- class="pf-v6-c-dropdown__menu-item"
2018
- role="menuitem"
2019
- type="button"
2020
- >Action</button>
2021
- </li>
2022
- <li role="none">
2023
- <a
2024
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2025
- role="menuitem"
2026
- href="#"
2027
- aria-disabled="true"
2028
- tabindex="-1"
2029
- >Disabled link</a>
2030
- </li>
2031
- <li role="none">
2032
- <button
2033
- class="pf-v6-c-dropdown__menu-item"
2034
- role="menuitem"
2035
- type="button"
2036
- disabled
2037
- >Disabled action</button>
2038
- </li>
2039
- <li class="pf-v6-c-divider" role="separator"></li>
2040
- <li role="none">
2041
- <a
2042
- class="pf-v6-c-dropdown__menu-item"
2043
- role="menuitem"
2044
- href="#"
2045
- >Separated link</a>
2046
- </li>
2047
- </ul>
2048
- </div>
985
+ </span>
986
+ </button>
2049
987
  </div>
2050
988
  <div
2051
989
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -2070,63 +1008,17 @@ cssPrefix: pf-v6-c-notification-drawer
2070
1008
  </h2>
2071
1009
  </div>
2072
1010
  <div class="pf-v6-c-notification-drawer__list-item-action">
2073
- <div class="pf-v6-c-dropdown">
2074
- <button
2075
- class="pf-v6-c-dropdown__toggle pf-m-plain"
2076
- id="notification-drawer-groups-group3dropdown-kebab-3-button"
2077
- aria-expanded="false"
2078
- type="button"
2079
- aria-label="Actions"
2080
- >
1011
+ <button
1012
+ class="pf-v6-c-menu-toggle pf-m-plain"
1013
+ type="button"
1014
+ aria-expanded="false"
1015
+ aria-label="Menu toggle"
1016
+ id="notification-drawer-groups-example-group3-menu-toggle-4"
1017
+ >
1018
+ <span class="pf-v6-c-menu-toggle__icon">
2081
1019
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2082
- </button>
2083
- <ul
2084
- class="pf-v6-c-dropdown__menu pf-m-align-right"
2085
- aria-labelledby="notification-drawer-groups-group3dropdown-kebab-3-button"
2086
- hidden
2087
- role="menu"
2088
- >
2089
- <li role="none">
2090
- <a
2091
- class="pf-v6-c-dropdown__menu-item"
2092
- role="menuitem"
2093
- href="#"
2094
- >Link</a>
2095
- </li>
2096
- <li role="none">
2097
- <button
2098
- class="pf-v6-c-dropdown__menu-item"
2099
- role="menuitem"
2100
- type="button"
2101
- >Action</button>
2102
- </li>
2103
- <li role="none">
2104
- <a
2105
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2106
- role="menuitem"
2107
- href="#"
2108
- aria-disabled="true"
2109
- tabindex="-1"
2110
- >Disabled link</a>
2111
- </li>
2112
- <li role="none">
2113
- <button
2114
- class="pf-v6-c-dropdown__menu-item"
2115
- role="menuitem"
2116
- type="button"
2117
- disabled
2118
- >Disabled action</button>
2119
- </li>
2120
- <li class="pf-v6-c-divider" role="separator"></li>
2121
- <li role="none">
2122
- <a
2123
- class="pf-v6-c-dropdown__menu-item"
2124
- role="menuitem"
2125
- href="#"
2126
- >Separated link</a>
2127
- </li>
2128
- </ul>
2129
- </div>
1020
+ </span>
1021
+ </button>
2130
1022
  </div>
2131
1023
  <div
2132
1024
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -2148,63 +1040,17 @@ cssPrefix: pf-v6-c-notification-drawer
2148
1040
  </h2>
2149
1041
  </div>
2150
1042
  <div class="pf-v6-c-notification-drawer__list-item-action">
2151
- <div class="pf-v6-c-dropdown pf-m-top">
2152
- <button
2153
- class="pf-v6-c-dropdown__toggle pf-m-plain"
2154
- id="notification-drawer-groups-group3dropdown-kebab-4-button"
2155
- aria-expanded="false"
2156
- type="button"
2157
- aria-label="Actions"
2158
- >
1043
+ <button
1044
+ class="pf-v6-c-menu-toggle pf-m-plain"
1045
+ type="button"
1046
+ aria-expanded="false"
1047
+ aria-label="Menu toggle"
1048
+ id="notification-drawer-groups-example-group3-menu-toggle-5"
1049
+ >
1050
+ <span class="pf-v6-c-menu-toggle__icon">
2159
1051
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2160
- </button>
2161
- <ul
2162
- class="pf-v6-c-dropdown__menu pf-m-align-right"
2163
- aria-labelledby="notification-drawer-groups-group3dropdown-kebab-4-button"
2164
- hidden
2165
- role="menu"
2166
- >
2167
- <li role="none">
2168
- <a
2169
- class="pf-v6-c-dropdown__menu-item"
2170
- role="menuitem"
2171
- href="#"
2172
- >Link</a>
2173
- </li>
2174
- <li role="none">
2175
- <button
2176
- class="pf-v6-c-dropdown__menu-item"
2177
- role="menuitem"
2178
- type="button"
2179
- >Action</button>
2180
- </li>
2181
- <li role="none">
2182
- <a
2183
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2184
- role="menuitem"
2185
- href="#"
2186
- aria-disabled="true"
2187
- tabindex="-1"
2188
- >Disabled link</a>
2189
- </li>
2190
- <li role="none">
2191
- <button
2192
- class="pf-v6-c-dropdown__menu-item"
2193
- role="menuitem"
2194
- type="button"
2195
- disabled
2196
- >Disabled action</button>
2197
- </li>
2198
- <li class="pf-v6-c-divider" role="separator"></li>
2199
- <li role="none">
2200
- <a
2201
- class="pf-v6-c-dropdown__menu-item"
2202
- role="menuitem"
2203
- href="#"
2204
- >Separated link</a>
2205
- </li>
2206
- </ul>
2207
- </div>
1052
+ </span>
1053
+ </button>
2208
1054
  </div>
2209
1055
  <div
2210
1056
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -2226,63 +1072,17 @@ cssPrefix: pf-v6-c-notification-drawer
2226
1072
  </h2>
2227
1073
  </div>
2228
1074
  <div class="pf-v6-c-notification-drawer__list-item-action">
2229
- <div class="pf-v6-c-dropdown pf-m-top">
2230
- <button
2231
- class="pf-v6-c-dropdown__toggle pf-m-plain"
2232
- id="notification-drawer-groups-group3dropdown-kebab-5-button"
2233
- aria-expanded="false"
2234
- type="button"
2235
- aria-label="Actions"
2236
- >
1075
+ <button
1076
+ class="pf-v6-c-menu-toggle pf-m-plain"
1077
+ type="button"
1078
+ aria-expanded="false"
1079
+ aria-label="Menu toggle"
1080
+ id="notification-drawer-groups-example-group3-menu-toggle-6"
1081
+ >
1082
+ <span class="pf-v6-c-menu-toggle__icon">
2237
1083
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2238
- </button>
2239
- <ul
2240
- class="pf-v6-c-dropdown__menu pf-m-align-right"
2241
- aria-labelledby="notification-drawer-groups-group3dropdown-kebab-5-button"
2242
- hidden
2243
- role="menu"
2244
- >
2245
- <li role="none">
2246
- <a
2247
- class="pf-v6-c-dropdown__menu-item"
2248
- role="menuitem"
2249
- href="#"
2250
- >Link</a>
2251
- </li>
2252
- <li role="none">
2253
- <button
2254
- class="pf-v6-c-dropdown__menu-item"
2255
- role="menuitem"
2256
- type="button"
2257
- >Action</button>
2258
- </li>
2259
- <li role="none">
2260
- <a
2261
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2262
- role="menuitem"
2263
- href="#"
2264
- aria-disabled="true"
2265
- tabindex="-1"
2266
- >Disabled link</a>
2267
- </li>
2268
- <li role="none">
2269
- <button
2270
- class="pf-v6-c-dropdown__menu-item"
2271
- role="menuitem"
2272
- type="button"
2273
- disabled
2274
- >Disabled action</button>
2275
- </li>
2276
- <li class="pf-v6-c-divider" role="separator"></li>
2277
- <li role="none">
2278
- <a
2279
- class="pf-v6-c-dropdown__menu-item"
2280
- role="menuitem"
2281
- href="#"
2282
- >Separated link</a>
2283
- </li>
2284
- </ul>
2285
- </div>
1084
+ </span>
1085
+ </button>
2286
1086
  </div>
2287
1087
  <div
2288
1088
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -2306,63 +1106,17 @@ cssPrefix: pf-v6-c-notification-drawer
2306
1106
  </h2>
2307
1107
  </div>
2308
1108
  <div class="pf-v6-c-notification-drawer__list-item-action">
2309
- <div class="pf-v6-c-dropdown pf-m-top">
2310
- <button
2311
- class="pf-v6-c-dropdown__toggle pf-m-plain"
2312
- id="notification-drawer-groups-group3dropdown-kebab-6-button"
2313
- aria-expanded="false"
2314
- type="button"
2315
- aria-label="Actions"
2316
- >
1109
+ <button
1110
+ class="pf-v6-c-menu-toggle pf-m-plain"
1111
+ type="button"
1112
+ aria-expanded="false"
1113
+ aria-label="Menu toggle"
1114
+ id="notification-drawer-groups-example-group3-menu-toggle-7"
1115
+ >
1116
+ <span class="pf-v6-c-menu-toggle__icon">
2317
1117
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2318
- </button>
2319
- <ul
2320
- class="pf-v6-c-dropdown__menu pf-m-align-right"
2321
- aria-labelledby="notification-drawer-groups-group3dropdown-kebab-6-button"
2322
- hidden
2323
- role="menu"
2324
- >
2325
- <li role="none">
2326
- <a
2327
- class="pf-v6-c-dropdown__menu-item"
2328
- role="menuitem"
2329
- href="#"
2330
- >Link</a>
2331
- </li>
2332
- <li role="none">
2333
- <button
2334
- class="pf-v6-c-dropdown__menu-item"
2335
- role="menuitem"
2336
- type="button"
2337
- >Action</button>
2338
- </li>
2339
- <li role="none">
2340
- <a
2341
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2342
- role="menuitem"
2343
- href="#"
2344
- aria-disabled="true"
2345
- tabindex="-1"
2346
- >Disabled link</a>
2347
- </li>
2348
- <li role="none">
2349
- <button
2350
- class="pf-v6-c-dropdown__menu-item"
2351
- role="menuitem"
2352
- type="button"
2353
- disabled
2354
- >Disabled action</button>
2355
- </li>
2356
- <li class="pf-v6-c-divider" role="separator"></li>
2357
- <li role="none">
2358
- <a
2359
- class="pf-v6-c-dropdown__menu-item"
2360
- role="menuitem"
2361
- href="#"
2362
- >Separated link</a>
2363
- </li>
2364
- </ul>
2365
- </div>
1118
+ </span>
1119
+ </button>
2366
1120
  </div>
2367
1121
  <div
2368
1122
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -2380,78 +1134,58 @@ cssPrefix: pf-v6-c-notification-drawer
2380
1134
  </span>
2381
1135
  <h2
2382
1136
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
2383
- style="--pf-v5-c-notification-drawer__list-item-header-title--max-lines: 2"
1137
+ style="--pf-v6-c-notification-drawer__list-item-header-title--max-lines: 2"
2384
1138
  >
2385
1139
  <span class="pf-v6-screen-reader">Success notification:</span>
2386
1140
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis odio risus. Ut dictum vitae sapien at posuere. Nullam suscipit massa quis lacus pellentesque scelerisque. Donec non maximus neque, quis ornare nunc. Vivamus in nibh sed libero feugiat feugiat. Nulla lacinia rutrum est, a commodo odio vestibulum suscipit. Nullam id quam et quam porttitor interdum quis nec tellus. Vestibulum arcu dui, pulvinar eu tellus in, semper mattis diam. Sed commodo tincidunt lacus non pulvinar. Curabitur tempor molestie vestibulum. Vivamus vel mi dignissim, efficitur neque eget, efficitur massa. Mauris vitae nunc augue. Donec augue lorem, malesuada et quam vitae, volutpat mattis nisi. Nullam nec venenatis ex, quis lobortis purus. Sed nisl dolor, mattis sit amet tincidunt quis, mollis sed massa.
2387
1141
  </h2>
2388
1142
  </div>
2389
1143
  <div class="pf-v6-c-notification-drawer__list-item-action">
2390
- <div class="pf-v6-c-dropdown pf-m-top">
2391
- <button
2392
- class="pf-v6-c-dropdown__toggle pf-m-plain"
2393
- id="notification-drawer-groups-group3dropdown-kebab-7-button"
2394
- aria-expanded="false"
2395
- type="button"
2396
- aria-label="Actions"
2397
- >
1144
+ <button
1145
+ class="pf-v6-c-menu-toggle pf-m-plain"
1146
+ type="button"
1147
+ aria-expanded="false"
1148
+ aria-label="Menu toggle"
1149
+ id="notification-drawer-groups-example-group3-menu-toggle-8"
1150
+ >
1151
+ <span class="pf-v6-c-menu-toggle__icon">
2398
1152
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2399
- </button>
2400
- <ul
2401
- class="pf-v6-c-dropdown__menu pf-m-align-right"
2402
- aria-labelledby="notification-drawer-groups-group3dropdown-kebab-7-button"
2403
- hidden
2404
- role="menu"
2405
- >
2406
- <li role="none">
2407
- <a
2408
- class="pf-v6-c-dropdown__menu-item"
2409
- role="menuitem"
2410
- href="#"
2411
- >Link</a>
2412
- </li>
2413
- <li role="none">
2414
- <button
2415
- class="pf-v6-c-dropdown__menu-item"
2416
- role="menuitem"
2417
- type="button"
2418
- >Action</button>
2419
- </li>
2420
- <li role="none">
2421
- <a
2422
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2423
- role="menuitem"
2424
- href="#"
2425
- aria-disabled="true"
2426
- tabindex="-1"
2427
- >Disabled link</a>
2428
- </li>
2429
- <li role="none">
2430
- <button
2431
- class="pf-v6-c-dropdown__menu-item"
2432
- role="menuitem"
2433
- type="button"
2434
- disabled
2435
- >Disabled action</button>
2436
- </li>
2437
- <li class="pf-v6-c-divider" role="separator"></li>
2438
- <li role="none">
2439
- <a
2440
- class="pf-v6-c-dropdown__menu-item"
2441
- role="menuitem"
2442
- href="#"
2443
- >Separated link</a>
2444
- </li>
2445
- </ul>
2446
- </div>
1153
+ </span>
1154
+ </button>
2447
1155
  </div>
2448
1156
  <div
2449
1157
  class="pf-v6-c-notification-drawer__list-item-description"
2450
- >This example uses ".pf-m-truncate" and sets "--pf-v5-c-notification-drawer__list-item-header-title--max-lines: 2" to limit title to two lines and truncate any overflow text with ellipses.</div>
1158
+ >This example uses ".pf-m-truncate" and sets "--pf-v6-c-notification-drawer__list-item-header-title--max-lines: 2" to limit title to two lines and truncate any overflow text with ellipses.</div>
2451
1159
  <div
2452
1160
  class="pf-v6-c-notification-drawer__list-item-timestamp"
2453
1161
  >50 minutes ago</div>
2454
1162
  </li>
1163
+ <li
1164
+ class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success"
1165
+ >
1166
+ <div class="pf-v6-c-notification-drawer__list-item-header">
1167
+ <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1168
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
1169
+ </span>
1170
+ <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1171
+ <span class="pf-v6-screen-reader">Success notification:</span>
1172
+ Notification drawer item title
1173
+ </h2>
1174
+ </div>
1175
+ <div
1176
+ class="pf-v6-c-notification-drawer__list-item-action pf-m-no-offset"
1177
+ >
1178
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1179
+ <span class="pf-v6-c-button__text">Action</span>
1180
+ </button>
1181
+ </div>
1182
+ <div
1183
+ class="pf-v6-c-notification-drawer__list-item-description"
1184
+ >This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.</div>
1185
+ <div
1186
+ class="pf-v6-c-notification-drawer__list-item-timestamp"
1187
+ >55 minutes ago</div>
1188
+ </li>
2455
1189
  </ul>
2456
1190
  </section>
2457
1191
  <section class="pf-v6-c-notification-drawer__group">
@@ -2487,63 +1221,17 @@ cssPrefix: pf-v6-c-notification-drawer
2487
1221
  </h2>
2488
1222
  </div>
2489
1223
  <div class="pf-v6-c-notification-drawer__list-item-action">
2490
- <div class="pf-v6-c-dropdown">
2491
- <button
2492
- class="pf-v6-c-dropdown__toggle pf-m-plain"
2493
- id="notification-drawer-groups-group4dropdown-kebab-1-button"
2494
- aria-expanded="false"
2495
- type="button"
2496
- aria-label="Actions"
2497
- >
1224
+ <button
1225
+ class="pf-v6-c-menu-toggle pf-m-plain"
1226
+ type="button"
1227
+ aria-expanded="false"
1228
+ aria-label="Menu toggle"
1229
+ id="notification-drawer-groups-example-group4-menu-toggle-1"
1230
+ >
1231
+ <span class="pf-v6-c-menu-toggle__icon">
2498
1232
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2499
- </button>
2500
- <ul
2501
- class="pf-v6-c-dropdown__menu pf-m-align-right"
2502
- aria-labelledby="notification-drawer-groups-group4dropdown-kebab-1-button"
2503
- hidden
2504
- role="menu"
2505
- >
2506
- <li role="none">
2507
- <a
2508
- class="pf-v6-c-dropdown__menu-item"
2509
- role="menuitem"
2510
- href="#"
2511
- >Link</a>
2512
- </li>
2513
- <li role="none">
2514
- <button
2515
- class="pf-v6-c-dropdown__menu-item"
2516
- role="menuitem"
2517
- type="button"
2518
- >Action</button>
2519
- </li>
2520
- <li role="none">
2521
- <a
2522
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2523
- role="menuitem"
2524
- href="#"
2525
- aria-disabled="true"
2526
- tabindex="-1"
2527
- >Disabled link</a>
2528
- </li>
2529
- <li role="none">
2530
- <button
2531
- class="pf-v6-c-dropdown__menu-item"
2532
- role="menuitem"
2533
- type="button"
2534
- disabled
2535
- >Disabled action</button>
2536
- </li>
2537
- <li class="pf-v6-c-divider" role="separator"></li>
2538
- <li role="none">
2539
- <a
2540
- class="pf-v6-c-dropdown__menu-item"
2541
- role="menuitem"
2542
- href="#"
2543
- >Separated link</a>
2544
- </li>
2545
- </ul>
2546
- </div>
1233
+ </span>
1234
+ </button>
2547
1235
  </div>
2548
1236
  <div
2549
1237
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -2568,63 +1256,17 @@ cssPrefix: pf-v6-c-notification-drawer
2568
1256
  </h2>
2569
1257
  </div>
2570
1258
  <div class="pf-v6-c-notification-drawer__list-item-action">
2571
- <div class="pf-v6-c-dropdown">
2572
- <button
2573
- class="pf-v6-c-dropdown__toggle pf-m-plain"
2574
- id="notification-drawer-groups-group4dropdown-kebab-2-button"
2575
- aria-expanded="false"
2576
- type="button"
2577
- aria-label="Actions"
2578
- >
1259
+ <button
1260
+ class="pf-v6-c-menu-toggle pf-m-plain"
1261
+ type="button"
1262
+ aria-expanded="false"
1263
+ aria-label="Menu toggle"
1264
+ id="notification-drawer-groups-example-group4-menu-toggle-3"
1265
+ >
1266
+ <span class="pf-v6-c-menu-toggle__icon">
2579
1267
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2580
- </button>
2581
- <ul
2582
- class="pf-v6-c-dropdown__menu pf-m-align-right"
2583
- aria-labelledby="notification-drawer-groups-group4dropdown-kebab-2-button"
2584
- hidden
2585
- role="menu"
2586
- >
2587
- <li role="none">
2588
- <a
2589
- class="pf-v6-c-dropdown__menu-item"
2590
- role="menuitem"
2591
- href="#"
2592
- >Link</a>
2593
- </li>
2594
- <li role="none">
2595
- <button
2596
- class="pf-v6-c-dropdown__menu-item"
2597
- role="menuitem"
2598
- type="button"
2599
- >Action</button>
2600
- </li>
2601
- <li role="none">
2602
- <a
2603
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2604
- role="menuitem"
2605
- href="#"
2606
- aria-disabled="true"
2607
- tabindex="-1"
2608
- >Disabled link</a>
2609
- </li>
2610
- <li role="none">
2611
- <button
2612
- class="pf-v6-c-dropdown__menu-item"
2613
- role="menuitem"
2614
- type="button"
2615
- disabled
2616
- >Disabled action</button>
2617
- </li>
2618
- <li class="pf-v6-c-divider" role="separator"></li>
2619
- <li role="none">
2620
- <a
2621
- class="pf-v6-c-dropdown__menu-item"
2622
- role="menuitem"
2623
- href="#"
2624
- >Separated link</a>
2625
- </li>
2626
- </ul>
2627
- </div>
1268
+ </span>
1269
+ </button>
2628
1270
  </div>
2629
1271
  <div
2630
1272
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -2649,63 +1291,17 @@ cssPrefix: pf-v6-c-notification-drawer
2649
1291
  </h2>
2650
1292
  </div>
2651
1293
  <div class="pf-v6-c-notification-drawer__list-item-action">
2652
- <div class="pf-v6-c-dropdown">
2653
- <button
2654
- class="pf-v6-c-dropdown__toggle pf-m-plain"
2655
- id="notification-drawer-groups-group4dropdown-kebab-3-button"
2656
- aria-expanded="false"
2657
- type="button"
2658
- aria-label="Actions"
2659
- >
1294
+ <button
1295
+ class="pf-v6-c-menu-toggle pf-m-plain"
1296
+ type="button"
1297
+ aria-expanded="false"
1298
+ aria-label="Menu toggle"
1299
+ id="notification-drawer-groups-example-group4-menu-toggle-4"
1300
+ >
1301
+ <span class="pf-v6-c-menu-toggle__icon">
2660
1302
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2661
- </button>
2662
- <ul
2663
- class="pf-v6-c-dropdown__menu pf-m-align-right"
2664
- aria-labelledby="notification-drawer-groups-group4dropdown-kebab-3-button"
2665
- hidden
2666
- role="menu"
2667
- >
2668
- <li role="none">
2669
- <a
2670
- class="pf-v6-c-dropdown__menu-item"
2671
- role="menuitem"
2672
- href="#"
2673
- >Link</a>
2674
- </li>
2675
- <li role="none">
2676
- <button
2677
- class="pf-v6-c-dropdown__menu-item"
2678
- role="menuitem"
2679
- type="button"
2680
- >Action</button>
2681
- </li>
2682
- <li role="none">
2683
- <a
2684
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2685
- role="menuitem"
2686
- href="#"
2687
- aria-disabled="true"
2688
- tabindex="-1"
2689
- >Disabled link</a>
2690
- </li>
2691
- <li role="none">
2692
- <button
2693
- class="pf-v6-c-dropdown__menu-item"
2694
- role="menuitem"
2695
- type="button"
2696
- disabled
2697
- >Disabled action</button>
2698
- </li>
2699
- <li class="pf-v6-c-divider" role="separator"></li>
2700
- <li role="none">
2701
- <a
2702
- class="pf-v6-c-dropdown__menu-item"
2703
- role="menuitem"
2704
- href="#"
2705
- >Separated link</a>
2706
- </li>
2707
- </ul>
2708
- </div>
1303
+ </span>
1304
+ </button>
2709
1305
  </div>
2710
1306
  <div
2711
1307
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -2727,63 +1323,17 @@ cssPrefix: pf-v6-c-notification-drawer
2727
1323
  </h2>
2728
1324
  </div>
2729
1325
  <div class="pf-v6-c-notification-drawer__list-item-action">
2730
- <div class="pf-v6-c-dropdown pf-m-top">
2731
- <button
2732
- class="pf-v6-c-dropdown__toggle pf-m-plain"
2733
- id="notification-drawer-groups-group4dropdown-kebab-4-button"
2734
- aria-expanded="false"
2735
- type="button"
2736
- aria-label="Actions"
2737
- >
1326
+ <button
1327
+ class="pf-v6-c-menu-toggle pf-m-plain"
1328
+ type="button"
1329
+ aria-expanded="false"
1330
+ aria-label="Menu toggle"
1331
+ id="notification-drawer-groups-example-group4-menu-toggle-5"
1332
+ >
1333
+ <span class="pf-v6-c-menu-toggle__icon">
2738
1334
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2739
- </button>
2740
- <ul
2741
- class="pf-v6-c-dropdown__menu pf-m-align-right"
2742
- aria-labelledby="notification-drawer-groups-group4dropdown-kebab-4-button"
2743
- hidden
2744
- role="menu"
2745
- >
2746
- <li role="none">
2747
- <a
2748
- class="pf-v6-c-dropdown__menu-item"
2749
- role="menuitem"
2750
- href="#"
2751
- >Link</a>
2752
- </li>
2753
- <li role="none">
2754
- <button
2755
- class="pf-v6-c-dropdown__menu-item"
2756
- role="menuitem"
2757
- type="button"
2758
- >Action</button>
2759
- </li>
2760
- <li role="none">
2761
- <a
2762
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2763
- role="menuitem"
2764
- href="#"
2765
- aria-disabled="true"
2766
- tabindex="-1"
2767
- >Disabled link</a>
2768
- </li>
2769
- <li role="none">
2770
- <button
2771
- class="pf-v6-c-dropdown__menu-item"
2772
- role="menuitem"
2773
- type="button"
2774
- disabled
2775
- >Disabled action</button>
2776
- </li>
2777
- <li class="pf-v6-c-divider" role="separator"></li>
2778
- <li role="none">
2779
- <a
2780
- class="pf-v6-c-dropdown__menu-item"
2781
- role="menuitem"
2782
- href="#"
2783
- >Separated link</a>
2784
- </li>
2785
- </ul>
2786
- </div>
1335
+ </span>
1336
+ </button>
2787
1337
  </div>
2788
1338
  <div
2789
1339
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -2805,63 +1355,17 @@ cssPrefix: pf-v6-c-notification-drawer
2805
1355
  </h2>
2806
1356
  </div>
2807
1357
  <div class="pf-v6-c-notification-drawer__list-item-action">
2808
- <div class="pf-v6-c-dropdown pf-m-top">
2809
- <button
2810
- class="pf-v6-c-dropdown__toggle pf-m-plain"
2811
- id="notification-drawer-groups-group4dropdown-kebab-5-button"
2812
- aria-expanded="false"
2813
- type="button"
2814
- aria-label="Actions"
2815
- >
1358
+ <button
1359
+ class="pf-v6-c-menu-toggle pf-m-plain"
1360
+ type="button"
1361
+ aria-expanded="false"
1362
+ aria-label="Menu toggle"
1363
+ id="notification-drawer-groups-example-group4-menu-toggle-6"
1364
+ >
1365
+ <span class="pf-v6-c-menu-toggle__icon">
2816
1366
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2817
- </button>
2818
- <ul
2819
- class="pf-v6-c-dropdown__menu pf-m-align-right"
2820
- aria-labelledby="notification-drawer-groups-group4dropdown-kebab-5-button"
2821
- hidden
2822
- role="menu"
2823
- >
2824
- <li role="none">
2825
- <a
2826
- class="pf-v6-c-dropdown__menu-item"
2827
- role="menuitem"
2828
- href="#"
2829
- >Link</a>
2830
- </li>
2831
- <li role="none">
2832
- <button
2833
- class="pf-v6-c-dropdown__menu-item"
2834
- role="menuitem"
2835
- type="button"
2836
- >Action</button>
2837
- </li>
2838
- <li role="none">
2839
- <a
2840
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2841
- role="menuitem"
2842
- href="#"
2843
- aria-disabled="true"
2844
- tabindex="-1"
2845
- >Disabled link</a>
2846
- </li>
2847
- <li role="none">
2848
- <button
2849
- class="pf-v6-c-dropdown__menu-item"
2850
- role="menuitem"
2851
- type="button"
2852
- disabled
2853
- >Disabled action</button>
2854
- </li>
2855
- <li class="pf-v6-c-divider" role="separator"></li>
2856
- <li role="none">
2857
- <a
2858
- class="pf-v6-c-dropdown__menu-item"
2859
- role="menuitem"
2860
- href="#"
2861
- >Separated link</a>
2862
- </li>
2863
- </ul>
2864
- </div>
1367
+ </span>
1368
+ </button>
2865
1369
  </div>
2866
1370
  <div
2867
1371
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -2885,63 +1389,17 @@ cssPrefix: pf-v6-c-notification-drawer
2885
1389
  </h2>
2886
1390
  </div>
2887
1391
  <div class="pf-v6-c-notification-drawer__list-item-action">
2888
- <div class="pf-v6-c-dropdown pf-m-top">
2889
- <button
2890
- class="pf-v6-c-dropdown__toggle pf-m-plain"
2891
- id="notification-drawer-groups-group4dropdown-kebab-6-button"
2892
- aria-expanded="false"
2893
- type="button"
2894
- aria-label="Actions"
2895
- >
1392
+ <button
1393
+ class="pf-v6-c-menu-toggle pf-m-plain"
1394
+ type="button"
1395
+ aria-expanded="false"
1396
+ aria-label="Menu toggle"
1397
+ id="notification-drawer-groups-example-group4-menu-toggle-7"
1398
+ >
1399
+ <span class="pf-v6-c-menu-toggle__icon">
2896
1400
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2897
- </button>
2898
- <ul
2899
- class="pf-v6-c-dropdown__menu pf-m-align-right"
2900
- aria-labelledby="notification-drawer-groups-group4dropdown-kebab-6-button"
2901
- hidden
2902
- role="menu"
2903
- >
2904
- <li role="none">
2905
- <a
2906
- class="pf-v6-c-dropdown__menu-item"
2907
- role="menuitem"
2908
- href="#"
2909
- >Link</a>
2910
- </li>
2911
- <li role="none">
2912
- <button
2913
- class="pf-v6-c-dropdown__menu-item"
2914
- role="menuitem"
2915
- type="button"
2916
- >Action</button>
2917
- </li>
2918
- <li role="none">
2919
- <a
2920
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2921
- role="menuitem"
2922
- href="#"
2923
- aria-disabled="true"
2924
- tabindex="-1"
2925
- >Disabled link</a>
2926
- </li>
2927
- <li role="none">
2928
- <button
2929
- class="pf-v6-c-dropdown__menu-item"
2930
- role="menuitem"
2931
- type="button"
2932
- disabled
2933
- >Disabled action</button>
2934
- </li>
2935
- <li class="pf-v6-c-divider" role="separator"></li>
2936
- <li role="none">
2937
- <a
2938
- class="pf-v6-c-dropdown__menu-item"
2939
- role="menuitem"
2940
- href="#"
2941
- >Separated link</a>
2942
- </li>
2943
- </ul>
2944
- </div>
1401
+ </span>
1402
+ </button>
2945
1403
  </div>
2946
1404
  <div
2947
1405
  class="pf-v6-c-notification-drawer__list-item-description"
@@ -2959,78 +1417,58 @@ cssPrefix: pf-v6-c-notification-drawer
2959
1417
  </span>
2960
1418
  <h2
2961
1419
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
2962
- style="--pf-v5-c-notification-drawer__list-item-header-title--max-lines: 2"
1420
+ style="--pf-v6-c-notification-drawer__list-item-header-title--max-lines: 2"
2963
1421
  >
2964
1422
  <span class="pf-v6-screen-reader">Success notification:</span>
2965
1423
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis odio risus. Ut dictum vitae sapien at posuere. Nullam suscipit massa quis lacus pellentesque scelerisque. Donec non maximus neque, quis ornare nunc. Vivamus in nibh sed libero feugiat feugiat. Nulla lacinia rutrum est, a commodo odio vestibulum suscipit. Nullam id quam et quam porttitor interdum quis nec tellus. Vestibulum arcu dui, pulvinar eu tellus in, semper mattis diam. Sed commodo tincidunt lacus non pulvinar. Curabitur tempor molestie vestibulum. Vivamus vel mi dignissim, efficitur neque eget, efficitur massa. Mauris vitae nunc augue. Donec augue lorem, malesuada et quam vitae, volutpat mattis nisi. Nullam nec venenatis ex, quis lobortis purus. Sed nisl dolor, mattis sit amet tincidunt quis, mollis sed massa.
2966
1424
  </h2>
2967
1425
  </div>
2968
1426
  <div class="pf-v6-c-notification-drawer__list-item-action">
2969
- <div class="pf-v6-c-dropdown pf-m-top">
2970
- <button
2971
- class="pf-v6-c-dropdown__toggle pf-m-plain"
2972
- id="notification-drawer-groups-group4dropdown-kebab-7-button"
2973
- aria-expanded="false"
2974
- type="button"
2975
- aria-label="Actions"
2976
- >
1427
+ <button
1428
+ class="pf-v6-c-menu-toggle pf-m-plain"
1429
+ type="button"
1430
+ aria-expanded="false"
1431
+ aria-label="Menu toggle"
1432
+ id="notification-drawer-groups-example-group4-menu-toggle-8"
1433
+ >
1434
+ <span class="pf-v6-c-menu-toggle__icon">
2977
1435
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2978
- </button>
2979
- <ul
2980
- class="pf-v6-c-dropdown__menu pf-m-align-right"
2981
- aria-labelledby="notification-drawer-groups-group4dropdown-kebab-7-button"
2982
- hidden
2983
- role="menu"
2984
- >
2985
- <li role="none">
2986
- <a
2987
- class="pf-v6-c-dropdown__menu-item"
2988
- role="menuitem"
2989
- href="#"
2990
- >Link</a>
2991
- </li>
2992
- <li role="none">
2993
- <button
2994
- class="pf-v6-c-dropdown__menu-item"
2995
- role="menuitem"
2996
- type="button"
2997
- >Action</button>
2998
- </li>
2999
- <li role="none">
3000
- <a
3001
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
3002
- role="menuitem"
3003
- href="#"
3004
- aria-disabled="true"
3005
- tabindex="-1"
3006
- >Disabled link</a>
3007
- </li>
3008
- <li role="none">
3009
- <button
3010
- class="pf-v6-c-dropdown__menu-item"
3011
- role="menuitem"
3012
- type="button"
3013
- disabled
3014
- >Disabled action</button>
3015
- </li>
3016
- <li class="pf-v6-c-divider" role="separator"></li>
3017
- <li role="none">
3018
- <a
3019
- class="pf-v6-c-dropdown__menu-item"
3020
- role="menuitem"
3021
- href="#"
3022
- >Separated link</a>
3023
- </li>
3024
- </ul>
3025
- </div>
1436
+ </span>
1437
+ </button>
3026
1438
  </div>
3027
1439
  <div
3028
1440
  class="pf-v6-c-notification-drawer__list-item-description"
3029
- >This example uses ".pf-m-truncate" and sets "--pf-v5-c-notification-drawer__list-item-header-title--max-lines: 2" to limit title to two lines and truncate any overflow text with ellipses.</div>
1441
+ >This example uses ".pf-m-truncate" and sets "--pf-v6-c-notification-drawer__list-item-header-title--max-lines: 2" to limit title to two lines and truncate any overflow text with ellipses.</div>
3030
1442
  <div
3031
1443
  class="pf-v6-c-notification-drawer__list-item-timestamp"
3032
1444
  >50 minutes ago</div>
3033
1445
  </li>
1446
+ <li
1447
+ class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success"
1448
+ >
1449
+ <div class="pf-v6-c-notification-drawer__list-item-header">
1450
+ <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1451
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
1452
+ </span>
1453
+ <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1454
+ <span class="pf-v6-screen-reader">Success notification:</span>
1455
+ Notification drawer item title
1456
+ </h2>
1457
+ </div>
1458
+ <div
1459
+ class="pf-v6-c-notification-drawer__list-item-action pf-m-no-offset"
1460
+ >
1461
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1462
+ <span class="pf-v6-c-button__text">Action</span>
1463
+ </button>
1464
+ </div>
1465
+ <div
1466
+ class="pf-v6-c-notification-drawer__list-item-description"
1467
+ >This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.</div>
1468
+ <div
1469
+ class="pf-v6-c-notification-drawer__list-item-timestamp"
1470
+ >55 minutes ago</div>
1471
+ </li>
3034
1472
  </ul>
3035
1473
  </section>
3036
1474
  </div>
@@ -3083,3 +1521,4 @@ cssPrefix: pf-v6-c-notification-drawer
3083
1521
  | `.pf-m-hoverable` | `.pf-v6-c-notification-drawer__list-item` | Modifies a notification list item hover states to inidicate it is clickable. |
3084
1522
  | `.pf-m-expanded` | `.pf-v6-c-notification-drawer__group` | Modifies a notification group for the expanded state. |
3085
1523
  | `.pf-m-truncate` | `.pf-v6-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-v6-c-notification-drawer__list-item-header-title--max-lines` (the default value is `1`). |
1524
+ | `.pf-m-no-offset` | `.pf-v6-c-notification-drawer__list-item-action` | Modifies a notification item action to remove the vertical offset for action alignment. |