@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/ContextSelector/deprecated/context-selector.md DELETED
@@ -1,909 +0,0 @@
1
- ---
2
- id: Context selector
3
- section: components
4
- subsection: menus
5
- cssPrefix: pf-v6-c-context-selector
6
- deprecated: true
7
- ---import './context-selector.css'
8
-
9
- ## Examples
10
-
11
- ### Basic
12
-
13
- ```html
14
- <div class="pf-v6-c-context-selector">
15
- <span id="context-selector-collapsed-example-label" hidden>Selected project:</span>
16
- <button
17
- class="pf-v6-c-context-selector__toggle"
18
- aria-expanded="false"
19
- id="context-selector-collapsed-example-toggle"
20
- aria-labelledby="context-selector-collapsed-example-label context-selector-collapsed-example-toggle"
21
- >
22
- <span class="pf-v6-c-context-selector__toggle-text">My project</span>
23
- <span class="pf-v6-c-context-selector__toggle-icon">
24
- <i class="fas fa-caret-down" aria-hidden="true"></i>
25
- </span>
26
- </button>
27
- <div class="pf-v6-c-context-selector__menu" hidden>
28
- <div class="pf-v6-c-context-selector__menu-search">
29
- <div class="pf-v6-c-text-input-group">
30
- <div class="pf-v6-c-text-input-group__main pf-m-icon">
31
- <span class="pf-v6-c-text-input-group__text">
32
- <span class="pf-v6-c-text-input-group__icon">
33
- <i class="fas fa-fw fa-search"></i>
34
- </span>
35
- <input
36
- class="pf-v6-c-text-input-group__text-input"
37
- type="text"
38
- placeholder="Search"
39
- value
40
- aria-label="Search input"
41
- />
42
- </span>
43
- </div>
44
- </div>
45
- </div>
46
- <ul class="pf-v6-c-context-selector__menu-list" role="menu">
47
- <li role="none">
48
- <a
49
- class="pf-v6-c-context-selector__menu-list-item"
50
- href="#"
51
- role="menuitem"
52
- >Link</a>
53
- </li>
54
- <li role="none">
55
- <button
56
- class="pf-v6-c-context-selector__menu-list-item"
57
- type="button"
58
- role="menuitem"
59
- >Action</button>
60
- </li>
61
- <li role="none">
62
- <a
63
- class="pf-v6-c-context-selector__menu-list-item pf-m-disabled"
64
- href="#"
65
- aria-disabled="true"
66
- tabindex="-1"
67
- role="menuitem"
68
- >Disabled link</a>
69
- </li>
70
- <li role="none">
71
- <button
72
- class="pf-v6-c-context-selector__menu-list-item"
73
- type="button"
74
- disabled
75
- role="menuitem"
76
- >Disabled action</button>
77
- </li>
78
- <li role="none">
79
- <button
80
- class="pf-v6-c-context-selector__menu-list-item"
81
- type="button"
82
- role="menuitem"
83
- >My project</button>
84
- </li>
85
- <li role="none">
86
- <button
87
- class="pf-v6-c-context-selector__menu-list-item"
88
- type="button"
89
- role="menuitem"
90
- >OpenShift cluster</button>
91
- </li>
92
- <li role="none">
93
- <button
94
- class="pf-v6-c-context-selector__menu-list-item"
95
- type="button"
96
- role="menuitem"
97
- >Production Ansible</button>
98
- </li>
99
- <li role="none">
100
- <button
101
- class="pf-v6-c-context-selector__menu-list-item"
102
- type="button"
103
- role="menuitem"
104
- >AWS</button>
105
- </li>
106
- <li role="none">
107
- <button
108
- class="pf-v6-c-context-selector__menu-list-item"
109
- type="button"
110
- role="menuitem"
111
- >Azure</button>
112
- </li>
113
- <li role="none">
114
- <button
115
- class="pf-v6-c-context-selector__menu-list-item"
116
- type="button"
117
- role="menuitem"
118
- >My project</button>
119
- </li>
120
- <li role="none">
121
- <button
122
- class="pf-v6-c-context-selector__menu-list-item"
123
- type="button"
124
- role="menuitem"
125
- >OpenShift cluster</button>
126
- </li>
127
- <li role="none">
128
- <button
129
- class="pf-v6-c-context-selector__menu-list-item"
130
- type="button"
131
- role="menuitem"
132
- >Production Ansible</button>
133
- </li>
134
- <li role="none">
135
- <button
136
- class="pf-v6-c-context-selector__menu-list-item"
137
- type="button"
138
- role="menuitem"
139
- >AWS</button>
140
- </li>
141
- <li role="none">
142
- <button
143
- class="pf-v6-c-context-selector__menu-list-item"
144
- type="button"
145
- role="menuitem"
146
- >Azure</button>
147
- </li>
148
- </ul>
149
- </div>
150
- </div>
151
-
152
- <div class="pf-v6-c-context-selector pf-m-expanded">
153
- <span id="context-selector-expanded-example-label" hidden>Selected Project:</span>
154
- <button
155
- class="pf-v6-c-context-selector__toggle"
156
- aria-expanded="true"
157
- id="context-selector-expanded-example-toggle"
158
- aria-labelledby="context-selector-expanded-example-label context-selector-expanded-example-toggle"
159
- >
160
- <span class="pf-v6-c-context-selector__toggle-text">My project</span>
161
- <span class="pf-v6-c-context-selector__toggle-icon">
162
- <i class="fas fa-caret-down" aria-hidden="true"></i>
163
- </span>
164
- </button>
165
- <div class="pf-v6-c-context-selector__menu">
166
- <div class="pf-v6-c-context-selector__menu-search">
167
- <div class="pf-v6-c-text-input-group">
168
- <div class="pf-v6-c-text-input-group__main pf-m-icon">
169
- <span class="pf-v6-c-text-input-group__text">
170
- <span class="pf-v6-c-text-input-group__icon">
171
- <i class="fas fa-fw fa-search"></i>
172
- </span>
173
- <input
174
- class="pf-v6-c-text-input-group__text-input"
175
- type="text"
176
- placeholder="Search"
177
- value
178
- aria-label="Search input"
179
- />
180
- </span>
181
- </div>
182
- </div>
183
- </div>
184
- <ul class="pf-v6-c-context-selector__menu-list" role="menu">
185
- <li role="none">
186
- <a
187
- class="pf-v6-c-context-selector__menu-list-item"
188
- href="#"
189
- role="menuitem"
190
- >Link</a>
191
- </li>
192
- <li role="none">
193
- <button
194
- class="pf-v6-c-context-selector__menu-list-item"
195
- type="button"
196
- role="menuitem"
197
- >Action</button>
198
- </li>
199
- <li role="none">
200
- <a
201
- class="pf-v6-c-context-selector__menu-list-item pf-m-disabled"
202
- href="#"
203
- aria-disabled="true"
204
- tabindex="-1"
205
- role="menuitem"
206
- >Disabled link</a>
207
- </li>
208
- <li role="none">
209
- <button
210
- class="pf-v6-c-context-selector__menu-list-item"
211
- type="button"
212
- disabled
213
- role="menuitem"
214
- >Disabled action</button>
215
- </li>
216
- <li role="none">
217
- <button
218
- class="pf-v6-c-context-selector__menu-list-item"
219
- type="button"
220
- role="menuitem"
221
- >My project</button>
222
- </li>
223
- <li role="none">
224
- <button
225
- class="pf-v6-c-context-selector__menu-list-item"
226
- type="button"
227
- role="menuitem"
228
- >OpenShift cluster</button>
229
- </li>
230
- <li role="none">
231
- <button
232
- class="pf-v6-c-context-selector__menu-list-item"
233
- type="button"
234
- role="menuitem"
235
- >Production Ansible</button>
236
- </li>
237
- <li role="none">
238
- <button
239
- class="pf-v6-c-context-selector__menu-list-item"
240
- type="button"
241
- role="menuitem"
242
- >AWS</button>
243
- </li>
244
- <li role="none">
245
- <button
246
- class="pf-v6-c-context-selector__menu-list-item"
247
- type="button"
248
- role="menuitem"
249
- >Azure</button>
250
- </li>
251
- <li role="none">
252
- <button
253
- class="pf-v6-c-context-selector__menu-list-item"
254
- type="button"
255
- role="menuitem"
256
- >My project</button>
257
- </li>
258
- <li role="none">
259
- <button
260
- class="pf-v6-c-context-selector__menu-list-item"
261
- type="button"
262
- role="menuitem"
263
- >OpenShift cluster</button>
264
- </li>
265
- <li role="none">
266
- <button
267
- class="pf-v6-c-context-selector__menu-list-item"
268
- type="button"
269
- role="menuitem"
270
- >Production Ansible</button>
271
- </li>
272
- <li role="none">
273
- <button
274
- class="pf-v6-c-context-selector__menu-list-item"
275
- type="button"
276
- role="menuitem"
277
- >AWS</button>
278
- </li>
279
- <li role="none">
280
- <button
281
- class="pf-v6-c-context-selector__menu-list-item"
282
- type="button"
283
- role="menuitem"
284
- >Azure</button>
285
- </li>
286
- </ul>
287
- </div>
288
- </div>
289
-
290
- ```
291
-
292
- ### Plain with text
293
-
294
- ```html
295
- <div class="pf-v6-c-context-selector">
296
- <span
297
- id="context-selector-plain-with-text-collapsed-example-label"
298
- hidden
299
- >Selected project:</span>
300
- <button
301
- class="pf-v6-c-context-selector__toggle pf-m-text pf-m-plain"
302
- aria-expanded="false"
303
- id="context-selector-plain-with-text-collapsed-example-toggle"
304
- aria-labelledby="context-selector-plain-with-text-collapsed-example-label context-selector-plain-with-text-collapsed-example-toggle"
305
- >
306
- <span class="pf-v6-c-context-selector__toggle-text">My project</span>
307
- <span class="pf-v6-c-context-selector__toggle-icon">
308
- <i class="fas fa-caret-down" aria-hidden="true"></i>
309
- </span>
310
- </button>
311
- <div class="pf-v6-c-context-selector__menu" hidden>
312
- <div class="pf-v6-c-context-selector__menu-search">
313
- <div class="pf-v6-c-text-input-group">
314
- <div class="pf-v6-c-text-input-group__main pf-m-icon">
315
- <span class="pf-v6-c-text-input-group__text">
316
- <span class="pf-v6-c-text-input-group__icon">
317
- <i class="fas fa-fw fa-search"></i>
318
- </span>
319
- <input
320
- class="pf-v6-c-text-input-group__text-input"
321
- type="text"
322
- placeholder="Search"
323
- value
324
- aria-label="Search input"
325
- />
326
- </span>
327
- </div>
328
- </div>
329
- </div>
330
- <ul class="pf-v6-c-context-selector__menu-list" role="menu">
331
- <li role="none">
332
- <a
333
- class="pf-v6-c-context-selector__menu-list-item"
334
- href="#"
335
- role="menuitem"
336
- >Link</a>
337
- </li>
338
- <li role="none">
339
- <button
340
- class="pf-v6-c-context-selector__menu-list-item"
341
- type="button"
342
- role="menuitem"
343
- >Action</button>
344
- </li>
345
- <li role="none">
346
- <a
347
- class="pf-v6-c-context-selector__menu-list-item pf-m-disabled"
348
- href="#"
349
- aria-disabled="true"
350
- tabindex="-1"
351
- role="menuitem"
352
- >Disabled link</a>
353
- </li>
354
- <li role="none">
355
- <button
356
- class="pf-v6-c-context-selector__menu-list-item"
357
- type="button"
358
- disabled
359
- role="menuitem"
360
- >Disabled action</button>
361
- </li>
362
- <li role="none">
363
- <button
364
- class="pf-v6-c-context-selector__menu-list-item"
365
- type="button"
366
- role="menuitem"
367
- >My project</button>
368
- </li>
369
- <li role="none">
370
- <button
371
- class="pf-v6-c-context-selector__menu-list-item"
372
- type="button"
373
- role="menuitem"
374
- >OpenShift cluster</button>
375
- </li>
376
- <li role="none">
377
- <button
378
- class="pf-v6-c-context-selector__menu-list-item"
379
- type="button"
380
- role="menuitem"
381
- >Production Ansible</button>
382
- </li>
383
- <li role="none">
384
- <button
385
- class="pf-v6-c-context-selector__menu-list-item"
386
- type="button"
387
- role="menuitem"
388
- >AWS</button>
389
- </li>
390
- <li role="none">
391
- <button
392
- class="pf-v6-c-context-selector__menu-list-item"
393
- type="button"
394
- role="menuitem"
395
- >Azure</button>
396
- </li>
397
- <li role="none">
398
- <button
399
- class="pf-v6-c-context-selector__menu-list-item"
400
- type="button"
401
- role="menuitem"
402
- >My project</button>
403
- </li>
404
- <li role="none">
405
- <button
406
- class="pf-v6-c-context-selector__menu-list-item"
407
- type="button"
408
- role="menuitem"
409
- >OpenShift cluster</button>
410
- </li>
411
- <li role="none">
412
- <button
413
- class="pf-v6-c-context-selector__menu-list-item"
414
- type="button"
415
- role="menuitem"
416
- >Production Ansible</button>
417
- </li>
418
- <li role="none">
419
- <button
420
- class="pf-v6-c-context-selector__menu-list-item"
421
- type="button"
422
- role="menuitem"
423
- >AWS</button>
424
- </li>
425
- <li role="none">
426
- <button
427
- class="pf-v6-c-context-selector__menu-list-item"
428
- type="button"
429
- role="menuitem"
430
- >Azure</button>
431
- </li>
432
- </ul>
433
- </div>
434
- </div>
435
-
436
- <div class="pf-v6-c-context-selector pf-m-expanded">
437
- <span
438
- id="context-selector-plain-with-text-expanded-example-label"
439
- hidden
440
- >Selected Project:</span>
441
- <button
442
- class="pf-v6-c-context-selector__toggle pf-m-text pf-m-plain"
443
- aria-expanded="true"
444
- id="context-selector-plain-with-text-expanded-example-toggle"
445
- aria-labelledby="context-selector-plain-with-text-expanded-example-label context-selector-plain-with-text-expanded-example-toggle"
446
- >
447
- <span class="pf-v6-c-context-selector__toggle-text">My project</span>
448
- <span class="pf-v6-c-context-selector__toggle-icon">
449
- <i class="fas fa-caret-down" aria-hidden="true"></i>
450
- </span>
451
- </button>
452
- <div class="pf-v6-c-context-selector__menu">
453
- <div class="pf-v6-c-context-selector__menu-search">
454
- <div class="pf-v6-c-text-input-group">
455
- <div class="pf-v6-c-text-input-group__main pf-m-icon">
456
- <span class="pf-v6-c-text-input-group__text">
457
- <span class="pf-v6-c-text-input-group__icon">
458
- <i class="fas fa-fw fa-search"></i>
459
- </span>
460
- <input
461
- class="pf-v6-c-text-input-group__text-input"
462
- type="text"
463
- placeholder="Search"
464
- value
465
- aria-label="Search input"
466
- />
467
- </span>
468
- </div>
469
- </div>
470
- </div>
471
- <ul class="pf-v6-c-context-selector__menu-list" role="menu">
472
- <li role="none">
473
- <a
474
- class="pf-v6-c-context-selector__menu-list-item"
475
- href="#"
476
- role="menuitem"
477
- >Link</a>
478
- </li>
479
- <li role="none">
480
- <button
481
- class="pf-v6-c-context-selector__menu-list-item"
482
- type="button"
483
- role="menuitem"
484
- >Action</button>
485
- </li>
486
- <li role="none">
487
- <a
488
- class="pf-v6-c-context-selector__menu-list-item pf-m-disabled"
489
- href="#"
490
- aria-disabled="true"
491
- tabindex="-1"
492
- role="menuitem"
493
- >Disabled link</a>
494
- </li>
495
- <li role="none">
496
- <button
497
- class="pf-v6-c-context-selector__menu-list-item"
498
- type="button"
499
- disabled
500
- role="menuitem"
501
- >Disabled action</button>
502
- </li>
503
- <li role="none">
504
- <button
505
- class="pf-v6-c-context-selector__menu-list-item"
506
- type="button"
507
- role="menuitem"
508
- >My project</button>
509
- </li>
510
- <li role="none">
511
- <button
512
- class="pf-v6-c-context-selector__menu-list-item"
513
- type="button"
514
- role="menuitem"
515
- >OpenShift cluster</button>
516
- </li>
517
- <li role="none">
518
- <button
519
- class="pf-v6-c-context-selector__menu-list-item"
520
- type="button"
521
- role="menuitem"
522
- >Production Ansible</button>
523
- </li>
524
- <li role="none">
525
- <button
526
- class="pf-v6-c-context-selector__menu-list-item"
527
- type="button"
528
- role="menuitem"
529
- >AWS</button>
530
- </li>
531
- <li role="none">
532
- <button
533
- class="pf-v6-c-context-selector__menu-list-item"
534
- type="button"
535
- role="menuitem"
536
- >Azure</button>
537
- </li>
538
- <li role="none">
539
- <button
540
- class="pf-v6-c-context-selector__menu-list-item"
541
- type="button"
542
- role="menuitem"
543
- >My project</button>
544
- </li>
545
- <li role="none">
546
- <button
547
- class="pf-v6-c-context-selector__menu-list-item"
548
- type="button"
549
- role="menuitem"
550
- >OpenShift cluster</button>
551
- </li>
552
- <li role="none">
553
- <button
554
- class="pf-v6-c-context-selector__menu-list-item"
555
- type="button"
556
- role="menuitem"
557
- >Production Ansible</button>
558
- </li>
559
- <li role="none">
560
- <button
561
- class="pf-v6-c-context-selector__menu-list-item"
562
- type="button"
563
- role="menuitem"
564
- >AWS</button>
565
- </li>
566
- <li role="none">
567
- <button
568
- class="pf-v6-c-context-selector__menu-list-item"
569
- type="button"
570
- role="menuitem"
571
- >Azure</button>
572
- </li>
573
- </ul>
574
- </div>
575
- </div>
576
-
577
- ```
578
-
579
- ### With footer
580
-
581
- ```html
582
- <div class="pf-v6-c-context-selector pf-m-expanded">
583
- <span id="context-selector-with-footer-example-label" hidden>Selected Project:</span>
584
- <button
585
- class="pf-v6-c-context-selector__toggle"
586
- aria-expanded="true"
587
- id="context-selector-with-footer-example-toggle"
588
- aria-labelledby="context-selector-with-footer-example-label context-selector-with-footer-example-toggle"
589
- >
590
- <span class="pf-v6-c-context-selector__toggle-text">My project</span>
591
- <span class="pf-v6-c-context-selector__toggle-icon">
592
- <i class="fas fa-caret-down" aria-hidden="true"></i>
593
- </span>
594
- </button>
595
- <div class="pf-v6-c-context-selector__menu">
596
- <div class="pf-v6-c-context-selector__menu-search">
597
- <div class="pf-v6-c-text-input-group">
598
- <div class="pf-v6-c-text-input-group__main pf-m-icon">
599
- <span class="pf-v6-c-text-input-group__text">
600
- <span class="pf-v6-c-text-input-group__icon">
601
- <i class="fas fa-fw fa-search"></i>
602
- </span>
603
- <input
604
- class="pf-v6-c-text-input-group__text-input"
605
- type="text"
606
- placeholder="Search"
607
- value
608
- aria-label="Search input"
609
- />
610
- </span>
611
- </div>
612
- </div>
613
- </div>
614
- <ul class="pf-v6-c-context-selector__menu-list" role="menu">
615
- <li role="none">
616
- <a
617
- class="pf-v6-c-context-selector__menu-list-item"
618
- href="#"
619
- role="menuitem"
620
- >Link</a>
621
- </li>
622
- <li role="none">
623
- <button
624
- class="pf-v6-c-context-selector__menu-list-item"
625
- type="button"
626
- role="menuitem"
627
- >Action</button>
628
- </li>
629
- <li role="none">
630
- <a
631
- class="pf-v6-c-context-selector__menu-list-item pf-m-disabled"
632
- href="#"
633
- aria-disabled="true"
634
- tabindex="-1"
635
- role="menuitem"
636
- >Disabled link</a>
637
- </li>
638
- <li role="none">
639
- <button
640
- class="pf-v6-c-context-selector__menu-list-item"
641
- type="button"
642
- disabled
643
- role="menuitem"
644
- >Disabled action</button>
645
- </li>
646
- <li role="none">
647
- <button
648
- class="pf-v6-c-context-selector__menu-list-item"
649
- type="button"
650
- role="menuitem"
651
- >My project</button>
652
- </li>
653
- <li role="none">
654
- <button
655
- class="pf-v6-c-context-selector__menu-list-item"
656
- type="button"
657
- role="menuitem"
658
- >OpenShift cluster</button>
659
- </li>
660
- <li role="none">
661
- <button
662
- class="pf-v6-c-context-selector__menu-list-item"
663
- type="button"
664
- role="menuitem"
665
- >Production Ansible</button>
666
- </li>
667
- <li role="none">
668
- <button
669
- class="pf-v6-c-context-selector__menu-list-item"
670
- type="button"
671
- role="menuitem"
672
- >AWS</button>
673
- </li>
674
- <li role="none">
675
- <button
676
- class="pf-v6-c-context-selector__menu-list-item"
677
- type="button"
678
- role="menuitem"
679
- >Azure</button>
680
- </li>
681
- <li role="none">
682
- <button
683
- class="pf-v6-c-context-selector__menu-list-item"
684
- type="button"
685
- role="menuitem"
686
- >My project</button>
687
- </li>
688
- <li role="none">
689
- <button
690
- class="pf-v6-c-context-selector__menu-list-item"
691
- type="button"
692
- role="menuitem"
693
- >OpenShift cluster</button>
694
- </li>
695
- <li role="none">
696
- <button
697
- class="pf-v6-c-context-selector__menu-list-item"
698
- type="button"
699
- role="menuitem"
700
- >Production Ansible</button>
701
- </li>
702
- <li role="none">
703
- <button
704
- class="pf-v6-c-context-selector__menu-list-item"
705
- type="button"
706
- role="menuitem"
707
- >AWS</button>
708
- </li>
709
- <li role="none">
710
- <button
711
- class="pf-v6-c-context-selector__menu-list-item"
712
- type="button"
713
- role="menuitem"
714
- >Azure</button>
715
- </li>
716
- </ul>
717
-
718
- <div class="pf-v6-c-context-selector__menu-footer">
719
- <button
720
- class="pf-v6-c-button pf-m-secondary"
721
- type="button"
722
- >Manage projects</button>
723
- </div>
724
- </div>
725
- </div>
726
-
727
- <div class="pf-v6-c-context-selector pf-m-expanded">
728
- <span
729
- id="context-selector-with-footer-example-two-label"
730
- hidden
731
- >Selected Project:</span>
732
- <button
733
- class="pf-v6-c-context-selector__toggle"
734
- aria-expanded="true"
735
- id="context-selector-with-footer-example-two-toggle"
736
- aria-labelledby="context-selector-with-footer-example-two-label context-selector-with-footer-example-two-toggle"
737
- >
738
- <span class="pf-v6-c-context-selector__toggle-text">My project</span>
739
- <span class="pf-v6-c-context-selector__toggle-icon">
740
- <i class="fas fa-caret-down" aria-hidden="true"></i>
741
- </span>
742
- </button>
743
- <div class="pf-v6-c-context-selector__menu">
744
- <div class="pf-v6-c-context-selector__menu-search">
745
- <div class="pf-v6-c-text-input-group">
746
- <div class="pf-v6-c-text-input-group__main pf-m-icon">
747
- <span class="pf-v6-c-text-input-group__text">
748
- <span class="pf-v6-c-text-input-group__icon">
749
- <i class="fas fa-fw fa-search"></i>
750
- </span>
751
- <input
752
- class="pf-v6-c-text-input-group__text-input"
753
- type="text"
754
- placeholder="Search"
755
- value
756
- aria-label="Search input"
757
- />
758
- </span>
759
- </div>
760
- </div>
761
- </div>
762
- <ul class="pf-v6-c-context-selector__menu-list" role="menu">
763
- <li role="none">
764
- <a
765
- class="pf-v6-c-context-selector__menu-list-item"
766
- href="#"
767
- role="menuitem"
768
- >Link</a>
769
- </li>
770
- <li role="none">
771
- <button
772
- class="pf-v6-c-context-selector__menu-list-item"
773
- type="button"
774
- role="menuitem"
775
- >Action</button>
776
- </li>
777
- <li role="none">
778
- <a
779
- class="pf-v6-c-context-selector__menu-list-item pf-m-disabled"
780
- href="#"
781
- aria-disabled="true"
782
- tabindex="-1"
783
- role="menuitem"
784
- >Disabled link</a>
785
- </li>
786
- <li role="none">
787
- <button
788
- class="pf-v6-c-context-selector__menu-list-item"
789
- type="button"
790
- disabled
791
- role="menuitem"
792
- >Disabled action</button>
793
- </li>
794
- <li role="none">
795
- <button
796
- class="pf-v6-c-context-selector__menu-list-item"
797
- type="button"
798
- role="menuitem"
799
- >My project</button>
800
- </li>
801
- <li role="none">
802
- <button
803
- class="pf-v6-c-context-selector__menu-list-item"
804
- type="button"
805
- role="menuitem"
806
- >OpenShift cluster</button>
807
- </li>
808
- <li role="none">
809
- <button
810
- class="pf-v6-c-context-selector__menu-list-item"
811
- type="button"
812
- role="menuitem"
813
- >Production Ansible</button>
814
- </li>
815
- <li role="none">
816
- <button
817
- class="pf-v6-c-context-selector__menu-list-item"
818
- type="button"
819
- role="menuitem"
820
- >AWS</button>
821
- </li>
822
- <li role="none">
823
- <button
824
- class="pf-v6-c-context-selector__menu-list-item"
825
- type="button"
826
- role="menuitem"
827
- >Azure</button>
828
- </li>
829
- <li role="none">
830
- <button
831
- class="pf-v6-c-context-selector__menu-list-item"
832
- type="button"
833
- role="menuitem"
834
- >My project</button>
835
- </li>
836
- <li role="none">
837
- <button
838
- class="pf-v6-c-context-selector__menu-list-item"
839
- type="button"
840
- role="menuitem"
841
- >OpenShift cluster</button>
842
- </li>
843
- <li role="none">
844
- <button
845
- class="pf-v6-c-context-selector__menu-list-item"
846
- type="button"
847
- role="menuitem"
848
- >Production Ansible</button>
849
- </li>
850
- <li role="none">
851
- <button
852
- class="pf-v6-c-context-selector__menu-list-item"
853
- type="button"
854
- role="menuitem"
855
- >AWS</button>
856
- </li>
857
- <li role="none">
858
- <button
859
- class="pf-v6-c-context-selector__menu-list-item"
860
- type="button"
861
- role="menuitem"
862
- >Azure</button>
863
- </li>
864
- </ul>
865
-
866
- <div class="pf-v6-c-context-selector__menu-footer">
867
- <button
868
- class="pf-v6-c-button pf-m-link pf-m-inline"
869
- type="button"
870
- >Manage projects</button>
871
- </div>
872
- </div>
873
- </div>
874
-
875
- ```
876
-
877
- ## Documentation
878
-
879
- ### Accessibility
880
-
881
- | Class | Applied to | Outcome |
882
- | -- | -- | -- |
883
- | `aria-expanded="false"` | `.pf-v6-c-context-selector__toggle` | Indicates that the menu is hidden. |
884
- | `aria-expanded="true"` | `.pf-v6-c-context-selector__toggle` | Indicates that the menu is visible. |
885
- | `aria-hidden="true"` | `.pf-v6-c-context-selector__toggle-icon > *` | Hides the icon from assistive technologies. |
886
- | `disabled` | `button.pf-v6-c-context-selector__menu-item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
887
- | `aria-disabled="true"` | `a.pf-v6-c-context-selector__menu-item` | When the menu item uses a link element, indicates that it is unavailable. |
888
- | `tabindex="-1"` | `a.pf-v6-c-context-selector__menu-item` | When the menu item uses a link element, removes it from keyboard focus. |
889
-
890
- ### Usage
891
-
892
- | Class | Applied to | Outcome |
893
- | -- | -- | -- |
894
- | `.pf-v6-c-context-selector` | `<div>` | Initiates a context selector.|
895
- | `.pf-v6-c-context-selector__toggle` | `<button>` | Initiates a toggle. |
896
- | `.pf-v6-c-context-selector__toggle-text` | `<span>` | Initiates text inside the toggle. |
897
- | `.pf-v6-c-context-selector__toggle-icon` | `<span>` | Inititiates the toggle icon wrapper. |
898
- | `.pf-v6-c-context-selector__menu` | `<div>` | Initiaties a menu. |
899
- | `.pf-v6-c-context-selector__menu-search` | `<div>` | Initiates a container for the search input group. |
900
- | `.pf-v6-c-context-selector__menu-list` | `<ul>` | Initiaties an unordered list of menu items that sits under the input container. |
901
- | `.pf-v6-c-context-selector__menu-footer` | `<div>` | Initiaties a menu footer. |
902
- | `.pf-v6-c-context-selector__menu-list-item` | `<li>` | Initiaties a menu item. |
903
- | `.pf-m-expanded` | `.pf-v6-c-context-selector` | Modifies for the expanded state. |
904
- | `.pf-m-active` | `.pf-v6-c-context-selector__toggle` | Forces display of the active state of the toggle. |
905
- | `.pf-m-plain.pf-m-text` | `.pf-v6-c-context-selector__toggle` | Modifies the context selector toggle for plain text styles. |
906
- | `.pf-m-disabled` | `a.pf-v6-c-context-selector__menu-list-item` | Modifies an item for the disabled state.|
907
- | `.pf-m-full-height` | `.pf-v6-c-context-selector` | Modifies a context selector to full height of parent. See masthead for use. |
908
- | `.pf-m-large` | `.pf-v6-c-context-selector` | Modifies toggle height to be large. |
909
- | `.pf-m-page-insets` | `.pf-v6-c-context-selector` | Modifies toggle and menu insets to match the responsive page chrome insets. |