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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (340) hide show
  1. package/RELEASE-NOTES.md +18 -1
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/images/pfbg-icon.svg +1 -0
  4. package/assets/pficon/pficon.scss +7 -2
  5. package/assets/pficon/pficon.woff2 +0 -0
  6. package/base/_base.scss +0 -18
  7. package/base/_chart-globals.scss +0 -4
  8. package/base/_common.scss +0 -22
  9. package/base/_fa-icons.scss +1 -2
  10. package/base/_fonts.scss +22 -27
  11. package/base/_globals.scss +92 -86
  12. package/base/_icons.scss +1 -28
  13. package/base/_svg-icons.scss +6 -0
  14. package/base/_variables.scss +4 -4
  15. package/base/patternfly-common.css +0 -10
  16. package/base/patternfly-fa-icons.css +1 -1
  17. package/base/patternfly-fonts.css +17 -17
  18. package/base/patternfly-globals.css +35 -41
  19. package/base/patternfly-icons.css +8 -22
  20. package/base/patternfly-pf-icons.css +6 -2
  21. package/base/patternfly-themes.css +0 -42
  22. package/base/patternfly-variables.css +3 -3
  23. package/base/themes/dark/_globals.scss +1 -1
  24. package/base/themes/dark/_variables.scss +1 -1
  25. package/components/AboutModalBox/about-modal-box.css +20 -50
  26. package/components/AboutModalBox/about-modal-box.scss +22 -14
  27. package/components/Accordion/accordion.css +2 -0
  28. package/components/Accordion/accordion.scss +2 -0
  29. package/components/Alert/alert.css +17 -8
  30. package/components/Alert/alert.scss +21 -7
  31. package/components/Alert/themes/dark/alert.scss +1 -1
  32. package/components/AppLauncher/app-launcher.css +2 -0
  33. package/components/AppLauncher/app-launcher.scss +2 -0
  34. package/components/Avatar/avatar.scss +2 -2
  35. package/components/BackgroundImage/background-image.css +8 -35
  36. package/components/BackgroundImage/background-image.scss +17 -43
  37. package/components/Banner/banner.css +14 -52
  38. package/components/Banner/banner.scss +9 -13
  39. package/components/Breadcrumb/breadcrumb.css +2 -0
  40. package/components/Breadcrumb/breadcrumb.scss +2 -0
  41. package/components/CalendarMonth/calendar-month.css +2 -2
  42. package/components/CalendarMonth/calendar-month.scss +3 -3
  43. package/components/Card/card.css +115 -50
  44. package/components/Card/card.scss +164 -63
  45. package/components/Chip/chip.css +33 -24
  46. package/components/Chip/chip.scss +40 -31
  47. package/components/ChipGroup/chip-group.css +27 -17
  48. package/components/ChipGroup/chip-group.scss +36 -22
  49. package/components/Content/content.css +11 -5
  50. package/components/Content/content.scss +17 -9
  51. package/components/ContextSelector/context-selector.css +13 -6
  52. package/components/ContextSelector/context-selector.scss +14 -7
  53. package/components/DataList/data-list-grid.css +7 -7
  54. package/components/DataList/data-list-grid.scss +1 -1
  55. package/components/DataList/data-list.css +46 -40
  56. package/components/DataList/data-list.scss +37 -28
  57. package/components/DatePicker/date-picker.css +0 -8
  58. package/components/DatePicker/date-picker.scss +0 -9
  59. package/components/DescriptionList/description-list.css +7 -7
  60. package/components/DescriptionList/description-list.scss +7 -7
  61. package/components/Divider/divider.css +2 -2
  62. package/components/Divider/divider.scss +3 -3
  63. package/components/Drawer/drawer.css +15 -16
  64. package/components/Drawer/drawer.scss +2 -3
  65. package/components/Dropdown/dropdown.css +26 -25
  66. package/components/Dropdown/dropdown.scss +17 -18
  67. package/components/DualListSelector/dual-list-selector.css +1 -1
  68. package/components/DualListSelector/dual-list-selector.scss +1 -1
  69. package/components/EmptyState/empty-state.css +46 -52
  70. package/components/EmptyState/empty-state.scss +58 -57
  71. package/components/ExpandableSection/expandable-section.css +2 -0
  72. package/components/ExpandableSection/expandable-section.scss +2 -0
  73. package/components/Form/form.css +14 -12
  74. package/components/Form/form.scss +9 -7
  75. package/components/FormControl/form-control.css +2 -5
  76. package/components/FormControl/themes/dark/form-control.scss +2 -6
  77. package/components/HelperText/helper-text.css +4 -0
  78. package/components/HelperText/helper-text.scss +5 -0
  79. package/components/Hint/hint.css +2 -2
  80. package/components/Hint/hint.scss +2 -2
  81. package/components/Icon/icon.css +3 -3
  82. package/components/Icon/icon.scss +3 -3
  83. package/components/InputGroup/input-group.css +61 -85
  84. package/components/InputGroup/input-group.scss +55 -61
  85. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  86. package/components/Label/label.css +49 -36
  87. package/components/Label/label.scss +53 -38
  88. package/components/Label/themes/dark/label.scss +2 -2
  89. package/components/LabelGroup/label-group.css +26 -22
  90. package/components/LabelGroup/label-group.scss +31 -26
  91. package/components/LogViewer/log-viewer.css +0 -38
  92. package/components/Login/login.css +20 -60
  93. package/components/Login/login.scss +16 -18
  94. package/components/Login/themes/dark/login.scss +4 -0
  95. package/components/Masthead/masthead.css +4 -42
  96. package/components/Masthead/masthead.scss +4 -4
  97. package/components/Menu/menu.css +9 -6
  98. package/components/Menu/menu.scss +34 -31
  99. package/components/MenuToggle/menu-toggle.css +3 -1
  100. package/components/MenuToggle/menu-toggle.scss +3 -1
  101. package/components/ModalBox/modal-box.css +12 -11
  102. package/components/ModalBox/modal-box.scss +14 -14
  103. package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
  104. package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
  105. package/components/Nav/nav.css +1 -1
  106. package/components/Nav/nav.scss +2 -2
  107. package/components/NotificationDrawer/notification-drawer.css +8 -8
  108. package/components/NotificationDrawer/notification-drawer.scss +8 -8
  109. package/components/OptionsMenu/options-menu.css +8 -10
  110. package/components/OptionsMenu/options-menu.scss +9 -11
  111. package/components/Page/page.css +101 -122
  112. package/components/Page/page.scss +49 -21
  113. package/components/Pagination/pagination.css +2 -110
  114. package/components/Pagination/pagination.scss +0 -6
  115. package/components/Popover/popover.css +31 -37
  116. package/components/Popover/popover.scss +32 -37
  117. package/components/Popover/themes/dark/popover.scss +3 -9
  118. package/components/Progress/progress.css +13 -10
  119. package/components/Progress/progress.scss +13 -10
  120. package/components/ProgressStepper/progress-stepper.css +5 -5
  121. package/components/ProgressStepper/progress-stepper.scss +5 -5
  122. package/components/SearchInput/search-input.css +4 -2
  123. package/components/SearchInput/search-input.scss +4 -2
  124. package/components/Select/select.css +1 -1
  125. package/components/Select/select.scss +1 -1
  126. package/components/Sidebar/sidebar.css +69 -26
  127. package/components/Sidebar/sidebar.scss +84 -27
  128. package/components/SimpleList/simple-list.css +1 -1
  129. package/components/SimpleList/simple-list.scss +2 -2
  130. package/components/Spinner/spinner.css +4 -4
  131. package/components/Spinner/spinner.scss +4 -4
  132. package/components/Table/table-grid.css +28 -28
  133. package/components/Table/table-scrollable.css +31 -26
  134. package/components/Table/table-scrollable.scss +33 -28
  135. package/components/Table/table-tree-view.css +14 -4
  136. package/components/Table/table-tree-view.scss +15 -0
  137. package/components/Table/table.css +67 -65
  138. package/components/Table/table.scss +65 -62
  139. package/components/Tabs/tabs.css +0 -4
  140. package/components/Tabs/tabs.scss +0 -7
  141. package/components/TextInputGroup/text-input-group.css +6 -4
  142. package/components/TextInputGroup/text-input-group.scss +6 -5
  143. package/components/Tile/tile.css +1 -1
  144. package/components/Tile/tile.scss +1 -1
  145. package/components/Timestamp/timestamp.css +3 -3
  146. package/components/Timestamp/timestamp.scss +3 -3
  147. package/components/Toolbar/toolbar.css +78 -43
  148. package/components/Toolbar/toolbar.scss +50 -10
  149. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  150. package/components/Tooltip/tooltip.css +7 -12
  151. package/components/Tooltip/tooltip.scss +6 -3
  152. package/components/TreeView/tree-view.css +7 -15
  153. package/components/TreeView/tree-view.scss +7 -18
  154. package/components/Wizard/wizard.css +16 -39
  155. package/components/Wizard/wizard.scss +20 -2
  156. package/docs/components/AboutModalBox/examples/AboutModalBox.md +20 -14
  157. package/docs/components/Accordion/examples/Accordion.md +12 -12
  158. package/docs/components/ActionList/examples/ActionList.md +6 -6
  159. package/docs/components/Alert/examples/Alert.md +29 -29
  160. package/docs/components/AlertGroup/examples/AlertGroup.md +15 -15
  161. package/docs/components/AppLauncher/examples/application-launcher.md +52 -46
  162. package/docs/components/Avatar/examples/Avatar.md +11 -11
  163. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  164. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  165. package/docs/components/BackgroundImage/examples/BackgroundImage.md +13 -29
  166. package/docs/components/Badge/examples/Badge.md +5 -5
  167. package/docs/components/Banner/examples/Banner.md +8 -8
  168. package/docs/components/Brand/examples/Brand.md +9 -9
  169. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  170. package/docs/components/Button/examples/Button.md +35 -35
  171. package/docs/components/CalendarMonth/examples/CalendarMonth.md +301 -284
  172. package/docs/components/Card/examples/Card.md +676 -116
  173. package/docs/components/Check/examples/Check.md +16 -19
  174. package/docs/components/Chip/examples/Chip.md +70 -52
  175. package/docs/components/ChipGroup/examples/ChipGroup.md +452 -673
  176. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  177. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  178. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  179. package/docs/components/Content/examples/Content.md +37 -9
  180. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  181. package/docs/components/ContextSelector/examples/context-selector.md +87 -80
  182. package/docs/components/DataList/examples/DataList.md +239 -202
  183. package/docs/components/DatePicker/examples/DatePicker.md +139 -104
  184. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  185. package/docs/components/Divider/examples/Divider.md +10 -10
  186. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  187. package/docs/components/Drawer/examples/Drawer.md +43 -43
  188. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  189. package/docs/components/Dropdown/examples/Dropdown.md +125 -100
  190. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  191. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  192. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  193. package/docs/components/FileUpload/examples/FileUpload.md +146 -105
  194. package/docs/components/Form/examples/Form.md +152 -130
  195. package/docs/components/FormControl/examples/FormControl.md +21 -20
  196. package/docs/components/HelperText/examples/HelperText.md +24 -35
  197. package/docs/components/Hint/examples/Hint.md +7 -7
  198. package/docs/components/Icon/examples/Icon.md +11 -12
  199. package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
  200. package/docs/components/InputGroup/examples/InputGroup.md +229 -179
  201. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  202. package/docs/components/Label/examples/Label.md +1427 -746
  203. package/docs/components/LabelGroup/examples/LabelGroup.md +295 -242
  204. package/docs/components/List/examples/List.md +18 -18
  205. package/docs/components/LogViewer/examples/LogViewer.md +79 -74
  206. package/docs/components/Login/examples/Login.md +103 -181
  207. package/docs/components/Masthead/examples/masthead.md +9 -9
  208. package/docs/components/Menu/examples/Menu.md +83 -80
  209. package/docs/components/MenuToggle/examples/MenuToggle.md +29 -28
  210. package/docs/components/ModalBox/examples/ModalBox.md +113 -92
  211. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +27 -26
  212. package/docs/components/Nav/examples/Navigation.md +69 -69
  213. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  214. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +64 -64
  215. package/docs/components/NumberInput/examples/NumberInput.md +311 -239
  216. package/docs/components/OptionsMenu/examples/options-menu.md +28 -28
  217. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  218. package/docs/components/Page/examples/Page.css +7 -1
  219. package/docs/components/Page/examples/Page.md +81 -54
  220. package/docs/components/Pagination/examples/Pagination.md +27 -27
  221. package/docs/components/Panel/examples/Panel.md +10 -10
  222. package/docs/components/Popover/examples/Popover.md +206 -149
  223. package/docs/components/Progress/examples/Progress.md +32 -61
  224. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -39
  225. package/docs/components/Radio/examples/Radio.md +12 -11
  226. package/docs/components/SearchInput/examples/SearchInput.md +185 -148
  227. package/docs/components/Select/examples/Select.md +368 -313
  228. package/docs/components/Sidebar/examples/Sidebar.md +70 -14
  229. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  230. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  231. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  232. package/docs/components/Slider/examples/Slider.md +84 -62
  233. package/docs/components/Spinner/examples/Spinner.md +24 -24
  234. package/docs/components/Switch/examples/Switch.md +19 -19
  235. package/docs/components/TabContent/examples/TabContent.md +13 -13
  236. package/docs/components/Table/examples/Table.css +4 -0
  237. package/docs/components/Table/examples/Table.md +5212 -5750
  238. package/docs/components/Tabs/examples/Tabs.md +155 -155
  239. package/docs/components/TextInputGroup/examples/TextInputGroup.md +523 -406
  240. package/docs/components/Tile/examples/Tile.md +16 -17
  241. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  242. package/docs/components/Title/examples/Title.md +17 -17
  243. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  244. package/docs/components/Toolbar/examples/Toolbar.md +848 -726
  245. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  246. package/docs/components/TreeView/examples/TreeView.md +34 -34
  247. package/docs/components/Truncate/examples/Truncate.md +4 -5
  248. package/docs/components/Wizard/examples/Wizard.md +119 -127
  249. package/docs/demos/AboutModal/examples/AboutModal.md +4 -5
  250. package/docs/demos/Alert/examples/Alert.md +118 -71
  251. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  252. package/docs/demos/Banner/examples/Banner.md +8 -9
  253. package/docs/demos/Card/examples/Card.md +216 -153
  254. package/docs/demos/CardView/examples/CardView.md +57 -30
  255. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  256. package/docs/demos/Dashboard/examples/Dashboard.md +51 -33
  257. package/docs/demos/DataList/examples/DataList.md +312 -255
  258. package/docs/demos/DescriptionList/examples/DescriptionList.md +33 -22
  259. package/docs/demos/Drawer/examples/Drawer.md +24 -22
  260. package/docs/demos/Form/examples/BasicForms.md +220 -213
  261. package/docs/demos/HelperText/examples/HelperText.md +16 -14
  262. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  263. package/docs/demos/Masthead/examples/Masthead.md +302 -284
  264. package/docs/demos/Modal/examples/Modal.md +54 -66
  265. package/docs/demos/Nav/examples/Nav.md +47 -47
  266. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +70 -58
  267. package/docs/demos/Page/examples/Page.md +982 -51
  268. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +22 -18
  269. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +121 -106
  270. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +345 -311
  271. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  272. package/docs/demos/Table/examples/Table.md +3323 -1288
  273. package/docs/demos/Tabs/examples/Tabs.md +141 -90
  274. package/docs/demos/Toolbar/examples/Toolbar.md +1994 -329
  275. package/docs/demos/Wizard/examples/Wizard.md +289 -266
  276. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  277. package/docs/layouts/Flex/examples/Flex.md +98 -98
  278. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  279. package/docs/layouts/Grid/examples/Grid.md +9 -9
  280. package/docs/layouts/Level/examples/Level.md +5 -5
  281. package/docs/layouts/Split/examples/Split.md +7 -7
  282. package/docs/layouts/Stack/examples/Stack.md +6 -6
  283. package/docs/utilities/Accessibility/examples/Accessibility.md +5 -5
  284. package/docs/utilities/Alignment/examples/Alignment.md +7 -7
  285. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +13 -13
  286. package/docs/utilities/BoxShadow/examples/box-shadow.md +23 -23
  287. package/docs/utilities/Display/examples/Display.md +12 -12
  288. package/docs/utilities/Flex/examples/Flex.md +35 -35
  289. package/docs/utilities/Float/examples/Float.md +5 -5
  290. package/docs/utilities/Sizing/examples/Sizing.md +51 -51
  291. package/docs/utilities/Spacing/examples/Spacing.md +35 -35
  292. package/docs/utilities/Text/examples/Text.md +31 -31
  293. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  294. package/layouts/Gallery/gallery.css +1 -1
  295. package/layouts/Gallery/gallery.scss +1 -1
  296. package/layouts/Grid/grid.css +7 -7
  297. package/layouts/Grid/grid.scss +2 -2
  298. package/package.json +59 -65
  299. package/patternfly-addons.css +48 -48
  300. package/{patternfly-base-no-reset.css → patternfly-base-no-globals.css} +28 -73
  301. package/{patternfly-base-no-reset.scss → patternfly-base-no-globals.scss} +1 -0
  302. package/patternfly-base.css +63 -114
  303. package/{patternfly-no-reset.css → patternfly-no-globals.css} +1179 -2293
  304. package/{patternfly-no-reset.scss → patternfly-no-globals.scss} +1 -0
  305. package/patternfly.css +1207 -2327
  306. package/patternfly.min.css +1 -1
  307. package/patternfly.min.css.map +1 -1
  308. package/sass-utilities/functions.scss +8 -24
  309. package/sass-utilities/mixins.scss +15 -39
  310. package/sass-utilities/placeholders.scss +0 -23
  311. package/sass-utilities/scss-variables.scss +5 -6
  312. package/sass-utilities/themes/dark/placeholders.scss +0 -22
  313. package/sass-utilities/themes/dark/scss-variables.scss +1 -1
  314. package/utilities/Spacing/spacing.scss +2 -2
  315. package/utilities/Text/text.css +48 -48
  316. package/utilities/Text/text.scss +6 -6
  317. package/utilities/Text/themes/dark/text.scss +2 -2
  318. package/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff +0 -0
  319. package/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff +0 -0
  320. package/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff +0 -0
  321. package/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff +0 -0
  322. package/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff +0 -0
  323. package/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff +0 -0
  324. package/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff +0 -0
  325. package/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff +0 -0
  326. package/assets/fonts/RedHatText/RedHatText-Bold.woff +0 -0
  327. package/assets/fonts/RedHatText/RedHatText-BoldItalic.woff +0 -0
  328. package/assets/fonts/RedHatText/RedHatText-Italic.woff +0 -0
  329. package/assets/fonts/RedHatText/RedHatText-Medium.woff +0 -0
  330. package/assets/fonts/RedHatText/RedHatText-MediumItalic.woff +0 -0
  331. package/assets/fonts/RedHatText/RedHatText-Regular.woff +0 -0
  332. package/assets/fonts/webfonts/fa-solid-900.woff +0 -0
  333. package/assets/pficon/pficon.woff +0 -0
  334. package/base/_shield-inheritable.scss +0 -69
  335. package/base/_shield-noninheritable.scss +0 -13
  336. package/base/patternfly-shield-inheritable.css +0 -66
  337. package/base/patternfly-shield-inheritable.scss +0 -4
  338. package/base/patternfly-shield-noninheritable.css +0 -9
  339. package/base/patternfly-shield-noninheritable.scss +0 -4
  340. package/sass-utilities/bs-variables.scss +0 -709
package/docs/components/TextInputGroup/examples/TextInputGroup.md CHANGED
@@ -1,6 +1,5 @@
1
1
  ---
2
2
  id: 'Text input group'
3
- beta: true
4
3
  section: components
5
4
  cssPrefix: pf-c-text-input-group
6
5
  ---import './TextInputGroup.css'
@@ -34,9 +33,9 @@ cssPrefix: pf-c-text-input-group
34
33
  <input
35
34
  class="pf-c-text-input-group__text-input"
36
35
  type="text"
37
- value="Disabled"
38
36
  disabled
39
- aria-label="Type to filter"
37
+ value="Disabled"
38
+ aria-label="Disabled text input group example input"
40
39
  />
41
40
  </span>
42
41
  </div>
@@ -56,9 +55,9 @@ cssPrefix: pf-c-text-input-group
56
55
  <input
57
56
  class="pf-c-text-input-group__text-input"
58
57
  type="text"
58
+ placeholder="placeholder"
59
59
  value
60
60
  aria-label="Type to filter"
61
- placeholder="placeholder"
62
61
  />
63
62
  </span>
64
63
  </div>
@@ -89,109 +88,135 @@ cssPrefix: pf-c-text-input-group
89
88
  >
90
89
  <li class="pf-c-chip-group__list-item">
91
90
  <div class="pf-c-chip">
92
- <span
93
- class="pf-c-chip__text"
94
- id="text-input-group-filters-chip-group-chip_one_select_collapsed"
95
- >Chip one</span>
96
- <button
97
- class="pf-c-button pf-m-plain"
98
- type="button"
99
- aria-labelledby="text-input-group-filters-chip-group-remove_chip_one_select_collapsed text-input-group-filters-chip-group-chip_one_select_collapsed"
100
- aria-label="Remove"
101
- id="text-input-group-filters-chip-group-remove_chip_one_select_collapsed"
102
- >
103
- <i class="fas fa-times" aria-hidden="true"></i>
104
- </button>
91
+ <span class="pf-c-chip__content">
92
+ <span
93
+ class="pf-c-chip__text"
94
+ id="text-input-group-filters-chip-group-chip_one_select_collapsed"
95
+ >Chip one</span>
96
+ </span>
97
+ <span class="pf-c-chip__actions">
98
+ <button
99
+ class="pf-c-button pf-m-plain"
100
+ type="button"
101
+ aria-labelledby="text-input-group-filters-chip-group-remove_chip_one_select_collapsed text-input-group-filters-chip-group-chip_one_select_collapsed"
102
+ aria-label="Remove"
103
+ id="text-input-group-filters-chip-group-remove_chip_one_select_collapsed"
104
+ >
105
+ <i class="fas fa-times" aria-hidden="true"></i>
106
+ </button>
107
+ </span>
105
108
  </div>
106
109
  </li>
107
110
  <li class="pf-c-chip-group__list-item">
108
111
  <div class="pf-c-chip">
109
- <span
110
- class="pf-c-chip__text"
111
- id="text-input-group-filters-chip-group-chip_two_select_collapsed"
112
- >Chip two</span>
113
- <button
114
- class="pf-c-button pf-m-plain"
115
- type="button"
116
- aria-labelledby="text-input-group-filters-chip-group-remove_chip_two_select_collapsed text-input-group-filters-chip-group-chip_two_select_collapsed"
117
- aria-label="Remove"
118
- id="text-input-group-filters-chip-group-remove_chip_two_select_collapsed"
119
- >
120
- <i class="fas fa-times" aria-hidden="true"></i>
121
- </button>
112
+ <span class="pf-c-chip__content">
113
+ <span
114
+ class="pf-c-chip__text"
115
+ id="text-input-group-filters-chip-group-chip_two_select_collapsed"
116
+ >Chip two</span>
117
+ </span>
118
+ <span class="pf-c-chip__actions">
119
+ <button
120
+ class="pf-c-button pf-m-plain"
121
+ type="button"
122
+ aria-labelledby="text-input-group-filters-chip-group-remove_chip_two_select_collapsed text-input-group-filters-chip-group-chip_two_select_collapsed"
123
+ aria-label="Remove"
124
+ id="text-input-group-filters-chip-group-remove_chip_two_select_collapsed"
125
+ >
126
+ <i class="fas fa-times" aria-hidden="true"></i>
127
+ </button>
128
+ </span>
122
129
  </div>
123
130
  </li>
124
131
  <li class="pf-c-chip-group__list-item">
125
132
  <div class="pf-c-chip">
126
- <span
127
- class="pf-c-chip__text"
128
- id="text-input-group-filters-chip-group-chip_three_select_collapsed"
129
- >Chip three</span>
130
- <button
131
- class="pf-c-button pf-m-plain"
132
- type="button"
133
- aria-labelledby="text-input-group-filters-chip-group-remove_chip_three_select_collapsed text-input-group-filters-chip-group-chip_three_select_collapsed"
134
- aria-label="Remove"
135
- id="text-input-group-filters-chip-group-remove_chip_three_select_collapsed"
136
- >
137
- <i class="fas fa-times" aria-hidden="true"></i>
138
- </button>
133
+ <span class="pf-c-chip__content">
134
+ <span
135
+ class="pf-c-chip__text"
136
+ id="text-input-group-filters-chip-group-chip_three_select_collapsed"
137
+ >Chip three</span>
138
+ </span>
139
+ <span class="pf-c-chip__actions">
140
+ <button
141
+ class="pf-c-button pf-m-plain"
142
+ type="button"
143
+ aria-labelledby="text-input-group-filters-chip-group-remove_chip_three_select_collapsed text-input-group-filters-chip-group-chip_three_select_collapsed"
144
+ aria-label="Remove"
145
+ id="text-input-group-filters-chip-group-remove_chip_three_select_collapsed"
146
+ >
147
+ <i class="fas fa-times" aria-hidden="true"></i>
148
+ </button>
149
+ </span>
139
150
  </div>
140
151
  </li>
141
152
  <li class="pf-c-chip-group__list-item">
142
153
  <div class="pf-c-chip">
143
- <span
144
- class="pf-c-chip__text"
145
- id="text-input-group-filters-chip-group-chip_four_select_collapsed"
146
- >Chip four</span>
147
- <button
148
- class="pf-c-button pf-m-plain"
149
- type="button"
150
- aria-labelledby="text-input-group-filters-chip-group-remove_chip_four_select_collapsed text-input-group-filters-chip-group-chip_four_select_collapsed"
151
- aria-label="Remove"
152
- id="text-input-group-filters-chip-group-remove_chip_four_select_collapsed"
153
- >
154
- <i class="fas fa-times" aria-hidden="true"></i>
155
- </button>
154
+ <span class="pf-c-chip__content">
155
+ <span
156
+ class="pf-c-chip__text"
157
+ id="text-input-group-filters-chip-group-chip_four_select_collapsed"
158
+ >Chip four</span>
159
+ </span>
160
+ <span class="pf-c-chip__actions">
161
+ <button
162
+ class="pf-c-button pf-m-plain"
163
+ type="button"
164
+ aria-labelledby="text-input-group-filters-chip-group-remove_chip_four_select_collapsed text-input-group-filters-chip-group-chip_four_select_collapsed"
165
+ aria-label="Remove"
166
+ id="text-input-group-filters-chip-group-remove_chip_four_select_collapsed"
167
+ >
168
+ <i class="fas fa-times" aria-hidden="true"></i>
169
+ </button>
170
+ </span>
156
171
  </div>
157
172
  </li>
158
173
  <li class="pf-c-chip-group__list-item">
159
174
  <div class="pf-c-chip">
160
- <span
161
- class="pf-c-chip__text"
162
- id="text-input-group-filters-chip-group-chip_five_select_collapsed"
163
- >Chip five</span>
164
- <button
165
- class="pf-c-button pf-m-plain"
166
- type="button"
167
- aria-labelledby="text-input-group-filters-chip-group-remove_chip_five_select_collapsed text-input-group-filters-chip-group-chip_five_select_collapsed"
168
- aria-label="Remove"
169
- id="text-input-group-filters-chip-group-remove_chip_five_select_collapsed"
170
- >
171
- <i class="fas fa-times" aria-hidden="true"></i>
172
- </button>
175
+ <span class="pf-c-chip__content">
176
+ <span
177
+ class="pf-c-chip__text"
178
+ id="text-input-group-filters-chip-group-chip_five_select_collapsed"
179
+ >Chip five</span>
180
+ </span>
181
+ <span class="pf-c-chip__actions">
182
+ <button
183
+ class="pf-c-button pf-m-plain"
184
+ type="button"
185
+ aria-labelledby="text-input-group-filters-chip-group-remove_chip_five_select_collapsed text-input-group-filters-chip-group-chip_five_select_collapsed"
186
+ aria-label="Remove"
187
+ id="text-input-group-filters-chip-group-remove_chip_five_select_collapsed"
188
+ >
189
+ <i class="fas fa-times" aria-hidden="true"></i>
190
+ </button>
191
+ </span>
173
192
  </div>
174
193
  </li>
175
194
  <li class="pf-c-chip-group__list-item">
176
195
  <div class="pf-c-chip">
177
- <span
178
- class="pf-c-chip__text"
179
- id="text-input-group-filters-chip-group-chip_six_select_collapsed"
180
- >Chip six</span>
181
- <button
182
- class="pf-c-button pf-m-plain"
183
- type="button"
184
- aria-labelledby="text-input-group-filters-chip-group-remove_chip_six_select_collapsed text-input-group-filters-chip-group-chip_six_select_collapsed"
185
- aria-label="Remove"
186
- id="text-input-group-filters-chip-group-remove_chip_six_select_collapsed"
187
- >
188
- <i class="fas fa-times" aria-hidden="true"></i>
189
- </button>
196
+ <span class="pf-c-chip__content">
197
+ <span
198
+ class="pf-c-chip__text"
199
+ id="text-input-group-filters-chip-group-chip_six_select_collapsed"
200
+ >Chip six</span>
201
+ </span>
202
+ <span class="pf-c-chip__actions">
203
+ <button
204
+ class="pf-c-button pf-m-plain"
205
+ type="button"
206
+ aria-labelledby="text-input-group-filters-chip-group-remove_chip_six_select_collapsed text-input-group-filters-chip-group-chip_six_select_collapsed"
207
+ aria-label="Remove"
208
+ id="text-input-group-filters-chip-group-remove_chip_six_select_collapsed"
209
+ >
210
+ <i class="fas fa-times" aria-hidden="true"></i>
211
+ </button>
212
+ </span>
190
213
  </div>
191
214
  </li>
192
215
  <li class="pf-c-chip-group__list-item">
193
216
  <button class="pf-c-chip pf-m-overflow">
194
- <span class="pf-c-chip__text">8 more</span>
217
+ <span class="pf-c-chip__content">
218
+ <span class="pf-c-chip__text">8 more</span>
219
+ </span>
195
220
  </button>
196
221
  </li>
197
222
  </ul>
@@ -233,240 +258,296 @@ cssPrefix: pf-c-text-input-group
233
258
  >
234
259
  <li class="pf-c-chip-group__list-item">
235
260
  <div class="pf-c-chip">
236
- <span
237
- class="pf-c-chip__text"
238
- id="text-input-group-filters-expanded-chip-group-chip_one_select_collapsed"
239
- >Chip one</span>
240
- <button
241
- class="pf-c-button pf-m-plain"
242
- type="button"
243
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_one_select_collapsed text-input-group-filters-expanded-chip-group-chip_one_select_collapsed"
244
- aria-label="Remove"
245
- id="text-input-group-filters-expanded-chip-group-remove_chip_one_select_collapsed"
246
- >
247
- <i class="fas fa-times" aria-hidden="true"></i>
248
- </button>
261
+ <span class="pf-c-chip__content">
262
+ <span
263
+ class="pf-c-chip__text"
264
+ id="text-input-group-filters-expanded-chip-group-chip_one_select_collapsed"
265
+ >Chip one</span>
266
+ </span>
267
+ <span class="pf-c-chip__actions">
268
+ <button
269
+ class="pf-c-button pf-m-plain"
270
+ type="button"
271
+ aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_one_select_collapsed text-input-group-filters-expanded-chip-group-chip_one_select_collapsed"
272
+ aria-label="Remove"
273
+ id="text-input-group-filters-expanded-chip-group-remove_chip_one_select_collapsed"
274
+ >
275
+ <i class="fas fa-times" aria-hidden="true"></i>
276
+ </button>
277
+ </span>
249
278
  </div>
250
279
  </li>
251
280
  <li class="pf-c-chip-group__list-item">
252
281
  <div class="pf-c-chip">
253
- <span
254
- class="pf-c-chip__text"
255
- id="text-input-group-filters-expanded-chip-group-chip_two_select_collapsed"
256
- >Chip two</span>
257
- <button
258
- class="pf-c-button pf-m-plain"
259
- type="button"
260
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_two_select_collapsed text-input-group-filters-expanded-chip-group-chip_two_select_collapsed"
261
- aria-label="Remove"
262
- id="text-input-group-filters-expanded-chip-group-remove_chip_two_select_collapsed"
263
- >
264
- <i class="fas fa-times" aria-hidden="true"></i>
265
- </button>
282
+ <span class="pf-c-chip__content">
283
+ <span
284
+ class="pf-c-chip__text"
285
+ id="text-input-group-filters-expanded-chip-group-chip_two_select_collapsed"
286
+ >Chip two</span>
287
+ </span>
288
+ <span class="pf-c-chip__actions">
289
+ <button
290
+ class="pf-c-button pf-m-plain"
291
+ type="button"
292
+ aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_two_select_collapsed text-input-group-filters-expanded-chip-group-chip_two_select_collapsed"
293
+ aria-label="Remove"
294
+ id="text-input-group-filters-expanded-chip-group-remove_chip_two_select_collapsed"
295
+ >
296
+ <i class="fas fa-times" aria-hidden="true"></i>
297
+ </button>
298
+ </span>
266
299
  </div>
267
300
  </li>
268
301
  <li class="pf-c-chip-group__list-item">
269
302
  <div class="pf-c-chip">
270
- <span
271
- class="pf-c-chip__text"
272
- id="text-input-group-filters-expanded-chip-group-chip_three_select_collapsed"
273
- >Chip three</span>
274
- <button
275
- class="pf-c-button pf-m-plain"
276
- type="button"
277
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_three_select_collapsed text-input-group-filters-expanded-chip-group-chip_three_select_collapsed"
278
- aria-label="Remove"
279
- id="text-input-group-filters-expanded-chip-group-remove_chip_three_select_collapsed"
280
- >
281
- <i class="fas fa-times" aria-hidden="true"></i>
282
- </button>
303
+ <span class="pf-c-chip__content">
304
+ <span
305
+ class="pf-c-chip__text"
306
+ id="text-input-group-filters-expanded-chip-group-chip_three_select_collapsed"
307
+ >Chip three</span>
308
+ </span>
309
+ <span class="pf-c-chip__actions">
310
+ <button
311
+ class="pf-c-button pf-m-plain"
312
+ type="button"
313
+ aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_three_select_collapsed text-input-group-filters-expanded-chip-group-chip_three_select_collapsed"
314
+ aria-label="Remove"
315
+ id="text-input-group-filters-expanded-chip-group-remove_chip_three_select_collapsed"
316
+ >
317
+ <i class="fas fa-times" aria-hidden="true"></i>
318
+ </button>
319
+ </span>
283
320
  </div>
284
321
  </li>
285
322
  <li class="pf-c-chip-group__list-item">
286
323
  <div class="pf-c-chip">
287
- <span
288
- class="pf-c-chip__text"
289
- id="text-input-group-filters-expanded-chip-group-chip_four_select_collapsed"
290
- >Chip four</span>
291
- <button
292
- class="pf-c-button pf-m-plain"
293
- type="button"
294
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_four_select_collapsed text-input-group-filters-expanded-chip-group-chip_four_select_collapsed"
295
- aria-label="Remove"
296
- id="text-input-group-filters-expanded-chip-group-remove_chip_four_select_collapsed"
297
- >
298
- <i class="fas fa-times" aria-hidden="true"></i>
299
- </button>
324
+ <span class="pf-c-chip__content">
325
+ <span
326
+ class="pf-c-chip__text"
327
+ id="text-input-group-filters-expanded-chip-group-chip_four_select_collapsed"
328
+ >Chip four</span>
329
+ </span>
330
+ <span class="pf-c-chip__actions">
331
+ <button
332
+ class="pf-c-button pf-m-plain"
333
+ type="button"
334
+ aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_four_select_collapsed text-input-group-filters-expanded-chip-group-chip_four_select_collapsed"
335
+ aria-label="Remove"
336
+ id="text-input-group-filters-expanded-chip-group-remove_chip_four_select_collapsed"
337
+ >
338
+ <i class="fas fa-times" aria-hidden="true"></i>
339
+ </button>
340
+ </span>
300
341
  </div>
301
342
  </li>
302
343
  <li class="pf-c-chip-group__list-item">
303
344
  <div class="pf-c-chip">
304
- <span
305
- class="pf-c-chip__text"
306
- id="text-input-group-filters-expanded-chip-group-chip_five_select_collapsed"
307
- >Chip five</span>
308
- <button
309
- class="pf-c-button pf-m-plain"
310
- type="button"
311
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_five_select_collapsed text-input-group-filters-expanded-chip-group-chip_five_select_collapsed"
312
- aria-label="Remove"
313
- id="text-input-group-filters-expanded-chip-group-remove_chip_five_select_collapsed"
314
- >
315
- <i class="fas fa-times" aria-hidden="true"></i>
316
- </button>
345
+ <span class="pf-c-chip__content">
346
+ <span
347
+ class="pf-c-chip__text"
348
+ id="text-input-group-filters-expanded-chip-group-chip_five_select_collapsed"
349
+ >Chip five</span>
350
+ </span>
351
+ <span class="pf-c-chip__actions">
352
+ <button
353
+ class="pf-c-button pf-m-plain"
354
+ type="button"
355
+ aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_five_select_collapsed text-input-group-filters-expanded-chip-group-chip_five_select_collapsed"
356
+ aria-label="Remove"
357
+ id="text-input-group-filters-expanded-chip-group-remove_chip_five_select_collapsed"
358
+ >
359
+ <i class="fas fa-times" aria-hidden="true"></i>
360
+ </button>
361
+ </span>
317
362
  </div>
318
363
  </li>
319
364
  <li class="pf-c-chip-group__list-item">
320
365
  <div class="pf-c-chip">
321
- <span
322
- class="pf-c-chip__text"
323
- id="text-input-group-filters-expanded-chip-group-chip_six_select_collapsed"
324
- >Chip six</span>
325
- <button
326
- class="pf-c-button pf-m-plain"
327
- type="button"
328
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_six_select_collapsed text-input-group-filters-expanded-chip-group-chip_six_select_collapsed"
329
- aria-label="Remove"
330
- id="text-input-group-filters-expanded-chip-group-remove_chip_six_select_collapsed"
331
- >
332
- <i class="fas fa-times" aria-hidden="true"></i>
333
- </button>
366
+ <span class="pf-c-chip__content">
367
+ <span
368
+ class="pf-c-chip__text"
369
+ id="text-input-group-filters-expanded-chip-group-chip_six_select_collapsed"
370
+ >Chip six</span>
371
+ </span>
372
+ <span class="pf-c-chip__actions">
373
+ <button
374
+ class="pf-c-button pf-m-plain"
375
+ type="button"
376
+ aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_six_select_collapsed text-input-group-filters-expanded-chip-group-chip_six_select_collapsed"
377
+ aria-label="Remove"
378
+ id="text-input-group-filters-expanded-chip-group-remove_chip_six_select_collapsed"
379
+ >
380
+ <i class="fas fa-times" aria-hidden="true"></i>
381
+ </button>
382
+ </span>
334
383
  </div>
335
384
  </li>
336
385
  <li class="pf-c-chip-group__list-item">
337
386
  <div class="pf-c-chip">
338
- <span
339
- class="pf-c-chip__text"
340
- id="text-input-group-filters-expanded-chip-group-chip_seven_select_collapsed"
341
- >Chip seven</span>
342
- <button
343
- class="pf-c-button pf-m-plain"
344
- type="button"
345
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_seven_select_collapsed text-input-group-filters-expanded-chip-group-chip_seven_select_collapsed"
346
- aria-label="Remove"
347
- id="text-input-group-filters-expanded-chip-group-remove_chip_seven_select_collapsed"
348
- >
349
- <i class="fas fa-times" aria-hidden="true"></i>
350
- </button>
387
+ <span class="pf-c-chip__content">
388
+ <span
389
+ class="pf-c-chip__text"
390
+ id="text-input-group-filters-expanded-chip-group-chip_seven_select_collapsed"
391
+ >Chip seven</span>
392
+ </span>
393
+ <span class="pf-c-chip__actions">
394
+ <button
395
+ class="pf-c-button pf-m-plain"
396
+ type="button"
397
+ aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_seven_select_collapsed text-input-group-filters-expanded-chip-group-chip_seven_select_collapsed"
398
+ aria-label="Remove"
399
+ id="text-input-group-filters-expanded-chip-group-remove_chip_seven_select_collapsed"
400
+ >
401
+ <i class="fas fa-times" aria-hidden="true"></i>
402
+ </button>
403
+ </span>
351
404
  </div>
352
405
  </li>
353
406
  <li class="pf-c-chip-group__list-item">
354
407
  <div class="pf-c-chip">
355
- <span
356
- class="pf-c-chip__text"
357
- id="text-input-group-filters-expanded-chip-group-chip_eight_select_collapsed"
358
- >Chip eight</span>
359
- <button
360
- class="pf-c-button pf-m-plain"
361
- type="button"
362
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_eight_select_collapsed text-input-group-filters-expanded-chip-group-chip_eight_select_collapsed"
363
- aria-label="Remove"
364
- id="text-input-group-filters-expanded-chip-group-remove_chip_eight_select_collapsed"
365
- >
366
- <i class="fas fa-times" aria-hidden="true"></i>
367
- </button>
408
+ <span class="pf-c-chip__content">
409
+ <span
410
+ class="pf-c-chip__text"
411
+ id="text-input-group-filters-expanded-chip-group-chip_eight_select_collapsed"
412
+ >Chip eight</span>
413
+ </span>
414
+ <span class="pf-c-chip__actions">
415
+ <button
416
+ class="pf-c-button pf-m-plain"
417
+ type="button"
418
+ aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_eight_select_collapsed text-input-group-filters-expanded-chip-group-chip_eight_select_collapsed"
419
+ aria-label="Remove"
420
+ id="text-input-group-filters-expanded-chip-group-remove_chip_eight_select_collapsed"
421
+ >
422
+ <i class="fas fa-times" aria-hidden="true"></i>
423
+ </button>
424
+ </span>
368
425
  </div>
369
426
  </li>
370
427
  <li class="pf-c-chip-group__list-item">
371
428
  <div class="pf-c-chip">
372
- <span
373
- class="pf-c-chip__text"
374
- id="text-input-group-filters-expanded-chip-group-chip_nine_select_collapsed"
375
- >Chip nine</span>
376
- <button
377
- class="pf-c-button pf-m-plain"
378
- type="button"
379
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_nine_select_collapsed text-input-group-filters-expanded-chip-group-chip_nine_select_collapsed"
380
- aria-label="Remove"
381
- id="text-input-group-filters-expanded-chip-group-remove_chip_nine_select_collapsed"
382
- >
383
- <i class="fas fa-times" aria-hidden="true"></i>
384
- </button>
429
+ <span class="pf-c-chip__content">
430
+ <span
431
+ class="pf-c-chip__text"
432
+ id="text-input-group-filters-expanded-chip-group-chip_nine_select_collapsed"
433
+ >Chip nine</span>
434
+ </span>
435
+ <span class="pf-c-chip__actions">
436
+ <button
437
+ class="pf-c-button pf-m-plain"
438
+ type="button"
439
+ aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_nine_select_collapsed text-input-group-filters-expanded-chip-group-chip_nine_select_collapsed"
440
+ aria-label="Remove"
441
+ id="text-input-group-filters-expanded-chip-group-remove_chip_nine_select_collapsed"
442
+ >
443
+ <i class="fas fa-times" aria-hidden="true"></i>
444
+ </button>
445
+ </span>
385
446
  </div>
386
447
  </li>
387
448
  <li class="pf-c-chip-group__list-item">
388
449
  <div class="pf-c-chip">
389
- <span
390
- class="pf-c-chip__text"
391
- id="text-input-group-filters-expanded-chip-group-chip_ten_select_collapsed"
392
- >Chip ten</span>
393
- <button
394
- class="pf-c-button pf-m-plain"
395
- type="button"
396
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_ten_select_collapsed text-input-group-filters-expanded-chip-group-chip_ten_select_collapsed"
397
- aria-label="Remove"
398
- id="text-input-group-filters-expanded-chip-group-remove_chip_ten_select_collapsed"
399
- >
400
- <i class="fas fa-times" aria-hidden="true"></i>
401
- </button>
450
+ <span class="pf-c-chip__content">
451
+ <span
452
+ class="pf-c-chip__text"
453
+ id="text-input-group-filters-expanded-chip-group-chip_ten_select_collapsed"
454
+ >Chip ten</span>
455
+ </span>
456
+ <span class="pf-c-chip__actions">
457
+ <button
458
+ class="pf-c-button pf-m-plain"
459
+ type="button"
460
+ aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_ten_select_collapsed text-input-group-filters-expanded-chip-group-chip_ten_select_collapsed"
461
+ aria-label="Remove"
462
+ id="text-input-group-filters-expanded-chip-group-remove_chip_ten_select_collapsed"
463
+ >
464
+ <i class="fas fa-times" aria-hidden="true"></i>
465
+ </button>
466
+ </span>
402
467
  </div>
403
468
  </li>
404
469
  <li class="pf-c-chip-group__list-item">
405
470
  <div class="pf-c-chip">
406
- <span
407
- class="pf-c-chip__text"
408
- id="text-input-group-filters-expanded-chip-group-chip_eleven_select_collapsed"
409
- >Chip eleven</span>
410
- <button
411
- class="pf-c-button pf-m-plain"
412
- type="button"
413
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_eleven_select_collapsed text-input-group-filters-expanded-chip-group-chip_eleven_select_collapsed"
414
- aria-label="Remove"
415
- id="text-input-group-filters-expanded-chip-group-remove_chip_eleven_select_collapsed"
416
- >
417
- <i class="fas fa-times" aria-hidden="true"></i>
418
- </button>
471
+ <span class="pf-c-chip__content">
472
+ <span
473
+ class="pf-c-chip__text"
474
+ id="text-input-group-filters-expanded-chip-group-chip_eleven_select_collapsed"
475
+ >Chip eleven</span>
476
+ </span>
477
+ <span class="pf-c-chip__actions">
478
+ <button
479
+ class="pf-c-button pf-m-plain"
480
+ type="button"
481
+ aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_eleven_select_collapsed text-input-group-filters-expanded-chip-group-chip_eleven_select_collapsed"
482
+ aria-label="Remove"
483
+ id="text-input-group-filters-expanded-chip-group-remove_chip_eleven_select_collapsed"
484
+ >
485
+ <i class="fas fa-times" aria-hidden="true"></i>
486
+ </button>
487
+ </span>
419
488
  </div>
420
489
  </li>
421
490
  <li class="pf-c-chip-group__list-item">
422
491
  <div class="pf-c-chip">
423
- <span
424
- class="pf-c-chip__text"
425
- id="text-input-group-filters-expanded-chip-group-chip_twelve_select_collapsed"
426
- >Chip twelve</span>
427
- <button
428
- class="pf-c-button pf-m-plain"
429
- type="button"
430
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_twelve_select_collapsed text-input-group-filters-expanded-chip-group-chip_twelve_select_collapsed"
431
- aria-label="Remove"
432
- id="text-input-group-filters-expanded-chip-group-remove_chip_twelve_select_collapsed"
433
- >
434
- <i class="fas fa-times" aria-hidden="true"></i>
435
- </button>
492
+ <span class="pf-c-chip__content">
493
+ <span
494
+ class="pf-c-chip__text"
495
+ id="text-input-group-filters-expanded-chip-group-chip_twelve_select_collapsed"
496
+ >Chip twelve</span>
497
+ </span>
498
+ <span class="pf-c-chip__actions">
499
+ <button
500
+ class="pf-c-button pf-m-plain"
501
+ type="button"
502
+ aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_twelve_select_collapsed text-input-group-filters-expanded-chip-group-chip_twelve_select_collapsed"
503
+ aria-label="Remove"
504
+ id="text-input-group-filters-expanded-chip-group-remove_chip_twelve_select_collapsed"
505
+ >
506
+ <i class="fas fa-times" aria-hidden="true"></i>
507
+ </button>
508
+ </span>
436
509
  </div>
437
510
  </li>
438
511
  <li class="pf-c-chip-group__list-item">
439
512
  <div class="pf-c-chip">
440
- <span
441
- class="pf-c-chip__text"
442
- id="text-input-group-filters-expanded-chip-group-chip_thirteen_select_collapsed"
443
- >Chip thirteen</span>
444
- <button
445
- class="pf-c-button pf-m-plain"
446
- type="button"
447
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_thirteen_select_collapsed text-input-group-filters-expanded-chip-group-chip_thirteen_select_collapsed"
448
- aria-label="Remove"
449
- id="text-input-group-filters-expanded-chip-group-remove_chip_thirteen_select_collapsed"
450
- >
451
- <i class="fas fa-times" aria-hidden="true"></i>
452
- </button>
513
+ <span class="pf-c-chip__content">
514
+ <span
515
+ class="pf-c-chip__text"
516
+ id="text-input-group-filters-expanded-chip-group-chip_thirteen_select_collapsed"
517
+ >Chip thirteen</span>
518
+ </span>
519
+ <span class="pf-c-chip__actions">
520
+ <button
521
+ class="pf-c-button pf-m-plain"
522
+ type="button"
523
+ aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_thirteen_select_collapsed text-input-group-filters-expanded-chip-group-chip_thirteen_select_collapsed"
524
+ aria-label="Remove"
525
+ id="text-input-group-filters-expanded-chip-group-remove_chip_thirteen_select_collapsed"
526
+ >
527
+ <i class="fas fa-times" aria-hidden="true"></i>
528
+ </button>
529
+ </span>
453
530
  </div>
454
531
  </li>
455
532
  <li class="pf-c-chip-group__list-item">
456
533
  <div class="pf-c-chip">
457
- <span
458
- class="pf-c-chip__text"
459
- id="text-input-group-filters-expanded-chip-group-chip_fourteen_select_collapsed"
460
- >Chip fourteen</span>
461
- <button
462
- class="pf-c-button pf-m-plain"
463
- type="button"
464
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_fourteen_select_collapsed text-input-group-filters-expanded-chip-group-chip_fourteen_select_collapsed"
465
- aria-label="Remove"
466
- id="text-input-group-filters-expanded-chip-group-remove_chip_fourteen_select_collapsed"
467
- >
468
- <i class="fas fa-times" aria-hidden="true"></i>
469
- </button>
534
+ <span class="pf-c-chip__content">
535
+ <span
536
+ class="pf-c-chip__text"
537
+ id="text-input-group-filters-expanded-chip-group-chip_fourteen_select_collapsed"
538
+ >Chip fourteen</span>
539
+ </span>
540
+ <span class="pf-c-chip__actions">
541
+ <button
542
+ class="pf-c-button pf-m-plain"
543
+ type="button"
544
+ aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_fourteen_select_collapsed text-input-group-filters-expanded-chip-group-chip_fourteen_select_collapsed"
545
+ aria-label="Remove"
546
+ id="text-input-group-filters-expanded-chip-group-remove_chip_fourteen_select_collapsed"
547
+ >
548
+ <i class="fas fa-times" aria-hidden="true"></i>
549
+ </button>
550
+ </span>
470
551
  </div>
471
552
  </li>
472
553
  </ul>
@@ -530,9 +611,9 @@ cssPrefix: pf-c-text-input-group
530
611
  </span>
531
612
  <input
532
613
  class="pf-c-text-input-group__text-input"
533
- type="text"
534
- value
614
+ type="search"
535
615
  placeholder="Find by name"
616
+ value
536
617
  aria-label="Type to filter"
537
618
  />
538
619
  </span>
@@ -552,9 +633,9 @@ cssPrefix: pf-c-text-input-group
552
633
  </span>
553
634
  <input
554
635
  class="pf-c-text-input-group__text-input"
555
- type="text"
556
- value="Joh"
636
+ type="search"
557
637
  placeholder="Find by name"
638
+ value="Joh"
558
639
  aria-label="Type to filter"
559
640
  />
560
641
  </span>
@@ -583,9 +664,9 @@ cssPrefix: pf-c-text-input-group
583
664
  </span>
584
665
  <input
585
666
  class="pf-c-text-input-group__text-input"
586
- type="text"
587
- value="John Doe"
667
+ type="search"
588
668
  placeholder="Find by name"
669
+ value="John Doe"
589
670
  aria-label="Type to filter"
590
671
  />
591
672
  </span>
@@ -615,9 +696,9 @@ cssPrefix: pf-c-text-input-group
615
696
  </span>
616
697
  <input
617
698
  class="pf-c-text-input-group__text-input"
618
- type="text"
619
- value="John Doe"
699
+ type="search"
620
700
  placeholder="Find by name"
701
+ value="John Doe"
621
702
  aria-label="Type to filter"
622
703
  />
623
704
  </span>
@@ -642,34 +723,44 @@ cssPrefix: pf-c-text-input-group
642
723
  <h3>Collapsed</h3>
643
724
  <br />
644
725
  <div class="pf-c-input-group pf-m-plain">
645
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Open search">
646
- <i class="fas fa-fw fa-search" aria-hidden="true"></i>
647
- </button>
726
+ <div class="pf-c-input-group__item pf-m-plain">
727
+ <button
728
+ class="pf-c-button pf-m-plain"
729
+ type="button"
730
+ aria-label="Open search"
731
+ >
732
+ <i class="fas fa-fw fa-search" aria-hidden="true"></i>
733
+ </button>
734
+ </div>
648
735
  </div>
649
736
  <br />
650
737
  <br />
651
738
  <h3>Expanded</h3>
652
739
  <br />
653
740
  <div class="pf-c-input-group pf-m-plain">
654
- <div class="pf-c-text-input-group">
655
- <div class="pf-c-text-input-group__main pf-m-icon">
656
- <span class="pf-c-text-input-group__text">
657
- <span class="pf-c-text-input-group__icon">
658
- <i class="fas fa-fw fa-search"></i>
741
+ <div class="pf-c-input-group__item pf-m-fill">
742
+ <div class="pf-c-text-input-group">
743
+ <div class="pf-c-text-input-group__main pf-m-icon">
744
+ <span class="pf-c-text-input-group__text">
745
+ <span class="pf-c-text-input-group__icon">
746
+ <i class="fas fa-fw fa-search"></i>
747
+ </span>
748
+ <input
749
+ class="pf-c-text-input-group__text-input"
750
+ type="search"
751
+ placeholder="Search"
752
+ value
753
+ aria-label="Type to filter"
754
+ />
659
755
  </span>
660
- <input
661
- class="pf-c-text-input-group__text-input"
662
- type="text"
663
- value
664
- placeholder="Search"
665
- aria-label="Type to filter"
666
- />
667
- </span>
756
+ </div>
668
757
  </div>
669
758
  </div>
670
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
671
- <i class="fas fa-times" aria-hidden="true"></i>
672
- </button>
759
+ <div class="pf-c-input-group__item pf-m-plain">
760
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
761
+ <i class="fas fa-times" aria-hidden="true"></i>
762
+ </button>
763
+ </div>
673
764
  </div>
674
765
 
675
766
  ```
@@ -678,25 +769,29 @@ cssPrefix: pf-c-text-input-group
678
769
 
679
770
  ```html
680
771
  <div class="pf-c-input-group">
681
- <div class="pf-c-text-input-group">
682
- <div class="pf-c-text-input-group__main pf-m-icon">
683
- <span class="pf-c-text-input-group__text">
684
- <span class="pf-c-text-input-group__icon">
685
- <i class="fas fa-fw fa-search"></i>
772
+ <div class="pf-c-input-group__item pf-m-fill">
773
+ <div class="pf-c-text-input-group">
774
+ <div class="pf-c-text-input-group__main pf-m-icon">
775
+ <span class="pf-c-text-input-group__text">
776
+ <span class="pf-c-text-input-group__icon">
777
+ <i class="fas fa-fw fa-search"></i>
778
+ </span>
779
+ <input
780
+ class="pf-c-text-input-group__text-input"
781
+ type="search"
782
+ placeholder="Find by name"
783
+ value
784
+ aria-label="Type to filter"
785
+ />
686
786
  </span>
687
- <input
688
- class="pf-c-text-input-group__text-input"
689
- type="text"
690
- value
691
- placeholder="Find by name"
692
- aria-label="Type to filter"
693
- />
694
- </span>
787
+ </div>
695
788
  </div>
696
789
  </div>
697
- <button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
698
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
699
- </button>
790
+ <div class="pf-c-input-group__item">
791
+ <button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
792
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
793
+ </button>
794
+ </div>
700
795
  </div>
701
796
 
702
797
  ```
@@ -705,41 +800,47 @@ cssPrefix: pf-c-text-input-group
705
800
 
706
801
  ```html
707
802
  <div class="pf-c-input-group">
708
- <div class="pf-c-text-input-group">
709
- <div class="pf-c-text-input-group__main pf-m-icon">
710
- <span class="pf-c-text-input-group__text">
711
- <span class="pf-c-text-input-group__icon">
712
- <i class="fas fa-fw fa-search"></i>
803
+ <div class="pf-c-input-group__item pf-m-fill">
804
+ <div class="pf-c-text-input-group">
805
+ <div class="pf-c-text-input-group__main pf-m-icon">
806
+ <span class="pf-c-text-input-group__text">
807
+ <span class="pf-c-text-input-group__icon">
808
+ <i class="fas fa-fw fa-search"></i>
809
+ </span>
810
+ <input
811
+ class="pf-c-text-input-group__text-input"
812
+ type="search"
813
+ value="username:root firstname:ned"
814
+ aria-label="Type to filter"
815
+ />
713
816
  </span>
714
- <input
715
- class="pf-c-text-input-group__text-input"
716
- type="text"
717
- value="username:root firstname:ned"
718
- aria-label="Type to filter"
719
- />
720
- </span>
721
- </div>
722
- <div class="pf-c-text-input-group__utilities">
723
- <button
724
- class="pf-c-button pf-m-plain"
725
- type="button"
726
- aria-label="Clear input"
727
- >
728
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
729
- </button>
817
+ </div>
818
+ <div class="pf-c-text-input-group__utilities">
819
+ <button
820
+ class="pf-c-button pf-m-plain"
821
+ type="button"
822
+ aria-label="Clear input"
823
+ >
824
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
825
+ </button>
826
+ </div>
730
827
  </div>
731
828
  </div>
732
- <button
733
- class="pf-c-button pf-m-control"
734
- type="button"
735
- aria-expanded="false"
736
- aria-label="Advanced search"
737
- >
738
- <i class="fas fa-caret-down" aria-hidden="true"></i>
739
- </button>
740
- <button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
741
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
742
- </button>
829
+ <div class="pf-c-input-group__item">
830
+ <button
831
+ class="pf-c-button pf-m-control"
832
+ type="button"
833
+ aria-expanded="false"
834
+ aria-label="Advanced search"
835
+ >
836
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
837
+ </button>
838
+ </div>
839
+ <div class="pf-c-input-group__item">
840
+ <button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
841
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
842
+ </button>
843
+ </div>
743
844
  </div>
744
845
 
745
846
  ```
@@ -748,41 +849,47 @@ cssPrefix: pf-c-text-input-group
748
849
 
749
850
  ```html
750
851
  <div class="pf-c-input-group">
751
- <div class="pf-c-text-input-group">
752
- <div class="pf-c-text-input-group__main pf-m-icon">
753
- <span class="pf-c-text-input-group__text">
754
- <span class="pf-c-text-input-group__icon">
755
- <i class="fas fa-fw fa-search"></i>
852
+ <div class="pf-c-input-group__item pf-m-fill">
853
+ <div class="pf-c-text-input-group">
854
+ <div class="pf-c-text-input-group__main pf-m-icon">
855
+ <span class="pf-c-text-input-group__text">
856
+ <span class="pf-c-text-input-group__icon">
857
+ <i class="fas fa-fw fa-search"></i>
858
+ </span>
859
+ <input
860
+ class="pf-c-text-input-group__text-input"
861
+ type="search"
862
+ value="username:root firstname:ned"
863
+ aria-label="Type to filter"
864
+ />
756
865
  </span>
757
- <input
758
- class="pf-c-text-input-group__text-input"
759
- type="text"
760
- value="username:root firstname:ned"
761
- aria-label="Type to filter"
762
- />
763
- </span>
764
- </div>
765
- <div class="pf-c-text-input-group__utilities">
766
- <button
767
- class="pf-c-button pf-m-plain"
768
- type="button"
769
- aria-label="Clear input"
770
- >
771
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
772
- </button>
866
+ </div>
867
+ <div class="pf-c-text-input-group__utilities">
868
+ <button
869
+ class="pf-c-button pf-m-plain"
870
+ type="button"
871
+ aria-label="Clear input"
872
+ >
873
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
874
+ </button>
875
+ </div>
773
876
  </div>
774
877
  </div>
775
- <button
776
- class="pf-c-button pf-m-control pf-m-expanded"
777
- type="button"
778
- aria-expanded="true"
779
- aria-label="Advanced search"
780
- >
781
- <i class="fas fa-caret-down" aria-hidden="true"></i>
782
- </button>
783
- <button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
784
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
785
- </button>
878
+ <div class="pf-c-input-group__item">
879
+ <button
880
+ class="pf-c-button pf-m-control pf-m-expanded"
881
+ type="button"
882
+ aria-expanded="true"
883
+ aria-label="Advanced search"
884
+ >
885
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
886
+ </button>
887
+ </div>
888
+ <div class="pf-c-input-group__item">
889
+ <button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
890
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
891
+ </button>
892
+ </div>
786
893
  </div>
787
894
 
788
895
  <div class="pf-c-panel pf-m-raised">
@@ -879,7 +986,7 @@ cssPrefix: pf-c-text-input-group
879
986
  </span>
880
987
  <input
881
988
  class="pf-c-text-input-group__text-input"
882
- type="text"
989
+ type="search"
883
990
  value="app"
884
991
  aria-label="Type to filter"
885
992
  />
@@ -944,7 +1051,7 @@ cssPrefix: pf-c-text-input-group
944
1051
  </span>
945
1052
  <input
946
1053
  class="pf-c-text-input-group__text-input pf-m-hint"
947
- type="text"
1054
+ type="search"
948
1055
  value="appleseed"
949
1056
  disabled
950
1057
  aria-hidden="true"
@@ -983,41 +1090,51 @@ cssPrefix: pf-c-text-input-group
983
1090
  ```html
984
1091
  <div class="ws-example-wrapper">
985
1092
  <div class="pf-c-input-group">
986
- <div class="pf-c-text-input-group">
987
- <div class="pf-c-text-input-group__main pf-m-icon">
988
- <span class="pf-c-text-input-group__text">
989
- <span class="pf-c-text-input-group__icon">
990
- <i class="fas fa-fw fa-search"></i>
1093
+ <div class="pf-c-input-group__item pf-m-fill">
1094
+ <div class="pf-c-text-input-group">
1095
+ <div class="pf-c-text-input-group__main pf-m-icon">
1096
+ <span class="pf-c-text-input-group__text">
1097
+ <span class="pf-c-text-input-group__icon">
1098
+ <i class="fas fa-fw fa-search"></i>
1099
+ </span>
1100
+ <input
1101
+ class="pf-c-text-input-group__text-input"
1102
+ type="search"
1103
+ value="username:root firstname:n"
1104
+ aria-label="Type to filter"
1105
+ />
991
1106
  </span>
992
- <input
993
- class="pf-c-text-input-group__text-input"
994
- type="text"
995
- value="username:root firstname:n"
996
- aria-label="Type to filter"
997
- />
998
- </span>
999
- </div>
1000
- <div class="pf-c-text-input-group__utilities">
1001
- <button
1002
- class="pf-c-button pf-m-plain"
1003
- type="button"
1004
- aria-label="Clear input"
1005
- >
1006
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1007
- </button>
1107
+ </div>
1108
+ <div class="pf-c-text-input-group__utilities">
1109
+ <button
1110
+ class="pf-c-button pf-m-plain"
1111
+ type="button"
1112
+ aria-label="Clear input"
1113
+ >
1114
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1115
+ </button>
1116
+ </div>
1008
1117
  </div>
1009
1118
  </div>
1010
- <button
1011
- class="pf-c-button pf-m-control pf-m-expanded"
1012
- type="button"
1013
- aria-expanded="true"
1014
- aria-label="Advanced search"
1015
- >
1016
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1017
- </button>
1018
- <button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
1019
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
1020
- </button>
1119
+ <div class="pf-c-input-group__item">
1120
+ <button
1121
+ class="pf-c-button pf-m-control pf-m-expanded"
1122
+ type="button"
1123
+ aria-expanded="true"
1124
+ aria-label="Advanced search"
1125
+ >
1126
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1127
+ </button>
1128
+ </div>
1129
+ <div class="pf-c-input-group__item">
1130
+ <button
1131
+ class="pf-c-button pf-m-control"
1132
+ type="submit"
1133
+ aria-label="Search"
1134
+ >
1135
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
1136
+ </button>
1137
+ </div>
1021
1138
  </div>
1022
1139
 
1023
1140
  <div class="pf-c-panel pf-m-raised">