@patternfly/patternfly 5.0.0-alpha.21 → 5.0.0-alpha.23

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 (31) hide show
  1. package/components/Chip/chip.css +33 -24
  2. package/components/Chip/chip.scss +40 -31
  3. package/components/Label/label.css +35 -24
  4. package/components/Label/label.scss +40 -27
  5. package/components/Popover/popover.css +21 -24
  6. package/components/Popover/popover.scss +25 -32
  7. package/components/Table/table-tree-view.css +10 -0
  8. package/components/Table/table-tree-view.scss +15 -0
  9. package/docs/components/Chip/examples/Chip.md +61 -43
  10. package/docs/components/ChipGroup/examples/ChipGroup.md +437 -329
  11. package/docs/components/InlineEdit/examples/InlineEdit.md +5 -3
  12. package/docs/components/Label/examples/Label.md +1399 -718
  13. package/docs/components/LabelGroup/examples/LabelGroup.md +274 -209
  14. package/docs/components/LogViewer/examples/LogViewer.md +10 -4
  15. package/docs/components/Popover/examples/Popover.md +175 -104
  16. package/docs/components/Select/examples/Select.md +224 -170
  17. package/docs/components/Table/examples/Table.md +565 -41
  18. package/docs/components/TextInputGroup/examples/TextInputGroup.md +343 -261
  19. package/docs/components/Toolbar/examples/Toolbar.md +306 -234
  20. package/docs/demos/Card/examples/Card.md +46 -38
  21. package/docs/demos/Dashboard/examples/Dashboard.md +23 -15
  22. package/docs/demos/DescriptionList/examples/DescriptionList.md +21 -9
  23. package/docs/demos/Drawer/examples/Drawer.md +4 -2
  24. package/docs/demos/Form/examples/BasicForms.md +28 -22
  25. package/docs/demos/Tabs/examples/Tabs.md +39 -16
  26. package/docs/demos/Toolbar/examples/Toolbar.md +102 -78
  27. package/package.json +2 -2
  28. package/patternfly-no-reset.css +99 -72
  29. package/patternfly.css +99 -72
  30. package/patternfly.min.css +1 -1
  31. package/patternfly.min.css.map +1 -1
package/docs/components/TextInputGroup/examples/TextInputGroup.md CHANGED
@@ -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>