@patternfly/patternfly 6.0.0-alpha.8 → 6.0.0-alpha.81

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 (334) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/assets/images/PF-Backdrop.svg +1 -0
  3. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  4. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  5. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  6. package/assets/images/PF-IconLogo-color.svg +17 -0
  7. package/assets/images/PF-IconLogo.svg +17 -0
  8. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  9. package/assets/images/pf-background.svg +22 -0
  10. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  11. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  12. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  13. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  14. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  15. package/assets/images/pf_logo_white.hbs +35 -0
  16. package/assets/images/pf_logo_white.svg +38 -0
  17. package/base/_common.scss +8 -4
  18. package/base/_globals.scss +4 -6
  19. package/base/_variables.scss +2 -7
  20. package/base/patternfly-common.css +8 -4
  21. package/base/patternfly-globals.css +4 -3
  22. package/base/patternfly-variables.css +884 -871
  23. package/base/tokens/_tokens-charts.scss +159 -0
  24. package/base/tokens/_tokens-dark.scss +311 -287
  25. package/base/tokens/_tokens-default.scss +425 -329
  26. package/base/tokens/_tokens-font.scss +29 -36
  27. package/base/tokens/_tokens-palette.scss +71 -71
  28. package/base/tokens/_workspace-overrides.scss +7 -0
  29. package/components/AboutModalBox/about-modal-box.css +57 -94
  30. package/components/AboutModalBox/about-modal-box.scss +37 -62
  31. package/components/Accordion/accordion.css +85 -177
  32. package/components/Accordion/accordion.scss +96 -195
  33. package/components/ActionList/action-list.css +18 -17
  34. package/components/ActionList/action-list.scss +26 -16
  35. package/components/Alert/alert-group.css +20 -16
  36. package/components/Alert/alert-group.scss +20 -16
  37. package/components/Alert/alert.css +59 -84
  38. package/components/Alert/alert.scss +62 -78
  39. package/components/Avatar/avatar.css +10 -13
  40. package/components/Avatar/avatar.scss +10 -17
  41. package/components/BackToTop/back-to-top.css +17 -16
  42. package/components/BackToTop/back-to-top.scss +12 -12
  43. package/components/Backdrop/backdrop.css +6 -2
  44. package/components/Backdrop/backdrop.scss +5 -2
  45. package/components/BackgroundImage/background-image.css +5 -1
  46. package/components/BackgroundImage/background-image.scss +5 -1
  47. package/components/Badge/badge.css +23 -15
  48. package/components/Badge/badge.scss +25 -17
  49. package/components/Banner/banner.css +90 -64
  50. package/components/Banner/banner.scss +95 -32
  51. package/components/Breadcrumb/breadcrumb.css +19 -16
  52. package/components/Breadcrumb/breadcrumb.scss +18 -16
  53. package/components/Button/button.css +419 -353
  54. package/components/Button/button.scss +476 -476
  55. package/components/CalendarMonth/calendar-month.css +61 -92
  56. package/components/CalendarMonth/calendar-month.scss +68 -63
  57. package/components/Card/card.css +100 -194
  58. package/components/Card/card.scss +121 -237
  59. package/components/Check/check.css +24 -21
  60. package/components/Check/check.scss +25 -23
  61. package/components/ClipboardCopy/clipboard-copy.css +30 -33
  62. package/components/ClipboardCopy/clipboard-copy.scss +34 -26
  63. package/components/CodeBlock/code-block.css +22 -9
  64. package/components/CodeBlock/code-block.scss +22 -10
  65. package/components/CodeEditor/code-editor.css +94 -72
  66. package/components/CodeEditor/code-editor.scss +104 -82
  67. package/components/Content/content.css +7 -7
  68. package/components/Content/content.scss +7 -7
  69. package/components/DataList/data-list.css +101 -158
  70. package/components/DataList/data-list.scss +95 -154
  71. package/components/DatePicker/date-picker.css +13 -14
  72. package/components/DatePicker/date-picker.scss +12 -16
  73. package/components/DescriptionList/description-list.css +39 -34
  74. package/components/DescriptionList/description-list.scss +25 -25
  75. package/components/Divider/divider.css +91 -169
  76. package/components/Divider/divider.scss +60 -77
  77. package/components/DragDrop/drag-drop.css +18 -14
  78. package/components/DragDrop/drag-drop.scss +18 -17
  79. package/components/Drawer/drawer.css +112 -113
  80. package/components/Drawer/drawer.scss +134 -134
  81. package/components/Dropdown/dropdown.css +1 -3
  82. package/components/Dropdown/dropdown.scss +2 -6
  83. package/components/DualListSelector/dual-list-selector.css +56 -48
  84. package/components/DualListSelector/dual-list-selector.scss +57 -50
  85. package/components/EmptyState/empty-state.css +57 -34
  86. package/components/EmptyState/empty-state.scss +63 -34
  87. package/components/ExpandableSection/expandable-section.css +64 -62
  88. package/components/ExpandableSection/expandable-section.scss +73 -76
  89. package/components/FileUpload/file-upload.css +28 -34
  90. package/components/FileUpload/file-upload.scss +30 -42
  91. package/components/Form/form.css +68 -114
  92. package/components/Form/form.scss +65 -126
  93. package/components/FormControl/form-control.css +86 -111
  94. package/components/FormControl/form-control.scss +88 -92
  95. package/components/HelperText/helper-text.css +28 -34
  96. package/components/HelperText/helper-text.scss +30 -40
  97. package/components/Hint/hint.css +28 -21
  98. package/components/Hint/hint.scss +28 -24
  99. package/components/Icon/icon.css +154 -18
  100. package/components/Icon/icon.scss +187 -20
  101. package/components/InlineEdit/inline-edit.css +8 -7
  102. package/components/InlineEdit/inline-edit.scss +8 -7
  103. package/components/InputGroup/input-group.css +22 -38
  104. package/components/InputGroup/input-group.scss +21 -29
  105. package/components/JumpLinks/jump-links.css +34 -34
  106. package/components/JumpLinks/jump-links.scss +35 -36
  107. package/components/Label/label-group.css +39 -44
  108. package/components/Label/label-group.scss +39 -45
  109. package/components/Label/label.css +380 -355
  110. package/components/Label/label.scss +434 -348
  111. package/components/List/list.css +16 -16
  112. package/components/List/list.scss +17 -17
  113. package/components/Login/login.css +70 -97
  114. package/components/Login/login.scss +56 -64
  115. package/components/Masthead/masthead.css +261 -502
  116. package/components/Masthead/masthead.scss +123 -286
  117. package/components/Menu/menu.css +3 -0
  118. package/components/Menu/menu.scss +7 -3
  119. package/components/MenuToggle/menu-toggle.css +8 -8
  120. package/components/MenuToggle/menu-toggle.scss +8 -10
  121. package/components/ModalBox/modal-box.css +59 -52
  122. package/components/ModalBox/modal-box.scss +57 -53
  123. package/components/MultipleFileUpload/multiple-file-upload.css +77 -50
  124. package/components/MultipleFileUpload/multiple-file-upload.scss +82 -53
  125. package/components/Nav/nav.css +240 -918
  126. package/components/Nav/nav.scss +300 -1082
  127. package/components/NotificationBadge/notification-badge.css +56 -81
  128. package/components/NotificationBadge/notification-badge.scss +60 -97
  129. package/components/NotificationDrawer/notification-drawer.css +104 -115
  130. package/components/NotificationDrawer/notification-drawer.scss +106 -116
  131. package/components/NumberInput/number-input.css +8 -8
  132. package/components/NumberInput/number-input.scss +7 -12
  133. package/components/OverflowMenu/overflow-menu.css +17 -47
  134. package/components/OverflowMenu/overflow-menu.scss +27 -65
  135. package/components/Page/page.css +56 -164
  136. package/components/Page/page.scss +60 -154
  137. package/components/Pagination/pagination.css +57 -124
  138. package/components/Pagination/pagination.scss +40 -128
  139. package/components/Panel/panel.css +27 -23
  140. package/components/Panel/panel.scss +29 -26
  141. package/components/Popover/popover.css +42 -53
  142. package/components/Popover/popover.scss +46 -55
  143. package/components/Progress/progress.css +31 -45
  144. package/components/Progress/progress.scss +36 -55
  145. package/components/ProgressStepper/progress-stepper.css +72 -69
  146. package/components/ProgressStepper/progress-stepper.scss +65 -65
  147. package/components/Radio/radio.css +27 -20
  148. package/components/Radio/radio.scss +28 -22
  149. package/components/Sidebar/sidebar.css +20 -9
  150. package/components/Sidebar/sidebar.scss +23 -11
  151. package/components/SimpleList/simple-list.css +35 -52
  152. package/components/SimpleList/simple-list.scss +41 -51
  153. package/components/Skeleton/skeleton.css +18 -20
  154. package/components/Skeleton/skeleton.scss +17 -21
  155. package/components/SkipToContent/skip-to-content.css +6 -3
  156. package/components/SkipToContent/skip-to-content.scss +8 -6
  157. package/components/Slider/slider.css +34 -30
  158. package/components/Slider/slider.scss +46 -43
  159. package/components/Spinner/spinner.css +17 -34
  160. package/components/Spinner/spinner.scss +19 -47
  161. package/components/Switch/switch.css +42 -38
  162. package/components/Switch/switch.scss +48 -43
  163. package/components/TabContent/tab-content.css +17 -11
  164. package/components/TabContent/tab-content.scss +18 -14
  165. package/components/Table/table-grid.css +29 -45
  166. package/components/Table/table-grid.scss +40 -53
  167. package/components/Table/table-scrollable.css +6 -6
  168. package/components/Table/table-scrollable.scss +8 -8
  169. package/components/Table/table-tree-view.css +76 -74
  170. package/components/Table/table-tree-view.scss +44 -39
  171. package/components/Table/table.css +67 -93
  172. package/components/Table/table.scss +83 -105
  173. package/components/Tabs/tabs.css +143 -175
  174. package/components/Tabs/tabs.scss +159 -217
  175. package/components/Tile/tile.css +40 -81
  176. package/components/Tile/tile.scss +38 -84
  177. package/components/Timestamp/timestamp.css +12 -9
  178. package/components/Timestamp/timestamp.scss +11 -10
  179. package/components/Title/title.css +70 -19
  180. package/components/Title/title.scss +90 -20
  181. package/components/ToggleGroup/toggle-group.css +54 -48
  182. package/components/ToggleGroup/toggle-group.scss +62 -50
  183. package/components/Toolbar/toolbar.css +2527 -1031
  184. package/components/Toolbar/toolbar.scss +233 -520
  185. package/components/Tooltip/tooltip.css +16 -18
  186. package/components/Tooltip/tooltip.scss +20 -24
  187. package/components/TreeView/tree-view.css +76 -97
  188. package/components/TreeView/tree-view.scss +82 -113
  189. package/components/Truncate/truncate.css +4 -0
  190. package/components/Truncate/truncate.scss +3 -0
  191. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  192. package/docs/components/Accordion/examples/Accordion.md +614 -416
  193. package/docs/components/ActionList/examples/ActionList.md +73 -22
  194. package/docs/components/Alert/examples/Alert.md +3 -3
  195. package/docs/components/Avatar/examples/Avatar.md +5 -19
  196. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  197. package/docs/components/Badge/examples/Badge.md +21 -0
  198. package/docs/components/Banner/examples/Banner.md +48 -25
  199. package/docs/components/Brand/examples/Brand.css +12 -0
  200. package/docs/components/Brand/examples/Brand.md +51 -32
  201. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  202. package/docs/components/Button/examples/Button.css +4 -0
  203. package/docs/components/Button/examples/Button.md +1419 -93
  204. package/docs/components/CalendarMonth/examples/CalendarMonth.md +48 -224
  205. package/docs/components/Card/examples/Card.md +550 -133
  206. package/docs/components/Check/examples/Check.md +1 -0
  207. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  208. package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
  209. package/docs/components/Content/examples/Content.md +5 -5
  210. package/docs/components/DatePicker/examples/DatePicker.md +5 -2
  211. package/docs/components/Divider/examples/Divider.css +3 -1
  212. package/docs/components/Divider/examples/Divider.md +30 -5
  213. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  214. package/docs/components/Drawer/examples/Drawer.md +294 -256
  215. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  216. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  217. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  218. package/docs/components/Form/examples/Form.md +134 -89
  219. package/docs/components/Icon/examples/Icon.md +82 -11
  220. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  221. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  222. package/docs/components/Label/examples/Label.css +4 -0
  223. package/docs/components/Label/examples/Label.md +3090 -703
  224. package/docs/components/LogViewer/examples/LogViewer.md +180 -180
  225. package/docs/components/Login/examples/Login.md +10 -5
  226. package/docs/components/Masthead/examples/masthead.md +443 -65
  227. package/docs/components/Menu/examples/Menu.md +507 -473
  228. package/docs/components/MenuToggle/examples/MenuToggle.md +106 -114
  229. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  230. package/docs/components/Nav/examples/Navigation.css +1 -23
  231. package/docs/components/Nav/examples/Navigation.md +209 -356
  232. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  233. package/docs/components/Page/examples/Page.css +0 -8
  234. package/docs/components/Page/examples/Page.md +22 -21
  235. package/docs/components/Pagination/examples/Pagination.md +663 -637
  236. package/docs/components/Panel/examples/Panel.md +12 -0
  237. package/docs/components/Popover/examples/Popover.md +1 -1
  238. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  239. package/docs/components/Radio/examples/Radio.md +1 -1
  240. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  241. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  242. package/docs/components/TabContent/examples/TabContent.md +10 -10
  243. package/docs/components/Table/examples/Table.md +8 -8
  244. package/docs/components/Tabs/examples/Tabs.css +1 -1
  245. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  246. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  247. package/docs/components/Tile/examples/Tile.md +264 -144
  248. package/docs/components/Title/examples/Title.md +18 -0
  249. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  250. package/docs/components/Toolbar/examples/Toolbar.md +985 -3355
  251. package/docs/components/TreeView/examples/TreeView.md +7 -57
  252. package/docs/components/Truncate/examples/Truncate.css +2 -2
  253. package/docs/demos/AboutModal/examples/AboutModal.md +104 -31
  254. package/docs/demos/Alert/examples/Alert.md +330 -87
  255. package/docs/demos/BackToTop/examples/BackToTop.md +102 -29
  256. package/docs/demos/Banner/examples/Banner.md +211 -60
  257. package/docs/demos/Card/examples/Card.md +2 -2
  258. package/docs/demos/CardView/examples/CardView.md +241 -187
  259. package/docs/demos/ContextSelector/examples/ContextSelector.md +377 -94
  260. package/docs/demos/Dashboard/examples/Dashboard.md +102 -29
  261. package/docs/demos/DataList/examples/DataList.md +999 -938
  262. package/docs/demos/DescriptionList/examples/DescriptionList.md +306 -87
  263. package/docs/demos/Drawer/examples/Drawer.md +640 -251
  264. package/docs/demos/Form/examples/BasicForms.md +138 -84
  265. package/docs/demos/JumpLinks/examples/JumpLinks.md +917 -385
  266. package/docs/demos/Masthead/examples/Masthead.md +786 -342
  267. package/docs/demos/Modal/examples/Modal.md +645 -198
  268. package/docs/demos/Nav/examples/Nav.md +691 -902
  269. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +515 -145
  270. package/docs/demos/Page/examples/Page.md +942 -273
  271. package/docs/demos/Page/examples/Penta.md +66 -26
  272. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
  273. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  274. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1183 -832
  275. package/docs/demos/Skeleton/examples/Skeleton.md +102 -29
  276. package/docs/demos/Table/examples/Table.md +3811 -3456
  277. package/docs/demos/Tabs/examples/Tabs.md +636 -194
  278. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  279. package/docs/demos/Toolbar/examples/Toolbar.md +1316 -1478
  280. package/docs/demos/Wizard/examples/Wizard.md +918 -261
  281. package/docs/layouts/Flex/examples/Flex.md +11 -11
  282. package/package.json +32 -32
  283. package/patternfly-base-no-globals-theme-dark-unversioned.css +897 -880
  284. package/patternfly-base-no-globals.css +897 -880
  285. package/patternfly-base-theme-dark-unversioned.css +890 -872
  286. package/patternfly-base.css +890 -872
  287. package/patternfly-no-globals.css +8107 -8027
  288. package/patternfly-theme-dark-unversioned.css +8111 -8030
  289. package/patternfly.css +8111 -8030
  290. package/patternfly.min.css +1 -1
  291. package/patternfly.min.css.map +1 -1
  292. package/sass-utilities/mixins.scss +18 -0
  293. package/base/themes/dark/_variables.scss +0 -102
  294. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  295. package/components/Accordion/themes/dark/accordion.scss +0 -9
  296. package/components/Alert/themes/dark/alert.scss +0 -17
  297. package/components/Badge/themes/dark/badge.scss +0 -9
  298. package/components/Banner/themes/dark/banner.scss +0 -14
  299. package/components/Button/themes/dark/button.scss +0 -51
  300. package/components/CalendarMonth/themes/dark/calendar-month.scss +0 -37
  301. package/components/Card/themes/dark/card.scss +0 -20
  302. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  303. package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
  304. package/components/DataList/themes/dark/data-list.scss +0 -10
  305. package/components/DatePicker/themes/dark/date-picker.scss +0 -8
  306. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  307. package/components/Drawer/themes/dark/drawer.scss +0 -13
  308. package/components/DualListSelector/themes/dark/dual-list-selector.scss +0 -9
  309. package/components/Form/themes/dark/form.scss +0 -7
  310. package/components/FormControl/themes/dark/form-control.scss +0 -24
  311. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  312. package/components/Hint/themes/dark/hint.scss +0 -8
  313. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  314. package/components/Label/themes/dark/label.scss +0 -53
  315. package/components/Login/themes/dark/login.scss +0 -12
  316. package/components/Masthead/themes/dark/masthead.scss +0 -14
  317. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  318. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  319. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  320. package/components/Page/themes/dark/page.scss +0 -69
  321. package/components/Pagination/themes/dark/pagination.scss +0 -7
  322. package/components/Panel/themes/dark/panel.scss +0 -7
  323. package/components/Popover/themes/dark/popover.scss +0 -11
  324. package/components/Progress/themes/dark/progress.scss +0 -9
  325. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  326. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  327. package/components/Switch/themes/dark/switch.scss +0 -11
  328. package/components/Tabs/themes/dark/tabs.scss +0 -10
  329. package/components/Tile/themes/dark/tile.scss +0 -10
  330. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  331. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  332. package/components/TreeView/themes/dark/tree-view.scss +0 -8
  333. package/docs/components/Avatar/examples/Avatar.css +0 -3
  334. 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
+ ```