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

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/_core.scss +2 -0
  5. package/assets/fontawesome/_fixed-width.scss +2 -0
  6. package/assets/fontawesome/_icons.scss +1 -0
  7. package/assets/fontawesome/_index.scss +12 -0
  8. package/assets/fontawesome/_larger.scss +4 -2
  9. package/assets/fontawesome/_list.scss +4 -2
  10. package/assets/fontawesome/_rotated-flipped.scss +2 -0
  11. package/assets/fontawesome/_screen-reader.scss +1 -0
  12. package/assets/fontawesome/_stacked.scss +3 -1
  13. package/assets/fontawesome/_variables.scss +3 -2
  14. package/assets/fontawesome/fontawesome.scss +12 -12
  15. package/assets/icons/iconUnicodes.json +6 -0
  16. package/assets/images/img_avatar-dark.svg +22 -16
  17. package/assets/images/img_avatar-light.svg +25 -18
  18. package/assets/images/pf-background.svg +21 -21
  19. package/assets/images/pf_logo.svg +11 -11
  20. package/assets/images/pf_logo_white.svg +16 -17
  21. package/assets/pficon/pf-v6-pficon.woff2 +0 -0
  22. package/assets/pficon/pficon.scss +310 -271
  23. package/base/_index.scss +10 -0
  24. package/base/{_globals.scss → normalize.scss} +15 -48
  25. package/base/patternfly-common.css +14 -0
  26. package/base/patternfly-common.scss +68 -2
  27. package/base/patternfly-fa-icons.css +1 -1
  28. package/base/patternfly-fa-icons.scss +35 -2
  29. package/base/patternfly-fonts.css +10 -80
  30. package/base/patternfly-fonts.scss +49 -2
  31. package/base/patternfly-pf-icons.css +158 -134
  32. package/base/patternfly-pf-icons.scss +1 -2
  33. package/base/patternfly-svg-icons.css +5 -0
  34. package/base/{_svg-icons.scss → patternfly-svg-icons.scss} +2 -0
  35. package/base/patternfly-variables.css +1082 -1206
  36. package/base/patternfly-variables.scss +20 -2
  37. package/base/reset.scss +33 -0
  38. package/base/tokens/_index.scss +6 -0
  39. package/base/tokens/tokens-charts-dark.scss +173 -0
  40. package/base/tokens/{_tokens-charts.scss → tokens-charts.scss} +162 -148
  41. package/base/tokens/{_tokens-dark.scss → tokens-dark.scss} +307 -294
  42. package/base/tokens/{_tokens-default.scss → tokens-default.scss} +574 -447
  43. package/base/tokens/{_tokens-font.scss → tokens-local.scss} +13 -34
  44. package/base/tokens/{_tokens-palette.scss → tokens-palette.scss} +69 -70
  45. package/components/AboutModalBox/about-modal-box.css +86 -81
  46. package/components/AboutModalBox/about-modal-box.scss +80 -82
  47. package/components/Accordion/accordion.css +44 -43
  48. package/components/Accordion/accordion.scss +52 -52
  49. package/components/ActionList/action-list.css +6 -5
  50. package/components/ActionList/action-list.scss +7 -5
  51. package/components/Alert/alert-group.css +72 -19
  52. package/components/Alert/alert-group.scss +105 -18
  53. package/components/Alert/alert.css +52 -59
  54. package/components/Alert/alert.scss +56 -65
  55. package/components/Avatar/avatar.css +42 -41
  56. package/components/Avatar/avatar.scss +8 -7
  57. package/components/BackToTop/back-to-top.css +19 -17
  58. package/components/BackToTop/back-to-top.scss +17 -17
  59. package/components/Backdrop/backdrop.css +1 -1
  60. package/components/Backdrop/backdrop.scss +3 -4
  61. package/components/BackgroundImage/background-image.scss +3 -4
  62. package/components/Badge/badge.css +29 -7
  63. package/components/Badge/badge.scss +33 -9
  64. package/components/Banner/banner.css +30 -37
  65. package/components/Banner/banner.scss +30 -43
  66. package/components/Brand/brand.css +14 -10
  67. package/components/Brand/brand.scss +8 -5
  68. package/components/Breadcrumb/breadcrumb.css +23 -24
  69. package/components/Breadcrumb/breadcrumb.scss +25 -28
  70. package/components/Button/button.css +150 -128
  71. package/components/Button/button.scss +155 -130
  72. package/components/CalendarMonth/calendar-month.css +46 -46
  73. package/components/CalendarMonth/calendar-month.scss +49 -50
  74. package/components/Card/card.css +110 -93
  75. package/components/Card/card.scss +118 -92
  76. package/components/Check/check.css +5 -5
  77. package/components/Check/check.scss +7 -8
  78. package/components/ClipboardCopy/clipboard-copy.css +33 -41
  79. package/components/ClipboardCopy/clipboard-copy.scss +35 -44
  80. package/components/CodeBlock/code-block.css +21 -20
  81. package/components/CodeBlock/code-block.scss +21 -21
  82. package/components/CodeEditor/code-editor.css +35 -34
  83. package/components/CodeEditor/code-editor.scss +35 -35
  84. package/components/Content/content.css +167 -153
  85. package/components/Content/content.scss +204 -145
  86. package/components/DataList/data-list-grid.css +117 -117
  87. package/components/DataList/data-list-grid.scss +22 -20
  88. package/components/DataList/data-list.css +308 -312
  89. package/components/DataList/data-list.scss +145 -152
  90. package/components/DatePicker/date-picker.css +17 -17
  91. package/components/DatePicker/date-picker.scss +17 -18
  92. package/components/DescriptionList/description-list-order.css +5 -5
  93. package/components/DescriptionList/description-list-order.scss +3 -1
  94. package/components/DescriptionList/description-list.css +46 -44
  95. package/components/DescriptionList/description-list.scss +26 -31
  96. package/components/Divider/divider.css +104 -107
  97. package/components/Divider/divider.scss +19 -19
  98. package/components/DragDrop/drag-drop.css +4 -2
  99. package/components/DragDrop/drag-drop.scss +3 -3
  100. package/components/Drawer/drawer.css +115 -114
  101. package/components/Drawer/drawer.scss +136 -134
  102. package/components/DualListSelector/dual-list-selector.css +64 -61
  103. package/components/DualListSelector/dual-list-selector.scss +54 -51
  104. package/components/EmptyState/empty-state.css +38 -37
  105. package/components/EmptyState/empty-state.scss +39 -39
  106. package/components/ExpandableSection/expandable-section.css +27 -86
  107. package/components/ExpandableSection/expandable-section.scss +32 -101
  108. package/components/FileUpload/file-upload.css +2 -2
  109. package/components/FileUpload/file-upload.scss +2 -3
  110. package/components/Form/form.css +173 -115
  111. package/components/Form/form.scss +117 -103
  112. package/components/FormControl/form-control.css +57 -57
  113. package/components/FormControl/form-control.scss +69 -67
  114. package/components/HelperText/helper-text.css +5 -4
  115. package/components/HelperText/helper-text.scss +8 -6
  116. package/components/Hint/hint.css +25 -25
  117. package/components/Hint/hint.scss +25 -27
  118. package/components/Icon/icon.css +10 -10
  119. package/components/Icon/icon.scss +11 -12
  120. package/components/InlineEdit/inline-edit.css +12 -12
  121. package/components/InlineEdit/inline-edit.scss +12 -13
  122. package/components/InputGroup/input-group.css +16 -16
  123. package/components/InputGroup/input-group.scss +18 -19
  124. package/components/JumpLinks/jump-links.css +80 -96
  125. package/components/JumpLinks/jump-links.scss +80 -100
  126. package/components/Label/label-group.css +28 -28
  127. package/components/Label/label-group.scss +29 -30
  128. package/components/Label/label.css +102 -87
  129. package/components/Label/label.scss +113 -94
  130. package/components/List/list.css +44 -47
  131. package/components/List/list.scss +51 -58
  132. package/components/Login/login.css +122 -118
  133. package/components/Login/login.scss +105 -112
  134. package/components/Masthead/masthead.css +273 -175
  135. package/components/Masthead/masthead.scss +102 -68
  136. package/components/Menu/menu.css +151 -95
  137. package/components/Menu/menu.scss +59 -40
  138. package/components/MenuToggle/menu-toggle.css +129 -108
  139. package/components/MenuToggle/menu-toggle.scss +150 -128
  140. package/components/ModalBox/modal-box.css +53 -45
  141. package/components/ModalBox/modal-box.scss +52 -46
  142. package/components/MultipleFileUpload/multiple-file-upload.css +37 -37
  143. package/components/MultipleFileUpload/multiple-file-upload.scss +38 -39
  144. package/components/Nav/nav.css +33 -9
  145. package/components/Nav/nav.scss +46 -13
  146. package/components/NotificationDrawer/notification-drawer.css +50 -51
  147. package/components/NotificationDrawer/notification-drawer.scss +58 -57
  148. package/components/NumberInput/number-input.css +7 -11
  149. package/components/NumberInput/number-input.scss +5 -7
  150. package/components/OverflowMenu/overflow-menu.css +2 -1
  151. package/components/OverflowMenu/overflow-menu.scss +3 -1
  152. package/components/Page/page.css +175 -519
  153. package/components/Page/page.scss +155 -386
  154. package/components/Pagination/pagination.css +82 -79
  155. package/components/Pagination/pagination.scss +43 -40
  156. package/components/Panel/panel.css +33 -30
  157. package/components/Panel/panel.scss +35 -33
  158. package/components/Popover/popover.css +54 -52
  159. package/components/Popover/popover.scss +55 -54
  160. package/components/Progress/progress.css +8 -4
  161. package/components/Progress/progress.scss +14 -11
  162. package/components/ProgressStepper/progress-stepper.css +246 -245
  163. package/components/ProgressStepper/progress-stepper.scss +118 -118
  164. package/components/Radio/radio.css +7 -7
  165. package/components/Radio/radio.scss +9 -10
  166. package/components/Sidebar/sidebar.css +139 -139
  167. package/components/Sidebar/sidebar.scss +61 -61
  168. package/components/SimpleList/simple-list.css +21 -20
  169. package/components/SimpleList/simple-list.scss +22 -23
  170. package/components/Skeleton/skeleton.css +4 -4
  171. package/components/Skeleton/skeleton.scss +7 -8
  172. package/components/SkipToContent/skip-to-content.css +7 -6
  173. package/components/SkipToContent/skip-to-content.scss +7 -7
  174. package/components/Slider/slider.css +31 -31
  175. package/components/Slider/slider.scss +54 -55
  176. package/components/Spinner/spinner.scss +4 -5
  177. package/components/Switch/switch.css +4 -10
  178. package/components/Switch/switch.scss +8 -17
  179. package/components/TabContent/tab-content.css +25 -25
  180. package/components/TabContent/tab-content.scss +28 -28
  181. package/components/Table/table-grid.css +434 -508
  182. package/components/Table/table-grid.scss +131 -150
  183. package/components/Table/table-scrollable.css +31 -34
  184. package/components/Table/table-scrollable.scss +44 -41
  185. package/components/Table/table-tree-view.css +287 -279
  186. package/components/Table/table-tree-view.scss +84 -84
  187. package/components/Table/table.css +316 -279
  188. package/components/Table/table.scss +346 -301
  189. package/components/Tabs/tabs.css +215 -240
  190. package/components/Tabs/tabs.scss +130 -162
  191. package/components/TextInputGroup/text-input-group.css +122 -64
  192. package/components/TextInputGroup/text-input-group.scss +144 -87
  193. package/components/Tile/tile.css +15 -15
  194. package/components/Tile/tile.scss +16 -17
  195. package/components/Timestamp/timestamp.css +13 -19
  196. package/components/Timestamp/timestamp.scss +16 -22
  197. package/components/Title/title.css +14 -13
  198. package/components/Title/title.scss +15 -15
  199. package/components/ToggleGroup/toggle-group.css +37 -37
  200. package/components/ToggleGroup/toggle-group.scss +38 -41
  201. package/components/Toolbar/toolbar.css +547 -1431
  202. package/components/Toolbar/toolbar.scss +159 -123
  203. package/components/Tooltip/tooltip.css +28 -27
  204. package/components/Tooltip/tooltip.scss +31 -30
  205. package/components/TreeView/tree-view.css +184 -184
  206. package/components/TreeView/tree-view.scss +133 -133
  207. package/components/Truncate/truncate.css +2 -2
  208. package/components/Truncate/truncate.scss +7 -8
  209. package/components/Wizard/wizard.css +190 -154
  210. package/components/Wizard/wizard.scss +211 -165
  211. package/components/_index.css +22378 -0
  212. package/components/_index.scss +82 -0
  213. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  214. package/docs/components/Accordion/examples/Accordion.md +1 -1
  215. package/docs/components/ActionList/examples/ActionList.md +64 -24
  216. package/docs/components/Alert/examples/Alert.md +116 -74
  217. package/docs/components/BackToTop/examples/BackToTop.md +1 -1
  218. package/docs/components/Badge/examples/Badge.md +6 -16
  219. package/docs/components/Banner/examples/Banner.md +16 -10
  220. package/docs/components/Brand/examples/Brand.md +2 -2
  221. package/docs/components/Breadcrumb/examples/Breadcrumb.md +19 -59
  222. package/docs/components/Button/examples/Button.md +537 -368
  223. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  224. package/docs/components/Card/examples/Card.md +372 -658
  225. package/docs/components/Check/examples/Check.md +10 -15
  226. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +92 -47
  227. package/docs/components/CodeBlock/examples/CodeBlock.md +51 -28
  228. package/docs/components/CodeEditor/examples/CodeEditor.md +41 -22
  229. package/docs/components/Content/examples/Content.md +600 -60
  230. package/docs/components/DataList/examples/DataList.md +291 -1028
  231. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  232. package/docs/components/DescriptionList/examples/DescriptionList.md +80 -55
  233. package/docs/components/Drawer/examples/Drawer.md +60 -21
  234. package/docs/components/DualListSelector/examples/DualListSelector.md +364 -996
  235. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  236. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  237. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  238. package/docs/components/Form/examples/Form.md +100 -26
  239. package/docs/components/Hint/examples/Hint.md +54 -164
  240. package/docs/components/InlineEdit/examples/InlineEdit.md +132 -45
  241. package/docs/components/InputGroup/examples/InputGroup.md +38 -62
  242. package/docs/components/JumpLinks/examples/JumpLinks.md +189 -72
  243. package/docs/components/Label/examples/Label.md +2577 -406
  244. package/docs/components/Login/examples/Login.md +372 -334
  245. package/docs/components/Masthead/examples/masthead.md +515 -484
  246. package/docs/components/Menu/examples/Menu.md +77 -138
  247. package/docs/components/MenuToggle/examples/MenuToggle.md +289 -39
  248. package/docs/components/ModalBox/examples/ModalBox.md +158 -100
  249. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +137 -97
  250. package/docs/components/Nav/examples/Navigation.css +2 -7
  251. package/docs/components/Nav/examples/Navigation.md +337 -270
  252. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +515 -2076
  253. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  254. package/docs/components/OverflowMenu/examples/overflow-menu.css +4 -28
  255. package/docs/components/OverflowMenu/examples/overflow-menu.md +104 -159
  256. package/docs/components/Page/examples/Page.css +5 -9
  257. package/docs/components/Page/examples/Page.md +254 -181
  258. package/docs/components/Pagination/examples/Pagination.md +336 -756
  259. package/docs/components/Panel/examples/Panel.md +3 -2
  260. package/docs/components/Popover/examples/Popover.md +60 -15
  261. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
  262. package/docs/components/Sidebar/examples/Sidebar.css +4 -2
  263. package/docs/components/Sidebar/examples/Sidebar.md +3 -3
  264. package/docs/components/Skeleton/examples/Skeleton.css +1 -1
  265. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  266. package/docs/components/Slider/examples/Slider.md +53 -45
  267. package/docs/components/Spinner/examples/Spinner.md +1 -1
  268. package/docs/components/Switch/examples/Switch.md +33 -148
  269. package/docs/components/Table/examples/Table.css +11 -6
  270. package/docs/components/Table/examples/Table.md +5302 -2464
  271. package/docs/components/Tabs/examples/Tabs.md +1267 -607
  272. package/docs/components/TextInputGroup/examples/TextInputGroup.css +8 -3
  273. package/docs/components/TextInputGroup/examples/TextInputGroup.md +469 -278
  274. package/docs/components/Tile/examples/Tile.css +5 -5
  275. package/docs/components/Timestamp/examples/Timestamp.md +7 -1
  276. package/docs/components/ToggleGroup/examples/toggle-group.md +1 -3
  277. package/docs/components/Toolbar/examples/Toolbar.css +50 -39
  278. package/docs/components/Toolbar/examples/Toolbar.md +1562 -1200
  279. package/docs/components/Tooltip/examples/Tooltip.css +1 -1
  280. package/docs/components/TreeView/examples/TreeView.md +627 -49
  281. package/docs/components/Truncate/examples/Truncate.css +1 -2
  282. package/docs/components/Wizard/examples/Wizard.md +1595 -126
  283. package/docs/demos/AboutModal/examples/AboutModal.md +191 -198
  284. package/docs/demos/Alert/examples/Alert.md +924 -909
  285. package/docs/demos/BackToTop/examples/BackToTop.md +318 -327
  286. package/docs/demos/Banner/examples/Banner.md +641 -659
  287. package/docs/demos/Button/examples/Button.md +8 -8
  288. package/docs/demos/Card/examples/Card.css +6 -6
  289. package/docs/demos/Card/examples/Card.md +419 -606
  290. package/docs/demos/CardView/examples/CardView.md +822 -1435
  291. package/docs/demos/Dashboard/examples/Dashboard.md +1308 -1442
  292. package/docs/demos/DataList/examples/DataList.md +3210 -3424
  293. package/docs/demos/DescriptionList/examples/DescriptionList.md +899 -937
  294. package/docs/demos/Drawer/examples/Drawer.md +1165 -1176
  295. package/docs/demos/Form/examples/BasicForms.md +153 -88
  296. package/docs/demos/JumpLinks/examples/JumpLinks.md +1710 -1602
  297. package/docs/demos/Masthead/examples/Masthead.md +1719 -1583
  298. package/docs/demos/Modal/examples/Modal.md +1231 -1235
  299. package/docs/demos/Nav/examples/Nav.md +1216 -1230
  300. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1910 -4577
  301. package/docs/demos/Page/examples/Page.css +11 -0
  302. package/docs/demos/Page/examples/Page.md +3753 -2540
  303. package/docs/demos/Panel/Panel.md +88 -0
  304. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  305. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +16 -48
  306. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5150 -6255
  307. package/docs/demos/Skeleton/examples/Skeleton.md +297 -304
  308. package/docs/demos/Table/examples/Table.md +14272 -15154
  309. package/docs/demos/Tabs/examples/Tabs.md +2821 -2891
  310. package/docs/demos/Toolbar/examples/Toolbar.css +10 -18
  311. package/docs/demos/Toolbar/examples/Toolbar.md +2487 -2663
  312. package/docs/demos/Wizard/examples/Wizard.md +3021 -2784
  313. package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
  314. package/docs/layouts/Flex/examples/Flex.css +4 -4
  315. package/docs/layouts/Flex/examples/Flex.md +50 -50
  316. package/docs/layouts/Gallery/examples/Gallery.css +4 -4
  317. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  318. package/docs/layouts/Grid/examples/Grid.css +3 -3
  319. package/docs/layouts/Grid/examples/Grid.md +33 -33
  320. package/docs/layouts/Level/examples/Level.css +5 -5
  321. package/docs/layouts/Split/examples/Split.css +4 -4
  322. package/docs/layouts/Stack/examples/Stack.css +5 -5
  323. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  324. package/docs/utilities/Alignment/examples/Alignment.css +6 -6
  325. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  326. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
  327. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  328. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  329. package/docs/utilities/Display/examples/Display.css +3 -10
  330. package/docs/utilities/Display/examples/Display.md +21 -12
  331. package/docs/utilities/Flex/examples/Flex.css +7 -7
  332. package/docs/utilities/Flex/examples/Flex.md +82 -40
  333. package/docs/utilities/Float/examples/Float.css +5 -5
  334. package/docs/utilities/Float/examples/Float.md +6 -6
  335. package/docs/utilities/Sizing/examples/Sizing.css +6 -6
  336. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  337. package/docs/utilities/Spacing/examples/Spacing.css +3 -3
  338. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  339. package/docs/utilities/Text/examples/Text.md +78 -77
  340. package/icons/pficons.mjs +6 -0
  341. package/layouts/Bullseye/bullseye.css +4 -0
  342. package/layouts/Bullseye/bullseye.scss +5 -1
  343. package/layouts/Flex/flex.css +241 -237
  344. package/layouts/Flex/flex.scss +48 -44
  345. package/layouts/Gallery/gallery.css +15 -11
  346. package/layouts/Gallery/gallery.scss +9 -5
  347. package/layouts/Grid/grid.css +20 -16
  348. package/layouts/Grid/grid.scss +12 -8
  349. package/layouts/Level/level.css +5 -1
  350. package/layouts/Level/level.scss +6 -2
  351. package/layouts/Split/split.css +5 -1
  352. package/layouts/Split/split.scss +6 -2
  353. package/layouts/Stack/stack.css +5 -1
  354. package/layouts/Stack/stack.scss +6 -2
  355. package/layouts/_index.css +3461 -0
  356. package/layouts/_index.scss +8 -0
  357. package/package.json +39 -39
  358. package/patternfly-addons.css +2071 -2648
  359. package/patternfly-addons.scss +2 -12
  360. package/patternfly-base-no-globals.css +1429 -1645
  361. package/patternfly-base-no-globals.scss +5 -3
  362. package/patternfly-base.css +1511 -1723
  363. package/patternfly-base.scss +2 -6
  364. package/patternfly-charts.css +579 -240
  365. package/patternfly-charts.scss +352 -337
  366. package/patternfly-no-globals.css +19895 -23410
  367. package/patternfly-no-globals.scss +5 -4
  368. package/patternfly.css +19999 -23510
  369. package/patternfly.min.css +1 -1
  370. package/patternfly.min.css.map +1 -1
  371. package/patternfly.scss +3 -4
  372. package/sass-utilities/_index.scss +6 -0
  373. package/sass-utilities/functions.scss +25 -25
  374. package/sass-utilities/{_init.scss → init.scss} +6 -6
  375. package/sass-utilities/mixins.scss +108 -72
  376. package/sass-utilities/{component-namespaces.scss → namespaces-components.scss} +3 -27
  377. package/sass-utilities/{layout-namespaces.scss → namespaces-layouts.scss} +3 -1
  378. package/sass-utilities/scss-variables.scss +49 -261
  379. package/utilities/Accessibility/accessibility.css +15 -15
  380. package/utilities/Accessibility/accessibility.scss +8 -6
  381. package/utilities/Alignment/alignment.css +29 -29
  382. package/utilities/Alignment/alignment.scss +6 -4
  383. package/utilities/BackgroundColor/background-color.css +67 -0
  384. package/utilities/BackgroundColor/background-color.scss +16 -0
  385. package/utilities/BoxShadow/box-shadow.css +15 -39
  386. package/utilities/BoxShadow/box-shadow.scss +19 -28
  387. package/utilities/Display/display.css +43 -5
  388. package/utilities/Display/display.scss +7 -4
  389. package/utilities/Flex/flex.css +50 -50
  390. package/utilities/Flex/flex.scss +21 -20
  391. package/utilities/Float/float.css +29 -29
  392. package/utilities/Float/float.scss +6 -6
  393. package/utilities/Sizing/sizing.css +58 -58
  394. package/utilities/Sizing/sizing.scss +23 -21
  395. package/utilities/Spacing/spacing.css +1372 -1372
  396. package/utilities/Spacing/spacing.scss +6 -6
  397. package/utilities/Text/text.css +419 -662
  398. package/utilities/Text/text.scss +81 -107
  399. package/utilities/_index.css +7815 -0
  400. package/utilities/_index.scss +10 -0
  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. |