@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/EmptyState/examples/EmptyState.md CHANGED
@@ -24,15 +24,29 @@ cssPrefix: pf-v6-c-empty-state
24
24
 
25
25
  <div class="pf-v6-c-empty-state__footer">
26
26
  <div class="pf-v6-c-empty-state__actions">
27
- <button class="pf-v6-c-button pf-m-primary" type="button">Primary action</button>
27
+ <button class="pf-v6-c-button pf-m-primary" type="button">
28
+ <span class="pf-v6-c-button__text">Primary action</span>
29
+ </button>
28
30
  </div>
29
31
  <div class="pf-v6-c-empty-state__actions">
30
- <button class="pf-v6-c-button pf-m-link" type="button">Multiple</button>
31
- <button class="pf-v6-c-button pf-m-link" type="button">Action buttons</button>
32
- <button class="pf-v6-c-button pf-m-link" type="button">Can</button>
33
- <button class="pf-v6-c-button pf-m-link" type="button">Go here</button>
34
- <button class="pf-v6-c-button pf-m-link" type="button">In the second</button>
35
- <button class="pf-v6-c-button pf-m-link" type="button">Action area</button>
32
+ <button class="pf-v6-c-button pf-m-link" type="button">
33
+ <span class="pf-v6-c-button__text">Multiple</span>
34
+ </button>
35
+ <button class="pf-v6-c-button pf-m-link" type="button">
36
+ <span class="pf-v6-c-button__text">Action buttons</span>
37
+ </button>
38
+ <button class="pf-v6-c-button pf-m-link" type="button">
39
+ <span class="pf-v6-c-button__text">Can</span>
40
+ </button>
41
+ <button class="pf-v6-c-button pf-m-link" type="button">
42
+ <span class="pf-v6-c-button__text">Go here</span>
43
+ </button>
44
+ <button class="pf-v6-c-button pf-m-link" type="button">
45
+ <span class="pf-v6-c-button__text">In the second</span>
46
+ </button>
47
+ <button class="pf-v6-c-button pf-m-link" type="button">
48
+ <span class="pf-v6-c-button__text">Action area</span>
49
+ </button>
36
50
  </div>
37
51
  </div>
38
52
  </div>
@@ -60,24 +74,24 @@ cssPrefix: pf-v6-c-empty-state
60
74
 
61
75
  <div class="pf-v6-c-empty-state__footer">
62
76
  <div class="pf-v6-c-empty-state__actions">
63
- <button
64
- class="pf-v6-c-button pf-m-link pf-m-small"
65
- type="button"
66
- >Multiple</button>
67
- <button
68
- class="pf-v6-c-button pf-m-link pf-m-small"
69
- type="button"
70
- >Action buttons</button>
71
- <button class="pf-v6-c-button pf-m-link pf-m-small" type="button">Can</button>
72
- <button
73
- class="pf-v6-c-button pf-m-link pf-m-small"
74
- type="button"
75
- >Go here</button>
76
- <button class="pf-v6-c-button pf-m-link pf-m-small" type="button">In the</button>
77
- <button
78
- class="pf-v6-c-button pf-m-link pf-m-small"
79
- type="button"
80
- >Action area</button>
77
+ <button class="pf-v6-c-button pf-m-small pf-m-link" type="button">
78
+ <span class="pf-v6-c-button__text">Multiple</span>
79
+ </button>
80
+ <button class="pf-v6-c-button pf-m-small pf-m-link" type="button">
81
+ <span class="pf-v6-c-button__text">Action buttons</span>
82
+ </button>
83
+ <button class="pf-v6-c-button pf-m-small pf-m-link" type="button">
84
+ <span class="pf-v6-c-button__text">Can</span>
85
+ </button>
86
+ <button class="pf-v6-c-button pf-m-small pf-m-link" type="button">
87
+ <span class="pf-v6-c-button__text">Go here</span>
88
+ </button>
89
+ <button class="pf-v6-c-button pf-m-small pf-m-link" type="button">
90
+ <span class="pf-v6-c-button__text">In the</span>
91
+ </button>
92
+ <button class="pf-v6-c-button pf-m-small pf-m-link" type="button">
93
+ <span class="pf-v6-c-button__text">Action area</span>
94
+ </button>
81
95
  </div>
82
96
  </div>
83
97
  </div>
@@ -105,16 +119,30 @@ cssPrefix: pf-v6-c-empty-state
105
119
 
106
120
  <div class="pf-v6-c-empty-state__footer">
107
121
  <div class="pf-v6-c-empty-state__actions">
108
- <button class="pf-v6-c-button pf-m-primary" type="button">Primary action</button>
122
+ <button class="pf-v6-c-button pf-m-primary" type="button">
123
+ <span class="pf-v6-c-button__text">Primary action</span>
124
+ </button>
109
125
  </div>
110
126
 
111
127
  <div class="pf-v6-c-empty-state__actions">
112
- <button class="pf-v6-c-button pf-m-link" type="button">Multiple</button>
113
- <button class="pf-v6-c-button pf-m-link" type="button">Action buttons</button>
114
- <button class="pf-v6-c-button pf-m-link" type="button">Can</button>
115
- <button class="pf-v6-c-button pf-m-link" type="button">Go here</button>
116
- <button class="pf-v6-c-button pf-m-link" type="button">In the second</button>
117
- <button class="pf-v6-c-button pf-m-link" type="button">Action area</button>
128
+ <button class="pf-v6-c-button pf-m-link" type="button">
129
+ <span class="pf-v6-c-button__text">Multiple</span>
130
+ </button>
131
+ <button class="pf-v6-c-button pf-m-link" type="button">
132
+ <span class="pf-v6-c-button__text">Action buttons</span>
133
+ </button>
134
+ <button class="pf-v6-c-button pf-m-link" type="button">
135
+ <span class="pf-v6-c-button__text">Can</span>
136
+ </button>
137
+ <button class="pf-v6-c-button pf-m-link" type="button">
138
+ <span class="pf-v6-c-button__text">Go here</span>
139
+ </button>
140
+ <button class="pf-v6-c-button pf-m-link" type="button">
141
+ <span class="pf-v6-c-button__text">In the second</span>
142
+ </button>
143
+ <button class="pf-v6-c-button pf-m-link" type="button">
144
+ <span class="pf-v6-c-button__text">Action area</span>
145
+ </button>
118
146
  </div>
119
147
  </div>
120
148
  </div>
@@ -142,15 +170,29 @@ cssPrefix: pf-v6-c-empty-state
142
170
 
143
171
  <div class="pf-v6-c-empty-state__footer">
144
172
  <div class="pf-v6-c-empty-state__actions">
145
- <button class="pf-v6-c-button pf-m-primary" type="button">Primary action</button>
173
+ <button class="pf-v6-c-button pf-m-primary" type="button">
174
+ <span class="pf-v6-c-button__text">Primary action</span>
175
+ </button>
146
176
  </div>
147
177
  <div class="pf-v6-c-empty-state__actions">
148
- <button class="pf-v6-c-button pf-m-link" type="button">Multiple</button>
149
- <button class="pf-v6-c-button pf-m-link" type="button">Action buttons</button>
150
- <button class="pf-v6-c-button pf-m-link" type="button">Can</button>
151
- <button class="pf-v6-c-button pf-m-link" type="button">Go here</button>
152
- <button class="pf-v6-c-button pf-m-link" type="button">In the second</button>
153
- <button class="pf-v6-c-button pf-m-link" type="button">Action area</button>
178
+ <button class="pf-v6-c-button pf-m-link" type="button">
179
+ <span class="pf-v6-c-button__text">Multiple</span>
180
+ </button>
181
+ <button class="pf-v6-c-button pf-m-link" type="button">
182
+ <span class="pf-v6-c-button__text">Action buttons</span>
183
+ </button>
184
+ <button class="pf-v6-c-button pf-m-link" type="button">
185
+ <span class="pf-v6-c-button__text">Can</span>
186
+ </button>
187
+ <button class="pf-v6-c-button pf-m-link" type="button">
188
+ <span class="pf-v6-c-button__text">Go here</span>
189
+ </button>
190
+ <button class="pf-v6-c-button pf-m-link" type="button">
191
+ <span class="pf-v6-c-button__text">In the second</span>
192
+ </button>
193
+ <button class="pf-v6-c-button pf-m-link" type="button">
194
+ <span class="pf-v6-c-button__text">Action area</span>
195
+ </button>
154
196
  </div>
155
197
  </div>
156
198
  </div>
@@ -177,15 +219,29 @@ cssPrefix: pf-v6-c-empty-state
177
219
  >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
178
220
  <div class="pf-v6-c-empty-state__footer">
179
221
  <div class="pf-v6-c-empty-state__actions">
180
- <button class="pf-v6-c-button pf-m-primary" type="button">Primary action</button>
222
+ <button class="pf-v6-c-button pf-m-primary" type="button">
223
+ <span class="pf-v6-c-button__text">Primary action</span>
224
+ </button>
181
225
  </div>
182
226
  <div class="pf-v6-c-empty-state__actions">
183
- <button class="pf-v6-c-button pf-m-link" type="button">Multiple</button>
184
- <button class="pf-v6-c-button pf-m-link" type="button">Action buttons</button>
185
- <button class="pf-v6-c-button pf-m-link" type="button">Can</button>
186
- <button class="pf-v6-c-button pf-m-link" type="button">Go here</button>
187
- <button class="pf-v6-c-button pf-m-link" type="button">In the second</button>
188
- <button class="pf-v6-c-button pf-m-link" type="button">Action area</button>
227
+ <button class="pf-v6-c-button pf-m-link" type="button">
228
+ <span class="pf-v6-c-button__text">Multiple</span>
229
+ </button>
230
+ <button class="pf-v6-c-button pf-m-link" type="button">
231
+ <span class="pf-v6-c-button__text">Action buttons</span>
232
+ </button>
233
+ <button class="pf-v6-c-button pf-m-link" type="button">
234
+ <span class="pf-v6-c-button__text">Can</span>
235
+ </button>
236
+ <button class="pf-v6-c-button pf-m-link" type="button">
237
+ <span class="pf-v6-c-button__text">Go here</span>
238
+ </button>
239
+ <button class="pf-v6-c-button pf-m-link" type="button">
240
+ <span class="pf-v6-c-button__text">In the second</span>
241
+ </button>
242
+ <button class="pf-v6-c-button pf-m-link" type="button">
243
+ <span class="pf-v6-c-button__text">Action area</span>
244
+ </button>
189
245
  </div>
190
246
  </div>
191
247
  </div>
@@ -213,15 +269,29 @@ cssPrefix: pf-v6-c-empty-state
213
269
 
214
270
  <div class="pf-v6-c-empty-state__footer">
215
271
  <div class="pf-v6-c-empty-state__actions">
216
- <button class="pf-v6-c-button pf-m-primary" type="button">Primary action</button>
272
+ <button class="pf-v6-c-button pf-m-primary" type="button">
273
+ <span class="pf-v6-c-button__text">Primary action</span>
274
+ </button>
217
275
  </div>
218
276
  <div class="pf-v6-c-empty-state__actions">
219
- <button class="pf-v6-c-button pf-m-link" type="button">Multiple</button>
220
- <button class="pf-v6-c-button pf-m-link" type="button">Action buttons</button>
221
- <button class="pf-v6-c-button pf-m-link" type="button">Can</button>
222
- <button class="pf-v6-c-button pf-m-link" type="button">Go here</button>
223
- <button class="pf-v6-c-button pf-m-link" type="button">In the second</button>
224
- <button class="pf-v6-c-button pf-m-link" type="button">Action area</button>
277
+ <button class="pf-v6-c-button pf-m-link" type="button">
278
+ <span class="pf-v6-c-button__text">Multiple</span>
279
+ </button>
280
+ <button class="pf-v6-c-button pf-m-link" type="button">
281
+ <span class="pf-v6-c-button__text">Action buttons</span>
282
+ </button>
283
+ <button class="pf-v6-c-button pf-m-link" type="button">
284
+ <span class="pf-v6-c-button__text">Can</span>
285
+ </button>
286
+ <button class="pf-v6-c-button pf-m-link" type="button">
287
+ <span class="pf-v6-c-button__text">Go here</span>
288
+ </button>
289
+ <button class="pf-v6-c-button pf-m-link" type="button">
290
+ <span class="pf-v6-c-button__text">In the second</span>
291
+ </button>
292
+ <button class="pf-v6-c-button pf-m-link" type="button">
293
+ <span class="pf-v6-c-button__text">Action area</span>
294
+ </button>
225
295
  </div>
226
296
  </div>
227
297
  </div>
package/docs/components/ExpandableSection/examples/ExpandableSection.md CHANGED
@@ -8,16 +8,16 @@ cssPrefix: pf-v6-c-expandable-section
8
8
 
9
9
  ```html
10
10
  <div class="pf-v6-c-expandable-section">
11
- <button
12
- type="button"
13
- class="pf-v6-c-expandable-section__toggle"
14
- aria-expanded="false"
15
- >
16
- <span class="pf-v6-c-expandable-section__toggle-icon">
17
- <i class="fas fa-angle-right" aria-hidden="true"></i>
18
- </span>
19
- <span class="pf-v6-c-expandable-section__toggle-text">Show more</span>
20
- </button>
11
+ <div class="pf-v6-c-expandable-section__toggle">
12
+ <button class="pf-v6-c-button pf-m-link" type="button">
13
+ <span class="pf-v6-c-button__icon pf-m-start">
14
+ <span class="pf-v6-c-expandable-section__toggle-icon">
15
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
16
+ </span>
17
+ </span>
18
+ <span class="pf-v6-c-button__text">Show more</span>
19
+ </button>
20
+ </div>
21
21
  <div
22
22
  class="pf-v6-c-expandable-section__content"
23
23
  hidden
@@ -30,16 +30,16 @@ cssPrefix: pf-v6-c-expandable-section
30
30
 
31
31
  ```html
32
32
  <div class="pf-v6-c-expandable-section pf-m-expanded">
33
- <button
34
- type="button"
35
- class="pf-v6-c-expandable-section__toggle"
36
- aria-expanded="true"
37
- >
38
- <span class="pf-v6-c-expandable-section__toggle-icon">
39
- <i class="fas fa-angle-right" aria-hidden="true"></i>
40
- </span>
41
- <span class="pf-v6-c-expandable-section__toggle-text">Show less</span>
42
- </button>
33
+ <div class="pf-v6-c-expandable-section__toggle">
34
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded="true">
35
+ <span class="pf-v6-c-button__icon pf-m-start">
36
+ <span class="pf-v6-c-expandable-section__toggle-icon">
37
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
38
+ </span>
39
+ </span>
40
+ <span class="pf-v6-c-button__text">Show less</span>
41
+ </button>
42
+ </div>
43
43
  <div
44
44
  class="pf-v6-c-expandable-section__content"
45
45
  >This content is visible only when the component is expanded.</div>
@@ -51,16 +51,16 @@ cssPrefix: pf-v6-c-expandable-section
51
51
 
52
52
  ```html
53
53
  <div class="pf-v6-c-expandable-section pf-m-expanded pf-m-indented">
54
- <button
55
- type="button"
56
- class="pf-v6-c-expandable-section__toggle"
57
- aria-expanded="true"
58
- >
59
- <span class="pf-v6-c-expandable-section__toggle-icon">
60
- <i class="fas fa-angle-right" aria-hidden="true"></i>
61
- </span>
62
- <span class="pf-v6-c-expandable-section__toggle-text">Show less</span>
63
- </button>
54
+ <div class="pf-v6-c-expandable-section__toggle">
55
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded="true">
56
+ <span class="pf-v6-c-button__icon pf-m-start">
57
+ <span class="pf-v6-c-expandable-section__toggle-icon">
58
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
59
+ </span>
60
+ </span>
61
+ <span class="pf-v6-c-button__text">Show less</span>
62
+ </button>
63
+ </div>
64
64
  <div
65
65
  class="pf-v6-c-expandable-section__content"
66
66
  >This content is visible only when the component is expanded.</div>
@@ -72,16 +72,16 @@ cssPrefix: pf-v6-c-expandable-section
72
72
 
73
73
  ```html
74
74
  <div class="pf-v6-c-expandable-section pf-m-display-lg pf-m-limit-width">
75
- <button
76
- type="button"
77
- class="pf-v6-c-expandable-section__toggle"
78
- aria-expanded="false"
79
- >
80
- <span class="pf-v6-c-expandable-section__toggle-icon">
81
- <i class="fas fa-angle-right" aria-hidden="true"></i>
82
- </span>
83
- <span class="pf-v6-c-expandable-section__toggle-text">Show more</span>
84
- </button>
75
+ <div class="pf-v6-c-expandable-section__toggle">
76
+ <button class="pf-v6-c-button pf-m-link" type="button">
77
+ <span class="pf-v6-c-button__icon pf-m-start">
78
+ <span class="pf-v6-c-expandable-section__toggle-icon">
79
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
80
+ </span>
81
+ </span>
82
+ <span class="pf-v6-c-button__text">Show more</span>
83
+ </button>
84
+ </div>
85
85
  <div
86
86
  class="pf-v6-c-expandable-section__content"
87
87
  hidden
@@ -96,16 +96,16 @@ cssPrefix: pf-v6-c-expandable-section
96
96
  <div
97
97
  class="pf-v6-c-expandable-section pf-m-expanded pf-m-display-lg pf-m-limit-width"
98
98
  >
99
- <button
100
- type="button"
101
- class="pf-v6-c-expandable-section__toggle"
102
- aria-expanded="true"
103
- >
104
- <span class="pf-v6-c-expandable-section__toggle-icon">
105
- <i class="fas fa-angle-right" aria-hidden="true"></i>
106
- </span>
107
- <span class="pf-v6-c-expandable-section__toggle-text">Show less</span>
108
- </button>
99
+ <div class="pf-v6-c-expandable-section__toggle">
100
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded="true">
101
+ <span class="pf-v6-c-button__icon pf-m-start">
102
+ <span class="pf-v6-c-expandable-section__toggle-icon">
103
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
104
+ </span>
105
+ </span>
106
+ <span class="pf-v6-c-button__text">Show less</span>
107
+ </button>
108
+ </div>
109
109
  <div
110
110
  class="pf-v6-c-expandable-section__content"
111
111
  >This content is visible only when the component is expanded.</div>
@@ -119,16 +119,16 @@ cssPrefix: pf-v6-c-expandable-section
119
119
  <div
120
120
  class="pf-v6-c-expandable-section pf-m-expanded pf-m-display-lg pf-m-limit-width pf-m-indented"
121
121
  >
122
- <button
123
- type="button"
124
- class="pf-v6-c-expandable-section__toggle"
125
- aria-expanded="true"
126
- >
127
- <span class="pf-v6-c-expandable-section__toggle-icon">
128
- <i class="fas fa-angle-right" aria-hidden="true"></i>
129
- </span>
130
- <span class="pf-v6-c-expandable-section__toggle-text">Show less</span>
131
- </button>
122
+ <div class="pf-v6-c-expandable-section__toggle">
123
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded="true">
124
+ <span class="pf-v6-c-button__icon pf-m-start">
125
+ <span class="pf-v6-c-expandable-section__toggle-icon">
126
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
127
+ </span>
128
+ </span>
129
+ <span class="pf-v6-c-button__text">Show less</span>
130
+ </button>
131
+ </div>
132
132
  <div
133
133
  class="pf-v6-c-expandable-section__content"
134
134
  >This content is visible only when the component is expanded.</div>
@@ -151,17 +151,23 @@ cssPrefix: pf-v6-c-expandable-section
151
151
 
152
152
  <div class="pf-v6-l-stack__item">
153
153
  <div class="pf-v6-c-expandable-section pf-m-expanded">
154
- <button
155
- type="button"
156
- class="pf-v6-c-expandable-section__toggle"
157
- aria-expanded="true"
158
- aria-controls="detached-toggle-content"
159
- >
160
- <span class="pf-v6-c-expandable-section__toggle-icon pf-m-expand-top">
161
- <i class="fas fa-angle-right" aria-hidden="true"></i>
162
- </span>
163
- <span class="pf-v6-c-expandable-section__toggle-text">Show less</span>
164
- </button>
154
+ <div class="pf-v6-c-expandable-section__toggle">
155
+ <button
156
+ class="pf-v6-c-button pf-m-link"
157
+ type="button"
158
+ aria-expanded="true"
159
+ aria-controls="detached-toggle-content"
160
+ >
161
+ <span class="pf-v6-c-button__icon pf-m-start">
162
+ <span
163
+ class="pf-v6-c-expandable-section__toggle-icon pf-m-expand-top"
164
+ >
165
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
166
+ </span>
167
+ </span>
168
+ <span class="pf-v6-c-button__text">Show less</span>
169
+ </button>
170
+ </div>
165
171
  </div>
166
172
  </div>
167
173
  </div>
@@ -175,13 +181,11 @@ cssPrefix: pf-v6-c-expandable-section
175
181
  <div
176
182
  class="pf-v6-c-expandable-section__content"
177
183
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus, diam vitae eleifend consequat, metus sapien posuere quam, ut tincidunt nunc enim eget sapien. Mauris ac dui imperdiet dolor dignissim efficitur laoreet quis erat. Proin turpis leo, malesuada eget urna et, tristique mollis odio. Ut mattis nulla lorem, elementum hendrerit nunc molestie vitae. Proin massa sem, bibendum id urna in, viverra porta neque. Ut ut mi ac lacus rhoncus mollis id quis sem. Suspendisse non justo elementum, dictum eros nec, hendrerit sapien. Mauris aliquet, est sit amet tincidunt vehicula, purus est hendrerit arcu, vitae egestas odio lorem ut lacus. In et neque non metus viverra rhoncus quis non purus. Integer id venenatis tortor. Nulla sollicitudin convallis tellus, at porta eros volutpat in. Curabitur rhoncus rhoncus nisi, sit amet tincidunt dolor efficitur vitae. Integer purus neque, porta non odio lobortis, accumsan elementum risus. Pellentesque viverra id lacus a cursus. Etiam eu pulvinar risus. Etiam ultrices nec urna id consequat.</div>
178
- <button
179
- type="button"
180
- class="pf-v6-c-expandable-section__toggle"
181
- aria-expanded="false"
182
- >
183
- <span class="pf-v6-c-expandable-section__toggle-text">Show more</span>
184
- </button>
184
+ <div class="pf-v6-c-expandable-section__toggle">
185
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
186
+ <span class="pf-v6-c-button__text">Show more</span>
187
+ </button>
188
+ </div>
185
189
  </div>
186
190
 
187
191
  ```
@@ -193,13 +197,15 @@ cssPrefix: pf-v6-c-expandable-section
193
197
  <div
194
198
  class="pf-v6-c-expandable-section__content"
195
199
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus, diam vitae eleifend consequat, metus sapien posuere quam, ut tincidunt nunc enim eget sapien. Mauris ac dui imperdiet dolor dignissim efficitur laoreet quis erat. Proin turpis leo, malesuada eget urna et, tristique mollis odio. Ut mattis nulla lorem, elementum hendrerit nunc molestie vitae. Proin massa sem, bibendum id urna in, viverra porta neque. Ut ut mi ac lacus rhoncus mollis id quis sem. Suspendisse non justo elementum, dictum eros nec, hendrerit sapien. Mauris aliquet, est sit amet tincidunt vehicula, purus est hendrerit arcu, vitae egestas odio lorem ut lacus. In et neque non metus viverra rhoncus quis non purus. Integer id venenatis tortor. Nulla sollicitudin convallis tellus, at porta eros volutpat in. Curabitur rhoncus rhoncus nisi, sit amet tincidunt dolor efficitur vitae. Integer purus neque, porta non odio lobortis, accumsan elementum risus. Pellentesque viverra id lacus a cursus. Etiam eu pulvinar risus. Etiam ultrices nec urna id consequat.</div>
196
- <button
197
- type="button"
198
- class="pf-v6-c-expandable-section__toggle"
199
- aria-expanded="true"
200
- >
201
- <span class="pf-v6-c-expandable-section__toggle-text">Show less</span>
202
- </button>
200
+ <div class="pf-v6-c-expandable-section__toggle">
201
+ <button
202
+ class="pf-v6-c-button pf-m-inline pf-m-link"
203
+ type="button"
204
+ aria-expanded="true"
205
+ >
206
+ <span class="pf-v6-c-button__text">Show less</span>
207
+ </button>
208
+ </div>
203
209
  </div>
204
210
 
205
211
  ```
@@ -210,20 +216,19 @@ cssPrefix: pf-v6-c-expandable-section
210
216
 
211
217
  | Attribute | Applied to | Outcome |
212
218
  | -- | -- | -- |
213
- | `aria-expanded="true"` | `.pf-v6-c-expandable-section__toggle` | Indicates that the expandable section content is visible. **Required** |
214
- | `aria-expanded="false"` | `.pf-v6-c-expandable-section__toggle` | Indicates the the expandable section content is hidden. **Required** |
219
+ | `aria-expanded="true"` | `.pf-v6-c-expandable-section__toggle .pf-v6-c-button` | Indicates that the expandable section content is visible. **Required** |
220
+ | `aria-expanded="false"` | `.pf-v6-c-expandable-section__toggle .pf-v6-c-button` | Indicates the the expandable section content is hidden. **Required** |
215
221
  | `hidden` | `.pf-v6-c-expandable-section__content` | Indicates that the expandable section content element is hidden. Use with `aria-expanded="false"` **Required** |
216
222
  | `aria-hidden="true"` | `.pf-v6-c-expandable-section__toggle-icon` | Hides the icon from screen readers. **Required** |
217
- | `aria-controls="[id of content element]"` | `.pf-v6-c-expandable-section.pf-m-detached .pf-v6-c-expandable-section__toggle` | Identifies the element controlled by the toggle button. **Required** |
218
- | `id` | `.pf-v6-c-expandable-section.pf-m-detached .pf-v6-c-expandable-section__content` | Gives the content an `id` for use with `aria-controls` on `.pf-v6-c-expandable-section__toggle`. **Required** |
223
+ | `aria-controls="[id of content element]"` | `.pf-v6-c-expandable-section.pf-m-detached .pf-v6-c-expandable-section__toggle .pf-v6-c-button` | Identifies the element controlled by the toggle button. **Required** |
224
+ | `id` | `.pf-v6-c-expandable-section.pf-m-detached .pf-v6-c-expandable-section__content` | Gives the content an `id` for use with `aria-controls` on `.pf-v6-c-expandable-section__toggle .pf-v6-c-button`. **Required** |
219
225
 
220
226
  ### Usage
221
227
 
222
228
  | Class | Applied to | Outcome |
223
229
  | -- | -- | -- |
224
230
  | `.pf-v6-c-expandable-section` | `<div>` | Initiates the expandable section component. **Required** |
225
- | `.pf-v6-c-expandable-section__toggle` | `<button>` | Initiates the expandable section toggle. **Required** |
226
- | `.pf-v6-c-expandable-section__toggle-text` | `<span>` | Initiates the expandable toggle text. **Required** |
231
+ | `.pf-v6-c-expandable-section__toggle` | `<div>` | Initiates the expandable toggle wrapper. **Required** |
227
232
  | `.pf-v6-c-expandable-section__toggle-icon` | `<span>` | Initiates the expandable toggle icon. **Required** |
228
233
  | `.pf-v6-c-expandable-section__content` | `<div>` | Initiates the expandable section content. **Required** |
229
234
  | `.pf-m-expanded` | `.pf-v6-c-expandable-section` | Modifies the component for the expanded state. |
package/docs/components/FileUpload/examples/FileUpload.md CHANGED
@@ -28,10 +28,14 @@ cssPrefix: pf-v6-c-file-upload
28
28
  class="pf-v6-c-button pf-m-control"
29
29
  type="button"
30
30
  id="basic-file-upload-browse"
31
- >Upload</button>
31
+ >
32
+ <span class="pf-v6-c-button__text">Upload</span>
33
+ </button>
32
34
  </div>
33
35
  <div class="pf-v6-c-input-group__item">
34
- <button class="pf-v6-c-button pf-m-control" type="button" disabled>Clear</button>
36
+ <button class="pf-v6-c-button pf-m-control" type="button" disabled>
37
+ <span class="pf-v6-c-button__text">Clear</span>
38
+ </button>
35
39
  </div>
36
40
  </div>
37
41
  </div>
@@ -72,10 +76,14 @@ cssPrefix: pf-v6-c-file-upload
72
76
  type="button"
73
77
  id="file-upload-helper-text-browse"
74
78
  aria-describedby="helper-text-example"
75
- >Upload</button>
79
+ >
80
+ <span class="pf-v6-c-button__text">Upload</span>
81
+ </button>
76
82
  </div>
77
83
  <div class="pf-v6-c-input-group__item">
78
- <button class="pf-v6-c-button pf-m-control" type="button" disabled>Clear</button>
84
+ <button class="pf-v6-c-button pf-m-control" type="button" disabled>
85
+ <span class="pf-v6-c-button__text">Clear</span>
86
+ </button>
79
87
  </div>
80
88
  </div>
81
89
  </div>
@@ -122,10 +130,14 @@ cssPrefix: pf-v6-c-file-upload
122
130
  class="pf-v6-c-button pf-m-control"
123
131
  type="button"
124
132
  id="browsed-file-upload-complete-browse"
125
- >Upload</button>
133
+ >
134
+ <span class="pf-v6-c-button__text">Upload</span>
135
+ </button>
126
136
  </div>
127
137
  <div class="pf-v6-c-input-group__item">
128
- <button class="pf-v6-c-button pf-m-control" type="button">Clear</button>
138
+ <button class="pf-v6-c-button pf-m-control" type="button">
139
+ <span class="pf-v6-c-button__text">Clear</span>
140
+ </button>
129
141
  </div>
130
142
  </div>
131
143
  </div>
@@ -168,10 +180,14 @@ cssPrefix: pf-v6-c-file-upload
168
180
  class="pf-v6-c-button pf-m-control"
169
181
  type="button"
170
182
  id="drop-file-browse"
171
- >Upload</button>
183
+ >
184
+ <span class="pf-v6-c-button__text">Upload</span>
185
+ </button>
172
186
  </div>
173
187
  <div class="pf-v6-c-input-group__item">
174
- <button class="pf-v6-c-button pf-m-control" type="button">Clear</button>
188
+ <button class="pf-v6-c-button pf-m-control" type="button">
189
+ <span class="pf-v6-c-button__text">Clear</span>
190
+ </button>
175
191
  </div>
176
192
  </div>
177
193
  </div>
@@ -213,10 +229,14 @@ cssPrefix: pf-v6-c-file-upload
213
229
  class="pf-v6-c-button pf-m-control"
214
230
  type="button"
215
231
  id="drag-file-hover-component-browse"
216
- >Upload</button>
232
+ >
233
+ <span class="pf-v6-c-button__text">Upload</span>
234
+ </button>
217
235
  </div>
218
236
  <div class="pf-v6-c-input-group__item">
219
- <button class="pf-v6-c-button pf-m-control" type="button" disabled>Clear</button>
237
+ <button class="pf-v6-c-button pf-m-control" type="button" disabled>
238
+ <span class="pf-v6-c-button__text">Clear</span>
239
+ </button>
220
240
  </div>
221
241
  </div>
222
242
  </div>
@@ -260,10 +280,14 @@ cssPrefix: pf-v6-c-file-upload
260
280
  type="button"
261
281
  id="file-upload-error-browse"
262
282
  aria-describedby="with-error-example-helper-text"
263
- >Upload</button>
283
+ >
284
+ <span class="pf-v6-c-button__text">Upload</span>
285
+ </button>
264
286
  </div>
265
287
  <div class="pf-v6-c-input-group__item">
266
- <button class="pf-v6-c-button pf-m-control" type="button">Clear</button>
288
+ <button class="pf-v6-c-button pf-m-control" type="button">
289
+ <span class="pf-v6-c-button__text">Clear</span>
290
+ </button>
267
291
  </div>
268
292
  </div>
269
293
  </div>
@@ -334,10 +358,14 @@ cssPrefix: pf-v6-c-file-upload
334
358
  type="button"
335
359
  disabled
336
360
  id="file-upload-loading-browse"
337
- >Upload</button>
361
+ >
362
+ <span class="pf-v6-c-button__text">Upload</span>
363
+ </button>
338
364
  </div>
339
365
  <div class="pf-v6-c-input-group__item">
340
- <button class="pf-v6-c-button pf-m-control" type="button">Clear</button>
366
+ <button class="pf-v6-c-button pf-m-control" type="button">
367
+ <span class="pf-v6-c-button__text">Clear</span>
368
+ </button>
341
369
  </div>
342
370
  </div>
343
371
  </div>