@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/ChipGroup/examples/ChipGroup.md CHANGED
@@ -12,58 +12,72 @@ cssPrefix: pf-c-chip-group
12
12
  <ul class="pf-c-chip-group__list" role="list" aria-label="Chip group list">
13
13
  <li class="pf-c-chip-group__list-item">
14
14
  <div class="pf-c-chip">
15
- <span
16
- class="pf-c-chip__text"
17
- id="simple-inline-chip-group-overflowchip_one_select_collapsed"
18
- >Chip one</span>
19
- <button
20
- class="pf-c-button pf-m-plain"
21
- type="button"
22
- aria-labelledby="simple-inline-chip-group-overflowremove_chip_one_select_collapsed simple-inline-chip-group-overflowchip_one_select_collapsed"
23
- aria-label="Remove"
24
- id="simple-inline-chip-group-overflowremove_chip_one_select_collapsed"
25
- >
26
- <i class="fas fa-times" aria-hidden="true"></i>
27
- </button>
15
+ <span class="pf-c-chip__content">
16
+ <span
17
+ class="pf-c-chip__text"
18
+ id="simple-inline-chip-group-overflowchip_one_select_collapsed"
19
+ >Chip one</span>
20
+ </span>
21
+ <span class="pf-c-chip__actions">
22
+ <button
23
+ class="pf-c-button pf-m-plain"
24
+ type="button"
25
+ aria-labelledby="simple-inline-chip-group-overflowremove_chip_one_select_collapsed simple-inline-chip-group-overflowchip_one_select_collapsed"
26
+ aria-label="Remove"
27
+ id="simple-inline-chip-group-overflowremove_chip_one_select_collapsed"
28
+ >
29
+ <i class="fas fa-times" aria-hidden="true"></i>
30
+ </button>
31
+ </span>
28
32
  </div>
29
33
  </li>
30
34
  <li class="pf-c-chip-group__list-item">
31
35
  <div class="pf-c-chip">
32
- <span
33
- class="pf-c-chip__text"
34
- id="simple-inline-chip-group-overflowchip_two_select_collapsed"
35
- >Chip two</span>
36
- <button
37
- class="pf-c-button pf-m-plain"
38
- type="button"
39
- aria-labelledby="simple-inline-chip-group-overflowremove_chip_two_select_collapsed simple-inline-chip-group-overflowchip_two_select_collapsed"
40
- aria-label="Remove"
41
- id="simple-inline-chip-group-overflowremove_chip_two_select_collapsed"
42
- >
43
- <i class="fas fa-times" aria-hidden="true"></i>
44
- </button>
36
+ <span class="pf-c-chip__content">
37
+ <span
38
+ class="pf-c-chip__text"
39
+ id="simple-inline-chip-group-overflowchip_two_select_collapsed"
40
+ >Chip two</span>
41
+ </span>
42
+ <span class="pf-c-chip__actions">
43
+ <button
44
+ class="pf-c-button pf-m-plain"
45
+ type="button"
46
+ aria-labelledby="simple-inline-chip-group-overflowremove_chip_two_select_collapsed simple-inline-chip-group-overflowchip_two_select_collapsed"
47
+ aria-label="Remove"
48
+ id="simple-inline-chip-group-overflowremove_chip_two_select_collapsed"
49
+ >
50
+ <i class="fas fa-times" aria-hidden="true"></i>
51
+ </button>
52
+ </span>
45
53
  </div>
46
54
  </li>
47
55
  <li class="pf-c-chip-group__list-item">
48
56
  <div class="pf-c-chip">
49
- <span
50
- class="pf-c-chip__text"
51
- id="simple-inline-chip-group-overflowchip_three_select_collapsed"
52
- >Chip three</span>
53
- <button
54
- class="pf-c-button pf-m-plain"
55
- type="button"
56
- aria-labelledby="simple-inline-chip-group-overflowremove_chip_three_select_collapsed simple-inline-chip-group-overflowchip_three_select_collapsed"
57
- aria-label="Remove"
58
- id="simple-inline-chip-group-overflowremove_chip_three_select_collapsed"
59
- >
60
- <i class="fas fa-times" aria-hidden="true"></i>
61
- </button>
57
+ <span class="pf-c-chip__content">
58
+ <span
59
+ class="pf-c-chip__text"
60
+ id="simple-inline-chip-group-overflowchip_three_select_collapsed"
61
+ >Chip three</span>
62
+ </span>
63
+ <span class="pf-c-chip__actions">
64
+ <button
65
+ class="pf-c-button pf-m-plain"
66
+ type="button"
67
+ aria-labelledby="simple-inline-chip-group-overflowremove_chip_three_select_collapsed simple-inline-chip-group-overflowchip_three_select_collapsed"
68
+ aria-label="Remove"
69
+ id="simple-inline-chip-group-overflowremove_chip_three_select_collapsed"
70
+ >
71
+ <i class="fas fa-times" aria-hidden="true"></i>
72
+ </button>
73
+ </span>
62
74
  </div>
63
75
  </li>
64
76
  <li class="pf-c-chip-group__list-item">
65
77
  <button class="pf-c-chip pf-m-overflow">
66
- <span class="pf-c-chip__text">2 more</span>
78
+ <span class="pf-c-chip__content">
79
+ <span class="pf-c-chip__text">2 more</span>
80
+ </span>
67
81
  </button>
68
82
  </li>
69
83
  </ul>
@@ -80,92 +94,114 @@ cssPrefix: pf-c-chip-group
80
94
  <ul class="pf-c-chip-group__list" role="list" aria-label="Chip group list">
81
95
  <li class="pf-c-chip-group__list-item">
82
96
  <div class="pf-c-chip">
83
- <span
84
- class="pf-c-chip__text"
85
- id="simple-inline-chip-group-expandedchip_one_select"
86
- >Chip one</span>
87
- <button
88
- class="pf-c-button pf-m-plain"
89
- type="button"
90
- aria-labelledby="simple-inline-chip-group-expandedremove_chip_one_select simple-inline-chip-group-expandedchip_one_select"
91
- aria-label="Remove"
92
- id="simple-inline-chip-group-expandedremove_chip_one_select"
93
- >
94
- <i class="fas fa-times" aria-hidden="true"></i>
95
- </button>
97
+ <span class="pf-c-chip__content">
98
+ <span
99
+ class="pf-c-chip__text"
100
+ id="simple-inline-chip-group-expandedchip_one_select"
101
+ >Chip one</span>
102
+ </span>
103
+ <span class="pf-c-chip__actions">
104
+ <button
105
+ class="pf-c-button pf-m-plain"
106
+ type="button"
107
+ aria-labelledby="simple-inline-chip-group-expandedremove_chip_one_select simple-inline-chip-group-expandedchip_one_select"
108
+ aria-label="Remove"
109
+ id="simple-inline-chip-group-expandedremove_chip_one_select"
110
+ >
111
+ <i class="fas fa-times" aria-hidden="true"></i>
112
+ </button>
113
+ </span>
96
114
  </div>
97
115
  </li>
98
116
  <li class="pf-c-chip-group__list-item">
99
117
  <div class="pf-c-chip">
100
- <span
101
- class="pf-c-chip__text"
102
- id="simple-inline-chip-group-expandedchip_two_select"
103
- >Chip two</span>
104
- <button
105
- class="pf-c-button pf-m-plain"
106
- type="button"
107
- aria-labelledby="simple-inline-chip-group-expandedremove_chip_two_select simple-inline-chip-group-expandedchip_two_select"
108
- aria-label="Remove"
109
- id="simple-inline-chip-group-expandedremove_chip_two_select"
110
- >
111
- <i class="fas fa-times" aria-hidden="true"></i>
112
- </button>
118
+ <span class="pf-c-chip__content">
119
+ <span
120
+ class="pf-c-chip__text"
121
+ id="simple-inline-chip-group-expandedchip_two_select"
122
+ >Chip two</span>
123
+ </span>
124
+ <span class="pf-c-chip__actions">
125
+ <button
126
+ class="pf-c-button pf-m-plain"
127
+ type="button"
128
+ aria-labelledby="simple-inline-chip-group-expandedremove_chip_two_select simple-inline-chip-group-expandedchip_two_select"
129
+ aria-label="Remove"
130
+ id="simple-inline-chip-group-expandedremove_chip_two_select"
131
+ >
132
+ <i class="fas fa-times" aria-hidden="true"></i>
133
+ </button>
134
+ </span>
113
135
  </div>
114
136
  </li>
115
137
  <li class="pf-c-chip-group__list-item">
116
138
  <div class="pf-c-chip">
117
- <span
118
- class="pf-c-chip__text"
119
- id="simple-inline-chip-group-expandedchip_three_select"
120
- >Chip three</span>
121
- <button
122
- class="pf-c-button pf-m-plain"
123
- type="button"
124
- aria-labelledby="simple-inline-chip-group-expandedremove_chip_three_select simple-inline-chip-group-expandedchip_three_select"
125
- aria-label="Remove"
126
- id="simple-inline-chip-group-expandedremove_chip_three_select"
127
- >
128
- <i class="fas fa-times" aria-hidden="true"></i>
129
- </button>
139
+ <span class="pf-c-chip__content">
140
+ <span
141
+ class="pf-c-chip__text"
142
+ id="simple-inline-chip-group-expandedchip_three_select"
143
+ >Chip three</span>
144
+ </span>
145
+ <span class="pf-c-chip__actions">
146
+ <button
147
+ class="pf-c-button pf-m-plain"
148
+ type="button"
149
+ aria-labelledby="simple-inline-chip-group-expandedremove_chip_three_select simple-inline-chip-group-expandedchip_three_select"
150
+ aria-label="Remove"
151
+ id="simple-inline-chip-group-expandedremove_chip_three_select"
152
+ >
153
+ <i class="fas fa-times" aria-hidden="true"></i>
154
+ </button>
155
+ </span>
130
156
  </div>
131
157
  </li>
132
158
  <li class="pf-c-chip-group__list-item">
133
159
  <div class="pf-c-chip">
134
- <span
135
- class="pf-c-chip__text"
136
- id="simple-inline-chip-group-expandedchip_four_select"
137
- >Chip four</span>
138
- <button
139
- class="pf-c-button pf-m-plain"
140
- type="button"
141
- aria-labelledby="simple-inline-chip-group-expandedremove_chip_four_select simple-inline-chip-group-expandedchip_four_select"
142
- aria-label="Remove"
143
- id="simple-inline-chip-group-expandedremove_chip_four_select"
144
- >
145
- <i class="fas fa-times" aria-hidden="true"></i>
146
- </button>
160
+ <span class="pf-c-chip__content">
161
+ <span
162
+ class="pf-c-chip__text"
163
+ id="simple-inline-chip-group-expandedchip_four_select"
164
+ >Chip four</span>
165
+ </span>
166
+ <span class="pf-c-chip__actions">
167
+ <button
168
+ class="pf-c-button pf-m-plain"
169
+ type="button"
170
+ aria-labelledby="simple-inline-chip-group-expandedremove_chip_four_select simple-inline-chip-group-expandedchip_four_select"
171
+ aria-label="Remove"
172
+ id="simple-inline-chip-group-expandedremove_chip_four_select"
173
+ >
174
+ <i class="fas fa-times" aria-hidden="true"></i>
175
+ </button>
176
+ </span>
147
177
  </div>
148
178
  </li>
149
179
  <li class="pf-c-chip-group__list-item">
150
180
  <div class="pf-c-chip">
151
- <span
152
- class="pf-c-chip__text"
153
- id="simple-inline-chip-group-expandedchip_five_select"
154
- >Chip five</span>
155
- <button
156
- class="pf-c-button pf-m-plain"
157
- type="button"
158
- aria-labelledby="simple-inline-chip-group-expandedremove_chip_five_select simple-inline-chip-group-expandedchip_five_select"
159
- aria-label="Remove"
160
- id="simple-inline-chip-group-expandedremove_chip_five_select"
161
- >
162
- <i class="fas fa-times" aria-hidden="true"></i>
163
- </button>
181
+ <span class="pf-c-chip__content">
182
+ <span
183
+ class="pf-c-chip__text"
184
+ id="simple-inline-chip-group-expandedchip_five_select"
185
+ >Chip five</span>
186
+ </span>
187
+ <span class="pf-c-chip__actions">
188
+ <button
189
+ class="pf-c-button pf-m-plain"
190
+ type="button"
191
+ aria-labelledby="simple-inline-chip-group-expandedremove_chip_five_select simple-inline-chip-group-expandedchip_five_select"
192
+ aria-label="Remove"
193
+ id="simple-inline-chip-group-expandedremove_chip_five_select"
194
+ >
195
+ <i class="fas fa-times" aria-hidden="true"></i>
196
+ </button>
197
+ </span>
164
198
  </div>
165
199
  </li>
166
200
  <li class="pf-c-chip-group__list-item">
167
201
  <button class="pf-c-chip pf-m-overflow">
168
- <span class="pf-c-chip__text">Show less</span>
202
+ <span class="pf-c-chip__content">
203
+ <span class="pf-c-chip__text">Show less</span>
204
+ </span>
169
205
  </button>
170
206
  </li>
171
207
  </ul>
@@ -191,53 +227,65 @@ cssPrefix: pf-c-chip-group
191
227
  >
192
228
  <li class="pf-c-chip-group__list-item">
193
229
  <div class="pf-c-chip">
194
- <span
195
- class="pf-c-chip__text"
196
- id="chip-group-with-categorieschip_one_toolbar_collapsed"
197
- >Chip one</span>
198
- <button
199
- class="pf-c-button pf-m-plain"
200
- type="button"
201
- aria-labelledby="chip-group-with-categoriesremove_chip_one_toolbar_collapsed chip-group-with-categorieschip_one_toolbar_collapsed"
202
- aria-label="Remove"
203
- id="chip-group-with-categoriesremove_chip_one_toolbar_collapsed"
204
- >
205
- <i class="fas fa-times" aria-hidden="true"></i>
206
- </button>
230
+ <span class="pf-c-chip__content">
231
+ <span
232
+ class="pf-c-chip__text"
233
+ id="chip-group-with-categorieschip_one_toolbar_collapsed"
234
+ >Chip one</span>
235
+ </span>
236
+ <span class="pf-c-chip__actions">
237
+ <button
238
+ class="pf-c-button pf-m-plain"
239
+ type="button"
240
+ aria-labelledby="chip-group-with-categoriesremove_chip_one_toolbar_collapsed chip-group-with-categorieschip_one_toolbar_collapsed"
241
+ aria-label="Remove"
242
+ id="chip-group-with-categoriesremove_chip_one_toolbar_collapsed"
243
+ >
244
+ <i class="fas fa-times" aria-hidden="true"></i>
245
+ </button>
246
+ </span>
207
247
  </div>
208
248
  </li>
209
249
  <li class="pf-c-chip-group__list-item">
210
250
  <div class="pf-c-chip">
211
- <span
212
- class="pf-c-chip__text"
213
- id="chip-group-with-categorieschip_two_toolbar_collapsed"
214
- >Chip two</span>
215
- <button
216
- class="pf-c-button pf-m-plain"
217
- type="button"
218
- aria-labelledby="chip-group-with-categoriesremove_chip_two_toolbar_collapsed chip-group-with-categorieschip_two_toolbar_collapsed"
219
- aria-label="Remove"
220
- id="chip-group-with-categoriesremove_chip_two_toolbar_collapsed"
221
- >
222
- <i class="fas fa-times" aria-hidden="true"></i>
223
- </button>
251
+ <span class="pf-c-chip__content">
252
+ <span
253
+ class="pf-c-chip__text"
254
+ id="chip-group-with-categorieschip_two_toolbar_collapsed"
255
+ >Chip two</span>
256
+ </span>
257
+ <span class="pf-c-chip__actions">
258
+ <button
259
+ class="pf-c-button pf-m-plain"
260
+ type="button"
261
+ aria-labelledby="chip-group-with-categoriesremove_chip_two_toolbar_collapsed chip-group-with-categorieschip_two_toolbar_collapsed"
262
+ aria-label="Remove"
263
+ id="chip-group-with-categoriesremove_chip_two_toolbar_collapsed"
264
+ >
265
+ <i class="fas fa-times" aria-hidden="true"></i>
266
+ </button>
267
+ </span>
224
268
  </div>
225
269
  </li>
226
270
  <li class="pf-c-chip-group__list-item">
227
271
  <div class="pf-c-chip">
228
- <span
229
- class="pf-c-chip__text"
230
- id="chip-group-with-categorieschip_three_toolbar_collapsed"
231
- >Chip three</span>
232
- <button
233
- class="pf-c-button pf-m-plain"
234
- type="button"
235
- aria-labelledby="chip-group-with-categoriesremove_chip_three_toolbar_collapsed chip-group-with-categorieschip_three_toolbar_collapsed"
236
- aria-label="Remove"
237
- id="chip-group-with-categoriesremove_chip_three_toolbar_collapsed"
238
- >
239
- <i class="fas fa-times" aria-hidden="true"></i>
240
- </button>
272
+ <span class="pf-c-chip__content">
273
+ <span
274
+ class="pf-c-chip__text"
275
+ id="chip-group-with-categorieschip_three_toolbar_collapsed"
276
+ >Chip three</span>
277
+ </span>
278
+ <span class="pf-c-chip__actions">
279
+ <button
280
+ class="pf-c-button pf-m-plain"
281
+ type="button"
282
+ aria-labelledby="chip-group-with-categoriesremove_chip_three_toolbar_collapsed chip-group-with-categorieschip_three_toolbar_collapsed"
283
+ aria-label="Remove"
284
+ id="chip-group-with-categoriesremove_chip_three_toolbar_collapsed"
285
+ >
286
+ <i class="fas fa-times" aria-hidden="true"></i>
287
+ </button>
288
+ </span>
241
289
  </div>
242
290
  </li>
243
291
  </ul>
@@ -263,58 +311,72 @@ cssPrefix: pf-c-chip-group
263
311
  >
264
312
  <li class="pf-c-chip-group__list-item">
265
313
  <div class="pf-c-chip">
266
- <span
267
- class="pf-c-chip__text"
268
- id="chip-group-with-categories-overflowchip_one_toolbar_collapsed"
269
- >Chip one</span>
270
- <button
271
- class="pf-c-button pf-m-plain"
272
- type="button"
273
- aria-labelledby="chip-group-with-categories-overflowremove_chip_one_toolbar_collapsed chip-group-with-categories-overflowchip_one_toolbar_collapsed"
274
- aria-label="Remove"
275
- id="chip-group-with-categories-overflowremove_chip_one_toolbar_collapsed"
276
- >
277
- <i class="fas fa-times" aria-hidden="true"></i>
278
- </button>
314
+ <span class="pf-c-chip__content">
315
+ <span
316
+ class="pf-c-chip__text"
317
+ id="chip-group-with-categories-overflowchip_one_toolbar_collapsed"
318
+ >Chip one</span>
319
+ </span>
320
+ <span class="pf-c-chip__actions">
321
+ <button
322
+ class="pf-c-button pf-m-plain"
323
+ type="button"
324
+ aria-labelledby="chip-group-with-categories-overflowremove_chip_one_toolbar_collapsed chip-group-with-categories-overflowchip_one_toolbar_collapsed"
325
+ aria-label="Remove"
326
+ id="chip-group-with-categories-overflowremove_chip_one_toolbar_collapsed"
327
+ >
328
+ <i class="fas fa-times" aria-hidden="true"></i>
329
+ </button>
330
+ </span>
279
331
  </div>
280
332
  </li>
281
333
  <li class="pf-c-chip-group__list-item">
282
334
  <div class="pf-c-chip">
283
- <span
284
- class="pf-c-chip__text"
285
- id="chip-group-with-categories-overflowchip_two_toolbar_collapsed"
286
- >Chip two</span>
287
- <button
288
- class="pf-c-button pf-m-plain"
289
- type="button"
290
- aria-labelledby="chip-group-with-categories-overflowremove_chip_two_toolbar_collapsed chip-group-with-categories-overflowchip_two_toolbar_collapsed"
291
- aria-label="Remove"
292
- id="chip-group-with-categories-overflowremove_chip_two_toolbar_collapsed"
293
- >
294
- <i class="fas fa-times" aria-hidden="true"></i>
295
- </button>
335
+ <span class="pf-c-chip__content">
336
+ <span
337
+ class="pf-c-chip__text"
338
+ id="chip-group-with-categories-overflowchip_two_toolbar_collapsed"
339
+ >Chip two</span>
340
+ </span>
341
+ <span class="pf-c-chip__actions">
342
+ <button
343
+ class="pf-c-button pf-m-plain"
344
+ type="button"
345
+ aria-labelledby="chip-group-with-categories-overflowremove_chip_two_toolbar_collapsed chip-group-with-categories-overflowchip_two_toolbar_collapsed"
346
+ aria-label="Remove"
347
+ id="chip-group-with-categories-overflowremove_chip_two_toolbar_collapsed"
348
+ >
349
+ <i class="fas fa-times" aria-hidden="true"></i>
350
+ </button>
351
+ </span>
296
352
  </div>
297
353
  </li>
298
354
  <li class="pf-c-chip-group__list-item">
299
355
  <div class="pf-c-chip">
300
- <span
301
- class="pf-c-chip__text"
302
- id="chip-group-with-categories-overflowchip_three_toolbar_collapsed"
303
- >Chip three</span>
304
- <button
305
- class="pf-c-button pf-m-plain"
306
- type="button"
307
- aria-labelledby="chip-group-with-categories-overflowremove_chip_three_toolbar_collapsed chip-group-with-categories-overflowchip_three_toolbar_collapsed"
308
- aria-label="Remove"
309
- id="chip-group-with-categories-overflowremove_chip_three_toolbar_collapsed"
310
- >
311
- <i class="fas fa-times" aria-hidden="true"></i>
312
- </button>
356
+ <span class="pf-c-chip__content">
357
+ <span
358
+ class="pf-c-chip__text"
359
+ id="chip-group-with-categories-overflowchip_three_toolbar_collapsed"
360
+ >Chip three</span>
361
+ </span>
362
+ <span class="pf-c-chip__actions">
363
+ <button
364
+ class="pf-c-button pf-m-plain"
365
+ type="button"
366
+ aria-labelledby="chip-group-with-categories-overflowremove_chip_three_toolbar_collapsed chip-group-with-categories-overflowchip_three_toolbar_collapsed"
367
+ aria-label="Remove"
368
+ id="chip-group-with-categories-overflowremove_chip_three_toolbar_collapsed"
369
+ >
370
+ <i class="fas fa-times" aria-hidden="true"></i>
371
+ </button>
372
+ </span>
313
373
  </div>
314
374
  </li>
315
375
  <li class="pf-c-chip-group__list-item">
316
376
  <button class="pf-c-chip pf-m-overflow">
317
- <span class="pf-c-chip__text">2 more</span>
377
+ <span class="pf-c-chip__content">
378
+ <span class="pf-c-chip__text">2 more</span>
379
+ </span>
318
380
  </button>
319
381
  </li>
320
382
  </ul>
@@ -340,92 +402,114 @@ cssPrefix: pf-c-chip-group
340
402
  >
341
403
  <li class="pf-c-chip-group__list-item">
342
404
  <div class="pf-c-chip">
343
- <span
344
- class="pf-c-chip__text"
345
- id="chip-group-with-categories-overflow-expandedchip_one_toolbar"
346
- >Chip one</span>
347
- <button
348
- class="pf-c-button pf-m-plain"
349
- type="button"
350
- aria-labelledby="chip-group-with-categories-overflow-expandedremove_chip_one_toolbar chip-group-with-categories-overflow-expandedchip_one_toolbar"
351
- aria-label="Remove"
352
- id="chip-group-with-categories-overflow-expandedremove_chip_one_toolbar"
353
- >
354
- <i class="fas fa-times" aria-hidden="true"></i>
355
- </button>
405
+ <span class="pf-c-chip__content">
406
+ <span
407
+ class="pf-c-chip__text"
408
+ id="chip-group-with-categories-overflow-expandedchip_one_toolbar"
409
+ >Chip one</span>
410
+ </span>
411
+ <span class="pf-c-chip__actions">
412
+ <button
413
+ class="pf-c-button pf-m-plain"
414
+ type="button"
415
+ aria-labelledby="chip-group-with-categories-overflow-expandedremove_chip_one_toolbar chip-group-with-categories-overflow-expandedchip_one_toolbar"
416
+ aria-label="Remove"
417
+ id="chip-group-with-categories-overflow-expandedremove_chip_one_toolbar"
418
+ >
419
+ <i class="fas fa-times" aria-hidden="true"></i>
420
+ </button>
421
+ </span>
356
422
  </div>
357
423
  </li>
358
424
  <li class="pf-c-chip-group__list-item">
359
425
  <div class="pf-c-chip">
360
- <span
361
- class="pf-c-chip__text"
362
- id="chip-group-with-categories-overflow-expandedchip_two_toolbar"
363
- >Chip two</span>
364
- <button
365
- class="pf-c-button pf-m-plain"
366
- type="button"
367
- aria-labelledby="chip-group-with-categories-overflow-expandedremove_chip_two_toolbar chip-group-with-categories-overflow-expandedchip_two_toolbar"
368
- aria-label="Remove"
369
- id="chip-group-with-categories-overflow-expandedremove_chip_two_toolbar"
370
- >
371
- <i class="fas fa-times" aria-hidden="true"></i>
372
- </button>
426
+ <span class="pf-c-chip__content">
427
+ <span
428
+ class="pf-c-chip__text"
429
+ id="chip-group-with-categories-overflow-expandedchip_two_toolbar"
430
+ >Chip two</span>
431
+ </span>
432
+ <span class="pf-c-chip__actions">
433
+ <button
434
+ class="pf-c-button pf-m-plain"
435
+ type="button"
436
+ aria-labelledby="chip-group-with-categories-overflow-expandedremove_chip_two_toolbar chip-group-with-categories-overflow-expandedchip_two_toolbar"
437
+ aria-label="Remove"
438
+ id="chip-group-with-categories-overflow-expandedremove_chip_two_toolbar"
439
+ >
440
+ <i class="fas fa-times" aria-hidden="true"></i>
441
+ </button>
442
+ </span>
373
443
  </div>
374
444
  </li>
375
445
  <li class="pf-c-chip-group__list-item">
376
446
  <div class="pf-c-chip">
377
- <span
378
- class="pf-c-chip__text"
379
- id="chip-group-with-categories-overflow-expandedchip_three_toolbar"
380
- >Chip three</span>
381
- <button
382
- class="pf-c-button pf-m-plain"
383
- type="button"
384
- aria-labelledby="chip-group-with-categories-overflow-expandedremove_chip_three_toolbar chip-group-with-categories-overflow-expandedchip_three_toolbar"
385
- aria-label="Remove"
386
- id="chip-group-with-categories-overflow-expandedremove_chip_three_toolbar"
387
- >
388
- <i class="fas fa-times" aria-hidden="true"></i>
389
- </button>
447
+ <span class="pf-c-chip__content">
448
+ <span
449
+ class="pf-c-chip__text"
450
+ id="chip-group-with-categories-overflow-expandedchip_three_toolbar"
451
+ >Chip three</span>
452
+ </span>
453
+ <span class="pf-c-chip__actions">
454
+ <button
455
+ class="pf-c-button pf-m-plain"
456
+ type="button"
457
+ aria-labelledby="chip-group-with-categories-overflow-expandedremove_chip_three_toolbar chip-group-with-categories-overflow-expandedchip_three_toolbar"
458
+ aria-label="Remove"
459
+ id="chip-group-with-categories-overflow-expandedremove_chip_three_toolbar"
460
+ >
461
+ <i class="fas fa-times" aria-hidden="true"></i>
462
+ </button>
463
+ </span>
390
464
  </div>
391
465
  </li>
392
466
  <li class="pf-c-chip-group__list-item">
393
467
  <div class="pf-c-chip">
394
- <span
395
- class="pf-c-chip__text"
396
- id="chip-group-with-categories-overflow-expandedchip_four_toolbar"
397
- >Chip four</span>
398
- <button
399
- class="pf-c-button pf-m-plain"
400
- type="button"
401
- aria-labelledby="chip-group-with-categories-overflow-expandedremove_chip_four_toolbar chip-group-with-categories-overflow-expandedchip_four_toolbar"
402
- aria-label="Remove"
403
- id="chip-group-with-categories-overflow-expandedremove_chip_four_toolbar"
404
- >
405
- <i class="fas fa-times" aria-hidden="true"></i>
406
- </button>
468
+ <span class="pf-c-chip__content">
469
+ <span
470
+ class="pf-c-chip__text"
471
+ id="chip-group-with-categories-overflow-expandedchip_four_toolbar"
472
+ >Chip four</span>
473
+ </span>
474
+ <span class="pf-c-chip__actions">
475
+ <button
476
+ class="pf-c-button pf-m-plain"
477
+ type="button"
478
+ aria-labelledby="chip-group-with-categories-overflow-expandedremove_chip_four_toolbar chip-group-with-categories-overflow-expandedchip_four_toolbar"
479
+ aria-label="Remove"
480
+ id="chip-group-with-categories-overflow-expandedremove_chip_four_toolbar"
481
+ >
482
+ <i class="fas fa-times" aria-hidden="true"></i>
483
+ </button>
484
+ </span>
407
485
  </div>
408
486
  </li>
409
487
  <li class="pf-c-chip-group__list-item">
410
488
  <div class="pf-c-chip">
411
- <span
412
- class="pf-c-chip__text"
413
- id="chip-group-with-categories-overflow-expandedchip_five_select"
414
- >Chip five</span>
415
- <button
416
- class="pf-c-button pf-m-plain"
417
- type="button"
418
- aria-labelledby="chip-group-with-categories-overflow-expandedremove_chip_five_select chip-group-with-categories-overflow-expandedchip_five_select"
419
- aria-label="Remove"
420
- id="chip-group-with-categories-overflow-expandedremove_chip_five_select"
421
- >
422
- <i class="fas fa-times" aria-hidden="true"></i>
423
- </button>
489
+ <span class="pf-c-chip__content">
490
+ <span
491
+ class="pf-c-chip__text"
492
+ id="chip-group-with-categories-overflow-expandedchip_five_select"
493
+ >Chip five</span>
494
+ </span>
495
+ <span class="pf-c-chip__actions">
496
+ <button
497
+ class="pf-c-button pf-m-plain"
498
+ type="button"
499
+ aria-labelledby="chip-group-with-categories-overflow-expandedremove_chip_five_select chip-group-with-categories-overflow-expandedchip_five_select"
500
+ aria-label="Remove"
501
+ id="chip-group-with-categories-overflow-expandedremove_chip_five_select"
502
+ >
503
+ <i class="fas fa-times" aria-hidden="true"></i>
504
+ </button>
505
+ </span>
424
506
  </div>
425
507
  </li>
426
508
  <li class="pf-c-chip-group__list-item">
427
509
  <button class="pf-c-chip pf-m-overflow">
428
- <span class="pf-c-chip__text">Show less</span>
510
+ <span class="pf-c-chip__content">
511
+ <span class="pf-c-chip__text">Show less</span>
512
+ </span>
429
513
  </button>
430
514
  </li>
431
515
  </ul>
@@ -451,104 +535,128 @@ cssPrefix: pf-c-chip-group
451
535
  >
452
536
  <li class="pf-c-chip-group__list-item">
453
537
  <div class="pf-c-chip">
454
- <span
455
- class="pf-c-chip__text"
456
- id="chip-group-with-categories-removablechip_one_toolbar"
457
- >Chip one</span>
458
- <button
459
- class="pf-c-button pf-m-plain"
460
- type="button"
461
- aria-labelledby="chip-group-with-categories-removableremove_chip_one_toolbar chip-group-with-categories-removablechip_one_toolbar"
462
- aria-label="Remove"
463
- id="chip-group-with-categories-removableremove_chip_one_toolbar"
464
- >
465
- <i class="fas fa-times" aria-hidden="true"></i>
466
- </button>
538
+ <span class="pf-c-chip__content">
539
+ <span
540
+ class="pf-c-chip__text"
541
+ id="chip-group-with-categories-removablechip_one_toolbar"
542
+ >Chip one</span>
543
+ </span>
544
+ <span class="pf-c-chip__actions">
545
+ <button
546
+ class="pf-c-button pf-m-plain"
547
+ type="button"
548
+ aria-labelledby="chip-group-with-categories-removableremove_chip_one_toolbar chip-group-with-categories-removablechip_one_toolbar"
549
+ aria-label="Remove"
550
+ id="chip-group-with-categories-removableremove_chip_one_toolbar"
551
+ >
552
+ <i class="fas fa-times" aria-hidden="true"></i>
553
+ </button>
554
+ </span>
467
555
  </div>
468
556
  </li>
469
557
  <li class="pf-c-chip-group__list-item">
470
558
  <div class="pf-c-chip">
471
- <span
472
- class="pf-c-chip__text"
473
- id="chip-group-with-categories-removablechip_two_toolbar"
474
- >Chip two</span>
475
- <button
476
- class="pf-c-button pf-m-plain"
477
- type="button"
478
- aria-labelledby="chip-group-with-categories-removableremove_chip_two_toolbar chip-group-with-categories-removablechip_two_toolbar"
479
- aria-label="Remove"
480
- id="chip-group-with-categories-removableremove_chip_two_toolbar"
481
- >
482
- <i class="fas fa-times" aria-hidden="true"></i>
483
- </button>
559
+ <span class="pf-c-chip__content">
560
+ <span
561
+ class="pf-c-chip__text"
562
+ id="chip-group-with-categories-removablechip_two_toolbar"
563
+ >Chip two</span>
564
+ </span>
565
+ <span class="pf-c-chip__actions">
566
+ <button
567
+ class="pf-c-button pf-m-plain"
568
+ type="button"
569
+ aria-labelledby="chip-group-with-categories-removableremove_chip_two_toolbar chip-group-with-categories-removablechip_two_toolbar"
570
+ aria-label="Remove"
571
+ id="chip-group-with-categories-removableremove_chip_two_toolbar"
572
+ >
573
+ <i class="fas fa-times" aria-hidden="true"></i>
574
+ </button>
575
+ </span>
484
576
  </div>
485
577
  </li>
486
578
  <li class="pf-c-chip-group__list-item">
487
579
  <div class="pf-c-chip">
488
- <span
489
- class="pf-c-chip__text"
490
- id="chip-group-with-categories-removablechip_three_toolbar"
491
- >Chip three</span>
492
- <button
493
- class="pf-c-button pf-m-plain"
494
- type="button"
495
- aria-labelledby="chip-group-with-categories-removableremove_chip_three_toolbar chip-group-with-categories-removablechip_three_toolbar"
496
- aria-label="Remove"
497
- id="chip-group-with-categories-removableremove_chip_three_toolbar"
498
- >
499
- <i class="fas fa-times" aria-hidden="true"></i>
500
- </button>
580
+ <span class="pf-c-chip__content">
581
+ <span
582
+ class="pf-c-chip__text"
583
+ id="chip-group-with-categories-removablechip_three_toolbar"
584
+ >Chip three</span>
585
+ </span>
586
+ <span class="pf-c-chip__actions">
587
+ <button
588
+ class="pf-c-button pf-m-plain"
589
+ type="button"
590
+ aria-labelledby="chip-group-with-categories-removableremove_chip_three_toolbar chip-group-with-categories-removablechip_three_toolbar"
591
+ aria-label="Remove"
592
+ id="chip-group-with-categories-removableremove_chip_three_toolbar"
593
+ >
594
+ <i class="fas fa-times" aria-hidden="true"></i>
595
+ </button>
596
+ </span>
501
597
  </div>
502
598
  </li>
503
599
  <li class="pf-c-chip-group__list-item">
504
600
  <div class="pf-c-chip">
505
- <span
506
- class="pf-c-chip__text"
507
- id="chip-group-with-categories-removablechip_four_toolbar"
508
- >Chip four</span>
509
- <button
510
- class="pf-c-button pf-m-plain"
511
- type="button"
512
- aria-labelledby="chip-group-with-categories-removableremove_chip_four_toolbar chip-group-with-categories-removablechip_four_toolbar"
513
- aria-label="Remove"
514
- id="chip-group-with-categories-removableremove_chip_four_toolbar"
515
- >
516
- <i class="fas fa-times" aria-hidden="true"></i>
517
- </button>
601
+ <span class="pf-c-chip__content">
602
+ <span
603
+ class="pf-c-chip__text"
604
+ id="chip-group-with-categories-removablechip_four_toolbar"
605
+ >Chip four</span>
606
+ </span>
607
+ <span class="pf-c-chip__actions">
608
+ <button
609
+ class="pf-c-button pf-m-plain"
610
+ type="button"
611
+ aria-labelledby="chip-group-with-categories-removableremove_chip_four_toolbar chip-group-with-categories-removablechip_four_toolbar"
612
+ aria-label="Remove"
613
+ id="chip-group-with-categories-removableremove_chip_four_toolbar"
614
+ >
615
+ <i class="fas fa-times" aria-hidden="true"></i>
616
+ </button>
617
+ </span>
518
618
  </div>
519
619
  </li>
520
620
  <li class="pf-c-chip-group__list-item">
521
621
  <div class="pf-c-chip">
522
- <span
523
- class="pf-c-chip__text"
524
- id="chip-group-with-categories-removablechip_five_toolbar"
525
- >Chip five</span>
526
- <button
527
- class="pf-c-button pf-m-plain"
528
- type="button"
529
- aria-labelledby="chip-group-with-categories-removableremove_chip_five_toolbar chip-group-with-categories-removablechip_five_toolbar"
530
- aria-label="Remove"
531
- id="chip-group-with-categories-removableremove_chip_five_toolbar"
532
- >
533
- <i class="fas fa-times" aria-hidden="true"></i>
534
- </button>
622
+ <span class="pf-c-chip__content">
623
+ <span
624
+ class="pf-c-chip__text"
625
+ id="chip-group-with-categories-removablechip_five_toolbar"
626
+ >Chip five</span>
627
+ </span>
628
+ <span class="pf-c-chip__actions">
629
+ <button
630
+ class="pf-c-button pf-m-plain"
631
+ type="button"
632
+ aria-labelledby="chip-group-with-categories-removableremove_chip_five_toolbar chip-group-with-categories-removablechip_five_toolbar"
633
+ aria-label="Remove"
634
+ id="chip-group-with-categories-removableremove_chip_five_toolbar"
635
+ >
636
+ <i class="fas fa-times" aria-hidden="true"></i>
637
+ </button>
638
+ </span>
535
639
  </div>
536
640
  </li>
537
641
  <li class="pf-c-chip-group__list-item">
538
642
  <div class="pf-c-chip">
539
- <span
540
- class="pf-c-chip__text"
541
- id="chip-group-with-categories-removablechip_six_toolbar"
542
- >Chip six</span>
543
- <button
544
- class="pf-c-button pf-m-plain"
545
- type="button"
546
- aria-labelledby="chip-group-with-categories-removableremove_chip_six_toolbar chip-group-with-categories-removablechip_six_toolbar"
547
- aria-label="Remove"
548
- id="chip-group-with-categories-removableremove_chip_six_toolbar"
549
- >
550
- <i class="fas fa-times" aria-hidden="true"></i>
551
- </button>
643
+ <span class="pf-c-chip__content">
644
+ <span
645
+ class="pf-c-chip__text"
646
+ id="chip-group-with-categories-removablechip_six_toolbar"
647
+ >Chip six</span>
648
+ </span>
649
+ <span class="pf-c-chip__actions">
650
+ <button
651
+ class="pf-c-button pf-m-plain"
652
+ type="button"
653
+ aria-labelledby="chip-group-with-categories-removableremove_chip_six_toolbar chip-group-with-categories-removablechip_six_toolbar"
654
+ aria-label="Remove"
655
+ id="chip-group-with-categories-removableremove_chip_six_toolbar"
656
+ >
657
+ <i class="fas fa-times" aria-hidden="true"></i>
658
+ </button>
659
+ </span>
552
660
  </div>
553
661
  </li>
554
662
  </ul>