@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/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
@@ -785,11 +824,14 @@ subsection: forms
785
824
  <span class="pf-v5-c-label__icon">
786
825
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
787
826
  </span>
788
- <span class="pf-v5-c-label__text">prometheus=k8s</span>
827
+ <span
828
+ class="pf-v5-c-label__text"
829
+ id="-label-1-text"
830
+ >prometheus=k8s</span>
789
831
  </span>
790
832
  <span class="pf-v5-c-label__actions">
791
833
  <button
792
- class="pf-v5-c-button pf-m-plain"
834
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
793
835
  type="button"
794
836
  id="-label-1-button"
795
837
  aria-label="Remove"
@@ -806,11 +848,11 @@ subsection: forms
806
848
  <span class="pf-v5-c-label__icon">
807
849
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
808
850
  </span>
809
- <span class="pf-v5-c-label__text">new</span>
851
+ <span class="pf-v5-c-label__text" id="-label-2-text">new</span>
810
852
  </span>
811
853
  <span class="pf-v5-c-label__actions">
812
854
  <button
813
- class="pf-v5-c-button pf-m-plain"
855
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
814
856
  type="button"
815
857
  id="-label-2-button"
816
858
  aria-label="Remove"
@@ -1207,6 +1249,9 @@ subsection: forms
1207
1249
  class="pf-v5-c-helper-text__item"
1208
1250
  id="form-demo-sections-complex-form-routing-create-route-helper"
1209
1251
  >
1252
+ <span class="pf-v5-c-helper-text__item-icon">
1253
+ <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
1254
+ </span>
1210
1255
  <span
1211
1256
  class="pf-v5-c-helper-text__item-text"
1212
1257
  >Exposes your appplication at a public URL.</span>
@@ -1237,6 +1282,9 @@ subsection: forms
1237
1282
  class="pf-v5-c-helper-text__item"
1238
1283
  id="form-demo-sections-complex-form-routing-hostname-helper"
1239
1284
  >
1285
+ <span class="pf-v5-c-helper-text__item-icon">
1286
+ <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
1287
+ </span>
1240
1288
  <span
1241
1289
  class="pf-v5-c-helper-text__item-text"
1242
1290
  >Public hostname for the route. If not specified, a hostname is generated.</span>
@@ -1269,6 +1317,9 @@ subsection: forms
1269
1317
  class="pf-v5-c-helper-text__item"
1270
1318
  id="form-demo-sections-complex-form-routing-path-helper"
1271
1319
  >
1320
+ <span class="pf-v5-c-helper-text__item-icon">
1321
+ <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
1322
+ </span>
1272
1323
  <span
1273
1324
  class="pf-v5-c-helper-text__item-text"
1274
1325
  >Path that the router watches to route traffic to the service.</span>
@@ -1311,6 +1362,9 @@ subsection: forms
1311
1362
  class="pf-v5-c-helper-text__item"
1312
1363
  id="form-demo-sections-complex-form-routing-security-helper"
1313
1364
  >
1365
+ <span class="pf-v5-c-helper-text__item-icon">
1366
+ <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
1367
+ </span>
1314
1368
  <span
1315
1369
  class="pf-v5-c-helper-text__item-text"
1316
1370
  >Routes can be secured using several TLS termination types for serving certificates.</span>