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

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