@patternfly/patternfly 4.142.0 → 4.144.2

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.
@@ -0,0 +1,473 @@
1
+ ---
2
+ id: 'Text input group'
3
+ beta: true
4
+ section: components
5
+ cssPrefix: pf-c-text-input-group
6
+ ---## Examples
7
+
8
+ ### Basic
9
+
10
+ ```html
11
+ <div class="pf-c-text-input-group">
12
+ <div class="pf-c-text-input-group__main">
13
+ <span class="pf-c-text-input-group__text">
14
+ <input
15
+ class="pf-c-text-input-group__text-input"
16
+ type="text"
17
+ value
18
+ aria-label="Type to filter"
19
+ />
20
+ </span>
21
+ </div>
22
+ </div>
23
+
24
+ ```
25
+
26
+ ### Utilities and icon
27
+
28
+ ```html
29
+ <div class="pf-c-text-input-group pf-m-icon">
30
+ <div class="pf-c-text-input-group__main">
31
+ <span class="pf-c-text-input-group__text">
32
+ <span class="pf-c-text-input-group__icon">
33
+ <i class="fas fa-fw fa-search"></i>
34
+ </span>
35
+ <input
36
+ class="pf-c-text-input-group__text-input"
37
+ type="text"
38
+ value
39
+ aria-label="Type to filter"
40
+ />
41
+ </span>
42
+ </div>
43
+ <div class="pf-c-text-input-group__utilities">
44
+ <button
45
+ class="pf-c-button pf-m-plain"
46
+ type="button"
47
+ aria-label="Clear input"
48
+ >
49
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
50
+ </button>
51
+ </div>
52
+ </div>
53
+
54
+ ```
55
+
56
+ ### Filters
57
+
58
+ ```html
59
+ <div class="pf-c-text-input-group">
60
+ <div class="pf-c-text-input-group__main">
61
+ <div class="pf-c-chip-group">
62
+ <div class="pf-c-chip-group__main">
63
+ <ul
64
+ class="pf-c-chip-group__list"
65
+ role="list"
66
+ aria-label="Chip group list"
67
+ >
68
+ <li class="pf-c-chip-group__list-item">
69
+ <div class="pf-c-chip">
70
+ <span
71
+ class="pf-c-chip__text"
72
+ id="-chip-groupchip_one_select_collapsed"
73
+ >Chip one</span>
74
+ <button
75
+ class="pf-c-button pf-m-plain"
76
+ type="button"
77
+ aria-labelledby="-chip-groupremove_chip_one_select_collapsed -chip-groupchip_one_select_collapsed"
78
+ aria-label="Remove"
79
+ id="-chip-groupremove_chip_one_select_collapsed"
80
+ >
81
+ <i class="fas fa-times" aria-hidden="true"></i>
82
+ </button>
83
+ </div>
84
+ </li>
85
+ <li class="pf-c-chip-group__list-item">
86
+ <div class="pf-c-chip">
87
+ <span
88
+ class="pf-c-chip__text"
89
+ id="-chip-groupchip_two_select_collapsed"
90
+ >Chip two</span>
91
+ <button
92
+ class="pf-c-button pf-m-plain"
93
+ type="button"
94
+ aria-labelledby="-chip-groupremove_chip_two_select_collapsed -chip-groupchip_two_select_collapsed"
95
+ aria-label="Remove"
96
+ id="-chip-groupremove_chip_two_select_collapsed"
97
+ >
98
+ <i class="fas fa-times" aria-hidden="true"></i>
99
+ </button>
100
+ </div>
101
+ </li>
102
+ <li class="pf-c-chip-group__list-item">
103
+ <div class="pf-c-chip">
104
+ <span
105
+ class="pf-c-chip__text"
106
+ id="-chip-groupchip_three_select_collapsed"
107
+ >Chip three</span>
108
+ <button
109
+ class="pf-c-button pf-m-plain"
110
+ type="button"
111
+ aria-labelledby="-chip-groupremove_chip_three_select_collapsed -chip-groupchip_three_select_collapsed"
112
+ aria-label="Remove"
113
+ id="-chip-groupremove_chip_three_select_collapsed"
114
+ >
115
+ <i class="fas fa-times" aria-hidden="true"></i>
116
+ </button>
117
+ </div>
118
+ </li>
119
+ <li class="pf-c-chip-group__list-item">
120
+ <div class="pf-c-chip">
121
+ <span
122
+ class="pf-c-chip__text"
123
+ id="-chip-groupchip_four_select_collapsed"
124
+ >Chip four</span>
125
+ <button
126
+ class="pf-c-button pf-m-plain"
127
+ type="button"
128
+ aria-labelledby="-chip-groupremove_chip_four_select_collapsed -chip-groupchip_four_select_collapsed"
129
+ aria-label="Remove"
130
+ id="-chip-groupremove_chip_four_select_collapsed"
131
+ >
132
+ <i class="fas fa-times" aria-hidden="true"></i>
133
+ </button>
134
+ </div>
135
+ </li>
136
+ <li class="pf-c-chip-group__list-item">
137
+ <div class="pf-c-chip">
138
+ <span
139
+ class="pf-c-chip__text"
140
+ id="-chip-groupchip_five_select_collapsed"
141
+ >Chip five</span>
142
+ <button
143
+ class="pf-c-button pf-m-plain"
144
+ type="button"
145
+ aria-labelledby="-chip-groupremove_chip_five_select_collapsed -chip-groupchip_five_select_collapsed"
146
+ aria-label="Remove"
147
+ id="-chip-groupremove_chip_five_select_collapsed"
148
+ >
149
+ <i class="fas fa-times" aria-hidden="true"></i>
150
+ </button>
151
+ </div>
152
+ </li>
153
+ <li class="pf-c-chip-group__list-item">
154
+ <div class="pf-c-chip">
155
+ <span
156
+ class="pf-c-chip__text"
157
+ id="-chip-groupchip_six_select_collapsed"
158
+ >Chip six</span>
159
+ <button
160
+ class="pf-c-button pf-m-plain"
161
+ type="button"
162
+ aria-labelledby="-chip-groupremove_chip_six_select_collapsed -chip-groupchip_six_select_collapsed"
163
+ aria-label="Remove"
164
+ id="-chip-groupremove_chip_six_select_collapsed"
165
+ >
166
+ <i class="fas fa-times" aria-hidden="true"></i>
167
+ </button>
168
+ </div>
169
+ </li>
170
+ <li class="pf-c-chip-group__list-item">
171
+ <button class="pf-c-chip pf-m-overflow">
172
+ <span class="pf-c-chip__text">8 more</span>
173
+ </button>
174
+ </li>
175
+ </ul>
176
+ </div>
177
+ </div>
178
+ <span class="pf-c-text-input-group__text">
179
+ <input
180
+ class="pf-c-text-input-group__text-input"
181
+ type="text"
182
+ value
183
+ aria-label="Type to filter"
184
+ />
185
+ </span>
186
+ </div>
187
+ <div class="pf-c-text-input-group__utilities">
188
+ <button
189
+ class="pf-c-button pf-m-plain"
190
+ type="button"
191
+ aria-label="Clear input"
192
+ >
193
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
194
+ </button>
195
+ </div>
196
+ </div>
197
+
198
+ ```
199
+
200
+ ### Filters expanded
201
+
202
+ ```html
203
+ <div class="pf-c-text-input-group">
204
+ <div class="pf-c-text-input-group__main">
205
+ <div class="pf-c-chip-group">
206
+ <div class="pf-c-chip-group__main">
207
+ <ul
208
+ class="pf-c-chip-group__list"
209
+ role="list"
210
+ aria-label="Chip group list"
211
+ >
212
+ <li class="pf-c-chip-group__list-item">
213
+ <div class="pf-c-chip">
214
+ <span
215
+ class="pf-c-chip__text"
216
+ id="-chip-groupchip_one_select_collapsed"
217
+ >Chip one</span>
218
+ <button
219
+ class="pf-c-button pf-m-plain"
220
+ type="button"
221
+ aria-labelledby="-chip-groupremove_chip_one_select_collapsed -chip-groupchip_one_select_collapsed"
222
+ aria-label="Remove"
223
+ id="-chip-groupremove_chip_one_select_collapsed"
224
+ >
225
+ <i class="fas fa-times" aria-hidden="true"></i>
226
+ </button>
227
+ </div>
228
+ </li>
229
+ <li class="pf-c-chip-group__list-item">
230
+ <div class="pf-c-chip">
231
+ <span
232
+ class="pf-c-chip__text"
233
+ id="-chip-groupchip_two_select_collapsed"
234
+ >Chip two</span>
235
+ <button
236
+ class="pf-c-button pf-m-plain"
237
+ type="button"
238
+ aria-labelledby="-chip-groupremove_chip_two_select_collapsed -chip-groupchip_two_select_collapsed"
239
+ aria-label="Remove"
240
+ id="-chip-groupremove_chip_two_select_collapsed"
241
+ >
242
+ <i class="fas fa-times" aria-hidden="true"></i>
243
+ </button>
244
+ </div>
245
+ </li>
246
+ <li class="pf-c-chip-group__list-item">
247
+ <div class="pf-c-chip">
248
+ <span
249
+ class="pf-c-chip__text"
250
+ id="-chip-groupchip_three_select_collapsed"
251
+ >Chip three</span>
252
+ <button
253
+ class="pf-c-button pf-m-plain"
254
+ type="button"
255
+ aria-labelledby="-chip-groupremove_chip_three_select_collapsed -chip-groupchip_three_select_collapsed"
256
+ aria-label="Remove"
257
+ id="-chip-groupremove_chip_three_select_collapsed"
258
+ >
259
+ <i class="fas fa-times" aria-hidden="true"></i>
260
+ </button>
261
+ </div>
262
+ </li>
263
+ <li class="pf-c-chip-group__list-item">
264
+ <div class="pf-c-chip">
265
+ <span
266
+ class="pf-c-chip__text"
267
+ id="-chip-groupchip_four_select_collapsed"
268
+ >Chip four</span>
269
+ <button
270
+ class="pf-c-button pf-m-plain"
271
+ type="button"
272
+ aria-labelledby="-chip-groupremove_chip_four_select_collapsed -chip-groupchip_four_select_collapsed"
273
+ aria-label="Remove"
274
+ id="-chip-groupremove_chip_four_select_collapsed"
275
+ >
276
+ <i class="fas fa-times" aria-hidden="true"></i>
277
+ </button>
278
+ </div>
279
+ </li>
280
+ <li class="pf-c-chip-group__list-item">
281
+ <div class="pf-c-chip">
282
+ <span
283
+ class="pf-c-chip__text"
284
+ id="-chip-groupchip_five_select_collapsed"
285
+ >Chip five</span>
286
+ <button
287
+ class="pf-c-button pf-m-plain"
288
+ type="button"
289
+ aria-labelledby="-chip-groupremove_chip_five_select_collapsed -chip-groupchip_five_select_collapsed"
290
+ aria-label="Remove"
291
+ id="-chip-groupremove_chip_five_select_collapsed"
292
+ >
293
+ <i class="fas fa-times" aria-hidden="true"></i>
294
+ </button>
295
+ </div>
296
+ </li>
297
+ <li class="pf-c-chip-group__list-item">
298
+ <div class="pf-c-chip">
299
+ <span
300
+ class="pf-c-chip__text"
301
+ id="-chip-groupchip_six_select_collapsed"
302
+ >Chip six</span>
303
+ <button
304
+ class="pf-c-button pf-m-plain"
305
+ type="button"
306
+ aria-labelledby="-chip-groupremove_chip_six_select_collapsed -chip-groupchip_six_select_collapsed"
307
+ aria-label="Remove"
308
+ id="-chip-groupremove_chip_six_select_collapsed"
309
+ >
310
+ <i class="fas fa-times" aria-hidden="true"></i>
311
+ </button>
312
+ </div>
313
+ </li>
314
+ <li class="pf-c-chip-group__list-item">
315
+ <div class="pf-c-chip">
316
+ <span
317
+ class="pf-c-chip__text"
318
+ id="-chip-groupchip_seven_select_collapsed"
319
+ >Chip seven</span>
320
+ <button
321
+ class="pf-c-button pf-m-plain"
322
+ type="button"
323
+ aria-labelledby="-chip-groupremove_chip_seven_select_collapsed -chip-groupchip_seven_select_collapsed"
324
+ aria-label="Remove"
325
+ id="-chip-groupremove_chip_seven_select_collapsed"
326
+ >
327
+ <i class="fas fa-times" aria-hidden="true"></i>
328
+ </button>
329
+ </div>
330
+ </li>
331
+ <li class="pf-c-chip-group__list-item">
332
+ <div class="pf-c-chip">
333
+ <span
334
+ class="pf-c-chip__text"
335
+ id="-chip-groupchip_eight_select_collapsed"
336
+ >Chip eight</span>
337
+ <button
338
+ class="pf-c-button pf-m-plain"
339
+ type="button"
340
+ aria-labelledby="-chip-groupremove_chip_eight_select_collapsed -chip-groupchip_eight_select_collapsed"
341
+ aria-label="Remove"
342
+ id="-chip-groupremove_chip_eight_select_collapsed"
343
+ >
344
+ <i class="fas fa-times" aria-hidden="true"></i>
345
+ </button>
346
+ </div>
347
+ </li>
348
+ <li class="pf-c-chip-group__list-item">
349
+ <div class="pf-c-chip">
350
+ <span
351
+ class="pf-c-chip__text"
352
+ id="-chip-groupchip_nine_select_collapsed"
353
+ >Chip nine</span>
354
+ <button
355
+ class="pf-c-button pf-m-plain"
356
+ type="button"
357
+ aria-labelledby="-chip-groupremove_chip_nine_select_collapsed -chip-groupchip_nine_select_collapsed"
358
+ aria-label="Remove"
359
+ id="-chip-groupremove_chip_nine_select_collapsed"
360
+ >
361
+ <i class="fas fa-times" aria-hidden="true"></i>
362
+ </button>
363
+ </div>
364
+ </li>
365
+ <li class="pf-c-chip-group__list-item">
366
+ <div class="pf-c-chip">
367
+ <span
368
+ class="pf-c-chip__text"
369
+ id="-chip-groupchip_ten_select_collapsed"
370
+ >Chip ten</span>
371
+ <button
372
+ class="pf-c-button pf-m-plain"
373
+ type="button"
374
+ aria-labelledby="-chip-groupremove_chip_ten_select_collapsed -chip-groupchip_ten_select_collapsed"
375
+ aria-label="Remove"
376
+ id="-chip-groupremove_chip_ten_select_collapsed"
377
+ >
378
+ <i class="fas fa-times" aria-hidden="true"></i>
379
+ </button>
380
+ </div>
381
+ </li>
382
+ <li class="pf-c-chip-group__list-item">
383
+ <div class="pf-c-chip">
384
+ <span
385
+ class="pf-c-chip__text"
386
+ id="-chip-groupchip_eleven_select_collapsed"
387
+ >Chip eleven</span>
388
+ <button
389
+ class="pf-c-button pf-m-plain"
390
+ type="button"
391
+ aria-labelledby="-chip-groupremove_chip_eleven_select_collapsed -chip-groupchip_eleven_select_collapsed"
392
+ aria-label="Remove"
393
+ id="-chip-groupremove_chip_eleven_select_collapsed"
394
+ >
395
+ <i class="fas fa-times" aria-hidden="true"></i>
396
+ </button>
397
+ </div>
398
+ </li>
399
+ <li class="pf-c-chip-group__list-item">
400
+ <div class="pf-c-chip">
401
+ <span
402
+ class="pf-c-chip__text"
403
+ id="-chip-groupchip_twelve_select_collapsed"
404
+ >Chip twelve</span>
405
+ <button
406
+ class="pf-c-button pf-m-plain"
407
+ type="button"
408
+ aria-labelledby="-chip-groupremove_chip_twelve_select_collapsed -chip-groupchip_twelve_select_collapsed"
409
+ aria-label="Remove"
410
+ id="-chip-groupremove_chip_twelve_select_collapsed"
411
+ >
412
+ <i class="fas fa-times" aria-hidden="true"></i>
413
+ </button>
414
+ </div>
415
+ </li>
416
+ <li class="pf-c-chip-group__list-item">
417
+ <div class="pf-c-chip">
418
+ <span
419
+ class="pf-c-chip__text"
420
+ id="-chip-groupchip_thirteen_select_collapsed"
421
+ >Chip thirteen</span>
422
+ <button
423
+ class="pf-c-button pf-m-plain"
424
+ type="button"
425
+ aria-labelledby="-chip-groupremove_chip_thirteen_select_collapsed -chip-groupchip_thirteen_select_collapsed"
426
+ aria-label="Remove"
427
+ id="-chip-groupremove_chip_thirteen_select_collapsed"
428
+ >
429
+ <i class="fas fa-times" aria-hidden="true"></i>
430
+ </button>
431
+ </div>
432
+ </li>
433
+ <li class="pf-c-chip-group__list-item">
434
+ <div class="pf-c-chip">
435
+ <span
436
+ class="pf-c-chip__text"
437
+ id="-chip-groupchip_fourteen_select_collapsed"
438
+ >Chip fourteen</span>
439
+ <button
440
+ class="pf-c-button pf-m-plain"
441
+ type="button"
442
+ aria-labelledby="-chip-groupremove_chip_fourteen_select_collapsed -chip-groupchip_fourteen_select_collapsed"
443
+ aria-label="Remove"
444
+ id="-chip-groupremove_chip_fourteen_select_collapsed"
445
+ >
446
+ <i class="fas fa-times" aria-hidden="true"></i>
447
+ </button>
448
+ </div>
449
+ </li>
450
+ </ul>
451
+ </div>
452
+ </div>
453
+ <span class="pf-c-text-input-group__text">
454
+ <input
455
+ class="pf-c-text-input-group__text-input"
456
+ type="text"
457
+ value
458
+ aria-label="Type to filter"
459
+ />
460
+ </span>
461
+ </div>
462
+ <div class="pf-c-text-input-group__utilities">
463
+ <button
464
+ class="pf-c-button pf-m-plain"
465
+ type="button"
466
+ aria-label="Clear input"
467
+ >
468
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
469
+ </button>
470
+ </div>
471
+ </div>
472
+
473
+ ```