@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.40

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 (340) hide show
  1. package/RELEASE-NOTES.md +18 -1
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/images/pfbg-icon.svg +1 -0
  4. package/assets/pficon/pficon.scss +7 -2
  5. package/assets/pficon/pficon.woff2 +0 -0
  6. package/base/_base.scss +0 -18
  7. package/base/_chart-globals.scss +0 -4
  8. package/base/_common.scss +0 -22
  9. package/base/_fa-icons.scss +1 -2
  10. package/base/_fonts.scss +22 -27
  11. package/base/_globals.scss +92 -86
  12. package/base/_icons.scss +1 -28
  13. package/base/_svg-icons.scss +6 -0
  14. package/base/_variables.scss +4 -4
  15. package/base/patternfly-common.css +0 -10
  16. package/base/patternfly-fa-icons.css +1 -1
  17. package/base/patternfly-fonts.css +17 -17
  18. package/base/patternfly-globals.css +35 -41
  19. package/base/patternfly-icons.css +8 -22
  20. package/base/patternfly-pf-icons.css +6 -2
  21. package/base/patternfly-themes.css +0 -42
  22. package/base/patternfly-variables.css +3 -3
  23. package/base/themes/dark/_globals.scss +1 -1
  24. package/base/themes/dark/_variables.scss +1 -1
  25. package/components/AboutModalBox/about-modal-box.css +20 -50
  26. package/components/AboutModalBox/about-modal-box.scss +22 -14
  27. package/components/Accordion/accordion.css +2 -0
  28. package/components/Accordion/accordion.scss +2 -0
  29. package/components/Alert/alert.css +17 -8
  30. package/components/Alert/alert.scss +21 -7
  31. package/components/Alert/themes/dark/alert.scss +1 -1
  32. package/components/AppLauncher/app-launcher.css +2 -0
  33. package/components/AppLauncher/app-launcher.scss +2 -0
  34. package/components/Avatar/avatar.scss +2 -2
  35. package/components/BackgroundImage/background-image.css +8 -35
  36. package/components/BackgroundImage/background-image.scss +17 -43
  37. package/components/Banner/banner.css +14 -52
  38. package/components/Banner/banner.scss +9 -13
  39. package/components/Breadcrumb/breadcrumb.css +2 -0
  40. package/components/Breadcrumb/breadcrumb.scss +2 -0
  41. package/components/CalendarMonth/calendar-month.css +2 -2
  42. package/components/CalendarMonth/calendar-month.scss +3 -3
  43. package/components/Card/card.css +115 -50
  44. package/components/Card/card.scss +164 -63
  45. package/components/Chip/chip.css +33 -24
  46. package/components/Chip/chip.scss +40 -31
  47. package/components/ChipGroup/chip-group.css +27 -17
  48. package/components/ChipGroup/chip-group.scss +36 -22
  49. package/components/Content/content.css +11 -5
  50. package/components/Content/content.scss +17 -9
  51. package/components/ContextSelector/context-selector.css +13 -6
  52. package/components/ContextSelector/context-selector.scss +14 -7
  53. package/components/DataList/data-list-grid.css +7 -7
  54. package/components/DataList/data-list-grid.scss +1 -1
  55. package/components/DataList/data-list.css +46 -40
  56. package/components/DataList/data-list.scss +37 -28
  57. package/components/DatePicker/date-picker.css +0 -8
  58. package/components/DatePicker/date-picker.scss +0 -9
  59. package/components/DescriptionList/description-list.css +7 -7
  60. package/components/DescriptionList/description-list.scss +7 -7
  61. package/components/Divider/divider.css +2 -2
  62. package/components/Divider/divider.scss +3 -3
  63. package/components/Drawer/drawer.css +15 -16
  64. package/components/Drawer/drawer.scss +2 -3
  65. package/components/Dropdown/dropdown.css +26 -25
  66. package/components/Dropdown/dropdown.scss +17 -18
  67. package/components/DualListSelector/dual-list-selector.css +1 -1
  68. package/components/DualListSelector/dual-list-selector.scss +1 -1
  69. package/components/EmptyState/empty-state.css +46 -52
  70. package/components/EmptyState/empty-state.scss +58 -57
  71. package/components/ExpandableSection/expandable-section.css +2 -0
  72. package/components/ExpandableSection/expandable-section.scss +2 -0
  73. package/components/Form/form.css +14 -12
  74. package/components/Form/form.scss +9 -7
  75. package/components/FormControl/form-control.css +2 -5
  76. package/components/FormControl/themes/dark/form-control.scss +2 -6
  77. package/components/HelperText/helper-text.css +4 -0
  78. package/components/HelperText/helper-text.scss +5 -0
  79. package/components/Hint/hint.css +2 -2
  80. package/components/Hint/hint.scss +2 -2
  81. package/components/Icon/icon.css +3 -3
  82. package/components/Icon/icon.scss +3 -3
  83. package/components/InputGroup/input-group.css +61 -85
  84. package/components/InputGroup/input-group.scss +55 -61
  85. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  86. package/components/Label/label.css +49 -36
  87. package/components/Label/label.scss +53 -38
  88. package/components/Label/themes/dark/label.scss +2 -2
  89. package/components/LabelGroup/label-group.css +26 -22
  90. package/components/LabelGroup/label-group.scss +31 -26
  91. package/components/LogViewer/log-viewer.css +0 -38
  92. package/components/Login/login.css +20 -60
  93. package/components/Login/login.scss +16 -18
  94. package/components/Login/themes/dark/login.scss +4 -0
  95. package/components/Masthead/masthead.css +4 -42
  96. package/components/Masthead/masthead.scss +4 -4
  97. package/components/Menu/menu.css +9 -6
  98. package/components/Menu/menu.scss +34 -31
  99. package/components/MenuToggle/menu-toggle.css +3 -1
  100. package/components/MenuToggle/menu-toggle.scss +3 -1
  101. package/components/ModalBox/modal-box.css +12 -11
  102. package/components/ModalBox/modal-box.scss +14 -14
  103. package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
  104. package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
  105. package/components/Nav/nav.css +1 -1
  106. package/components/Nav/nav.scss +2 -2
  107. package/components/NotificationDrawer/notification-drawer.css +8 -8
  108. package/components/NotificationDrawer/notification-drawer.scss +8 -8
  109. package/components/OptionsMenu/options-menu.css +8 -10
  110. package/components/OptionsMenu/options-menu.scss +9 -11
  111. package/components/Page/page.css +101 -122
  112. package/components/Page/page.scss +49 -21
  113. package/components/Pagination/pagination.css +2 -110
  114. package/components/Pagination/pagination.scss +0 -6
  115. package/components/Popover/popover.css +31 -37
  116. package/components/Popover/popover.scss +32 -37
  117. package/components/Popover/themes/dark/popover.scss +3 -9
  118. package/components/Progress/progress.css +13 -10
  119. package/components/Progress/progress.scss +13 -10
  120. package/components/ProgressStepper/progress-stepper.css +5 -5
  121. package/components/ProgressStepper/progress-stepper.scss +5 -5
  122. package/components/SearchInput/search-input.css +4 -2
  123. package/components/SearchInput/search-input.scss +4 -2
  124. package/components/Select/select.css +1 -1
  125. package/components/Select/select.scss +1 -1
  126. package/components/Sidebar/sidebar.css +69 -26
  127. package/components/Sidebar/sidebar.scss +84 -27
  128. package/components/SimpleList/simple-list.css +1 -1
  129. package/components/SimpleList/simple-list.scss +2 -2
  130. package/components/Spinner/spinner.css +4 -4
  131. package/components/Spinner/spinner.scss +4 -4
  132. package/components/Table/table-grid.css +28 -28
  133. package/components/Table/table-scrollable.css +31 -26
  134. package/components/Table/table-scrollable.scss +33 -28
  135. package/components/Table/table-tree-view.css +14 -4
  136. package/components/Table/table-tree-view.scss +15 -0
  137. package/components/Table/table.css +67 -65
  138. package/components/Table/table.scss +65 -62
  139. package/components/Tabs/tabs.css +0 -4
  140. package/components/Tabs/tabs.scss +0 -7
  141. package/components/TextInputGroup/text-input-group.css +6 -4
  142. package/components/TextInputGroup/text-input-group.scss +6 -5
  143. package/components/Tile/tile.css +1 -1
  144. package/components/Tile/tile.scss +1 -1
  145. package/components/Timestamp/timestamp.css +3 -3
  146. package/components/Timestamp/timestamp.scss +3 -3
  147. package/components/Toolbar/toolbar.css +78 -43
  148. package/components/Toolbar/toolbar.scss +50 -10
  149. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  150. package/components/Tooltip/tooltip.css +7 -12
  151. package/components/Tooltip/tooltip.scss +6 -3
  152. package/components/TreeView/tree-view.css +7 -15
  153. package/components/TreeView/tree-view.scss +7 -18
  154. package/components/Wizard/wizard.css +16 -39
  155. package/components/Wizard/wizard.scss +20 -2
  156. package/docs/components/AboutModalBox/examples/AboutModalBox.md +20 -14
  157. package/docs/components/Accordion/examples/Accordion.md +12 -12
  158. package/docs/components/ActionList/examples/ActionList.md +6 -6
  159. package/docs/components/Alert/examples/Alert.md +29 -29
  160. package/docs/components/AlertGroup/examples/AlertGroup.md +15 -15
  161. package/docs/components/AppLauncher/examples/application-launcher.md +52 -46
  162. package/docs/components/Avatar/examples/Avatar.md +11 -11
  163. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  164. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  165. package/docs/components/BackgroundImage/examples/BackgroundImage.md +13 -29
  166. package/docs/components/Badge/examples/Badge.md +5 -5
  167. package/docs/components/Banner/examples/Banner.md +8 -8
  168. package/docs/components/Brand/examples/Brand.md +9 -9
  169. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  170. package/docs/components/Button/examples/Button.md +35 -35
  171. package/docs/components/CalendarMonth/examples/CalendarMonth.md +301 -284
  172. package/docs/components/Card/examples/Card.md +676 -116
  173. package/docs/components/Check/examples/Check.md +16 -19
  174. package/docs/components/Chip/examples/Chip.md +70 -52
  175. package/docs/components/ChipGroup/examples/ChipGroup.md +452 -673
  176. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  177. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  178. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  179. package/docs/components/Content/examples/Content.md +37 -9
  180. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  181. package/docs/components/ContextSelector/examples/context-selector.md +87 -80
  182. package/docs/components/DataList/examples/DataList.md +239 -202
  183. package/docs/components/DatePicker/examples/DatePicker.md +139 -104
  184. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  185. package/docs/components/Divider/examples/Divider.md +10 -10
  186. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  187. package/docs/components/Drawer/examples/Drawer.md +43 -43
  188. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  189. package/docs/components/Dropdown/examples/Dropdown.md +125 -100
  190. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  191. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  192. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  193. package/docs/components/FileUpload/examples/FileUpload.md +146 -105
  194. package/docs/components/Form/examples/Form.md +152 -130
  195. package/docs/components/FormControl/examples/FormControl.md +21 -20
  196. package/docs/components/HelperText/examples/HelperText.md +24 -35
  197. package/docs/components/Hint/examples/Hint.md +7 -7
  198. package/docs/components/Icon/examples/Icon.md +11 -12
  199. package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
  200. package/docs/components/InputGroup/examples/InputGroup.md +229 -179
  201. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  202. package/docs/components/Label/examples/Label.md +1427 -746
  203. package/docs/components/LabelGroup/examples/LabelGroup.md +295 -242
  204. package/docs/components/List/examples/List.md +18 -18
  205. package/docs/components/LogViewer/examples/LogViewer.md +79 -74
  206. package/docs/components/Login/examples/Login.md +103 -181
  207. package/docs/components/Masthead/examples/masthead.md +9 -9
  208. package/docs/components/Menu/examples/Menu.md +83 -80
  209. package/docs/components/MenuToggle/examples/MenuToggle.md +29 -28
  210. package/docs/components/ModalBox/examples/ModalBox.md +113 -92
  211. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +27 -26
  212. package/docs/components/Nav/examples/Navigation.md +69 -69
  213. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  214. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +64 -64
  215. package/docs/components/NumberInput/examples/NumberInput.md +311 -239
  216. package/docs/components/OptionsMenu/examples/options-menu.md +28 -28
  217. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  218. package/docs/components/Page/examples/Page.css +7 -1
  219. package/docs/components/Page/examples/Page.md +81 -54
  220. package/docs/components/Pagination/examples/Pagination.md +27 -27
  221. package/docs/components/Panel/examples/Panel.md +10 -10
  222. package/docs/components/Popover/examples/Popover.md +206 -149
  223. package/docs/components/Progress/examples/Progress.md +32 -61
  224. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -39
  225. package/docs/components/Radio/examples/Radio.md +12 -11
  226. package/docs/components/SearchInput/examples/SearchInput.md +185 -148
  227. package/docs/components/Select/examples/Select.md +368 -313
  228. package/docs/components/Sidebar/examples/Sidebar.md +70 -14
  229. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  230. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  231. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  232. package/docs/components/Slider/examples/Slider.md +84 -62
  233. package/docs/components/Spinner/examples/Spinner.md +24 -24
  234. package/docs/components/Switch/examples/Switch.md +19 -19
  235. package/docs/components/TabContent/examples/TabContent.md +13 -13
  236. package/docs/components/Table/examples/Table.css +4 -0
  237. package/docs/components/Table/examples/Table.md +5212 -5750
  238. package/docs/components/Tabs/examples/Tabs.md +155 -155
  239. package/docs/components/TextInputGroup/examples/TextInputGroup.md +523 -406
  240. package/docs/components/Tile/examples/Tile.md +16 -17
  241. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  242. package/docs/components/Title/examples/Title.md +17 -17
  243. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  244. package/docs/components/Toolbar/examples/Toolbar.md +848 -726
  245. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  246. package/docs/components/TreeView/examples/TreeView.md +34 -34
  247. package/docs/components/Truncate/examples/Truncate.md +4 -5
  248. package/docs/components/Wizard/examples/Wizard.md +119 -127
  249. package/docs/demos/AboutModal/examples/AboutModal.md +4 -5
  250. package/docs/demos/Alert/examples/Alert.md +118 -71
  251. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  252. package/docs/demos/Banner/examples/Banner.md +8 -9
  253. package/docs/demos/Card/examples/Card.md +216 -153
  254. package/docs/demos/CardView/examples/CardView.md +57 -30
  255. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  256. package/docs/demos/Dashboard/examples/Dashboard.md +51 -33
  257. package/docs/demos/DataList/examples/DataList.md +312 -255
  258. package/docs/demos/DescriptionList/examples/DescriptionList.md +33 -22
  259. package/docs/demos/Drawer/examples/Drawer.md +24 -22
  260. package/docs/demos/Form/examples/BasicForms.md +220 -213
  261. package/docs/demos/HelperText/examples/HelperText.md +16 -14
  262. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  263. package/docs/demos/Masthead/examples/Masthead.md +302 -284
  264. package/docs/demos/Modal/examples/Modal.md +54 -66
  265. package/docs/demos/Nav/examples/Nav.md +47 -47
  266. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +70 -58
  267. package/docs/demos/Page/examples/Page.md +982 -51
  268. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +22 -18
  269. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +121 -106
  270. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +345 -311
  271. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  272. package/docs/demos/Table/examples/Table.md +3323 -1288
  273. package/docs/demos/Tabs/examples/Tabs.md +141 -90
  274. package/docs/demos/Toolbar/examples/Toolbar.md +1994 -329
  275. package/docs/demos/Wizard/examples/Wizard.md +289 -266
  276. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  277. package/docs/layouts/Flex/examples/Flex.md +98 -98
  278. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  279. package/docs/layouts/Grid/examples/Grid.md +9 -9
  280. package/docs/layouts/Level/examples/Level.md +5 -5
  281. package/docs/layouts/Split/examples/Split.md +7 -7
  282. package/docs/layouts/Stack/examples/Stack.md +6 -6
  283. package/docs/utilities/Accessibility/examples/Accessibility.md +5 -5
  284. package/docs/utilities/Alignment/examples/Alignment.md +7 -7
  285. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +13 -13
  286. package/docs/utilities/BoxShadow/examples/box-shadow.md +23 -23
  287. package/docs/utilities/Display/examples/Display.md +12 -12
  288. package/docs/utilities/Flex/examples/Flex.md +35 -35
  289. package/docs/utilities/Float/examples/Float.md +5 -5
  290. package/docs/utilities/Sizing/examples/Sizing.md +51 -51
  291. package/docs/utilities/Spacing/examples/Spacing.md +35 -35
  292. package/docs/utilities/Text/examples/Text.md +31 -31
  293. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  294. package/layouts/Gallery/gallery.css +1 -1
  295. package/layouts/Gallery/gallery.scss +1 -1
  296. package/layouts/Grid/grid.css +7 -7
  297. package/layouts/Grid/grid.scss +2 -2
  298. package/package.json +59 -65
  299. package/patternfly-addons.css +48 -48
  300. package/{patternfly-base-no-reset.css → patternfly-base-no-globals.css} +28 -73
  301. package/{patternfly-base-no-reset.scss → patternfly-base-no-globals.scss} +1 -0
  302. package/patternfly-base.css +63 -114
  303. package/{patternfly-no-reset.css → patternfly-no-globals.css} +1179 -2293
  304. package/{patternfly-no-reset.scss → patternfly-no-globals.scss} +1 -0
  305. package/patternfly.css +1207 -2327
  306. package/patternfly.min.css +1 -1
  307. package/patternfly.min.css.map +1 -1
  308. package/sass-utilities/functions.scss +8 -24
  309. package/sass-utilities/mixins.scss +15 -39
  310. package/sass-utilities/placeholders.scss +0 -23
  311. package/sass-utilities/scss-variables.scss +5 -6
  312. package/sass-utilities/themes/dark/placeholders.scss +0 -22
  313. package/sass-utilities/themes/dark/scss-variables.scss +1 -1
  314. package/utilities/Spacing/spacing.scss +2 -2
  315. package/utilities/Text/text.css +48 -48
  316. package/utilities/Text/text.scss +6 -6
  317. package/utilities/Text/themes/dark/text.scss +2 -2
  318. package/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff +0 -0
  319. package/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff +0 -0
  320. package/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff +0 -0
  321. package/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff +0 -0
  322. package/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff +0 -0
  323. package/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff +0 -0
  324. package/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff +0 -0
  325. package/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff +0 -0
  326. package/assets/fonts/RedHatText/RedHatText-Bold.woff +0 -0
  327. package/assets/fonts/RedHatText/RedHatText-BoldItalic.woff +0 -0
  328. package/assets/fonts/RedHatText/RedHatText-Italic.woff +0 -0
  329. package/assets/fonts/RedHatText/RedHatText-Medium.woff +0 -0
  330. package/assets/fonts/RedHatText/RedHatText-MediumItalic.woff +0 -0
  331. package/assets/fonts/RedHatText/RedHatText-Regular.woff +0 -0
  332. package/assets/fonts/webfonts/fa-solid-900.woff +0 -0
  333. package/assets/pficon/pficon.woff +0 -0
  334. package/base/_shield-inheritable.scss +0 -69
  335. package/base/_shield-noninheritable.scss +0 -13
  336. package/base/patternfly-shield-inheritable.css +0 -66
  337. package/base/patternfly-shield-inheritable.scss +0 -4
  338. package/base/patternfly-shield-noninheritable.css +0 -9
  339. package/base/patternfly-shield-noninheritable.scss +0 -4
  340. package/sass-utilities/bs-variables.scss +0 -709
package/docs/components/Tabs/examples/Tabs.md CHANGED
@@ -96,10 +96,10 @@ cssPrefix: pf-c-tabs
96
96
 
97
97
  ### Default tabs usage
98
98
 
99
- | Class | Applied to | Outcome |
100
- | --------------------- | ------------------- | --------------------------------------------------------------------------- |
101
- | `.pf-m-disabled` | `a.pf-c-tabs__link` | Modifies a tabs link for disabled styles. |
102
- | `.pf-m-aria-disabled` | `.pf-c-tabs__link` | Modifies a tabs link for disabled styles, but is still hoverable/focusable. |
99
+ | Class | Applied to | Outcome |
100
+ | -- | -- | -- |
101
+ | `.pf-m-disabled` | `a.pf-c-tabs__link` | Modifies a tabs link for disabled styles. |
102
+ | `.pf-m-aria-disabled` | `.pf-c-tabs__link` | Modifies a tabs link for disabled styles, but is still hoverable/focusable. |
103
103
 
104
104
  ## Overflow
105
105
 
@@ -213,14 +213,14 @@ cssPrefix: pf-c-tabs
213
213
 
214
214
  ### Overflow beginning of list usage
215
215
 
216
- | Class | Applied to | Outcome |
217
- | --------------------------- | ------------ | ----------------------------------------- |
218
- | `.pf-m-scrollable` | `.pf-c-tabs` | Enables the directional scroll buttons. |
219
- | `.pf-c-tabs__scroll-button` | `<button>` | Initiates a tabs component scroll button. |
216
+ | Class | Applied to | Outcome |
217
+ | -- | -- | -- |
218
+ | `.pf-m-scrollable` | `.pf-c-tabs` | Enables the directional scroll buttons. |
219
+ | `.pf-c-tabs__scroll-button` | `<button>` | Initiates a tabs component scroll button. |
220
220
 
221
221
  ### Horizontal overflow example
222
222
 
223
- ```html isBeta
223
+ ```html
224
224
  <div class="pf-c-tabs pf-m-overflow" id="horizontal-overflow">
225
225
  <ul class="pf-c-tabs__list">
226
226
  <li class="pf-c-tabs__item">
@@ -297,7 +297,7 @@ cssPrefix: pf-c-tabs
297
297
 
298
298
  ### Horizontal overflow expanded example
299
299
 
300
- ```html isBeta
300
+ ```html
301
301
  <div class="pf-c-tabs pf-m-overflow" id="horizontal-overflow-expanded">
302
302
  <ul class="pf-c-tabs__list">
303
303
  <li class="pf-c-tabs__item">
@@ -375,7 +375,7 @@ cssPrefix: pf-c-tabs
375
375
 
376
376
  ### Horizontal overflow selected example
377
377
 
378
- ```html isBeta
378
+ ```html
379
379
  <div class="pf-c-tabs pf-m-overflow" id="horizontal-overflow-selected">
380
380
  <ul class="pf-c-tabs__list">
381
381
  <li class="pf-c-tabs__item">
@@ -1653,10 +1653,10 @@ cssPrefix: pf-c-tabs
1653
1653
 
1654
1654
  ### Insets usage
1655
1655
 
1656
- | Class | Applied to | Outcome |
1657
- | ------------------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------- |
1656
+ | Class | Applied to | Outcome |
1657
+ | -- | -- | -- |
1658
1658
  | `.pf-m-inset-{none, sm, md, lg, xl, 2xl, 3xl}{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of other adjacent components. |
1659
- | `.pf-m-page-insets` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. |
1659
+ | `.pf-m-page-insets` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. |
1660
1660
 
1661
1661
  ## Icons
1662
1662
 
@@ -2318,9 +2318,9 @@ cssPrefix: pf-c-tabs
2318
2318
 
2319
2319
  ### Filled usage
2320
2320
 
2321
- | Class | Applied to | Outcome |
2322
- | ------------ | ------------ | ----------------------------------------------------------- |
2323
- | `.pf-m-fill` | `.pf-c-tabs` | Modifies the tabs to fill the available space. **Required** |
2321
+ | Class | Applied to | Outcome |
2322
+ | -- | -- | -- |
2323
+ | `.pf-m-fill` | `.pf-c-tabs` | Modifies the tabs to fill the available space. **Required** |
2324
2324
 
2325
2325
  ## Tabs as navigation
2326
2326
 
@@ -2585,7 +2585,7 @@ cssPrefix: pf-c-tabs
2585
2585
 
2586
2586
  ### Help button example
2587
2587
 
2588
- ```html isBeta
2588
+ ```html
2589
2589
  <div class="pf-c-tabs pf-m-scrollable" id="help-button-default-example">
2590
2590
  <button
2591
2591
  class="pf-c-tabs__scroll-button"
@@ -2604,7 +2604,7 @@ cssPrefix: pf-c-tabs
2604
2604
  >
2605
2605
  <span class="pf-c-tabs__item-text">Users</span>
2606
2606
  </button>
2607
- <span class="pf-c-tabs__item-action pf-m-help">
2607
+ <span class="pf-c-tabs__item-action">
2608
2608
  <button
2609
2609
  class="pf-c-button pf-m-plain"
2610
2610
  type="button"
@@ -2624,7 +2624,7 @@ cssPrefix: pf-c-tabs
2624
2624
  >
2625
2625
  <span class="pf-c-tabs__item-text">Containers</span>
2626
2626
  </button>
2627
- <span class="pf-c-tabs__item-action pf-m-help">
2627
+ <span class="pf-c-tabs__item-action">
2628
2628
  <button
2629
2629
  class="pf-c-button pf-m-plain"
2630
2630
  type="button"
@@ -2644,7 +2644,7 @@ cssPrefix: pf-c-tabs
2644
2644
  >
2645
2645
  <span class="pf-c-tabs__item-text">Database</span>
2646
2646
  </button>
2647
- <span class="pf-c-tabs__item-action pf-m-help">
2647
+ <span class="pf-c-tabs__item-action">
2648
2648
  <button
2649
2649
  class="pf-c-button pf-m-plain"
2650
2650
  type="button"
@@ -2666,7 +2666,7 @@ cssPrefix: pf-c-tabs
2666
2666
  >
2667
2667
  <span class="pf-c-tabs__item-text">Disabled</span>
2668
2668
  </button>
2669
- <span class="pf-c-tabs__item-action pf-m-help">
2669
+ <span class="pf-c-tabs__item-action">
2670
2670
  <button
2671
2671
  class="pf-c-button pf-m-plain"
2672
2672
  type="button"
@@ -2687,7 +2687,7 @@ cssPrefix: pf-c-tabs
2687
2687
  >
2688
2688
  <span class="pf-c-tabs__item-text">ARIA disabled</span>
2689
2689
  </button>
2690
- <span class="pf-c-tabs__item-action pf-m-help">
2690
+ <span class="pf-c-tabs__item-action">
2691
2691
  <button
2692
2692
  class="pf-c-button pf-m-plain"
2693
2693
  type="button"
@@ -2708,7 +2708,7 @@ cssPrefix: pf-c-tabs
2708
2708
  >
2709
2709
  <span class="pf-c-tabs__item-text">Help disabled</span>
2710
2710
  </button>
2711
- <span class="pf-c-tabs__item-action pf-m-help">
2711
+ <span class="pf-c-tabs__item-action">
2712
2712
  <button
2713
2713
  class="pf-c-button pf-m-plain"
2714
2714
  type="button"
@@ -2729,7 +2729,7 @@ cssPrefix: pf-c-tabs
2729
2729
  >
2730
2730
  <span class="pf-c-tabs__item-text">Network</span>
2731
2731
  </button>
2732
- <span class="pf-c-tabs__item-action pf-m-help">
2732
+ <span class="pf-c-tabs__item-action">
2733
2733
  <button
2734
2734
  class="pf-c-button pf-m-plain"
2735
2735
  type="button"
@@ -2773,7 +2773,7 @@ cssPrefix: pf-c-tabs
2773
2773
  >
2774
2774
  <span class="pf-c-tabs__item-text">Users</span>
2775
2775
  </button>
2776
- <span class="pf-c-tabs__item-action pf-m-help">
2776
+ <span class="pf-c-tabs__item-action">
2777
2777
  <button
2778
2778
  class="pf-c-button pf-m-plain"
2779
2779
  type="button"
@@ -2793,7 +2793,7 @@ cssPrefix: pf-c-tabs
2793
2793
  >
2794
2794
  <span class="pf-c-tabs__item-text">Containers</span>
2795
2795
  </button>
2796
- <span class="pf-c-tabs__item-action pf-m-help">
2796
+ <span class="pf-c-tabs__item-action">
2797
2797
  <button
2798
2798
  class="pf-c-button pf-m-plain"
2799
2799
  type="button"
@@ -2813,7 +2813,7 @@ cssPrefix: pf-c-tabs
2813
2813
  >
2814
2814
  <span class="pf-c-tabs__item-text">Database</span>
2815
2815
  </button>
2816
- <span class="pf-c-tabs__item-action pf-m-help">
2816
+ <span class="pf-c-tabs__item-action">
2817
2817
  <button
2818
2818
  class="pf-c-button pf-m-plain"
2819
2819
  type="button"
@@ -2835,7 +2835,7 @@ cssPrefix: pf-c-tabs
2835
2835
  >
2836
2836
  <span class="pf-c-tabs__item-text">Disabled</span>
2837
2837
  </button>
2838
- <span class="pf-c-tabs__item-action pf-m-help">
2838
+ <span class="pf-c-tabs__item-action">
2839
2839
  <button
2840
2840
  class="pf-c-button pf-m-plain"
2841
2841
  type="button"
@@ -2856,7 +2856,7 @@ cssPrefix: pf-c-tabs
2856
2856
  >
2857
2857
  <span class="pf-c-tabs__item-text">ARIA disabled</span>
2858
2858
  </button>
2859
- <span class="pf-c-tabs__item-action pf-m-help">
2859
+ <span class="pf-c-tabs__item-action">
2860
2860
  <button
2861
2861
  class="pf-c-button pf-m-plain"
2862
2862
  type="button"
@@ -2877,7 +2877,7 @@ cssPrefix: pf-c-tabs
2877
2877
  >
2878
2878
  <span class="pf-c-tabs__item-text">Help disabled</span>
2879
2879
  </button>
2880
- <span class="pf-c-tabs__item-action pf-m-help">
2880
+ <span class="pf-c-tabs__item-action">
2881
2881
  <button
2882
2882
  class="pf-c-button pf-m-plain"
2883
2883
  type="button"
@@ -2898,7 +2898,7 @@ cssPrefix: pf-c-tabs
2898
2898
  >
2899
2899
  <span class="pf-c-tabs__item-text">Network</span>
2900
2900
  </button>
2901
- <span class="pf-c-tabs__item-action pf-m-help">
2901
+ <span class="pf-c-tabs__item-action">
2902
2902
  <button
2903
2903
  class="pf-c-button pf-m-plain"
2904
2904
  type="button"
@@ -2945,7 +2945,7 @@ cssPrefix: pf-c-tabs
2945
2945
  >
2946
2946
  <span class="pf-c-tabs__item-text">Users</span>
2947
2947
  </button>
2948
- <span class="pf-c-tabs__item-action pf-m-help">
2948
+ <span class="pf-c-tabs__item-action">
2949
2949
  <button
2950
2950
  class="pf-c-button pf-m-plain"
2951
2951
  type="button"
@@ -2965,7 +2965,7 @@ cssPrefix: pf-c-tabs
2965
2965
  >
2966
2966
  <span class="pf-c-tabs__item-text">Containers</span>
2967
2967
  </button>
2968
- <span class="pf-c-tabs__item-action pf-m-help">
2968
+ <span class="pf-c-tabs__item-action">
2969
2969
  <button
2970
2970
  class="pf-c-button pf-m-plain"
2971
2971
  type="button"
@@ -2985,7 +2985,7 @@ cssPrefix: pf-c-tabs
2985
2985
  >
2986
2986
  <span class="pf-c-tabs__item-text">Database</span>
2987
2987
  </button>
2988
- <span class="pf-c-tabs__item-action pf-m-help">
2988
+ <span class="pf-c-tabs__item-action">
2989
2989
  <button
2990
2990
  class="pf-c-button pf-m-plain"
2991
2991
  type="button"
@@ -3007,7 +3007,7 @@ cssPrefix: pf-c-tabs
3007
3007
  >
3008
3008
  <span class="pf-c-tabs__item-text">Disabled</span>
3009
3009
  </button>
3010
- <span class="pf-c-tabs__item-action pf-m-help">
3010
+ <span class="pf-c-tabs__item-action">
3011
3011
  <button
3012
3012
  class="pf-c-button pf-m-plain"
3013
3013
  type="button"
@@ -3028,7 +3028,7 @@ cssPrefix: pf-c-tabs
3028
3028
  >
3029
3029
  <span class="pf-c-tabs__item-text">ARIA disabled</span>
3030
3030
  </button>
3031
- <span class="pf-c-tabs__item-action pf-m-help">
3031
+ <span class="pf-c-tabs__item-action">
3032
3032
  <button
3033
3033
  class="pf-c-button pf-m-plain"
3034
3034
  type="button"
@@ -3049,7 +3049,7 @@ cssPrefix: pf-c-tabs
3049
3049
  >
3050
3050
  <span class="pf-c-tabs__item-text">Help disabled</span>
3051
3051
  </button>
3052
- <span class="pf-c-tabs__item-action pf-m-help">
3052
+ <span class="pf-c-tabs__item-action">
3053
3053
  <button
3054
3054
  class="pf-c-button pf-m-plain"
3055
3055
  type="button"
@@ -3070,7 +3070,7 @@ cssPrefix: pf-c-tabs
3070
3070
  >
3071
3071
  <span class="pf-c-tabs__item-text">Network</span>
3072
3072
  </button>
3073
- <span class="pf-c-tabs__item-action pf-m-help">
3073
+ <span class="pf-c-tabs__item-action">
3074
3074
  <button
3075
3075
  class="pf-c-button pf-m-plain"
3076
3076
  type="button"
@@ -3117,7 +3117,7 @@ cssPrefix: pf-c-tabs
3117
3117
  </span>
3118
3118
  <span class="pf-c-tabs__item-text">Users</span>
3119
3119
  </button>
3120
- <span class="pf-c-tabs__item-action pf-m-help">
3120
+ <span class="pf-c-tabs__item-action">
3121
3121
  <button
3122
3122
  class="pf-c-button pf-m-plain"
3123
3123
  type="button"
@@ -3140,7 +3140,7 @@ cssPrefix: pf-c-tabs
3140
3140
  </span>
3141
3141
  <span class="pf-c-tabs__item-text">Containers</span>
3142
3142
  </button>
3143
- <span class="pf-c-tabs__item-action pf-m-help">
3143
+ <span class="pf-c-tabs__item-action">
3144
3144
  <button
3145
3145
  class="pf-c-button pf-m-plain"
3146
3146
  type="button"
@@ -3163,7 +3163,7 @@ cssPrefix: pf-c-tabs
3163
3163
  </span>
3164
3164
  <span class="pf-c-tabs__item-text">Database</span>
3165
3165
  </button>
3166
- <span class="pf-c-tabs__item-action pf-m-help">
3166
+ <span class="pf-c-tabs__item-action">
3167
3167
  <button
3168
3168
  class="pf-c-button pf-m-plain"
3169
3169
  type="button"
@@ -3188,7 +3188,7 @@ cssPrefix: pf-c-tabs
3188
3188
  </span>
3189
3189
  <span class="pf-c-tabs__item-text">Disabled</span>
3190
3190
  </button>
3191
- <span class="pf-c-tabs__item-action pf-m-help">
3191
+ <span class="pf-c-tabs__item-action">
3192
3192
  <button
3193
3193
  class="pf-c-button pf-m-plain"
3194
3194
  type="button"
@@ -3212,7 +3212,7 @@ cssPrefix: pf-c-tabs
3212
3212
  </span>
3213
3213
  <span class="pf-c-tabs__item-text">ARIA disabled</span>
3214
3214
  </button>
3215
- <span class="pf-c-tabs__item-action pf-m-help">
3215
+ <span class="pf-c-tabs__item-action">
3216
3216
  <button
3217
3217
  class="pf-c-button pf-m-plain"
3218
3218
  type="button"
@@ -3236,7 +3236,7 @@ cssPrefix: pf-c-tabs
3236
3236
  </span>
3237
3237
  <span class="pf-c-tabs__item-text">Help disabled</span>
3238
3238
  </button>
3239
- <span class="pf-c-tabs__item-action pf-m-help">
3239
+ <span class="pf-c-tabs__item-action">
3240
3240
  <button
3241
3241
  class="pf-c-button pf-m-plain"
3242
3242
  type="button"
@@ -3260,7 +3260,7 @@ cssPrefix: pf-c-tabs
3260
3260
  </span>
3261
3261
  <span class="pf-c-tabs__item-text">Network</span>
3262
3262
  </button>
3263
- <span class="pf-c-tabs__item-action pf-m-help">
3263
+ <span class="pf-c-tabs__item-action">
3264
3264
  <button
3265
3265
  class="pf-c-button pf-m-plain"
3266
3266
  type="button"
@@ -3304,7 +3304,7 @@ cssPrefix: pf-c-tabs
3304
3304
  >
3305
3305
  <span class="pf-c-tabs__item-text">Users</span>
3306
3306
  </button>
3307
- <span class="pf-c-tabs__item-action pf-m-help">
3307
+ <span class="pf-c-tabs__item-action">
3308
3308
  <button
3309
3309
  class="pf-c-button pf-m-plain"
3310
3310
  type="button"
@@ -3324,7 +3324,7 @@ cssPrefix: pf-c-tabs
3324
3324
  >
3325
3325
  <span class="pf-c-tabs__item-text">Containers</span>
3326
3326
  </button>
3327
- <span class="pf-c-tabs__item-action pf-m-help">
3327
+ <span class="pf-c-tabs__item-action">
3328
3328
  <button
3329
3329
  class="pf-c-button pf-m-plain"
3330
3330
  type="button"
@@ -3344,7 +3344,7 @@ cssPrefix: pf-c-tabs
3344
3344
  >
3345
3345
  <span class="pf-c-tabs__item-text">Database</span>
3346
3346
  </button>
3347
- <span class="pf-c-tabs__item-action pf-m-help">
3347
+ <span class="pf-c-tabs__item-action">
3348
3348
  <button
3349
3349
  class="pf-c-button pf-m-plain"
3350
3350
  type="button"
@@ -3393,7 +3393,7 @@ cssPrefix: pf-c-tabs
3393
3393
  >
3394
3394
  <span class="pf-c-tabs__item-text">Users</span>
3395
3395
  </button>
3396
- <span class="pf-c-tabs__item-action pf-m-help">
3396
+ <span class="pf-c-tabs__item-action">
3397
3397
  <button
3398
3398
  class="pf-c-button pf-m-plain"
3399
3399
  type="button"
@@ -3413,7 +3413,7 @@ cssPrefix: pf-c-tabs
3413
3413
  >
3414
3414
  <span class="pf-c-tabs__item-text">Containers</span>
3415
3415
  </button>
3416
- <span class="pf-c-tabs__item-action pf-m-help">
3416
+ <span class="pf-c-tabs__item-action">
3417
3417
  <button
3418
3418
  class="pf-c-button pf-m-plain"
3419
3419
  type="button"
@@ -3433,7 +3433,7 @@ cssPrefix: pf-c-tabs
3433
3433
  >
3434
3434
  <span class="pf-c-tabs__item-text">Database</span>
3435
3435
  </button>
3436
- <span class="pf-c-tabs__item-action pf-m-help">
3436
+ <span class="pf-c-tabs__item-action">
3437
3437
  <button
3438
3438
  class="pf-c-button pf-m-plain"
3439
3439
  type="button"
@@ -3455,7 +3455,7 @@ cssPrefix: pf-c-tabs
3455
3455
  >
3456
3456
  <span class="pf-c-tabs__item-text">Disabled</span>
3457
3457
  </button>
3458
- <span class="pf-c-tabs__item-action pf-m-help">
3458
+ <span class="pf-c-tabs__item-action">
3459
3459
  <button
3460
3460
  class="pf-c-button pf-m-plain"
3461
3461
  type="button"
@@ -3476,7 +3476,7 @@ cssPrefix: pf-c-tabs
3476
3476
  >
3477
3477
  <span class="pf-c-tabs__item-text">ARIA disabled</span>
3478
3478
  </button>
3479
- <span class="pf-c-tabs__item-action pf-m-help">
3479
+ <span class="pf-c-tabs__item-action">
3480
3480
  <button
3481
3481
  class="pf-c-button pf-m-plain"
3482
3482
  type="button"
@@ -3497,7 +3497,7 @@ cssPrefix: pf-c-tabs
3497
3497
  >
3498
3498
  <span class="pf-c-tabs__item-text">Help disabled</span>
3499
3499
  </button>
3500
- <span class="pf-c-tabs__item-action pf-m-help">
3500
+ <span class="pf-c-tabs__item-action">
3501
3501
  <button
3502
3502
  class="pf-c-button pf-m-plain"
3503
3503
  type="button"
@@ -3518,7 +3518,7 @@ cssPrefix: pf-c-tabs
3518
3518
  >
3519
3519
  <span class="pf-c-tabs__item-text">Network</span>
3520
3520
  </button>
3521
- <span class="pf-c-tabs__item-action pf-m-help">
3521
+ <span class="pf-c-tabs__item-action">
3522
3522
  <button
3523
3523
  class="pf-c-button pf-m-plain"
3524
3524
  type="button"
@@ -3561,7 +3561,7 @@ cssPrefix: pf-c-tabs
3561
3561
  >
3562
3562
  <span class="pf-c-tabs__item-text">Users</span>
3563
3563
  </button>
3564
- <span class="pf-c-tabs__item-action pf-m-help">
3564
+ <span class="pf-c-tabs__item-action">
3565
3565
  <button
3566
3566
  class="pf-c-button pf-m-plain"
3567
3567
  type="button"
@@ -3581,7 +3581,7 @@ cssPrefix: pf-c-tabs
3581
3581
  >
3582
3582
  <span class="pf-c-tabs__item-text">Containers</span>
3583
3583
  </button>
3584
- <span class="pf-c-tabs__item-action pf-m-help">
3584
+ <span class="pf-c-tabs__item-action">
3585
3585
  <button
3586
3586
  class="pf-c-button pf-m-plain"
3587
3587
  type="button"
@@ -3601,7 +3601,7 @@ cssPrefix: pf-c-tabs
3601
3601
  >
3602
3602
  <span class="pf-c-tabs__item-text">Database</span>
3603
3603
  </button>
3604
- <span class="pf-c-tabs__item-action pf-m-help">
3604
+ <span class="pf-c-tabs__item-action">
3605
3605
  <button
3606
3606
  class="pf-c-button pf-m-plain"
3607
3607
  type="button"
@@ -3623,7 +3623,7 @@ cssPrefix: pf-c-tabs
3623
3623
  >
3624
3624
  <span class="pf-c-tabs__item-text">Disabled</span>
3625
3625
  </button>
3626
- <span class="pf-c-tabs__item-action pf-m-help">
3626
+ <span class="pf-c-tabs__item-action">
3627
3627
  <button
3628
3628
  class="pf-c-button pf-m-plain"
3629
3629
  type="button"
@@ -3644,7 +3644,7 @@ cssPrefix: pf-c-tabs
3644
3644
  >
3645
3645
  <span class="pf-c-tabs__item-text">ARIA disabled</span>
3646
3646
  </button>
3647
- <span class="pf-c-tabs__item-action pf-m-help">
3647
+ <span class="pf-c-tabs__item-action">
3648
3648
  <button
3649
3649
  class="pf-c-button pf-m-plain"
3650
3650
  type="button"
@@ -3665,7 +3665,7 @@ cssPrefix: pf-c-tabs
3665
3665
  >
3666
3666
  <span class="pf-c-tabs__item-text">Help disabled</span>
3667
3667
  </button>
3668
- <span class="pf-c-tabs__item-action pf-m-help">
3668
+ <span class="pf-c-tabs__item-action">
3669
3669
  <button
3670
3670
  class="pf-c-button pf-m-plain"
3671
3671
  type="button"
@@ -3686,7 +3686,7 @@ cssPrefix: pf-c-tabs
3686
3686
  >
3687
3687
  <span class="pf-c-tabs__item-text">Network</span>
3688
3688
  </button>
3689
- <span class="pf-c-tabs__item-action pf-m-help">
3689
+ <span class="pf-c-tabs__item-action">
3690
3690
  <button
3691
3691
  class="pf-c-button pf-m-plain"
3692
3692
  type="button"
@@ -3713,7 +3713,7 @@ cssPrefix: pf-c-tabs
3713
3713
 
3714
3714
  ### Close button example
3715
3715
 
3716
- ```html isBeta
3716
+ ```html
3717
3717
  <div class="pf-c-tabs pf-m-scrollable" id="close-button-default-example">
3718
3718
  <button
3719
3719
  class="pf-c-tabs__scroll-button"
@@ -4841,7 +4841,7 @@ cssPrefix: pf-c-tabs
4841
4841
 
4842
4842
  ### Help and close button example
4843
4843
 
4844
- ```html isBeta
4844
+ ```html
4845
4845
  <div class="pf-c-tabs pf-m-scrollable" id="help-close-button-default-example">
4846
4846
  <button
4847
4847
  class="pf-c-tabs__scroll-button"
@@ -4860,7 +4860,7 @@ cssPrefix: pf-c-tabs
4860
4860
  >
4861
4861
  <span class="pf-c-tabs__item-text">Users</span>
4862
4862
  </button>
4863
- <span class="pf-c-tabs__item-action pf-m-help">
4863
+ <span class="pf-c-tabs__item-action">
4864
4864
  <button
4865
4865
  class="pf-c-button pf-m-plain"
4866
4866
  type="button"
@@ -4892,7 +4892,7 @@ cssPrefix: pf-c-tabs
4892
4892
  >
4893
4893
  <span class="pf-c-tabs__item-text">Containers</span>
4894
4894
  </button>
4895
- <span class="pf-c-tabs__item-action pf-m-help">
4895
+ <span class="pf-c-tabs__item-action">
4896
4896
  <button
4897
4897
  class="pf-c-button pf-m-plain"
4898
4898
  type="button"
@@ -4924,7 +4924,7 @@ cssPrefix: pf-c-tabs
4924
4924
  >
4925
4925
  <span class="pf-c-tabs__item-text">Database</span>
4926
4926
  </button>
4927
- <span class="pf-c-tabs__item-action pf-m-help">
4927
+ <span class="pf-c-tabs__item-action">
4928
4928
  <button
4929
4929
  class="pf-c-button pf-m-plain"
4930
4930
  type="button"
@@ -4958,7 +4958,7 @@ cssPrefix: pf-c-tabs
4958
4958
  >
4959
4959
  <span class="pf-c-tabs__item-text">Disabled</span>
4960
4960
  </button>
4961
- <span class="pf-c-tabs__item-action pf-m-help">
4961
+ <span class="pf-c-tabs__item-action">
4962
4962
  <button
4963
4963
  class="pf-c-button pf-m-plain"
4964
4964
  type="button"
@@ -4991,7 +4991,7 @@ cssPrefix: pf-c-tabs
4991
4991
  >
4992
4992
  <span class="pf-c-tabs__item-text">ARIA disabled</span>
4993
4993
  </button>
4994
- <span class="pf-c-tabs__item-action pf-m-help">
4994
+ <span class="pf-c-tabs__item-action">
4995
4995
  <button
4996
4996
  class="pf-c-button pf-m-plain"
4997
4997
  type="button"
@@ -5024,7 +5024,7 @@ cssPrefix: pf-c-tabs
5024
5024
  >
5025
5025
  <span class="pf-c-tabs__item-text">Help disabled</span>
5026
5026
  </button>
5027
- <span class="pf-c-tabs__item-action pf-m-help">
5027
+ <span class="pf-c-tabs__item-action">
5028
5028
  <button
5029
5029
  class="pf-c-button pf-m-plain"
5030
5030
  type="button"
@@ -5058,7 +5058,7 @@ cssPrefix: pf-c-tabs
5058
5058
  >
5059
5059
  <span class="pf-c-tabs__item-text">Close disabled</span>
5060
5060
  </button>
5061
- <span class="pf-c-tabs__item-action pf-m-help">
5061
+ <span class="pf-c-tabs__item-action">
5062
5062
  <button
5063
5063
  class="pf-c-button pf-m-plain"
5064
5064
  type="button"
@@ -5092,7 +5092,7 @@ cssPrefix: pf-c-tabs
5092
5092
  >
5093
5093
  <span class="pf-c-tabs__item-text">Help and close disabled</span>
5094
5094
  </button>
5095
- <span class="pf-c-tabs__item-action pf-m-help">
5095
+ <span class="pf-c-tabs__item-action">
5096
5096
  <button
5097
5097
  class="pf-c-button pf-m-plain"
5098
5098
  type="button"
@@ -5126,7 +5126,7 @@ cssPrefix: pf-c-tabs
5126
5126
  >
5127
5127
  <span class="pf-c-tabs__item-text">Network</span>
5128
5128
  </button>
5129
- <span class="pf-c-tabs__item-action pf-m-help">
5129
+ <span class="pf-c-tabs__item-action">
5130
5130
  <button
5131
5131
  class="pf-c-button pf-m-plain"
5132
5132
  type="button"
@@ -5185,7 +5185,7 @@ cssPrefix: pf-c-tabs
5185
5185
  >
5186
5186
  <span class="pf-c-tabs__item-text">Users</span>
5187
5187
  </button>
5188
- <span class="pf-c-tabs__item-action pf-m-help">
5188
+ <span class="pf-c-tabs__item-action">
5189
5189
  <button
5190
5190
  class="pf-c-button pf-m-plain"
5191
5191
  type="button"
@@ -5217,7 +5217,7 @@ cssPrefix: pf-c-tabs
5217
5217
  >
5218
5218
  <span class="pf-c-tabs__item-text">Containers</span>
5219
5219
  </button>
5220
- <span class="pf-c-tabs__item-action pf-m-help">
5220
+ <span class="pf-c-tabs__item-action">
5221
5221
  <button
5222
5222
  class="pf-c-button pf-m-plain"
5223
5223
  type="button"
@@ -5249,7 +5249,7 @@ cssPrefix: pf-c-tabs
5249
5249
  >
5250
5250
  <span class="pf-c-tabs__item-text">Database</span>
5251
5251
  </button>
5252
- <span class="pf-c-tabs__item-action pf-m-help">
5252
+ <span class="pf-c-tabs__item-action">
5253
5253
  <button
5254
5254
  class="pf-c-button pf-m-plain"
5255
5255
  type="button"
@@ -5283,7 +5283,7 @@ cssPrefix: pf-c-tabs
5283
5283
  >
5284
5284
  <span class="pf-c-tabs__item-text">Disabled</span>
5285
5285
  </button>
5286
- <span class="pf-c-tabs__item-action pf-m-help">
5286
+ <span class="pf-c-tabs__item-action">
5287
5287
  <button
5288
5288
  class="pf-c-button pf-m-plain"
5289
5289
  type="button"
@@ -5316,7 +5316,7 @@ cssPrefix: pf-c-tabs
5316
5316
  >
5317
5317
  <span class="pf-c-tabs__item-text">ARIA disabled</span>
5318
5318
  </button>
5319
- <span class="pf-c-tabs__item-action pf-m-help">
5319
+ <span class="pf-c-tabs__item-action">
5320
5320
  <button
5321
5321
  class="pf-c-button pf-m-plain"
5322
5322
  type="button"
@@ -5349,7 +5349,7 @@ cssPrefix: pf-c-tabs
5349
5349
  >
5350
5350
  <span class="pf-c-tabs__item-text">Help disabled</span>
5351
5351
  </button>
5352
- <span class="pf-c-tabs__item-action pf-m-help">
5352
+ <span class="pf-c-tabs__item-action">
5353
5353
  <button
5354
5354
  class="pf-c-button pf-m-plain"
5355
5355
  type="button"
@@ -5383,7 +5383,7 @@ cssPrefix: pf-c-tabs
5383
5383
  >
5384
5384
  <span class="pf-c-tabs__item-text">Close disabled</span>
5385
5385
  </button>
5386
- <span class="pf-c-tabs__item-action pf-m-help">
5386
+ <span class="pf-c-tabs__item-action">
5387
5387
  <button
5388
5388
  class="pf-c-button pf-m-plain"
5389
5389
  type="button"
@@ -5417,7 +5417,7 @@ cssPrefix: pf-c-tabs
5417
5417
  >
5418
5418
  <span class="pf-c-tabs__item-text">Help and close disabled</span>
5419
5419
  </button>
5420
- <span class="pf-c-tabs__item-action pf-m-help">
5420
+ <span class="pf-c-tabs__item-action">
5421
5421
  <button
5422
5422
  class="pf-c-button pf-m-plain"
5423
5423
  type="button"
@@ -5451,7 +5451,7 @@ cssPrefix: pf-c-tabs
5451
5451
  >
5452
5452
  <span class="pf-c-tabs__item-text">Network</span>
5453
5453
  </button>
5454
- <span class="pf-c-tabs__item-action pf-m-help">
5454
+ <span class="pf-c-tabs__item-action">
5455
5455
  <button
5456
5456
  class="pf-c-button pf-m-plain"
5457
5457
  type="button"
@@ -5510,7 +5510,7 @@ cssPrefix: pf-c-tabs
5510
5510
  >
5511
5511
  <span class="pf-c-tabs__item-text">Users</span>
5512
5512
  </button>
5513
- <span class="pf-c-tabs__item-action pf-m-help">
5513
+ <span class="pf-c-tabs__item-action">
5514
5514
  <button
5515
5515
  class="pf-c-button pf-m-plain"
5516
5516
  type="button"
@@ -5542,7 +5542,7 @@ cssPrefix: pf-c-tabs
5542
5542
  >
5543
5543
  <span class="pf-c-tabs__item-text">Containers</span>
5544
5544
  </button>
5545
- <span class="pf-c-tabs__item-action pf-m-help">
5545
+ <span class="pf-c-tabs__item-action">
5546
5546
  <button
5547
5547
  class="pf-c-button pf-m-plain"
5548
5548
  type="button"
@@ -5574,7 +5574,7 @@ cssPrefix: pf-c-tabs
5574
5574
  >
5575
5575
  <span class="pf-c-tabs__item-text">Database</span>
5576
5576
  </button>
5577
- <span class="pf-c-tabs__item-action pf-m-help">
5577
+ <span class="pf-c-tabs__item-action">
5578
5578
  <button
5579
5579
  class="pf-c-button pf-m-plain"
5580
5580
  type="button"
@@ -5608,7 +5608,7 @@ cssPrefix: pf-c-tabs
5608
5608
  >
5609
5609
  <span class="pf-c-tabs__item-text">Disabled</span>
5610
5610
  </button>
5611
- <span class="pf-c-tabs__item-action pf-m-help">
5611
+ <span class="pf-c-tabs__item-action">
5612
5612
  <button
5613
5613
  class="pf-c-button pf-m-plain"
5614
5614
  type="button"
@@ -5641,7 +5641,7 @@ cssPrefix: pf-c-tabs
5641
5641
  >
5642
5642
  <span class="pf-c-tabs__item-text">ARIA disabled</span>
5643
5643
  </button>
5644
- <span class="pf-c-tabs__item-action pf-m-help">
5644
+ <span class="pf-c-tabs__item-action">
5645
5645
  <button
5646
5646
  class="pf-c-button pf-m-plain"
5647
5647
  type="button"
@@ -5674,7 +5674,7 @@ cssPrefix: pf-c-tabs
5674
5674
  >
5675
5675
  <span class="pf-c-tabs__item-text">Help disabled</span>
5676
5676
  </button>
5677
- <span class="pf-c-tabs__item-action pf-m-help">
5677
+ <span class="pf-c-tabs__item-action">
5678
5678
  <button
5679
5679
  class="pf-c-button pf-m-plain"
5680
5680
  type="button"
@@ -5708,7 +5708,7 @@ cssPrefix: pf-c-tabs
5708
5708
  >
5709
5709
  <span class="pf-c-tabs__item-text">Close disabled</span>
5710
5710
  </button>
5711
- <span class="pf-c-tabs__item-action pf-m-help">
5711
+ <span class="pf-c-tabs__item-action">
5712
5712
  <button
5713
5713
  class="pf-c-button pf-m-plain"
5714
5714
  type="button"
@@ -5742,7 +5742,7 @@ cssPrefix: pf-c-tabs
5742
5742
  >
5743
5743
  <span class="pf-c-tabs__item-text">Help and close disabled</span>
5744
5744
  </button>
5745
- <span class="pf-c-tabs__item-action pf-m-help">
5745
+ <span class="pf-c-tabs__item-action">
5746
5746
  <button
5747
5747
  class="pf-c-button pf-m-plain"
5748
5748
  type="button"
@@ -5776,7 +5776,7 @@ cssPrefix: pf-c-tabs
5776
5776
  >
5777
5777
  <span class="pf-c-tabs__item-text">Network</span>
5778
5778
  </button>
5779
- <span class="pf-c-tabs__item-action pf-m-help">
5779
+ <span class="pf-c-tabs__item-action">
5780
5780
  <button
5781
5781
  class="pf-c-button pf-m-plain"
5782
5782
  type="button"
@@ -5838,7 +5838,7 @@ cssPrefix: pf-c-tabs
5838
5838
  </span>
5839
5839
  <span class="pf-c-tabs__item-text">Users</span>
5840
5840
  </button>
5841
- <span class="pf-c-tabs__item-action pf-m-help">
5841
+ <span class="pf-c-tabs__item-action">
5842
5842
  <button
5843
5843
  class="pf-c-button pf-m-plain"
5844
5844
  type="button"
@@ -5873,7 +5873,7 @@ cssPrefix: pf-c-tabs
5873
5873
  </span>
5874
5874
  <span class="pf-c-tabs__item-text">Containers</span>
5875
5875
  </button>
5876
- <span class="pf-c-tabs__item-action pf-m-help">
5876
+ <span class="pf-c-tabs__item-action">
5877
5877
  <button
5878
5878
  class="pf-c-button pf-m-plain"
5879
5879
  type="button"
@@ -5908,7 +5908,7 @@ cssPrefix: pf-c-tabs
5908
5908
  </span>
5909
5909
  <span class="pf-c-tabs__item-text">Database</span>
5910
5910
  </button>
5911
- <span class="pf-c-tabs__item-action pf-m-help">
5911
+ <span class="pf-c-tabs__item-action">
5912
5912
  <button
5913
5913
  class="pf-c-button pf-m-plain"
5914
5914
  type="button"
@@ -5945,7 +5945,7 @@ cssPrefix: pf-c-tabs
5945
5945
  </span>
5946
5946
  <span class="pf-c-tabs__item-text">Disabled</span>
5947
5947
  </button>
5948
- <span class="pf-c-tabs__item-action pf-m-help">
5948
+ <span class="pf-c-tabs__item-action">
5949
5949
  <button
5950
5950
  class="pf-c-button pf-m-plain"
5951
5951
  type="button"
@@ -5981,7 +5981,7 @@ cssPrefix: pf-c-tabs
5981
5981
  </span>
5982
5982
  <span class="pf-c-tabs__item-text">ARIA disabled</span>
5983
5983
  </button>
5984
- <span class="pf-c-tabs__item-action pf-m-help">
5984
+ <span class="pf-c-tabs__item-action">
5985
5985
  <button
5986
5986
  class="pf-c-button pf-m-plain"
5987
5987
  type="button"
@@ -6017,7 +6017,7 @@ cssPrefix: pf-c-tabs
6017
6017
  </span>
6018
6018
  <span class="pf-c-tabs__item-text">Help disabled</span>
6019
6019
  </button>
6020
- <span class="pf-c-tabs__item-action pf-m-help">
6020
+ <span class="pf-c-tabs__item-action">
6021
6021
  <button
6022
6022
  class="pf-c-button pf-m-plain"
6023
6023
  type="button"
@@ -6054,7 +6054,7 @@ cssPrefix: pf-c-tabs
6054
6054
  </span>
6055
6055
  <span class="pf-c-tabs__item-text">Close disabled</span>
6056
6056
  </button>
6057
- <span class="pf-c-tabs__item-action pf-m-help">
6057
+ <span class="pf-c-tabs__item-action">
6058
6058
  <button
6059
6059
  class="pf-c-button pf-m-plain"
6060
6060
  type="button"
@@ -6091,7 +6091,7 @@ cssPrefix: pf-c-tabs
6091
6091
  </span>
6092
6092
  <span class="pf-c-tabs__item-text">Help and close disabled</span>
6093
6093
  </button>
6094
- <span class="pf-c-tabs__item-action pf-m-help">
6094
+ <span class="pf-c-tabs__item-action">
6095
6095
  <button
6096
6096
  class="pf-c-button pf-m-plain"
6097
6097
  type="button"
@@ -6128,7 +6128,7 @@ cssPrefix: pf-c-tabs
6128
6128
  </span>
6129
6129
  <span class="pf-c-tabs__item-text">Network</span>
6130
6130
  </button>
6131
- <span class="pf-c-tabs__item-action pf-m-help">
6131
+ <span class="pf-c-tabs__item-action">
6132
6132
  <button
6133
6133
  class="pf-c-button pf-m-plain"
6134
6134
  type="button"
@@ -6184,7 +6184,7 @@ cssPrefix: pf-c-tabs
6184
6184
  >
6185
6185
  <span class="pf-c-tabs__item-text">Users</span>
6186
6186
  </button>
6187
- <span class="pf-c-tabs__item-action pf-m-help">
6187
+ <span class="pf-c-tabs__item-action">
6188
6188
  <button
6189
6189
  class="pf-c-button pf-m-plain"
6190
6190
  type="button"
@@ -6216,7 +6216,7 @@ cssPrefix: pf-c-tabs
6216
6216
  >
6217
6217
  <span class="pf-c-tabs__item-text">Containers</span>
6218
6218
  </button>
6219
- <span class="pf-c-tabs__item-action pf-m-help">
6219
+ <span class="pf-c-tabs__item-action">
6220
6220
  <button
6221
6221
  class="pf-c-button pf-m-plain"
6222
6222
  type="button"
@@ -6248,7 +6248,7 @@ cssPrefix: pf-c-tabs
6248
6248
  >
6249
6249
  <span class="pf-c-tabs__item-text">Database</span>
6250
6250
  </button>
6251
- <span class="pf-c-tabs__item-action pf-m-help">
6251
+ <span class="pf-c-tabs__item-action">
6252
6252
  <button
6253
6253
  class="pf-c-button pf-m-plain"
6254
6254
  type="button"
@@ -6309,7 +6309,7 @@ cssPrefix: pf-c-tabs
6309
6309
  >
6310
6310
  <span class="pf-c-tabs__item-text">Users</span>
6311
6311
  </button>
6312
- <span class="pf-c-tabs__item-action pf-m-help">
6312
+ <span class="pf-c-tabs__item-action">
6313
6313
  <button
6314
6314
  class="pf-c-button pf-m-plain"
6315
6315
  type="button"
@@ -6341,7 +6341,7 @@ cssPrefix: pf-c-tabs
6341
6341
  >
6342
6342
  <span class="pf-c-tabs__item-text">Containers</span>
6343
6343
  </button>
6344
- <span class="pf-c-tabs__item-action pf-m-help">
6344
+ <span class="pf-c-tabs__item-action">
6345
6345
  <button
6346
6346
  class="pf-c-button pf-m-plain"
6347
6347
  type="button"
@@ -6373,7 +6373,7 @@ cssPrefix: pf-c-tabs
6373
6373
  >
6374
6374
  <span class="pf-c-tabs__item-text">Database</span>
6375
6375
  </button>
6376
- <span class="pf-c-tabs__item-action pf-m-help">
6376
+ <span class="pf-c-tabs__item-action">
6377
6377
  <button
6378
6378
  class="pf-c-button pf-m-plain"
6379
6379
  type="button"
@@ -6407,7 +6407,7 @@ cssPrefix: pf-c-tabs
6407
6407
  >
6408
6408
  <span class="pf-c-tabs__item-text">Disabled</span>
6409
6409
  </button>
6410
- <span class="pf-c-tabs__item-action pf-m-help">
6410
+ <span class="pf-c-tabs__item-action">
6411
6411
  <button
6412
6412
  class="pf-c-button pf-m-plain"
6413
6413
  type="button"
@@ -6440,7 +6440,7 @@ cssPrefix: pf-c-tabs
6440
6440
  >
6441
6441
  <span class="pf-c-tabs__item-text">ARIA disabled</span>
6442
6442
  </button>
6443
- <span class="pf-c-tabs__item-action pf-m-help">
6443
+ <span class="pf-c-tabs__item-action">
6444
6444
  <button
6445
6445
  class="pf-c-button pf-m-plain"
6446
6446
  type="button"
@@ -6473,7 +6473,7 @@ cssPrefix: pf-c-tabs
6473
6473
  >
6474
6474
  <span class="pf-c-tabs__item-text">Help disabled</span>
6475
6475
  </button>
6476
- <span class="pf-c-tabs__item-action pf-m-help">
6476
+ <span class="pf-c-tabs__item-action">
6477
6477
  <button
6478
6478
  class="pf-c-button pf-m-plain"
6479
6479
  type="button"
@@ -6507,7 +6507,7 @@ cssPrefix: pf-c-tabs
6507
6507
  >
6508
6508
  <span class="pf-c-tabs__item-text">Close disabled</span>
6509
6509
  </button>
6510
- <span class="pf-c-tabs__item-action pf-m-help">
6510
+ <span class="pf-c-tabs__item-action">
6511
6511
  <button
6512
6512
  class="pf-c-button pf-m-plain"
6513
6513
  type="button"
@@ -6541,7 +6541,7 @@ cssPrefix: pf-c-tabs
6541
6541
  >
6542
6542
  <span class="pf-c-tabs__item-text">Help and close disabled</span>
6543
6543
  </button>
6544
- <span class="pf-c-tabs__item-action pf-m-help">
6544
+ <span class="pf-c-tabs__item-action">
6545
6545
  <button
6546
6546
  class="pf-c-button pf-m-plain"
6547
6547
  type="button"
@@ -6575,7 +6575,7 @@ cssPrefix: pf-c-tabs
6575
6575
  >
6576
6576
  <span class="pf-c-tabs__item-text">Network</span>
6577
6577
  </button>
6578
- <span class="pf-c-tabs__item-action pf-m-help">
6578
+ <span class="pf-c-tabs__item-action">
6579
6579
  <button
6580
6580
  class="pf-c-button pf-m-plain"
6581
6581
  type="button"
@@ -6630,7 +6630,7 @@ cssPrefix: pf-c-tabs
6630
6630
  >
6631
6631
  <span class="pf-c-tabs__item-text">Users</span>
6632
6632
  </button>
6633
- <span class="pf-c-tabs__item-action pf-m-help">
6633
+ <span class="pf-c-tabs__item-action">
6634
6634
  <button
6635
6635
  class="pf-c-button pf-m-plain"
6636
6636
  type="button"
@@ -6662,7 +6662,7 @@ cssPrefix: pf-c-tabs
6662
6662
  >
6663
6663
  <span class="pf-c-tabs__item-text">Containers</span>
6664
6664
  </button>
6665
- <span class="pf-c-tabs__item-action pf-m-help">
6665
+ <span class="pf-c-tabs__item-action">
6666
6666
  <button
6667
6667
  class="pf-c-button pf-m-plain"
6668
6668
  type="button"
@@ -6694,7 +6694,7 @@ cssPrefix: pf-c-tabs
6694
6694
  >
6695
6695
  <span class="pf-c-tabs__item-text">Database</span>
6696
6696
  </button>
6697
- <span class="pf-c-tabs__item-action pf-m-help">
6697
+ <span class="pf-c-tabs__item-action">
6698
6698
  <button
6699
6699
  class="pf-c-button pf-m-plain"
6700
6700
  type="button"
@@ -6728,7 +6728,7 @@ cssPrefix: pf-c-tabs
6728
6728
  >
6729
6729
  <span class="pf-c-tabs__item-text">Disabled</span>
6730
6730
  </button>
6731
- <span class="pf-c-tabs__item-action pf-m-help">
6731
+ <span class="pf-c-tabs__item-action">
6732
6732
  <button
6733
6733
  class="pf-c-button pf-m-plain"
6734
6734
  type="button"
@@ -6761,7 +6761,7 @@ cssPrefix: pf-c-tabs
6761
6761
  >
6762
6762
  <span class="pf-c-tabs__item-text">ARIA disabled</span>
6763
6763
  </button>
6764
- <span class="pf-c-tabs__item-action pf-m-help">
6764
+ <span class="pf-c-tabs__item-action">
6765
6765
  <button
6766
6766
  class="pf-c-button pf-m-plain"
6767
6767
  type="button"
@@ -6794,7 +6794,7 @@ cssPrefix: pf-c-tabs
6794
6794
  >
6795
6795
  <span class="pf-c-tabs__item-text">Help disabled</span>
6796
6796
  </button>
6797
- <span class="pf-c-tabs__item-action pf-m-help">
6797
+ <span class="pf-c-tabs__item-action">
6798
6798
  <button
6799
6799
  class="pf-c-button pf-m-plain"
6800
6800
  type="button"
@@ -6828,7 +6828,7 @@ cssPrefix: pf-c-tabs
6828
6828
  >
6829
6829
  <span class="pf-c-tabs__item-text">Close disabled</span>
6830
6830
  </button>
6831
- <span class="pf-c-tabs__item-action pf-m-help">
6831
+ <span class="pf-c-tabs__item-action">
6832
6832
  <button
6833
6833
  class="pf-c-button pf-m-plain"
6834
6834
  type="button"
@@ -6862,7 +6862,7 @@ cssPrefix: pf-c-tabs
6862
6862
  >
6863
6863
  <span class="pf-c-tabs__item-text">Help and close disabled</span>
6864
6864
  </button>
6865
- <span class="pf-c-tabs__item-action pf-m-help">
6865
+ <span class="pf-c-tabs__item-action">
6866
6866
  <button
6867
6867
  class="pf-c-button pf-m-plain"
6868
6868
  type="button"
@@ -6896,7 +6896,7 @@ cssPrefix: pf-c-tabs
6896
6896
  >
6897
6897
  <span class="pf-c-tabs__item-text">Network</span>
6898
6898
  </button>
6899
- <span class="pf-c-tabs__item-action pf-m-help">
6899
+ <span class="pf-c-tabs__item-action">
6900
6900
  <button
6901
6901
  class="pf-c-button pf-m-plain"
6902
6902
  type="button"
@@ -7551,36 +7551,36 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
7551
7551
 
7552
7552
  ### Usage
7553
7553
 
7554
- | Class | Applied to | Outcome |
7555
- | ---------------------------------------------------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
7556
- | `.pf-c-tabs` | `<nav>`, `<div>` | Initiates the tabs component. **Required** |
7557
- | `.pf-c-tabs__list` | `<ul>` | Initiates a tabs component list. **Required** |
7558
- | `.pf-c-tabs__item` | `<li>` | Initiates a tabs component item. **Required** |
7559
- | `.pf-c-tabs__item-text` | `<span>` | Initiates a tabs component item icon. **Required** |
7560
- | `.pf-c-tabs__item-icon` | `<span>` | Initiates a tabs component item text. **Required** |
7561
- | `.pf-c-tabs__item-close` | `<span>` | Initiates a tabs component item close. |
7562
- | `.pf-c-tabs__item-close-icon` | `<span>` | Initiates a tabs component item close icon. |
7563
- | `.pf-c-tabs__link` | `<button>`, `<a>` | Initiates a tabs component link. **Required** |
7564
- | `.pf-c-tabs__scroll-button` | `<button>` | Initiates a tabs component scroll button. |
7565
- | `.pf-c-tabs__add` | `<span>` | Initiates a tabs component add button. |
7566
- | `.pf-c-tabs__toggle` | `<div>` | Initiates a tabs expandable toggle. |
7567
- | `.pf-c-tabs__toggle-button` | `<button>` | Initiates a tabs expandable toggle button. |
7568
- | `.pf-c-tabs__toggle-icon` | `<span>` | Initiates a tabs expandable toggle icon. |
7569
- | `.pf-c-tabs__toggle-text` | `<span>` | Initiates a tabs expandable toggle text. |
7570
- | `.pf-m-secondary` | `.pf-c-tabs` | Applies secondary styling to the tab component. |
7571
- | `.pf-m-no-border-bottom` | `.pf-c-tabs` | Removes bottom border from a tab component. |
7572
- | `.pf-m-box` | `.pf-c-tabs` | Applies box styling to the tab component. |
7573
- | `.pf-m-vertical` | `.pf-c-tabs` | Applies vertical styling to the tab component. |
7574
- | `.pf-m-fill` | `.pf-c-tabs` | Modifies the tabs to fill the available space. |
7575
- | `.pf-m-current` | `.pf-c-tabs__item` | Indicates that a tab item is currently selected. |
7576
- | `.pf-m-action` | `.pf-c-tabs__item` | Indicates that a tab item contains actions other than the tab link. |
7577
- | `.pf-m-overflow` | `.pf-c-tabs__item` | Applies overflow menu styling to a tab item. |
7578
- | `.pf-m-expanded` | `.pf-c-tabs__item` | Applies expanded styling to the overflow menu tab item. |
7579
- | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-c-tabs` | Modifies tabs horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
7580
- | `.pf-m-page-insets` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. |
7581
- | `.pf-m-color-scheme--light-300` | `.pf-c-tabs` | Modifies the tabs component tab background colors. |
7582
- | `.pf-m-expandable{-on-[breakpoint]}` | `.pf-c-tabs` | Modifies the tabs component to be expandable via a toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** works with vertical tabs only. |
7583
- | `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-c-tabs` | Modifies the tabs component to be non-expandable at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
7584
- | `.pf-m-expanded` | `.pf-c-tabs` | Modifies the expandable tabs component for the expanded state. |
7585
- | `.pf-m-disabled` | `a.pf-c-tabs__link` | Modifies a tabs link for disabled styles. |
7586
- | `.pf-m-aria-disabled` | `.pf-c-tabs__link` | Modifies a tabs link for disabled styles, but is still hoverable/focusable. |
7554
+ | Class | Applied to | Outcome |
7555
+ | -- | -- | -- |
7556
+ | `.pf-c-tabs` | `<nav>`, `<div>` | Initiates the tabs component. **Required** |
7557
+ | `.pf-c-tabs__list` | `<ul>` | Initiates a tabs component list. **Required** |
7558
+ | `.pf-c-tabs__item` | `<li>` | Initiates a tabs component item. **Required** |
7559
+ | `.pf-c-tabs__item-text` | `<span>` | Initiates a tabs component item icon. **Required** |
7560
+ | `.pf-c-tabs__item-icon` | `<span>` | Initiates a tabs component item text. **Required** |
7561
+ | `.pf-c-tabs__item-close` | `<span>` | Initiates a tabs component item close. |
7562
+ | `.pf-c-tabs__item-close-icon` | `<span>` | Initiates a tabs component item close icon. |
7563
+ | `.pf-c-tabs__link` | `<button>`, `<a>` | Initiates a tabs component link. **Required** |
7564
+ | `.pf-c-tabs__scroll-button` | `<button>` | Initiates a tabs component scroll button. |
7565
+ | `.pf-c-tabs__add` | `<span>` | Initiates a tabs component add button. |
7566
+ | `.pf-c-tabs__toggle` | `<div>` | Initiates a tabs expandable toggle. |
7567
+ | `.pf-c-tabs__toggle-button` | `<button>` | Initiates a tabs expandable toggle button. |
7568
+ | `.pf-c-tabs__toggle-icon` | `<span>` | Initiates a tabs expandable toggle icon. |
7569
+ | `.pf-c-tabs__toggle-text` | `<span>` | Initiates a tabs expandable toggle text. |
7570
+ | `.pf-m-secondary` | `.pf-c-tabs` | Applies secondary styling to the tab component. |
7571
+ | `.pf-m-no-border-bottom` | `.pf-c-tabs` | Removes bottom border from a tab component. |
7572
+ | `.pf-m-box` | `.pf-c-tabs` | Applies box styling to the tab component. |
7573
+ | `.pf-m-vertical` | `.pf-c-tabs` | Applies vertical styling to the tab component. |
7574
+ | `.pf-m-fill` | `.pf-c-tabs` | Modifies the tabs to fill the available space. |
7575
+ | `.pf-m-current` | `.pf-c-tabs__item` | Indicates that a tab item is currently selected. |
7576
+ | `.pf-m-action` | `.pf-c-tabs__item` | Indicates that a tab item contains actions other than the tab link. |
7577
+ | `.pf-m-overflow` | `.pf-c-tabs__item` | Applies overflow menu styling to a tab item. |
7578
+ | `.pf-m-expanded` | `.pf-c-tabs__item` | Applies expanded styling to the overflow menu tab item. |
7579
+ | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-c-tabs` | Modifies tabs horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
7580
+ | `.pf-m-page-insets` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. |
7581
+ | `.pf-m-color-scheme--light-300` | `.pf-c-tabs` | Modifies the tabs component tab background colors. |
7582
+ | `.pf-m-expandable{-on-[breakpoint]}` | `.pf-c-tabs` | Modifies the tabs component to be expandable via a toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** works with vertical tabs only. |
7583
+ | `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-c-tabs` | Modifies the tabs component to be non-expandable at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
7584
+ | `.pf-m-expanded` | `.pf-c-tabs` | Modifies the expandable tabs component for the expanded state. |
7585
+ | `.pf-m-disabled` | `a.pf-c-tabs__link` | Modifies a tabs link for disabled styles. |
7586
+ | `.pf-m-aria-disabled` | `.pf-c-tabs__link` | Modifies a tabs link for disabled styles, but is still hoverable/focusable. |