@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/demos/Form/examples/BasicForms.md CHANGED
@@ -26,6 +26,9 @@ subsection: forms
26
26
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
27
27
  <div class="pf-v5-c-helper-text">
28
28
  <div class="pf-v5-c-helper-text__item" id="-name-helper">
29
+ <span class="pf-v5-c-helper-text__item-icon">
30
+ <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
31
+ </span>
29
32
  <span
30
33
  class="pf-v5-c-helper-text__item-text"
31
34
  >Include your middle name if you have one.</span>
@@ -46,14 +49,17 @@ subsection: forms
46
49
  </div>
47
50
  <div class="pf-v5-c-form__group">
48
51
  <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="-phone">
49
- <span class="pf-v5-c-form__label-text">Phone number</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
50
- class="pf-v5-c-form__group-label-help"
51
- aria-label="More information for phone number field"
52
- aria-describedby="-phone"
53
- role="button"
54
- type="button"
55
- tabindex="0"
56
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
52
+ <span class="pf-v5-c-form__label-text">Phone number</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">
53
+ <span
54
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
55
+ type="button"
56
+ role="button"
57
+ tabindex="0"
58
+ aria-label="More information for phone number field"
59
+ aria-describedby="-phone"
60
+ >
61
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
62
+ </span></span>
57
63
  </div>
58
64
  <div class="pf-v5-c-form__group-control">
59
65
  <span class="pf-v5-c-form-control pf-m-required">
@@ -188,6 +194,9 @@ subsection: forms
188
194
  class="pf-v5-c-helper-text__item"
189
195
  id="form-demo-horizontal-name-helper"
190
196
  >
197
+ <span class="pf-v5-c-helper-text__item-icon">
198
+ <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
199
+ </span>
191
200
  <span
192
201
  class="pf-v5-c-helper-text__item-text"
193
202
  >Include your middle name if you have one.</span>
@@ -234,14 +243,17 @@ subsection: forms
234
243
  class="pf-v5-c-form__group-label pf-m-no-padding-top"
235
244
  id="form-demo-horizontalform-demo-horizontal-contact-legend"
236
245
  ><span class="pf-v5-c-form__label">
237
- <span class="pf-v5-c-form__label-text">How can we contact you?</span></span>&nbsp;<span
238
- class="pf-v5-c-form__group-label-help"
239
- aria-label="More information for contact field"
240
- aria-describedby="form-demo-horizontal-contact-legend"
241
- role="button"
242
- type="button"
243
- tabindex="0"
244
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
246
+ <span class="pf-v5-c-form__label-text">How can we contact you?</span></span>&nbsp;<span class="pf-v5-c-form__group-label-help">
247
+ <span
248
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
249
+ type="button"
250
+ role="button"
251
+ tabindex="0"
252
+ aria-label="More information for contact field"
253
+ aria-describedby="form-demo-horizontal-contact-legend"
254
+ >
255
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
256
+ </span></span>
245
257
  </div>
246
258
  <div class="pf-v5-c-form__group-control pf-m-stack">
247
259
  <div class="pf-v5-c-check">
@@ -320,6 +332,9 @@ subsection: forms
320
332
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
321
333
  <div class="pf-v5-c-helper-text">
322
334
  <div class="pf-v5-c-helper-text__item" id="-helper">
335
+ <span class="pf-v5-c-helper-text__item-icon">
336
+ <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
337
+ </span>
323
338
  <span
324
339
  class="pf-v5-c-helper-text__item-text"
325
340
  >Include your middle name if you have one.</span>
@@ -497,14 +512,17 @@ subsection: forms
497
512
  class="pf-v5-c-form__label"
498
513
  for="form-demo-sections-repeatable-fields-clientid"
499
514
  >
500
- <span class="pf-v5-c-form__label-text">Client ID</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
501
- class="pf-v5-c-form__group-label-help"
502
- aria-label="More information for client id field"
503
- aria-describedby="form-demo-sections-repeatable-fields-clientid"
504
- role="button"
505
- type="button"
506
- tabindex="0"
507
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
515
+ <span class="pf-v5-c-form__label-text">Client ID</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">
516
+ <span
517
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
518
+ type="button"
519
+ role="button"
520
+ tabindex="0"
521
+ aria-label="More information for client id field"
522
+ aria-describedby="form-demo-sections-repeatable-fields-clientid"
523
+ >
524
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
525
+ </span></span>
508
526
  </div>
509
527
  <div class="pf-v5-c-form__group-control">
510
528
  <span class="pf-v5-c-form-control pf-m-required">
@@ -522,14 +540,17 @@ subsection: forms
522
540
  class="pf-v5-c-form__label"
523
541
  for="form-demo-sections-repeatable-fields-name"
524
542
  >
525
- <span class="pf-v5-c-form__label-text">Full name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
526
- class="pf-v5-c-form__group-label-help"
527
- aria-label="More information for full name field"
528
- aria-describedby="form-demo-sections-repeatable-fields-name"
529
- role="button"
530
- type="button"
531
- tabindex="0"
532
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
543
+ <span class="pf-v5-c-form__label-text">Full 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">
544
+ <span
545
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
546
+ type="button"
547
+ role="button"
548
+ tabindex="0"
549
+ aria-label="More information for full name field"
550
+ aria-describedby="form-demo-sections-repeatable-fields-name"
551
+ >
552
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
553
+ </span></span>
533
554
  </div>
534
555
  <div class="pf-v5-c-form__group-control">
535
556
  <span class="pf-v5-c-form-control pf-m-required">
@@ -547,14 +568,17 @@ subsection: forms
547
568
  class="pf-v5-c-form__label"
548
569
  for="form-demo-sections-repeatable-fields-description"
549
570
  >
550
- <span class="pf-v5-c-form__label-text">Description</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
551
- class="pf-v5-c-form__group-label-help"
552
- aria-label="More information for description field"
553
- aria-describedby="form-demo-sections-repeatable-fields-description"
554
- role="button"
555
- type="button"
556
- tabindex="0"
557
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
571
+ <span class="pf-v5-c-form__label-text">Description</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">
572
+ <span
573
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
574
+ type="button"
575
+ role="button"
576
+ tabindex="0"
577
+ aria-label="More information for description field"
578
+ aria-describedby="form-demo-sections-repeatable-fields-description"
579
+ >
580
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
581
+ </span></span>
558
582
  </div>
559
583
  <div class="pf-v5-c-form__group-control">
560
584
  <span class="pf-v5-c-form-control pf-m-required">
@@ -583,14 +607,17 @@ subsection: forms
583
607
  class="pf-v5-c-form__label"
584
608
  for="form-demo-sections-repeatable-fields-section2-rooturl"
585
609
  >
586
- <span class="pf-v5-c-form__label-text">Root URL</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
587
- class="pf-v5-c-form__group-label-help"
588
- aria-label="More information for root URL field"
589
- aria-describedby="form-demo-sections-repeatable-fields-section2-rooturl"
590
- role="button"
591
- type="button"
592
- tabindex="0"
593
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
610
+ <span class="pf-v5-c-form__label-text">Root URL</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">
611
+ <span
612
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
613
+ type="button"
614
+ role="button"
615
+ tabindex="0"
616
+ aria-label="More information for root URL field"
617
+ aria-describedby="form-demo-sections-repeatable-fields-section2-rooturl"
618
+ >
619
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
620
+ </span></span>
594
621
  </div>
595
622
  <div class="pf-v5-c-form__group-control">
596
623
  <span class="pf-v5-c-form-control pf-m-required">
@@ -608,14 +635,17 @@ subsection: forms
608
635
  class="pf-v5-c-form__label"
609
636
  id="form-demo-sections-repeatable-fields-section2-uris"
610
637
  >
611
- <span class="pf-v5-c-form__label-text">Valid redirect URIs</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
612
- class="pf-v5-c-form__group-label-help"
613
- aria-label="More information for valid redirect URIs field"
614
- aria-describedby="form-demo-sections-repeatable-fields-section2-uris"
615
- role="button"
616
- type="button"
617
- tabindex="0"
618
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
638
+ <span class="pf-v5-c-form__label-text">Valid redirect URIs</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">
639
+ <span
640
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
641
+ type="button"
642
+ role="button"
643
+ tabindex="0"
644
+ aria-label="More information for valid redirect URIs field"
645
+ aria-describedby="form-demo-sections-repeatable-fields-section2-uris"
646
+ >
647
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
648
+ </span></span>
619
649
  </div>
620
650
  <div class="pf-v5-c-form__group-control pf-m-stack">
621
651
  <div class="pf-v5-c-input-group">
@@ -697,14 +727,17 @@ subsection: forms
697
727
  class="pf-v5-c-form__label"
698
728
  for="form-demo-sections-repeatable-fields-section2-home-url"
699
729
  >
700
- <span class="pf-v5-c-form__label-text">Home URL</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
701
- class="pf-v5-c-form__group-label-help"
702
- aria-label="More information for home URL field"
703
- aria-describedby="form-demo-sections-repeatable-fields-section2-home-url"
704
- role="button"
705
- type="button"
706
- tabindex="0"
707
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
730
+ <span class="pf-v5-c-form__label-text">Home URL</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">
731
+ <span
732
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
733
+ type="button"
734
+ role="button"
735
+ tabindex="0"
736
+ aria-label="More information for home URL field"
737
+ aria-describedby="form-demo-sections-repeatable-fields-section2-home-url"
738
+ >
739
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
740
+ </span></span>
708
741
  </div>
709
742
  <div class="pf-v5-c-form__group-control">
710
743
  <span class="pf-v5-c-form-control pf-m-required">
@@ -731,14 +764,17 @@ subsection: forms
731
764
  class="pf-v5-c-form__label"
732
765
  for="form-demo-sections-complex-form-name"
733
766
  >
734
- <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
735
- class="pf-v5-c-form__group-label-help"
736
- aria-label="More information for name field"
737
- aria-describedby="form-demo-sections-complex-form-name"
738
- role="button"
739
- type="button"
740
- tabindex="0"
741
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
767
+ <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">
768
+ <span
769
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
770
+ type="button"
771
+ role="button"
772
+ tabindex="0"
773
+ aria-label="More information for name field"
774
+ aria-describedby="form-demo-sections-complex-form-name"
775
+ >
776
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
777
+ </span></span>
742
778
  </div>
743
779
  <div class="pf-v5-c-form__group-control">
744
780
  <span class="pf-v5-c-form-control pf-m-required">
@@ -757,14 +793,17 @@ subsection: forms
757
793
  class="pf-v5-c-form__label"
758
794
  for="form-demo-sections-complex-form-labels"
759
795
  >
760
- <span class="pf-v5-c-form__label-text">Labels</span></label>&nbsp;<span
761
- class="pf-v5-c-form__group-label-help"
762
- aria-label="More information for labels field"
763
- aria-describedby="form-demo-sections-complex-form-labels"
764
- role="button"
765
- type="button"
766
- tabindex="0"
767
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
796
+ <span class="pf-v5-c-form__label-text">Labels</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
797
+ <span
798
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
799
+ type="button"
800
+ role="button"
801
+ tabindex="0"
802
+ aria-label="More information for labels field"
803
+ aria-describedby="form-demo-sections-complex-form-labels"
804
+ >
805
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
806
+ </span></span>
768
807
  </div>
769
808
  <div class="pf-v5-c-form__group-control">
770
809
  <div
@@ -789,7 +828,7 @@ subsection: forms
789
828
  </span>
790
829
  <span class="pf-v5-c-label__actions">
791
830
  <button
792
- class="pf-v5-c-button pf-m-plain"
831
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
793
832
  type="button"
794
833
  id="-label-1-button"
795
834
  aria-label="Remove"
@@ -810,7 +849,7 @@ subsection: forms
810
849
  </span>
811
850
  <span class="pf-v5-c-label__actions">
812
851
  <button
813
- class="pf-v5-c-button pf-m-plain"
852
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
814
853
  type="button"
815
854
  id="-label-2-button"
816
855
  aria-label="Remove"
@@ -1207,6 +1246,9 @@ subsection: forms
1207
1246
  class="pf-v5-c-helper-text__item"
1208
1247
  id="form-demo-sections-complex-form-routing-create-route-helper"
1209
1248
  >
1249
+ <span class="pf-v5-c-helper-text__item-icon">
1250
+ <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
1251
+ </span>
1210
1252
  <span
1211
1253
  class="pf-v5-c-helper-text__item-text"
1212
1254
  >Exposes your appplication at a public URL.</span>
@@ -1237,6 +1279,9 @@ subsection: forms
1237
1279
  class="pf-v5-c-helper-text__item"
1238
1280
  id="form-demo-sections-complex-form-routing-hostname-helper"
1239
1281
  >
1282
+ <span class="pf-v5-c-helper-text__item-icon">
1283
+ <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
1284
+ </span>
1240
1285
  <span
1241
1286
  class="pf-v5-c-helper-text__item-text"
1242
1287
  >Public hostname for the route. If not specified, a hostname is generated.</span>
@@ -1269,6 +1314,9 @@ subsection: forms
1269
1314
  class="pf-v5-c-helper-text__item"
1270
1315
  id="form-demo-sections-complex-form-routing-path-helper"
1271
1316
  >
1317
+ <span class="pf-v5-c-helper-text__item-icon">
1318
+ <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
1319
+ </span>
1272
1320
  <span
1273
1321
  class="pf-v5-c-helper-text__item-text"
1274
1322
  >Path that the router watches to route traffic to the service.</span>
@@ -1311,6 +1359,9 @@ subsection: forms
1311
1359
  class="pf-v5-c-helper-text__item"
1312
1360
  id="form-demo-sections-complex-form-routing-security-helper"
1313
1361
  >
1362
+ <span class="pf-v5-c-helper-text__item-icon">
1363
+ <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
1364
+ </span>
1314
1365
  <span
1315
1366
  class="pf-v5-c-helper-text__item-text"
1316
1367
  >Routes can be secured using several TLS termination types for serving certificates.</span>