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

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