@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.70

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 (382) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/README.md +13 -3
  3. package/assets/icons/iconUnicodes.json +1 -0
  4. package/assets/images/PF-Backdrop.svg +1 -0
  5. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  6. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  7. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  8. package/assets/images/PF-IconLogo-color.svg +17 -0
  9. package/assets/images/PF-IconLogo.svg +17 -0
  10. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  11. package/assets/images/pf-background.svg +22 -0
  12. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  13. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  14. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  15. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  16. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  17. package/assets/images/pf_logo_white.hbs +35 -0
  18. package/assets/images/pf_logo_white.svg +38 -0
  19. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  20. package/assets/pficon/pficon.scss +6 -129
  21. package/base/_common.scss +29 -4
  22. package/base/_globals.scss +5 -7
  23. package/base/_variables.scss +8 -6
  24. package/base/patternfly-common.css +24 -6
  25. package/base/patternfly-globals.css +5 -4
  26. package/base/patternfly-icons.css +5 -1
  27. package/base/patternfly-pf-icons.css +5 -1
  28. package/base/patternfly-variables.css +859 -833
  29. package/base/tokens/_tokens-dark.scss +306 -284
  30. package/base/tokens/_tokens-default.scss +415 -329
  31. package/base/tokens/_tokens-font.scss +41 -46
  32. package/base/tokens/_tokens-palette.scss +68 -68
  33. package/base/tokens/_workspace-overrides.scss +7 -0
  34. package/components/AboutModalBox/about-modal-box.css +78 -104
  35. package/components/AboutModalBox/about-modal-box.scss +62 -74
  36. package/components/Accordion/accordion.css +96 -175
  37. package/components/Accordion/accordion.scss +106 -193
  38. package/components/ActionList/action-list.css +18 -17
  39. package/components/ActionList/action-list.scss +26 -16
  40. package/components/Alert/alert-group.css +27 -20
  41. package/components/Alert/alert-group.scss +27 -20
  42. package/components/Alert/alert.css +74 -95
  43. package/components/Alert/alert.scss +76 -89
  44. package/components/AppLauncher/app-launcher.css +32 -23
  45. package/components/AppLauncher/app-launcher.scss +32 -23
  46. package/components/Avatar/avatar.css +10 -13
  47. package/components/Avatar/avatar.scss +10 -17
  48. package/components/BackToTop/back-to-top.css +17 -16
  49. package/components/BackToTop/back-to-top.scss +14 -14
  50. package/components/Backdrop/backdrop.css +8 -4
  51. package/components/Backdrop/backdrop.scss +7 -4
  52. package/components/BackgroundImage/background-image.css +11 -4
  53. package/components/BackgroundImage/background-image.scss +13 -4
  54. package/components/Badge/badge.css +25 -17
  55. package/components/Badge/badge.scss +27 -19
  56. package/components/Banner/banner.css +95 -69
  57. package/components/Banner/banner.scss +100 -34
  58. package/components/Breadcrumb/breadcrumb.css +28 -19
  59. package/components/Breadcrumb/breadcrumb.scss +26 -19
  60. package/components/Button/button.css +417 -359
  61. package/components/Button/button.scss +472 -484
  62. package/components/CalendarMonth/calendar-month.css +25 -15
  63. package/components/CalendarMonth/calendar-month.scss +23 -15
  64. package/components/Card/card.css +117 -203
  65. package/components/Card/card.scss +137 -246
  66. package/components/Check/check.css +25 -22
  67. package/components/Check/check.scss +26 -24
  68. package/components/Chip/chip-group.css +6 -6
  69. package/components/Chip/chip-group.scss +6 -6
  70. package/components/Chip/chip.css +16 -9
  71. package/components/Chip/chip.scss +17 -9
  72. package/components/ClipboardCopy/clipboard-copy.css +47 -41
  73. package/components/ClipboardCopy/clipboard-copy.scss +50 -34
  74. package/components/CodeBlock/code-block.css +24 -12
  75. package/components/CodeBlock/code-block.scss +24 -13
  76. package/components/CodeEditor/code-editor.css +31 -22
  77. package/components/CodeEditor/code-editor.scss +30 -21
  78. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  79. package/components/Content/content.css +40 -37
  80. package/components/Content/content.scss +40 -37
  81. package/components/ContextSelector/context-selector.css +41 -26
  82. package/components/ContextSelector/context-selector.scss +40 -25
  83. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  84. package/components/DataList/data-list-grid.css +21 -21
  85. package/components/DataList/data-list-grid.scss +3 -3
  86. package/components/DataList/data-list.css +165 -209
  87. package/components/DataList/data-list.scss +138 -185
  88. package/components/DatePicker/date-picker.css +8 -8
  89. package/components/DatePicker/date-picker.scss +8 -8
  90. package/components/DescriptionList/description-list.css +47 -39
  91. package/components/DescriptionList/description-list.scss +33 -30
  92. package/components/Divider/divider.css +97 -177
  93. package/components/Divider/divider.scss +60 -79
  94. package/components/DragDrop/drag-drop.css +26 -22
  95. package/components/DragDrop/drag-drop.scss +26 -25
  96. package/components/Drawer/drawer.css +216 -158
  97. package/components/Drawer/drawer.scss +199 -150
  98. package/components/Dropdown/dropdown.css +76 -69
  99. package/components/Dropdown/dropdown.scss +67 -62
  100. package/components/DualListSelector/dual-list-selector.css +29 -15
  101. package/components/DualListSelector/dual-list-selector.scss +30 -15
  102. package/components/EmptyState/empty-state.css +64 -38
  103. package/components/EmptyState/empty-state.scss +70 -38
  104. package/components/ExpandableSection/expandable-section.css +75 -66
  105. package/components/ExpandableSection/expandable-section.scss +82 -80
  106. package/components/FileUpload/file-upload.css +31 -43
  107. package/components/FileUpload/file-upload.scss +31 -49
  108. package/components/Form/form.css +111 -154
  109. package/components/Form/form.scss +101 -160
  110. package/components/FormControl/form-control.css +95 -111
  111. package/components/FormControl/form-control.scss +97 -92
  112. package/components/HelperText/helper-text.css +29 -35
  113. package/components/HelperText/helper-text.scss +31 -41
  114. package/components/Hint/hint.css +37 -27
  115. package/components/Hint/hint.scss +37 -30
  116. package/components/Icon/icon.css +155 -19
  117. package/components/Icon/icon.scss +188 -21
  118. package/components/InlineEdit/inline-edit.css +12 -11
  119. package/components/InlineEdit/inline-edit.scss +12 -11
  120. package/components/InputGroup/input-group.css +32 -42
  121. package/components/InputGroup/input-group.scss +31 -33
  122. package/components/JumpLinks/jump-links.css +61 -58
  123. package/components/JumpLinks/jump-links.scss +61 -60
  124. package/components/Label/label-group.css +48 -50
  125. package/components/Label/label-group.scss +48 -51
  126. package/components/Label/label.css +382 -363
  127. package/components/Label/label.scss +441 -356
  128. package/components/List/list.css +25 -25
  129. package/components/List/list.scss +26 -26
  130. package/components/LogViewer/log-viewer.css +14 -14
  131. package/components/LogViewer/log-viewer.scss +14 -14
  132. package/components/Login/login.css +104 -122
  133. package/components/Login/login.scss +92 -91
  134. package/components/Masthead/masthead.css +262 -506
  135. package/components/Masthead/masthead.scss +123 -289
  136. package/components/Menu/menu.css +82 -65
  137. package/components/Menu/menu.scss +85 -69
  138. package/components/MenuToggle/menu-toggle.css +37 -31
  139. package/components/MenuToggle/menu-toggle.scss +37 -33
  140. package/components/ModalBox/modal-box.css +76 -69
  141. package/components/ModalBox/modal-box.scss +74 -70
  142. package/components/MultipleFileUpload/multiple-file-upload.css +87 -57
  143. package/components/MultipleFileUpload/multiple-file-upload.scss +92 -60
  144. package/components/Nav/nav.css +248 -899
  145. package/components/Nav/nav.scss +304 -1059
  146. package/components/Nav/themes/dark/nav.scss +2 -2
  147. package/components/NotificationBadge/notification-badge.css +66 -85
  148. package/components/NotificationBadge/notification-badge.scss +72 -103
  149. package/components/NotificationDrawer/notification-drawer.css +130 -128
  150. package/components/NotificationDrawer/notification-drawer.scss +130 -129
  151. package/components/NumberInput/number-input.css +10 -10
  152. package/components/NumberInput/number-input.scss +9 -14
  153. package/components/OptionsMenu/options-menu.css +43 -31
  154. package/components/OptionsMenu/options-menu.scss +43 -31
  155. package/components/OverflowMenu/overflow-menu.css +17 -47
  156. package/components/OverflowMenu/overflow-menu.scss +27 -65
  157. package/components/Page/page.css +182 -232
  158. package/components/Page/page.scss +130 -195
  159. package/components/Pagination/pagination.css +74 -121
  160. package/components/Pagination/pagination.scss +55 -125
  161. package/components/Panel/panel.css +40 -30
  162. package/components/Panel/panel.scss +42 -33
  163. package/components/Popover/popover.css +108 -87
  164. package/components/Popover/popover.scss +120 -109
  165. package/components/Progress/progress.css +40 -52
  166. package/components/Progress/progress.scss +48 -62
  167. package/components/ProgressStepper/progress-stepper.css +98 -89
  168. package/components/ProgressStepper/progress-stepper.scss +90 -84
  169. package/components/Radio/radio.css +30 -23
  170. package/components/Radio/radio.scss +31 -25
  171. package/components/Select/select.css +56 -47
  172. package/components/Select/select.scss +56 -47
  173. package/components/Sidebar/sidebar.css +31 -14
  174. package/components/Sidebar/sidebar.scss +34 -16
  175. package/components/SimpleList/simple-list.css +45 -56
  176. package/components/SimpleList/simple-list.scss +51 -55
  177. package/components/Skeleton/skeleton.css +24 -25
  178. package/components/Skeleton/skeleton.scss +21 -26
  179. package/components/SkipToContent/skip-to-content.css +9 -6
  180. package/components/SkipToContent/skip-to-content.scss +8 -6
  181. package/components/Slider/slider.css +80 -55
  182. package/components/Slider/slider.scss +96 -65
  183. package/components/Spinner/spinner.css +17 -34
  184. package/components/Spinner/spinner.scss +19 -47
  185. package/components/Switch/switch.css +49 -41
  186. package/components/Switch/switch.scss +51 -42
  187. package/components/TabContent/tab-content.css +21 -12
  188. package/components/TabContent/tab-content.scss +22 -15
  189. package/components/Table/table-grid.css +256 -195
  190. package/components/Table/table-grid.scss +53 -39
  191. package/components/Table/table-scrollable.css +4 -4
  192. package/components/Table/table-scrollable.scss +6 -4
  193. package/components/Table/table-tree-view.css +112 -105
  194. package/components/Table/table-tree-view.scss +38 -33
  195. package/components/Table/table.css +105 -89
  196. package/components/Table/table.scss +105 -89
  197. package/components/Tabs/tabs.css +210 -214
  198. package/components/Tabs/tabs.scss +222 -254
  199. package/components/TextInputGroup/text-input-group.css +15 -15
  200. package/components/TextInputGroup/text-input-group.scss +15 -15
  201. package/components/Tile/tile.css +47 -88
  202. package/components/Tile/tile.scss +45 -91
  203. package/components/Timestamp/timestamp.css +12 -9
  204. package/components/Timestamp/timestamp.scss +11 -10
  205. package/components/Title/title.css +70 -19
  206. package/components/Title/title.scss +90 -20
  207. package/components/ToggleGroup/toggle-group.css +68 -59
  208. package/components/ToggleGroup/toggle-group.scss +72 -57
  209. package/components/Toolbar/toolbar.css +2553 -1054
  210. package/components/Toolbar/toolbar.scss +234 -516
  211. package/components/Tooltip/tooltip.css +74 -44
  212. package/components/Tooltip/tooltip.scss +93 -77
  213. package/components/TreeView/tree-view.css +48 -27
  214. package/components/TreeView/tree-view.scss +50 -28
  215. package/components/Truncate/truncate.css +13 -0
  216. package/components/Truncate/truncate.scss +19 -3
  217. package/components/Wizard/wizard.css +57 -36
  218. package/components/Wizard/wizard.scss +57 -36
  219. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  220. package/docs/components/Accordion/examples/Accordion.md +614 -416
  221. package/docs/components/ActionList/examples/ActionList.md +73 -22
  222. package/docs/components/Alert/examples/Alert.md +3 -3
  223. package/docs/components/Avatar/examples/Avatar.md +5 -19
  224. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  225. package/docs/components/Badge/examples/Badge.md +21 -0
  226. package/docs/components/Banner/examples/Banner.md +48 -25
  227. package/docs/components/Brand/examples/Brand.css +12 -0
  228. package/docs/components/Brand/examples/Brand.md +51 -32
  229. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  230. package/docs/components/Button/examples/Button.css +6 -2
  231. package/docs/components/Button/examples/Button.md +1425 -87
  232. package/docs/components/Card/examples/Card.md +565 -148
  233. package/docs/components/Check/examples/Check.md +71 -58
  234. package/docs/components/Chip/examples/Chip.md +1 -1
  235. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  236. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  237. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  238. package/docs/components/Content/examples/Content.md +5 -5
  239. package/docs/components/Divider/examples/Divider.css +3 -1
  240. package/docs/components/Divider/examples/Divider.md +4 -5
  241. package/docs/components/DragDrop/examples/DragDrop.css +3 -3
  242. package/docs/components/Drawer/examples/Drawer.md +294 -256
  243. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  244. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  245. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  246. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  247. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  248. package/docs/components/Form/examples/Form.md +134 -89
  249. package/docs/components/Icon/examples/Icon.md +82 -11
  250. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  251. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  252. package/docs/components/Label/examples/Label.css +4 -0
  253. package/docs/components/Label/examples/Label.md +3091 -704
  254. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  255. package/docs/components/LogViewer/examples/LogViewer.md +300 -210
  256. package/docs/components/Login/examples/Login.md +10 -5
  257. package/docs/components/Masthead/examples/masthead.md +443 -65
  258. package/docs/components/Menu/examples/Menu.css +8 -0
  259. package/docs/components/Menu/examples/Menu.md +594 -543
  260. package/docs/components/MenuToggle/examples/MenuToggle.md +109 -96
  261. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  262. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  263. package/docs/components/Nav/examples/Navigation.css +3 -42
  264. package/docs/components/Nav/examples/Navigation.md +305 -353
  265. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  266. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  267. package/docs/components/Page/examples/Page.css +0 -8
  268. package/docs/components/Page/examples/Page.md +22 -21
  269. package/docs/components/Pagination/examples/Pagination.md +663 -637
  270. package/docs/components/Panel/examples/Panel.md +12 -0
  271. package/docs/components/Popover/examples/Popover.css +4 -9
  272. package/docs/components/Popover/examples/Popover.md +1 -1
  273. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  274. package/docs/components/Radio/examples/Radio.md +62 -54
  275. package/docs/components/Select/deprecated/Select.md +184 -177
  276. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  277. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  278. package/docs/components/TabContent/examples/TabContent.md +10 -10
  279. package/docs/components/Table/examples/Table.css +2 -2
  280. package/docs/components/Table/examples/Table.md +10 -10
  281. package/docs/components/Tabs/examples/Tabs.css +1 -1
  282. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  283. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  284. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  285. package/docs/components/Tile/examples/Tile.css +1 -1
  286. package/docs/components/Tile/examples/Tile.md +264 -144
  287. package/docs/components/Title/examples/Title.md +18 -0
  288. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  289. package/docs/components/Toolbar/examples/Toolbar.md +1211 -3487
  290. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  291. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  292. package/docs/components/Truncate/examples/Truncate.css +2 -2
  293. package/docs/components/Truncate/examples/Truncate.md +2 -2
  294. package/docs/demos/AboutModal/examples/AboutModal.md +104 -31
  295. package/docs/demos/Alert/examples/Alert.md +330 -87
  296. package/docs/demos/BackToTop/examples/BackToTop.md +102 -29
  297. package/docs/demos/Banner/examples/Banner.md +211 -60
  298. package/docs/demos/Card/examples/Card.css +3 -3
  299. package/docs/demos/Card/examples/Card.md +28 -12
  300. package/docs/demos/CardView/examples/CardView.md +265 -207
  301. package/docs/demos/ContextSelector/examples/ContextSelector.md +377 -94
  302. package/docs/demos/Dashboard/examples/Dashboard.md +105 -32
  303. package/docs/demos/DataList/examples/DataList.md +1002 -935
  304. package/docs/demos/DescriptionList/examples/DescriptionList.md +306 -87
  305. package/docs/demos/Drawer/examples/Drawer.md +640 -251
  306. package/docs/demos/Form/examples/BasicForms.md +138 -84
  307. package/docs/demos/JumpLinks/examples/JumpLinks.md +917 -385
  308. package/docs/demos/Masthead/examples/Masthead.md +786 -342
  309. package/docs/demos/Modal/examples/Modal.md +645 -198
  310. package/docs/demos/Nav/examples/Nav.md +691 -902
  311. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +515 -145
  312. package/docs/demos/Page/examples/Page.md +942 -273
  313. package/docs/demos/Page/examples/Penta.md +66 -26
  314. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
  315. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  316. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1333 -946
  317. package/docs/demos/Skeleton/examples/Skeleton.md +109 -64
  318. package/docs/demos/Table/examples/Table.md +3857 -3418
  319. package/docs/demos/Tabs/examples/Tabs.md +664 -215
  320. package/docs/demos/Toolbar/examples/Toolbar.css +15 -0
  321. package/docs/demos/Toolbar/examples/Toolbar.md +1313 -1475
  322. package/docs/demos/Wizard/examples/Wizard.md +918 -261
  323. package/docs/layouts/Flex/examples/Flex.md +16 -16
  324. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  325. package/icons/pficons.mjs +1 -0
  326. package/layouts/Flex/flex.css +115 -43
  327. package/layouts/Flex/flex.scss +20 -8
  328. package/package.json +36 -32
  329. package/patternfly-addons.css +732 -972
  330. package/patternfly-base-no-globals-theme-dark-unversioned.css +895 -847
  331. package/patternfly-base-no-globals.css +895 -847
  332. package/patternfly-base-theme-dark-unversioned.css +899 -850
  333. package/patternfly-base.css +899 -850
  334. package/patternfly-no-globals.css +9935 -8997
  335. package/patternfly-theme-dark-unversioned.css +9940 -9001
  336. package/patternfly.css +9940 -9001
  337. package/patternfly.min.css +1 -1
  338. package/patternfly.min.css.map +1 -1
  339. package/sass-utilities/functions.scss +6 -0
  340. package/sass-utilities/mixins.scss +80 -2
  341. package/sass-utilities/scss-variables.scss +8 -8
  342. package/sass-utilities/themes/dark/mixins.scss +3 -1
  343. package/utilities/Accessibility/accessibility.css +12 -12
  344. package/utilities/Spacing/spacing.css +720 -960
  345. package/utilities/Spacing/spacing.scss +4 -8
  346. package/base/themes/dark/_variables.scss +0 -102
  347. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  348. package/components/Accordion/themes/dark/accordion.scss +0 -9
  349. package/components/Alert/themes/dark/alert.scss +0 -17
  350. package/components/Badge/themes/dark/badge.scss +0 -9
  351. package/components/Banner/themes/dark/banner.scss +0 -14
  352. package/components/Button/themes/dark/button.scss +0 -51
  353. package/components/Card/themes/dark/card.scss +0 -20
  354. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  355. package/components/DataList/themes/dark/data-list.scss +0 -10
  356. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  357. package/components/Drawer/themes/dark/drawer.scss +0 -13
  358. package/components/Form/themes/dark/form.scss +0 -7
  359. package/components/FormControl/themes/dark/form-control.scss +0 -24
  360. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  361. package/components/Hint/themes/dark/hint.scss +0 -8
  362. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  363. package/components/Label/themes/dark/label.scss +0 -53
  364. package/components/Login/themes/dark/login.scss +0 -12
  365. package/components/Masthead/themes/dark/masthead.scss +0 -14
  366. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  367. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  368. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  369. package/components/Page/themes/dark/page.scss +0 -69
  370. package/components/Pagination/themes/dark/pagination.scss +0 -7
  371. package/components/Panel/themes/dark/panel.scss +0 -7
  372. package/components/Popover/themes/dark/popover.scss +0 -11
  373. package/components/Progress/themes/dark/progress.scss +0 -9
  374. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  375. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  376. package/components/Switch/themes/dark/switch.scss +0 -11
  377. package/components/Tabs/themes/dark/tabs.scss +0 -10
  378. package/components/Tile/themes/dark/tile.scss +0 -10
  379. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  380. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  381. package/docs/components/Avatar/examples/Avatar.css +0 -3
  382. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
package/docs/components/Form/examples/Form.md CHANGED
@@ -11,14 +11,17 @@ cssPrefix: pf-v5-c-form
11
11
  <form class="pf-v5-c-form" novalidate>
12
12
  <div class="pf-v5-c-form__group">
13
13
  <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="form-vertical-name">
14
- <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
15
- class="pf-v5-c-form__group-label-help"
16
- aria-label="More information for name field"
17
- aria-describedby="form-vertical-name"
18
- role="button"
19
- type="button"
20
- tabindex="0"
21
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
14
+ <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
15
+ <span
16
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
17
+ type="button"
18
+ role="button"
19
+ tabindex="0"
20
+ aria-label="More information for name field"
21
+ aria-describedby="form-vertical-name"
22
+ >
23
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
24
+ </span></span>
22
25
  </div>
23
26
  <div class="pf-v5-c-form__group-control">
24
27
  <span class="pf-v5-c-form-control pf-m-required">
@@ -56,14 +59,17 @@ cssPrefix: pf-v5-c-form
56
59
  </div>
57
60
  <div class="pf-v5-c-form__group">
58
61
  <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="form-horizontal-info">
59
- <span class="pf-v5-c-form__label-text">Information</span></label>&nbsp;<span
60
- class="pf-v5-c-form__group-label-help"
61
- aria-label="More information for information field"
62
- aria-describedby="form-horizontal-info"
63
- role="button"
64
- type="button"
65
- tabindex="0"
66
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
62
+ <span class="pf-v5-c-form__label-text">Information</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
63
+ <span
64
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
65
+ type="button"
66
+ role="button"
67
+ tabindex="0"
68
+ aria-label="More information for information field"
69
+ aria-describedby="form-horizontal-info"
70
+ >
71
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
72
+ </span></span>
67
73
  </div>
68
74
  <div class="pf-v5-c-form__group-control">
69
75
  <span class="pf-v5-c-form-control">
@@ -85,14 +91,17 @@ cssPrefix: pf-v5-c-form
85
91
  class="pf-v5-c-form__group-label pf-m-no-padding-top"
86
92
  id="form-horizontalform-horizontal-checkbox-legend"
87
93
  ><span class="pf-v5-c-form__label">
88
- <span class="pf-v5-c-form__label-text">Label (no top padding)</span></span>&nbsp;<span
89
- class="pf-v5-c-form__group-label-help"
90
- aria-label="More information for label field"
91
- aria-describedby="form-horizontal-checkbox-legend"
92
- role="button"
93
- type="button"
94
- tabindex="0"
95
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
94
+ <span class="pf-v5-c-form__label-text">Label (no top padding)</span></span>&nbsp;<span class="pf-v5-c-form__group-label-help">
95
+ <span
96
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
97
+ type="button"
98
+ role="button"
99
+ tabindex="0"
100
+ aria-label="More information for label field"
101
+ aria-describedby="form-horizontal-checkbox-legend"
102
+ >
103
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
104
+ </span></span>
96
105
  </div>
97
106
  <div class="pf-v5-c-form__group-control pf-m-stack">
98
107
  <div class="pf-v5-c-check">
@@ -136,14 +145,17 @@ cssPrefix: pf-v5-c-form
136
145
  class="pf-v5-c-form__label"
137
146
  for="form-horizontal-custom-breakpoint-name"
138
147
  >
139
- <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
140
- class="pf-v5-c-form__group-label-help"
141
- aria-label="More information for name field"
142
- aria-describedby="form-horizontal-custom-breakpoint-name"
143
- role="button"
144
- type="button"
145
- tabindex="0"
146
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
148
+ <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
149
+ <span
150
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
151
+ type="button"
152
+ role="button"
153
+ tabindex="0"
154
+ aria-label="More information for name field"
155
+ aria-describedby="form-horizontal-custom-breakpoint-name"
156
+ >
157
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
158
+ </span></span>
147
159
  </div>
148
160
  <div class="pf-v5-c-form__group-control">
149
161
  <span class="pf-v5-c-form-control pf-m-required">
@@ -277,6 +289,9 @@ cssPrefix: pf-v5-c-form
277
289
  class="pf-v5-c-helper-text__item"
278
290
  id="form-help-text-name-helper"
279
291
  >
292
+ <span class="pf-v5-c-helper-text__item-icon">
293
+ <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
294
+ </span>
280
295
  <span class="pf-v5-c-helper-text__item-text">This is helper text.</span>
281
296
  </div>
282
297
  </div>
@@ -308,6 +323,9 @@ cssPrefix: pf-v5-c-form
308
323
  class="pf-v5-c-helper-text__item pf-m-warning"
309
324
  id="form-help-text-email-helper"
310
325
  >
326
+ <span class="pf-v5-c-helper-text__item-icon">
327
+ <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
328
+ </span>
311
329
  <span
312
330
  class="pf-v5-c-helper-text__item-text"
313
331
  >This is helper text for a warning input.</span>
@@ -342,6 +360,9 @@ cssPrefix: pf-v5-c-form
342
360
  class="pf-v5-c-helper-text__item pf-m-error"
343
361
  id="-address-helper"
344
362
  >
363
+ <span class="pf-v5-c-helper-text__item-icon">
364
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
365
+ </span>
345
366
  <span
346
367
  class="pf-v5-c-helper-text__item-text"
347
368
  >This is helper text for an invalid input.</span>
@@ -375,6 +396,9 @@ cssPrefix: pf-v5-c-form
375
396
  class="pf-v5-c-helper-text__item pf-m-success"
376
397
  id="form-help-text-comment-helper"
377
398
  >
399
+ <span class="pf-v5-c-helper-text__item-icon">
400
+ <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
401
+ </span>
378
402
  <span
379
403
  class="pf-v5-c-helper-text__item-text"
380
404
  >This is helper text for success input.</span>
@@ -429,14 +453,17 @@ cssPrefix: pf-v5-c-form
429
453
  <div class="pf-v5-c-form__group">
430
454
  <div class="pf-v5-c-form__group-label pf-m-info">
431
455
  <div class="pf-v5-c-form__group-label-main"><label class="pf-v5-c-form__label" for="form-additional-info-name">
432
- <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
433
- class="pf-v5-c-form__group-label-help"
434
- aria-label="More information for name field"
435
- aria-describedby="form-additional-infoform-additional-info-name"
436
- role="button"
437
- type="button"
438
- tabindex="0"
439
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
456
+ <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
457
+ <span
458
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
459
+ type="button"
460
+ role="button"
461
+ tabindex="0"
462
+ aria-label="More information for name field"
463
+ aria-describedby="form-additional-infoform-additional-info-name"
464
+ >
465
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
466
+ </span></span>
440
467
  </div>
441
468
  <div class="pf-v5-c-form__group-label-info">info</div>
442
469
  </div>
@@ -500,14 +527,17 @@ cssPrefix: pf-v5-c-form
500
527
  class="pf-v5-c-form__label"
501
528
  for="form-field-group-field-group-label1"
502
529
  >
503
- <span class="pf-v5-c-form__label-text">Label 1</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
504
- class="pf-v5-c-form__group-label-help"
505
- aria-label="More information for label 1 field"
506
- aria-describedby="form-field-group-field-group-label1"
507
- role="button"
508
- type="button"
509
- tabindex="0"
510
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
530
+ <span class="pf-v5-c-form__label-text">Label 1</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
531
+ <span
532
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
533
+ type="button"
534
+ role="button"
535
+ tabindex="0"
536
+ aria-label="More information for label 1 field"
537
+ aria-describedby="form-field-group-field-group-label1"
538
+ >
539
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
540
+ </span></span>
511
541
  </div>
512
542
  <div class="pf-v5-c-form__group-control">
513
543
  <span class="pf-v5-c-form-control pf-m-required">
@@ -525,14 +555,17 @@ cssPrefix: pf-v5-c-form
525
555
  class="pf-v5-c-form__label"
526
556
  for="form-field-group-field-group-label2"
527
557
  >
528
- <span class="pf-v5-c-form__label-text">Label 2</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
529
- class="pf-v5-c-form__group-label-help"
530
- aria-label="More information for label 2 field"
531
- aria-describedby="form-field-group-field-group-label2"
532
- role="button"
533
- type="button"
534
- tabindex="0"
535
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
558
+ <span class="pf-v5-c-form__label-text">Label 2</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
559
+ <span
560
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
561
+ type="button"
562
+ role="button"
563
+ tabindex="0"
564
+ aria-label="More information for label 2 field"
565
+ aria-describedby="form-field-group-field-group-label2"
566
+ >
567
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
568
+ </span></span>
536
569
  </div>
537
570
  <div class="pf-v5-c-form__group-control">
538
571
  <span class="pf-v5-c-form-control pf-m-required">
@@ -633,14 +666,17 @@ cssPrefix: pf-v5-c-form
633
666
  class="pf-v5-c-form__label"
634
667
  for="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
635
668
  >
636
- <span class="pf-v5-c-form__label-text">Label 1</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
637
- class="pf-v5-c-form__group-label-help"
638
- aria-label="More information for label 1 field"
639
- aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
640
- role="button"
641
- type="button"
642
- tabindex="0"
643
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
669
+ <span class="pf-v5-c-form__label-text">Label 1</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
670
+ <span
671
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
672
+ type="button"
673
+ role="button"
674
+ tabindex="0"
675
+ aria-label="More information for label 1 field"
676
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
677
+ >
678
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
679
+ </span></span>
644
680
  </div>
645
681
  <div class="pf-v5-c-form__group-control">
646
682
  <span class="pf-v5-c-form-control pf-m-required">
@@ -658,14 +694,17 @@ cssPrefix: pf-v5-c-form
658
694
  class="pf-v5-c-form__label"
659
695
  for="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
660
696
  >
661
- <span class="pf-v5-c-form__label-text">Label 2</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
662
- class="pf-v5-c-form__group-label-help"
663
- aria-label="More information for label 2 field"
664
- aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
665
- role="button"
666
- type="button"
667
- tabindex="0"
668
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
697
+ <span class="pf-v5-c-form__label-text">Label 2</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
698
+ <span
699
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
700
+ type="button"
701
+ role="button"
702
+ tabindex="0"
703
+ aria-label="More information for label 2 field"
704
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
705
+ >
706
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
707
+ </span></span>
669
708
  </div>
670
709
  <div class="pf-v5-c-form__group-control">
671
710
  <span class="pf-v5-c-form-control pf-m-required">
@@ -702,14 +741,17 @@ cssPrefix: pf-v5-c-form
702
741
  <span class="pf-v5-c-form__label-text">Label 1</span>&nbsp;<span
703
742
  class="pf-v5-c-form__label-required"
704
743
  aria-hidden="true"
705
- >&#42;</span></label>&nbsp;<span
706
- class="pf-v5-c-form__group-label-help"
707
- aria-label="More information for label 1 field"
708
- aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
709
- role="button"
710
- type="button"
711
- tabindex="0"
712
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
744
+ >&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
745
+ <span
746
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
747
+ type="button"
748
+ role="button"
749
+ tabindex="0"
750
+ aria-label="More information for label 1 field"
751
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
752
+ >
753
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
754
+ </span></span>
713
755
  </div>
714
756
  <div class="pf-v5-c-form__group-control">
715
757
  <span class="pf-v5-c-form-control pf-m-required">
@@ -730,14 +772,17 @@ cssPrefix: pf-v5-c-form
730
772
  <span class="pf-v5-c-form__label-text">Label 2</span>&nbsp;<span
731
773
  class="pf-v5-c-form__label-required"
732
774
  aria-hidden="true"
733
- >&#42;</span></label>&nbsp;<span
734
- class="pf-v5-c-form__group-label-help"
735
- aria-label="More information for label 2 field"
736
- aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
737
- role="button"
738
- type="button"
739
- tabindex="0"
740
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
775
+ >&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
776
+ <span
777
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
778
+ type="button"
779
+ role="button"
780
+ tabindex="0"
781
+ aria-label="More information for label 2 field"
782
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
783
+ >
784
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
785
+ </span></span>
741
786
  </div>
742
787
  <div class="pf-v5-c-form__group-control">
743
788
  <span class="pf-v5-c-form-control pf-m-required">
@@ -799,7 +844,7 @@ To avoid the form label's required indicator or help tooltip icon from wrapping
799
844
  | `.pf-v5-c-form__label-required` | `<span>` | Initiates a form label required indicator. |
800
845
  | `.pf-v5-c-form__group-label-main` | `<div>` | Initiates a form group label main container. |
801
846
  | `.pf-v5-c-form__group-label-info` | `<div>` | Initiates a form group info label. |
802
- | `.pf-v5-c-form__group-label-help` | `<button>`, `<span>` | Initiates a field level help span/button. |
847
+ | `.pf-v5-c-form__group-label-help` | `<span>` | Initiates field level help. |
803
848
  | `.pf-v5-c-form__group-control` | `<div>` | Initiates a form group control section. |
804
849
  | `.pf-v5-c-form__actions` | `<div>` | Iniates a row of actions. |
805
850
  | `.pf-v5-c-form__helper-text` | `<p>`, `<div>` | Initiates a form helper text block. |
package/docs/components/Icon/examples/Icon.md CHANGED
@@ -33,7 +33,7 @@ cssPrefix: pf-v5-c-icon
33
33
 
34
34
  ```
35
35
 
36
- ### Sizes
36
+ ### Standalone icon sizes
37
37
 
38
38
  ```html
39
39
  <span class="pf-v5-c-icon pf-m-sm">
@@ -56,6 +56,73 @@ cssPrefix: pf-v5-c-icon
56
56
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
57
57
  </span>
58
58
  </span>
59
+ <span class="pf-v5-c-icon pf-m-2xl">
60
+ <span class="pf-v5-c-icon__content">
61
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
62
+ </span>
63
+ </span>
64
+ <span class="pf-v5-c-icon pf-m-3xl">
65
+ <span class="pf-v5-c-icon__content">
66
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
67
+ </span>
68
+ </span>
69
+
70
+ ```
71
+
72
+ ### Body sizes
73
+
74
+ ```html
75
+ <span class="pf-v5-c-icon pf-m-body-sm">
76
+ <span class="pf-v5-c-icon__content">
77
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
78
+ </span>
79
+ </span>
80
+ <span class="pf-v5-c-icon pf-m-body-default">
81
+ <span class="pf-v5-c-icon__content">
82
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
83
+ </span>
84
+ </span>
85
+ <span class="pf-v5-c-icon pf-m-body-lg">
86
+ <span class="pf-v5-c-icon__content">
87
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
88
+ </span>
89
+ </span>
90
+
91
+ ```
92
+
93
+ ### Heading sizes
94
+
95
+ ```html
96
+ <span class="pf-v5-c-icon pf-m-heading-sm">
97
+ <span class="pf-v5-c-icon__content">
98
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
99
+ </span>
100
+ </span>
101
+ <span class="pf-v5-c-icon pf-m-heading-md">
102
+ <span class="pf-v5-c-icon__content">
103
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
104
+ </span>
105
+ </span>
106
+ <span class="pf-v5-c-icon pf-m-heading-lg">
107
+ <span class="pf-v5-c-icon__content">
108
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
109
+ </span>
110
+ </span>
111
+ <span class="pf-v5-c-icon pf-m-heading-xl">
112
+ <span class="pf-v5-c-icon__content">
113
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
114
+ </span>
115
+ </span>
116
+ <span class="pf-v5-c-icon pf-m-heading-2xl">
117
+ <span class="pf-v5-c-icon__content">
118
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
119
+ </span>
120
+ </span>
121
+ <span class="pf-v5-c-icon pf-m-heading-3xl">
122
+ <span class="pf-v5-c-icon__content">
123
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
124
+ </span>
125
+ </span>
59
126
 
60
127
  ```
61
128
 
@@ -95,23 +162,23 @@ cssPrefix: pf-v5-c-icon
95
162
  Use a size modifier on the icon container to maintain a consistent size, even if the contents change in size.
96
163
 
97
164
  ```html
98
- <span class="pf-v5-c-icon pf-m-xl pf-m-inline">
99
- <span class="pf-v5-c-icon__content pf-m-sm">
165
+ <span class="pf-v5-c-icon pf-m-3xl pf-m-inline">
166
+ <span class="pf-v5-c-icon__content pf-m-lg">
100
167
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
101
168
  </span>
102
169
  </span>
103
- <span class="pf-v5-c-icon pf-m-xl pf-m-inline">
104
- <span class="pf-v5-c-icon__content pf-m-md">
170
+ <span class="pf-v5-c-icon pf-m-3xl pf-m-inline">
171
+ <span class="pf-v5-c-icon__content pf-m-xl">
105
172
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
106
173
  </span>
107
174
  </span>
108
- <span class="pf-v5-c-icon pf-m-xl pf-m-inline">
109
- <span class="pf-v5-c-icon__content pf-m-lg">
175
+ <span class="pf-v5-c-icon pf-m-3xl pf-m-inline">
176
+ <span class="pf-v5-c-icon__content pf-m-2xl">
110
177
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
111
178
  </span>
112
179
  </span>
113
- <span class="pf-v5-c-icon pf-m-xl pf-m-inline">
114
- <span class="pf-v5-c-icon__content pf-m-xl">
180
+ <span class="pf-v5-c-icon pf-m-3xl pf-m-inline">
181
+ <span class="pf-v5-c-icon__content pf-m-3xl">
115
182
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
116
183
  </span>
117
184
  </span>
@@ -248,7 +315,11 @@ Refer to the [icons](/design-foundations/icons) page for information about the P
248
315
  | `.pf-v5-c-icon__content` | `<span>`, `<div>` | Initiates the icon content. **Required** |
249
316
  | `.pf-v5-c-icon__progress` | `<span>`, `<div>` | Initiates a container for a progress spinner. |
250
317
  | `.pf-m-inline` | `.pf-v5-c-icon` | Displays the icon inline with text, and allows the icon to inherit the size and color of the parent. |
251
- | `.pf-m-[sm,md,lg,xl]` | `.pf-v5-c-icon` | Modifies the icon container to be small, medium, large, or extra large. |
252
- | `.pf-m-[sm,md,lg,xl]` | `.pf-v5-c-icon__content`, `pf-v5-c-icon__progress` | Modifies the icon content or progress element to be small, medium, large, or extra large. |
318
+ | `.pf-m-[sm,md,lg,xl,2xl,3xl]` | `.pf-v5-c-icon` | Modifies the icon container to be small, medium, large, extra large, double extra large, or triple extra large. |
319
+ | `.pf-m-body-[sm,default,lg]` | `.pf-v5-c-icon` | Modifies the icon container to be a size matching small, default, or large body text. |
320
+ | `.pf-m-heading-[sm,md,lg,xl,2xl,3xl]` | `.pf-v5-c-icon` | Modifies the icon container to be a size matching small, medium, large, extra large, double extra large, or triple extra large (h6-h1) heading text. |
321
+ | `.pf-m-[sm,md,lg,xl,2xl,3xl]` | `.pf-v5-c-icon__content`, `pf-v5-c-icon__progress` | Modifies the icon content or progress element to be small, medium, large, or extra large. |
322
+ | `.pf-m-body-[sm,default,lg]` | `.pf-v5-c-icon__content` | Modifies the icon content or progress element to be a size matching small, default, or large body text. |
323
+ | `.pf-m-heading-[sm,md,lg,xl,2xl,3xl]` | `.pf-v5-c-icon__content` | Modifies the icon content or progress element to be a size matching small, medium, large, extra large, double extra large, or triple extra large (h6-h1) heading text. |
253
324
  | `.pf-m-in-progress` | `.pf-v5-c-icon` | Shows the progress element in place of the icon content. |
254
325
  | `.pf-m-danger`, `.pf-m-warning`, `.pf-m-success`, `.pf-m-info`, `.pf-m-custom` | `.pf-v5-c-icon__content` | Modifies the icon content to use a status color. |
package/docs/components/InlineEdit/examples/InlineEdit.md CHANGED
@@ -930,4 +930,6 @@ All accessibility requirements for inputs apply to elements within inline edit.
930
930
  | `.pf-m-valid` | `.pf-v5-c-inline-edit__action` | Modifies the action button state. |
931
931
  | `.pf-m-enable-editable` | `.pf-v5-c-inline-edit__action` | Exposes an inline edit action by default. |
932
932
 
933
- -->
933
+ ```
934
+ -->
935
+ ```