@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/AppLauncher/deprecated/application-launcher.md DELETED
@@ -1,792 +0,0 @@
1
- ---
2
- id: Application launcher
3
- section: components
4
- subsection: menus
5
- cssPrefix: pf-v6-c-app-launcher
6
- deprecated: true
7
- ---import './application-launcher.css'
8
-
9
- ## Examples
10
-
11
- ### Collapsed
12
-
13
- ```html
14
- <nav
15
- class="pf-v6-c-app-launcher"
16
- aria-label="Application launcher"
17
- id="application-launcher-collapsed"
18
- >
19
- <button
20
- class="pf-v6-c-app-launcher__toggle"
21
- type="button"
22
- id="application-launcher-collapsed-button"
23
- aria-expanded="false"
24
- aria-label="Application launcher"
25
- >
26
- <i class="fas fa-th" aria-hidden="true"></i>
27
- </button>
28
- <ul
29
- class="pf-v6-c-app-launcher__menu"
30
- aria-labelledby="application-launcher-collapsed-button"
31
- role="menu"
32
- hidden
33
- >
34
- <li role="none">
35
- <a class="pf-v6-c-app-launcher__menu-item" role="menuitem" href="#">Link</a>
36
- </li>
37
- <li role="none">
38
- <button
39
- class="pf-v6-c-app-launcher__menu-item"
40
- role="menuitem"
41
- type="button"
42
- >Action</button>
43
- </li>
44
- <li class="pf-v6-c-divider" role="separator"></li>
45
- <li role="none">
46
- <a
47
- class="pf-v6-c-app-launcher__menu-item pf-m-disabled"
48
- role="menuitem"
49
- href="#"
50
- aria-disabled="true"
51
- tabindex="-1"
52
- >Disabled link</a>
53
- </li>
54
- </ul>
55
- </nav>
56
-
57
- ```
58
-
59
- ### Disabled
60
-
61
- ```html
62
- <nav
63
- class="pf-v6-c-app-launcher"
64
- aria-label="Application launcher"
65
- id="application-launcher-disabled"
66
- >
67
- <button
68
- class="pf-v6-c-app-launcher__toggle"
69
- type="button"
70
- id="application-launcher-disabled-button"
71
- aria-expanded="false"
72
- aria-label="Application launcher"
73
- disabled
74
- >
75
- <i class="fas fa-th" aria-hidden="true"></i>
76
- </button>
77
- <ul
78
- class="pf-v6-c-app-launcher__menu"
79
- aria-labelledby="application-launcher-disabled-button"
80
- role="menu"
81
- hidden
82
- >
83
- <li role="none">
84
- <a class="pf-v6-c-app-launcher__menu-item" role="menuitem" href="#">Link</a>
85
- </li>
86
- <li role="none">
87
- <button
88
- class="pf-v6-c-app-launcher__menu-item"
89
- role="menuitem"
90
- type="button"
91
- >Action</button>
92
- </li>
93
- <li class="pf-v6-c-divider" role="separator"></li>
94
- <li role="none">
95
- <a
96
- class="pf-v6-c-app-launcher__menu-item pf-m-disabled"
97
- role="menuitem"
98
- href="#"
99
- aria-disabled="true"
100
- tabindex="-1"
101
- >Disabled link</a>
102
- </li>
103
- </ul>
104
- </nav>
105
-
106
- ```
107
-
108
- ### Expanded
109
-
110
- ```html
111
- <nav
112
- class="pf-v6-c-app-launcher pf-m-expanded"
113
- aria-label="Application launcher"
114
- id="application-launcher-expanded"
115
- >
116
- <button
117
- class="pf-v6-c-app-launcher__toggle"
118
- type="button"
119
- id="application-launcher-expanded-button"
120
- aria-expanded="true"
121
- aria-label="Application launcher"
122
- >
123
- <i class="fas fa-th" aria-hidden="true"></i>
124
- </button>
125
- <ul
126
- class="pf-v6-c-app-launcher__menu"
127
- aria-labelledby="application-launcher-expanded-button"
128
- role="menu"
129
- >
130
- <li role="none">
131
- <a class="pf-v6-c-app-launcher__menu-item" role="menuitem" href="#">Link</a>
132
- </li>
133
- <li role="none">
134
- <button
135
- class="pf-v6-c-app-launcher__menu-item"
136
- role="menuitem"
137
- type="button"
138
- >Action</button>
139
- </li>
140
- <li class="pf-v6-c-divider" role="separator"></li>
141
- <li role="none">
142
- <a
143
- class="pf-v6-c-app-launcher__menu-item pf-m-disabled"
144
- role="menuitem"
145
- href="#"
146
- aria-disabled="true"
147
- tabindex="-1"
148
- >Disabled link</a>
149
- </li>
150
- </ul>
151
- </nav>
152
-
153
- ```
154
-
155
- ### Aligned right
156
-
157
- ```html
158
- <nav
159
- class="pf-v6-c-app-launcher pf-m-expanded"
160
- aria-label="Application launcher"
161
- id="application-launcher-aligned-right"
162
- >
163
- <button
164
- class="pf-v6-c-app-launcher__toggle"
165
- type="button"
166
- id="application-launcher-aligned-right-button"
167
- aria-expanded="true"
168
- aria-label="Application launcher"
169
- >
170
- <i class="fas fa-th" aria-hidden="true"></i>
171
- </button>
172
- <ul
173
- class="pf-v6-c-app-launcher__menu pf-m-align-right"
174
- aria-labelledby="application-launcher-aligned-right-button"
175
- role="menu"
176
- >
177
- <li role="none">
178
- <a class="pf-v6-c-app-launcher__menu-item" role="menuitem" href="#">Link</a>
179
- </li>
180
- <li role="none">
181
- <button
182
- class="pf-v6-c-app-launcher__menu-item"
183
- role="menuitem"
184
- type="button"
185
- >Action</button>
186
- </li>
187
- <li class="pf-v6-c-divider" role="separator"></li>
188
- <li role="none">
189
- <a
190
- class="pf-v6-c-app-launcher__menu-item pf-m-disabled"
191
- role="menuitem"
192
- href="#"
193
- aria-disabled="true"
194
- tabindex="-1"
195
- >Disabled link</a>
196
- </li>
197
- </ul>
198
- </nav>
199
-
200
- ```
201
-
202
- ### Aligned top
203
-
204
- ```html
205
- <nav
206
- class="pf-v6-c-app-launcher pf-m-expanded pf-m-top"
207
- aria-label="Application launcher"
208
- id="application-launcher-aligned-top"
209
- >
210
- <button
211
- class="pf-v6-c-app-launcher__toggle"
212
- type="button"
213
- id="application-launcher-aligned-top-button"
214
- aria-expanded="true"
215
- aria-label="Application launcher"
216
- >
217
- <i class="fas fa-th" aria-hidden="true"></i>
218
- </button>
219
- <ul
220
- class="pf-v6-c-app-launcher__menu"
221
- aria-labelledby="application-launcher-aligned-top-button"
222
- role="menu"
223
- >
224
- <li role="none">
225
- <a class="pf-v6-c-app-launcher__menu-item" role="menuitem" href="#">Link</a>
226
- </li>
227
- <li role="none">
228
- <button
229
- class="pf-v6-c-app-launcher__menu-item"
230
- role="menuitem"
231
- type="button"
232
- >Action</button>
233
- </li>
234
- <li class="pf-v6-c-divider" role="separator"></li>
235
- <li role="none">
236
- <a
237
- class="pf-v6-c-app-launcher__menu-item pf-m-disabled"
238
- role="menuitem"
239
- href="#"
240
- aria-disabled="true"
241
- tabindex="-1"
242
- >Disabled link</a>
243
- </li>
244
- </ul>
245
- </nav>
246
-
247
- ```
248
-
249
- ### With sections and dividers between sections
250
-
251
- ```html
252
- <nav
253
- class="pf-v6-c-app-launcher pf-m-expanded"
254
- aria-label="Application launcher"
255
- id="application-launcher-divided-sections"
256
- >
257
- <button
258
- class="pf-v6-c-app-launcher__toggle"
259
- type="button"
260
- id="application-launcher-divided-sections-button"
261
- aria-expanded="true"
262
- aria-label="Application launcher"
263
- >
264
- <i class="fas fa-th" aria-hidden="true"></i>
265
- </button>
266
- <div class="pf-v6-c-app-launcher__menu">
267
- <section class="pf-v6-c-app-launcher__group">
268
- <ul role="menu">
269
- <li role="none">
270
- <a
271
- class="pf-v6-c-app-launcher__menu-item"
272
- role="menuitem"
273
- href="#"
274
- >Link not in group</a>
275
- </li>
276
- </ul>
277
- </section>
278
- <hr class="pf-v6-c-divider" />
279
- <section class="pf-v6-c-app-launcher__group">
280
- <h1 class="pf-v6-c-app-launcher__group-title">Group 1</h1>
281
- <ul role="menu">
282
- <li role="none">
283
- <a
284
- class="pf-v6-c-app-launcher__menu-item"
285
- role="menuitem"
286
- href="#"
287
- >Group 1 link</a>
288
- </li>
289
- <li role="none">
290
- <a
291
- class="pf-v6-c-app-launcher__menu-item"
292
- role="menuitem"
293
- href="#"
294
- >Group 1 link</a>
295
- </li>
296
- </ul>
297
- </section>
298
- <hr class="pf-v6-c-divider" />
299
- <section class="pf-v6-c-app-launcher__group">
300
- <h1 class="pf-v6-c-app-launcher__group-title">Group 2</h1>
301
- <ul role="menu">
302
- <li role="none">
303
- <a
304
- class="pf-v6-c-app-launcher__menu-item"
305
- role="menuitem"
306
- href="#"
307
- >Group 2 link</a>
308
- </li>
309
- <li role="none">
310
- <a
311
- class="pf-v6-c-app-launcher__menu-item"
312
- role="menuitem"
313
- href="#"
314
- >Group 2 link</a>
315
- </li>
316
- </ul>
317
- </section>
318
- </div>
319
- </nav>
320
-
321
- ```
322
-
323
- ### With sections and dividers between items
324
-
325
- ```html
326
- <nav
327
- class="pf-v6-c-app-launcher pf-m-expanded"
328
- aria-label="Application launcher"
329
- id="application-launcher-divided-items"
330
- >
331
- <button
332
- class="pf-v6-c-app-launcher__toggle"
333
- type="button"
334
- id="application-launcher-divided-items-button"
335
- aria-expanded="true"
336
- aria-label="Application launcher"
337
- >
338
- <i class="fas fa-th" aria-hidden="true"></i>
339
- </button>
340
- <div class="pf-v6-c-app-launcher__menu">
341
- <section class="pf-v6-c-app-launcher__group">
342
- <ul role="menu">
343
- <li role="none">
344
- <a
345
- class="pf-v6-c-app-launcher__menu-item"
346
- role="menuitem"
347
- href="#"
348
- >Link not in group</a>
349
- </li>
350
- <li class="pf-v6-c-divider" role="separator"></li>
351
- </ul>
352
- </section>
353
- <section class="pf-v6-c-app-launcher__group">
354
- <h1 class="pf-v6-c-app-launcher__group-title">Group 1</h1>
355
- <ul role="menu">
356
- <li role="none">
357
- <a
358
- class="pf-v6-c-app-launcher__menu-item"
359
- role="menuitem"
360
- href="#"
361
- >Group 1 link</a>
362
- </li>
363
- <li role="none">
364
- <a
365
- class="pf-v6-c-app-launcher__menu-item"
366
- role="menuitem"
367
- href="#"
368
- >Group 1 link</a>
369
- </li>
370
- <li class="pf-v6-c-divider" role="separator"></li>
371
- </ul>
372
- </section>
373
- <section class="pf-v6-c-app-launcher__group">
374
- <h1 class="pf-v6-c-app-launcher__group-title">Group 2</h1>
375
- <ul role="menu">
376
- <li role="none">
377
- <a
378
- class="pf-v6-c-app-launcher__menu-item"
379
- role="menuitem"
380
- href="#"
381
- >Group 2 link</a>
382
- </li>
383
- <li role="none">
384
- <a
385
- class="pf-v6-c-app-launcher__menu-item"
386
- role="menuitem"
387
- href="#"
388
- >Group 2 link</a>
389
- </li>
390
- </ul>
391
- </section>
392
- </div>
393
- </nav>
394
-
395
- ```
396
-
397
- ### With sections, dividers, icons, and external links
398
-
399
- ```html
400
- <nav
401
- class="pf-v6-c-app-launcher pf-m-expanded"
402
- aria-label="Application launcher"
403
- id="application-launcher-sections-dividers-icons-links"
404
- >
405
- <button
406
- class="pf-v6-c-app-launcher__toggle"
407
- type="button"
408
- id="application-launcher-sections-dividers-icons-links-button"
409
- aria-expanded="true"
410
- aria-label="Application launcher"
411
- >
412
- <i class="fas fa-th" aria-hidden="true"></i>
413
- </button>
414
- <div class="pf-v6-c-app-launcher__menu">
415
- <section class="pf-v6-c-app-launcher__group">
416
- <ul role="menu">
417
- <li role="none">
418
- <a class="pf-v6-c-app-launcher__menu-item" role="menuitem" href="#">
419
- <span class="pf-v6-c-app-launcher__menu-item-icon">
420
- <img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
421
- </span>
422
- Link not in group
423
- </a>
424
- </li>
425
- </ul>
426
- </section>
427
- <li class="pf-v6-c-divider" role="separator"></li>
428
- <section class="pf-v6-c-app-launcher__group">
429
- <h1 class="pf-v6-c-app-launcher__group-title">Group 1</h1>
430
- <ul role="menu">
431
- <li role="none">
432
- <a
433
- class="pf-v6-c-app-launcher__menu-item pf-m-external"
434
- role="menuitem"
435
- href="#"
436
- target="_blank"
437
- >
438
- <span class="pf-v6-c-app-launcher__menu-item-icon">
439
- <img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
440
- </span>
441
- Group 1 link
442
- <span
443
- class="pf-v6-c-app-launcher__menu-item-external-icon"
444
- >
445
- <i class="fas fa-external-link-alt" aria-hidden="true"></i>
446
- </span>
447
- <span class="pf-v6-screen-reader">(opens new window)</span>
448
- </a>
449
- </li>
450
- <li role="none">
451
- <a
452
- class="pf-v6-c-app-launcher__menu-item pf-m-external"
453
- role="menuitem"
454
- href="#"
455
- target="_blank"
456
- >
457
- <span class="pf-v6-c-app-launcher__menu-item-icon">
458
- <img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
459
- </span>
460
- Group 1 link
461
- <span
462
- class="pf-v6-c-app-launcher__menu-item-external-icon"
463
- >
464
- <i class="fas fa-external-link-alt" aria-hidden="true"></i>
465
- </span>
466
- <span class="pf-v6-screen-reader">(opens new window)</span>
467
- </a>
468
- </li>
469
- <li class="pf-v6-c-divider" role="separator"></li>
470
- </ul>
471
- </section>
472
- <section class="pf-v6-c-app-launcher__group">
473
- <h1 class="pf-v6-c-app-launcher__group-title">Group 2</h1>
474
- <ul role="menu">
475
- <li role="none">
476
- <a
477
- class="pf-v6-c-app-launcher__menu-item pf-m-external"
478
- role="menuitem"
479
- href="#"
480
- target="_blank"
481
- >
482
- <span class="pf-v6-c-app-launcher__menu-item-icon">
483
- <img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
484
- </span>
485
- Group 2 link
486
- <span
487
- class="pf-v6-c-app-launcher__menu-item-external-icon"
488
- >
489
- <i class="fas fa-external-link-alt" aria-hidden="true"></i>
490
- </span>
491
- <span class="pf-v6-screen-reader">(opens new window)</span>
492
- </a>
493
- </li>
494
- <li role="none">
495
- <a
496
- class="pf-v6-c-app-launcher__menu-item pf-m-external"
497
- role="menuitem"
498
- href="#"
499
- target="_blank"
500
- >
501
- <span class="pf-v6-c-app-launcher__menu-item-icon">
502
- <img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
503
- </span>
504
- Group 2 link
505
- <span
506
- class="pf-v6-c-app-launcher__menu-item-external-icon"
507
- >
508
- <i class="fas fa-external-link-alt" aria-hidden="true"></i>
509
- </span>
510
- <span class="pf-v6-screen-reader">(opens new window)</span>
511
- </a>
512
- </li>
513
- </ul>
514
- </section>
515
- </div>
516
- </nav>
517
-
518
- ```
519
-
520
- ### Favorites
521
-
522
- ```html
523
- <nav
524
- class="pf-v6-c-app-launcher pf-m-expanded"
525
- aria-label="Application launcher"
526
- id="app-launcher-favorites"
527
- >
528
- <button
529
- class="pf-v6-c-app-launcher__toggle"
530
- type="button"
531
- id="app-launcher-favorites-button"
532
- aria-expanded="true"
533
- aria-label="Application launcher"
534
- >
535
- <i class="fas fa-th" aria-hidden="true"></i>
536
- </button>
537
- <div class="pf-v6-c-app-launcher__menu">
538
- <div class="pf-v6-c-app-launcher__menu-search">
539
- <div class="pf-v6-c-text-input-group">
540
- <div class="pf-v6-c-text-input-group__main pf-m-icon">
541
- <span class="pf-v6-c-text-input-group__text">
542
- <span class="pf-v6-c-text-input-group__icon">
543
- <i class="fas fa-fw fa-search"></i>
544
- </span>
545
- <input
546
- class="pf-v6-c-text-input-group__text-input"
547
- type="text"
548
- placeholder="Search"
549
- value
550
- aria-label="Search input"
551
- />
552
- </span>
553
- </div>
554
- </div>
555
- </div>
556
- <section class="pf-v6-c-app-launcher__group">
557
- <h1 class="pf-v6-c-app-launcher__group-title">Favorites</h1>
558
- <ul role="menu">
559
- <li
560
- class="pf-v6-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
561
- role="none"
562
- >
563
- <a
564
- class="pf-v6-c-app-launcher__menu-item pf-m-link"
565
- role="menuitem"
566
- href="#"
567
- target="_blank"
568
- >
569
- <span class="pf-v6-c-app-launcher__menu-item-icon">
570
- <img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
571
- </span>
572
- Link 2
573
- <span
574
- class="pf-v6-c-app-launcher__menu-item-external-icon"
575
- >
576
- <i class="fas fa-external-link-alt" aria-hidden="true"></i>
577
- </span>
578
- <span class="pf-v6-screen-reader">(opens new window)</span>
579
- </a>
580
- <button
581
- class="pf-v6-c-app-launcher__menu-item pf-m-action"
582
- type="button"
583
- aria-label="Favorite"
584
- >
585
- <i class="fas fa-star" aria-hidden="true"></i>
586
- </button>
587
- </li>
588
- <li
589
- class="pf-v6-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
590
- role="none"
591
- >
592
- <a
593
- class="pf-v6-c-app-launcher__menu-item pf-m-link"
594
- role="menuitem"
595
- href="#"
596
- target="_blank"
597
- >
598
- <span class="pf-v6-c-app-launcher__menu-item-icon">
599
- <img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
600
- </span>
601
- Link 3
602
- <span
603
- class="pf-v6-c-app-launcher__menu-item-external-icon"
604
- >
605
- <i class="fas fa-external-link-alt" aria-hidden="true"></i>
606
- </span>
607
- <span class="pf-v6-screen-reader">(opens new window)</span>
608
- </a>
609
- <button
610
- class="pf-v6-c-app-launcher__menu-item pf-m-action"
611
- type="button"
612
- aria-label="Favorite"
613
- >
614
- <i class="fas fa-star" aria-hidden="true"></i>
615
- </button>
616
- </li>
617
- </ul>
618
- </section>
619
- <hr class="pf-v6-c-divider" />
620
- <section class="pf-v6-c-app-launcher__group">
621
- <h1 class="pf-v6-c-app-launcher__group-title">Group 1</h1>
622
- <ul role="menu">
623
- <li
624
- class="pf-v6-c-app-launcher__menu-wrapper pf-m-external"
625
- role="none"
626
- >
627
- <a
628
- class="pf-v6-c-app-launcher__menu-item pf-m-link"
629
- role="menuitem"
630
- href="#"
631
- target="_blank"
632
- >
633
- <span class="pf-v6-c-app-launcher__menu-item-icon">
634
- <img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
635
- </span>
636
- Link 1
637
- <span
638
- class="pf-v6-c-app-launcher__menu-item-external-icon"
639
- >
640
- <i class="fas fa-external-link-alt" aria-hidden="true"></i>
641
- </span>
642
- <span class="pf-v6-screen-reader">(opens new window)</span>
643
- </a>
644
- <button
645
- class="pf-v6-c-app-launcher__menu-item pf-m-action"
646
- type="button"
647
- aria-label="Favorite"
648
- >
649
- <i class="fas fa-star" aria-hidden="true"></i>
650
- </button>
651
- </li>
652
- <li
653
- class="pf-v6-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
654
- role="none"
655
- >
656
- <a
657
- class="pf-v6-c-app-launcher__menu-item pf-m-link"
658
- role="menuitem"
659
- href="#"
660
- target="_blank"
661
- >
662
- <span class="pf-v6-c-app-launcher__menu-item-icon">
663
- <img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
664
- </span>
665
- Link 2
666
- <span
667
- class="pf-v6-c-app-launcher__menu-item-external-icon"
668
- >
669
- <i class="fas fa-external-link-alt" aria-hidden="true"></i>
670
- </span>
671
- <span class="pf-v6-screen-reader">(opens new window)</span>
672
- </a>
673
- <button
674
- class="pf-v6-c-app-launcher__menu-item pf-m-action"
675
- type="button"
676
- aria-label="Favorite"
677
- >
678
- <i class="fas fa-star" aria-hidden="true"></i>
679
- </button>
680
- </li>
681
- </ul>
682
- </section>
683
- <hr class="pf-v6-c-divider" />
684
- <section class="pf-v6-c-app-launcher__group">
685
- <h1 class="pf-v6-c-app-launcher__group-title">Group 2</h1>
686
- <ul role="menu">
687
- <li
688
- class="pf-v6-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
689
- role="none"
690
- >
691
- <a
692
- class="pf-v6-c-app-launcher__menu-item pf-m-link"
693
- role="menuitem"
694
- href="#"
695
- target="_blank"
696
- >
697
- <span class="pf-v6-c-app-launcher__menu-item-icon">
698
- <img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
699
- </span>
700
- Link 3
701
- <span
702
- class="pf-v6-c-app-launcher__menu-item-external-icon"
703
- >
704
- <i class="fas fa-external-link-alt" aria-hidden="true"></i>
705
- </span>
706
- <span class="pf-v6-screen-reader">(opens new window)</span>
707
- </a>
708
- <button
709
- class="pf-v6-c-app-launcher__menu-item pf-m-action"
710
- type="button"
711
- aria-label="Favorite"
712
- >
713
- <i class="fas fa-star" aria-hidden="true"></i>
714
- </button>
715
- </li>
716
- <li
717
- class="pf-v6-c-app-launcher__menu-wrapper pf-m-external"
718
- role="none"
719
- >
720
- <a
721
- class="pf-v6-c-app-launcher__menu-item pf-m-link"
722
- role="menuitem"
723
- href="#"
724
- target="_blank"
725
- >
726
- <span class="pf-v6-c-app-launcher__menu-item-icon">
727
- <img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
728
- </span>
729
- Link 4
730
- <span
731
- class="pf-v6-c-app-launcher__menu-item-external-icon"
732
- >
733
- <i class="fas fa-external-link-alt" aria-hidden="true"></i>
734
- </span>
735
- <span class="pf-v6-screen-reader">(opens new window)</span>
736
- </a>
737
- <button
738
- class="pf-v6-c-app-launcher__menu-item pf-m-action"
739
- type="button"
740
- aria-label="Favorite"
741
- >
742
- <i class="fas fa-star" aria-hidden="true"></i>
743
- </button>
744
- </li>
745
- </ul>
746
- </section>
747
- </div>
748
- </nav>
749
-
750
- ```
751
-
752
- ## Documentation
753
-
754
- ### Accessibility
755
-
756
- | Attribute | Applied | Outcome |
757
- | -- | -- | -- |
758
- | `aria-label="Application launcher"` | `.pf-v6-c-app-launcher` | Gives the app launcher element an accessible name. **Required** |
759
- | `aria-expanded="false"` | `.pf-v6-c-button` | Indicates that the menu is hidden. |
760
- | `aria-expanded="true"` | `.pf-v6-c-button` | Indicates that the menu is visible. |
761
- | `aria-label="Actions"` | `.pf-v6-c-button` | Provides an accessible name for the app launcher when an icon is used. **Required** |
762
- | `hidden` | `.pf-v6-c-app-launcher__menu` | Indicates that the menu is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
763
- | `disabled` | `.pf-v6-c-app-launcher__toggle` | Disables the app launcher toggle and removes it from keyboard focus. |
764
- | `disabled` | `button.pf-v6-c-app-launcher__menu-item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
765
- | `aria-disabled="true"` | `a.pf-v6-c-app-launcher__menu-item` | When the menu item uses a link element, indicates that it is unavailable. |
766
- | `tabindex="-1"` | `a.pf-v6-c-app-launcher__menu-item` | When the menu item uses a link element, removes it from keyboard focus. |
767
- | `aria-hidden="true"` | `.pf-v6-c-app-launcher__menu-item-external-icon > *` | Hides the icon from assistive technologies. |
768
-
769
- ### Usage
770
-
771
- | Class | Applied | Outcome |
772
- | -- | -- | -- |
773
- | `.pf-v6-c-app-launcher` | `<nav>` | Defines the parent wrapper of the app launcher. |
774
- | `.pf-v6-c-app-launcher__toggle` | `<button>` | Defines the app launcher toggle. |
775
- | `.pf-v6-c-app-launcher__menu` | `<ul>`, `<div>` | Defines the parent wrapper of the menu items. Use a `<div>` if your app launcher has groups. |
776
- | `.pf-v6-c-app-launcher__menu-search` | `<div>` | Defines the wrapper for the search input. |
777
- | `.pf-v6-c-app-launcher__group` | `<section>` | Defines a group of items. Required when there is more than one group. |
778
- | `.pf-v6-c-app-launcher__group-title` | `<h1>` | Defines a title for a group of items. |
779
- | `.pf-v6-c-app-launcher__menu-wrapper` | `<li>` | Defines a menu wrapper for use with multiple actionable items in a single item row. |
780
- | `.pf-v6-c-app-launcher__menu-item` | `<a>`, `<button>` | Defines a menu item. |
781
- | `.pf-v6-c-app-launcher__menu-item-icon` | `<span>` | Defines the wrapper for the menu item icon. |
782
- | `.pf-v6-c-app-launcher__menu-item-external-icon` | `<span>` | Defines the wrapper for the external link icon that appears on hover/focus. Use with `.pf-m-external`. |
783
- | `.pf-m-expanded` | `.pf-v6-c-app-launcher` | Modifies for the expanded state. |
784
- | `.pf-m-top` | `.pf-v6-c-app-launcher` | Modifies to display the menu above the toggle. |
785
- | `.pf-m-align-right` | `.pf-v6-c-app-launcher__menu` | Modifies to display the menu aligned to the right edge of the toggle. |
786
- | `.pf-m-static` | `.pf-v6-c-app-launcher__menu` | Modifies to position the menu statically to support custom positioning. |
787
- | `.pf-m-disabled` | `a.pf-v6-c-app-launcher__menu-item` | Modifies to display the menu item as disabled. |
788
- | `.pf-m-external` | `.pf-v6-c-app-launcher__menu-item` | Modifies to display the menu item as having an external link icon on hover/focus. |
789
- | `.pf-m-favorite` | `.pf-v6-c-app-launcher__menu-wrapper` | Modifies wrapper to indicate that the item row has been favorited. |
790
- | `.pf-m-link` | `.pf-v6-c-app-launcher__menu-item.pf-m-wrapper > .pf-v6-c-app-launcher__menu-item` | Modifies item for link styles. |
791
- | `.pf-m-action` | `.pf-v6-c-app-launcher__menu-item.pf-m-wrapper > .pf-v6-c-app-launcher__menu-item` | Modifies item to for action styles. |
792
- | `.pf-m-active` | `.pf-v6-c-app-launcher__toggle` | Forces display of the active state of the toggle. |