@patternfly/patternfly 6.0.0-alpha.6 → 6.0.0-alpha.61

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 (371) hide show
  1. package/README.md +13 -3
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/images/PF-Backdrop.svg +1 -0
  4. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  5. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  6. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  7. package/assets/images/PF-IconLogo-color.svg +17 -0
  8. package/assets/images/PF-IconLogo.svg +17 -0
  9. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  10. package/assets/images/pf-background.svg +22 -0
  11. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  12. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  13. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  14. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  15. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  16. package/assets/images/pf_logo_white.hbs +35 -0
  17. package/assets/images/pf_logo_white.svg +38 -0
  18. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  19. package/assets/pficon/pficon.scss +6 -129
  20. package/base/_common.scss +29 -4
  21. package/base/_globals.scss +5 -7
  22. package/base/_variables.scss +8 -6
  23. package/base/patternfly-common.css +24 -6
  24. package/base/patternfly-globals.css +5 -4
  25. package/base/patternfly-icons.css +5 -1
  26. package/base/patternfly-pf-icons.css +5 -1
  27. package/base/patternfly-variables.css +889 -787
  28. package/base/tokens/_tokens-dark.scss +322 -265
  29. package/base/tokens/_tokens-default.scss +428 -306
  30. package/base/tokens/_tokens-font.scss +41 -46
  31. package/base/tokens/_tokens-palette.scss +69 -71
  32. package/base/tokens/_workspace-overrides.scss +7 -0
  33. package/components/AboutModalBox/about-modal-box.css +80 -108
  34. package/components/AboutModalBox/about-modal-box.scss +64 -78
  35. package/components/Accordion/accordion.css +96 -175
  36. package/components/Accordion/accordion.scss +106 -193
  37. package/components/ActionList/action-list.css +2 -2
  38. package/components/ActionList/action-list.scss +2 -2
  39. package/components/Alert/alert-group.css +27 -20
  40. package/components/Alert/alert-group.scss +27 -20
  41. package/components/Alert/alert.css +74 -95
  42. package/components/Alert/alert.scss +76 -89
  43. package/components/AppLauncher/app-launcher.css +32 -23
  44. package/components/AppLauncher/app-launcher.scss +32 -23
  45. package/components/Avatar/avatar.css +10 -13
  46. package/components/Avatar/avatar.scss +10 -17
  47. package/components/BackToTop/back-to-top.css +17 -15
  48. package/components/BackToTop/back-to-top.scss +14 -13
  49. package/components/Backdrop/backdrop.css +8 -4
  50. package/components/Backdrop/backdrop.scss +7 -4
  51. package/components/BackgroundImage/background-image.css +11 -4
  52. package/components/BackgroundImage/background-image.scss +13 -4
  53. package/components/Badge/badge.css +25 -17
  54. package/components/Badge/badge.scss +27 -19
  55. package/components/Banner/banner.css +95 -69
  56. package/components/Banner/banner.scss +100 -34
  57. package/components/Breadcrumb/breadcrumb.css +28 -19
  58. package/components/Breadcrumb/breadcrumb.scss +26 -19
  59. package/components/Button/button.css +422 -359
  60. package/components/Button/button.scss +480 -487
  61. package/components/CalendarMonth/calendar-month.css +25 -15
  62. package/components/CalendarMonth/calendar-month.scss +23 -15
  63. package/components/Card/card.css +28 -17
  64. package/components/Card/card.scss +32 -17
  65. package/components/Check/check.css +25 -22
  66. package/components/Check/check.scss +26 -24
  67. package/components/Chip/chip-group.css +6 -6
  68. package/components/Chip/chip-group.scss +6 -6
  69. package/components/Chip/chip.css +16 -9
  70. package/components/Chip/chip.scss +17 -9
  71. package/components/ClipboardCopy/clipboard-copy.css +47 -41
  72. package/components/ClipboardCopy/clipboard-copy.scss +50 -34
  73. package/components/CodeBlock/code-block.css +24 -12
  74. package/components/CodeBlock/code-block.scss +24 -13
  75. package/components/CodeEditor/code-editor.css +31 -22
  76. package/components/CodeEditor/code-editor.scss +30 -21
  77. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  78. package/components/Content/content.css +40 -37
  79. package/components/Content/content.scss +40 -37
  80. package/components/ContextSelector/context-selector.css +41 -26
  81. package/components/ContextSelector/context-selector.scss +40 -25
  82. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  83. package/components/DataList/data-list-grid.css +21 -21
  84. package/components/DataList/data-list-grid.scss +3 -3
  85. package/components/DataList/data-list.css +165 -209
  86. package/components/DataList/data-list.scss +138 -185
  87. package/components/DatePicker/date-picker.css +8 -8
  88. package/components/DatePicker/date-picker.scss +8 -8
  89. package/components/DescriptionList/description-list.css +47 -39
  90. package/components/DescriptionList/description-list.scss +33 -30
  91. package/components/Divider/divider.css +97 -177
  92. package/components/Divider/divider.scss +60 -79
  93. package/components/DragDrop/drag-drop.css +26 -22
  94. package/components/DragDrop/drag-drop.scss +26 -25
  95. package/components/Drawer/drawer.css +120 -62
  96. package/components/Drawer/drawer.scss +94 -44
  97. package/components/Dropdown/dropdown.css +76 -69
  98. package/components/Dropdown/dropdown.scss +67 -62
  99. package/components/DualListSelector/dual-list-selector.css +29 -15
  100. package/components/DualListSelector/dual-list-selector.scss +30 -15
  101. package/components/EmptyState/empty-state.css +64 -38
  102. package/components/EmptyState/empty-state.scss +70 -38
  103. package/components/ExpandableSection/expandable-section.css +75 -66
  104. package/components/ExpandableSection/expandable-section.scss +82 -80
  105. package/components/FileUpload/file-upload.css +31 -43
  106. package/components/FileUpload/file-upload.scss +31 -49
  107. package/components/Form/form.css +111 -154
  108. package/components/Form/form.scss +101 -160
  109. package/components/FormControl/form-control.css +95 -111
  110. package/components/FormControl/form-control.scss +97 -92
  111. package/components/HelperText/helper-text.css +29 -35
  112. package/components/HelperText/helper-text.scss +31 -41
  113. package/components/Hint/hint.css +37 -27
  114. package/components/Hint/hint.scss +37 -30
  115. package/components/Icon/icon.css +155 -19
  116. package/components/Icon/icon.scss +188 -21
  117. package/components/InlineEdit/inline-edit.css +12 -11
  118. package/components/InlineEdit/inline-edit.scss +12 -11
  119. package/components/InputGroup/input-group.css +32 -42
  120. package/components/InputGroup/input-group.scss +31 -33
  121. package/components/JumpLinks/jump-links.css +61 -58
  122. package/components/JumpLinks/jump-links.scss +61 -60
  123. package/components/Label/label-group.css +48 -50
  124. package/components/Label/label-group.scss +48 -51
  125. package/components/Label/label.css +266 -363
  126. package/components/Label/label.scss +306 -356
  127. package/components/List/list.css +25 -25
  128. package/components/List/list.scss +26 -26
  129. package/components/LogViewer/log-viewer.css +14 -14
  130. package/components/LogViewer/log-viewer.scss +14 -14
  131. package/components/Login/login.css +104 -122
  132. package/components/Login/login.scss +92 -91
  133. package/components/Masthead/masthead.css +273 -498
  134. package/components/Masthead/masthead.scss +137 -282
  135. package/components/Menu/menu.css +82 -65
  136. package/components/Menu/menu.scss +85 -69
  137. package/components/MenuToggle/menu-toggle.css +37 -31
  138. package/components/MenuToggle/menu-toggle.scss +37 -33
  139. package/components/ModalBox/modal-box.css +76 -69
  140. package/components/ModalBox/modal-box.scss +74 -70
  141. package/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  142. package/components/MultipleFileUpload/multiple-file-upload.scss +11 -8
  143. package/components/Nav/nav.css +248 -899
  144. package/components/Nav/nav.scss +304 -1059
  145. package/components/Nav/themes/dark/nav.scss +2 -2
  146. package/components/NotificationBadge/notification-badge.css +66 -85
  147. package/components/NotificationBadge/notification-badge.scss +72 -103
  148. package/components/NotificationDrawer/notification-drawer.css +130 -128
  149. package/components/NotificationDrawer/notification-drawer.scss +130 -129
  150. package/components/NumberInput/number-input.css +10 -10
  151. package/components/NumberInput/number-input.scss +9 -14
  152. package/components/OptionsMenu/options-menu.css +43 -31
  153. package/components/OptionsMenu/options-menu.scss +43 -31
  154. package/components/OverflowMenu/overflow-menu.css +2 -2
  155. package/components/OverflowMenu/overflow-menu.scss +2 -2
  156. package/components/Page/page.css +182 -232
  157. package/components/Page/page.scss +130 -195
  158. package/components/Pagination/pagination.css +71 -121
  159. package/components/Pagination/pagination.scss +56 -127
  160. package/components/Panel/panel.css +40 -30
  161. package/components/Panel/panel.scss +42 -33
  162. package/components/Popover/popover.css +108 -87
  163. package/components/Popover/popover.scss +120 -109
  164. package/components/Progress/progress.css +40 -52
  165. package/components/Progress/progress.scss +48 -62
  166. package/components/ProgressStepper/progress-stepper.css +26 -20
  167. package/components/ProgressStepper/progress-stepper.scss +25 -19
  168. package/components/Radio/radio.css +30 -23
  169. package/components/Radio/radio.scss +31 -25
  170. package/components/Select/select.css +56 -47
  171. package/components/Select/select.scss +56 -47
  172. package/components/Sidebar/sidebar.css +31 -14
  173. package/components/Sidebar/sidebar.scss +34 -16
  174. package/components/SimpleList/simple-list.css +45 -56
  175. package/components/SimpleList/simple-list.scss +51 -55
  176. package/components/Skeleton/skeleton.css +24 -25
  177. package/components/Skeleton/skeleton.scss +21 -26
  178. package/components/SkipToContent/skip-to-content.css +9 -6
  179. package/components/SkipToContent/skip-to-content.scss +8 -6
  180. package/components/Slider/slider.css +80 -55
  181. package/components/Slider/slider.scss +96 -65
  182. package/components/Spinner/spinner.css +17 -34
  183. package/components/Spinner/spinner.scss +19 -47
  184. package/components/Switch/switch.css +49 -41
  185. package/components/Switch/switch.scss +51 -42
  186. package/components/TabContent/tab-content.css +21 -12
  187. package/components/TabContent/tab-content.scss +22 -15
  188. package/components/Table/table-grid.css +264 -203
  189. package/components/Table/table-grid.scss +61 -47
  190. package/components/Table/table-scrollable.css +4 -4
  191. package/components/Table/table-scrollable.scss +6 -4
  192. package/components/Table/table-tree-view.css +112 -105
  193. package/components/Table/table-tree-view.scss +38 -33
  194. package/components/Table/table.css +105 -89
  195. package/components/Table/table.scss +105 -89
  196. package/components/Tabs/tabs.css +76 -48
  197. package/components/Tabs/tabs.scss +74 -48
  198. package/components/TextInputGroup/text-input-group.css +15 -15
  199. package/components/TextInputGroup/text-input-group.scss +15 -15
  200. package/components/Tile/tile.css +47 -88
  201. package/components/Tile/tile.scss +45 -91
  202. package/components/Timestamp/timestamp.css +12 -9
  203. package/components/Timestamp/timestamp.scss +11 -10
  204. package/components/Title/title.css +70 -19
  205. package/components/Title/title.scss +90 -20
  206. package/components/ToggleGroup/toggle-group.css +48 -58
  207. package/components/ToggleGroup/toggle-group.scss +48 -56
  208. package/components/Toolbar/toolbar.css +57 -43
  209. package/components/Toolbar/toolbar.scss +45 -25
  210. package/components/Tooltip/tooltip.css +74 -44
  211. package/components/Tooltip/tooltip.scss +93 -77
  212. package/components/TreeView/tree-view.css +48 -27
  213. package/components/TreeView/tree-view.scss +50 -28
  214. package/components/Truncate/truncate.css +13 -0
  215. package/components/Truncate/truncate.scss +19 -3
  216. package/components/Wizard/wizard.css +57 -36
  217. package/components/Wizard/wizard.scss +57 -36
  218. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  219. package/docs/components/Accordion/examples/Accordion.md +614 -416
  220. package/docs/components/Alert/examples/Alert.md +3 -3
  221. package/docs/components/Avatar/examples/Avatar.md +5 -19
  222. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  223. package/docs/components/Badge/examples/Badge.md +21 -0
  224. package/docs/components/Banner/examples/Banner.md +48 -25
  225. package/docs/components/Brand/examples/Brand.css +12 -0
  226. package/docs/components/Brand/examples/Brand.md +51 -32
  227. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  228. package/docs/components/Button/examples/Button.css +6 -2
  229. package/docs/components/Button/examples/Button.md +1425 -87
  230. package/docs/components/Card/examples/Card.md +143 -37
  231. package/docs/components/Check/examples/Check.md +71 -58
  232. package/docs/components/Chip/examples/Chip.md +1 -1
  233. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  234. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  235. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  236. package/docs/components/Content/examples/Content.md +5 -5
  237. package/docs/components/Divider/examples/Divider.css +3 -1
  238. package/docs/components/Divider/examples/Divider.md +4 -5
  239. package/docs/components/DragDrop/examples/DragDrop.css +3 -3
  240. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  241. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  242. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  243. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  244. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  245. package/docs/components/Form/examples/Form.md +134 -89
  246. package/docs/components/Icon/examples/Icon.md +82 -11
  247. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  248. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  249. package/docs/components/Label/examples/Label.css +4 -0
  250. package/docs/components/Label/examples/Label.md +1001 -225
  251. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  252. package/docs/components/LogViewer/examples/LogViewer.md +250 -160
  253. package/docs/components/Login/examples/Login.md +10 -5
  254. package/docs/components/Masthead/examples/masthead.md +443 -65
  255. package/docs/components/Menu/examples/Menu.css +8 -0
  256. package/docs/components/Menu/examples/Menu.md +594 -543
  257. package/docs/components/MenuToggle/examples/MenuToggle.md +109 -96
  258. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  259. package/docs/components/Nav/examples/Navigation.css +3 -42
  260. package/docs/components/Nav/examples/Navigation.md +305 -353
  261. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  262. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  263. package/docs/components/Page/examples/Page.css +0 -8
  264. package/docs/components/Page/examples/Page.md +22 -21
  265. package/docs/components/Pagination/examples/Pagination.md +663 -637
  266. package/docs/components/Panel/examples/Panel.md +12 -0
  267. package/docs/components/Popover/examples/Popover.css +4 -9
  268. package/docs/components/Popover/examples/Popover.md +1 -1
  269. package/docs/components/Radio/examples/Radio.md +62 -54
  270. package/docs/components/Select/deprecated/Select.md +184 -177
  271. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  272. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  273. package/docs/components/TabContent/examples/TabContent.md +10 -10
  274. package/docs/components/Table/examples/Table.css +2 -2
  275. package/docs/components/Table/examples/Table.md +10 -10
  276. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  277. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  278. package/docs/components/Tile/examples/Tile.css +1 -1
  279. package/docs/components/Tile/examples/Tile.md +264 -144
  280. package/docs/components/Title/examples/Title.md +18 -0
  281. package/docs/components/Toolbar/examples/Toolbar.md +663 -2894
  282. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  283. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  284. package/docs/components/Truncate/examples/Truncate.css +2 -2
  285. package/docs/components/Truncate/examples/Truncate.md +2 -2
  286. package/docs/demos/AboutModal/examples/AboutModal.md +103 -30
  287. package/docs/demos/Alert/examples/Alert.md +327 -84
  288. package/docs/demos/BackToTop/examples/BackToTop.md +101 -28
  289. package/docs/demos/Banner/examples/Banner.md +209 -58
  290. package/docs/demos/Card/examples/Card.css +3 -3
  291. package/docs/demos/Card/examples/Card.md +28 -12
  292. package/docs/demos/CardView/examples/CardView.md +263 -205
  293. package/docs/demos/ContextSelector/examples/ContextSelector.md +373 -90
  294. package/docs/demos/Dashboard/examples/Dashboard.md +104 -31
  295. package/docs/demos/DataList/examples/DataList.md +995 -928
  296. package/docs/demos/DescriptionList/examples/DescriptionList.md +303 -84
  297. package/docs/demos/Drawer/examples/Drawer.md +605 -220
  298. package/docs/demos/Form/examples/BasicForms.md +133 -82
  299. package/docs/demos/JumpLinks/examples/JumpLinks.md +881 -353
  300. package/docs/demos/Masthead/examples/Masthead.md +767 -323
  301. package/docs/demos/Modal/examples/Modal.md +639 -192
  302. package/docs/demos/Nav/examples/Nav.md +685 -896
  303. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +510 -140
  304. package/docs/demos/Page/examples/Page.md +933 -264
  305. package/docs/demos/Page/examples/Penta.md +569 -501
  306. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
  307. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  308. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1296 -917
  309. package/docs/demos/Skeleton/examples/Skeleton.md +108 -63
  310. package/docs/demos/Table/examples/Table.md +3832 -3390
  311. package/docs/demos/Tabs/examples/Tabs.md +636 -191
  312. package/docs/demos/Toolbar/examples/Toolbar.css +15 -0
  313. package/docs/demos/Toolbar/examples/Toolbar.md +1331 -1493
  314. package/docs/demos/Wizard/examples/Wizard.md +909 -252
  315. package/docs/layouts/Flex/examples/Flex.md +16 -16
  316. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  317. package/icons/pficons.mjs +1 -0
  318. package/layouts/Flex/flex.css +115 -43
  319. package/layouts/Flex/flex.scss +20 -8
  320. package/package.json +36 -32
  321. package/patternfly-addons.css +732 -972
  322. package/patternfly-base-no-globals-theme-dark-unversioned.css +923 -799
  323. package/patternfly-base-no-globals.css +923 -799
  324. package/patternfly-base-theme-dark-unversioned.css +928 -803
  325. package/patternfly-base.css +928 -803
  326. package/patternfly-no-globals.css +6887 -7357
  327. package/patternfly-theme-dark-unversioned.css +6892 -7361
  328. package/patternfly.css +6892 -7361
  329. package/patternfly.min.css +1 -1
  330. package/patternfly.min.css.map +1 -1
  331. package/sass-utilities/functions.scss +6 -0
  332. package/sass-utilities/mixins.scss +80 -2
  333. package/sass-utilities/scss-variables.scss +8 -8
  334. package/sass-utilities/themes/dark/mixins.scss +3 -1
  335. package/utilities/Accessibility/accessibility.css +12 -12
  336. package/utilities/Spacing/spacing.css +720 -960
  337. package/utilities/Spacing/spacing.scss +4 -8
  338. package/base/themes/dark/_variables.scss +0 -102
  339. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  340. package/components/Accordion/themes/dark/accordion.scss +0 -9
  341. package/components/Alert/themes/dark/alert.scss +0 -17
  342. package/components/Badge/themes/dark/badge.scss +0 -9
  343. package/components/Banner/themes/dark/banner.scss +0 -14
  344. package/components/Button/themes/dark/button.scss +0 -51
  345. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  346. package/components/DataList/themes/dark/data-list.scss +0 -10
  347. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  348. package/components/Form/themes/dark/form.scss +0 -7
  349. package/components/FormControl/themes/dark/form-control.scss +0 -24
  350. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  351. package/components/Hint/themes/dark/hint.scss +0 -8
  352. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  353. package/components/Label/themes/dark/label.scss +0 -53
  354. package/components/Login/themes/dark/login.scss +0 -12
  355. package/components/Masthead/themes/dark/masthead.scss +0 -14
  356. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  357. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  358. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  359. package/components/Page/themes/dark/page.scss +0 -69
  360. package/components/Pagination/themes/dark/pagination.scss +0 -7
  361. package/components/Panel/themes/dark/panel.scss +0 -7
  362. package/components/Popover/themes/dark/popover.scss +0 -11
  363. package/components/Progress/themes/dark/progress.scss +0 -9
  364. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  365. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  366. package/components/Switch/themes/dark/switch.scss +0 -11
  367. package/components/Tile/themes/dark/tile.scss +0 -10
  368. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  369. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  370. package/docs/components/Avatar/examples/Avatar.css +0 -3
  371. 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
+ ```