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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (501) hide show
  1. package/README.md +1 -2
  2. package/assets/fontawesome/_animated.scss +1 -0
  3. package/assets/fontawesome/_bordered-pulled.scss +1 -0
  4. package/assets/fontawesome/_fixed-width.scss +3 -1
  5. package/assets/fontawesome/_icons.scss +1333 -1330
  6. package/assets/fontawesome/_index.scss +11 -0
  7. package/assets/fontawesome/_larger.scss +4 -2
  8. package/assets/fontawesome/_list.scss +4 -2
  9. package/assets/fontawesome/_rotated-flipped.scss +2 -0
  10. package/assets/fontawesome/_screen-reader.scss +1 -0
  11. package/assets/fontawesome/_stacked.scss +3 -1
  12. package/assets/fontawesome/_variables.scss +4 -4
  13. package/assets/fontawesome/fontawesome.scss +12 -12
  14. package/assets/icons/iconUnicodes.json +6 -0
  15. package/assets/images/img_avatar-dark.svg +22 -16
  16. package/assets/images/img_avatar-light.svg +25 -18
  17. package/assets/images/pf-background.svg +21 -21
  18. package/assets/images/pf_logo.svg +11 -11
  19. package/assets/images/pf_logo_white.svg +16 -17
  20. package/assets/pficon/pf-v6-pficon.woff2 +0 -0
  21. package/assets/pficon/pficon.scss +310 -271
  22. package/base/_index.scss +10 -0
  23. package/base/{_globals.scss → normalize.scss} +15 -48
  24. package/base/patternfly-common.css +14 -0
  25. package/base/patternfly-common.scss +69 -2
  26. package/base/patternfly-fa-icons.css +2787 -1420
  27. package/base/patternfly-fa-icons.scss +53 -2
  28. package/base/patternfly-fonts.css +10 -80
  29. package/base/patternfly-fonts.scss +49 -2
  30. package/base/patternfly-pf-icons.css +158 -134
  31. package/base/patternfly-pf-icons.scss +1 -2
  32. package/base/patternfly-svg-icons.css +5 -0
  33. package/base/{_svg-icons.scss → patternfly-svg-icons.scss} +2 -0
  34. package/base/patternfly-variables.css +1094 -1206
  35. package/base/patternfly-variables.scss +20 -2
  36. package/base/reset.scss +33 -0
  37. package/base/tokens/_index.scss +6 -0
  38. package/base/tokens/tokens-charts-dark.scss +173 -0
  39. package/base/tokens/{_tokens-charts.scss → tokens-charts.scss} +162 -148
  40. package/base/tokens/{_tokens-dark.scss → tokens-dark.scss} +310 -294
  41. package/base/tokens/{_tokens-default.scss → tokens-default.scss} +580 -447
  42. package/base/tokens/{_tokens-font.scss → tokens-local.scss} +16 -34
  43. package/base/tokens/{_tokens-palette.scss → tokens-palette.scss} +69 -70
  44. package/components/AboutModalBox/about-modal-box.css +86 -81
  45. package/components/AboutModalBox/about-modal-box.scss +80 -82
  46. package/components/Accordion/accordion.css +46 -45
  47. package/components/Accordion/accordion.scss +56 -55
  48. package/components/ActionList/action-list.css +6 -5
  49. package/components/ActionList/action-list.scss +7 -5
  50. package/components/Alert/alert-group.css +72 -19
  51. package/components/Alert/alert-group.scss +105 -18
  52. package/components/Alert/alert.css +52 -59
  53. package/components/Alert/alert.scss +56 -65
  54. package/components/Avatar/avatar.css +42 -41
  55. package/components/Avatar/avatar.scss +8 -7
  56. package/components/BackToTop/back-to-top.css +19 -17
  57. package/components/BackToTop/back-to-top.scss +17 -17
  58. package/components/Backdrop/backdrop.css +1 -1
  59. package/components/Backdrop/backdrop.scss +3 -4
  60. package/components/BackgroundImage/background-image.scss +3 -4
  61. package/components/Badge/badge.css +29 -7
  62. package/components/Badge/badge.scss +33 -9
  63. package/components/Banner/banner.css +30 -37
  64. package/components/Banner/banner.scss +30 -43
  65. package/components/Brand/brand.css +14 -10
  66. package/components/Brand/brand.scss +8 -5
  67. package/components/Breadcrumb/breadcrumb.css +23 -24
  68. package/components/Breadcrumb/breadcrumb.scss +25 -28
  69. package/components/Button/button.css +152 -130
  70. package/components/Button/button.scss +157 -133
  71. package/components/CalendarMonth/calendar-month.css +47 -47
  72. package/components/CalendarMonth/calendar-month.scss +50 -51
  73. package/components/Card/card.css +111 -94
  74. package/components/Card/card.scss +119 -93
  75. package/components/Check/check.css +6 -6
  76. package/components/Check/check.scss +8 -9
  77. package/components/ClipboardCopy/clipboard-copy.css +34 -45
  78. package/components/ClipboardCopy/clipboard-copy.scss +36 -49
  79. package/components/CodeBlock/code-block.css +21 -20
  80. package/components/CodeBlock/code-block.scss +21 -21
  81. package/components/CodeEditor/code-editor.css +36 -35
  82. package/components/CodeEditor/code-editor.scss +36 -36
  83. package/components/Content/content.css +167 -153
  84. package/components/Content/content.scss +204 -145
  85. package/components/DataList/data-list-grid.css +117 -117
  86. package/components/DataList/data-list-grid.scss +22 -20
  87. package/components/DataList/data-list.css +308 -312
  88. package/components/DataList/data-list.scss +145 -152
  89. package/components/DatePicker/date-picker.css +17 -17
  90. package/components/DatePicker/date-picker.scss +17 -18
  91. package/components/DescriptionList/description-list-order.css +5 -5
  92. package/components/DescriptionList/description-list-order.scss +3 -1
  93. package/components/DescriptionList/description-list.css +52 -50
  94. package/components/DescriptionList/description-list.scss +32 -37
  95. package/components/Divider/divider.css +104 -107
  96. package/components/Divider/divider.scss +19 -19
  97. package/components/DragDrop/drag-drop.css +4 -2
  98. package/components/DragDrop/drag-drop.scss +3 -3
  99. package/components/Drawer/drawer.css +119 -114
  100. package/components/Drawer/drawer.scss +139 -134
  101. package/components/DualListSelector/dual-list-selector.css +65 -62
  102. package/components/DualListSelector/dual-list-selector.scss +55 -52
  103. package/components/EmptyState/empty-state.css +38 -37
  104. package/components/EmptyState/empty-state.scss +39 -39
  105. package/components/ExpandableSection/expandable-section.css +27 -86
  106. package/components/ExpandableSection/expandable-section.scss +32 -101
  107. package/components/FileUpload/file-upload.css +3 -3
  108. package/components/FileUpload/file-upload.scss +3 -4
  109. package/components/Form/form.css +177 -125
  110. package/components/Form/form.scss +121 -115
  111. package/components/FormControl/form-control.css +68 -64
  112. package/components/FormControl/form-control.scss +80 -74
  113. package/components/HelperText/helper-text.css +5 -4
  114. package/components/HelperText/helper-text.scss +8 -6
  115. package/components/Hint/hint.css +25 -25
  116. package/components/Hint/hint.scss +25 -27
  117. package/components/Icon/icon.css +10 -10
  118. package/components/Icon/icon.scss +11 -12
  119. package/components/InlineEdit/inline-edit.css +12 -12
  120. package/components/InlineEdit/inline-edit.scss +12 -13
  121. package/components/InputGroup/input-group.css +17 -17
  122. package/components/InputGroup/input-group.scss +19 -20
  123. package/components/JumpLinks/jump-links.css +80 -96
  124. package/components/JumpLinks/jump-links.scss +80 -100
  125. package/components/Label/label-group.css +28 -28
  126. package/components/Label/label-group.scss +29 -30
  127. package/components/Label/label.css +103 -88
  128. package/components/Label/label.scss +114 -95
  129. package/components/List/list.css +44 -47
  130. package/components/List/list.scss +51 -58
  131. package/components/Login/login.css +122 -118
  132. package/components/Login/login.scss +105 -112
  133. package/components/Masthead/masthead.css +273 -175
  134. package/components/Masthead/masthead.scss +102 -68
  135. package/components/Menu/menu.css +151 -95
  136. package/components/Menu/menu.scss +59 -40
  137. package/components/MenuToggle/menu-toggle.css +131 -110
  138. package/components/MenuToggle/menu-toggle.scss +152 -130
  139. package/components/ModalBox/modal-box.css +53 -45
  140. package/components/ModalBox/modal-box.scss +52 -46
  141. package/components/MultipleFileUpload/multiple-file-upload.css +37 -37
  142. package/components/MultipleFileUpload/multiple-file-upload.scss +38 -39
  143. package/components/Nav/nav.css +33 -9
  144. package/components/Nav/nav.scss +46 -13
  145. package/components/NotificationDrawer/notification-drawer.css +50 -51
  146. package/components/NotificationDrawer/notification-drawer.scss +58 -57
  147. package/components/NumberInput/number-input.css +7 -11
  148. package/components/NumberInput/number-input.scss +5 -7
  149. package/components/OverflowMenu/overflow-menu.css +2 -1
  150. package/components/OverflowMenu/overflow-menu.scss +3 -1
  151. package/components/Page/page.css +177 -517
  152. package/components/Page/page.scss +157 -384
  153. package/components/Pagination/pagination.css +82 -79
  154. package/components/Pagination/pagination.scss +43 -40
  155. package/components/Panel/panel.css +33 -30
  156. package/components/Panel/panel.scss +35 -33
  157. package/components/Popover/popover.css +54 -52
  158. package/components/Popover/popover.scss +55 -54
  159. package/components/Progress/progress.css +8 -4
  160. package/components/Progress/progress.scss +14 -11
  161. package/components/ProgressStepper/progress-stepper.css +246 -245
  162. package/components/ProgressStepper/progress-stepper.scss +118 -118
  163. package/components/Radio/radio.css +9 -9
  164. package/components/Radio/radio.scss +11 -12
  165. package/components/Sidebar/sidebar.css +139 -139
  166. package/components/Sidebar/sidebar.scss +61 -61
  167. package/components/SimpleList/simple-list.css +21 -20
  168. package/components/SimpleList/simple-list.scss +22 -23
  169. package/components/Skeleton/skeleton.css +4 -4
  170. package/components/Skeleton/skeleton.scss +7 -8
  171. package/components/SkipToContent/skip-to-content.css +7 -6
  172. package/components/SkipToContent/skip-to-content.scss +7 -7
  173. package/components/Slider/slider.css +31 -31
  174. package/components/Slider/slider.scss +54 -55
  175. package/components/Spinner/spinner.scss +4 -5
  176. package/components/Switch/switch.css +4 -10
  177. package/components/Switch/switch.scss +8 -17
  178. package/components/TabContent/tab-content.css +25 -25
  179. package/components/TabContent/tab-content.scss +28 -28
  180. package/components/Table/table-grid.css +434 -508
  181. package/components/Table/table-grid.scss +131 -150
  182. package/components/Table/table-scrollable.css +31 -34
  183. package/components/Table/table-scrollable.scss +44 -41
  184. package/components/Table/table-tree-view.css +287 -279
  185. package/components/Table/table-tree-view.scss +84 -84
  186. package/components/Table/table.css +316 -279
  187. package/components/Table/table.scss +346 -301
  188. package/components/Tabs/tabs.css +215 -240
  189. package/components/Tabs/tabs.scss +130 -162
  190. package/components/TextInputGroup/text-input-group.css +122 -64
  191. package/components/TextInputGroup/text-input-group.scss +144 -87
  192. package/components/Tile/tile.css +15 -15
  193. package/components/Tile/tile.scss +16 -17
  194. package/components/Timestamp/timestamp.css +13 -19
  195. package/components/Timestamp/timestamp.scss +16 -22
  196. package/components/Title/title.css +14 -13
  197. package/components/Title/title.scss +15 -15
  198. package/components/ToggleGroup/toggle-group.css +37 -37
  199. package/components/ToggleGroup/toggle-group.scss +38 -41
  200. package/components/Toolbar/toolbar.css +547 -1431
  201. package/components/Toolbar/toolbar.scss +159 -123
  202. package/components/Tooltip/tooltip.css +28 -27
  203. package/components/Tooltip/tooltip.scss +31 -30
  204. package/components/TreeView/tree-view.css +184 -184
  205. package/components/TreeView/tree-view.scss +133 -133
  206. package/components/Truncate/truncate.css +2 -2
  207. package/components/Truncate/truncate.scss +7 -8
  208. package/components/Wizard/wizard.css +190 -154
  209. package/components/Wizard/wizard.scss +211 -165
  210. package/components/_index.css +22381 -0
  211. package/components/_index.scss +82 -0
  212. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  213. package/docs/components/Accordion/examples/Accordion.md +1 -1
  214. package/docs/components/ActionList/examples/ActionList.md +64 -24
  215. package/docs/components/Alert/examples/Alert.md +116 -74
  216. package/docs/components/BackToTop/examples/BackToTop.md +1 -1
  217. package/docs/components/Badge/examples/Badge.md +6 -16
  218. package/docs/components/Banner/examples/Banner.md +16 -10
  219. package/docs/components/Brand/examples/Brand.md +2 -2
  220. package/docs/components/Breadcrumb/examples/Breadcrumb.md +19 -59
  221. package/docs/components/Button/examples/Button.md +537 -368
  222. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  223. package/docs/components/Card/examples/Card.md +372 -658
  224. package/docs/components/Check/examples/Check.md +10 -15
  225. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +92 -47
  226. package/docs/components/CodeBlock/examples/CodeBlock.md +51 -28
  227. package/docs/components/CodeEditor/examples/CodeEditor.md +41 -22
  228. package/docs/components/Content/examples/Content.md +600 -60
  229. package/docs/components/DataList/examples/DataList.md +291 -1028
  230. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  231. package/docs/components/DescriptionList/examples/DescriptionList.md +80 -55
  232. package/docs/components/Drawer/examples/Drawer.md +60 -21
  233. package/docs/components/DualListSelector/examples/DualListSelector.md +364 -996
  234. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  235. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  236. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  237. package/docs/components/Form/examples/Form.md +100 -26
  238. package/docs/components/Hint/examples/Hint.md +54 -164
  239. package/docs/components/InlineEdit/examples/InlineEdit.md +132 -45
  240. package/docs/components/InputGroup/examples/InputGroup.md +38 -62
  241. package/docs/components/JumpLinks/examples/JumpLinks.md +189 -72
  242. package/docs/components/Label/examples/Label.md +2577 -406
  243. package/docs/components/Login/examples/Login.md +372 -334
  244. package/docs/components/Masthead/examples/masthead.md +515 -484
  245. package/docs/components/Menu/examples/Menu.md +77 -138
  246. package/docs/components/MenuToggle/examples/MenuToggle.md +289 -39
  247. package/docs/components/ModalBox/examples/ModalBox.md +158 -100
  248. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +137 -97
  249. package/docs/components/Nav/examples/Navigation.css +2 -7
  250. package/docs/components/Nav/examples/Navigation.md +337 -270
  251. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +515 -2076
  252. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  253. package/docs/components/OverflowMenu/examples/overflow-menu.css +4 -28
  254. package/docs/components/OverflowMenu/examples/overflow-menu.md +104 -159
  255. package/docs/components/Page/examples/Page.css +5 -9
  256. package/docs/components/Page/examples/Page.md +254 -181
  257. package/docs/components/Pagination/examples/Pagination.md +336 -756
  258. package/docs/components/Panel/examples/Panel.md +3 -2
  259. package/docs/components/Popover/examples/Popover.md +60 -15
  260. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
  261. package/docs/components/Sidebar/examples/Sidebar.css +4 -2
  262. package/docs/components/Sidebar/examples/Sidebar.md +3 -3
  263. package/docs/components/Skeleton/examples/Skeleton.css +1 -1
  264. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  265. package/docs/components/Slider/examples/Slider.md +53 -45
  266. package/docs/components/Spinner/examples/Spinner.md +1 -1
  267. package/docs/components/Switch/examples/Switch.md +33 -148
  268. package/docs/components/Table/examples/Table.css +11 -6
  269. package/docs/components/Table/examples/Table.md +5302 -2464
  270. package/docs/components/Tabs/examples/Tabs.md +1267 -607
  271. package/docs/components/TextInputGroup/examples/TextInputGroup.css +8 -3
  272. package/docs/components/TextInputGroup/examples/TextInputGroup.md +469 -278
  273. package/docs/components/Tile/examples/Tile.css +5 -5
  274. package/docs/components/Timestamp/examples/Timestamp.md +7 -1
  275. package/docs/components/ToggleGroup/examples/toggle-group.md +1 -3
  276. package/docs/components/Toolbar/examples/Toolbar.css +50 -39
  277. package/docs/components/Toolbar/examples/Toolbar.md +1562 -1200
  278. package/docs/components/Tooltip/examples/Tooltip.css +1 -1
  279. package/docs/components/TreeView/examples/TreeView.md +627 -49
  280. package/docs/components/Truncate/examples/Truncate.css +1 -2
  281. package/docs/components/Wizard/examples/Wizard.md +1595 -126
  282. package/docs/demos/AboutModal/examples/AboutModal.md +191 -198
  283. package/docs/demos/Alert/examples/Alert.md +924 -909
  284. package/docs/demos/BackToTop/examples/BackToTop.md +318 -327
  285. package/docs/demos/Banner/examples/Banner.md +641 -659
  286. package/docs/demos/Button/examples/Button.md +8 -8
  287. package/docs/demos/Card/examples/Card.css +6 -6
  288. package/docs/demos/Card/examples/Card.md +419 -606
  289. package/docs/demos/CardView/examples/CardView.md +822 -1435
  290. package/docs/demos/Dashboard/examples/Dashboard.md +1308 -1442
  291. package/docs/demos/DataList/examples/DataList.md +3210 -3424
  292. package/docs/demos/DescriptionList/examples/DescriptionList.md +899 -937
  293. package/docs/demos/Drawer/examples/Drawer.md +1165 -1176
  294. package/docs/demos/Form/examples/BasicForms.md +153 -88
  295. package/docs/demos/JumpLinks/examples/JumpLinks.md +1710 -1602
  296. package/docs/demos/Masthead/examples/Masthead.md +1719 -1583
  297. package/docs/demos/Modal/examples/Modal.md +1231 -1235
  298. package/docs/demos/Nav/examples/Nav.md +1216 -1230
  299. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1910 -4577
  300. package/docs/demos/Page/examples/Page.css +11 -0
  301. package/docs/demos/Page/examples/Page.md +3753 -2540
  302. package/docs/demos/Panel/Panel.md +88 -0
  303. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  304. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +16 -48
  305. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5150 -6255
  306. package/docs/demos/Skeleton/examples/Skeleton.md +297 -304
  307. package/docs/demos/Table/examples/Table.md +14272 -15154
  308. package/docs/demos/Tabs/examples/Tabs.md +2821 -2891
  309. package/docs/demos/Toolbar/examples/Toolbar.css +10 -18
  310. package/docs/demos/Toolbar/examples/Toolbar.md +2487 -2663
  311. package/docs/demos/Wizard/examples/Wizard.md +3021 -2784
  312. package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
  313. package/docs/layouts/Flex/examples/Flex.css +4 -4
  314. package/docs/layouts/Flex/examples/Flex.md +50 -50
  315. package/docs/layouts/Gallery/examples/Gallery.css +4 -4
  316. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  317. package/docs/layouts/Grid/examples/Grid.css +3 -3
  318. package/docs/layouts/Grid/examples/Grid.md +33 -33
  319. package/docs/layouts/Level/examples/Level.css +5 -5
  320. package/docs/layouts/Split/examples/Split.css +4 -4
  321. package/docs/layouts/Stack/examples/Stack.css +5 -5
  322. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  323. package/docs/utilities/Alignment/examples/Alignment.css +6 -6
  324. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  325. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
  326. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  327. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  328. package/docs/utilities/Display/examples/Display.css +3 -10
  329. package/docs/utilities/Display/examples/Display.md +21 -12
  330. package/docs/utilities/Flex/examples/Flex.css +7 -7
  331. package/docs/utilities/Flex/examples/Flex.md +82 -40
  332. package/docs/utilities/Float/examples/Float.css +5 -5
  333. package/docs/utilities/Float/examples/Float.md +6 -6
  334. package/docs/utilities/Sizing/examples/Sizing.css +6 -6
  335. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  336. package/docs/utilities/Spacing/examples/Spacing.css +3 -3
  337. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  338. package/docs/utilities/Text/examples/Text.md +78 -77
  339. package/icons/pficons.mjs +6 -0
  340. package/layouts/Bullseye/bullseye.css +4 -0
  341. package/layouts/Bullseye/bullseye.scss +5 -1
  342. package/layouts/Flex/flex.css +241 -237
  343. package/layouts/Flex/flex.scss +48 -44
  344. package/layouts/Gallery/gallery.css +15 -11
  345. package/layouts/Gallery/gallery.scss +9 -5
  346. package/layouts/Grid/grid.css +20 -16
  347. package/layouts/Grid/grid.scss +12 -8
  348. package/layouts/Level/level.css +5 -1
  349. package/layouts/Level/level.scss +6 -2
  350. package/layouts/Split/split.css +5 -1
  351. package/layouts/Split/split.scss +6 -2
  352. package/layouts/Stack/stack.css +5 -1
  353. package/layouts/Stack/stack.scss +6 -2
  354. package/layouts/_index.css +3461 -0
  355. package/layouts/_index.scss +8 -0
  356. package/package.json +39 -39
  357. package/patternfly-addons.css +2071 -2648
  358. package/patternfly-addons.scss +2 -12
  359. package/patternfly-base-no-globals.css +4227 -3064
  360. package/patternfly-base-no-globals.scss +5 -3
  361. package/patternfly-base.css +4307 -3140
  362. package/patternfly-base.scss +2 -6
  363. package/patternfly-charts.css +579 -240
  364. package/patternfly-charts.scss +352 -337
  365. package/patternfly-no-globals.css +21105 -23238
  366. package/patternfly-no-globals.scss +5 -4
  367. package/patternfly.css +21209 -23338
  368. package/patternfly.min.css +1 -1
  369. package/patternfly.min.css.map +1 -1
  370. package/patternfly.scss +6 -4
  371. package/sass-utilities/_index.scss +6 -0
  372. package/sass-utilities/functions.scss +25 -25
  373. package/sass-utilities/{_init.scss → init.scss} +6 -6
  374. package/sass-utilities/mixins.scss +108 -72
  375. package/sass-utilities/{component-namespaces.scss → namespaces-components.scss} +3 -27
  376. package/sass-utilities/{layout-namespaces.scss → namespaces-layouts.scss} +3 -1
  377. package/sass-utilities/scss-variables.scss +48 -261
  378. package/utilities/Accessibility/accessibility.css +15 -15
  379. package/utilities/Accessibility/accessibility.scss +8 -6
  380. package/utilities/Alignment/alignment.css +29 -29
  381. package/utilities/Alignment/alignment.scss +6 -4
  382. package/utilities/BackgroundColor/background-color.css +67 -0
  383. package/utilities/BackgroundColor/background-color.scss +16 -0
  384. package/utilities/BoxShadow/box-shadow.css +15 -39
  385. package/utilities/BoxShadow/box-shadow.scss +19 -28
  386. package/utilities/Display/display.css +43 -5
  387. package/utilities/Display/display.scss +7 -4
  388. package/utilities/Flex/flex.css +50 -50
  389. package/utilities/Flex/flex.scss +21 -20
  390. package/utilities/Float/float.css +29 -29
  391. package/utilities/Float/float.scss +6 -6
  392. package/utilities/Sizing/sizing.css +58 -58
  393. package/utilities/Sizing/sizing.scss +23 -21
  394. package/utilities/Spacing/spacing.css +1372 -1372
  395. package/utilities/Spacing/spacing.scss +6 -6
  396. package/utilities/Text/text.css +419 -662
  397. package/utilities/Text/text.scss +81 -107
  398. package/utilities/_index.css +7815 -0
  399. package/utilities/_index.scss +10 -0
  400. package/assets/fontawesome/_core.scss +0 -20
  401. package/assets/images/pf-logo-small.svg +0 -23
  402. package/assets/images/pf_logo_white.hbs +0 -35
  403. package/assets/images/pfbg-icon.svg +0 -1
  404. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  405. package/base/_base.scss +0 -2
  406. package/base/_chart-globals.scss +0 -415
  407. package/base/_common.scss +0 -50
  408. package/base/_fa-icons.scss +0 -33
  409. package/base/_fonts.scss +0 -136
  410. package/base/_icons.scss +0 -3
  411. package/base/_pficons.scss +0 -2
  412. package/base/_themes.scss +0 -43
  413. package/base/_variables.scss +0 -299
  414. package/base/patternfly-globals.css +0 -120
  415. package/base/patternfly-globals.scss +0 -2
  416. package/base/patternfly-icons.css +0 -4728
  417. package/base/patternfly-icons.scss +0 -2
  418. package/base/patternfly-themes.css +0 -82
  419. package/base/patternfly-themes.scss +0 -2
  420. package/base/themes/dark/_chart-globals.scss +0 -42
  421. package/base/themes/dark/_globals.scss +0 -5
  422. package/base/tokens/_workspace-overrides.scss +0 -7
  423. package/components/AppLauncher/app-launcher.css +0 -244
  424. package/components/AppLauncher/app-launcher.scss +0 -308
  425. package/components/AppLauncher/themes/dark/app-launcher.scss +0 -13
  426. package/components/Chip/chip-group.css +0 -93
  427. package/components/Chip/chip-group.scss +0 -98
  428. package/components/Chip/chip.css +0 -122
  429. package/components/Chip/chip.scss +0 -140
  430. package/components/Chip/themes/dark/chip.scss +0 -9
  431. package/components/ContextSelector/context-selector.css +0 -336
  432. package/components/ContextSelector/context-selector.scss +0 -384
  433. package/components/ContextSelector/themes/dark/context-selector.scss +0 -24
  434. package/components/Dropdown/dropdown.css +0 -686
  435. package/components/Dropdown/dropdown.scss +0 -820
  436. package/components/Dropdown/themes/dark/dropdown.scss +0 -32
  437. package/components/LogViewer/log-viewer.css +0 -197
  438. package/components/LogViewer/log-viewer.scss +0 -226
  439. package/components/LogViewer/themes/dark/log-viewer.scss +0 -7
  440. package/components/NotificationBadge/notification-badge.css +0 -87
  441. package/components/NotificationBadge/notification-badge.scss +0 -108
  442. package/components/OptionsMenu/options-menu.css +0 -279
  443. package/components/OptionsMenu/options-menu.scss +0 -332
  444. package/components/OptionsMenu/themes/dark/options-menu.scss +0 -21
  445. package/components/Select/select.css +0 -599
  446. package/components/Select/select.scss +0 -713
  447. package/components/Select/themes/dark/select.scss +0 -23
  448. package/components/_all.scss +0 -91
  449. package/docs/components/AppLauncher/deprecated/application-launcher.css +0 -25
  450. package/docs/components/AppLauncher/deprecated/application-launcher.md +0 -792
  451. package/docs/components/Breadcrumb/examples/Breadcrumb.css +0 -3
  452. package/docs/components/Chip/examples/Chip.md +0 -846
  453. package/docs/components/ContextSelector/deprecated/context-selector.css +0 -7
  454. package/docs/components/ContextSelector/deprecated/context-selector.md +0 -909
  455. package/docs/components/Dropdown/deprecated/Dropdown.css +0 -64
  456. package/docs/components/Dropdown/deprecated/Dropdown.md +0 -2920
  457. package/docs/components/LogViewer/examples/LogViewer.css +0 -17
  458. package/docs/components/LogViewer/examples/LogViewer.md +0 -5936
  459. package/docs/components/NotificationBadge/examples/NotificationBadge.md +0 -222
  460. package/docs/components/OptionsMenu/deprecated/options-menu.css +0 -25
  461. package/docs/components/OptionsMenu/deprecated/options-menu.md +0 -1014
  462. package/docs/components/Page/deprecated/PageHeader.css +0 -17
  463. package/docs/components/Page/deprecated/PageHeader.md +0 -261
  464. package/docs/components/Pagination/examples/Pagination.css +0 -3
  465. package/docs/components/Select/deprecated/Select.css +0 -56
  466. package/docs/components/Select/deprecated/Select.md +0 -3525
  467. package/docs/components/Tabs/examples/Tabs.css +0 -10
  468. package/docs/components/ToggleGroup/examples/toggle-group.css +0 -4
  469. package/docs/demos/ContextSelector/examples/ContextSelector.md +0 -1712
  470. package/docs/demos/Page/examples/Penta.md +0 -821
  471. package/docs/utilities/Text/examples/Text.css +0 -0
  472. package/layouts/_all.scss +0 -7
  473. package/patternfly-base-no-globals-theme-dark-unversioned.css +0 -6276
  474. package/patternfly-base-no-globals-theme-dark-unversioned.scss +0 -11
  475. package/patternfly-base-theme-dark-unversioned.css +0 -6393
  476. package/patternfly-base-theme-dark-unversioned.scss +0 -5
  477. package/patternfly-charts-theme-dark-unversioned.css +0 -70
  478. package/patternfly-charts-theme-dark-unversioned.scss +0 -8
  479. package/patternfly-charts-theme-dark.css +0 -70
  480. package/patternfly-charts-theme-dark.scss +0 -8
  481. package/patternfly-theme-dark-unversioned.css +0 -35533
  482. package/patternfly-theme-dark-unversioned.scss +0 -6
  483. package/patternfly-theme-dark.css +0 -0
  484. package/patternfly-theme-dark.scss +0 -1
  485. package/sass-utilities/_all.scss +0 -9
  486. package/sass-utilities/colors.scss +0 -82
  487. package/sass-utilities/div.import.scss +0 -3
  488. package/sass-utilities/div.scss +0 -4
  489. package/sass-utilities/placeholders.scss +0 -72
  490. package/sass-utilities/themes/dark/_all.scss +0 -4
  491. package/sass-utilities/themes/dark/colors.scss +0 -16
  492. package/sass-utilities/themes/dark/mixins.scss +0 -7
  493. package/sass-utilities/themes/dark/placeholders.scss +0 -5
  494. package/sass-utilities/themes/dark/scss-variables.scss +0 -92
  495. package/themes/dark/_patternfly-charts-theme-dark.scss +0 -98
  496. package/utilities/BackgroundColor/BackgroundColor.css +0 -414
  497. package/utilities/BackgroundColor/BackgroundColor.scss +0 -64
  498. package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  499. package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
  500. package/utilities/Text/themes/dark/text.css +0 -0
  501. package/utilities/Text/themes/dark/text.scss +0 -33
package/docs/components/OptionsMenu/deprecated/options-menu.md DELETED
@@ -1,1014 +0,0 @@
1
- ---
2
- id: Options menu
3
- section: components
4
- subsection: menus
5
- cssPrefix: pf-v6-c-options-menu
6
- deprecated: true
7
- ---import './options-menu.css'
8
-
9
- ## Examples
10
-
11
- ### Single option
12
-
13
- ```html
14
- <div class="pf-v6-c-options-menu">
15
- <button
16
- class="pf-v6-c-options-menu__toggle"
17
- type="button"
18
- id="options-menu-single-example-toggle"
19
- aria-haspopup="listbox"
20
- aria-expanded="false"
21
- >
22
- <span class="pf-v6-c-options-menu__toggle-text">Options menu</span>
23
- <div class="pf-v6-c-options-menu__toggle-icon">
24
- <i class="fas fa-caret-down" aria-hidden="true"></i>
25
- </div>
26
- </button>
27
- <ul
28
- class="pf-v6-c-options-menu__menu"
29
- role="menu"
30
- aria-labelledby="options-menu-single-example-toggle"
31
- hidden
32
- >
33
- <li role="none">
34
- <button
35
- class="pf-v6-c-options-menu__menu-item"
36
- type="button"
37
- role="menuitem"
38
- >Option 1</button>
39
- </li>
40
- <li role="none">
41
- <button
42
- class="pf-v6-c-options-menu__menu-item"
43
- type="button"
44
- role="menuitem"
45
- >
46
- Option 2
47
- <div class="pf-v6-c-options-menu__menu-item-icon">
48
- <i class="fas fa-check" aria-hidden="true"></i>
49
- </div>
50
- </button>
51
- </li>
52
- <li role="none">
53
- <button
54
- class="pf-v6-c-options-menu__menu-item"
55
- type="button"
56
- role="menuitem"
57
- >Option 3</button>
58
- </li>
59
- </ul>
60
- </div>
61
-
62
- <div class="pf-v6-c-options-menu pf-m-expanded">
63
- <button
64
- class="pf-v6-c-options-menu__toggle"
65
- type="button"
66
- id="options-menu-single-expanded-example-toggle"
67
- aria-haspopup="listbox"
68
- aria-expanded="true"
69
- >
70
- <span class="pf-v6-c-options-menu__toggle-text">Options menu</span>
71
- <div class="pf-v6-c-options-menu__toggle-icon">
72
- <i class="fas fa-caret-down" aria-hidden="true"></i>
73
- </div>
74
- </button>
75
- <ul
76
- class="pf-v6-c-options-menu__menu"
77
- role="menu"
78
- aria-labelledby="options-menu-single-expanded-example-toggle"
79
- >
80
- <li role="none">
81
- <button
82
- class="pf-v6-c-options-menu__menu-item"
83
- type="button"
84
- role="menuitem"
85
- >Option 1</button>
86
- </li>
87
- <li role="none">
88
- <button
89
- class="pf-v6-c-options-menu__menu-item"
90
- type="button"
91
- role="menuitem"
92
- >
93
- Option 2
94
- <div class="pf-v6-c-options-menu__menu-item-icon">
95
- <i class="fas fa-check" aria-hidden="true"></i>
96
- </div>
97
- </button>
98
- </li>
99
- <li role="none">
100
- <button
101
- class="pf-v6-c-options-menu__menu-item"
102
- type="button"
103
- role="menuitem"
104
- >Option 3</button>
105
- </li>
106
- </ul>
107
- </div>
108
-
109
- ```
110
-
111
- ### Disabled
112
-
113
- ```html
114
- <div class="pf-v6-c-options-menu">
115
- <button
116
- class="pf-v6-c-options-menu__toggle"
117
- type="button"
118
- id="options-menu-single-disabled-example-toggle"
119
- aria-haspopup="listbox"
120
- aria-expanded="false"
121
- disabled
122
- >
123
- <span class="pf-v6-c-options-menu__toggle-text">Disabled options menu</span>
124
- <div class="pf-v6-c-options-menu__toggle-icon">
125
- <i class="fas fa-caret-down" aria-hidden="true"></i>
126
- </div>
127
- </button>
128
- </div>
129
-
130
- ```
131
-
132
- ### Multiple options
133
-
134
- ```html
135
- <div class="pf-v6-c-options-menu">
136
- <button
137
- class="pf-v6-c-options-menu__toggle"
138
- type="button"
139
- id="options-menu-multiple-example-toggle"
140
- aria-haspopup="listbox"
141
- aria-expanded="false"
142
- >
143
- <span class="pf-v6-c-options-menu__toggle-text">Sort by</span>
144
- <div class="pf-v6-c-options-menu__toggle-icon">
145
- <i class="fas fa-caret-down" aria-hidden="true"></i>
146
- </div>
147
- </button>
148
- <div
149
- class="pf-v6-c-options-menu__menu"
150
- role="menu"
151
- aria-labelledby="options-menu-multiple-example-toggle"
152
- hidden
153
- >
154
- <section class="pf-v6-c-options-menu__group" role="none">
155
- <ul role="group" aria-label="Sort by">
156
- <li role="none">
157
- <button
158
- class="pf-v6-c-options-menu__menu-item"
159
- type="button"
160
- role="menuitem"
161
- >Name</button>
162
- </li>
163
- <li role="none">
164
- <button
165
- class="pf-v6-c-options-menu__menu-item"
166
- type="button"
167
- role="menuitem"
168
- >
169
- Date
170
- <div class="pf-v6-c-options-menu__menu-item-icon">
171
- <i class="fas fa-check" aria-hidden="true"></i>
172
- </div>
173
- </button>
174
- </li>
175
- <li role="none">
176
- <button
177
- class="pf-v6-c-options-menu__menu-item"
178
- type="button"
179
- role="menuitem"
180
- disabled
181
- >Disabled</button>
182
- </li>
183
- <li role="none">
184
- <button
185
- class="pf-v6-c-options-menu__menu-item"
186
- type="button"
187
- role="menuitem"
188
- >Size</button>
189
- </li>
190
- </ul>
191
- </section>
192
- <li class="pf-v6-c-divider" role="separator"></li>
193
- <section class="pf-v6-c-options-menu__group" role="none">
194
- <ul role="group" aria-label="Sort direction">
195
- <li role="none">
196
- <button
197
- class="pf-v6-c-options-menu__menu-item"
198
- type="button"
199
- role="menuitem"
200
- >
201
- Ascending
202
- <div class="pf-v6-c-options-menu__menu-item-icon">
203
- <i class="fas fa-check" aria-hidden="true"></i>
204
- </div>
205
- </button>
206
- </li>
207
- <li role="none">
208
- <button
209
- class="pf-v6-c-options-menu__menu-item"
210
- type="button"
211
- role="menuitem"
212
- >Descending</button>
213
- </li>
214
- </ul>
215
- </section>
216
- </div>
217
- </div>
218
-
219
- <div class="pf-v6-c-options-menu pf-m-expanded">
220
- <button
221
- class="pf-v6-c-options-menu__toggle"
222
- type="button"
223
- id="options-menu-multiple-expanded-example-toggle"
224
- aria-haspopup="listbox"
225
- aria-expanded="true"
226
- >
227
- <span class="pf-v6-c-options-menu__toggle-text">Sort by</span>
228
- <div class="pf-v6-c-options-menu__toggle-icon">
229
- <i class="fas fa-caret-down" aria-hidden="true"></i>
230
- </div>
231
- </button>
232
- <div
233
- class="pf-v6-c-options-menu__menu"
234
- role="menu"
235
- aria-labelledby="options-menu-multiple-expanded-example-toggle"
236
- >
237
- <section class="pf-v6-c-options-menu__group" role="none">
238
- <ul role="group" aria-label="Sort by">
239
- <li role="none">
240
- <button
241
- class="pf-v6-c-options-menu__menu-item"
242
- type="button"
243
- role="menuitem"
244
- >Name</button>
245
- </li>
246
- <li role="none">
247
- <button
248
- class="pf-v6-c-options-menu__menu-item"
249
- type="button"
250
- role="menuitem"
251
- >
252
- Date
253
- <div class="pf-v6-c-options-menu__menu-item-icon">
254
- <i class="fas fa-check" aria-hidden="true"></i>
255
- </div>
256
- </button>
257
- </li>
258
- <li role="none">
259
- <button
260
- class="pf-v6-c-options-menu__menu-item"
261
- type="button"
262
- role="menuitem"
263
- disabled
264
- >Disabled</button>
265
- </li>
266
- <li role="none">
267
- <button
268
- class="pf-v6-c-options-menu__menu-item"
269
- type="button"
270
- role="menuitem"
271
- >Size</button>
272
- </li>
273
- </ul>
274
- </section>
275
- <li class="pf-v6-c-divider" role="separator"></li>
276
- <section class="pf-v6-c-options-menu__group" role="none">
277
- <ul role="group" aria-label="Sort direction">
278
- <li role="none">
279
- <button
280
- class="pf-v6-c-options-menu__menu-item"
281
- type="button"
282
- role="menuitem"
283
- >
284
- Ascending
285
- <div class="pf-v6-c-options-menu__menu-item-icon">
286
- <i class="fas fa-check" aria-hidden="true"></i>
287
- </div>
288
- </button>
289
- </li>
290
- <li role="none">
291
- <button
292
- class="pf-v6-c-options-menu__menu-item"
293
- type="button"
294
- role="menuitem"
295
- >Descending</button>
296
- </li>
297
- </ul>
298
- </section>
299
- </div>
300
- </div>
301
-
302
- ```
303
-
304
- ### Plain
305
-
306
- ```html
307
- <div class="pf-v6-c-options-menu">
308
- <button
309
- class="pf-v6-c-options-menu__toggle pf-m-plain"
310
- type="button"
311
- id="options-menu-plain-disabled-example-toggle"
312
- aria-haspopup="listbox"
313
- aria-expanded="false"
314
- disabled
315
- aria-label="Sort by"
316
- >
317
- <i
318
- class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
319
- aria-hidden="true"
320
- ></i>
321
- </button>
322
- <ul
323
- class="pf-v6-c-options-menu__menu"
324
- role="menu"
325
- aria-labelledby="options-menu-plain-disabled-example-toggle"
326
- hidden
327
- >
328
- <li role="none">
329
- <button
330
- class="pf-v6-c-options-menu__menu-item"
331
- type="button"
332
- role="menuitem"
333
- >Option 1</button>
334
- </li>
335
- <li role="none">
336
- <button
337
- class="pf-v6-c-options-menu__menu-item"
338
- type="button"
339
- role="menuitem"
340
- >
341
- Option 2
342
- <div class="pf-v6-c-options-menu__menu-item-icon">
343
- <i class="fas fa-check" aria-hidden="true"></i>
344
- </div>
345
- </button>
346
- </li>
347
- <li role="none">
348
- <button
349
- class="pf-v6-c-options-menu__menu-item"
350
- type="button"
351
- role="menuitem"
352
- >Option 3</button>
353
- </li>
354
- </ul>
355
- </div>
356
-
357
- <div class="pf-v6-c-options-menu">
358
- <button
359
- class="pf-v6-c-options-menu__toggle pf-m-plain"
360
- type="button"
361
- id="options-menu-plain-example-toggle"
362
- aria-haspopup="listbox"
363
- aria-expanded="false"
364
- aria-label="Sort by"
365
- >
366
- <i
367
- class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
368
- aria-hidden="true"
369
- ></i>
370
- </button>
371
- <ul
372
- class="pf-v6-c-options-menu__menu"
373
- role="menu"
374
- aria-labelledby="options-menu-plain-example-toggle"
375
- hidden
376
- >
377
- <li role="none">
378
- <button
379
- class="pf-v6-c-options-menu__menu-item"
380
- type="button"
381
- role="menuitem"
382
- >Option 1</button>
383
- </li>
384
- <li role="none">
385
- <button
386
- class="pf-v6-c-options-menu__menu-item"
387
- type="button"
388
- role="menuitem"
389
- >
390
- Option 2
391
- <div class="pf-v6-c-options-menu__menu-item-icon">
392
- <i class="fas fa-check" aria-hidden="true"></i>
393
- </div>
394
- </button>
395
- </li>
396
- <li role="none">
397
- <button
398
- class="pf-v6-c-options-menu__menu-item"
399
- type="button"
400
- role="menuitem"
401
- >Option 3</button>
402
- </li>
403
- </ul>
404
- </div>
405
-
406
- <div class="pf-v6-c-options-menu pf-m-expanded">
407
- <button
408
- class="pf-v6-c-options-menu__toggle pf-m-plain"
409
- type="button"
410
- id="options-menu-plain-expanded-example-toggle"
411
- aria-haspopup="listbox"
412
- aria-expanded="true"
413
- aria-label="Sort by"
414
- >
415
- <i
416
- class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
417
- aria-hidden="true"
418
- ></i>
419
- </button>
420
- <ul
421
- class="pf-v6-c-options-menu__menu"
422
- role="menu"
423
- aria-labelledby="options-menu-plain-expanded-example-toggle"
424
- >
425
- <li role="none">
426
- <button
427
- class="pf-v6-c-options-menu__menu-item"
428
- type="button"
429
- role="menuitem"
430
- >Option 1</button>
431
- </li>
432
- <li role="none">
433
- <button
434
- class="pf-v6-c-options-menu__menu-item"
435
- type="button"
436
- role="menuitem"
437
- >
438
- Option 2
439
- <div class="pf-v6-c-options-menu__menu-item-icon">
440
- <i class="fas fa-check" aria-hidden="true"></i>
441
- </div>
442
- </button>
443
- </li>
444
- <li role="none">
445
- <button
446
- class="pf-v6-c-options-menu__menu-item"
447
- type="button"
448
- role="menuitem"
449
- >Option 3</button>
450
- </li>
451
- </ul>
452
- </div>
453
-
454
- ```
455
-
456
- ### Align top
457
-
458
- ```html
459
- <div class="pf-v6-c-options-menu pf-m-expanded pf-m-top">
460
- <button
461
- class="pf-v6-c-options-menu__toggle"
462
- type="button"
463
- id="options-menu-top-example-toggle"
464
- aria-haspopup="listbox"
465
- aria-expanded="true"
466
- >
467
- <span class="pf-v6-c-options-menu__toggle-text">Options menu</span>
468
- <div class="pf-v6-c-options-menu__toggle-icon">
469
- <i class="fas fa-caret-down" aria-hidden="true"></i>
470
- </div>
471
- </button>
472
- <ul
473
- class="pf-v6-c-options-menu__menu pf-m-top"
474
- role="menu"
475
- aria-labelledby="options-menu-top-example-toggle"
476
- >
477
- <li role="none">
478
- <button
479
- class="pf-v6-c-options-menu__menu-item"
480
- type="button"
481
- role="menuitem"
482
- >Option 1</button>
483
- </li>
484
- <li role="none">
485
- <button
486
- class="pf-v6-c-options-menu__menu-item"
487
- type="button"
488
- role="menuitem"
489
- >
490
- Option 2
491
- <div class="pf-v6-c-options-menu__menu-item-icon">
492
- <i class="fas fa-check" aria-hidden="true"></i>
493
- </div>
494
- </button>
495
- </li>
496
- <li role="none">
497
- <button
498
- class="pf-v6-c-options-menu__menu-item"
499
- type="button"
500
- role="menuitem"
501
- >Option 3</button>
502
- </li>
503
- </ul>
504
- </div>
505
-
506
- ```
507
-
508
- ### Align right
509
-
510
- ```html
511
- <div class="pf-v6-c-options-menu pf-m-expanded pf-m-align-right">
512
- <button
513
- class="pf-v6-c-options-menu__toggle"
514
- type="button"
515
- id="options-menu-align-right-example-toggle"
516
- aria-haspopup="listbox"
517
- aria-expanded="true"
518
- >
519
- <span class="pf-v6-c-options-menu__toggle-text">Options menu</span>
520
- <div class="pf-v6-c-options-menu__toggle-icon">
521
- <i class="fas fa-caret-down" aria-hidden="true"></i>
522
- </div>
523
- </button>
524
- <ul
525
- class="pf-v6-c-options-menu__menu pf-m-align-right"
526
- role="menu"
527
- aria-labelledby="options-menu-align-right-example-toggle"
528
- >
529
- <li role="none">
530
- <button
531
- class="pf-v6-c-options-menu__menu-item"
532
- type="button"
533
- role="menuitem"
534
- >Option 1</button>
535
- </li>
536
- <li role="none">
537
- <button
538
- class="pf-v6-c-options-menu__menu-item"
539
- type="button"
540
- role="menuitem"
541
- >
542
- Option 2
543
- <div class="pf-v6-c-options-menu__menu-item-icon">
544
- <i class="fas fa-check" aria-hidden="true"></i>
545
- </div>
546
- </button>
547
- </li>
548
- <li role="none">
549
- <button
550
- class="pf-v6-c-options-menu__menu-item"
551
- type="button"
552
- role="menuitem"
553
- >Option 3</button>
554
- </li>
555
- </ul>
556
- </div>
557
-
558
- ```
559
-
560
- ### Plain with text
561
-
562
- ```html
563
- <div class="pf-v6-c-options-menu">
564
- <button
565
- class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
566
- type="button"
567
- id="options-menu-disabled-text-example-toggle"
568
- aria-haspopup="listbox"
569
- aria-expanded="false"
570
- disabled
571
- >
572
- <span class="pf-v6-c-options-menu__toggle-text">Custom text</span>
573
- <div class="pf-v6-c-options-menu__toggle-icon">
574
- <i class="fas fa-caret-down" aria-hidden="true"></i>
575
- </div>
576
- </button>
577
- <ul
578
- class="pf-v6-c-options-menu__menu"
579
- role="menu"
580
- aria-labelledby="options-menu-disabled-text-example-toggle"
581
- hidden
582
- >
583
- <li role="none">
584
- <button
585
- class="pf-v6-c-options-menu__menu-item"
586
- type="button"
587
- role="menuitem"
588
- >Option 1</button>
589
- </li>
590
- <li role="none">
591
- <button
592
- class="pf-v6-c-options-menu__menu-item"
593
- type="button"
594
- role="menuitem"
595
- >
596
- Option 2
597
- <div class="pf-v6-c-options-menu__menu-item-icon">
598
- <i class="fas fa-check" aria-hidden="true"></i>
599
- </div>
600
- </button>
601
- </li>
602
- <li role="none">
603
- <button
604
- class="pf-v6-c-options-menu__menu-item"
605
- type="button"
606
- role="menuitem"
607
- >Option 3</button>
608
- </li>
609
- </ul>
610
- </div>
611
-
612
- <div class="pf-v6-c-options-menu">
613
- <button
614
- class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
615
- type="button"
616
- id="options-menu-plain-text-example-toggle"
617
- aria-haspopup="listbox"
618
- aria-expanded="false"
619
- >
620
- <span class="pf-v6-c-options-menu__toggle-text">Custom text</span>
621
- <div class="pf-v6-c-options-menu__toggle-icon">
622
- <i class="fas fa-caret-down" aria-hidden="true"></i>
623
- </div>
624
- </button>
625
- <ul
626
- class="pf-v6-c-options-menu__menu"
627
- role="menu"
628
- aria-labelledby="options-menu-plain-text-example-toggle"
629
- hidden
630
- >
631
- <li role="none">
632
- <button
633
- class="pf-v6-c-options-menu__menu-item"
634
- type="button"
635
- role="menuitem"
636
- >Option 1</button>
637
- </li>
638
- <li role="none">
639
- <button
640
- class="pf-v6-c-options-menu__menu-item"
641
- type="button"
642
- role="menuitem"
643
- >
644
- Option 2
645
- <div class="pf-v6-c-options-menu__menu-item-icon">
646
- <i class="fas fa-check" aria-hidden="true"></i>
647
- </div>
648
- </button>
649
- </li>
650
- <li role="none">
651
- <button
652
- class="pf-v6-c-options-menu__menu-item"
653
- type="button"
654
- role="menuitem"
655
- >Option 3</button>
656
- </li>
657
- </ul>
658
- </div>
659
-
660
- <div class="pf-v6-c-options-menu pf-m-expanded">
661
- <button
662
- class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
663
- type="button"
664
- id="options-menu-plain-text-expanded-example-toggle"
665
- aria-haspopup="listbox"
666
- aria-expanded="true"
667
- >
668
- <span class="pf-v6-c-options-menu__toggle-text">Custom text</span>
669
- <div class="pf-v6-c-options-menu__toggle-icon">
670
- <i class="fas fa-caret-down" aria-hidden="true"></i>
671
- </div>
672
- </button>
673
- <ul
674
- class="pf-v6-c-options-menu__menu"
675
- role="menu"
676
- aria-labelledby="options-menu-plain-text-expanded-example-toggle"
677
- >
678
- <li role="none">
679
- <button
680
- class="pf-v6-c-options-menu__menu-item"
681
- type="button"
682
- role="menuitem"
683
- >Option 1</button>
684
- </li>
685
- <li role="none">
686
- <button
687
- class="pf-v6-c-options-menu__menu-item"
688
- type="button"
689
- role="menuitem"
690
- >
691
- Option 2
692
- <div class="pf-v6-c-options-menu__menu-item-icon">
693
- <i class="fas fa-check" aria-hidden="true"></i>
694
- </div>
695
- </button>
696
- </li>
697
- <li role="none">
698
- <button
699
- class="pf-v6-c-options-menu__menu-item"
700
- type="button"
701
- role="menuitem"
702
- >Option 3</button>
703
- </li>
704
- </ul>
705
- </div>
706
-
707
- ```
708
-
709
- ### With groups
710
-
711
- ```html
712
- <div class="pf-v6-c-options-menu pf-m-expanded">
713
- <button
714
- class="pf-v6-c-options-menu__toggle"
715
- type="button"
716
- id="options-menu-groups-toggle"
717
- aria-haspopup="listbox"
718
- aria-expanded="true"
719
- >
720
- <span class="pf-v6-c-options-menu__toggle-text">Options menu</span>
721
- <div class="pf-v6-c-options-menu__toggle-icon">
722
- <i class="fas fa-caret-down" aria-hidden="true"></i>
723
- </div>
724
- </button>
725
- <div
726
- class="pf-v6-c-options-menu__menu"
727
- role="menu"
728
- aria-labelledby="options-menu-groups-toggle"
729
- >
730
- <section class="pf-v6-c-options-menu__group" role="none">
731
- <ul role="group">
732
- <li role="none">
733
- <button
734
- class="pf-v6-c-options-menu__menu-item"
735
- type="button"
736
- role="menuitem"
737
- >Option 1</button>
738
- </li>
739
- <li role="none">
740
- <button
741
- class="pf-v6-c-options-menu__menu-item"
742
- type="button"
743
- role="menuitem"
744
- >
745
- Option 2
746
- <div class="pf-v6-c-options-menu__menu-item-icon">
747
- <i class="fas fa-check" aria-hidden="true"></i>
748
- </div>
749
- </button>
750
- </li>
751
- </ul>
752
- </section>
753
- <section class="pf-v6-c-options-menu__group" role="none">
754
- <h1 class="pf-v6-c-options-menu__group-title">Group 1</h1>
755
-
756
- <ul role="group">
757
- <li role="none">
758
- <button
759
- class="pf-v6-c-options-menu__menu-item"
760
- type="button"
761
- role="menuitem"
762
- >Option 1</button>
763
- </li>
764
- <li role="none">
765
- <button
766
- class="pf-v6-c-options-menu__menu-item"
767
- type="button"
768
- role="menuitem"
769
- >Option 2</button>
770
- </li>
771
- </ul>
772
- </section>
773
- <section class="pf-v6-c-options-menu__group" role="none">
774
- <h1 class="pf-v6-c-options-menu__group-title">Group 2</h1>
775
-
776
- <ul role="group">
777
- <li role="none">
778
- <button
779
- class="pf-v6-c-options-menu__menu-item"
780
- type="button"
781
- role="menuitem"
782
- >Option 1</button>
783
- </li>
784
- <li role="none">
785
- <button
786
- class="pf-v6-c-options-menu__menu-item"
787
- type="button"
788
- role="menuitem"
789
- >Option 2</button>
790
- </li>
791
- </ul>
792
- </section>
793
- </div>
794
- </div>
795
-
796
- ```
797
-
798
- ### With groups and dividers between groups
799
-
800
- ```html
801
- <div class="pf-v6-c-options-menu pf-m-expanded">
802
- <button
803
- class="pf-v6-c-options-menu__toggle"
804
- type="button"
805
- id="options-menu-groups-and-dividers-between-groups-toggle"
806
- aria-haspopup="listbox"
807
- aria-expanded="true"
808
- >
809
- <span class="pf-v6-c-options-menu__toggle-text">Options menu</span>
810
- <div class="pf-v6-c-options-menu__toggle-icon">
811
- <i class="fas fa-caret-down" aria-hidden="true"></i>
812
- </div>
813
- </button>
814
- <div
815
- class="pf-v6-c-options-menu__menu"
816
- role="menu"
817
- aria-labelledby="options-menu-groups-and-dividers-between-groups-toggle"
818
- >
819
- <section class="pf-v6-c-options-menu__group" role="none">
820
- <ul role="group">
821
- <li role="none">
822
- <button
823
- class="pf-v6-c-options-menu__menu-item"
824
- type="button"
825
- role="menuitem"
826
- >Option 1</button>
827
- </li>
828
- <li role="none">
829
- <button
830
- class="pf-v6-c-options-menu__menu-item"
831
- type="button"
832
- role="menuitem"
833
- >
834
- Option 2
835
- <div class="pf-v6-c-options-menu__menu-item-icon">
836
- <i class="fas fa-check" aria-hidden="true"></i>
837
- </div>
838
- </button>
839
- </li>
840
- </ul>
841
- </section>
842
- <hr class="pf-v6-c-divider" />
843
- <section class="pf-v6-c-options-menu__group" role="none">
844
- <h1 class="pf-v6-c-options-menu__group-title">Group 1</h1>
845
-
846
- <ul role="group">
847
- <li role="none">
848
- <button
849
- class="pf-v6-c-options-menu__menu-item"
850
- type="button"
851
- role="menuitem"
852
- >Option 1</button>
853
- </li>
854
- <li role="none">
855
- <button
856
- class="pf-v6-c-options-menu__menu-item"
857
- type="button"
858
- role="menuitem"
859
- >Option 2</button>
860
- </li>
861
- </ul>
862
- </section>
863
- <hr class="pf-v6-c-divider" />
864
- <section class="pf-v6-c-options-menu__group" role="none">
865
- <h1 class="pf-v6-c-options-menu__group-title">Group 2</h1>
866
-
867
- <ul role="group">
868
- <li role="none">
869
- <button
870
- class="pf-v6-c-options-menu__menu-item"
871
- type="button"
872
- role="menuitem"
873
- >Option 1</button>
874
- </li>
875
- <li role="none">
876
- <button
877
- class="pf-v6-c-options-menu__menu-item"
878
- type="button"
879
- role="menuitem"
880
- >Option 2</button>
881
- </li>
882
- </ul>
883
- </section>
884
- </div>
885
- </div>
886
-
887
- ```
888
-
889
- ### With groups and dividers between items
890
-
891
- ```html
892
- <div class="pf-v6-c-options-menu pf-m-expanded">
893
- <button
894
- class="pf-v6-c-options-menu__toggle"
895
- type="button"
896
- id="options-menu-groups-and-dividers-between-items-toggle"
897
- aria-haspopup="listbox"
898
- aria-expanded="true"
899
- >
900
- <span class="pf-v6-c-options-menu__toggle-text">Options menu</span>
901
- <div class="pf-v6-c-options-menu__toggle-icon">
902
- <i class="fas fa-caret-down" aria-hidden="true"></i>
903
- </div>
904
- </button>
905
- <div
906
- class="pf-v6-c-options-menu__menu"
907
- role="menu"
908
- aria-labelledby="options-menu-groups-and-dividers-between-items-toggle"
909
- >
910
- <section class="pf-v6-c-options-menu__group" role="none">
911
- <ul role="group">
912
- <li role="none">
913
- <button
914
- class="pf-v6-c-options-menu__menu-item"
915
- type="button"
916
- role="menuitem"
917
- >Option 1</button>
918
- </li>
919
- <li role="none">
920
- <button
921
- class="pf-v6-c-options-menu__menu-item"
922
- type="button"
923
- role="menuitem"
924
- >
925
- Option 2
926
- <div class="pf-v6-c-options-menu__menu-item-icon">
927
- <i class="fas fa-check" aria-hidden="true"></i>
928
- </div>
929
- </button>
930
- </li>
931
- <li class="pf-v6-c-divider" role="separator"></li>
932
- </ul>
933
- </section>
934
- <section class="pf-v6-c-options-menu__group" role="none">
935
- <h1 class="pf-v6-c-options-menu__group-title">Group 1</h1>
936
-
937
- <ul role="group">
938
- <li role="none">
939
- <button
940
- class="pf-v6-c-options-menu__menu-item"
941
- type="button"
942
- role="menuitem"
943
- >Option 1</button>
944
- </li>
945
- <li role="none">
946
- <button
947
- class="pf-v6-c-options-menu__menu-item"
948
- type="button"
949
- role="menuitem"
950
- >Option 2</button>
951
- </li>
952
- <li class="pf-v6-c-divider" role="separator"></li>
953
- </ul>
954
- </section>
955
- <section class="pf-v6-c-options-menu__group" role="none">
956
- <h1 class="pf-v6-c-options-menu__group-title">Group 2</h1>
957
-
958
- <ul role="group">
959
- <li role="none">
960
- <button
961
- class="pf-v6-c-options-menu__menu-item"
962
- type="button"
963
- role="menuitem"
964
- >Option 1</button>
965
- </li>
966
- <li role="none">
967
- <button
968
- class="pf-v6-c-options-menu__menu-item"
969
- type="button"
970
- role="menuitem"
971
- >Option 2</button>
972
- </li>
973
- </ul>
974
- </section>
975
- </div>
976
- </div>
977
-
978
- ```
979
-
980
- ## Documentation
981
-
982
- ### Accessibility
983
-
984
- *This section to be updated once the React implementation is complete.*
985
-
986
- | Attribute | Applied to | Outcome |
987
- | -- | -- | -- |
988
- | `role` or `aria` | `pf-v6-c-options-menu` | accessibility notes. |
989
- | `disabled` | `.pf-v6-c-options-menu__toggle`, `.pf-v6-c-options-menu__toggle-button` | Disables the options menu toggle and toggle button and removes it from keyboard focus. |
990
- *Note:* The attribute `aria-selected="true"` should be set programmatically to the selected item(s).
991
-
992
- ### Usage
993
-
994
- | Class | Applied to | Outcome |
995
- | -- | -- | -- |
996
- | `.pf-v6-c-options-menu` | `<div>` | Initiates a custom options menu. |
997
- | `.pf-v6-c-options-menu__toggle` | `<button>` | Initiates a custom toggle. |
998
- | `.pf-v6-c-options-menu__toggle-text` | `<span>` | Initiates a wrapper for toggle text.
999
- | `.pf-v6-c-options-menu__toggle-icon` | `<i>` | Initiates the up/down arrow beside toggle text. |
1000
- | `.pf-v6-c-options-menu__toggle-button` | `<button>` | Initiates a custom toggle button for use when `.pf-v6-c-options-menu__toggle` is a `<div>` or non-interactive element. |
1001
- | `.pf-v6-c-options-menu__menu` | `<ul>` | Initiates the custom options-menu menu. |
1002
- | `.pf-v6-c-options-menu__menu-item` | `<li>` | Initiates the items in the custom options-menu menu. |
1003
- | `.pf-v6-c-options-menu__menu-item-icon` | `<i>` | Initiates the icon to indicate selected menu items. |
1004
- | `.pf-v6-c-options-menu__group` | `<section>` | Defines a group of items in an options menu. **Required when there is more than one group in an options menu**. |
1005
- | `.pf-v6-c-options-menu__group-title` | `<h1>` | Defines the title for a group of items in an options menu. |
1006
- | `.pf-m-top` | `.pf-v6-c-options-menu` | Modifies to display the menu above the toggle. |
1007
- | `.pf-m-align-right` | `.pf-v6-c-options-menu__menu` | Modifies to display the menu aligned to the right edge of the toggle |
1008
- | `.pf-m-expanded` | `.pf-v6-c-options-menu` | Modifies for the expanded state. |
1009
- | `.pf-m-static` | `.pf-v6-c-options-menu__menu` | Modifies the menu to be statically positioned to support custom positioning. |
1010
- | `.pf-m-plain` | `.pf-v6-c-options-menu__toggle` | Modifies to display the toggle with no border. **Note:** Can be combined with `.pf-m-text` to create a normal text toggle with no border. |
1011
- | `.pf-m-disabled` | `.pf-v6-c-options-menu__toggle` | Modifies to display the options menu toggle as disabled. This applies to `pf-v6-c-options-menu__toggle` and should not be used in lieu of the `disabled` attribute on `pf-v6-c-options-menu__toggle`. When this is used, `disabled` should also be added to any form elements in `.pf-v6-c-options-menu__toggle` |
1012
- | `.pf-m-text` | `.pf-v6-c-options-menu__toggle` | For use when the `.pf-v6-c-options-menu__toggle` is a `<div>` or some non-interactive elment, and you're using a custom `.pf-v6-c-options-menu__toggle-button` to toggle the options menu. |
1013
- | `.pf-m-active` | `.pf-v6-c-options-menu__toggle` | Forces display of the active state of the toggle. |
1014
- | `.pf-m-selected` | `.pf-v6-c-options-menu__menu-item` | Modifies the menu item for the selected state. |