@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/LabelGroup/examples/LabelGroup.md CHANGED
@@ -16,7 +16,7 @@ cssPrefix: pf-c-label-group
16
16
  <span class="pf-c-label__icon">
17
17
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
18
18
  </span>
19
- Label
19
+ <span class="pf-c-label__text">Label 1</span>
20
20
  </span>
21
21
  </span>
22
22
  </li>
@@ -26,7 +26,7 @@ cssPrefix: pf-c-label-group
26
26
  <span class="pf-c-label__icon">
27
27
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
28
28
  </span>
29
- Label 2
29
+ <span class="pf-c-label__text">Label 2</span>
30
30
  </span>
31
31
  </span>
32
32
  </li>
@@ -36,7 +36,7 @@ cssPrefix: pf-c-label-group
36
36
  <span class="pf-c-label__icon">
37
37
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
38
38
  </span>
39
- Label 3
39
+ <span class="pf-c-label__text">Label 3</span>
40
40
  </span>
41
41
  </span>
42
42
  </li>
@@ -58,7 +58,7 @@ cssPrefix: pf-c-label-group
58
58
  <span class="pf-c-label__icon">
59
59
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
60
60
  </span>
61
- Label
61
+ <span class="pf-c-label__text">Label 1</span>
62
62
  </span>
63
63
  </span>
64
64
  </li>
@@ -68,7 +68,7 @@ cssPrefix: pf-c-label-group
68
68
  <span class="pf-c-label__icon">
69
69
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
70
70
  </span>
71
- Label 2
71
+ <span class="pf-c-label__text">Label 2</span>
72
72
  </span>
73
73
  </span>
74
74
  </li>
@@ -78,13 +78,15 @@ cssPrefix: pf-c-label-group
78
78
  <span class="pf-c-label__icon">
79
79
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
80
80
  </span>
81
- Label 3
81
+ <span class="pf-c-label__text">Label 3</span>
82
82
  </span>
83
83
  </span>
84
84
  </li>
85
85
  <li class="pf-c-label-group__list-item">
86
- <button class="pf-c-label pf-m-overflow" type="button">
87
- <span class="pf-c-label__content">3 more</span>
86
+ <button class="pf-c-label pf-m-overflow pf-m-blue" type="button">
87
+ <span class="pf-c-label__content">
88
+ <span class="pf-c-label__text">3 more</span>
89
+ </span>
88
90
  </button>
89
91
  </li>
90
92
  </ul>
@@ -105,7 +107,7 @@ cssPrefix: pf-c-label-group
105
107
  <span class="pf-c-label__icon">
106
108
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
107
109
  </span>
108
- Label
110
+ <span class="pf-c-label__text">Label 1</span>
109
111
  </span>
110
112
  </span>
111
113
  </li>
@@ -115,7 +117,7 @@ cssPrefix: pf-c-label-group
115
117
  <span class="pf-c-label__icon">
116
118
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
117
119
  </span>
118
- Label 2
120
+ <span class="pf-c-label__text">Label 2</span>
119
121
  </span>
120
122
  </span>
121
123
  </li>
@@ -125,7 +127,7 @@ cssPrefix: pf-c-label-group
125
127
  <span class="pf-c-label__icon">
126
128
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
127
129
  </span>
128
- Label 3
130
+ <span class="pf-c-label__text">Label 3</span>
129
131
  </span>
130
132
  </span>
131
133
  </li>
@@ -135,7 +137,7 @@ cssPrefix: pf-c-label-group
135
137
  <span class="pf-c-label__icon">
136
138
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
137
139
  </span>
138
- Label 3
140
+ <span class="pf-c-label__text">Label 4</span>
139
141
  </span>
140
142
  </span>
141
143
  </li>
@@ -145,13 +147,15 @@ cssPrefix: pf-c-label-group
145
147
  <span class="pf-c-label__icon">
146
148
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
147
149
  </span>
148
- Label 3
150
+ <span class="pf-c-label__text">Label 5</span>
149
151
  </span>
150
152
  </span>
151
153
  </li>
152
154
  <li class="pf-c-label-group__list-item">
153
155
  <button class="pf-c-label pf-m-overflow" type="button">
154
- <span class="pf-c-label__content">3 less</span>
156
+ <span class="pf-c-label__content">
157
+ <span class="pf-c-label__text">3 less</span>
158
+ </span>
155
159
  </button>
156
160
  </li>
157
161
  </ul>
@@ -172,7 +176,7 @@ cssPrefix: pf-c-label-group
172
176
  <span class="pf-c-label__icon">
173
177
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
174
178
  </span>
175
- Label
179
+ <span class="pf-c-label__text">Label 1</span>
176
180
  </span>
177
181
  </span>
178
182
  </li>
@@ -182,7 +186,7 @@ cssPrefix: pf-c-label-group
182
186
  <span class="pf-c-label__icon">
183
187
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
184
188
  </span>
185
- Label 2
189
+ <span class="pf-c-label__text">Label 2</span>
186
190
  </span>
187
191
  </span>
188
192
  </li>
@@ -192,13 +196,15 @@ cssPrefix: pf-c-label-group
192
196
  <span class="pf-c-label__icon">
193
197
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
194
198
  </span>
195
- Label 3
199
+ <span class="pf-c-label__text">Label 3</span>
196
200
  </span>
197
201
  </span>
198
202
  </li>
199
203
  <li class="pf-c-label-group__list-item">
200
204
  <button class="pf-c-label pf-m-add" type="button">
201
- <span class="pf-c-label__content">Add Label</span>
205
+ <span class="pf-c-label__content">
206
+ <span class="pf-c-label__text">Add label</span>
207
+ </span>
202
208
  </button>
203
209
  </li>
204
210
  </ul>
@@ -228,7 +234,7 @@ cssPrefix: pf-c-label-group
228
234
  <span class="pf-c-label__icon">
229
235
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
230
236
  </span>
231
- Label
237
+ <span class="pf-c-label__text">Label 1</span>
232
238
  </span>
233
239
  </span>
234
240
  </li>
@@ -238,7 +244,7 @@ cssPrefix: pf-c-label-group
238
244
  <span class="pf-c-label__icon">
239
245
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
240
246
  </span>
241
- Label 2
247
+ <span class="pf-c-label__text">Label 2</span>
242
248
  </span>
243
249
  </span>
244
250
  </li>
@@ -248,7 +254,7 @@ cssPrefix: pf-c-label-group
248
254
  <span class="pf-c-label__icon">
249
255
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
250
256
  </span>
251
- Label 3
257
+ <span class="pf-c-label__text">Label 3</span>
252
258
  </span>
253
259
  </span>
254
260
  </li>
@@ -279,7 +285,7 @@ cssPrefix: pf-c-label-group
279
285
  <span class="pf-c-label__icon">
280
286
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
281
287
  </span>
282
- Label
288
+ <span class="pf-c-label__text">Label 1</span>
283
289
  </span>
284
290
  </span>
285
291
  </li>
@@ -289,7 +295,7 @@ cssPrefix: pf-c-label-group
289
295
  <span class="pf-c-label__icon">
290
296
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
291
297
  </span>
292
- Label 2
298
+ <span class="pf-c-label__text">Label 2</span>
293
299
  </span>
294
300
  </span>
295
301
  </li>
@@ -299,7 +305,7 @@ cssPrefix: pf-c-label-group
299
305
  <span class="pf-c-label__icon">
300
306
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
301
307
  </span>
302
- Label 3
308
+ <span class="pf-c-label__text">Label 3</span>
303
309
  </span>
304
310
  </span>
305
311
  </li>
@@ -309,7 +315,7 @@ cssPrefix: pf-c-label-group
309
315
  <span class="pf-c-label__icon">
310
316
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
311
317
  </span>
312
- Label 4
318
+ <span class="pf-c-label__text">Label 4</span>
313
319
  </span>
314
320
  </span>
315
321
  </li>
@@ -319,7 +325,7 @@ cssPrefix: pf-c-label-group
319
325
  <span class="pf-c-label__icon">
320
326
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
321
327
  </span>
322
- Label 5
328
+ <span class="pf-c-label__text">Label 5</span>
323
329
  </span>
324
330
  </span>
325
331
  </li>
@@ -329,7 +335,7 @@ cssPrefix: pf-c-label-group
329
335
  <span class="pf-c-label__icon">
330
336
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
331
337
  </span>
332
- Label 6
338
+ <span class="pf-c-label__text">Label 6</span>
333
339
  </span>
334
340
  </span>
335
341
  </li>
@@ -362,7 +368,7 @@ cssPrefix: pf-c-label-group
362
368
  <span class="pf-c-label__icon">
363
369
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
364
370
  </span>
365
- Label
371
+ <span class="pf-c-label__text">Label 1</span>
366
372
  </span>
367
373
  </span>
368
374
  </li>
@@ -372,7 +378,7 @@ cssPrefix: pf-c-label-group
372
378
  <span class="pf-c-label__icon">
373
379
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
374
380
  </span>
375
- Label 2
381
+ <span class="pf-c-label__text">Label 2</span>
376
382
  </span>
377
383
  </span>
378
384
  </li>
@@ -382,7 +388,7 @@ cssPrefix: pf-c-label-group
382
388
  <span class="pf-c-label__icon">
383
389
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
384
390
  </span>
385
- Label 3
391
+ <span class="pf-c-label__text">Label 3</span>
386
392
  </span>
387
393
  </span>
388
394
  </li>
@@ -404,7 +410,7 @@ cssPrefix: pf-c-label-group
404
410
  <span class="pf-c-label__icon">
405
411
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
406
412
  </span>
407
- Label
413
+ <span class="pf-c-label__text">Label 1</span>
408
414
  </span>
409
415
  </span>
410
416
  </li>
@@ -414,7 +420,7 @@ cssPrefix: pf-c-label-group
414
420
  <span class="pf-c-label__icon">
415
421
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
416
422
  </span>
417
- Label 2
423
+ <span class="pf-c-label__text">Label 2</span>
418
424
  </span>
419
425
  </span>
420
426
  </li>
@@ -424,13 +430,15 @@ cssPrefix: pf-c-label-group
424
430
  <span class="pf-c-label__icon">
425
431
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
426
432
  </span>
427
- Label 3
433
+ <span class="pf-c-label__text">Label 3</span>
428
434
  </span>
429
435
  </span>
430
436
  </li>
431
437
  <li class="pf-c-label-group__list-item">
432
438
  <button class="pf-c-label pf-m-overflow" type="button">
433
- <span class="pf-c-label__content">3 more</span>
439
+ <span class="pf-c-label__content">
440
+ <span class="pf-c-label__text">3 more</span>
441
+ </span>
434
442
  </button>
435
443
  </li>
436
444
  </ul>
@@ -451,7 +459,7 @@ cssPrefix: pf-c-label-group
451
459
  <span class="pf-c-label__icon">
452
460
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
453
461
  </span>
454
- Label
462
+ <span class="pf-c-label__text">Label 1</span>
455
463
  </span>
456
464
  </span>
457
465
  </li>
@@ -461,7 +469,7 @@ cssPrefix: pf-c-label-group
461
469
  <span class="pf-c-label__icon">
462
470
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
463
471
  </span>
464
- Label 2
472
+ <span class="pf-c-label__text">Label 2</span>
465
473
  </span>
466
474
  </span>
467
475
  </li>
@@ -471,7 +479,7 @@ cssPrefix: pf-c-label-group
471
479
  <span class="pf-c-label__icon">
472
480
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
473
481
  </span>
474
- Label 3
482
+ <span class="pf-c-label__text">Label 3</span>
475
483
  </span>
476
484
  </span>
477
485
  </li>
@@ -481,7 +489,7 @@ cssPrefix: pf-c-label-group
481
489
  <span class="pf-c-label__icon">
482
490
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
483
491
  </span>
484
- Label 3
492
+ <span class="pf-c-label__text">Label 4</span>
485
493
  </span>
486
494
  </span>
487
495
  </li>
@@ -491,13 +499,15 @@ cssPrefix: pf-c-label-group
491
499
  <span class="pf-c-label__icon">
492
500
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
493
501
  </span>
494
- Label 3
502
+ <span class="pf-c-label__text">Label 5</span>
495
503
  </span>
496
504
  </span>
497
505
  </li>
498
506
  <li class="pf-c-label-group__list-item">
499
507
  <button class="pf-c-label pf-m-overflow" type="button">
500
- <span class="pf-c-label__content">3 less</span>
508
+ <span class="pf-c-label__content">
509
+ <span class="pf-c-label__text">3 less</span>
510
+ </span>
501
511
  </button>
502
512
  </li>
503
513
  </ul>
@@ -527,7 +537,7 @@ cssPrefix: pf-c-label-group
527
537
  <span class="pf-c-label__icon">
528
538
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
529
539
  </span>
530
- Label
540
+ <span class="pf-c-label__text">Label 1</span>
531
541
  </span>
532
542
  </span>
533
543
  </li>
@@ -537,7 +547,7 @@ cssPrefix: pf-c-label-group
537
547
  <span class="pf-c-label__icon">
538
548
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
539
549
  </span>
540
- Label 2
550
+ <span class="pf-c-label__text">Label 2</span>
541
551
  </span>
542
552
  </span>
543
553
  </li>
@@ -547,7 +557,7 @@ cssPrefix: pf-c-label-group
547
557
  <span class="pf-c-label__icon">
548
558
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
549
559
  </span>
550
- Label 3
560
+ <span class="pf-c-label__text">Label 3</span>
551
561
  </span>
552
562
  </span>
553
563
  </li>
@@ -574,17 +584,23 @@ cssPrefix: pf-c-label-group
574
584
  >
575
585
  <li class="pf-c-label-group__list-item">
576
586
  <span class="pf-c-label">
577
- <span class="pf-c-label__content">Label</span>
587
+ <span class="pf-c-label__content">
588
+ <span class="pf-c-label__text">Label 1</span>
589
+ </span>
578
590
  </span>
579
591
  </li>
580
592
  <li class="pf-c-label-group__list-item">
581
593
  <span class="pf-c-label pf-m-blue">
582
- <span class="pf-c-label__content">Label 2</span>
594
+ <span class="pf-c-label__content">
595
+ <span class="pf-c-label__text">Label 2</span>
596
+ </span>
583
597
  </span>
584
598
  </li>
585
599
  <li class="pf-c-label-group__list-item">
586
600
  <span class="pf-c-label pf-m-green">
587
- <span class="pf-c-label__content">Label 3</span>
601
+ <span class="pf-c-label__content">
602
+ <span class="pf-c-label__text">Label 3</span>
603
+ </span>
588
604
  </span>
589
605
  </li>
590
606
  </ul>
@@ -606,7 +622,7 @@ cssPrefix: pf-c-label-group
606
622
 
607
623
  In addition to the JavaScript management of [editable labels](/components/label#editable), dynamic label groups also need:
608
624
 
609
- - `.pf-c-label-group.pf-m-editable` onClick event should (excluding labels within) set focus on `.pf-c-label-group__textarea`
625
+ * `.pf-c-label-group.pf-m-editable` onClick event should (excluding labels within) set focus on `.pf-c-label-group__textarea`
610
626
 
611
627
  ### Editable labels, dynamic label group
612
628
 
@@ -615,66 +631,72 @@ In addition to the JavaScript management of [editable labels](/components/label#
615
631
  <div class="pf-c-label-group__main">
616
632
  <ul class="pf-c-label-group__list" role="list" aria-label="Group of labels">
617
633
  <li class="pf-c-label-group__list-item">
618
- <span class="pf-c-label pf-m-blue pf-m-editable">
634
+ <span class="pf-c-label pf-m-editable pf-m-blue">
619
635
  <button
620
636
  class="pf-c-label__content"
621
637
  id="editable-labels-editable-group-example-editable-label-editable-1-editable-content"
622
- currvalue=" Editable label 1
623
- "
624
638
  aria-label="Editable text"
625
- >Editable label 1</button>
626
-
627
- <button
628
- class="pf-c-button pf-m-plain"
629
- type="button"
630
- id="editable-labels-editable-group-example-editable-label-editable-1-button"
631
- aria-label="Remove"
632
- aria-labelledby="editable-labels-editable-group-example-editable-label-editable-1-button editable-labels-editable-group-example-editable-label-editable-1-text"
633
639
  >
634
- <i class="fas fa-times" aria-hidden="true"></i>
640
+ <span class="pf-c-label__text">Editable label 1</span>
635
641
  </button>
642
+
643
+ <span class="pf-c-label__actions">
644
+ <button
645
+ class="pf-c-button pf-m-plain"
646
+ type="button"
647
+ id="editable-labels-editable-group-example-editable-label-editable-1-button"
648
+ aria-label="Remove"
649
+ aria-labelledby="editable-labels-editable-group-example-editable-label-editable-1-button editable-labels-editable-group-example-editable-label-editable-1-text"
650
+ >
651
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
652
+ </button>
653
+ </span>
636
654
  </span>
637
655
  </li>
638
656
  <li class="pf-c-label-group__list-item">
639
- <span class="pf-c-label pf-m-blue pf-m-editable">
657
+ <span class="pf-c-label pf-m-editable pf-m-blue">
640
658
  <button
641
659
  class="pf-c-label__content"
642
660
  id="editable-labels-editable-group-example-editable-label-editable-2-editable-content"
643
- currvalue=" Editable label 2
644
- "
645
661
  aria-label="Editable text"
646
- >Editable label 2</button>
647
-
648
- <button
649
- class="pf-c-button pf-m-plain"
650
- type="button"
651
- id="editable-labels-editable-group-example-editable-label-editable-2-button"
652
- aria-label="Remove"
653
- aria-labelledby="editable-labels-editable-group-example-editable-label-editable-2-button editable-labels-editable-group-example-editable-label-editable-2-text"
654
662
  >
655
- <i class="fas fa-times" aria-hidden="true"></i>
663
+ <span class="pf-c-label__text">Editable label 2</span>
656
664
  </button>
665
+
666
+ <span class="pf-c-label__actions">
667
+ <button
668
+ class="pf-c-button pf-m-plain"
669
+ type="button"
670
+ id="editable-labels-editable-group-example-editable-label-editable-2-button"
671
+ aria-label="Remove"
672
+ aria-labelledby="editable-labels-editable-group-example-editable-label-editable-2-button editable-labels-editable-group-example-editable-label-editable-2-text"
673
+ >
674
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
675
+ </button>
676
+ </span>
657
677
  </span>
658
678
  </li>
659
679
  <li class="pf-c-label-group__list-item">
660
- <span class="pf-c-label pf-m-blue pf-m-editable">
680
+ <span class="pf-c-label pf-m-editable pf-m-blue">
661
681
  <button
662
682
  class="pf-c-label__content"
663
683
  id="editable-labels-editable-group-example-editable-label-editable-3-editable-content"
664
- currvalue=" Editable label 3
665
- "
666
684
  aria-label="Editable text"
667
- >Editable label 3</button>
668
-
669
- <button
670
- class="pf-c-button pf-m-plain"
671
- type="button"
672
- id="editable-labels-editable-group-example-editable-label-editable-3-button"
673
- aria-label="Remove"
674
- aria-labelledby="editable-labels-editable-group-example-editable-label-editable-3-button editable-labels-editable-group-example-editable-label-editable-3-text"
675
685
  >
676
- <i class="fas fa-times" aria-hidden="true"></i>
686
+ <span class="pf-c-label__text">Editable label 3</span>
677
687
  </button>
688
+
689
+ <span class="pf-c-label__actions">
690
+ <button
691
+ class="pf-c-button pf-m-plain"
692
+ type="button"
693
+ id="editable-labels-editable-group-example-editable-label-editable-3-button"
694
+ aria-label="Remove"
695
+ aria-labelledby="editable-labels-editable-group-example-editable-label-editable-3-button editable-labels-editable-group-example-editable-label-editable-3-text"
696
+ >
697
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
698
+ </button>
699
+ </span>
678
700
  </span>
679
701
  </li>
680
702
  <li class="pf-c-label-group__list-item pf-m-textarea">
@@ -698,69 +720,72 @@ In addition to the JavaScript management of [editable labels](/components/label#
698
720
  <div class="pf-c-label-group__main">
699
721
  <ul class="pf-c-label-group__list" role="list" aria-label="Group of labels">
700
722
  <li class="pf-c-label-group__list-item">
701
- <span class="pf-c-label pf-m-blue pf-m-editable">
723
+ <span class="pf-c-label pf-m-editable pf-m-blue">
702
724
  <button
703
725
  class="pf-c-label__content"
704
- id="editable-labels-label-active-editable-group-example-editable-label-default-1-editable-content"
705
- currvalue=" Editable label 1
706
- "
726
+ id="editable-labels-label-active-editable-group-example-editable-label-editable-1-editable-content"
707
727
  aria-label="Editable text"
708
- >Editable label 1</button>
709
-
710
- <button
711
- class="pf-c-button pf-m-plain"
712
- type="button"
713
- id="editable-labels-label-active-editable-group-example-editable-label-default-1-button"
714
- aria-label="Remove"
715
- aria-labelledby="editable-labels-label-active-editable-group-example-editable-label-default-1-button editable-labels-label-active-editable-group-example-editable-label-default-1-text"
716
728
  >
717
- <i class="fas fa-times" aria-hidden="true"></i>
729
+ <span class="pf-c-label__text">Editable label 1</span>
718
730
  </button>
731
+
732
+ <span class="pf-c-label__actions">
733
+ <button
734
+ class="pf-c-button pf-m-plain"
735
+ type="button"
736
+ id="editable-labels-label-active-editable-group-example-editable-label-editable-1-button"
737
+ aria-label="Remove"
738
+ aria-labelledby="editable-labels-label-active-editable-group-example-editable-label-editable-1-button editable-labels-label-active-editable-group-example-editable-label-editable-1-text"
739
+ >
740
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
741
+ </button>
742
+ </span>
719
743
  </span>
720
744
  </li>
721
745
  <li class="pf-c-label-group__list-item">
722
- <span class="pf-c-label pf-m-blue pf-m-editable">
746
+ <span class="pf-c-label pf-m-editable pf-m-blue">
723
747
  <button
724
748
  class="pf-c-label__content"
725
- id="editable-labels-label-active-editable-group-example-editable-label-default-2-editable-content"
726
- currvalue=" Editable label 2
727
- "
749
+ id="editable-labels-label-active-editable-group-example-editable-label-editable-2-editable-content"
728
750
  aria-label="Editable text"
729
- >Editable label 2</button>
730
-
731
- <button
732
- class="pf-c-button pf-m-plain"
733
- type="button"
734
- id="editable-labels-label-active-editable-group-example-editable-label-default-2-button"
735
- aria-label="Remove"
736
- aria-labelledby="editable-labels-label-active-editable-group-example-editable-label-default-2-button editable-labels-label-active-editable-group-example-editable-label-default-2-text"
737
751
  >
738
- <i class="fas fa-times" aria-hidden="true"></i>
752
+ <span class="pf-c-label__text">Editable label 2</span>
739
753
  </button>
754
+
755
+ <span class="pf-c-label__actions">
756
+ <button
757
+ class="pf-c-button pf-m-plain"
758
+ type="button"
759
+ id="editable-labels-label-active-editable-group-example-editable-label-editable-2-button"
760
+ aria-label="Remove"
761
+ aria-labelledby="editable-labels-label-active-editable-group-example-editable-label-editable-2-button editable-labels-label-active-editable-group-example-editable-label-editable-2-text"
762
+ >
763
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
764
+ </button>
765
+ </span>
740
766
  </span>
741
767
  </li>
742
768
  <li class="pf-c-label-group__list-item">
743
- <span
744
- class="pf-c-label pf-m-blue pf-m-active pf-m-editable pf-m-editable-active"
745
- >
769
+ <span class="pf-c-label pf-m-editable pf-m-editable-active pf-m-blue">
746
770
  <input
747
771
  class="pf-c-label__content"
748
- id="editable-labels-label-active-editable-group-example-editable-label-active-editable-content"
772
+ id="editable-labels-label-active-editable-group-example-editable-label-editable-3-editable-content"
749
773
  type="text"
750
- value=" Editable label 3, active
751
- "
774
+ value="Editable label 3, active"
752
775
  aria-label="Editable text"
753
776
  />
754
777
 
755
- <button
756
- class="pf-c-button pf-m-plain"
757
- type="button"
758
- id="editable-labels-label-active-editable-group-example-editable-label-active-button"
759
- aria-label="Remove"
760
- aria-labelledby="editable-labels-label-active-editable-group-example-editable-label-active-button editable-labels-label-active-editable-group-example-editable-label-active-text"
761
- >
762
- <i class="fas fa-times" aria-hidden="true"></i>
763
- </button>
778
+ <span class="pf-c-label__actions">
779
+ <button
780
+ class="pf-c-button pf-m-plain"
781
+ type="button"
782
+ id="editable-labels-label-active-editable-group-example-editable-label-editable-3-button"
783
+ aria-label="Remove"
784
+ aria-labelledby="editable-labels-label-active-editable-group-example-editable-label-editable-3-button editable-labels-label-active-editable-group-example-editable-label-editable-3-text"
785
+ >
786
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
787
+ </button>
788
+ </span>
764
789
  </span>
765
790
  </li>
766
791
  <li class="pf-c-label-group__list-item pf-m-textarea">
@@ -785,44 +810,56 @@ In addition to the JavaScript management of [editable labels](/components/label#
785
810
  <ul class="pf-c-label-group__list" role="list" aria-label="Group of labels">
786
811
  <li class="pf-c-label-group__list-item">
787
812
  <span class="pf-c-label pf-m-green">
788
- <span class="pf-c-label__content">Static label 1</span>
789
- <button
790
- class="pf-c-button pf-m-plain"
791
- type="button"
792
- id="static-labels-dynamic-label-group-example-editable-label-static-1-button"
793
- aria-label="Remove"
794
- aria-labelledby="static-labels-dynamic-label-group-example-editable-label-static-1-button static-labels-dynamic-label-group-example-editable-label-static-1-text"
795
- >
796
- <i class="fas fa-times" aria-hidden="true"></i>
797
- </button>
813
+ <span class="pf-c-label__content">
814
+ <span class="pf-c-label__text">Static label 1</span>
815
+ </span>
816
+ <span class="pf-c-label__actions">
817
+ <button
818
+ class="pf-c-button pf-m-plain"
819
+ type="button"
820
+ id="static-labels-dynamic-label-group-example-editable-label-static-1-button"
821
+ aria-label="Remove"
822
+ aria-labelledby="static-labels-dynamic-label-group-example-editable-label-static-1-button static-labels-dynamic-label-group-example-editable-label-static-1-text"
823
+ >
824
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
825
+ </button>
826
+ </span>
798
827
  </span>
799
828
  </li>
800
829
  <li class="pf-c-label-group__list-item">
801
830
  <span class="pf-c-label pf-m-green">
802
- <span class="pf-c-label__content">Static label 2</span>
803
- <button
804
- class="pf-c-button pf-m-plain"
805
- type="button"
806
- id="static-labels-dynamic-label-group-example-editable-label-static-2-button"
807
- aria-label="Remove"
808
- aria-labelledby="static-labels-dynamic-label-group-example-editable-label-static-2-button static-labels-dynamic-label-group-example-editable-label-static-2-text"
809
- >
810
- <i class="fas fa-times" aria-hidden="true"></i>
811
- </button>
831
+ <span class="pf-c-label__content">
832
+ <span class="pf-c-label__text">Static label 2</span>
833
+ </span>
834
+ <span class="pf-c-label__actions">
835
+ <button
836
+ class="pf-c-button pf-m-plain"
837
+ type="button"
838
+ id="static-labels-dynamic-label-group-example-editable-label-static-2-button"
839
+ aria-label="Remove"
840
+ aria-labelledby="static-labels-dynamic-label-group-example-editable-label-static-2-button static-labels-dynamic-label-group-example-editable-label-static-2-text"
841
+ >
842
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
843
+ </button>
844
+ </span>
812
845
  </span>
813
846
  </li>
814
847
  <li class="pf-c-label-group__list-item">
815
848
  <span class="pf-c-label pf-m-green">
816
- <span class="pf-c-label__content">Static label 3</span>
817
- <button
818
- class="pf-c-button pf-m-plain"
819
- type="button"
820
- id="static-labels-dynamic-label-group-example-editable-label-static-3-button"
821
- aria-label="Remove"
822
- aria-labelledby="static-labels-dynamic-label-group-example-editable-label-static-3-button static-labels-dynamic-label-group-example-editable-label-static-3-text"
823
- >
824
- <i class="fas fa-times" aria-hidden="true"></i>
825
- </button>
849
+ <span class="pf-c-label__content">
850
+ <span class="pf-c-label__text">Static label 3</span>
851
+ </span>
852
+ <span class="pf-c-label__actions">
853
+ <button
854
+ class="pf-c-button pf-m-plain"
855
+ type="button"
856
+ id="static-labels-dynamic-label-group-example-editable-label-static-3-button"
857
+ aria-label="Remove"
858
+ aria-labelledby="static-labels-dynamic-label-group-example-editable-label-static-3-button static-labels-dynamic-label-group-example-editable-label-static-3-text"
859
+ >
860
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
861
+ </button>
862
+ </span>
826
863
  </span>
827
864
  </li>
828
865
  <li class="pf-c-label-group__list-item pf-m-textarea">
@@ -847,93 +884,107 @@ In addition to the JavaScript management of [editable labels](/components/label#
847
884
  <ul class="pf-c-label-group__list" role="list" aria-label="Group of labels">
848
885
  <li class="pf-c-label-group__list-item">
849
886
  <span class="pf-c-label pf-m-green">
850
- <span class="pf-c-label__content">Static label 1</span>
851
- <button
852
- class="pf-c-button pf-m-plain"
853
- type="button"
854
- id="mixed-labels-dynamic-label-group-example-editable-label-static-1-button"
855
- aria-label="Remove"
856
- aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-static-1-button mixed-labels-dynamic-label-group-example-editable-label-static-1-text"
857
- >
858
- <i class="fas fa-times" aria-hidden="true"></i>
859
- </button>
887
+ <span class="pf-c-label__content">
888
+ <span class="pf-c-label__text">Static label 1</span>
889
+ </span>
890
+ <span class="pf-c-label__actions">
891
+ <button
892
+ class="pf-c-button pf-m-plain"
893
+ type="button"
894
+ id="mixed-labels-dynamic-label-group-example-editable-label-static-1-button"
895
+ aria-label="Remove"
896
+ aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-static-1-button mixed-labels-dynamic-label-group-example-editable-label-static-1-text"
897
+ >
898
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
899
+ </button>
900
+ </span>
860
901
  </span>
861
902
  </li>
862
903
  <li class="pf-c-label-group__list-item">
863
904
  <span class="pf-c-label pf-m-green">
864
- <span class="pf-c-label__content">Static label 2</span>
865
- <button
866
- class="pf-c-button pf-m-plain"
867
- type="button"
868
- id="mixed-labels-dynamic-label-group-example-editable-label-static-2-button"
869
- aria-label="Remove"
870
- aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-static-2-button mixed-labels-dynamic-label-group-example-editable-label-static-2-text"
871
- >
872
- <i class="fas fa-times" aria-hidden="true"></i>
873
- </button>
905
+ <span class="pf-c-label__content">
906
+ <span class="pf-c-label__text">Static label 2</span>
907
+ </span>
908
+ <span class="pf-c-label__actions">
909
+ <button
910
+ class="pf-c-button pf-m-plain"
911
+ type="button"
912
+ id="mixed-labels-dynamic-label-group-example-editable-label-static-2-button"
913
+ aria-label="Remove"
914
+ aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-static-2-button mixed-labels-dynamic-label-group-example-editable-label-static-2-text"
915
+ >
916
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
917
+ </button>
918
+ </span>
874
919
  </span>
875
920
  </li>
876
921
  <li class="pf-c-label-group__list-item">
877
- <span class="pf-c-label pf-m-blue pf-m-editable">
922
+ <span class="pf-c-label pf-m-editable pf-m-blue">
878
923
  <button
879
924
  class="pf-c-label__content"
880
925
  id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-editable-content"
881
- currvalue=" Dynamic, editable label 1
882
- "
883
926
  aria-label="Editable text"
884
- >Dynamic, editable label 1</button>
885
-
886
- <button
887
- class="pf-c-button pf-m-plain"
888
- type="button"
889
- id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-button"
890
- aria-label="Remove"
891
- aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-button mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-text"
892
927
  >
893
- <i class="fas fa-times" aria-hidden="true"></i>
928
+ <span class="pf-c-label__text">Dynamic, editable label 1</span>
894
929
  </button>
930
+
931
+ <span class="pf-c-label__actions">
932
+ <button
933
+ class="pf-c-button pf-m-plain"
934
+ type="button"
935
+ id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-button"
936
+ aria-label="Remove"
937
+ aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-button mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-text"
938
+ >
939
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
940
+ </button>
941
+ </span>
895
942
  </span>
896
943
  </li>
897
944
  <li class="pf-c-label-group__list-item">
898
- <span class="pf-c-label pf-m-blue pf-m-editable">
945
+ <span class="pf-c-label pf-m-editable pf-m-blue">
899
946
  <button
900
947
  class="pf-c-label__content"
901
948
  id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-editable-content"
902
- currvalue=" Dynamic, editable label 2
903
- "
904
949
  aria-label="Editable text"
905
- >Dynamic, editable label 2</button>
906
-
907
- <button
908
- class="pf-c-button pf-m-plain"
909
- type="button"
910
- id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-button"
911
- aria-label="Remove"
912
- aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-button mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-text"
913
950
  >
914
- <i class="fas fa-times" aria-hidden="true"></i>
951
+ <span class="pf-c-label__text">Dynamic, editable label 2</span>
915
952
  </button>
953
+
954
+ <span class="pf-c-label__actions">
955
+ <button
956
+ class="pf-c-button pf-m-plain"
957
+ type="button"
958
+ id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-button"
959
+ aria-label="Remove"
960
+ aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-button mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-text"
961
+ >
962
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
963
+ </button>
964
+ </span>
916
965
  </span>
917
966
  </li>
918
967
  <li class="pf-c-label-group__list-item">
919
- <span class="pf-c-label pf-m-blue pf-m-active pf-m-editable">
968
+ <span class="pf-c-label pf-m-editable pf-m-blue">
920
969
  <button
921
970
  class="pf-c-label__content"
922
971
  id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-editable-content"
923
- currvalue=" Dynamic, editable label 3
924
- "
925
972
  aria-label="Editable text"
926
- >Dynamic, editable label 3</button>
927
-
928
- <button
929
- class="pf-c-button pf-m-plain"
930
- type="button"
931
- id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-button"
932
- aria-label="Remove"
933
- aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-button mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-text"
934
973
  >
935
- <i class="fas fa-times" aria-hidden="true"></i>
974
+ <span class="pf-c-label__text">Dynamic, editable label 3</span>
936
975
  </button>
976
+
977
+ <span class="pf-c-label__actions">
978
+ <button
979
+ class="pf-c-button pf-m-plain"
980
+ type="button"
981
+ id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-button"
982
+ aria-label="Remove"
983
+ aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-button mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-text"
984
+ >
985
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
986
+ </button>
987
+ </span>
937
988
  </span>
938
989
  </li>
939
990
  <li class="pf-c-label-group__list-item pf-m-textarea">
@@ -962,7 +1013,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
962
1013
  <span class="pf-c-label__icon">
963
1014
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
964
1015
  </span>
965
- Label
1016
+ <span class="pf-c-label__text">Label 1</span>
966
1017
  </span>
967
1018
  </span>
968
1019
  </li>
@@ -972,7 +1023,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
972
1023
  <span class="pf-c-label__icon">
973
1024
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
974
1025
  </span>
975
- Label 2
1026
+ <span class="pf-c-label__text">Label 2</span>
976
1027
  </span>
977
1028
  </span>
978
1029
  </li>
@@ -982,7 +1033,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
982
1033
  <span class="pf-c-label__icon">
983
1034
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
984
1035
  </span>
985
- Label 3
1036
+ <span class="pf-c-label__text">Label 3</span>
986
1037
  </span>
987
1038
  </span>
988
1039
  </li>
@@ -1004,7 +1055,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
1004
1055
  <span class="pf-c-label__icon">
1005
1056
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1006
1057
  </span>
1007
- Label
1058
+ <span class="pf-c-label__text">Label 1</span>
1008
1059
  </span>
1009
1060
  </span>
1010
1061
  </li>
@@ -1014,7 +1065,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
1014
1065
  <span class="pf-c-label__icon">
1015
1066
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1016
1067
  </span>
1017
- Label 2
1068
+ <span class="pf-c-label__text">Label 2</span>
1018
1069
  </span>
1019
1070
  </span>
1020
1071
  </li>
@@ -1024,13 +1075,15 @@ In addition to the JavaScript management of [editable labels](/components/label#
1024
1075
  <span class="pf-c-label__icon">
1025
1076
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1026
1077
  </span>
1027
- Label 3
1078
+ <span class="pf-c-label__text">Label 3</span>
1028
1079
  </span>
1029
1080
  </span>
1030
1081
  </li>
1031
1082
  <li class="pf-c-label-group__list-item">
1032
- <button class="pf-c-label pf-m-overflow pf-m-compact" type="button">
1033
- <span class="pf-c-label__content">3 more</span>
1083
+ <button class="pf-c-label pf-m-compact pf-m-overflow" type="button">
1084
+ <span class="pf-c-label__content">
1085
+ <span class="pf-c-label__text">3 more</span>
1086
+ </span>
1034
1087
  </button>
1035
1088
  </li>
1036
1089
  </ul>
@@ -1051,7 +1104,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
1051
1104
  <span class="pf-c-label__icon">
1052
1105
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1053
1106
  </span>
1054
- Label
1107
+ <span class="pf-c-label__text">Label 1</span>
1055
1108
  </span>
1056
1109
  </span>
1057
1110
  </li>
@@ -1061,7 +1114,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
1061
1114
  <span class="pf-c-label__icon">
1062
1115
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1063
1116
  </span>
1064
- Label 2
1117
+ <span class="pf-c-label__text">Label 2</span>
1065
1118
  </span>
1066
1119
  </span>
1067
1120
  </li>
@@ -1071,7 +1124,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
1071
1124
  <span class="pf-c-label__icon">
1072
1125
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1073
1126
  </span>
1074
- Label 3
1127
+ <span class="pf-c-label__text">Label 3</span>
1075
1128
  </span>
1076
1129
  </span>
1077
1130
  </li>
@@ -1085,27 +1138,27 @@ In addition to the JavaScript management of [editable labels](/components/label#
1085
1138
 
1086
1139
  ### Accessibility
1087
1140
 
1088
- | Attribute | Applied to | Outcome |
1089
- | ---------------------------------------------------------------------------------------------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1090
- | `role="list"` | `.pf-c-label-group__list` | Indicates that the label group list is a list element. This role is redundant since `.pf-c-label-group__list` is a `<ul>` but is required for screen readers to announce the list propertly. **Required** |
1091
- | `aria-label="[button label text]"` | `.pf-c-label-group__close > button` | Provides an accessible name for a label group close button when an icon is used instead of text. Required when an icon is used with no supporting text. **Required** |
1092
- | `aria-labelledby="[id value of .pf-c-label-group__close > button] [id value of .pf-c-label-group__label]"` | `.pf-c-label-group__close > button` | Provides an accessible name for the button. **Required** |
1093
- | `aria-label="[label text]"` | `.pf-c-label-group__textarea` | Provides an accessible name for the textarea. **Required** |
1094
- | `row="1"` | `.pf-c-label-group__textarea` | Indicates that the label group textarea is one row. **Required** |
1095
- | `tabindex="0"` | `.pf-c-label-group__textarea` | Inserts the label group textarea into the tab order of the page so that it is focusable. **Required** |
1141
+ | Attribute | Applied to | Outcome |
1142
+ | -- | -- | -- |
1143
+ | `role="list"` | `.pf-c-label-group__list` | Indicates that the label group list is a list element. This role is redundant since `.pf-c-label-group__list` is a `<ul>` but is required for screen readers to announce the list propertly. **Required** |
1144
+ | `aria-label="[button label text]"` | `.pf-c-label-group__close > button` | Provides an accessible name for a label group close button when an icon is used instead of text. Required when an icon is used with no supporting text. **Required** |
1145
+ | `aria-labelledby="[id value of .pf-c-label-group__close > button] [id value of .pf-c-label-group__label]"` | `.pf-c-label-group__close > button` | Provides an accessible name for the button. **Required** |
1146
+ | `aria-label="[label text]"` | `.pf-c-label-group__textarea` | Provides an accessible name for the textarea. **Required** |
1147
+ | `row="1"` | `.pf-c-label-group__textarea` | Indicates that the label group textarea is one row. **Required** |
1148
+ | `tabindex="0"` | `.pf-c-label-group__textarea` | Inserts the label group textarea into the tab order of the page so that it is focusable. **Required** |
1096
1149
 
1097
1150
  ### Usage
1098
1151
 
1099
- | Class | Applied to | Outcome |
1100
- | ------------------------------ | ----------------------------------- | -------------------------------------------------------------------------------------------- |
1101
- | `.pf-c-label-group` | `<div>` | Initiates the label group component. **Required.** |
1102
- | `.pf-c-label-group__list` | `<ul>` | Initiates the container for a list of labels. **Required.** |
1103
- | `.pf-c-label-group__list-item` | `<li>` | Initiates the list item inside of the label group. **Required.** |
1104
- | `.pf-c-label-group__main` | `<div>` | Initiates the main element in the label group. **Required when label and list are present** |
1105
- | `.pf-c-label-group__textarea` | `<textarea>` | Initiates the textarea element in the label group. **Required when label group is editable** |
1106
- | `.pf-c-label-group__label` | `<span>` | Initiates the label to be used in the label group. |
1107
- | `.pf-c-label-group__close` | `<div>` | Initiates the container used for the button to remove the label group. |
1108
- | `.pf-c-button` | `.pf-c-label-group__close <button>` | Initiates the button used to remove the label group. |
1109
- | `.pf-m-editable` | `.pf-c-label-group` | Modifies the label group to support editable styling. |
1110
- | `.pf-m-category` | `.pf-c-label-group` | Modifies the label group to support category styling. |
1111
- | `.pf-m-textarea` | `.pf-c-label-group__list-item` | Modifies the label group list item to support textarea. |
1152
+ | Class | Applied to | Outcome |
1153
+ | -- | -- | -- |
1154
+ | `.pf-c-label-group` | `<div>` | Initiates the label group component. **Required.** |
1155
+ | `.pf-c-label-group__list` | `<ul>` | Initiates the container for a list of labels. **Required.** |
1156
+ | `.pf-c-label-group__list-item` | `<li>` | Initiates the list item inside of the label group. **Required.** |
1157
+ | `.pf-c-label-group__main` | `<div>` | Initiates the main element in the label group. **Required when label and list are present** |
1158
+ | `.pf-c-label-group__textarea` | `<textarea>` | Initiates the textarea element in the label group. **Required when label group is editable** |
1159
+ | `.pf-c-label-group__label` | `<span>` | Initiates the label to be used in the label group. |
1160
+ | `.pf-c-label-group__close` | `<div>` | Initiates the container used for the button to remove the label group. |
1161
+ | `.pf-c-button` | `.pf-c-label-group__close <button>` | Initiates the button used to remove the label group. |
1162
+ | `.pf-m-editable` | `.pf-c-label-group` | Modifies the label group to support editable styling. |
1163
+ | `.pf-m-category` | `.pf-c-label-group` | Modifies the label group to support category styling. |
1164
+ | `.pf-m-textarea` | `.pf-c-label-group__list-item` | Modifies the label group list item to support textarea. |