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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (501) hide show
  1. package/README.md +1 -2
  2. package/assets/fontawesome/_animated.scss +1 -0
  3. package/assets/fontawesome/_bordered-pulled.scss +1 -0
  4. package/assets/fontawesome/_core.scss +2 -0
  5. package/assets/fontawesome/_fixed-width.scss +2 -0
  6. package/assets/fontawesome/_icons.scss +1 -0
  7. package/assets/fontawesome/_index.scss +12 -0
  8. package/assets/fontawesome/_larger.scss +4 -2
  9. package/assets/fontawesome/_list.scss +4 -2
  10. package/assets/fontawesome/_rotated-flipped.scss +2 -0
  11. package/assets/fontawesome/_screen-reader.scss +1 -0
  12. package/assets/fontawesome/_stacked.scss +3 -1
  13. package/assets/fontawesome/_variables.scss +3 -2
  14. package/assets/fontawesome/fontawesome.scss +12 -12
  15. package/assets/icons/iconUnicodes.json +6 -0
  16. package/assets/images/img_avatar-dark.svg +22 -16
  17. package/assets/images/img_avatar-light.svg +25 -18
  18. package/assets/images/pf-background.svg +21 -21
  19. package/assets/images/pf_logo.svg +11 -11
  20. package/assets/images/pf_logo_white.svg +16 -17
  21. package/assets/pficon/pf-v6-pficon.woff2 +0 -0
  22. package/assets/pficon/pficon.scss +310 -271
  23. package/base/_index.scss +10 -0
  24. package/base/{_globals.scss → normalize.scss} +15 -48
  25. package/base/patternfly-common.css +14 -0
  26. package/base/patternfly-common.scss +68 -2
  27. package/base/patternfly-fa-icons.css +1 -1
  28. package/base/patternfly-fa-icons.scss +35 -2
  29. package/base/patternfly-fonts.css +10 -80
  30. package/base/patternfly-fonts.scss +49 -2
  31. package/base/patternfly-pf-icons.css +158 -134
  32. package/base/patternfly-pf-icons.scss +1 -2
  33. package/base/patternfly-svg-icons.css +5 -0
  34. package/base/{_svg-icons.scss → patternfly-svg-icons.scss} +2 -0
  35. package/base/patternfly-variables.css +1082 -1206
  36. package/base/patternfly-variables.scss +20 -2
  37. package/base/reset.scss +33 -0
  38. package/base/tokens/_index.scss +6 -0
  39. package/base/tokens/tokens-charts-dark.scss +173 -0
  40. package/base/tokens/{_tokens-charts.scss → tokens-charts.scss} +162 -148
  41. package/base/tokens/{_tokens-dark.scss → tokens-dark.scss} +307 -294
  42. package/base/tokens/{_tokens-default.scss → tokens-default.scss} +574 -447
  43. package/base/tokens/{_tokens-font.scss → tokens-local.scss} +13 -34
  44. package/base/tokens/{_tokens-palette.scss → tokens-palette.scss} +69 -70
  45. package/components/AboutModalBox/about-modal-box.css +86 -81
  46. package/components/AboutModalBox/about-modal-box.scss +80 -82
  47. package/components/Accordion/accordion.css +44 -43
  48. package/components/Accordion/accordion.scss +52 -52
  49. package/components/ActionList/action-list.css +6 -5
  50. package/components/ActionList/action-list.scss +7 -5
  51. package/components/Alert/alert-group.css +72 -19
  52. package/components/Alert/alert-group.scss +105 -18
  53. package/components/Alert/alert.css +52 -59
  54. package/components/Alert/alert.scss +56 -65
  55. package/components/Avatar/avatar.css +42 -41
  56. package/components/Avatar/avatar.scss +8 -7
  57. package/components/BackToTop/back-to-top.css +19 -17
  58. package/components/BackToTop/back-to-top.scss +17 -17
  59. package/components/Backdrop/backdrop.css +1 -1
  60. package/components/Backdrop/backdrop.scss +3 -4
  61. package/components/BackgroundImage/background-image.scss +3 -4
  62. package/components/Badge/badge.css +29 -7
  63. package/components/Badge/badge.scss +33 -9
  64. package/components/Banner/banner.css +30 -37
  65. package/components/Banner/banner.scss +30 -43
  66. package/components/Brand/brand.css +14 -10
  67. package/components/Brand/brand.scss +8 -5
  68. package/components/Breadcrumb/breadcrumb.css +23 -24
  69. package/components/Breadcrumb/breadcrumb.scss +25 -28
  70. package/components/Button/button.css +150 -128
  71. package/components/Button/button.scss +155 -130
  72. package/components/CalendarMonth/calendar-month.css +46 -46
  73. package/components/CalendarMonth/calendar-month.scss +49 -50
  74. package/components/Card/card.css +110 -93
  75. package/components/Card/card.scss +118 -92
  76. package/components/Check/check.css +5 -5
  77. package/components/Check/check.scss +7 -8
  78. package/components/ClipboardCopy/clipboard-copy.css +33 -41
  79. package/components/ClipboardCopy/clipboard-copy.scss +35 -44
  80. package/components/CodeBlock/code-block.css +21 -20
  81. package/components/CodeBlock/code-block.scss +21 -21
  82. package/components/CodeEditor/code-editor.css +35 -34
  83. package/components/CodeEditor/code-editor.scss +35 -35
  84. package/components/Content/content.css +167 -153
  85. package/components/Content/content.scss +204 -145
  86. package/components/DataList/data-list-grid.css +117 -117
  87. package/components/DataList/data-list-grid.scss +22 -20
  88. package/components/DataList/data-list.css +308 -312
  89. package/components/DataList/data-list.scss +145 -152
  90. package/components/DatePicker/date-picker.css +17 -17
  91. package/components/DatePicker/date-picker.scss +17 -18
  92. package/components/DescriptionList/description-list-order.css +5 -5
  93. package/components/DescriptionList/description-list-order.scss +3 -1
  94. package/components/DescriptionList/description-list.css +46 -44
  95. package/components/DescriptionList/description-list.scss +26 -31
  96. package/components/Divider/divider.css +104 -107
  97. package/components/Divider/divider.scss +19 -19
  98. package/components/DragDrop/drag-drop.css +4 -2
  99. package/components/DragDrop/drag-drop.scss +3 -3
  100. package/components/Drawer/drawer.css +115 -114
  101. package/components/Drawer/drawer.scss +136 -134
  102. package/components/DualListSelector/dual-list-selector.css +64 -61
  103. package/components/DualListSelector/dual-list-selector.scss +54 -51
  104. package/components/EmptyState/empty-state.css +38 -37
  105. package/components/EmptyState/empty-state.scss +39 -39
  106. package/components/ExpandableSection/expandable-section.css +27 -86
  107. package/components/ExpandableSection/expandable-section.scss +32 -101
  108. package/components/FileUpload/file-upload.css +2 -2
  109. package/components/FileUpload/file-upload.scss +2 -3
  110. package/components/Form/form.css +173 -115
  111. package/components/Form/form.scss +117 -103
  112. package/components/FormControl/form-control.css +57 -57
  113. package/components/FormControl/form-control.scss +69 -67
  114. package/components/HelperText/helper-text.css +5 -4
  115. package/components/HelperText/helper-text.scss +8 -6
  116. package/components/Hint/hint.css +25 -25
  117. package/components/Hint/hint.scss +25 -27
  118. package/components/Icon/icon.css +10 -10
  119. package/components/Icon/icon.scss +11 -12
  120. package/components/InlineEdit/inline-edit.css +12 -12
  121. package/components/InlineEdit/inline-edit.scss +12 -13
  122. package/components/InputGroup/input-group.css +16 -16
  123. package/components/InputGroup/input-group.scss +18 -19
  124. package/components/JumpLinks/jump-links.css +80 -96
  125. package/components/JumpLinks/jump-links.scss +80 -100
  126. package/components/Label/label-group.css +28 -28
  127. package/components/Label/label-group.scss +29 -30
  128. package/components/Label/label.css +102 -87
  129. package/components/Label/label.scss +113 -94
  130. package/components/List/list.css +44 -47
  131. package/components/List/list.scss +51 -58
  132. package/components/Login/login.css +122 -118
  133. package/components/Login/login.scss +105 -112
  134. package/components/Masthead/masthead.css +273 -175
  135. package/components/Masthead/masthead.scss +102 -68
  136. package/components/Menu/menu.css +151 -95
  137. package/components/Menu/menu.scss +59 -40
  138. package/components/MenuToggle/menu-toggle.css +129 -108
  139. package/components/MenuToggle/menu-toggle.scss +150 -128
  140. package/components/ModalBox/modal-box.css +53 -45
  141. package/components/ModalBox/modal-box.scss +52 -46
  142. package/components/MultipleFileUpload/multiple-file-upload.css +37 -37
  143. package/components/MultipleFileUpload/multiple-file-upload.scss +38 -39
  144. package/components/Nav/nav.css +33 -9
  145. package/components/Nav/nav.scss +46 -13
  146. package/components/NotificationDrawer/notification-drawer.css +50 -51
  147. package/components/NotificationDrawer/notification-drawer.scss +58 -57
  148. package/components/NumberInput/number-input.css +7 -11
  149. package/components/NumberInput/number-input.scss +5 -7
  150. package/components/OverflowMenu/overflow-menu.css +2 -1
  151. package/components/OverflowMenu/overflow-menu.scss +3 -1
  152. package/components/Page/page.css +175 -519
  153. package/components/Page/page.scss +155 -386
  154. package/components/Pagination/pagination.css +82 -79
  155. package/components/Pagination/pagination.scss +43 -40
  156. package/components/Panel/panel.css +33 -30
  157. package/components/Panel/panel.scss +35 -33
  158. package/components/Popover/popover.css +54 -52
  159. package/components/Popover/popover.scss +55 -54
  160. package/components/Progress/progress.css +8 -4
  161. package/components/Progress/progress.scss +14 -11
  162. package/components/ProgressStepper/progress-stepper.css +246 -245
  163. package/components/ProgressStepper/progress-stepper.scss +118 -118
  164. package/components/Radio/radio.css +7 -7
  165. package/components/Radio/radio.scss +9 -10
  166. package/components/Sidebar/sidebar.css +139 -139
  167. package/components/Sidebar/sidebar.scss +61 -61
  168. package/components/SimpleList/simple-list.css +21 -20
  169. package/components/SimpleList/simple-list.scss +22 -23
  170. package/components/Skeleton/skeleton.css +4 -4
  171. package/components/Skeleton/skeleton.scss +7 -8
  172. package/components/SkipToContent/skip-to-content.css +7 -6
  173. package/components/SkipToContent/skip-to-content.scss +7 -7
  174. package/components/Slider/slider.css +31 -31
  175. package/components/Slider/slider.scss +54 -55
  176. package/components/Spinner/spinner.scss +4 -5
  177. package/components/Switch/switch.css +4 -10
  178. package/components/Switch/switch.scss +8 -17
  179. package/components/TabContent/tab-content.css +25 -25
  180. package/components/TabContent/tab-content.scss +28 -28
  181. package/components/Table/table-grid.css +434 -508
  182. package/components/Table/table-grid.scss +131 -150
  183. package/components/Table/table-scrollable.css +31 -34
  184. package/components/Table/table-scrollable.scss +44 -41
  185. package/components/Table/table-tree-view.css +287 -279
  186. package/components/Table/table-tree-view.scss +84 -84
  187. package/components/Table/table.css +316 -279
  188. package/components/Table/table.scss +346 -301
  189. package/components/Tabs/tabs.css +215 -240
  190. package/components/Tabs/tabs.scss +130 -162
  191. package/components/TextInputGroup/text-input-group.css +122 -64
  192. package/components/TextInputGroup/text-input-group.scss +144 -87
  193. package/components/Tile/tile.css +15 -15
  194. package/components/Tile/tile.scss +16 -17
  195. package/components/Timestamp/timestamp.css +13 -19
  196. package/components/Timestamp/timestamp.scss +16 -22
  197. package/components/Title/title.css +14 -13
  198. package/components/Title/title.scss +15 -15
  199. package/components/ToggleGroup/toggle-group.css +37 -37
  200. package/components/ToggleGroup/toggle-group.scss +38 -41
  201. package/components/Toolbar/toolbar.css +547 -1431
  202. package/components/Toolbar/toolbar.scss +159 -123
  203. package/components/Tooltip/tooltip.css +28 -27
  204. package/components/Tooltip/tooltip.scss +31 -30
  205. package/components/TreeView/tree-view.css +184 -184
  206. package/components/TreeView/tree-view.scss +133 -133
  207. package/components/Truncate/truncate.css +2 -2
  208. package/components/Truncate/truncate.scss +7 -8
  209. package/components/Wizard/wizard.css +190 -154
  210. package/components/Wizard/wizard.scss +211 -165
  211. package/components/_index.css +22378 -0
  212. package/components/_index.scss +82 -0
  213. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  214. package/docs/components/Accordion/examples/Accordion.md +1 -1
  215. package/docs/components/ActionList/examples/ActionList.md +64 -24
  216. package/docs/components/Alert/examples/Alert.md +116 -74
  217. package/docs/components/BackToTop/examples/BackToTop.md +1 -1
  218. package/docs/components/Badge/examples/Badge.md +6 -16
  219. package/docs/components/Banner/examples/Banner.md +16 -10
  220. package/docs/components/Brand/examples/Brand.md +2 -2
  221. package/docs/components/Breadcrumb/examples/Breadcrumb.md +19 -59
  222. package/docs/components/Button/examples/Button.md +537 -368
  223. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  224. package/docs/components/Card/examples/Card.md +372 -658
  225. package/docs/components/Check/examples/Check.md +10 -15
  226. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +92 -47
  227. package/docs/components/CodeBlock/examples/CodeBlock.md +51 -28
  228. package/docs/components/CodeEditor/examples/CodeEditor.md +41 -22
  229. package/docs/components/Content/examples/Content.md +600 -60
  230. package/docs/components/DataList/examples/DataList.md +291 -1028
  231. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  232. package/docs/components/DescriptionList/examples/DescriptionList.md +80 -55
  233. package/docs/components/Drawer/examples/Drawer.md +60 -21
  234. package/docs/components/DualListSelector/examples/DualListSelector.md +364 -996
  235. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  236. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  237. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  238. package/docs/components/Form/examples/Form.md +100 -26
  239. package/docs/components/Hint/examples/Hint.md +54 -164
  240. package/docs/components/InlineEdit/examples/InlineEdit.md +132 -45
  241. package/docs/components/InputGroup/examples/InputGroup.md +38 -62
  242. package/docs/components/JumpLinks/examples/JumpLinks.md +189 -72
  243. package/docs/components/Label/examples/Label.md +2577 -406
  244. package/docs/components/Login/examples/Login.md +372 -334
  245. package/docs/components/Masthead/examples/masthead.md +515 -484
  246. package/docs/components/Menu/examples/Menu.md +77 -138
  247. package/docs/components/MenuToggle/examples/MenuToggle.md +289 -39
  248. package/docs/components/ModalBox/examples/ModalBox.md +158 -100
  249. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +137 -97
  250. package/docs/components/Nav/examples/Navigation.css +2 -7
  251. package/docs/components/Nav/examples/Navigation.md +337 -270
  252. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +515 -2076
  253. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  254. package/docs/components/OverflowMenu/examples/overflow-menu.css +4 -28
  255. package/docs/components/OverflowMenu/examples/overflow-menu.md +104 -159
  256. package/docs/components/Page/examples/Page.css +5 -9
  257. package/docs/components/Page/examples/Page.md +254 -181
  258. package/docs/components/Pagination/examples/Pagination.md +336 -756
  259. package/docs/components/Panel/examples/Panel.md +3 -2
  260. package/docs/components/Popover/examples/Popover.md +60 -15
  261. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
  262. package/docs/components/Sidebar/examples/Sidebar.css +4 -2
  263. package/docs/components/Sidebar/examples/Sidebar.md +3 -3
  264. package/docs/components/Skeleton/examples/Skeleton.css +1 -1
  265. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  266. package/docs/components/Slider/examples/Slider.md +53 -45
  267. package/docs/components/Spinner/examples/Spinner.md +1 -1
  268. package/docs/components/Switch/examples/Switch.md +33 -148
  269. package/docs/components/Table/examples/Table.css +11 -6
  270. package/docs/components/Table/examples/Table.md +5302 -2464
  271. package/docs/components/Tabs/examples/Tabs.md +1267 -607
  272. package/docs/components/TextInputGroup/examples/TextInputGroup.css +8 -3
  273. package/docs/components/TextInputGroup/examples/TextInputGroup.md +469 -278
  274. package/docs/components/Tile/examples/Tile.css +5 -5
  275. package/docs/components/Timestamp/examples/Timestamp.md +7 -1
  276. package/docs/components/ToggleGroup/examples/toggle-group.md +1 -3
  277. package/docs/components/Toolbar/examples/Toolbar.css +50 -39
  278. package/docs/components/Toolbar/examples/Toolbar.md +1562 -1200
  279. package/docs/components/Tooltip/examples/Tooltip.css +1 -1
  280. package/docs/components/TreeView/examples/TreeView.md +627 -49
  281. package/docs/components/Truncate/examples/Truncate.css +1 -2
  282. package/docs/components/Wizard/examples/Wizard.md +1595 -126
  283. package/docs/demos/AboutModal/examples/AboutModal.md +191 -198
  284. package/docs/demos/Alert/examples/Alert.md +924 -909
  285. package/docs/demos/BackToTop/examples/BackToTop.md +318 -327
  286. package/docs/demos/Banner/examples/Banner.md +641 -659
  287. package/docs/demos/Button/examples/Button.md +8 -8
  288. package/docs/demos/Card/examples/Card.css +6 -6
  289. package/docs/demos/Card/examples/Card.md +419 -606
  290. package/docs/demos/CardView/examples/CardView.md +822 -1435
  291. package/docs/demos/Dashboard/examples/Dashboard.md +1308 -1442
  292. package/docs/demos/DataList/examples/DataList.md +3210 -3424
  293. package/docs/demos/DescriptionList/examples/DescriptionList.md +899 -937
  294. package/docs/demos/Drawer/examples/Drawer.md +1165 -1176
  295. package/docs/demos/Form/examples/BasicForms.md +153 -88
  296. package/docs/demos/JumpLinks/examples/JumpLinks.md +1710 -1602
  297. package/docs/demos/Masthead/examples/Masthead.md +1719 -1583
  298. package/docs/demos/Modal/examples/Modal.md +1231 -1235
  299. package/docs/demos/Nav/examples/Nav.md +1216 -1230
  300. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1910 -4577
  301. package/docs/demos/Page/examples/Page.css +11 -0
  302. package/docs/demos/Page/examples/Page.md +3753 -2540
  303. package/docs/demos/Panel/Panel.md +88 -0
  304. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  305. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +16 -48
  306. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5150 -6255
  307. package/docs/demos/Skeleton/examples/Skeleton.md +297 -304
  308. package/docs/demos/Table/examples/Table.md +14272 -15154
  309. package/docs/demos/Tabs/examples/Tabs.md +2821 -2891
  310. package/docs/demos/Toolbar/examples/Toolbar.css +10 -18
  311. package/docs/demos/Toolbar/examples/Toolbar.md +2487 -2663
  312. package/docs/demos/Wizard/examples/Wizard.md +3021 -2784
  313. package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
  314. package/docs/layouts/Flex/examples/Flex.css +4 -4
  315. package/docs/layouts/Flex/examples/Flex.md +50 -50
  316. package/docs/layouts/Gallery/examples/Gallery.css +4 -4
  317. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  318. package/docs/layouts/Grid/examples/Grid.css +3 -3
  319. package/docs/layouts/Grid/examples/Grid.md +33 -33
  320. package/docs/layouts/Level/examples/Level.css +5 -5
  321. package/docs/layouts/Split/examples/Split.css +4 -4
  322. package/docs/layouts/Stack/examples/Stack.css +5 -5
  323. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  324. package/docs/utilities/Alignment/examples/Alignment.css +6 -6
  325. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  326. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
  327. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  328. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  329. package/docs/utilities/Display/examples/Display.css +3 -10
  330. package/docs/utilities/Display/examples/Display.md +21 -12
  331. package/docs/utilities/Flex/examples/Flex.css +7 -7
  332. package/docs/utilities/Flex/examples/Flex.md +82 -40
  333. package/docs/utilities/Float/examples/Float.css +5 -5
  334. package/docs/utilities/Float/examples/Float.md +6 -6
  335. package/docs/utilities/Sizing/examples/Sizing.css +6 -6
  336. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  337. package/docs/utilities/Spacing/examples/Spacing.css +3 -3
  338. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  339. package/docs/utilities/Text/examples/Text.md +78 -77
  340. package/icons/pficons.mjs +6 -0
  341. package/layouts/Bullseye/bullseye.css +4 -0
  342. package/layouts/Bullseye/bullseye.scss +5 -1
  343. package/layouts/Flex/flex.css +241 -237
  344. package/layouts/Flex/flex.scss +48 -44
  345. package/layouts/Gallery/gallery.css +15 -11
  346. package/layouts/Gallery/gallery.scss +9 -5
  347. package/layouts/Grid/grid.css +20 -16
  348. package/layouts/Grid/grid.scss +12 -8
  349. package/layouts/Level/level.css +5 -1
  350. package/layouts/Level/level.scss +6 -2
  351. package/layouts/Split/split.css +5 -1
  352. package/layouts/Split/split.scss +6 -2
  353. package/layouts/Stack/stack.css +5 -1
  354. package/layouts/Stack/stack.scss +6 -2
  355. package/layouts/_index.css +3461 -0
  356. package/layouts/_index.scss +8 -0
  357. package/package.json +39 -39
  358. package/patternfly-addons.css +2071 -2648
  359. package/patternfly-addons.scss +2 -12
  360. package/patternfly-base-no-globals.css +1429 -1645
  361. package/patternfly-base-no-globals.scss +5 -3
  362. package/patternfly-base.css +1511 -1723
  363. package/patternfly-base.scss +2 -6
  364. package/patternfly-charts.css +579 -240
  365. package/patternfly-charts.scss +352 -337
  366. package/patternfly-no-globals.css +19895 -23410
  367. package/patternfly-no-globals.scss +5 -4
  368. package/patternfly.css +19999 -23510
  369. package/patternfly.min.css +1 -1
  370. package/patternfly.min.css.map +1 -1
  371. package/patternfly.scss +3 -4
  372. package/sass-utilities/_index.scss +6 -0
  373. package/sass-utilities/functions.scss +25 -25
  374. package/sass-utilities/{_init.scss → init.scss} +6 -6
  375. package/sass-utilities/mixins.scss +108 -72
  376. package/sass-utilities/{component-namespaces.scss → namespaces-components.scss} +3 -27
  377. package/sass-utilities/{layout-namespaces.scss → namespaces-layouts.scss} +3 -1
  378. package/sass-utilities/scss-variables.scss +49 -261
  379. package/utilities/Accessibility/accessibility.css +15 -15
  380. package/utilities/Accessibility/accessibility.scss +8 -6
  381. package/utilities/Alignment/alignment.css +29 -29
  382. package/utilities/Alignment/alignment.scss +6 -4
  383. package/utilities/BackgroundColor/background-color.css +67 -0
  384. package/utilities/BackgroundColor/background-color.scss +16 -0
  385. package/utilities/BoxShadow/box-shadow.css +15 -39
  386. package/utilities/BoxShadow/box-shadow.scss +19 -28
  387. package/utilities/Display/display.css +43 -5
  388. package/utilities/Display/display.scss +7 -4
  389. package/utilities/Flex/flex.css +50 -50
  390. package/utilities/Flex/flex.scss +21 -20
  391. package/utilities/Float/float.css +29 -29
  392. package/utilities/Float/float.scss +6 -6
  393. package/utilities/Sizing/sizing.css +58 -58
  394. package/utilities/Sizing/sizing.scss +23 -21
  395. package/utilities/Spacing/spacing.css +1372 -1372
  396. package/utilities/Spacing/spacing.scss +6 -6
  397. package/utilities/Text/text.css +419 -662
  398. package/utilities/Text/text.scss +81 -107
  399. package/utilities/_index.css +7815 -0
  400. package/utilities/_index.scss +10 -0
  401. package/assets/images/pf-logo-small.svg +0 -23
  402. package/assets/images/pf_logo_white.hbs +0 -35
  403. package/assets/images/pfbg-icon.svg +0 -1
  404. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  405. package/base/_base.scss +0 -2
  406. package/base/_chart-globals.scss +0 -415
  407. package/base/_common.scss +0 -50
  408. package/base/_fa-icons.scss +0 -33
  409. package/base/_fonts.scss +0 -136
  410. package/base/_icons.scss +0 -3
  411. package/base/_pficons.scss +0 -2
  412. package/base/_themes.scss +0 -43
  413. package/base/_variables.scss +0 -299
  414. package/base/patternfly-globals.css +0 -120
  415. package/base/patternfly-globals.scss +0 -2
  416. package/base/patternfly-icons.css +0 -4728
  417. package/base/patternfly-icons.scss +0 -2
  418. package/base/patternfly-themes.css +0 -82
  419. package/base/patternfly-themes.scss +0 -2
  420. package/base/themes/dark/_chart-globals.scss +0 -42
  421. package/base/themes/dark/_globals.scss +0 -5
  422. package/base/tokens/_workspace-overrides.scss +0 -7
  423. package/components/AppLauncher/app-launcher.css +0 -244
  424. package/components/AppLauncher/app-launcher.scss +0 -308
  425. package/components/AppLauncher/themes/dark/app-launcher.scss +0 -13
  426. package/components/Chip/chip-group.css +0 -93
  427. package/components/Chip/chip-group.scss +0 -98
  428. package/components/Chip/chip.css +0 -122
  429. package/components/Chip/chip.scss +0 -140
  430. package/components/Chip/themes/dark/chip.scss +0 -9
  431. package/components/ContextSelector/context-selector.css +0 -336
  432. package/components/ContextSelector/context-selector.scss +0 -384
  433. package/components/ContextSelector/themes/dark/context-selector.scss +0 -24
  434. package/components/Dropdown/dropdown.css +0 -686
  435. package/components/Dropdown/dropdown.scss +0 -820
  436. package/components/Dropdown/themes/dark/dropdown.scss +0 -32
  437. package/components/LogViewer/log-viewer.css +0 -197
  438. package/components/LogViewer/log-viewer.scss +0 -226
  439. package/components/LogViewer/themes/dark/log-viewer.scss +0 -7
  440. package/components/NotificationBadge/notification-badge.css +0 -87
  441. package/components/NotificationBadge/notification-badge.scss +0 -108
  442. package/components/OptionsMenu/options-menu.css +0 -279
  443. package/components/OptionsMenu/options-menu.scss +0 -332
  444. package/components/OptionsMenu/themes/dark/options-menu.scss +0 -21
  445. package/components/Select/select.css +0 -599
  446. package/components/Select/select.scss +0 -713
  447. package/components/Select/themes/dark/select.scss +0 -23
  448. package/components/_all.scss +0 -91
  449. package/docs/components/AppLauncher/deprecated/application-launcher.css +0 -25
  450. package/docs/components/AppLauncher/deprecated/application-launcher.md +0 -792
  451. package/docs/components/Breadcrumb/examples/Breadcrumb.css +0 -3
  452. package/docs/components/Chip/examples/Chip.md +0 -846
  453. package/docs/components/ContextSelector/deprecated/context-selector.css +0 -7
  454. package/docs/components/ContextSelector/deprecated/context-selector.md +0 -909
  455. package/docs/components/Dropdown/deprecated/Dropdown.css +0 -64
  456. package/docs/components/Dropdown/deprecated/Dropdown.md +0 -2920
  457. package/docs/components/LogViewer/examples/LogViewer.css +0 -17
  458. package/docs/components/LogViewer/examples/LogViewer.md +0 -5936
  459. package/docs/components/NotificationBadge/examples/NotificationBadge.md +0 -222
  460. package/docs/components/OptionsMenu/deprecated/options-menu.css +0 -25
  461. package/docs/components/OptionsMenu/deprecated/options-menu.md +0 -1014
  462. package/docs/components/Page/deprecated/PageHeader.css +0 -17
  463. package/docs/components/Page/deprecated/PageHeader.md +0 -261
  464. package/docs/components/Pagination/examples/Pagination.css +0 -3
  465. package/docs/components/Select/deprecated/Select.css +0 -56
  466. package/docs/components/Select/deprecated/Select.md +0 -3525
  467. package/docs/components/Tabs/examples/Tabs.css +0 -10
  468. package/docs/components/ToggleGroup/examples/toggle-group.css +0 -4
  469. package/docs/demos/ContextSelector/examples/ContextSelector.md +0 -1712
  470. package/docs/demos/Page/examples/Penta.md +0 -821
  471. package/docs/utilities/Text/examples/Text.css +0 -0
  472. package/layouts/_all.scss +0 -7
  473. package/patternfly-base-no-globals-theme-dark-unversioned.css +0 -6276
  474. package/patternfly-base-no-globals-theme-dark-unversioned.scss +0 -11
  475. package/patternfly-base-theme-dark-unversioned.css +0 -6393
  476. package/patternfly-base-theme-dark-unversioned.scss +0 -5
  477. package/patternfly-charts-theme-dark-unversioned.css +0 -70
  478. package/patternfly-charts-theme-dark-unversioned.scss +0 -8
  479. package/patternfly-charts-theme-dark.css +0 -70
  480. package/patternfly-charts-theme-dark.scss +0 -8
  481. package/patternfly-theme-dark-unversioned.css +0 -35533
  482. package/patternfly-theme-dark-unversioned.scss +0 -6
  483. package/patternfly-theme-dark.css +0 -0
  484. package/patternfly-theme-dark.scss +0 -1
  485. package/sass-utilities/_all.scss +0 -9
  486. package/sass-utilities/colors.scss +0 -82
  487. package/sass-utilities/div.import.scss +0 -3
  488. package/sass-utilities/div.scss +0 -4
  489. package/sass-utilities/placeholders.scss +0 -72
  490. package/sass-utilities/themes/dark/_all.scss +0 -4
  491. package/sass-utilities/themes/dark/colors.scss +0 -16
  492. package/sass-utilities/themes/dark/mixins.scss +0 -7
  493. package/sass-utilities/themes/dark/placeholders.scss +0 -5
  494. package/sass-utilities/themes/dark/scss-variables.scss +0 -92
  495. package/themes/dark/_patternfly-charts-theme-dark.scss +0 -98
  496. package/utilities/BackgroundColor/BackgroundColor.css +0 -414
  497. package/utilities/BackgroundColor/BackgroundColor.scss +0 -64
  498. package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  499. package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
  500. package/utilities/Text/themes/dark/text.css +0 -0
  501. package/utilities/Text/themes/dark/text.scss +0 -33
package/docs/components/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. |