@patternfly/patternfly 5.0.0-alpha.3 → 5.0.0-alpha.30

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 (290) hide show
  1. package/RELEASE-NOTES.md +17 -0
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/pficon/pficon.scss +6 -0
  4. package/assets/pficon/pficon.woff +0 -0
  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/_fonts.scss +22 -22
  10. package/base/_globals.scss +1 -1
  11. package/base/_icons.scss +1 -28
  12. package/base/_svg-icons.scss +6 -0
  13. package/base/_variables.scss +1 -1
  14. package/base/patternfly-common.css +0 -10
  15. package/base/patternfly-fonts.css +17 -17
  16. package/base/patternfly-icons.css +6 -20
  17. package/base/patternfly-pf-icons.css +5 -1
  18. package/base/themes/dark/_globals.scss +1 -1
  19. package/base/themes/dark/_variables.scss +1 -1
  20. package/components/AboutModalBox/about-modal-box.css +7 -7
  21. package/components/AboutModalBox/about-modal-box.scss +7 -7
  22. package/components/Accordion/accordion.css +2 -0
  23. package/components/Accordion/accordion.scss +2 -0
  24. package/components/Alert/alert.css +3 -3
  25. package/components/Alert/alert.scss +3 -3
  26. package/components/AppLauncher/app-launcher.css +2 -0
  27. package/components/AppLauncher/app-launcher.scss +2 -0
  28. package/components/Avatar/avatar.scss +2 -2
  29. package/components/Banner/banner.css +14 -14
  30. package/components/Banner/banner.scss +9 -13
  31. package/components/Breadcrumb/breadcrumb.css +2 -0
  32. package/components/Breadcrumb/breadcrumb.scss +2 -0
  33. package/components/CalendarMonth/calendar-month.css +2 -2
  34. package/components/CalendarMonth/calendar-month.scss +3 -3
  35. package/components/Card/card.css +20 -21
  36. package/components/Card/card.scss +22 -26
  37. package/components/Chip/chip.css +33 -24
  38. package/components/Chip/chip.scss +40 -31
  39. package/components/ChipGroup/chip-group.css +27 -17
  40. package/components/ChipGroup/chip-group.scss +36 -22
  41. package/components/Content/content.css +11 -5
  42. package/components/Content/content.scss +17 -9
  43. package/components/ContextSelector/context-selector.css +5 -1
  44. package/components/ContextSelector/context-selector.scss +6 -2
  45. package/components/DataList/data-list-grid.css +7 -7
  46. package/components/DataList/data-list-grid.scss +1 -1
  47. package/components/DataList/data-list.css +12 -11
  48. package/components/DataList/data-list.scss +5 -4
  49. package/components/DescriptionList/description-list.css +7 -7
  50. package/components/DescriptionList/description-list.scss +7 -7
  51. package/components/Divider/divider.css +2 -2
  52. package/components/Divider/divider.scss +3 -3
  53. package/components/Drawer/drawer.css +15 -16
  54. package/components/Drawer/drawer.scss +2 -3
  55. package/components/Dropdown/dropdown.css +12 -10
  56. package/components/Dropdown/dropdown.scss +2 -0
  57. package/components/DualListSelector/dual-list-selector.css +1 -1
  58. package/components/DualListSelector/dual-list-selector.scss +1 -1
  59. package/components/EmptyState/empty-state.css +46 -52
  60. package/components/EmptyState/empty-state.scss +58 -57
  61. package/components/ExpandableSection/expandable-section.css +2 -0
  62. package/components/ExpandableSection/expandable-section.scss +2 -0
  63. package/components/Form/form.css +12 -12
  64. package/components/Form/form.scss +7 -7
  65. package/components/FormControl/form-control.css +2 -5
  66. package/components/FormControl/themes/dark/form-control.scss +2 -6
  67. package/components/Hint/hint.css +2 -2
  68. package/components/Hint/hint.scss +2 -2
  69. package/components/Label/label.css +43 -30
  70. package/components/Label/label.scss +49 -34
  71. package/components/LabelGroup/label-group.css +26 -22
  72. package/components/LabelGroup/label-group.scss +31 -26
  73. package/components/Login/login.css +11 -11
  74. package/components/Login/login.scss +10 -10
  75. package/components/Masthead/masthead.css +4 -4
  76. package/components/Masthead/masthead.scss +4 -4
  77. package/components/Menu/menu.css +9 -6
  78. package/components/Menu/menu.scss +34 -31
  79. package/components/MenuToggle/menu-toggle.css +3 -1
  80. package/components/MenuToggle/menu-toggle.scss +3 -1
  81. package/components/ModalBox/modal-box.css +9 -8
  82. package/components/ModalBox/modal-box.scss +11 -11
  83. package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
  84. package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
  85. package/components/Nav/nav.css +1 -1
  86. package/components/Nav/nav.scss +2 -2
  87. package/components/NotificationDrawer/notification-drawer.css +3 -3
  88. package/components/NotificationDrawer/notification-drawer.scss +3 -3
  89. package/components/Page/page.css +71 -71
  90. package/components/Page/page.scss +12 -12
  91. package/components/Pagination/pagination.css +2 -2
  92. package/components/Popover/popover.css +25 -31
  93. package/components/Popover/popover.scss +27 -32
  94. package/components/Popover/themes/dark/popover.scss +2 -8
  95. package/components/Progress/progress.css +13 -10
  96. package/components/Progress/progress.scss +13 -10
  97. package/components/ProgressStepper/progress-stepper.css +5 -5
  98. package/components/ProgressStepper/progress-stepper.scss +5 -5
  99. package/components/SearchInput/search-input.css +4 -2
  100. package/components/SearchInput/search-input.scss +4 -2
  101. package/components/Select/select.css +1 -1
  102. package/components/Select/select.scss +1 -1
  103. package/components/Sidebar/sidebar.css +69 -26
  104. package/components/Sidebar/sidebar.scss +84 -27
  105. package/components/SimpleList/simple-list.css +1 -1
  106. package/components/SimpleList/simple-list.scss +2 -2
  107. package/components/Spinner/spinner.css +4 -4
  108. package/components/Spinner/spinner.scss +4 -4
  109. package/components/Table/table-grid.css +28 -28
  110. package/components/Table/table-scrollable.css +31 -26
  111. package/components/Table/table-scrollable.scss +33 -28
  112. package/components/Table/table-tree-view.css +14 -4
  113. package/components/Table/table-tree-view.scss +15 -0
  114. package/components/Table/table.css +7 -2
  115. package/components/Table/table.scss +9 -2
  116. package/components/Tabs/tabs.css +0 -4
  117. package/components/Tabs/tabs.scss +0 -7
  118. package/components/TextInputGroup/text-input-group.css +6 -4
  119. package/components/TextInputGroup/text-input-group.scss +6 -5
  120. package/components/Tile/tile.css +1 -1
  121. package/components/Tile/tile.scss +1 -1
  122. package/components/Timestamp/timestamp.css +3 -3
  123. package/components/Timestamp/timestamp.scss +3 -3
  124. package/components/Toolbar/toolbar.css +67 -39
  125. package/components/Toolbar/toolbar.scss +39 -5
  126. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  127. package/components/Tooltip/tooltip.css +7 -12
  128. package/components/Tooltip/tooltip.scss +6 -3
  129. package/components/TreeView/tree-view.css +7 -15
  130. package/components/TreeView/tree-view.scss +7 -18
  131. package/components/Wizard/wizard.css +16 -1
  132. package/components/Wizard/wizard.scss +20 -2
  133. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -13
  134. package/docs/components/Accordion/examples/Accordion.md +12 -12
  135. package/docs/components/ActionList/examples/ActionList.md +6 -6
  136. package/docs/components/Alert/examples/Alert.md +19 -19
  137. package/docs/components/AlertGroup/examples/AlertGroup.md +12 -12
  138. package/docs/components/AppLauncher/examples/application-launcher.md +51 -46
  139. package/docs/components/Avatar/examples/Avatar.md +11 -11
  140. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  141. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  142. package/docs/components/BackgroundImage/examples/BackgroundImage.md +4 -4
  143. package/docs/components/Badge/examples/Badge.md +5 -5
  144. package/docs/components/Banner/examples/Banner.md +8 -8
  145. package/docs/components/Brand/examples/Brand.md +9 -9
  146. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  147. package/docs/components/Button/examples/Button.md +35 -35
  148. package/docs/components/CalendarMonth/examples/CalendarMonth.md +32 -32
  149. package/docs/components/Card/examples/Card.md +139 -64
  150. package/docs/components/Check/examples/Check.md +15 -19
  151. package/docs/components/Chip/examples/Chip.md +70 -52
  152. package/docs/components/ChipGroup/examples/ChipGroup.md +452 -673
  153. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  154. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  155. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  156. package/docs/components/Content/examples/Content.md +37 -9
  157. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  158. package/docs/components/ContextSelector/examples/context-selector.md +86 -80
  159. package/docs/components/DataList/examples/DataList.md +187 -148
  160. package/docs/components/DatePicker/examples/DatePicker.md +10 -10
  161. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  162. package/docs/components/Divider/examples/Divider.md +10 -10
  163. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  164. package/docs/components/Drawer/examples/Drawer.md +43 -43
  165. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  166. package/docs/components/Dropdown/examples/Dropdown.md +123 -99
  167. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  168. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  169. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  170. package/docs/components/FileUpload/examples/FileUpload.md +8 -8
  171. package/docs/components/Form/examples/Form.md +64 -64
  172. package/docs/components/FormControl/examples/FormControl.md +20 -20
  173. package/docs/components/HelperText/examples/HelperText.md +12 -12
  174. package/docs/components/Hint/examples/Hint.md +7 -7
  175. package/docs/components/Icon/examples/Icon.md +10 -10
  176. package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
  177. package/docs/components/InputGroup/examples/InputGroup.md +10 -10
  178. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  179. package/docs/components/Label/examples/Label.md +1427 -746
  180. package/docs/components/LabelGroup/examples/LabelGroup.md +295 -242
  181. package/docs/components/List/examples/List.md +18 -18
  182. package/docs/components/LogViewer/examples/LogViewer.md +79 -73
  183. package/docs/components/Login/examples/Login.md +32 -32
  184. package/docs/components/Masthead/examples/masthead.md +9 -9
  185. package/docs/components/Menu/examples/Menu.md +82 -80
  186. package/docs/components/MenuToggle/examples/MenuToggle.md +28 -28
  187. package/docs/components/ModalBox/examples/ModalBox.md +106 -85
  188. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +25 -25
  189. package/docs/components/Nav/examples/Navigation.md +69 -69
  190. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  191. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +44 -44
  192. package/docs/components/NumberInput/examples/NumberInput.md +12 -12
  193. package/docs/components/OptionsMenu/examples/options-menu.md +27 -28
  194. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  195. package/docs/components/Page/examples/Page.md +54 -54
  196. package/docs/components/Pagination/examples/Pagination.md +27 -27
  197. package/docs/components/Panel/examples/Panel.md +10 -10
  198. package/docs/components/Popover/examples/Popover.md +201 -144
  199. package/docs/components/Progress/examples/Progress.md +31 -60
  200. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -38
  201. package/docs/components/Radio/examples/Radio.md +11 -11
  202. package/docs/components/SearchInput/examples/SearchInput.md +34 -34
  203. package/docs/components/Select/examples/Select.md +367 -313
  204. package/docs/components/Sidebar/examples/Sidebar.md +70 -14
  205. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  206. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  207. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  208. package/docs/components/Slider/examples/Slider.md +24 -24
  209. package/docs/components/Spinner/examples/Spinner.md +24 -24
  210. package/docs/components/Switch/examples/Switch.md +19 -19
  211. package/docs/components/TabContent/examples/TabContent.md +13 -13
  212. package/docs/components/Table/examples/Table.css +4 -0
  213. package/docs/components/Table/examples/Table.md +3163 -1712
  214. package/docs/components/Tabs/examples/Tabs.md +149 -149
  215. package/docs/components/TextInputGroup/examples/TextInputGroup.md +362 -280
  216. package/docs/components/Tile/examples/Tile.md +15 -15
  217. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  218. package/docs/components/Title/examples/Title.md +17 -17
  219. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  220. package/docs/components/Toolbar/examples/Toolbar.md +471 -378
  221. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  222. package/docs/components/TreeView/examples/TreeView.md +34 -34
  223. package/docs/components/Truncate/examples/Truncate.md +4 -4
  224. package/docs/components/Wizard/examples/Wizard.md +119 -127
  225. package/docs/demos/AboutModal/examples/AboutModal.md +4 -4
  226. package/docs/demos/Alert/examples/Alert.md +13 -13
  227. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  228. package/docs/demos/Banner/examples/Banner.md +8 -9
  229. package/docs/demos/Card/examples/Card.md +219 -156
  230. package/docs/demos/CardView/examples/CardView.md +56 -29
  231. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  232. package/docs/demos/Dashboard/examples/Dashboard.md +51 -35
  233. package/docs/demos/DataList/examples/DataList.md +160 -111
  234. package/docs/demos/DescriptionList/examples/DescriptionList.md +33 -22
  235. package/docs/demos/Drawer/examples/Drawer.md +24 -22
  236. package/docs/demos/Form/examples/BasicForms.md +28 -22
  237. package/docs/demos/HelperText/examples/HelperText.md +8 -9
  238. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  239. package/docs/demos/Masthead/examples/Masthead.md +32 -35
  240. package/docs/demos/Modal/examples/Modal.md +54 -66
  241. package/docs/demos/Nav/examples/Nav.md +47 -47
  242. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +40 -28
  243. package/docs/demos/Page/examples/Page.md +37 -37
  244. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +32 -33
  245. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +83 -67
  246. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  247. package/docs/demos/Table/examples/Table.md +2465 -478
  248. package/docs/demos/Tabs/examples/Tabs.md +141 -90
  249. package/docs/demos/Toolbar/examples/Toolbar.md +1811 -177
  250. package/docs/demos/Wizard/examples/Wizard.md +289 -266
  251. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  252. package/docs/layouts/Flex/examples/Flex.md +98 -98
  253. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  254. package/docs/layouts/Grid/examples/Grid.md +9 -9
  255. package/docs/layouts/Level/examples/Level.md +5 -5
  256. package/docs/layouts/Split/examples/Split.md +7 -7
  257. package/docs/layouts/Stack/examples/Stack.md +6 -6
  258. package/docs/utilities/Accessibility/examples/Accessibility.md +4 -4
  259. package/docs/utilities/Alignment/examples/Alignment.md +6 -6
  260. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +12 -12
  261. package/docs/utilities/BoxShadow/examples/box-shadow.md +22 -22
  262. package/docs/utilities/Display/examples/Display.md +11 -11
  263. package/docs/utilities/Flex/examples/Flex.md +34 -34
  264. package/docs/utilities/Float/examples/Float.md +4 -4
  265. package/docs/utilities/Sizing/examples/Sizing.md +50 -50
  266. package/docs/utilities/Spacing/examples/Spacing.md +34 -34
  267. package/docs/utilities/Text/examples/Text.md +27 -27
  268. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  269. package/layouts/Gallery/gallery.css +1 -1
  270. package/layouts/Gallery/gallery.scss +1 -1
  271. package/layouts/Grid/grid.css +7 -7
  272. package/layouts/Grid/grid.scss +2 -2
  273. package/package.json +59 -65
  274. package/patternfly-base-no-reset.css +23 -47
  275. package/patternfly-base.css +23 -47
  276. package/patternfly-no-reset.css +770 -652
  277. package/patternfly.css +770 -652
  278. package/patternfly.min.css +1 -1
  279. package/patternfly.min.css.map +1 -1
  280. package/sass-utilities/functions.scss +8 -24
  281. package/sass-utilities/mixins.scss +15 -39
  282. package/sass-utilities/scss-variables.scss +1 -1
  283. package/sass-utilities/themes/dark/scss-variables.scss +1 -1
  284. package/utilities/Spacing/spacing.scss +2 -2
  285. package/base/_shield-inheritable.scss +0 -69
  286. package/base/_shield-noninheritable.scss +0 -13
  287. package/base/patternfly-shield-inheritable.css +0 -66
  288. package/base/patternfly-shield-inheritable.scss +0 -4
  289. package/base/patternfly-shield-noninheritable.css +0 -9
  290. package/base/patternfly-shield-noninheritable.scss +0 -4
package/docs/components/TextInputGroup/examples/TextInputGroup.md CHANGED
@@ -34,9 +34,9 @@ cssPrefix: pf-c-text-input-group
34
34
  <input
35
35
  class="pf-c-text-input-group__text-input"
36
36
  type="text"
37
- value="Disabled"
38
37
  disabled
39
- aria-label="Type to filter"
38
+ value="Disabled"
39
+ aria-label="Disabled text input group example input"
40
40
  />
41
41
  </span>
42
42
  </div>
@@ -89,109 +89,135 @@ cssPrefix: pf-c-text-input-group
89
89
  >
90
90
  <li class="pf-c-chip-group__list-item">
91
91
  <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>
92
+ <span class="pf-c-chip__content">
93
+ <span
94
+ class="pf-c-chip__text"
95
+ id="text-input-group-filters-chip-group-chip_one_select_collapsed"
96
+ >Chip one</span>
97
+ </span>
98
+ <span class="pf-c-chip__actions">
99
+ <button
100
+ class="pf-c-button pf-m-plain"
101
+ type="button"
102
+ aria-labelledby="text-input-group-filters-chip-group-remove_chip_one_select_collapsed text-input-group-filters-chip-group-chip_one_select_collapsed"
103
+ aria-label="Remove"
104
+ id="text-input-group-filters-chip-group-remove_chip_one_select_collapsed"
105
+ >
106
+ <i class="fas fa-times" aria-hidden="true"></i>
107
+ </button>
108
+ </span>
105
109
  </div>
106
110
  </li>
107
111
  <li class="pf-c-chip-group__list-item">
108
112
  <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>
113
+ <span class="pf-c-chip__content">
114
+ <span
115
+ class="pf-c-chip__text"
116
+ id="text-input-group-filters-chip-group-chip_two_select_collapsed"
117
+ >Chip two</span>
118
+ </span>
119
+ <span class="pf-c-chip__actions">
120
+ <button
121
+ class="pf-c-button pf-m-plain"
122
+ type="button"
123
+ aria-labelledby="text-input-group-filters-chip-group-remove_chip_two_select_collapsed text-input-group-filters-chip-group-chip_two_select_collapsed"
124
+ aria-label="Remove"
125
+ id="text-input-group-filters-chip-group-remove_chip_two_select_collapsed"
126
+ >
127
+ <i class="fas fa-times" aria-hidden="true"></i>
128
+ </button>
129
+ </span>
122
130
  </div>
123
131
  </li>
124
132
  <li class="pf-c-chip-group__list-item">
125
133
  <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>
134
+ <span class="pf-c-chip__content">
135
+ <span
136
+ class="pf-c-chip__text"
137
+ id="text-input-group-filters-chip-group-chip_three_select_collapsed"
138
+ >Chip three</span>
139
+ </span>
140
+ <span class="pf-c-chip__actions">
141
+ <button
142
+ class="pf-c-button pf-m-plain"
143
+ type="button"
144
+ aria-labelledby="text-input-group-filters-chip-group-remove_chip_three_select_collapsed text-input-group-filters-chip-group-chip_three_select_collapsed"
145
+ aria-label="Remove"
146
+ id="text-input-group-filters-chip-group-remove_chip_three_select_collapsed"
147
+ >
148
+ <i class="fas fa-times" aria-hidden="true"></i>
149
+ </button>
150
+ </span>
139
151
  </div>
140
152
  </li>
141
153
  <li class="pf-c-chip-group__list-item">
142
154
  <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>
155
+ <span class="pf-c-chip__content">
156
+ <span
157
+ class="pf-c-chip__text"
158
+ id="text-input-group-filters-chip-group-chip_four_select_collapsed"
159
+ >Chip four</span>
160
+ </span>
161
+ <span class="pf-c-chip__actions">
162
+ <button
163
+ class="pf-c-button pf-m-plain"
164
+ type="button"
165
+ aria-labelledby="text-input-group-filters-chip-group-remove_chip_four_select_collapsed text-input-group-filters-chip-group-chip_four_select_collapsed"
166
+ aria-label="Remove"
167
+ id="text-input-group-filters-chip-group-remove_chip_four_select_collapsed"
168
+ >
169
+ <i class="fas fa-times" aria-hidden="true"></i>
170
+ </button>
171
+ </span>
156
172
  </div>
157
173
  </li>
158
174
  <li class="pf-c-chip-group__list-item">
159
175
  <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>
176
+ <span class="pf-c-chip__content">
177
+ <span
178
+ class="pf-c-chip__text"
179
+ id="text-input-group-filters-chip-group-chip_five_select_collapsed"
180
+ >Chip five</span>
181
+ </span>
182
+ <span class="pf-c-chip__actions">
183
+ <button
184
+ class="pf-c-button pf-m-plain"
185
+ type="button"
186
+ aria-labelledby="text-input-group-filters-chip-group-remove_chip_five_select_collapsed text-input-group-filters-chip-group-chip_five_select_collapsed"
187
+ aria-label="Remove"
188
+ id="text-input-group-filters-chip-group-remove_chip_five_select_collapsed"
189
+ >
190
+ <i class="fas fa-times" aria-hidden="true"></i>
191
+ </button>
192
+ </span>
173
193
  </div>
174
194
  </li>
175
195
  <li class="pf-c-chip-group__list-item">
176
196
  <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>
197
+ <span class="pf-c-chip__content">
198
+ <span
199
+ class="pf-c-chip__text"
200
+ id="text-input-group-filters-chip-group-chip_six_select_collapsed"
201
+ >Chip six</span>
202
+ </span>
203
+ <span class="pf-c-chip__actions">
204
+ <button
205
+ class="pf-c-button pf-m-plain"
206
+ type="button"
207
+ aria-labelledby="text-input-group-filters-chip-group-remove_chip_six_select_collapsed text-input-group-filters-chip-group-chip_six_select_collapsed"
208
+ aria-label="Remove"
209
+ id="text-input-group-filters-chip-group-remove_chip_six_select_collapsed"
210
+ >
211
+ <i class="fas fa-times" aria-hidden="true"></i>
212
+ </button>
213
+ </span>
190
214
  </div>
191
215
  </li>
192
216
  <li class="pf-c-chip-group__list-item">
193
217
  <button class="pf-c-chip pf-m-overflow">
194
- <span class="pf-c-chip__text">8 more</span>
218
+ <span class="pf-c-chip__content">
219
+ <span class="pf-c-chip__text">8 more</span>
220
+ </span>
195
221
  </button>
196
222
  </li>
197
223
  </ul>
@@ -233,240 +259,296 @@ cssPrefix: pf-c-text-input-group
233
259
  >
234
260
  <li class="pf-c-chip-group__list-item">
235
261
  <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>
262
+ <span class="pf-c-chip__content">
263
+ <span
264
+ class="pf-c-chip__text"
265
+ id="text-input-group-filters-expanded-chip-group-chip_one_select_collapsed"
266
+ >Chip one</span>
267
+ </span>
268
+ <span class="pf-c-chip__actions">
269
+ <button
270
+ class="pf-c-button pf-m-plain"
271
+ type="button"
272
+ 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"
273
+ aria-label="Remove"
274
+ id="text-input-group-filters-expanded-chip-group-remove_chip_one_select_collapsed"
275
+ >
276
+ <i class="fas fa-times" aria-hidden="true"></i>
277
+ </button>
278
+ </span>
249
279
  </div>
250
280
  </li>
251
281
  <li class="pf-c-chip-group__list-item">
252
282
  <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>
283
+ <span class="pf-c-chip__content">
284
+ <span
285
+ class="pf-c-chip__text"
286
+ id="text-input-group-filters-expanded-chip-group-chip_two_select_collapsed"
287
+ >Chip two</span>
288
+ </span>
289
+ <span class="pf-c-chip__actions">
290
+ <button
291
+ class="pf-c-button pf-m-plain"
292
+ type="button"
293
+ 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"
294
+ aria-label="Remove"
295
+ id="text-input-group-filters-expanded-chip-group-remove_chip_two_select_collapsed"
296
+ >
297
+ <i class="fas fa-times" aria-hidden="true"></i>
298
+ </button>
299
+ </span>
266
300
  </div>
267
301
  </li>
268
302
  <li class="pf-c-chip-group__list-item">
269
303
  <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>
304
+ <span class="pf-c-chip__content">
305
+ <span
306
+ class="pf-c-chip__text"
307
+ id="text-input-group-filters-expanded-chip-group-chip_three_select_collapsed"
308
+ >Chip three</span>
309
+ </span>
310
+ <span class="pf-c-chip__actions">
311
+ <button
312
+ class="pf-c-button pf-m-plain"
313
+ type="button"
314
+ 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"
315
+ aria-label="Remove"
316
+ id="text-input-group-filters-expanded-chip-group-remove_chip_three_select_collapsed"
317
+ >
318
+ <i class="fas fa-times" aria-hidden="true"></i>
319
+ </button>
320
+ </span>
283
321
  </div>
284
322
  </li>
285
323
  <li class="pf-c-chip-group__list-item">
286
324
  <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>
325
+ <span class="pf-c-chip__content">
326
+ <span
327
+ class="pf-c-chip__text"
328
+ id="text-input-group-filters-expanded-chip-group-chip_four_select_collapsed"
329
+ >Chip four</span>
330
+ </span>
331
+ <span class="pf-c-chip__actions">
332
+ <button
333
+ class="pf-c-button pf-m-plain"
334
+ type="button"
335
+ 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"
336
+ aria-label="Remove"
337
+ id="text-input-group-filters-expanded-chip-group-remove_chip_four_select_collapsed"
338
+ >
339
+ <i class="fas fa-times" aria-hidden="true"></i>
340
+ </button>
341
+ </span>
300
342
  </div>
301
343
  </li>
302
344
  <li class="pf-c-chip-group__list-item">
303
345
  <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>
346
+ <span class="pf-c-chip__content">
347
+ <span
348
+ class="pf-c-chip__text"
349
+ id="text-input-group-filters-expanded-chip-group-chip_five_select_collapsed"
350
+ >Chip five</span>
351
+ </span>
352
+ <span class="pf-c-chip__actions">
353
+ <button
354
+ class="pf-c-button pf-m-plain"
355
+ type="button"
356
+ 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"
357
+ aria-label="Remove"
358
+ id="text-input-group-filters-expanded-chip-group-remove_chip_five_select_collapsed"
359
+ >
360
+ <i class="fas fa-times" aria-hidden="true"></i>
361
+ </button>
362
+ </span>
317
363
  </div>
318
364
  </li>
319
365
  <li class="pf-c-chip-group__list-item">
320
366
  <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>
367
+ <span class="pf-c-chip__content">
368
+ <span
369
+ class="pf-c-chip__text"
370
+ id="text-input-group-filters-expanded-chip-group-chip_six_select_collapsed"
371
+ >Chip six</span>
372
+ </span>
373
+ <span class="pf-c-chip__actions">
374
+ <button
375
+ class="pf-c-button pf-m-plain"
376
+ type="button"
377
+ 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"
378
+ aria-label="Remove"
379
+ id="text-input-group-filters-expanded-chip-group-remove_chip_six_select_collapsed"
380
+ >
381
+ <i class="fas fa-times" aria-hidden="true"></i>
382
+ </button>
383
+ </span>
334
384
  </div>
335
385
  </li>
336
386
  <li class="pf-c-chip-group__list-item">
337
387
  <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>
388
+ <span class="pf-c-chip__content">
389
+ <span
390
+ class="pf-c-chip__text"
391
+ id="text-input-group-filters-expanded-chip-group-chip_seven_select_collapsed"
392
+ >Chip seven</span>
393
+ </span>
394
+ <span class="pf-c-chip__actions">
395
+ <button
396
+ class="pf-c-button pf-m-plain"
397
+ type="button"
398
+ 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"
399
+ aria-label="Remove"
400
+ id="text-input-group-filters-expanded-chip-group-remove_chip_seven_select_collapsed"
401
+ >
402
+ <i class="fas fa-times" aria-hidden="true"></i>
403
+ </button>
404
+ </span>
351
405
  </div>
352
406
  </li>
353
407
  <li class="pf-c-chip-group__list-item">
354
408
  <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>
409
+ <span class="pf-c-chip__content">
410
+ <span
411
+ class="pf-c-chip__text"
412
+ id="text-input-group-filters-expanded-chip-group-chip_eight_select_collapsed"
413
+ >Chip eight</span>
414
+ </span>
415
+ <span class="pf-c-chip__actions">
416
+ <button
417
+ class="pf-c-button pf-m-plain"
418
+ type="button"
419
+ 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"
420
+ aria-label="Remove"
421
+ id="text-input-group-filters-expanded-chip-group-remove_chip_eight_select_collapsed"
422
+ >
423
+ <i class="fas fa-times" aria-hidden="true"></i>
424
+ </button>
425
+ </span>
368
426
  </div>
369
427
  </li>
370
428
  <li class="pf-c-chip-group__list-item">
371
429
  <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>
430
+ <span class="pf-c-chip__content">
431
+ <span
432
+ class="pf-c-chip__text"
433
+ id="text-input-group-filters-expanded-chip-group-chip_nine_select_collapsed"
434
+ >Chip nine</span>
435
+ </span>
436
+ <span class="pf-c-chip__actions">
437
+ <button
438
+ class="pf-c-button pf-m-plain"
439
+ type="button"
440
+ 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"
441
+ aria-label="Remove"
442
+ id="text-input-group-filters-expanded-chip-group-remove_chip_nine_select_collapsed"
443
+ >
444
+ <i class="fas fa-times" aria-hidden="true"></i>
445
+ </button>
446
+ </span>
385
447
  </div>
386
448
  </li>
387
449
  <li class="pf-c-chip-group__list-item">
388
450
  <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>
451
+ <span class="pf-c-chip__content">
452
+ <span
453
+ class="pf-c-chip__text"
454
+ id="text-input-group-filters-expanded-chip-group-chip_ten_select_collapsed"
455
+ >Chip ten</span>
456
+ </span>
457
+ <span class="pf-c-chip__actions">
458
+ <button
459
+ class="pf-c-button pf-m-plain"
460
+ type="button"
461
+ 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"
462
+ aria-label="Remove"
463
+ id="text-input-group-filters-expanded-chip-group-remove_chip_ten_select_collapsed"
464
+ >
465
+ <i class="fas fa-times" aria-hidden="true"></i>
466
+ </button>
467
+ </span>
402
468
  </div>
403
469
  </li>
404
470
  <li class="pf-c-chip-group__list-item">
405
471
  <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>
472
+ <span class="pf-c-chip__content">
473
+ <span
474
+ class="pf-c-chip__text"
475
+ id="text-input-group-filters-expanded-chip-group-chip_eleven_select_collapsed"
476
+ >Chip eleven</span>
477
+ </span>
478
+ <span class="pf-c-chip__actions">
479
+ <button
480
+ class="pf-c-button pf-m-plain"
481
+ type="button"
482
+ 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"
483
+ aria-label="Remove"
484
+ id="text-input-group-filters-expanded-chip-group-remove_chip_eleven_select_collapsed"
485
+ >
486
+ <i class="fas fa-times" aria-hidden="true"></i>
487
+ </button>
488
+ </span>
419
489
  </div>
420
490
  </li>
421
491
  <li class="pf-c-chip-group__list-item">
422
492
  <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>
493
+ <span class="pf-c-chip__content">
494
+ <span
495
+ class="pf-c-chip__text"
496
+ id="text-input-group-filters-expanded-chip-group-chip_twelve_select_collapsed"
497
+ >Chip twelve</span>
498
+ </span>
499
+ <span class="pf-c-chip__actions">
500
+ <button
501
+ class="pf-c-button pf-m-plain"
502
+ type="button"
503
+ 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"
504
+ aria-label="Remove"
505
+ id="text-input-group-filters-expanded-chip-group-remove_chip_twelve_select_collapsed"
506
+ >
507
+ <i class="fas fa-times" aria-hidden="true"></i>
508
+ </button>
509
+ </span>
436
510
  </div>
437
511
  </li>
438
512
  <li class="pf-c-chip-group__list-item">
439
513
  <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>
514
+ <span class="pf-c-chip__content">
515
+ <span
516
+ class="pf-c-chip__text"
517
+ id="text-input-group-filters-expanded-chip-group-chip_thirteen_select_collapsed"
518
+ >Chip thirteen</span>
519
+ </span>
520
+ <span class="pf-c-chip__actions">
521
+ <button
522
+ class="pf-c-button pf-m-plain"
523
+ type="button"
524
+ 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"
525
+ aria-label="Remove"
526
+ id="text-input-group-filters-expanded-chip-group-remove_chip_thirteen_select_collapsed"
527
+ >
528
+ <i class="fas fa-times" aria-hidden="true"></i>
529
+ </button>
530
+ </span>
453
531
  </div>
454
532
  </li>
455
533
  <li class="pf-c-chip-group__list-item">
456
534
  <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>
535
+ <span class="pf-c-chip__content">
536
+ <span
537
+ class="pf-c-chip__text"
538
+ id="text-input-group-filters-expanded-chip-group-chip_fourteen_select_collapsed"
539
+ >Chip fourteen</span>
540
+ </span>
541
+ <span class="pf-c-chip__actions">
542
+ <button
543
+ class="pf-c-button pf-m-plain"
544
+ type="button"
545
+ 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"
546
+ aria-label="Remove"
547
+ id="text-input-group-filters-expanded-chip-group-remove_chip_fourteen_select_collapsed"
548
+ >
549
+ <i class="fas fa-times" aria-hidden="true"></i>
550
+ </button>
551
+ </span>
470
552
  </div>
471
553
  </li>
472
554
  </ul>
@@ -530,9 +612,9 @@ cssPrefix: pf-c-text-input-group
530
612
  </span>
531
613
  <input
532
614
  class="pf-c-text-input-group__text-input"
533
- type="text"
534
- value
615
+ type="search"
535
616
  placeholder="Find by name"
617
+ value
536
618
  aria-label="Type to filter"
537
619
  />
538
620
  </span>
@@ -552,9 +634,9 @@ cssPrefix: pf-c-text-input-group
552
634
  </span>
553
635
  <input
554
636
  class="pf-c-text-input-group__text-input"
555
- type="text"
556
- value="Joh"
637
+ type="search"
557
638
  placeholder="Find by name"
639
+ value="Joh"
558
640
  aria-label="Type to filter"
559
641
  />
560
642
  </span>
@@ -583,9 +665,9 @@ cssPrefix: pf-c-text-input-group
583
665
  </span>
584
666
  <input
585
667
  class="pf-c-text-input-group__text-input"
586
- type="text"
587
- value="John Doe"
668
+ type="search"
588
669
  placeholder="Find by name"
670
+ value="John Doe"
589
671
  aria-label="Type to filter"
590
672
  />
591
673
  </span>
@@ -615,9 +697,9 @@ cssPrefix: pf-c-text-input-group
615
697
  </span>
616
698
  <input
617
699
  class="pf-c-text-input-group__text-input"
618
- type="text"
619
- value="John Doe"
700
+ type="search"
620
701
  placeholder="Find by name"
702
+ value="John Doe"
621
703
  aria-label="Type to filter"
622
704
  />
623
705
  </span>
@@ -659,9 +741,9 @@ cssPrefix: pf-c-text-input-group
659
741
  </span>
660
742
  <input
661
743
  class="pf-c-text-input-group__text-input"
662
- type="text"
663
- value
744
+ type="search"
664
745
  placeholder="Search"
746
+ value
665
747
  aria-label="Type to filter"
666
748
  />
667
749
  </span>
@@ -686,9 +768,9 @@ cssPrefix: pf-c-text-input-group
686
768
  </span>
687
769
  <input
688
770
  class="pf-c-text-input-group__text-input"
689
- type="text"
690
- value
771
+ type="search"
691
772
  placeholder="Find by name"
773
+ value
692
774
  aria-label="Type to filter"
693
775
  />
694
776
  </span>
@@ -713,7 +795,7 @@ cssPrefix: pf-c-text-input-group
713
795
  </span>
714
796
  <input
715
797
  class="pf-c-text-input-group__text-input"
716
- type="text"
798
+ type="search"
717
799
  value="username:root firstname:ned"
718
800
  aria-label="Type to filter"
719
801
  />
@@ -756,7 +838,7 @@ cssPrefix: pf-c-text-input-group
756
838
  </span>
757
839
  <input
758
840
  class="pf-c-text-input-group__text-input"
759
- type="text"
841
+ type="search"
760
842
  value="username:root firstname:ned"
761
843
  aria-label="Type to filter"
762
844
  />
@@ -879,7 +961,7 @@ cssPrefix: pf-c-text-input-group
879
961
  </span>
880
962
  <input
881
963
  class="pf-c-text-input-group__text-input"
882
- type="text"
964
+ type="search"
883
965
  value="app"
884
966
  aria-label="Type to filter"
885
967
  />
@@ -944,7 +1026,7 @@ cssPrefix: pf-c-text-input-group
944
1026
  </span>
945
1027
  <input
946
1028
  class="pf-c-text-input-group__text-input pf-m-hint"
947
- type="text"
1029
+ type="search"
948
1030
  value="appleseed"
949
1031
  disabled
950
1032
  aria-hidden="true"
@@ -991,7 +1073,7 @@ cssPrefix: pf-c-text-input-group
991
1073
  </span>
992
1074
  <input
993
1075
  class="pf-c-text-input-group__text-input"
994
- type="text"
1076
+ type="search"
995
1077
  value="username:root firstname:n"
996
1078
  aria-label="Type to filter"
997
1079
  />