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

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 (342) hide show
  1. package/README.md +4 -4
  2. package/RELEASE-NOTES.md +18 -1
  3. package/assets/icons/iconUnicodes.json +1 -0
  4. package/assets/images/pfbg-icon.svg +1 -0
  5. package/assets/pficon/pficon.scss +7 -2
  6. package/assets/pficon/pficon.woff2 +0 -0
  7. package/base/_base.scss +0 -18
  8. package/base/_chart-globals.scss +0 -4
  9. package/base/_common.scss +0 -22
  10. package/base/_fa-icons.scss +1 -2
  11. package/base/_fonts.scss +22 -27
  12. package/base/_globals.scss +92 -86
  13. package/base/_icons.scss +1 -28
  14. package/base/_svg-icons.scss +6 -0
  15. package/base/_variables.scss +4 -4
  16. package/base/patternfly-common.css +0 -10
  17. package/base/patternfly-fa-icons.css +1 -1
  18. package/base/patternfly-fonts.css +17 -17
  19. package/base/patternfly-globals.css +35 -41
  20. package/base/patternfly-icons.css +8 -22
  21. package/base/patternfly-pf-icons.css +6 -2
  22. package/base/patternfly-themes.css +0 -42
  23. package/base/patternfly-variables.css +3 -3
  24. package/base/themes/dark/_globals.scss +1 -1
  25. package/base/themes/dark/_variables.scss +1 -1
  26. package/components/AboutModalBox/about-modal-box.css +20 -50
  27. package/components/AboutModalBox/about-modal-box.scss +22 -14
  28. package/components/Accordion/accordion.css +2 -0
  29. package/components/Accordion/accordion.scss +2 -0
  30. package/components/Alert/alert.css +17 -8
  31. package/components/Alert/alert.scss +21 -7
  32. package/components/Alert/themes/dark/alert.scss +1 -1
  33. package/components/AppLauncher/app-launcher.css +2 -0
  34. package/components/AppLauncher/app-launcher.scss +2 -0
  35. package/components/Avatar/avatar.scss +2 -2
  36. package/components/BackgroundImage/background-image.css +8 -35
  37. package/components/BackgroundImage/background-image.scss +17 -43
  38. package/components/Banner/banner.css +14 -52
  39. package/components/Banner/banner.scss +9 -13
  40. package/components/Breadcrumb/breadcrumb.css +2 -0
  41. package/components/Breadcrumb/breadcrumb.scss +2 -0
  42. package/components/CalendarMonth/calendar-month.css +2 -2
  43. package/components/CalendarMonth/calendar-month.scss +3 -3
  44. package/components/Card/card.css +115 -50
  45. package/components/Card/card.scss +164 -63
  46. package/components/Chip/chip.css +33 -24
  47. package/components/Chip/chip.scss +40 -31
  48. package/components/ChipGroup/chip-group.css +27 -17
  49. package/components/ChipGroup/chip-group.scss +36 -22
  50. package/components/Content/content.css +11 -5
  51. package/components/Content/content.scss +17 -9
  52. package/components/ContextSelector/context-selector.css +13 -6
  53. package/components/ContextSelector/context-selector.scss +14 -7
  54. package/components/DataList/data-list-grid.css +7 -7
  55. package/components/DataList/data-list-grid.scss +1 -1
  56. package/components/DataList/data-list.css +46 -40
  57. package/components/DataList/data-list.scss +37 -28
  58. package/components/DatePicker/date-picker.css +0 -8
  59. package/components/DatePicker/date-picker.scss +0 -9
  60. package/components/DescriptionList/description-list.css +7 -7
  61. package/components/DescriptionList/description-list.scss +7 -7
  62. package/components/Divider/divider.css +2 -2
  63. package/components/Divider/divider.scss +3 -3
  64. package/components/Drawer/drawer.css +15 -16
  65. package/components/Drawer/drawer.scss +2 -3
  66. package/components/Dropdown/dropdown.css +26 -25
  67. package/components/Dropdown/dropdown.scss +17 -18
  68. package/components/DualListSelector/dual-list-selector.css +1 -1
  69. package/components/DualListSelector/dual-list-selector.scss +1 -1
  70. package/components/EmptyState/empty-state.css +46 -52
  71. package/components/EmptyState/empty-state.scss +58 -57
  72. package/components/ExpandableSection/expandable-section.css +2 -0
  73. package/components/ExpandableSection/expandable-section.scss +2 -0
  74. package/components/Form/form.css +14 -12
  75. package/components/Form/form.scss +9 -7
  76. package/components/FormControl/form-control.css +2 -5
  77. package/components/FormControl/themes/dark/form-control.scss +2 -6
  78. package/components/HelperText/helper-text.css +4 -0
  79. package/components/HelperText/helper-text.scss +5 -0
  80. package/components/Hint/hint.css +2 -2
  81. package/components/Hint/hint.scss +2 -2
  82. package/components/Icon/icon.css +3 -3
  83. package/components/Icon/icon.scss +3 -3
  84. package/components/InputGroup/input-group.css +61 -85
  85. package/components/InputGroup/input-group.scss +55 -61
  86. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  87. package/components/Label/label.css +49 -36
  88. package/components/Label/label.scss +53 -38
  89. package/components/Label/themes/dark/label.scss +2 -2
  90. package/components/LabelGroup/label-group.css +26 -22
  91. package/components/LabelGroup/label-group.scss +31 -26
  92. package/components/LogViewer/log-viewer.css +0 -38
  93. package/components/Login/login.css +20 -60
  94. package/components/Login/login.scss +16 -18
  95. package/components/Login/themes/dark/login.scss +4 -0
  96. package/components/Masthead/masthead.css +4 -42
  97. package/components/Masthead/masthead.scss +4 -4
  98. package/components/Menu/menu.css +9 -6
  99. package/components/Menu/menu.scss +34 -31
  100. package/components/MenuToggle/menu-toggle.css +3 -1
  101. package/components/MenuToggle/menu-toggle.scss +3 -1
  102. package/components/ModalBox/modal-box.css +12 -11
  103. package/components/ModalBox/modal-box.scss +14 -14
  104. package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
  105. package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
  106. package/components/Nav/nav.css +1 -1
  107. package/components/Nav/nav.scss +2 -2
  108. package/components/NotificationDrawer/notification-drawer.css +8 -8
  109. package/components/NotificationDrawer/notification-drawer.scss +8 -8
  110. package/components/OptionsMenu/options-menu.css +8 -10
  111. package/components/OptionsMenu/options-menu.scss +9 -11
  112. package/components/Page/page.css +101 -122
  113. package/components/Page/page.scss +49 -21
  114. package/components/Pagination/pagination.css +2 -110
  115. package/components/Pagination/pagination.scss +0 -6
  116. package/components/Popover/popover.css +31 -37
  117. package/components/Popover/popover.scss +32 -37
  118. package/components/Popover/themes/dark/popover.scss +3 -9
  119. package/components/Progress/progress.css +13 -10
  120. package/components/Progress/progress.scss +13 -10
  121. package/components/ProgressStepper/progress-stepper.css +5 -5
  122. package/components/ProgressStepper/progress-stepper.scss +5 -5
  123. package/components/SearchInput/search-input.css +4 -2
  124. package/components/SearchInput/search-input.scss +4 -2
  125. package/components/Select/select.css +1 -1
  126. package/components/Select/select.scss +1 -1
  127. package/components/Sidebar/sidebar.css +69 -26
  128. package/components/Sidebar/sidebar.scss +84 -27
  129. package/components/SimpleList/simple-list.css +1 -1
  130. package/components/SimpleList/simple-list.scss +2 -2
  131. package/components/Spinner/spinner.css +4 -133
  132. package/components/Spinner/spinner.scss +4 -173
  133. package/components/Table/table-grid.css +28 -28
  134. package/components/Table/table-scrollable.css +31 -26
  135. package/components/Table/table-scrollable.scss +33 -28
  136. package/components/Table/table-tree-view.css +14 -4
  137. package/components/Table/table-tree-view.scss +15 -0
  138. package/components/Table/table.css +67 -65
  139. package/components/Table/table.scss +65 -62
  140. package/components/Tabs/tabs.css +0 -4
  141. package/components/Tabs/tabs.scss +0 -7
  142. package/components/TextInputGroup/text-input-group.css +6 -4
  143. package/components/TextInputGroup/text-input-group.scss +6 -5
  144. package/components/Tile/tile.css +1 -1
  145. package/components/Tile/tile.scss +1 -1
  146. package/components/Timestamp/timestamp.css +3 -3
  147. package/components/Timestamp/timestamp.scss +3 -3
  148. package/components/Toolbar/toolbar.css +78 -43
  149. package/components/Toolbar/toolbar.scss +50 -10
  150. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  151. package/components/Tooltip/tooltip.css +7 -12
  152. package/components/Tooltip/tooltip.scss +6 -3
  153. package/components/TreeView/tree-view.css +7 -15
  154. package/components/TreeView/tree-view.scss +7 -18
  155. package/components/Wizard/wizard.css +16 -39
  156. package/components/Wizard/wizard.scss +20 -2
  157. package/docs/components/AboutModalBox/examples/AboutModalBox.md +20 -14
  158. package/docs/components/Accordion/examples/Accordion.md +12 -12
  159. package/docs/components/ActionList/examples/ActionList.md +6 -6
  160. package/docs/components/Alert/examples/Alert.md +29 -29
  161. package/docs/components/AlertGroup/examples/AlertGroup.md +15 -15
  162. package/docs/components/AppLauncher/examples/application-launcher.md +52 -46
  163. package/docs/components/Avatar/examples/Avatar.md +11 -11
  164. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  165. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  166. package/docs/components/BackgroundImage/examples/BackgroundImage.md +13 -29
  167. package/docs/components/Badge/examples/Badge.md +5 -5
  168. package/docs/components/Banner/examples/Banner.md +8 -8
  169. package/docs/components/Brand/examples/Brand.md +9 -9
  170. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  171. package/docs/components/Button/examples/Button.md +51 -55
  172. package/docs/components/CalendarMonth/examples/CalendarMonth.md +301 -284
  173. package/docs/components/Card/examples/Card.md +676 -116
  174. package/docs/components/Check/examples/Check.md +16 -19
  175. package/docs/components/Chip/examples/Chip.md +70 -52
  176. package/docs/components/ChipGroup/examples/ChipGroup.md +452 -673
  177. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  178. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  179. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  180. package/docs/components/Content/examples/Content.md +37 -9
  181. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  182. package/docs/components/ContextSelector/examples/context-selector.md +87 -80
  183. package/docs/components/DataList/examples/DataList.md +239 -202
  184. package/docs/components/DatePicker/examples/DatePicker.md +139 -104
  185. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  186. package/docs/components/Divider/examples/Divider.md +10 -10
  187. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  188. package/docs/components/Drawer/examples/Drawer.md +43 -43
  189. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  190. package/docs/components/Dropdown/examples/Dropdown.md +125 -100
  191. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  192. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  193. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  194. package/docs/components/FileUpload/examples/FileUpload.md +150 -110
  195. package/docs/components/Form/examples/Form.md +152 -130
  196. package/docs/components/FormControl/examples/FormControl.md +21 -20
  197. package/docs/components/HelperText/examples/HelperText.md +24 -35
  198. package/docs/components/Hint/examples/Hint.md +7 -7
  199. package/docs/components/Icon/examples/Icon.md +11 -12
  200. package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
  201. package/docs/components/InputGroup/examples/InputGroup.md +229 -179
  202. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  203. package/docs/components/Label/examples/Label.md +1427 -746
  204. package/docs/components/LabelGroup/examples/LabelGroup.md +295 -242
  205. package/docs/components/List/examples/List.md +18 -18
  206. package/docs/components/LogViewer/examples/LogViewer.md +79 -74
  207. package/docs/components/Login/examples/Login.md +103 -181
  208. package/docs/components/Masthead/examples/masthead.md +9 -9
  209. package/docs/components/Menu/examples/Menu.md +93 -85
  210. package/docs/components/MenuToggle/examples/MenuToggle.md +29 -28
  211. package/docs/components/ModalBox/examples/ModalBox.md +113 -92
  212. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +27 -26
  213. package/docs/components/Nav/examples/Navigation.md +69 -69
  214. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  215. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +64 -64
  216. package/docs/components/NumberInput/examples/NumberInput.md +311 -239
  217. package/docs/components/OptionsMenu/examples/options-menu.md +28 -28
  218. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  219. package/docs/components/Page/examples/Page.css +7 -1
  220. package/docs/components/Page/examples/Page.md +81 -54
  221. package/docs/components/Pagination/examples/Pagination.md +27 -27
  222. package/docs/components/Panel/examples/Panel.md +10 -10
  223. package/docs/components/Popover/examples/Popover.md +206 -149
  224. package/docs/components/Progress/examples/Progress.md +32 -61
  225. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -39
  226. package/docs/components/Radio/examples/Radio.md +12 -11
  227. package/docs/components/SearchInput/examples/SearchInput.md +185 -148
  228. package/docs/components/Select/examples/Select.md +372 -318
  229. package/docs/components/Sidebar/examples/Sidebar.md +70 -14
  230. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  231. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  232. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  233. package/docs/components/Slider/examples/Slider.md +84 -62
  234. package/docs/components/Spinner/examples/Spinner.md +18 -67
  235. package/docs/components/Switch/examples/Switch.md +19 -19
  236. package/docs/components/TabContent/examples/TabContent.md +13 -13
  237. package/docs/components/Table/examples/Table.css +4 -0
  238. package/docs/components/Table/examples/Table.md +5212 -5750
  239. package/docs/components/Tabs/examples/Tabs.md +155 -155
  240. package/docs/components/TextInputGroup/examples/TextInputGroup.md +523 -406
  241. package/docs/components/Tile/examples/Tile.md +16 -17
  242. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  243. package/docs/components/Title/examples/Title.md +17 -17
  244. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  245. package/docs/components/Toolbar/examples/Toolbar.md +848 -726
  246. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  247. package/docs/components/TreeView/examples/TreeView.md +34 -34
  248. package/docs/components/Truncate/examples/Truncate.md +4 -5
  249. package/docs/components/Wizard/examples/Wizard.md +119 -127
  250. package/docs/demos/AboutModal/examples/AboutModal.md +4 -5
  251. package/docs/demos/Alert/examples/Alert.md +118 -71
  252. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  253. package/docs/demos/Banner/examples/Banner.md +8 -9
  254. package/docs/demos/Button/examples/Button.md +10 -5
  255. package/docs/demos/Card/examples/Card.md +246 -168
  256. package/docs/demos/CardView/examples/CardView.md +57 -30
  257. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  258. package/docs/demos/Dashboard/examples/Dashboard.md +61 -38
  259. package/docs/demos/DataList/examples/DataList.md +312 -255
  260. package/docs/demos/DescriptionList/examples/DescriptionList.md +33 -22
  261. package/docs/demos/Drawer/examples/Drawer.md +24 -22
  262. package/docs/demos/Form/examples/BasicForms.md +220 -213
  263. package/docs/demos/HelperText/examples/HelperText.md +16 -14
  264. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  265. package/docs/demos/Masthead/examples/Masthead.md +302 -284
  266. package/docs/demos/Modal/examples/Modal.md +54 -66
  267. package/docs/demos/Nav/examples/Nav.md +47 -47
  268. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +70 -58
  269. package/docs/demos/Page/examples/Page.md +982 -51
  270. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +22 -18
  271. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +121 -106
  272. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +345 -311
  273. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  274. package/docs/demos/Table/examples/Table.md +3373 -1333
  275. package/docs/demos/Tabs/examples/Tabs.md +141 -90
  276. package/docs/demos/Toolbar/examples/Toolbar.md +1994 -329
  277. package/docs/demos/Wizard/examples/Wizard.md +289 -266
  278. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  279. package/docs/layouts/Flex/examples/Flex.md +98 -98
  280. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  281. package/docs/layouts/Grid/examples/Grid.md +9 -9
  282. package/docs/layouts/Level/examples/Level.md +5 -5
  283. package/docs/layouts/Split/examples/Split.md +7 -7
  284. package/docs/layouts/Stack/examples/Stack.md +6 -6
  285. package/docs/utilities/Accessibility/examples/Accessibility.md +5 -5
  286. package/docs/utilities/Alignment/examples/Alignment.md +7 -7
  287. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +13 -13
  288. package/docs/utilities/BoxShadow/examples/box-shadow.md +23 -23
  289. package/docs/utilities/Display/examples/Display.md +12 -12
  290. package/docs/utilities/Flex/examples/Flex.md +35 -35
  291. package/docs/utilities/Float/examples/Float.md +5 -5
  292. package/docs/utilities/Sizing/examples/Sizing.md +51 -51
  293. package/docs/utilities/Spacing/examples/Spacing.md +35 -35
  294. package/docs/utilities/Text/examples/Text.md +31 -31
  295. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  296. package/layouts/Gallery/gallery.css +1 -1
  297. package/layouts/Gallery/gallery.scss +1 -1
  298. package/layouts/Grid/grid.css +7 -7
  299. package/layouts/Grid/grid.scss +2 -2
  300. package/package.json +60 -66
  301. package/patternfly-addons.css +48 -48
  302. package/{patternfly-base-no-reset.css → patternfly-base-no-globals.css} +28 -73
  303. package/{patternfly-base-no-reset.scss → patternfly-base-no-globals.scss} +1 -0
  304. package/patternfly-base.css +63 -114
  305. package/{patternfly-no-reset.css → patternfly-no-globals.css} +1206 -2449
  306. package/{patternfly-no-reset.scss → patternfly-no-globals.scss} +1 -0
  307. package/patternfly.css +1234 -2483
  308. package/patternfly.min.css +1 -1
  309. package/patternfly.min.css.map +1 -1
  310. package/sass-utilities/functions.scss +8 -24
  311. package/sass-utilities/mixins.scss +15 -39
  312. package/sass-utilities/placeholders.scss +0 -23
  313. package/sass-utilities/scss-variables.scss +5 -6
  314. package/sass-utilities/themes/dark/placeholders.scss +0 -22
  315. package/sass-utilities/themes/dark/scss-variables.scss +1 -1
  316. package/utilities/Spacing/spacing.scss +2 -2
  317. package/utilities/Text/text.css +48 -48
  318. package/utilities/Text/text.scss +6 -6
  319. package/utilities/Text/themes/dark/text.scss +2 -2
  320. package/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff +0 -0
  321. package/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff +0 -0
  322. package/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff +0 -0
  323. package/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff +0 -0
  324. package/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff +0 -0
  325. package/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff +0 -0
  326. package/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff +0 -0
  327. package/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff +0 -0
  328. package/assets/fonts/RedHatText/RedHatText-Bold.woff +0 -0
  329. package/assets/fonts/RedHatText/RedHatText-BoldItalic.woff +0 -0
  330. package/assets/fonts/RedHatText/RedHatText-Italic.woff +0 -0
  331. package/assets/fonts/RedHatText/RedHatText-Medium.woff +0 -0
  332. package/assets/fonts/RedHatText/RedHatText-MediumItalic.woff +0 -0
  333. package/assets/fonts/RedHatText/RedHatText-Regular.woff +0 -0
  334. package/assets/fonts/webfonts/fa-solid-900.woff +0 -0
  335. package/assets/pficon/pficon.woff +0 -0
  336. package/base/_shield-inheritable.scss +0 -69
  337. package/base/_shield-noninheritable.scss +0 -13
  338. package/base/patternfly-shield-inheritable.css +0 -66
  339. package/base/patternfly-shield-inheritable.scss +0 -4
  340. package/base/patternfly-shield-noninheritable.css +0 -9
  341. package/base/patternfly-shield-noninheritable.scss +0 -4
  342. package/sass-utilities/bs-variables.scss +0 -709
package/docs/components/Label/examples/Label.md CHANGED
@@ -10,7 +10,9 @@ cssPrefix: pf-c-label
10
10
 
11
11
  ```html
12
12
  <span class="pf-c-label">
13
- <span class="pf-c-label__content">Grey</span>
13
+ <span class="pf-c-label__content">
14
+ <span class="pf-c-label__text">Grey</span>
15
+ </span>
14
16
  </span>
15
17
 
16
18
  <span class="pf-c-label">
@@ -18,21 +20,25 @@ cssPrefix: pf-c-label
18
20
  <span class="pf-c-label__icon">
19
21
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
20
22
  </span>
21
- Grey icon
23
+ <span class="pf-c-label__text">Grey icon</span>
22
24
  </span>
23
25
  </span>
24
26
 
25
27
  <span class="pf-c-label">
26
- <span class="pf-c-label__content">Grey removable</span>
27
- <button
28
- class="pf-c-button pf-m-plain"
29
- type="button"
30
- id="default-grey-close-button"
31
- aria-label="Remove"
32
- aria-labelledby="default-grey-close-button default-grey-close-text"
33
- >
34
- <i class="fas fa-times" aria-hidden="true"></i>
35
- </button>
28
+ <span class="pf-c-label__content">
29
+ <span class="pf-c-label__text">Grey removable</span>
30
+ </span>
31
+ <span class="pf-c-label__actions">
32
+ <button
33
+ class="pf-c-button pf-m-plain"
34
+ type="button"
35
+ id="default-removable-button"
36
+ aria-label="Remove"
37
+ aria-labelledby="default-removable-button default-removable-text"
38
+ >
39
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
40
+ </button>
41
+ </span>
36
42
  </span>
37
43
 
38
44
  <span class="pf-c-label">
@@ -40,34 +46,42 @@ cssPrefix: pf-c-label
40
46
  <span class="pf-c-label__icon">
41
47
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
42
48
  </span>
43
- Grey icon removable
49
+ <span class="pf-c-label__text">Grey icon removable</span>
50
+ </span>
51
+ <span class="pf-c-label__actions">
52
+ <button
53
+ class="pf-c-button pf-m-plain"
54
+ type="button"
55
+ id="default-icon-removable-button"
56
+ aria-label="Remove"
57
+ aria-labelledby="default-icon-removable-button default-icon-removable-text"
58
+ >
59
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
60
+ </button>
44
61
  </span>
45
- <button
46
- class="pf-c-button pf-m-plain"
47
- type="button"
48
- id="default-grey-icon-close-button"
49
- aria-label="Remove"
50
- aria-labelledby="default-grey-icon-close-button default-grey-icon-close-text"
51
- >
52
- <i class="fas fa-times" aria-hidden="true"></i>
53
- </button>
54
62
  </span>
55
63
 
56
64
  <span class="pf-c-label">
57
- <a class="pf-c-label__content" href="#">Grey link</a>
65
+ <a class="pf-c-label__content" href="#">
66
+ <span class="pf-c-label__text">Grey link</span>
67
+ </a>
58
68
  </span>
59
69
 
60
70
  <span class="pf-c-label">
61
- <a class="pf-c-label__content" href="#">Grey link removable</a>
62
- <button
63
- class="pf-c-button pf-m-plain"
64
- type="button"
65
- id="default-grey-link-close-button"
66
- aria-label="Remove"
67
- aria-labelledby="default-grey-link-close-button default-grey-link-close-text"
68
- >
69
- <i class="fas fa-times" aria-hidden="true"></i>
70
- </button>
71
+ <a class="pf-c-label__content" href="#">
72
+ <span class="pf-c-label__text">Grey link removable</span>
73
+ </a>
74
+ <span class="pf-c-label__actions">
75
+ <button
76
+ class="pf-c-button pf-m-plain"
77
+ type="button"
78
+ id="default-link-removable-button"
79
+ aria-label="Remove"
80
+ aria-labelledby="default-link-removable-button default-link-removable-text"
81
+ >
82
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
83
+ </button>
84
+ </span>
71
85
  </span>
72
86
 
73
87
  <span class="pf-c-label">
@@ -75,24 +89,43 @@ cssPrefix: pf-c-label
75
89
  <span class="pf-c-label__icon">
76
90
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
77
91
  </span>
78
- <span class="pf-c-label__text">Grey label with icon that truncates</span>
92
+ <span
93
+ class="pf-c-label__text"
94
+ style="--pf-c-label__text--MaxWidth: 28ch"
95
+ >Grey label, max-width truncation customization</span>
96
+ </span>
97
+ </span>
98
+
99
+ <span class="pf-c-label">
100
+ <span class="pf-c-label__content">
101
+ <span class="pf-c-label__icon">
102
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
103
+ </span>
104
+ <span
105
+ class="pf-c-label__text"
106
+ style="--pf-c-label__text--MaxWidth: 38ch"
107
+ >Grey label with icon and set max-width truncation customization</span>
108
+ </span>
109
+ <span class="pf-c-label__actions">
110
+ <button
111
+ class="pf-c-button pf-m-plain"
112
+ type="button"
113
+ id="default-truncated-with-icon-button"
114
+ aria-label="Remove"
115
+ aria-labelledby="default-truncated-with-icon-button default-truncated-with-icon-text"
116
+ >
117
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
118
+ </button>
79
119
  </span>
80
- <button
81
- class="pf-c-button pf-m-plain"
82
- type="button"
83
- id="default-grey-icon-close-truncate-button"
84
- aria-label="Remove"
85
- aria-labelledby="default-grey-icon-close-truncate-button default-grey-icon-close-truncate-text"
86
- >
87
- <i class="fas fa-times" aria-hidden="true"></i>
88
- </button>
89
120
  </span>
90
121
 
91
122
  <br />
92
123
  <br />
93
124
 
94
125
  <span class="pf-c-label pf-m-blue">
95
- <span class="pf-c-label__content">Blue</span>
126
+ <span class="pf-c-label__content">
127
+ <span class="pf-c-label__text">Blue</span>
128
+ </span>
96
129
  </span>
97
130
 
98
131
  <span class="pf-c-label pf-m-blue">
@@ -100,21 +133,25 @@ cssPrefix: pf-c-label
100
133
  <span class="pf-c-label__icon">
101
134
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
102
135
  </span>
103
- Blue icon
136
+ <span class="pf-c-label__text">Blue icon</span>
104
137
  </span>
105
138
  </span>
106
139
 
107
140
  <span class="pf-c-label pf-m-blue">
108
- <span class="pf-c-label__content">Blue removable</span>
109
- <button
110
- class="pf-c-button pf-m-plain"
111
- type="button"
112
- id="default-blue-close-button"
113
- aria-label="Remove"
114
- aria-labelledby="default-blue-close-button default-blue-close-text"
115
- >
116
- <i class="fas fa-times" aria-hidden="true"></i>
117
- </button>
141
+ <span class="pf-c-label__content">
142
+ <span class="pf-c-label__text">Blue removable</span>
143
+ </span>
144
+ <span class="pf-c-label__actions">
145
+ <button
146
+ class="pf-c-button pf-m-plain"
147
+ type="button"
148
+ id="blue-removable-button"
149
+ aria-label="Remove"
150
+ aria-labelledby="blue-removable-button blue-removable-text"
151
+ >
152
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
153
+ </button>
154
+ </span>
118
155
  </span>
119
156
 
120
157
  <span class="pf-c-label pf-m-blue">
@@ -122,34 +159,42 @@ cssPrefix: pf-c-label
122
159
  <span class="pf-c-label__icon">
123
160
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
124
161
  </span>
125
- Blue icon removable
162
+ <span class="pf-c-label__text">Blue icon removable</span>
163
+ </span>
164
+ <span class="pf-c-label__actions">
165
+ <button
166
+ class="pf-c-button pf-m-plain"
167
+ type="button"
168
+ id="blue-icon-removable-button"
169
+ aria-label="Remove"
170
+ aria-labelledby="blue-icon-removable-button blue-icon-removable-text"
171
+ >
172
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
173
+ </button>
126
174
  </span>
127
- <button
128
- class="pf-c-button pf-m-plain"
129
- type="button"
130
- id="default-blue-icon-close-button"
131
- aria-label="Remove"
132
- aria-labelledby="default-blue-icon-close-button default-blue-icon-close-text"
133
- >
134
- <i class="fas fa-times" aria-hidden="true"></i>
135
- </button>
136
175
  </span>
137
176
 
138
177
  <span class="pf-c-label pf-m-blue">
139
- <a class="pf-c-label__content" href="#">Blue link</a>
178
+ <a class="pf-c-label__content" href="#">
179
+ <span class="pf-c-label__text">Blue link</span>
180
+ </a>
140
181
  </span>
141
182
 
142
183
  <span class="pf-c-label pf-m-blue">
143
- <a class="pf-c-label__content" href="#">Blue link removable</a>
144
- <button
145
- class="pf-c-button pf-m-plain"
146
- type="button"
147
- id="default-blue-link-close-button"
148
- aria-label="Remove"
149
- aria-labelledby="default-blue-link-close-button default-blue-link-close-text"
150
- >
151
- <i class="fas fa-times" aria-hidden="true"></i>
152
- </button>
184
+ <a class="pf-c-label__content" href="#">
185
+ <span class="pf-c-label__text">Blue link removable</span>
186
+ </a>
187
+ <span class="pf-c-label__actions">
188
+ <button
189
+ class="pf-c-button pf-m-plain"
190
+ type="button"
191
+ id="blue-link-removable-button"
192
+ aria-label="Remove"
193
+ aria-labelledby="blue-link-removable-button blue-link-removable-text"
194
+ >
195
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
196
+ </button>
197
+ </span>
153
198
  </span>
154
199
 
155
200
  <span class="pf-c-label pf-m-blue">
@@ -157,24 +202,43 @@ cssPrefix: pf-c-label
157
202
  <span class="pf-c-label__icon">
158
203
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
159
204
  </span>
160
- <span class="pf-c-label__text">Blue label with icon that truncates</span>
205
+ <span
206
+ class="pf-c-label__text"
207
+ style="--pf-c-label__text--MaxWidth: 28ch"
208
+ >Blue label, max-width truncation customization</span>
209
+ </span>
210
+ </span>
211
+
212
+ <span class="pf-c-label pf-m-blue">
213
+ <span class="pf-c-label__content">
214
+ <span class="pf-c-label__icon">
215
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
216
+ </span>
217
+ <span
218
+ class="pf-c-label__text"
219
+ style="--pf-c-label__text--MaxWidth: 38ch"
220
+ >Blue label with icon and set max-width truncation customization</span>
221
+ </span>
222
+ <span class="pf-c-label__actions">
223
+ <button
224
+ class="pf-c-button pf-m-plain"
225
+ type="button"
226
+ id="blue-truncated-with-icon-button"
227
+ aria-label="Remove"
228
+ aria-labelledby="blue-truncated-with-icon-button blue-truncated-with-icon-text"
229
+ >
230
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
231
+ </button>
161
232
  </span>
162
- <button
163
- class="pf-c-button pf-m-plain"
164
- type="button"
165
- id="default-blue-icon-close-truncate-button"
166
- aria-label="Remove"
167
- aria-labelledby="default-blue-icon-close-truncate-button default-blue-icon-close-truncate-text"
168
- >
169
- <i class="fas fa-times" aria-hidden="true"></i>
170
- </button>
171
233
  </span>
172
234
 
173
235
  <br />
174
236
  <br />
175
237
 
176
238
  <span class="pf-c-label pf-m-green">
177
- <span class="pf-c-label__content">Green</span>
239
+ <span class="pf-c-label__content">
240
+ <span class="pf-c-label__text">Green</span>
241
+ </span>
178
242
  </span>
179
243
 
180
244
  <span class="pf-c-label pf-m-green">
@@ -182,21 +246,25 @@ cssPrefix: pf-c-label
182
246
  <span class="pf-c-label__icon">
183
247
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
184
248
  </span>
185
- Green icon
249
+ <span class="pf-c-label__text">Green icon</span>
186
250
  </span>
187
251
  </span>
188
252
 
189
253
  <span class="pf-c-label pf-m-green">
190
- <span class="pf-c-label__content">Green removable</span>
191
- <button
192
- class="pf-c-button pf-m-plain"
193
- type="button"
194
- id="default-green-close-button"
195
- aria-label="Remove"
196
- aria-labelledby="default-green-close-button default-green-close-text"
197
- >
198
- <i class="fas fa-times" aria-hidden="true"></i>
199
- </button>
254
+ <span class="pf-c-label__content">
255
+ <span class="pf-c-label__text">Green removable</span>
256
+ </span>
257
+ <span class="pf-c-label__actions">
258
+ <button
259
+ class="pf-c-button pf-m-plain"
260
+ type="button"
261
+ id="green-removable-button"
262
+ aria-label="Remove"
263
+ aria-labelledby="green-removable-button green-removable-text"
264
+ >
265
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
266
+ </button>
267
+ </span>
200
268
  </span>
201
269
 
202
270
  <span class="pf-c-label pf-m-green">
@@ -204,34 +272,42 @@ cssPrefix: pf-c-label
204
272
  <span class="pf-c-label__icon">
205
273
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
206
274
  </span>
207
- Green icon removable
275
+ <span class="pf-c-label__text">Green icon removable</span>
276
+ </span>
277
+ <span class="pf-c-label__actions">
278
+ <button
279
+ class="pf-c-button pf-m-plain"
280
+ type="button"
281
+ id="green-icon-removable-button"
282
+ aria-label="Remove"
283
+ aria-labelledby="green-icon-removable-button green-icon-removable-text"
284
+ >
285
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
286
+ </button>
208
287
  </span>
209
- <button
210
- class="pf-c-button pf-m-plain"
211
- type="button"
212
- id="default-green-icon-close-button"
213
- aria-label="Remove"
214
- aria-labelledby="default-green-icon-close-button default-green-icon-close-text"
215
- >
216
- <i class="fas fa-times" aria-hidden="true"></i>
217
- </button>
218
288
  </span>
219
289
 
220
290
  <span class="pf-c-label pf-m-green">
221
- <a class="pf-c-label__content" href="#">Green link</a>
291
+ <a class="pf-c-label__content" href="#">
292
+ <span class="pf-c-label__text">Green link</span>
293
+ </a>
222
294
  </span>
223
295
 
224
296
  <span class="pf-c-label pf-m-green">
225
- <a class="pf-c-label__content" href="#">Green link removable</a>
226
- <button
227
- class="pf-c-button pf-m-plain"
228
- type="button"
229
- id="default-green-link-close-button"
230
- aria-label="Remove"
231
- aria-labelledby="default-green-link-close-button default-green-link-close-text"
232
- >
233
- <i class="fas fa-times" aria-hidden="true"></i>
234
- </button>
297
+ <a class="pf-c-label__content" href="#">
298
+ <span class="pf-c-label__text">Green link removable</span>
299
+ </a>
300
+ <span class="pf-c-label__actions">
301
+ <button
302
+ class="pf-c-button pf-m-plain"
303
+ type="button"
304
+ id="green-link-removable-button"
305
+ aria-label="Remove"
306
+ aria-labelledby="green-link-removable-button green-link-removable-text"
307
+ >
308
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
309
+ </button>
310
+ </span>
235
311
  </span>
236
312
 
237
313
  <span class="pf-c-label pf-m-green">
@@ -239,24 +315,43 @@ cssPrefix: pf-c-label
239
315
  <span class="pf-c-label__icon">
240
316
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
241
317
  </span>
242
- <span class="pf-c-label__text">Green label with icon that truncates</span>
318
+ <span
319
+ class="pf-c-label__text"
320
+ style="--pf-c-label__text--MaxWidth: 28ch"
321
+ >Green label, max-width truncation customization</span>
322
+ </span>
323
+ </span>
324
+
325
+ <span class="pf-c-label pf-m-green">
326
+ <span class="pf-c-label__content">
327
+ <span class="pf-c-label__icon">
328
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
329
+ </span>
330
+ <span
331
+ class="pf-c-label__text"
332
+ style="--pf-c-label__text--MaxWidth: 38ch"
333
+ >Green label with icon and set max-width truncation customization</span>
334
+ </span>
335
+ <span class="pf-c-label__actions">
336
+ <button
337
+ class="pf-c-button pf-m-plain"
338
+ type="button"
339
+ id="green-truncated-with-icon-button"
340
+ aria-label="Remove"
341
+ aria-labelledby="green-truncated-with-icon-button green-truncated-with-icon-text"
342
+ >
343
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
344
+ </button>
243
345
  </span>
244
- <button
245
- class="pf-c-button pf-m-plain"
246
- type="button"
247
- id="default-green-icon-close-truncate-button"
248
- aria-label="Remove"
249
- aria-labelledby="default-green-icon-close-truncate-button default-green-icon-close-truncate-text"
250
- >
251
- <i class="fas fa-times" aria-hidden="true"></i>
252
- </button>
253
346
  </span>
254
347
 
255
348
  <br />
256
349
  <br />
257
350
 
258
351
  <span class="pf-c-label pf-m-orange">
259
- <span class="pf-c-label__content">Orange</span>
352
+ <span class="pf-c-label__content">
353
+ <span class="pf-c-label__text">Orange</span>
354
+ </span>
260
355
  </span>
261
356
 
262
357
  <span class="pf-c-label pf-m-orange">
@@ -264,21 +359,25 @@ cssPrefix: pf-c-label
264
359
  <span class="pf-c-label__icon">
265
360
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
266
361
  </span>
267
- Orange icon
362
+ <span class="pf-c-label__text">Orange icon</span>
268
363
  </span>
269
364
  </span>
270
365
 
271
366
  <span class="pf-c-label pf-m-orange">
272
- <span class="pf-c-label__content">Orange removable</span>
273
- <button
274
- class="pf-c-button pf-m-plain"
275
- type="button"
276
- id="default-orange-close-button"
277
- aria-label="Remove"
278
- aria-labelledby="default-orange-close-button default-orange-close-text"
279
- >
280
- <i class="fas fa-times" aria-hidden="true"></i>
281
- </button>
367
+ <span class="pf-c-label__content">
368
+ <span class="pf-c-label__text">Orange removable</span>
369
+ </span>
370
+ <span class="pf-c-label__actions">
371
+ <button
372
+ class="pf-c-button pf-m-plain"
373
+ type="button"
374
+ id="orange-removable-button"
375
+ aria-label="Remove"
376
+ aria-labelledby="orange-removable-button orange-removable-text"
377
+ >
378
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
379
+ </button>
380
+ </span>
282
381
  </span>
283
382
 
284
383
  <span class="pf-c-label pf-m-orange">
@@ -286,34 +385,42 @@ cssPrefix: pf-c-label
286
385
  <span class="pf-c-label__icon">
287
386
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
288
387
  </span>
289
- Orange icon removable
388
+ <span class="pf-c-label__text">Orange icon removable</span>
389
+ </span>
390
+ <span class="pf-c-label__actions">
391
+ <button
392
+ class="pf-c-button pf-m-plain"
393
+ type="button"
394
+ id="orange-icon-removable-button"
395
+ aria-label="Remove"
396
+ aria-labelledby="orange-icon-removable-button orange-icon-removable-text"
397
+ >
398
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
399
+ </button>
290
400
  </span>
291
- <button
292
- class="pf-c-button pf-m-plain"
293
- type="button"
294
- id="default-orange-icon-close-button"
295
- aria-label="Remove"
296
- aria-labelledby="default-orange-icon-close-button default-orange-icon-close-text"
297
- >
298
- <i class="fas fa-times" aria-hidden="true"></i>
299
- </button>
300
401
  </span>
301
402
 
302
403
  <span class="pf-c-label pf-m-orange">
303
- <a class="pf-c-label__content" href="#">Orange link</a>
404
+ <a class="pf-c-label__content" href="#">
405
+ <span class="pf-c-label__text">Orange link</span>
406
+ </a>
304
407
  </span>
305
408
 
306
409
  <span class="pf-c-label pf-m-orange">
307
- <a class="pf-c-label__content" href="#">Orange link removable</a>
308
- <button
309
- class="pf-c-button pf-m-plain"
310
- type="button"
311
- id="default-orange-link-close-button"
312
- aria-label="Remove"
313
- aria-labelledby="default-orange-link-close-button default-orange-link-close-text"
314
- >
315
- <i class="fas fa-times" aria-hidden="true"></i>
316
- </button>
410
+ <a class="pf-c-label__content" href="#">
411
+ <span class="pf-c-label__text">Orange link removable</span>
412
+ </a>
413
+ <span class="pf-c-label__actions">
414
+ <button
415
+ class="pf-c-button pf-m-plain"
416
+ type="button"
417
+ id="orange-link-removable-button"
418
+ aria-label="Remove"
419
+ aria-labelledby="orange-link-removable-button orange-link-removable-text"
420
+ >
421
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
422
+ </button>
423
+ </span>
317
424
  </span>
318
425
 
319
426
  <span class="pf-c-label pf-m-orange">
@@ -321,24 +428,43 @@ cssPrefix: pf-c-label
321
428
  <span class="pf-c-label__icon">
322
429
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
323
430
  </span>
324
- <span class="pf-c-label__text">Orange label with icon that truncates</span>
431
+ <span
432
+ class="pf-c-label__text"
433
+ style="--pf-c-label__text--MaxWidth: 28ch"
434
+ >Orange label, max-width truncation customization</span>
435
+ </span>
436
+ </span>
437
+
438
+ <span class="pf-c-label pf-m-orange">
439
+ <span class="pf-c-label__content">
440
+ <span class="pf-c-label__icon">
441
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
442
+ </span>
443
+ <span
444
+ class="pf-c-label__text"
445
+ style="--pf-c-label__text--MaxWidth: 38ch"
446
+ >Orange label with icon and set max-width truncation customization</span>
447
+ </span>
448
+ <span class="pf-c-label__actions">
449
+ <button
450
+ class="pf-c-button pf-m-plain"
451
+ type="button"
452
+ id="orange-truncated-with-icon-button"
453
+ aria-label="Remove"
454
+ aria-labelledby="orange-truncated-with-icon-button orange-truncated-with-icon-text"
455
+ >
456
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
457
+ </button>
325
458
  </span>
326
- <button
327
- class="pf-c-button pf-m-plain"
328
- type="button"
329
- id="default-orange-icon-close-truncate-button"
330
- aria-label="Remove"
331
- aria-labelledby="default-orange-icon-close-truncate-button default-orange-icon-close-truncate-text"
332
- >
333
- <i class="fas fa-times" aria-hidden="true"></i>
334
- </button>
335
459
  </span>
336
460
 
337
461
  <br />
338
462
  <br />
339
463
 
340
464
  <span class="pf-c-label pf-m-red">
341
- <span class="pf-c-label__content">Red</span>
465
+ <span class="pf-c-label__content">
466
+ <span class="pf-c-label__text">Red</span>
467
+ </span>
342
468
  </span>
343
469
 
344
470
  <span class="pf-c-label pf-m-red">
@@ -346,21 +472,25 @@ cssPrefix: pf-c-label
346
472
  <span class="pf-c-label__icon">
347
473
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
348
474
  </span>
349
- Red icon
475
+ <span class="pf-c-label__text">Red icon</span>
350
476
  </span>
351
477
  </span>
352
478
 
353
479
  <span class="pf-c-label pf-m-red">
354
- <span class="pf-c-label__content">Red removable</span>
355
- <button
356
- class="pf-c-button pf-m-plain"
357
- type="button"
358
- id="default-red-close-button"
359
- aria-label="Remove"
360
- aria-labelledby="default-red-close-button default-red-close-text"
361
- >
362
- <i class="fas fa-times" aria-hidden="true"></i>
363
- </button>
480
+ <span class="pf-c-label__content">
481
+ <span class="pf-c-label__text">Red removable</span>
482
+ </span>
483
+ <span class="pf-c-label__actions">
484
+ <button
485
+ class="pf-c-button pf-m-plain"
486
+ type="button"
487
+ id="red-removable-button"
488
+ aria-label="Remove"
489
+ aria-labelledby="red-removable-button red-removable-text"
490
+ >
491
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
492
+ </button>
493
+ </span>
364
494
  </span>
365
495
 
366
496
  <span class="pf-c-label pf-m-red">
@@ -368,34 +498,42 @@ cssPrefix: pf-c-label
368
498
  <span class="pf-c-label__icon">
369
499
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
370
500
  </span>
371
- Red icon removable
501
+ <span class="pf-c-label__text">Red icon removable</span>
502
+ </span>
503
+ <span class="pf-c-label__actions">
504
+ <button
505
+ class="pf-c-button pf-m-plain"
506
+ type="button"
507
+ id="red-icon-removable-button"
508
+ aria-label="Remove"
509
+ aria-labelledby="red-icon-removable-button red-icon-removable-text"
510
+ >
511
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
512
+ </button>
372
513
  </span>
373
- <button
374
- class="pf-c-button pf-m-plain"
375
- type="button"
376
- id="default-red-icon-close-button"
377
- aria-label="Remove"
378
- aria-labelledby="default-red-icon-close-button default-red-icon-close-text"
379
- >
380
- <i class="fas fa-times" aria-hidden="true"></i>
381
- </button>
382
514
  </span>
383
515
 
384
516
  <span class="pf-c-label pf-m-red">
385
- <a class="pf-c-label__content" href="#">Red link</a>
517
+ <a class="pf-c-label__content" href="#">
518
+ <span class="pf-c-label__text">Red link</span>
519
+ </a>
386
520
  </span>
387
521
 
388
522
  <span class="pf-c-label pf-m-red">
389
- <a class="pf-c-label__content" href="#">Red link removable</a>
390
- <button
391
- class="pf-c-button pf-m-plain"
392
- type="button"
393
- id="default-red-link-close-button"
394
- aria-label="Remove"
395
- aria-labelledby="default-red-link-close-button default-red-link-close-text"
396
- >
397
- <i class="fas fa-times" aria-hidden="true"></i>
398
- </button>
523
+ <a class="pf-c-label__content" href="#">
524
+ <span class="pf-c-label__text">Red link removable</span>
525
+ </a>
526
+ <span class="pf-c-label__actions">
527
+ <button
528
+ class="pf-c-button pf-m-plain"
529
+ type="button"
530
+ id="red-link-removable-button"
531
+ aria-label="Remove"
532
+ aria-labelledby="red-link-removable-button red-link-removable-text"
533
+ >
534
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
535
+ </button>
536
+ </span>
399
537
  </span>
400
538
 
401
539
  <span class="pf-c-label pf-m-red">
@@ -403,24 +541,43 @@ cssPrefix: pf-c-label
403
541
  <span class="pf-c-label__icon">
404
542
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
405
543
  </span>
406
- <span class="pf-c-label__text">Red label with icon that truncates</span>
544
+ <span
545
+ class="pf-c-label__text"
546
+ style="--pf-c-label__text--MaxWidth: 28ch"
547
+ >Red label, max-width truncation customization</span>
548
+ </span>
549
+ </span>
550
+
551
+ <span class="pf-c-label pf-m-red">
552
+ <span class="pf-c-label__content">
553
+ <span class="pf-c-label__icon">
554
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
555
+ </span>
556
+ <span
557
+ class="pf-c-label__text"
558
+ style="--pf-c-label__text--MaxWidth: 38ch"
559
+ >Red label with icon and set max-width truncation customization</span>
560
+ </span>
561
+ <span class="pf-c-label__actions">
562
+ <button
563
+ class="pf-c-button pf-m-plain"
564
+ type="button"
565
+ id="red-truncated-with-icon-button"
566
+ aria-label="Remove"
567
+ aria-labelledby="red-truncated-with-icon-button red-truncated-with-icon-text"
568
+ >
569
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
570
+ </button>
407
571
  </span>
408
- <button
409
- class="pf-c-button pf-m-plain"
410
- type="button"
411
- id="default-red-icon-close-truncate-button"
412
- aria-label="Remove"
413
- aria-labelledby="default-red-icon-close-truncate-button default-red-icon-close-truncate-text"
414
- >
415
- <i class="fas fa-times" aria-hidden="true"></i>
416
- </button>
417
572
  </span>
418
573
 
419
574
  <br />
420
575
  <br />
421
576
 
422
577
  <span class="pf-c-label pf-m-purple">
423
- <span class="pf-c-label__content">Purple</span>
578
+ <span class="pf-c-label__content">
579
+ <span class="pf-c-label__text">Purple</span>
580
+ </span>
424
581
  </span>
425
582
 
426
583
  <span class="pf-c-label pf-m-purple">
@@ -428,21 +585,25 @@ cssPrefix: pf-c-label
428
585
  <span class="pf-c-label__icon">
429
586
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
430
587
  </span>
431
- Purple icon
588
+ <span class="pf-c-label__text">Purple icon</span>
432
589
  </span>
433
590
  </span>
434
591
 
435
592
  <span class="pf-c-label pf-m-purple">
436
- <span class="pf-c-label__content">Purple removable</span>
437
- <button
438
- class="pf-c-button pf-m-plain"
439
- type="button"
440
- id="default-purple-close-button"
441
- aria-label="Remove"
442
- aria-labelledby="default-purple-close-button default-purple-close-text"
443
- >
444
- <i class="fas fa-times" aria-hidden="true"></i>
445
- </button>
593
+ <span class="pf-c-label__content">
594
+ <span class="pf-c-label__text">Purple removable</span>
595
+ </span>
596
+ <span class="pf-c-label__actions">
597
+ <button
598
+ class="pf-c-button pf-m-plain"
599
+ type="button"
600
+ id="purple-removable-button"
601
+ aria-label="Remove"
602
+ aria-labelledby="purple-removable-button purple-removable-text"
603
+ >
604
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
605
+ </button>
606
+ </span>
446
607
  </span>
447
608
 
448
609
  <span class="pf-c-label pf-m-purple">
@@ -450,34 +611,42 @@ cssPrefix: pf-c-label
450
611
  <span class="pf-c-label__icon">
451
612
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
452
613
  </span>
453
- Purple icon removable
614
+ <span class="pf-c-label__text">Purple icon removable</span>
615
+ </span>
616
+ <span class="pf-c-label__actions">
617
+ <button
618
+ class="pf-c-button pf-m-plain"
619
+ type="button"
620
+ id="purple-icon-removable-button"
621
+ aria-label="Remove"
622
+ aria-labelledby="purple-icon-removable-button purple-icon-removable-text"
623
+ >
624
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
625
+ </button>
454
626
  </span>
455
- <button
456
- class="pf-c-button pf-m-plain"
457
- type="button"
458
- id="default-purple-icon-close-button"
459
- aria-label="Remove"
460
- aria-labelledby="default-purple-icon-close-button default-purple-icon-close-text"
461
- >
462
- <i class="fas fa-times" aria-hidden="true"></i>
463
- </button>
464
627
  </span>
465
628
 
466
629
  <span class="pf-c-label pf-m-purple">
467
- <a class="pf-c-label__content" href="#">Purple link</a>
630
+ <a class="pf-c-label__content" href="#">
631
+ <span class="pf-c-label__text">Purple link</span>
632
+ </a>
468
633
  </span>
469
634
 
470
635
  <span class="pf-c-label pf-m-purple">
471
- <a class="pf-c-label__content" href="#">Purple link removable</a>
472
- <button
473
- class="pf-c-button pf-m-plain"
474
- type="button"
475
- id="default-purple-link-close-button"
476
- aria-label="Remove"
477
- aria-labelledby="default-purple-link-close-button default-purple-link-close-text"
478
- >
479
- <i class="fas fa-times" aria-hidden="true"></i>
480
- </button>
636
+ <a class="pf-c-label__content" href="#">
637
+ <span class="pf-c-label__text">Purple link removable</span>
638
+ </a>
639
+ <span class="pf-c-label__actions">
640
+ <button
641
+ class="pf-c-button pf-m-plain"
642
+ type="button"
643
+ id="purple-link-removable-button"
644
+ aria-label="Remove"
645
+ aria-labelledby="purple-link-removable-button purple-link-removable-text"
646
+ >
647
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
648
+ </button>
649
+ </span>
481
650
  </span>
482
651
 
483
652
  <span class="pf-c-label pf-m-purple">
@@ -485,24 +654,43 @@ cssPrefix: pf-c-label
485
654
  <span class="pf-c-label__icon">
486
655
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
487
656
  </span>
488
- <span class="pf-c-label__text">Purple label with icon that truncates</span>
657
+ <span
658
+ class="pf-c-label__text"
659
+ style="--pf-c-label__text--MaxWidth: 28ch"
660
+ >Purple label, max-width truncation customization</span>
661
+ </span>
662
+ </span>
663
+
664
+ <span class="pf-c-label pf-m-purple">
665
+ <span class="pf-c-label__content">
666
+ <span class="pf-c-label__icon">
667
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
668
+ </span>
669
+ <span
670
+ class="pf-c-label__text"
671
+ style="--pf-c-label__text--MaxWidth: 38ch"
672
+ >Purple label with icon and set max-width truncation customization</span>
673
+ </span>
674
+ <span class="pf-c-label__actions">
675
+ <button
676
+ class="pf-c-button pf-m-plain"
677
+ type="button"
678
+ id="purple-truncated-with-icon-button"
679
+ aria-label="Remove"
680
+ aria-labelledby="purple-truncated-with-icon-button purple-truncated-with-icon-text"
681
+ >
682
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
683
+ </button>
489
684
  </span>
490
- <button
491
- class="pf-c-button pf-m-plain"
492
- type="button"
493
- id="default-purple-icon-close-truncate-button"
494
- aria-label="Remove"
495
- aria-labelledby="default-purple-icon-close-truncate-button default-purple-icon-close-truncate-text"
496
- >
497
- <i class="fas fa-times" aria-hidden="true"></i>
498
- </button>
499
685
  </span>
500
686
 
501
687
  <br />
502
688
  <br />
503
689
 
504
690
  <span class="pf-c-label pf-m-cyan">
505
- <span class="pf-c-label__content">Cyan</span>
691
+ <span class="pf-c-label__content">
692
+ <span class="pf-c-label__text">Cyan</span>
693
+ </span>
506
694
  </span>
507
695
 
508
696
  <span class="pf-c-label pf-m-cyan">
@@ -510,21 +698,25 @@ cssPrefix: pf-c-label
510
698
  <span class="pf-c-label__icon">
511
699
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
512
700
  </span>
513
- Cyan icon
701
+ <span class="pf-c-label__text">Cyan icon</span>
514
702
  </span>
515
703
  </span>
516
704
 
517
705
  <span class="pf-c-label pf-m-cyan">
518
- <span class="pf-c-label__content">Cyan removable</span>
519
- <button
520
- class="pf-c-button pf-m-plain"
521
- type="button"
522
- id="default-cyan-close-button"
523
- aria-label="Remove"
524
- aria-labelledby="default-cyan-close-button default-cyan-close-text"
525
- >
526
- <i class="fas fa-times" aria-hidden="true"></i>
527
- </button>
706
+ <span class="pf-c-label__content">
707
+ <span class="pf-c-label__text">Cyan removable</span>
708
+ </span>
709
+ <span class="pf-c-label__actions">
710
+ <button
711
+ class="pf-c-button pf-m-plain"
712
+ type="button"
713
+ id="cyan-removable-button"
714
+ aria-label="Remove"
715
+ aria-labelledby="cyan-removable-button cyan-removable-text"
716
+ >
717
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
718
+ </button>
719
+ </span>
528
720
  </span>
529
721
 
530
722
  <span class="pf-c-label pf-m-cyan">
@@ -532,34 +724,42 @@ cssPrefix: pf-c-label
532
724
  <span class="pf-c-label__icon">
533
725
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
534
726
  </span>
535
- Cyan icon removable
727
+ <span class="pf-c-label__text">Cyan icon removable</span>
728
+ </span>
729
+ <span class="pf-c-label__actions">
730
+ <button
731
+ class="pf-c-button pf-m-plain"
732
+ type="button"
733
+ id="cyan-icon-removable-button"
734
+ aria-label="Remove"
735
+ aria-labelledby="cyan-icon-removable-button cyan-icon-removable-text"
736
+ >
737
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
738
+ </button>
536
739
  </span>
537
- <button
538
- class="pf-c-button pf-m-plain"
539
- type="button"
540
- id="default-cyan-icon-close-button"
541
- aria-label="Remove"
542
- aria-labelledby="default-cyan-icon-close-button default-cyan-icon-close-text"
543
- >
544
- <i class="fas fa-times" aria-hidden="true"></i>
545
- </button>
546
740
  </span>
547
741
 
548
742
  <span class="pf-c-label pf-m-cyan">
549
- <a class="pf-c-label__content" href="#">Cyan link</a>
743
+ <a class="pf-c-label__content" href="#">
744
+ <span class="pf-c-label__text">Cyan link</span>
745
+ </a>
550
746
  </span>
551
747
 
552
748
  <span class="pf-c-label pf-m-cyan">
553
- <a class="pf-c-label__content" href="#">Cyan link removable</a>
554
- <button
555
- class="pf-c-button pf-m-plain"
556
- type="button"
557
- id="default-cyan-link-close-button"
558
- aria-label="Remove"
559
- aria-labelledby="default-cyan-link-close-button default-cyan-link-close-text"
560
- >
561
- <i class="fas fa-times" aria-hidden="true"></i>
562
- </button>
749
+ <a class="pf-c-label__content" href="#">
750
+ <span class="pf-c-label__text">Cyan link removable</span>
751
+ </a>
752
+ <span class="pf-c-label__actions">
753
+ <button
754
+ class="pf-c-button pf-m-plain"
755
+ type="button"
756
+ id="cyan-link-removable-button"
757
+ aria-label="Remove"
758
+ aria-labelledby="cyan-link-removable-button cyan-link-removable-text"
759
+ >
760
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
761
+ </button>
762
+ </span>
563
763
  </span>
564
764
 
565
765
  <span class="pf-c-label pf-m-cyan">
@@ -567,24 +767,42 @@ cssPrefix: pf-c-label
567
767
  <span class="pf-c-label__icon">
568
768
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
569
769
  </span>
570
- <span class="pf-c-label__text">Cyan label with icon that truncates</span>
770
+ <span
771
+ class="pf-c-label__text"
772
+ style="--pf-c-label__text--MaxWidth: 28ch"
773
+ >Cyan label, max-width truncation customization</span>
774
+ </span>
775
+ </span>
776
+
777
+ <span class="pf-c-label pf-m-cyan">
778
+ <span class="pf-c-label__content">
779
+ <span class="pf-c-label__icon">
780
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
781
+ </span>
782
+ <span
783
+ class="pf-c-label__text"
784
+ style="--pf-c-label__text--MaxWidth: 38ch"
785
+ >Cyan label with icon and set max-width truncation customization</span>
786
+ </span>
787
+ <span class="pf-c-label__actions">
788
+ <button
789
+ class="pf-c-button pf-m-plain"
790
+ type="button"
791
+ id="cyan-truncated-with-icon-button"
792
+ aria-label="Remove"
793
+ aria-labelledby="cyan-truncated-with-icon-button cyan-truncated-with-icon-text"
794
+ >
795
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
796
+ </button>
571
797
  </span>
572
- <button
573
- class="pf-c-button pf-m-plain"
574
- type="button"
575
- id="default-cyan-icon-close-truncate-button"
576
- aria-label="Remove"
577
- aria-labelledby="default-cyan-icon-close-truncate-button default-cyan-icon-close-truncate-text"
578
- >
579
- <i class="fas fa-times" aria-hidden="true"></i>
580
- </button>
581
798
  </span>
582
799
 
583
800
  <br />
584
801
  <br />
585
-
586
802
  <span class="pf-c-label pf-m-gold">
587
- <span class="pf-c-label__content">Gold</span>
803
+ <span class="pf-c-label__content">
804
+ <span class="pf-c-label__text">Gold</span>
805
+ </span>
588
806
  </span>
589
807
 
590
808
  <span class="pf-c-label pf-m-gold">
@@ -592,21 +810,25 @@ cssPrefix: pf-c-label
592
810
  <span class="pf-c-label__icon">
593
811
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
594
812
  </span>
595
- Gold icon
813
+ <span class="pf-c-label__text">Gold icon</span>
596
814
  </span>
597
815
  </span>
598
816
 
599
817
  <span class="pf-c-label pf-m-gold">
600
- <span class="pf-c-label__content">Gold removable</span>
601
- <button
602
- class="pf-c-button pf-m-plain"
603
- type="button"
604
- id="gold-removable-button"
605
- aria-label="Remove"
606
- aria-labelledby="gold-removable-button gold-removable-text"
607
- >
608
- <i class="fas fa-times" aria-hidden="true"></i>
609
- </button>
818
+ <span class="pf-c-label__content">
819
+ <span class="pf-c-label__text">Gold removable</span>
820
+ </span>
821
+ <span class="pf-c-label__actions">
822
+ <button
823
+ class="pf-c-button pf-m-plain"
824
+ type="button"
825
+ id="gold-removable-button"
826
+ aria-label="Remove"
827
+ aria-labelledby="gold-removable-button gold-removable-text"
828
+ >
829
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
830
+ </button>
831
+ </span>
610
832
  </span>
611
833
 
612
834
  <span class="pf-c-label pf-m-gold">
@@ -614,34 +836,42 @@ cssPrefix: pf-c-label
614
836
  <span class="pf-c-label__icon">
615
837
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
616
838
  </span>
617
- Gold icon removable
839
+ <span class="pf-c-label__text">Gold icon removable</span>
840
+ </span>
841
+ <span class="pf-c-label__actions">
842
+ <button
843
+ class="pf-c-button pf-m-plain"
844
+ type="button"
845
+ id="gold-icon-removable-button"
846
+ aria-label="Remove"
847
+ aria-labelledby="gold-icon-removable-button gold-icon-removable-text"
848
+ >
849
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
850
+ </button>
618
851
  </span>
619
- <button
620
- class="pf-c-button pf-m-plain"
621
- type="button"
622
- id="gold-icon-removable-button"
623
- aria-label="Remove"
624
- aria-labelledby="gold-icon-removable-button gold-icon-removable-text"
625
- >
626
- <i class="fas fa-times" aria-hidden="true"></i>
627
- </button>
628
852
  </span>
629
853
 
630
854
  <span class="pf-c-label pf-m-gold">
631
- <a class="pf-c-label__content" href="#">Gold link</a>
855
+ <a class="pf-c-label__content" href="#">
856
+ <span class="pf-c-label__text">Gold link</span>
857
+ </a>
632
858
  </span>
633
859
 
634
860
  <span class="pf-c-label pf-m-gold">
635
- <a class="pf-c-label__content" href="#">Gold link removable</a>
636
- <button
637
- class="pf-c-button pf-m-plain"
638
- type="button"
639
- id="gold-link-removable-button"
640
- aria-label="Remove"
641
- aria-labelledby="gold-link-removable-button gold-link-removable-text"
642
- >
643
- <i class="fas fa-times" aria-hidden="true"></i>
644
- </button>
861
+ <a class="pf-c-label__content" href="#">
862
+ <span class="pf-c-label__text">Gold link removable</span>
863
+ </a>
864
+ <span class="pf-c-label__actions">
865
+ <button
866
+ class="pf-c-button pf-m-plain"
867
+ type="button"
868
+ id="gold-link-removable-button"
869
+ aria-label="Remove"
870
+ aria-labelledby="gold-link-removable-button gold-link-removable-text"
871
+ >
872
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
873
+ </button>
874
+ </span>
645
875
  </span>
646
876
 
647
877
  <span class="pf-c-label pf-m-gold">
@@ -649,17 +879,34 @@ cssPrefix: pf-c-label
649
879
  <span class="pf-c-label__icon">
650
880
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
651
881
  </span>
652
- <span class="pf-c-label__text">Gold label with icon that truncates</span>
882
+ <span
883
+ class="pf-c-label__text"
884
+ style="--pf-c-label__text--MaxWidth: 28ch"
885
+ >Gold label, max-width truncation customization</span>
886
+ </span>
887
+ </span>
888
+
889
+ <span class="pf-c-label pf-m-gold">
890
+ <span class="pf-c-label__content">
891
+ <span class="pf-c-label__icon">
892
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
893
+ </span>
894
+ <span
895
+ class="pf-c-label__text"
896
+ style="--pf-c-label__text--MaxWidth: 38ch"
897
+ >Gold label with icon and set max-width truncation customization</span>
898
+ </span>
899
+ <span class="pf-c-label__actions">
900
+ <button
901
+ class="pf-c-button pf-m-plain"
902
+ type="button"
903
+ id="gold-truncated-with-icon-button"
904
+ aria-label="Remove"
905
+ aria-labelledby="gold-truncated-with-icon-button gold-truncated-with-icon-text"
906
+ >
907
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
908
+ </button>
653
909
  </span>
654
- <button
655
- class="pf-c-button pf-m-plain"
656
- type="button"
657
- id="gold-truncate-button"
658
- aria-label="Remove"
659
- aria-labelledby="gold-truncate-button gold-truncate-text"
660
- >
661
- <i class="fas fa-times" aria-hidden="true"></i>
662
- </button>
663
910
  </span>
664
911
 
665
912
  ```
@@ -668,7 +915,9 @@ cssPrefix: pf-c-label
668
915
 
669
916
  ```html
670
917
  <span class="pf-c-label pf-m-outline">
671
- <span class="pf-c-label__content">Grey</span>
918
+ <span class="pf-c-label__content">
919
+ <span class="pf-c-label__text">Grey</span>
920
+ </span>
672
921
  </span>
673
922
 
674
923
  <span class="pf-c-label pf-m-outline">
@@ -676,21 +925,25 @@ cssPrefix: pf-c-label
676
925
  <span class="pf-c-label__icon">
677
926
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
678
927
  </span>
679
- Grey icon
928
+ <span class="pf-c-label__text">Grey icon</span>
680
929
  </span>
681
930
  </span>
682
931
 
683
932
  <span class="pf-c-label pf-m-outline">
684
- <span class="pf-c-label__content">Grey removable</span>
685
- <button
686
- class="pf-c-button pf-m-plain"
687
- type="button"
688
- id="outline-grey-close-button"
689
- aria-label="Remove"
690
- aria-labelledby="outline-grey-close-button outline-grey-close-text"
691
- >
692
- <i class="fas fa-times" aria-hidden="true"></i>
693
- </button>
933
+ <span class="pf-c-label__content">
934
+ <span class="pf-c-label__text">Grey removable</span>
935
+ </span>
936
+ <span class="pf-c-label__actions">
937
+ <button
938
+ class="pf-c-button pf-m-plain"
939
+ type="button"
940
+ id="grey-outline-removable-button"
941
+ aria-label="Remove"
942
+ aria-labelledby="grey-outline-removable-button grey-outline-removable-text"
943
+ >
944
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
945
+ </button>
946
+ </span>
694
947
  </span>
695
948
 
696
949
  <span class="pf-c-label pf-m-outline">
@@ -698,482 +951,868 @@ cssPrefix: pf-c-label
698
951
  <span class="pf-c-label__icon">
699
952
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
700
953
  </span>
701
- Grey icon removable
954
+ <span class="pf-c-label__text">Grey icon removable</span>
955
+ </span>
956
+ <span class="pf-c-label__actions">
957
+ <button
958
+ class="pf-c-button pf-m-plain"
959
+ type="button"
960
+ id="grey-outline-icon-removable-button"
961
+ aria-label="Remove"
962
+ aria-labelledby="grey-outline-icon-removable-button grey-outline-icon-removable-text"
963
+ >
964
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
965
+ </button>
702
966
  </span>
703
- <button
704
- class="pf-c-button pf-m-plain"
705
- type="button"
706
- id="outline-grey-icon-close-button"
707
- aria-label="Remove"
708
- aria-labelledby="outline-grey-icon-close-button outline-grey-icon-close-text"
709
- >
710
- <i class="fas fa-times" aria-hidden="true"></i>
711
- </button>
712
967
  </span>
713
968
 
714
969
  <span class="pf-c-label pf-m-outline">
715
- <a class="pf-c-label__content" href="#">Grey link</a>
970
+ <a class="pf-c-label__content" href="#">
971
+ <span class="pf-c-label__text">Grey link</span>
972
+ </a>
716
973
  </span>
717
974
 
718
975
  <span class="pf-c-label pf-m-outline">
719
- <a class="pf-c-label__content" href="#">Grey link removable</a>
720
- <button
721
- class="pf-c-button pf-m-plain"
722
- type="button"
723
- id="outline-grey-link-close-button"
724
- aria-label="Remove"
725
- aria-labelledby="outline-grey-link-close-button outline-grey-link-close-text"
726
- >
727
- <i class="fas fa-times" aria-hidden="true"></i>
728
- </button>
729
- </span>
730
-
731
- <br />
732
- <br />
733
-
734
- <span class="pf-c-label pf-m-blue pf-m-outline">
735
- <span class="pf-c-label__content">Blue</span>
976
+ <a class="pf-c-label__content" href="#">
977
+ <span class="pf-c-label__text">Grey link removable</span>
978
+ </a>
979
+ <span class="pf-c-label__actions">
980
+ <button
981
+ class="pf-c-button pf-m-plain"
982
+ type="button"
983
+ id="grey-outline-link-removable-button"
984
+ aria-label="Remove"
985
+ aria-labelledby="grey-outline-link-removable-button grey-outline-link-removable-text"
986
+ >
987
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
988
+ </button>
989
+ </span>
736
990
  </span>
737
991
 
738
- <span class="pf-c-label pf-m-blue pf-m-outline">
992
+ <span class="pf-c-label pf-m-outline">
739
993
  <span class="pf-c-label__content">
740
994
  <span class="pf-c-label__icon">
741
995
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
742
996
  </span>
743
- Blue icon
997
+ <span
998
+ class="pf-c-label__text"
999
+ style="--pf-c-label__text--MaxWidth: 28ch"
1000
+ >Grey label, max-width truncation customization</span>
744
1001
  </span>
745
1002
  </span>
746
1003
 
747
- <span class="pf-c-label pf-m-blue pf-m-outline">
748
- <span class="pf-c-label__content">Blue removable</span>
749
- <button
750
- class="pf-c-button pf-m-plain"
751
- type="button"
752
- id="outline-blue-close-button"
753
- aria-label="Remove"
754
- aria-labelledby="outline-blue-close-button outline-blue-close-text"
755
- >
756
- <i class="fas fa-times" aria-hidden="true"></i>
757
- </button>
758
- </span>
759
-
760
- <span class="pf-c-label pf-m-blue pf-m-outline">
1004
+ <span class="pf-c-label pf-m-outline">
761
1005
  <span class="pf-c-label__content">
762
1006
  <span class="pf-c-label__icon">
763
1007
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
764
1008
  </span>
765
- Blue icon removable
1009
+ <span
1010
+ class="pf-c-label__text"
1011
+ style="--pf-c-label__text--MaxWidth: 38ch"
1012
+ >Grey label with icon and set max-width truncation customization</span>
1013
+ </span>
1014
+ <span class="pf-c-label__actions">
1015
+ <button
1016
+ class="pf-c-button pf-m-plain"
1017
+ type="button"
1018
+ id="grey-outline-truncated-with-icon-button"
1019
+ aria-label="Remove"
1020
+ aria-labelledby="grey-outline-truncated-with-icon-button grey-outline-truncated-with-icon-text"
1021
+ >
1022
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1023
+ </button>
766
1024
  </span>
767
- <button
768
- class="pf-c-button pf-m-plain"
769
- type="button"
770
- id="outline-blue-icon-close-button"
771
- aria-label="Remove"
772
- aria-labelledby="outline-blue-icon-close-button outline-blue-icon-close-text"
773
- >
774
- <i class="fas fa-times" aria-hidden="true"></i>
775
- </button>
776
1025
  </span>
777
1026
 
1027
+ <br />
1028
+ <br />
1029
+
778
1030
  <span class="pf-c-label pf-m-outline pf-m-blue">
779
- <a class="pf-c-label__content" href="#">Blue link</a>
1031
+ <span class="pf-c-label__content">
1032
+ <span class="pf-c-label__text">Blue</span>
1033
+ </span>
780
1034
  </span>
781
1035
 
782
1036
  <span class="pf-c-label pf-m-outline pf-m-blue">
783
- <a class="pf-c-label__content" href="#">Blue link removable</a>
784
- <button
785
- class="pf-c-button pf-m-plain"
786
- type="button"
787
- id="outline-blue-link-close-button"
788
- aria-label="Remove"
789
- aria-labelledby="outline-blue-link-close-button outline-blue-link-close-text"
790
- >
791
- <i class="fas fa-times" aria-hidden="true"></i>
792
- </button>
1037
+ <span class="pf-c-label__content">
1038
+ <span class="pf-c-label__icon">
1039
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1040
+ </span>
1041
+ <span class="pf-c-label__text">Blue icon</span>
1042
+ </span>
1043
+ </span>
1044
+
1045
+ <span class="pf-c-label pf-m-outline pf-m-blue">
1046
+ <span class="pf-c-label__content">
1047
+ <span class="pf-c-label__text">Blue removable</span>
1048
+ </span>
1049
+ <span class="pf-c-label__actions">
1050
+ <button
1051
+ class="pf-c-button pf-m-plain"
1052
+ type="button"
1053
+ id="blue-outline-removable-button"
1054
+ aria-label="Remove"
1055
+ aria-labelledby="blue-outline-removable-button blue-outline-removable-text"
1056
+ >
1057
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1058
+ </button>
1059
+ </span>
1060
+ </span>
1061
+
1062
+ <span class="pf-c-label pf-m-outline pf-m-blue">
1063
+ <span class="pf-c-label__content">
1064
+ <span class="pf-c-label__icon">
1065
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1066
+ </span>
1067
+ <span class="pf-c-label__text">Blue icon removable</span>
1068
+ </span>
1069
+ <span class="pf-c-label__actions">
1070
+ <button
1071
+ class="pf-c-button pf-m-plain"
1072
+ type="button"
1073
+ id="blue-outline-icon-removable-button"
1074
+ aria-label="Remove"
1075
+ aria-labelledby="blue-outline-icon-removable-button blue-outline-icon-removable-text"
1076
+ >
1077
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1078
+ </button>
1079
+ </span>
1080
+ </span>
1081
+
1082
+ <span class="pf-c-label pf-m-outline pf-m-blue">
1083
+ <a class="pf-c-label__content" href="#">
1084
+ <span class="pf-c-label__text">Blue link</span>
1085
+ </a>
1086
+ </span>
1087
+
1088
+ <span class="pf-c-label pf-m-outline pf-m-blue">
1089
+ <a class="pf-c-label__content" href="#">
1090
+ <span class="pf-c-label__text">Blue link removable</span>
1091
+ </a>
1092
+ <span class="pf-c-label__actions">
1093
+ <button
1094
+ class="pf-c-button pf-m-plain"
1095
+ type="button"
1096
+ id="blue-outline-link-removable-button"
1097
+ aria-label="Remove"
1098
+ aria-labelledby="blue-outline-link-removable-button blue-outline-link-removable-text"
1099
+ >
1100
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1101
+ </button>
1102
+ </span>
1103
+ </span>
1104
+
1105
+ <span class="pf-c-label pf-m-outline pf-m-blue">
1106
+ <span class="pf-c-label__content">
1107
+ <span class="pf-c-label__icon">
1108
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1109
+ </span>
1110
+ <span
1111
+ class="pf-c-label__text"
1112
+ style="--pf-c-label__text--MaxWidth: 28ch"
1113
+ >Blue label, max-width truncation customization</span>
1114
+ </span>
1115
+ </span>
1116
+
1117
+ <span class="pf-c-label pf-m-outline pf-m-blue">
1118
+ <span class="pf-c-label__content">
1119
+ <span class="pf-c-label__icon">
1120
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1121
+ </span>
1122
+ <span
1123
+ class="pf-c-label__text"
1124
+ style="--pf-c-label__text--MaxWidth: 38ch"
1125
+ >Blue label with icon and set max-width truncation customization</span>
1126
+ </span>
1127
+ <span class="pf-c-label__actions">
1128
+ <button
1129
+ class="pf-c-button pf-m-plain"
1130
+ type="button"
1131
+ id="blue-outline-truncated-with-icon-button"
1132
+ aria-label="Remove"
1133
+ aria-labelledby="blue-outline-truncated-with-icon-button blue-outline-truncated-with-icon-text"
1134
+ >
1135
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1136
+ </button>
1137
+ </span>
793
1138
  </span>
794
1139
 
795
1140
  <br />
796
1141
  <br />
797
1142
 
798
- <span class="pf-c-label pf-m-green pf-m-outline">
799
- <span class="pf-c-label__content">Green</span>
1143
+ <span class="pf-c-label pf-m-outline pf-m-green">
1144
+ <span class="pf-c-label__content">
1145
+ <span class="pf-c-label__text">Green</span>
1146
+ </span>
800
1147
  </span>
801
1148
 
802
- <span class="pf-c-label pf-m-green pf-m-outline">
1149
+ <span class="pf-c-label pf-m-outline pf-m-green">
803
1150
  <span class="pf-c-label__content">
804
1151
  <span class="pf-c-label__icon">
805
1152
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
806
1153
  </span>
807
- Green icon
1154
+ <span class="pf-c-label__text">Green icon</span>
808
1155
  </span>
809
1156
  </span>
810
1157
 
811
- <span class="pf-c-label pf-m-green pf-m-outline">
812
- <span class="pf-c-label__content">Green removable</span>
813
- <button
814
- class="pf-c-button pf-m-plain"
815
- type="button"
816
- id="outline-green-close-button"
817
- aria-label="Remove"
818
- aria-labelledby="outline-green-close-button outline-green-close-text"
819
- >
820
- <i class="fas fa-times" aria-hidden="true"></i>
821
- </button>
1158
+ <span class="pf-c-label pf-m-outline pf-m-green">
1159
+ <span class="pf-c-label__content">
1160
+ <span class="pf-c-label__text">Green removable</span>
1161
+ </span>
1162
+ <span class="pf-c-label__actions">
1163
+ <button
1164
+ class="pf-c-button pf-m-plain"
1165
+ type="button"
1166
+ id="green-outline-removable-button"
1167
+ aria-label="Remove"
1168
+ aria-labelledby="green-outline-removable-button green-outline-removable-text"
1169
+ >
1170
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1171
+ </button>
1172
+ </span>
822
1173
  </span>
823
1174
 
824
- <span class="pf-c-label pf-m-green pf-m-outline">
1175
+ <span class="pf-c-label pf-m-outline pf-m-green">
825
1176
  <span class="pf-c-label__content">
826
1177
  <span class="pf-c-label__icon">
827
1178
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
828
1179
  </span>
829
- Green icon removable
1180
+ <span class="pf-c-label__text">Green icon removable</span>
1181
+ </span>
1182
+ <span class="pf-c-label__actions">
1183
+ <button
1184
+ class="pf-c-button pf-m-plain"
1185
+ type="button"
1186
+ id="green-outline-icon-removable-button"
1187
+ aria-label="Remove"
1188
+ aria-labelledby="green-outline-icon-removable-button green-outline-icon-removable-text"
1189
+ >
1190
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1191
+ </button>
830
1192
  </span>
831
- <button
832
- class="pf-c-button pf-m-plain"
833
- type="button"
834
- id="outline-green-icon-close-button"
835
- aria-label="Remove"
836
- aria-labelledby="outline-green-icon-close-button outline-green-icon-close-text"
837
- >
838
- <i class="fas fa-times" aria-hidden="true"></i>
839
- </button>
840
1193
  </span>
841
1194
 
842
1195
  <span class="pf-c-label pf-m-outline pf-m-green">
843
- <a class="pf-c-label__content" href="#">Green link</a>
1196
+ <a class="pf-c-label__content" href="#">
1197
+ <span class="pf-c-label__text">Green link</span>
1198
+ </a>
844
1199
  </span>
845
1200
 
846
1201
  <span class="pf-c-label pf-m-outline pf-m-green">
847
- <a class="pf-c-label__content" href="#">Green link removable</a>
848
- <button
849
- class="pf-c-button pf-m-plain"
850
- type="button"
851
- id="outline-green-link-close-button"
852
- aria-label="Remove"
853
- aria-labelledby="outline-green-link-close-button outline-green-link-close-text"
854
- >
855
- <i class="fas fa-times" aria-hidden="true"></i>
856
- </button>
1202
+ <a class="pf-c-label__content" href="#">
1203
+ <span class="pf-c-label__text">Green link removable</span>
1204
+ </a>
1205
+ <span class="pf-c-label__actions">
1206
+ <button
1207
+ class="pf-c-button pf-m-plain"
1208
+ type="button"
1209
+ id="green-outline-link-removable-button"
1210
+ aria-label="Remove"
1211
+ aria-labelledby="green-outline-link-removable-button green-outline-link-removable-text"
1212
+ >
1213
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1214
+ </button>
1215
+ </span>
1216
+ </span>
1217
+
1218
+ <span class="pf-c-label pf-m-outline pf-m-green">
1219
+ <span class="pf-c-label__content">
1220
+ <span class="pf-c-label__icon">
1221
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1222
+ </span>
1223
+ <span
1224
+ class="pf-c-label__text"
1225
+ style="--pf-c-label__text--MaxWidth: 28ch"
1226
+ >Green label, max-width truncation customization</span>
1227
+ </span>
1228
+ </span>
1229
+
1230
+ <span class="pf-c-label pf-m-outline pf-m-green">
1231
+ <span class="pf-c-label__content">
1232
+ <span class="pf-c-label__icon">
1233
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1234
+ </span>
1235
+ <span
1236
+ class="pf-c-label__text"
1237
+ style="--pf-c-label__text--MaxWidth: 38ch"
1238
+ >Green label with icon and set max-width truncation customization</span>
1239
+ </span>
1240
+ <span class="pf-c-label__actions">
1241
+ <button
1242
+ class="pf-c-button pf-m-plain"
1243
+ type="button"
1244
+ id="green-outline-truncated-with-icon-button"
1245
+ aria-label="Remove"
1246
+ aria-labelledby="green-outline-truncated-with-icon-button green-outline-truncated-with-icon-text"
1247
+ >
1248
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1249
+ </button>
1250
+ </span>
857
1251
  </span>
858
1252
 
859
1253
  <br />
860
1254
  <br />
861
1255
 
862
- <span class="pf-c-label pf-m-orange pf-m-outline">
863
- <span class="pf-c-label__content">Orange</span>
1256
+ <span class="pf-c-label pf-m-outline pf-m-orange">
1257
+ <span class="pf-c-label__content">
1258
+ <span class="pf-c-label__text">Orange</span>
1259
+ </span>
864
1260
  </span>
865
1261
 
866
- <span class="pf-c-label pf-m-orange pf-m-outline">
1262
+ <span class="pf-c-label pf-m-outline pf-m-orange">
867
1263
  <span class="pf-c-label__content">
868
1264
  <span class="pf-c-label__icon">
869
1265
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
870
1266
  </span>
871
- Orange icon
1267
+ <span class="pf-c-label__text">Orange icon</span>
872
1268
  </span>
873
1269
  </span>
874
1270
 
875
- <span class="pf-c-label pf-m-orange pf-m-outline">
876
- <span class="pf-c-label__content">Orange removable</span>
877
- <button
878
- class="pf-c-button pf-m-plain"
879
- type="button"
880
- id="outline-orange-close-button"
881
- aria-label="Remove"
882
- aria-labelledby="outline-orange-close-button outline-orange-close-text"
883
- >
884
- <i class="fas fa-times" aria-hidden="true"></i>
885
- </button>
1271
+ <span class="pf-c-label pf-m-outline pf-m-orange">
1272
+ <span class="pf-c-label__content">
1273
+ <span class="pf-c-label__text">Orange removable</span>
1274
+ </span>
1275
+ <span class="pf-c-label__actions">
1276
+ <button
1277
+ class="pf-c-button pf-m-plain"
1278
+ type="button"
1279
+ id="orange-outline-removable-button"
1280
+ aria-label="Remove"
1281
+ aria-labelledby="orange-outline-removable-button orange-outline-removable-text"
1282
+ >
1283
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1284
+ </button>
1285
+ </span>
886
1286
  </span>
887
1287
 
888
- <span class="pf-c-label pf-m-orange pf-m-outline">
1288
+ <span class="pf-c-label pf-m-outline pf-m-orange">
889
1289
  <span class="pf-c-label__content">
890
1290
  <span class="pf-c-label__icon">
891
1291
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
892
1292
  </span>
893
- Orange icon removable
1293
+ <span class="pf-c-label__text">Orange icon removable</span>
1294
+ </span>
1295
+ <span class="pf-c-label__actions">
1296
+ <button
1297
+ class="pf-c-button pf-m-plain"
1298
+ type="button"
1299
+ id="orange-outline-icon-removable-button"
1300
+ aria-label="Remove"
1301
+ aria-labelledby="orange-outline-icon-removable-button orange-outline-icon-removable-text"
1302
+ >
1303
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1304
+ </button>
894
1305
  </span>
895
- <button
896
- class="pf-c-button pf-m-plain"
897
- type="button"
898
- id="outline-orange-icon-close-button"
899
- aria-label="Remove"
900
- aria-labelledby="outline-orange-icon-close-button outline-orange-icon-close-text"
901
- >
902
- <i class="fas fa-times" aria-hidden="true"></i>
903
- </button>
904
1306
  </span>
905
1307
 
906
1308
  <span class="pf-c-label pf-m-outline pf-m-orange">
907
- <a class="pf-c-label__content" href="#">Orange link</a>
1309
+ <a class="pf-c-label__content" href="#">
1310
+ <span class="pf-c-label__text">Orange link</span>
1311
+ </a>
908
1312
  </span>
909
1313
 
910
1314
  <span class="pf-c-label pf-m-outline pf-m-orange">
911
- <a class="pf-c-label__content" href="#">Orange link removable</a>
912
- <button
913
- class="pf-c-button pf-m-plain"
914
- type="button"
915
- id="outline-orange-link-close-button"
916
- aria-label="Remove"
917
- aria-labelledby="outline-orange-link-close-button outline-orange-link-close-text"
918
- >
919
- <i class="fas fa-times" aria-hidden="true"></i>
920
- </button>
1315
+ <a class="pf-c-label__content" href="#">
1316
+ <span class="pf-c-label__text">Orange link removable</span>
1317
+ </a>
1318
+ <span class="pf-c-label__actions">
1319
+ <button
1320
+ class="pf-c-button pf-m-plain"
1321
+ type="button"
1322
+ id="orange-outline-link-removable-button"
1323
+ aria-label="Remove"
1324
+ aria-labelledby="orange-outline-link-removable-button orange-outline-link-removable-text"
1325
+ >
1326
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1327
+ </button>
1328
+ </span>
1329
+ </span>
1330
+
1331
+ <span class="pf-c-label pf-m-outline pf-m-orange">
1332
+ <span class="pf-c-label__content">
1333
+ <span class="pf-c-label__icon">
1334
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1335
+ </span>
1336
+ <span
1337
+ class="pf-c-label__text"
1338
+ style="--pf-c-label__text--MaxWidth: 28ch"
1339
+ >Orange label, max-width truncation customization</span>
1340
+ </span>
1341
+ </span>
1342
+
1343
+ <span class="pf-c-label pf-m-outline pf-m-orange">
1344
+ <span class="pf-c-label__content">
1345
+ <span class="pf-c-label__icon">
1346
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1347
+ </span>
1348
+ <span
1349
+ class="pf-c-label__text"
1350
+ style="--pf-c-label__text--MaxWidth: 38ch"
1351
+ >Orange label with icon and set max-width truncation customization</span>
1352
+ </span>
1353
+ <span class="pf-c-label__actions">
1354
+ <button
1355
+ class="pf-c-button pf-m-plain"
1356
+ type="button"
1357
+ id="orange-outline-truncated-with-icon-button"
1358
+ aria-label="Remove"
1359
+ aria-labelledby="orange-outline-truncated-with-icon-button orange-outline-truncated-with-icon-text"
1360
+ >
1361
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1362
+ </button>
1363
+ </span>
921
1364
  </span>
922
1365
 
923
1366
  <br />
924
1367
  <br />
925
1368
 
926
- <span class="pf-c-label pf-m-red pf-m-outline">
927
- <span class="pf-c-label__content">Red</span>
1369
+ <span class="pf-c-label pf-m-outline pf-m-red">
1370
+ <span class="pf-c-label__content">
1371
+ <span class="pf-c-label__text">Red</span>
1372
+ </span>
928
1373
  </span>
929
1374
 
930
- <span class="pf-c-label pf-m-red pf-m-outline">
1375
+ <span class="pf-c-label pf-m-outline pf-m-red">
931
1376
  <span class="pf-c-label__content">
932
1377
  <span class="pf-c-label__icon">
933
1378
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
934
1379
  </span>
935
- Red icon
1380
+ <span class="pf-c-label__text">Red icon</span>
936
1381
  </span>
937
1382
  </span>
938
1383
 
939
- <span class="pf-c-label pf-m-red pf-m-outline">
940
- <span class="pf-c-label__content">Red removable</span>
941
- <button
942
- class="pf-c-button pf-m-plain"
943
- type="button"
944
- id="outline-red-close-button"
945
- aria-label="Remove"
946
- aria-labelledby="outline-red-close-button outline-red-close-text"
947
- >
948
- <i class="fas fa-times" aria-hidden="true"></i>
949
- </button>
1384
+ <span class="pf-c-label pf-m-outline pf-m-red">
1385
+ <span class="pf-c-label__content">
1386
+ <span class="pf-c-label__text">Red removable</span>
1387
+ </span>
1388
+ <span class="pf-c-label__actions">
1389
+ <button
1390
+ class="pf-c-button pf-m-plain"
1391
+ type="button"
1392
+ id="red-outline-removable-button"
1393
+ aria-label="Remove"
1394
+ aria-labelledby="red-outline-removable-button red-outline-removable-text"
1395
+ >
1396
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1397
+ </button>
1398
+ </span>
950
1399
  </span>
951
1400
 
952
- <span class="pf-c-label pf-m-red pf-m-outline">
1401
+ <span class="pf-c-label pf-m-outline pf-m-red">
953
1402
  <span class="pf-c-label__content">
954
1403
  <span class="pf-c-label__icon">
955
1404
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
956
1405
  </span>
957
- Red icon removable
1406
+ <span class="pf-c-label__text">Red icon removable</span>
1407
+ </span>
1408
+ <span class="pf-c-label__actions">
1409
+ <button
1410
+ class="pf-c-button pf-m-plain"
1411
+ type="button"
1412
+ id="red-outline-icon-removable-button"
1413
+ aria-label="Remove"
1414
+ aria-labelledby="red-outline-icon-removable-button red-outline-icon-removable-text"
1415
+ >
1416
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1417
+ </button>
958
1418
  </span>
959
- <button
960
- class="pf-c-button pf-m-plain"
961
- type="button"
962
- id="outline-red-icon-close-button"
963
- aria-label="Remove"
964
- aria-labelledby="outline-red-icon-close-button outline-red-icon-close-text"
965
- >
966
- <i class="fas fa-times" aria-hidden="true"></i>
967
- </button>
968
1419
  </span>
969
1420
 
970
1421
  <span class="pf-c-label pf-m-outline pf-m-red">
971
- <a class="pf-c-label__content" href="#">Red link</a>
1422
+ <a class="pf-c-label__content" href="#">
1423
+ <span class="pf-c-label__text">Red link</span>
1424
+ </a>
972
1425
  </span>
973
1426
 
974
1427
  <span class="pf-c-label pf-m-outline pf-m-red">
975
- <a class="pf-c-label__content" href="#">Red link removable</a>
976
- <button
977
- class="pf-c-button pf-m-plain"
978
- type="button"
979
- id="outline-red-link-close-button"
980
- aria-label="Remove"
981
- aria-labelledby="outline-red-link-close-button outline-red-link-close-text"
982
- >
983
- <i class="fas fa-times" aria-hidden="true"></i>
984
- </button>
1428
+ <a class="pf-c-label__content" href="#">
1429
+ <span class="pf-c-label__text">Red link removable</span>
1430
+ </a>
1431
+ <span class="pf-c-label__actions">
1432
+ <button
1433
+ class="pf-c-button pf-m-plain"
1434
+ type="button"
1435
+ id="red-outline-link-removable-button"
1436
+ aria-label="Remove"
1437
+ aria-labelledby="red-outline-link-removable-button red-outline-link-removable-text"
1438
+ >
1439
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1440
+ </button>
1441
+ </span>
1442
+ </span>
1443
+
1444
+ <span class="pf-c-label pf-m-outline pf-m-red">
1445
+ <span class="pf-c-label__content">
1446
+ <span class="pf-c-label__icon">
1447
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1448
+ </span>
1449
+ <span
1450
+ class="pf-c-label__text"
1451
+ style="--pf-c-label__text--MaxWidth: 28ch"
1452
+ >Red label, max-width truncation customization</span>
1453
+ </span>
1454
+ </span>
1455
+
1456
+ <span class="pf-c-label pf-m-outline pf-m-red">
1457
+ <span class="pf-c-label__content">
1458
+ <span class="pf-c-label__icon">
1459
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1460
+ </span>
1461
+ <span
1462
+ class="pf-c-label__text"
1463
+ style="--pf-c-label__text--MaxWidth: 38ch"
1464
+ >Red label with icon and set max-width truncation customization</span>
1465
+ </span>
1466
+ <span class="pf-c-label__actions">
1467
+ <button
1468
+ class="pf-c-button pf-m-plain"
1469
+ type="button"
1470
+ id="red-outline-truncated-with-icon-button"
1471
+ aria-label="Remove"
1472
+ aria-labelledby="red-outline-truncated-with-icon-button red-outline-truncated-with-icon-text"
1473
+ >
1474
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1475
+ </button>
1476
+ </span>
985
1477
  </span>
986
1478
 
987
1479
  <br />
988
1480
  <br />
989
1481
 
990
- <span class="pf-c-label pf-m-purple pf-m-outline">
991
- <span class="pf-c-label__content">Purple</span>
1482
+ <span class="pf-c-label pf-m-outline pf-m-purple">
1483
+ <span class="pf-c-label__content">
1484
+ <span class="pf-c-label__text">Purple</span>
1485
+ </span>
992
1486
  </span>
993
1487
 
994
- <span class="pf-c-label pf-m-purple pf-m-outline">
1488
+ <span class="pf-c-label pf-m-outline pf-m-purple">
995
1489
  <span class="pf-c-label__content">
996
1490
  <span class="pf-c-label__icon">
997
1491
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
998
1492
  </span>
999
- Purple icon
1493
+ <span class="pf-c-label__text">Purple icon</span>
1000
1494
  </span>
1001
1495
  </span>
1002
1496
 
1003
- <span class="pf-c-label pf-m-purple pf-m-outline">
1004
- <span class="pf-c-label__content">Purple removable</span>
1005
- <button
1006
- class="pf-c-button pf-m-plain"
1007
- type="button"
1008
- id="outline-purple-close-button"
1009
- aria-label="Remove"
1010
- aria-labelledby="outline-purple-close-button outline-purple-close-text"
1011
- >
1012
- <i class="fas fa-times" aria-hidden="true"></i>
1013
- </button>
1497
+ <span class="pf-c-label pf-m-outline pf-m-purple">
1498
+ <span class="pf-c-label__content">
1499
+ <span class="pf-c-label__text">Purple removable</span>
1500
+ </span>
1501
+ <span class="pf-c-label__actions">
1502
+ <button
1503
+ class="pf-c-button pf-m-plain"
1504
+ type="button"
1505
+ id="purple-outline-removable-button"
1506
+ aria-label="Remove"
1507
+ aria-labelledby="purple-outline-removable-button purple-outline-removable-text"
1508
+ >
1509
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1510
+ </button>
1511
+ </span>
1014
1512
  </span>
1015
1513
 
1016
- <span class="pf-c-label pf-m-purple pf-m-outline">
1514
+ <span class="pf-c-label pf-m-outline pf-m-purple">
1017
1515
  <span class="pf-c-label__content">
1018
1516
  <span class="pf-c-label__icon">
1019
1517
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1020
1518
  </span>
1021
- Purple icon removable
1519
+ <span class="pf-c-label__text">Purple icon removable</span>
1520
+ </span>
1521
+ <span class="pf-c-label__actions">
1522
+ <button
1523
+ class="pf-c-button pf-m-plain"
1524
+ type="button"
1525
+ id="purple-outline-icon-removable-button"
1526
+ aria-label="Remove"
1527
+ aria-labelledby="purple-outline-icon-removable-button purple-outline-icon-removable-text"
1528
+ >
1529
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1530
+ </button>
1022
1531
  </span>
1023
- <button
1024
- class="pf-c-button pf-m-plain"
1025
- type="button"
1026
- id="outline-purple-icon-close-button"
1027
- aria-label="Remove"
1028
- aria-labelledby="outline-purple-icon-close-button outline-purple-icon-close-text"
1029
- >
1030
- <i class="fas fa-times" aria-hidden="true"></i>
1031
- </button>
1032
1532
  </span>
1033
1533
 
1034
1534
  <span class="pf-c-label pf-m-outline pf-m-purple">
1035
- <a class="pf-c-label__content" href="#">Purple link</a>
1535
+ <a class="pf-c-label__content" href="#">
1536
+ <span class="pf-c-label__text">Purple link</span>
1537
+ </a>
1036
1538
  </span>
1037
1539
 
1038
1540
  <span class="pf-c-label pf-m-outline pf-m-purple">
1039
- <a class="pf-c-label__content" href="#">Purple link removable</a>
1040
- <button
1041
- class="pf-c-button pf-m-plain"
1042
- type="button"
1043
- id="outline-purple-link-close-button"
1044
- aria-label="Remove"
1045
- aria-labelledby="outline-purple-link-close-button outline-purple-link-close-text"
1046
- >
1047
- <i class="fas fa-times" aria-hidden="true"></i>
1048
- </button>
1541
+ <a class="pf-c-label__content" href="#">
1542
+ <span class="pf-c-label__text">Purple link removable</span>
1543
+ </a>
1544
+ <span class="pf-c-label__actions">
1545
+ <button
1546
+ class="pf-c-button pf-m-plain"
1547
+ type="button"
1548
+ id="purple-outline-link-removable-button"
1549
+ aria-label="Remove"
1550
+ aria-labelledby="purple-outline-link-removable-button purple-outline-link-removable-text"
1551
+ >
1552
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1553
+ </button>
1554
+ </span>
1555
+ </span>
1556
+
1557
+ <span class="pf-c-label pf-m-outline pf-m-purple">
1558
+ <span class="pf-c-label__content">
1559
+ <span class="pf-c-label__icon">
1560
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1561
+ </span>
1562
+ <span
1563
+ class="pf-c-label__text"
1564
+ style="--pf-c-label__text--MaxWidth: 28ch"
1565
+ >Purple label, max-width truncation customization</span>
1566
+ </span>
1567
+ </span>
1568
+
1569
+ <span class="pf-c-label pf-m-outline pf-m-purple">
1570
+ <span class="pf-c-label__content">
1571
+ <span class="pf-c-label__icon">
1572
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1573
+ </span>
1574
+ <span
1575
+ class="pf-c-label__text"
1576
+ style="--pf-c-label__text--MaxWidth: 38ch"
1577
+ >Purple label with icon and set max-width truncation customization</span>
1578
+ </span>
1579
+ <span class="pf-c-label__actions">
1580
+ <button
1581
+ class="pf-c-button pf-m-plain"
1582
+ type="button"
1583
+ id="purple-outline-truncated-with-icon-button"
1584
+ aria-label="Remove"
1585
+ aria-labelledby="purple-outline-truncated-with-icon-button purple-outline-truncated-with-icon-text"
1586
+ >
1587
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1588
+ </button>
1589
+ </span>
1049
1590
  </span>
1050
1591
 
1051
1592
  <br />
1052
1593
  <br />
1053
1594
 
1054
- <span class="pf-c-label pf-m-cyan pf-m-outline">
1055
- <span class="pf-c-label__content">Cyan</span>
1595
+ <span class="pf-c-label pf-m-outline pf-m-cyan">
1596
+ <span class="pf-c-label__content">
1597
+ <span class="pf-c-label__text">Cyan</span>
1598
+ </span>
1056
1599
  </span>
1057
1600
 
1058
- <span class="pf-c-label pf-m-cyan pf-m-outline">
1601
+ <span class="pf-c-label pf-m-outline pf-m-cyan">
1059
1602
  <span class="pf-c-label__content">
1060
1603
  <span class="pf-c-label__icon">
1061
1604
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1062
1605
  </span>
1063
- Cyan icon
1606
+ <span class="pf-c-label__text">Cyan icon</span>
1064
1607
  </span>
1065
1608
  </span>
1066
1609
 
1067
- <span class="pf-c-label pf-m-cyan pf-m-outline">
1068
- <span class="pf-c-label__content">Cyan removable</span>
1069
- <button
1070
- class="pf-c-button pf-m-plain"
1071
- type="button"
1072
- id="outline-cyan-close-button"
1073
- aria-label="Remove"
1074
- aria-labelledby="outline-cyan-close-button outline-cyan-close-text"
1075
- >
1076
- <i class="fas fa-times" aria-hidden="true"></i>
1077
- </button>
1610
+ <span class="pf-c-label pf-m-outline pf-m-cyan">
1611
+ <span class="pf-c-label__content">
1612
+ <span class="pf-c-label__text">Cyan removable</span>
1613
+ </span>
1614
+ <span class="pf-c-label__actions">
1615
+ <button
1616
+ class="pf-c-button pf-m-plain"
1617
+ type="button"
1618
+ id="cyan-outline-removable-button"
1619
+ aria-label="Remove"
1620
+ aria-labelledby="cyan-outline-removable-button cyan-outline-removable-text"
1621
+ >
1622
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1623
+ </button>
1624
+ </span>
1078
1625
  </span>
1079
1626
 
1080
- <span class="pf-c-label pf-m-cyan pf-m-outline">
1627
+ <span class="pf-c-label pf-m-outline pf-m-cyan">
1081
1628
  <span class="pf-c-label__content">
1082
1629
  <span class="pf-c-label__icon">
1083
1630
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1084
1631
  </span>
1085
- Cyan icon removable
1632
+ <span class="pf-c-label__text">Cyan icon removable</span>
1633
+ </span>
1634
+ <span class="pf-c-label__actions">
1635
+ <button
1636
+ class="pf-c-button pf-m-plain"
1637
+ type="button"
1638
+ id="cyan-outline-icon-removable-button"
1639
+ aria-label="Remove"
1640
+ aria-labelledby="cyan-outline-icon-removable-button cyan-outline-icon-removable-text"
1641
+ >
1642
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1643
+ </button>
1086
1644
  </span>
1087
- <button
1088
- class="pf-c-button pf-m-plain"
1089
- type="button"
1090
- id="outline-cyan-icon-close-button"
1091
- aria-label="Remove"
1092
- aria-labelledby="outline-cyan-icon-close-button outline-cyan-icon-close-text"
1093
- >
1094
- <i class="fas fa-times" aria-hidden="true"></i>
1095
- </button>
1096
1645
  </span>
1097
1646
 
1098
1647
  <span class="pf-c-label pf-m-outline pf-m-cyan">
1099
- <a class="pf-c-label__content" href="#">Cyan link</a>
1648
+ <a class="pf-c-label__content" href="#">
1649
+ <span class="pf-c-label__text">Cyan link</span>
1650
+ </a>
1100
1651
  </span>
1101
1652
 
1102
1653
  <span class="pf-c-label pf-m-outline pf-m-cyan">
1103
- <a class="pf-c-label__content" href="#">Cyan link removable</a>
1104
- <button
1105
- class="pf-c-button pf-m-plain"
1106
- type="button"
1107
- id="outline-cyan-link-close-button"
1108
- aria-label="Remove"
1109
- aria-labelledby="outline-cyan-link-close-button outline-cyan-link-close-text"
1110
- >
1111
- <i class="fas fa-times" aria-hidden="true"></i>
1112
- </button>
1654
+ <a class="pf-c-label__content" href="#">
1655
+ <span class="pf-c-label__text">Cyan link removable</span>
1656
+ </a>
1657
+ <span class="pf-c-label__actions">
1658
+ <button
1659
+ class="pf-c-button pf-m-plain"
1660
+ type="button"
1661
+ id="cyan-outline-link-removable-button"
1662
+ aria-label="Remove"
1663
+ aria-labelledby="cyan-outline-link-removable-button cyan-outline-link-removable-text"
1664
+ >
1665
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1666
+ </button>
1667
+ </span>
1668
+ </span>
1669
+
1670
+ <span class="pf-c-label pf-m-outline pf-m-cyan">
1671
+ <span class="pf-c-label__content">
1672
+ <span class="pf-c-label__icon">
1673
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1674
+ </span>
1675
+ <span
1676
+ class="pf-c-label__text"
1677
+ style="--pf-c-label__text--MaxWidth: 28ch"
1678
+ >Cyan label, max-width truncation customization</span>
1679
+ </span>
1680
+ </span>
1681
+
1682
+ <span class="pf-c-label pf-m-outline pf-m-cyan">
1683
+ <span class="pf-c-label__content">
1684
+ <span class="pf-c-label__icon">
1685
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1686
+ </span>
1687
+ <span
1688
+ class="pf-c-label__text"
1689
+ style="--pf-c-label__text--MaxWidth: 38ch"
1690
+ >Cyan label with icon and set max-width truncation customization</span>
1691
+ </span>
1692
+ <span class="pf-c-label__actions">
1693
+ <button
1694
+ class="pf-c-button pf-m-plain"
1695
+ type="button"
1696
+ id="cyan-outline-truncated-with-icon-button"
1697
+ aria-label="Remove"
1698
+ aria-labelledby="cyan-outline-truncated-with-icon-button cyan-outline-truncated-with-icon-text"
1699
+ >
1700
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1701
+ </button>
1702
+ </span>
1113
1703
  </span>
1114
1704
 
1115
1705
  <br />
1116
1706
  <br />
1117
1707
 
1118
- <span class="pf-c-label pf-m-gold pf-m-outline">
1119
- <span class="pf-c-label__content">Gold</span>
1708
+ <span class="pf-c-label pf-m-outline pf-m-gold">
1709
+ <span class="pf-c-label__content">
1710
+ <span class="pf-c-label__text">Gold</span>
1711
+ </span>
1120
1712
  </span>
1121
1713
 
1122
- <span class="pf-c-label pf-m-gold pf-m-outline">
1714
+ <span class="pf-c-label pf-m-outline pf-m-gold">
1123
1715
  <span class="pf-c-label__content">
1124
1716
  <span class="pf-c-label__icon">
1125
1717
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1126
1718
  </span>
1127
- Gold icon
1719
+ <span class="pf-c-label__text">Gold icon</span>
1128
1720
  </span>
1129
1721
  </span>
1130
1722
 
1131
- <span class="pf-c-label pf-m-gold pf-m-outline">
1132
- <span class="pf-c-label__content">Gold removable</span>
1133
- <button
1134
- class="pf-c-button pf-m-plain"
1135
- type="button"
1136
- id="gold-outline-removable-button"
1137
- aria-label="Remove"
1138
- aria-labelledby="gold-outline-removable-button gold-outline-removable-text"
1139
- >
1140
- <i class="fas fa-times" aria-hidden="true"></i>
1141
- </button>
1723
+ <span class="pf-c-label pf-m-outline pf-m-gold">
1724
+ <span class="pf-c-label__content">
1725
+ <span class="pf-c-label__text">Gold removable</span>
1726
+ </span>
1727
+ <span class="pf-c-label__actions">
1728
+ <button
1729
+ class="pf-c-button pf-m-plain"
1730
+ type="button"
1731
+ id="gold-outline-removable-button"
1732
+ aria-label="Remove"
1733
+ aria-labelledby="gold-outline-removable-button gold-outline-removable-text"
1734
+ >
1735
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1736
+ </button>
1737
+ </span>
1142
1738
  </span>
1143
1739
 
1144
- <span class="pf-c-label pf-m-gold pf-m-outline">
1740
+ <span class="pf-c-label pf-m-outline pf-m-gold">
1145
1741
  <span class="pf-c-label__content">
1146
1742
  <span class="pf-c-label__icon">
1147
1743
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1148
1744
  </span>
1149
- Gold icon removable
1745
+ <span class="pf-c-label__text">Gold icon removable</span>
1746
+ </span>
1747
+ <span class="pf-c-label__actions">
1748
+ <button
1749
+ class="pf-c-button pf-m-plain"
1750
+ type="button"
1751
+ id="gold-outline-icon-removable-button"
1752
+ aria-label="Remove"
1753
+ aria-labelledby="gold-outline-icon-removable-button gold-outline-icon-removable-text"
1754
+ >
1755
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1756
+ </button>
1150
1757
  </span>
1151
- <button
1152
- class="pf-c-button pf-m-plain"
1153
- type="button"
1154
- id="gold-outline-icon-removable-button"
1155
- aria-label="Remove"
1156
- aria-labelledby="gold-outline-icon-removable-button gold-outline-icon-removable-text"
1157
- >
1158
- <i class="fas fa-times" aria-hidden="true"></i>
1159
- </button>
1160
1758
  </span>
1161
1759
 
1162
- <span class="pf-c-label pf-m-gold pf-m-outline">
1163
- <a class="pf-c-label__content" href="#">Gold link</a>
1760
+ <span class="pf-c-label pf-m-outline pf-m-gold">
1761
+ <a class="pf-c-label__content" href="#">
1762
+ <span class="pf-c-label__text">Gold link</span>
1763
+ </a>
1764
+ </span>
1765
+
1766
+ <span class="pf-c-label pf-m-outline pf-m-gold">
1767
+ <a class="pf-c-label__content" href="#">
1768
+ <span class="pf-c-label__text">Gold link removable</span>
1769
+ </a>
1770
+ <span class="pf-c-label__actions">
1771
+ <button
1772
+ class="pf-c-button pf-m-plain"
1773
+ type="button"
1774
+ id="gold-outline-link-removable-button"
1775
+ aria-label="Remove"
1776
+ aria-labelledby="gold-outline-link-removable-button gold-outline-link-removable-text"
1777
+ >
1778
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1779
+ </button>
1780
+ </span>
1164
1781
  </span>
1165
1782
 
1166
- <span class="pf-c-label pf-m-gold pf-m-outline">
1167
- <a class="pf-c-label__content" href="#">Gold link removable</a>
1168
- <button
1169
- class="pf-c-button pf-m-plain"
1170
- type="button"
1171
- id="gold-outline-link-removable-button"
1172
- aria-label="Remove"
1173
- aria-labelledby="gold-outline-link-removable-button gold-outline-link-removable-text"
1174
- >
1175
- <i class="fas fa-times" aria-hidden="true"></i>
1176
- </button>
1783
+ <span class="pf-c-label pf-m-outline pf-m-gold">
1784
+ <span class="pf-c-label__content">
1785
+ <span class="pf-c-label__icon">
1786
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1787
+ </span>
1788
+ <span
1789
+ class="pf-c-label__text"
1790
+ style="--pf-c-label__text--MaxWidth: 28ch"
1791
+ >Gold label, max-width truncation customization</span>
1792
+ </span>
1793
+ </span>
1794
+
1795
+ <span class="pf-c-label pf-m-outline pf-m-gold">
1796
+ <span class="pf-c-label__content">
1797
+ <span class="pf-c-label__icon">
1798
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1799
+ </span>
1800
+ <span
1801
+ class="pf-c-label__text"
1802
+ style="--pf-c-label__text--MaxWidth: 38ch"
1803
+ >Gold label with icon and set max-width truncation customization</span>
1804
+ </span>
1805
+ <span class="pf-c-label__actions">
1806
+ <button
1807
+ class="pf-c-button pf-m-plain"
1808
+ type="button"
1809
+ id="gold-outline-truncated-with-icon-button"
1810
+ aria-label="Remove"
1811
+ aria-labelledby="gold-outline-truncated-with-icon-button gold-outline-truncated-with-icon-text"
1812
+ >
1813
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1814
+ </button>
1815
+ </span>
1177
1816
  </span>
1178
1817
 
1179
1818
  ```
@@ -1182,7 +1821,9 @@ cssPrefix: pf-c-label
1182
1821
 
1183
1822
  ```html
1184
1823
  <span class="pf-c-label pf-m-compact">
1185
- <span class="pf-c-label__content">Compact</span>
1824
+ <span class="pf-c-label__content">
1825
+ <span class="pf-c-label__text">Compact</span>
1826
+ </span>
1186
1827
  </span>
1187
1828
 
1188
1829
  <span class="pf-c-label pf-m-compact">
@@ -1190,21 +1831,25 @@ cssPrefix: pf-c-label
1190
1831
  <span class="pf-c-label__icon">
1191
1832
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1192
1833
  </span>
1193
- Compact icon
1834
+ <span class="pf-c-label__text">Compact icon</span>
1194
1835
  </span>
1195
1836
  </span>
1196
1837
 
1197
1838
  <span class="pf-c-label pf-m-compact">
1198
- <span class="pf-c-label__content">Compact removable</span>
1199
- <button
1200
- class="pf-c-button pf-m-plain"
1201
- type="button"
1202
- id="compact-close-button"
1203
- aria-label="Remove"
1204
- aria-labelledby="compact-close-button compact-close-text"
1205
- >
1206
- <i class="fas fa-times" aria-hidden="true"></i>
1207
- </button>
1839
+ <span class="pf-c-label__content">
1840
+ <span class="pf-c-label__text">Compact removable</span>
1841
+ </span>
1842
+ <span class="pf-c-label__actions">
1843
+ <button
1844
+ class="pf-c-button pf-m-plain"
1845
+ type="button"
1846
+ id="compact-removable-button"
1847
+ aria-label="Remove"
1848
+ aria-labelledby="compact-removable-button compact-removable-text"
1849
+ >
1850
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1851
+ </button>
1852
+ </span>
1208
1853
  </span>
1209
1854
 
1210
1855
  <span class="pf-c-label pf-m-compact">
@@ -1212,34 +1857,42 @@ cssPrefix: pf-c-label
1212
1857
  <span class="pf-c-label__icon">
1213
1858
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1214
1859
  </span>
1215
- Compact icon removable
1860
+ <span class="pf-c-label__text">Compact icon removable</span>
1861
+ </span>
1862
+ <span class="pf-c-label__actions">
1863
+ <button
1864
+ class="pf-c-button pf-m-plain"
1865
+ type="button"
1866
+ id="compact-icon-removable-button"
1867
+ aria-label="Remove"
1868
+ aria-labelledby="compact-icon-removable-button compact-icon-removable-text"
1869
+ >
1870
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1871
+ </button>
1216
1872
  </span>
1217
- <button
1218
- class="pf-c-button pf-m-plain"
1219
- type="button"
1220
- id="compact-icon-close-button"
1221
- aria-label="Remove"
1222
- aria-labelledby="compact-icon-close-button compact-icon-close-text"
1223
- >
1224
- <i class="fas fa-times" aria-hidden="true"></i>
1225
- </button>
1226
1873
  </span>
1227
1874
 
1228
1875
  <span class="pf-c-label pf-m-compact">
1229
- <a class="pf-c-label__content" href="#">Compact link</a>
1876
+ <a class="pf-c-label__content" href="#">
1877
+ <span class="pf-c-label__text">Compact link</span>
1878
+ </a>
1230
1879
  </span>
1231
1880
 
1232
1881
  <span class="pf-c-label pf-m-compact">
1233
- <a class="pf-c-label__content" href="#">Compact link removable</a>
1234
- <button
1235
- class="pf-c-button pf-m-plain"
1236
- type="button"
1237
- id="compact-link-close-button"
1238
- aria-label="Remove"
1239
- aria-labelledby="compact-link-close-button compact-link-close-text"
1240
- >
1241
- <i class="fas fa-times" aria-hidden="true"></i>
1242
- </button>
1882
+ <a class="pf-c-label__content" href="#">
1883
+ <span class="pf-c-label__text">Compact link removable</span>
1884
+ </a>
1885
+ <span class="pf-c-label__actions">
1886
+ <button
1887
+ class="pf-c-button pf-m-plain"
1888
+ type="button"
1889
+ id="compact-link-removable-button"
1890
+ aria-label="Remove"
1891
+ aria-labelledby="compact-link-removable-button compact-link-removable-text"
1892
+ >
1893
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1894
+ </button>
1895
+ </span>
1243
1896
  </span>
1244
1897
 
1245
1898
  <span class="pf-c-label pf-m-compact">
@@ -1247,17 +1900,34 @@ cssPrefix: pf-c-label
1247
1900
  <span class="pf-c-label__icon">
1248
1901
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1249
1902
  </span>
1250
- <span class="pf-c-label__text">Compact label with icon that truncates</span>
1903
+ <span
1904
+ class="pf-c-label__text"
1905
+ style="--pf-c-label__text--MaxWidth: 28ch"
1906
+ >Compact label, max-width truncation customization</span>
1907
+ </span>
1908
+ </span>
1909
+
1910
+ <span class="pf-c-label pf-m-compact">
1911
+ <span class="pf-c-label__content">
1912
+ <span class="pf-c-label__icon">
1913
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1914
+ </span>
1915
+ <span
1916
+ class="pf-c-label__text"
1917
+ style="--pf-c-label__text--MaxWidth: 38ch"
1918
+ >Compact label with icon and set max-width truncation customization</span>
1919
+ </span>
1920
+ <span class="pf-c-label__actions">
1921
+ <button
1922
+ class="pf-c-button pf-m-plain"
1923
+ type="button"
1924
+ id="compact-truncated-with-icon-button"
1925
+ aria-label="Remove"
1926
+ aria-labelledby="compact-truncated-with-icon-button compact-truncated-with-icon-text"
1927
+ >
1928
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1929
+ </button>
1251
1930
  </span>
1252
- <button
1253
- class="pf-c-button pf-m-plain"
1254
- type="button"
1255
- id="compact-icon-close-truncate-button"
1256
- aria-label="Remove"
1257
- aria-labelledby="compact-icon-close-truncate-button compact-icon-close-truncate-text"
1258
- >
1259
- <i class="fas fa-times" aria-hidden="true"></i>
1260
- </button>
1261
1931
  </span>
1262
1932
 
1263
1933
  ```
@@ -1268,7 +1938,9 @@ This style of label is used to indicate overflow within a label group.
1268
1938
 
1269
1939
  ```html
1270
1940
  <button class="pf-c-label pf-m-overflow" type="button">
1271
- <span class="pf-c-label__content">Overflow</span>
1941
+ <span class="pf-c-label__content">
1942
+ <span class="pf-c-label__text">Overflow</span>
1943
+ </span>
1272
1944
  </button>
1273
1945
 
1274
1946
  ```
@@ -1277,39 +1949,41 @@ This style of label is used to indicate overflow within a label group.
1277
1949
 
1278
1950
  **Note: Editable label behavior must be handled with JavaScript.**
1279
1951
 
1280
- - `.pf-c-label__editable-text` onClick event should:
1281
- - Set `.pf-m-editable-active` on `.pf-c-label`
1282
- - Change `.pf-c-label__editable-text`from a button to an input
1283
- - Return keypress, when content is editable, should:
1284
- - Be captured to prevent line wrapping and save updates to label text
1285
- - Remove `.pf-m-editable-active` from `.pf-c-label`
1286
- - Change `.pf-c-label__editable-text` back from an input to a button and set the `currvalue` of the button to the contents of the input
1287
- - Esc keypress, when content is editable, should:
1288
- - Undo any update to label text
1289
- - Remove `.pf-m-editable-active` from `.pf-c-label`
1290
- - Change `.pf-c-label__editable-text` back to a button
1952
+ * `.pf-c-label__editable-text` onClick event should:
1953
+ * Set `.pf-m-editable-active` on `.pf-c-label`
1954
+ * Change `.pf-c-label__editable-text`from a button to an input
1955
+ * Return keypress, when content is editable, should:
1956
+ * Be captured to prevent line wrapping and save updates to label text
1957
+ * Remove `.pf-m-editable-active` from `.pf-c-label`
1958
+ * Esc keypress, when content is editable, should:
1959
+ * Undo any update to label text
1960
+ * Remove `.pf-m-editable-active` from `.pf-c-label`
1961
+ * Change `.pf-c-label__editable-text` back to a button
1291
1962
 
1292
1963
  ```html isBeta
1293
- <span class="pf-c-label pf-m-blue pf-m-editable">
1964
+ <span class="pf-c-label pf-m-editable pf-m-blue">
1294
1965
  <button
1295
1966
  class="pf-c-label__content"
1296
1967
  id="editable-label-editable-content"
1297
- currvalue="Editable label"
1298
1968
  aria-label="Editable text"
1299
- >Editable label</button>
1300
-
1301
- <button
1302
- class="pf-c-button pf-m-plain"
1303
- type="button"
1304
- id="editable-label-button"
1305
- aria-label="Remove"
1306
- aria-labelledby="editable-label-button editable-label-text"
1307
1969
  >
1308
- <i class="fas fa-times" aria-hidden="true"></i>
1970
+ <span class="pf-c-label__text">Editable label</span>
1309
1971
  </button>
1972
+
1973
+ <span class="pf-c-label__actions">
1974
+ <button
1975
+ class="pf-c-button pf-m-plain"
1976
+ type="button"
1977
+ id="editable-label-button"
1978
+ aria-label="Remove"
1979
+ aria-labelledby="editable-label-button editable-label-text"
1980
+ >
1981
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1982
+ </button>
1983
+ </span>
1310
1984
  </span>
1311
1985
 
1312
- <span class="pf-c-label pf-m-blue pf-m-editable pf-m-editable-active">
1986
+ <span class="pf-c-label pf-m-editable pf-m-editable-active pf-m-blue">
1313
1987
  <input
1314
1988
  class="pf-c-label__content"
1315
1989
  id="editable-label-active-editable-content"
@@ -1319,27 +1993,30 @@ This style of label is used to indicate overflow within a label group.
1319
1993
  />
1320
1994
  </span>
1321
1995
 
1322
- <span class="pf-c-label pf-m-compact pf-m-blue pf-m-editable">
1996
+ <span class="pf-c-label pf-m-compact pf-m-editable pf-m-blue">
1323
1997
  <button
1324
1998
  class="pf-c-label__content"
1325
1999
  id="compact-editable-label-editable-content"
1326
- currvalue="Compact editable label"
1327
2000
  aria-label="Editable text"
1328
- >Compact editable label</button>
1329
-
1330
- <button
1331
- class="pf-c-button pf-m-plain"
1332
- type="button"
1333
- id="compact-editable-label-button"
1334
- aria-label="Remove"
1335
- aria-labelledby="compact-editable-label-button compact-editable-label-text"
1336
2001
  >
1337
- <i class="fas fa-times" aria-hidden="true"></i>
2002
+ <span class="pf-c-label__text">Compact editable label</span>
1338
2003
  </button>
2004
+
2005
+ <span class="pf-c-label__actions">
2006
+ <button
2007
+ class="pf-c-button pf-m-plain"
2008
+ type="button"
2009
+ id="compact-editable-label-button"
2010
+ aria-label="Remove"
2011
+ aria-labelledby="compact-editable-label-button compact-editable-label-text"
2012
+ >
2013
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
2014
+ </button>
2015
+ </span>
1339
2016
  </span>
1340
2017
 
1341
2018
  <span
1342
- class="pf-c-label pf-m-compact pf-m-blue pf-m-editable pf-m-editable-active"
2019
+ class="pf-c-label pf-m-compact pf-m-editable pf-m-editable-active pf-m-blue"
1343
2020
  >
1344
2021
  <input
1345
2022
  class="pf-c-label__content"
@@ -1358,7 +2035,9 @@ This style of label is used to add new labels to a label group.
1358
2035
 
1359
2036
  ```html isBeta
1360
2037
  <button class="pf-c-label pf-m-add" type="button">
1361
- <span class="pf-c-label__content">Add Label</span>
2038
+ <span class="pf-c-label__content">
2039
+ <span class="pf-c-label__text">Add Label</span>
2040
+ </span>
1362
2041
  </button>
1363
2042
 
1364
2043
  ```
@@ -1367,23 +2046,25 @@ This style of label is used to add new labels to a label group.
1367
2046
 
1368
2047
  ### Usage
1369
2048
 
1370
- | Class | Applied to | Outcome |
1371
- | ---------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
1372
- | `.pf-c-label` | `<span>`, `<button>` | Initiates a label. Without a color modifier, the label's default style is grey. Use a color modifier to change the label color. Use a `<button>` if the label is an overflow label used in the label group. **Required** |
1373
- | `.pf-c-label__content` | `<span>`, `<a>`, `<button>` | Iniates a label content. Use as an `<a>` element if the label serves as a link. Use a `<button>` if the label serves as an action. **Required** |
1374
- | `.pf-c-label__icon` | `<span>` | Initiates a label icon. |
1375
- | `.pf-c-label__text` | `<span>` | Initiates label text. |
1376
- | `.pf-c-label__editable-text` | `<button>`, `<input>` | Initiates editable label text. See the [editable](#editable) example for details about handling behavior in Javascript. |
1377
- | `.pf-m-outline` | `.pf-c-label` | Modifies label for outline styles. |
1378
- | `.pf-m-compact` | `.pf-c-label` | Modifies label for compact styles. |
1379
- | `.pf-m-overflow` | `.pf-c-label` | Modifies label for overflow styles for use in a label group. |
1380
- | `.pf-m-add` | `.pf-c-label` | Modifies label for add styles for use in a label group. |
1381
- | `.pf-m-blue` | `.pf-c-label` | Modifies the label to have blue colored styling. |
1382
- | `.pf-m-green` | `.pf-c-label` | Modifies the label to have green colored styling. |
1383
- | `.pf-m-orange` | `.pf-c-label` | Modifies the label to have orange colored styling. |
1384
- | `.pf-m-red` | `.pf-c-label` | Modifies the label to have red colored styling. |
1385
- | `.pf-m-purple` | `.pf-c-label` | Modifies the label to have purple colored styling. |
1386
- | `.pf-m-cyan` | `.pf-c-label` | Modifies the label to have cyan colored styling. |
1387
- | `.pf-m-gold` | `.pf-c-label` | Modifies the label to have gold colored styling. |
1388
- | `.pf-m-editable` | `.pf-c-label` | Modifies label for editable styles. |
1389
- | `.pf-m-editable-active` | `.pf-c-label.pf-m-editable` | Modifies editable label for active styles. |
2049
+ | Class | Applied to | Outcome |
2050
+ | -- | -- | -- |
2051
+ | `.pf-c-label` | `<span>`, `<button>` | Initiates a label. Without a color modifier, the label's default style is grey. Use a color modifier to change the label color. Use a `<button>` if the label is an overflow label used in the label group. **Required** |
2052
+ | `.pf-c-label__content` | `<span>`, `<a>`, `<button>` | Creates a content wrapper. Use as an `<a>` element if the label serves as a link. Use a `<button>` if the label serves as an action. **Required** |
2053
+ | `.pf-c-label__icon` | `<span>` | Initiates a label icon. |
2054
+ | `.pf-c-label__text` | `<span>` | Initiates label text. **Required** |
2055
+ | `.pf-c-label__editable-text` | `<button>`, `<input>` | Initiates editable label text. See the [editable](#editable) example for details about handling behavior in Javascript.|
2056
+ | `.pf-c-label__actions` | `<span>` | Creates a wrapper for label actions. **Required for removable labels** |
2057
+ | `.pf-m-outline` | `.pf-c-label` | Modifies label for outline styles. |
2058
+ | `.pf-m-compact` | `.pf-c-label` | Modifies label for compact styles. |
2059
+ | `.pf-m-overflow` | `.pf-c-label` | Modifies label for overflow styles for use in a label group. |
2060
+ | `.pf-m-add` | `.pf-c-label` | Modifies label for add styles for use in a label group. |
2061
+ | `.pf-m-blue` | `.pf-c-label` | Modifies the label to have blue colored styling. |
2062
+ | `.pf-m-green` | `.pf-c-label` | Modifies the label to have green colored styling. |
2063
+ | `.pf-m-orange` | `.pf-c-label` | Modifies the label to have orange colored styling. |
2064
+ | `.pf-m-red` | `.pf-c-label` | Modifies the label to have red colored styling. |
2065
+ | `.pf-m-purple` | `.pf-c-label` | Modifies the label to have purple colored styling. |
2066
+ | `.pf-m-cyan` | `.pf-c-label` | Modifies the label to have cyan colored styling. |
2067
+ | `.pf-m-gold` | `.pf-c-label` | Modifies the label to have gold colored styling. |
2068
+ | `.pf-m-editable` | `.pf-c-label` | Modifies label for editable styles. |
2069
+ | `.pf-m-editable-active` | `.pf-c-label.pf-m-editable` | Modifies editable label for active styles. |
2070
+ | `--pf-c-label__text--MaxWidth` | `.pf-c-label` | Modifiex the max width of the text before text will truncate. |