@patternfly/patternfly 4.173.0 → 4.176.1
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.
- package/components/AlertGroup/alert-group.css +36 -0
- package/components/AlertGroup/alert-group.scss +41 -0
- package/components/Label/label.css +43 -12
- package/components/Label/label.scss +45 -13
- package/components/TextInputGroup/text-input-group.css +4 -0
- package/components/TextInputGroup/text-input-group.scss +5 -0
- package/docs/components/AlertGroup/examples/AlertGroup.md +8 -3
- package/docs/components/Label/examples/Label.md +33 -67
- package/docs/components/LabelGroup/examples/LabelGroup.md +64 -107
- package/docs/components/Table/examples/Table.md +175 -0
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +2 -1
- package/docs/demos/Card/examples/Card.md +0 -22
- package/docs/demos/Tabs/examples/Tabs.md +0 -2
- package/package.json +1 -1
- package/patternfly-no-reset.css +83 -12
- package/patternfly.css +83 -12
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -17,7 +17,6 @@ cssPrefix: pf-c-label-group
|
|
|
17
17
|
<span class="pf-c-label__icon">
|
|
18
18
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
19
19
|
</span>
|
|
20
|
-
|
|
21
20
|
Label
|
|
22
21
|
</span>
|
|
23
22
|
</span>
|
|
@@ -28,7 +27,6 @@ cssPrefix: pf-c-label-group
|
|
|
28
27
|
<span class="pf-c-label__icon">
|
|
29
28
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
30
29
|
</span>
|
|
31
|
-
|
|
32
30
|
Label 2
|
|
33
31
|
</span>
|
|
34
32
|
</span>
|
|
@@ -39,7 +37,6 @@ cssPrefix: pf-c-label-group
|
|
|
39
37
|
<span class="pf-c-label__icon">
|
|
40
38
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
41
39
|
</span>
|
|
42
|
-
|
|
43
40
|
Label 3
|
|
44
41
|
</span>
|
|
45
42
|
</span>
|
|
@@ -62,7 +59,6 @@ cssPrefix: pf-c-label-group
|
|
|
62
59
|
<span class="pf-c-label__icon">
|
|
63
60
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
64
61
|
</span>
|
|
65
|
-
|
|
66
62
|
Label
|
|
67
63
|
</span>
|
|
68
64
|
</span>
|
|
@@ -73,7 +69,6 @@ cssPrefix: pf-c-label-group
|
|
|
73
69
|
<span class="pf-c-label__icon">
|
|
74
70
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
75
71
|
</span>
|
|
76
|
-
|
|
77
72
|
Label 2
|
|
78
73
|
</span>
|
|
79
74
|
</span>
|
|
@@ -84,7 +79,6 @@ cssPrefix: pf-c-label-group
|
|
|
84
79
|
<span class="pf-c-label__icon">
|
|
85
80
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
86
81
|
</span>
|
|
87
|
-
|
|
88
82
|
Label 3
|
|
89
83
|
</span>
|
|
90
84
|
</span>
|
|
@@ -112,7 +106,6 @@ cssPrefix: pf-c-label-group
|
|
|
112
106
|
<span class="pf-c-label__icon">
|
|
113
107
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
114
108
|
</span>
|
|
115
|
-
|
|
116
109
|
Label
|
|
117
110
|
</span>
|
|
118
111
|
</span>
|
|
@@ -123,7 +116,6 @@ cssPrefix: pf-c-label-group
|
|
|
123
116
|
<span class="pf-c-label__icon">
|
|
124
117
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
125
118
|
</span>
|
|
126
|
-
|
|
127
119
|
Label 2
|
|
128
120
|
</span>
|
|
129
121
|
</span>
|
|
@@ -134,7 +126,6 @@ cssPrefix: pf-c-label-group
|
|
|
134
126
|
<span class="pf-c-label__icon">
|
|
135
127
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
136
128
|
</span>
|
|
137
|
-
|
|
138
129
|
Label 3
|
|
139
130
|
</span>
|
|
140
131
|
</span>
|
|
@@ -145,7 +136,6 @@ cssPrefix: pf-c-label-group
|
|
|
145
136
|
<span class="pf-c-label__icon">
|
|
146
137
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
147
138
|
</span>
|
|
148
|
-
|
|
149
139
|
Label 3
|
|
150
140
|
</span>
|
|
151
141
|
</span>
|
|
@@ -156,7 +146,6 @@ cssPrefix: pf-c-label-group
|
|
|
156
146
|
<span class="pf-c-label__icon">
|
|
157
147
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
158
148
|
</span>
|
|
159
|
-
|
|
160
149
|
Label 3
|
|
161
150
|
</span>
|
|
162
151
|
</span>
|
|
@@ -193,7 +182,6 @@ cssPrefix: pf-c-label-group
|
|
|
193
182
|
<span class="pf-c-label__icon">
|
|
194
183
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
195
184
|
</span>
|
|
196
|
-
|
|
197
185
|
Label
|
|
198
186
|
</span>
|
|
199
187
|
</span>
|
|
@@ -204,7 +192,6 @@ cssPrefix: pf-c-label-group
|
|
|
204
192
|
<span class="pf-c-label__icon">
|
|
205
193
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
206
194
|
</span>
|
|
207
|
-
|
|
208
195
|
Label 2
|
|
209
196
|
</span>
|
|
210
197
|
</span>
|
|
@@ -215,7 +202,6 @@ cssPrefix: pf-c-label-group
|
|
|
215
202
|
<span class="pf-c-label__icon">
|
|
216
203
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
217
204
|
</span>
|
|
218
|
-
|
|
219
205
|
Label 3
|
|
220
206
|
</span>
|
|
221
207
|
</span>
|
|
@@ -247,7 +233,6 @@ cssPrefix: pf-c-label-group
|
|
|
247
233
|
<span class="pf-c-label__icon">
|
|
248
234
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
249
235
|
</span>
|
|
250
|
-
|
|
251
236
|
Label
|
|
252
237
|
</span>
|
|
253
238
|
</span>
|
|
@@ -258,7 +243,6 @@ cssPrefix: pf-c-label-group
|
|
|
258
243
|
<span class="pf-c-label__icon">
|
|
259
244
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
260
245
|
</span>
|
|
261
|
-
|
|
262
246
|
Label 2
|
|
263
247
|
</span>
|
|
264
248
|
</span>
|
|
@@ -269,7 +253,6 @@ cssPrefix: pf-c-label-group
|
|
|
269
253
|
<span class="pf-c-label__icon">
|
|
270
254
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
271
255
|
</span>
|
|
272
|
-
|
|
273
256
|
Label 3
|
|
274
257
|
</span>
|
|
275
258
|
</span>
|
|
@@ -280,7 +263,6 @@ cssPrefix: pf-c-label-group
|
|
|
280
263
|
<span class="pf-c-label__icon">
|
|
281
264
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
282
265
|
</span>
|
|
283
|
-
|
|
284
266
|
Label 4
|
|
285
267
|
</span>
|
|
286
268
|
</span>
|
|
@@ -291,7 +273,6 @@ cssPrefix: pf-c-label-group
|
|
|
291
273
|
<span class="pf-c-label__icon">
|
|
292
274
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
293
275
|
</span>
|
|
294
|
-
|
|
295
276
|
Label 5
|
|
296
277
|
</span>
|
|
297
278
|
</span>
|
|
@@ -302,7 +283,6 @@ cssPrefix: pf-c-label-group
|
|
|
302
283
|
<span class="pf-c-label__icon">
|
|
303
284
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
304
285
|
</span>
|
|
305
|
-
|
|
306
286
|
Label 6
|
|
307
287
|
</span>
|
|
308
288
|
</span>
|
|
@@ -336,7 +316,6 @@ cssPrefix: pf-c-label-group
|
|
|
336
316
|
<span class="pf-c-label__icon">
|
|
337
317
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
338
318
|
</span>
|
|
339
|
-
|
|
340
319
|
Label
|
|
341
320
|
</span>
|
|
342
321
|
</span>
|
|
@@ -347,7 +326,6 @@ cssPrefix: pf-c-label-group
|
|
|
347
326
|
<span class="pf-c-label__icon">
|
|
348
327
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
349
328
|
</span>
|
|
350
|
-
|
|
351
329
|
Label 2
|
|
352
330
|
</span>
|
|
353
331
|
</span>
|
|
@@ -358,7 +336,6 @@ cssPrefix: pf-c-label-group
|
|
|
358
336
|
<span class="pf-c-label__icon">
|
|
359
337
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
360
338
|
</span>
|
|
361
|
-
|
|
362
339
|
Label 3
|
|
363
340
|
</span>
|
|
364
341
|
</span>
|
|
@@ -381,7 +358,6 @@ cssPrefix: pf-c-label-group
|
|
|
381
358
|
<span class="pf-c-label__icon">
|
|
382
359
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
383
360
|
</span>
|
|
384
|
-
|
|
385
361
|
Label
|
|
386
362
|
</span>
|
|
387
363
|
</span>
|
|
@@ -392,7 +368,6 @@ cssPrefix: pf-c-label-group
|
|
|
392
368
|
<span class="pf-c-label__icon">
|
|
393
369
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
394
370
|
</span>
|
|
395
|
-
|
|
396
371
|
Label 2
|
|
397
372
|
</span>
|
|
398
373
|
</span>
|
|
@@ -403,7 +378,6 @@ cssPrefix: pf-c-label-group
|
|
|
403
378
|
<span class="pf-c-label__icon">
|
|
404
379
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
405
380
|
</span>
|
|
406
|
-
|
|
407
381
|
Label 3
|
|
408
382
|
</span>
|
|
409
383
|
</span>
|
|
@@ -431,7 +405,6 @@ cssPrefix: pf-c-label-group
|
|
|
431
405
|
<span class="pf-c-label__icon">
|
|
432
406
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
433
407
|
</span>
|
|
434
|
-
|
|
435
408
|
Label
|
|
436
409
|
</span>
|
|
437
410
|
</span>
|
|
@@ -442,7 +415,6 @@ cssPrefix: pf-c-label-group
|
|
|
442
415
|
<span class="pf-c-label__icon">
|
|
443
416
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
444
417
|
</span>
|
|
445
|
-
|
|
446
418
|
Label 2
|
|
447
419
|
</span>
|
|
448
420
|
</span>
|
|
@@ -453,7 +425,6 @@ cssPrefix: pf-c-label-group
|
|
|
453
425
|
<span class="pf-c-label__icon">
|
|
454
426
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
455
427
|
</span>
|
|
456
|
-
|
|
457
428
|
Label 3
|
|
458
429
|
</span>
|
|
459
430
|
</span>
|
|
@@ -464,7 +435,6 @@ cssPrefix: pf-c-label-group
|
|
|
464
435
|
<span class="pf-c-label__icon">
|
|
465
436
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
466
437
|
</span>
|
|
467
|
-
|
|
468
438
|
Label 3
|
|
469
439
|
</span>
|
|
470
440
|
</span>
|
|
@@ -475,7 +445,6 @@ cssPrefix: pf-c-label-group
|
|
|
475
445
|
<span class="pf-c-label__icon">
|
|
476
446
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
477
447
|
</span>
|
|
478
|
-
|
|
479
448
|
Label 3
|
|
480
449
|
</span>
|
|
481
450
|
</span>
|
|
@@ -512,7 +481,6 @@ cssPrefix: pf-c-label-group
|
|
|
512
481
|
<span class="pf-c-label__icon">
|
|
513
482
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
514
483
|
</span>
|
|
515
|
-
|
|
516
484
|
Label
|
|
517
485
|
</span>
|
|
518
486
|
</span>
|
|
@@ -523,7 +491,6 @@ cssPrefix: pf-c-label-group
|
|
|
523
491
|
<span class="pf-c-label__icon">
|
|
524
492
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
525
493
|
</span>
|
|
526
|
-
|
|
527
494
|
Label 2
|
|
528
495
|
</span>
|
|
529
496
|
</span>
|
|
@@ -534,7 +501,6 @@ cssPrefix: pf-c-label-group
|
|
|
534
501
|
<span class="pf-c-label__icon">
|
|
535
502
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
536
503
|
</span>
|
|
537
|
-
|
|
538
504
|
Label 3
|
|
539
505
|
</span>
|
|
540
506
|
</span>
|
|
@@ -604,15 +570,14 @@ In addition to the JavaScript management of [editable labels](/components/label#
|
|
|
604
570
|
<ul class="pf-c-label-group__list" role="list" aria-label="Group of labels">
|
|
605
571
|
<li class="pf-c-label-group__list-item">
|
|
606
572
|
<span class="pf-c-label pf-m-blue pf-m-editable">
|
|
607
|
-
<
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
currvalue=" Editable label 1
|
|
573
|
+
<button
|
|
574
|
+
class="pf-c-label__content"
|
|
575
|
+
id="editable-labels-editable-group-example-editable-label-editable-1-editable-content"
|
|
576
|
+
currvalue=" Editable label 1
|
|
612
577
|
"
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
578
|
+
aria-label="Editable text"
|
|
579
|
+
>Editable label 1</button>
|
|
580
|
+
|
|
616
581
|
<button
|
|
617
582
|
class="pf-c-button pf-m-plain"
|
|
618
583
|
type="button"
|
|
@@ -626,15 +591,14 @@ In addition to the JavaScript management of [editable labels](/components/label#
|
|
|
626
591
|
</li>
|
|
627
592
|
<li class="pf-c-label-group__list-item">
|
|
628
593
|
<span class="pf-c-label pf-m-blue pf-m-editable">
|
|
629
|
-
<
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
currvalue=" Editable label 2
|
|
594
|
+
<button
|
|
595
|
+
class="pf-c-label__content"
|
|
596
|
+
id="editable-labels-editable-group-example-editable-label-editable-2-editable-content"
|
|
597
|
+
currvalue=" Editable label 2
|
|
634
598
|
"
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
599
|
+
aria-label="Editable text"
|
|
600
|
+
>Editable label 2</button>
|
|
601
|
+
|
|
638
602
|
<button
|
|
639
603
|
class="pf-c-button pf-m-plain"
|
|
640
604
|
type="button"
|
|
@@ -648,15 +612,14 @@ In addition to the JavaScript management of [editable labels](/components/label#
|
|
|
648
612
|
</li>
|
|
649
613
|
<li class="pf-c-label-group__list-item">
|
|
650
614
|
<span class="pf-c-label pf-m-blue pf-m-editable">
|
|
651
|
-
<
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
currvalue=" Editable label 3
|
|
615
|
+
<button
|
|
616
|
+
class="pf-c-label__content"
|
|
617
|
+
id="editable-labels-editable-group-example-editable-label-editable-3-editable-content"
|
|
618
|
+
currvalue=" Editable label 3
|
|
656
619
|
"
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
620
|
+
aria-label="Editable text"
|
|
621
|
+
>Editable label 3</button>
|
|
622
|
+
|
|
660
623
|
<button
|
|
661
624
|
class="pf-c-button pf-m-plain"
|
|
662
625
|
type="button"
|
|
@@ -690,15 +653,14 @@ In addition to the JavaScript management of [editable labels](/components/label#
|
|
|
690
653
|
<ul class="pf-c-label-group__list" role="list" aria-label="Group of labels">
|
|
691
654
|
<li class="pf-c-label-group__list-item">
|
|
692
655
|
<span class="pf-c-label pf-m-blue pf-m-editable">
|
|
693
|
-
<
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
currvalue=" Editable label 1
|
|
656
|
+
<button
|
|
657
|
+
class="pf-c-label__content"
|
|
658
|
+
id="editable-labels-label-active-editable-group-example-editable-label-default-1-editable-content"
|
|
659
|
+
currvalue=" Editable label 1
|
|
698
660
|
"
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
661
|
+
aria-label="Editable text"
|
|
662
|
+
>Editable label 1</button>
|
|
663
|
+
|
|
702
664
|
<button
|
|
703
665
|
class="pf-c-button pf-m-plain"
|
|
704
666
|
type="button"
|
|
@@ -712,15 +674,14 @@ In addition to the JavaScript management of [editable labels](/components/label#
|
|
|
712
674
|
</li>
|
|
713
675
|
<li class="pf-c-label-group__list-item">
|
|
714
676
|
<span class="pf-c-label pf-m-blue pf-m-editable">
|
|
715
|
-
<
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
currvalue=" Editable label 2
|
|
677
|
+
<button
|
|
678
|
+
class="pf-c-label__content"
|
|
679
|
+
id="editable-labels-label-active-editable-group-example-editable-label-default-2-editable-content"
|
|
680
|
+
currvalue=" Editable label 2
|
|
720
681
|
"
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
682
|
+
aria-label="Editable text"
|
|
683
|
+
>Editable label 2</button>
|
|
684
|
+
|
|
724
685
|
<button
|
|
725
686
|
class="pf-c-button pf-m-plain"
|
|
726
687
|
type="button"
|
|
@@ -736,16 +697,15 @@ In addition to the JavaScript management of [editable labels](/components/label#
|
|
|
736
697
|
<span
|
|
737
698
|
class="pf-c-label pf-m-blue pf-m-active pf-m-editable pf-m-editable-active"
|
|
738
699
|
>
|
|
739
|
-
<
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
value=" Editable label 3, active
|
|
700
|
+
<input
|
|
701
|
+
class="pf-c-label__content"
|
|
702
|
+
id="editable-labels-label-active-editable-group-example-editable-label-active-editable-content"
|
|
703
|
+
type="text"
|
|
704
|
+
value=" Editable label 3, active
|
|
745
705
|
"
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
706
|
+
aria-label="Editable text"
|
|
707
|
+
/>
|
|
708
|
+
|
|
749
709
|
<button
|
|
750
710
|
class="pf-c-button pf-m-plain"
|
|
751
711
|
type="button"
|
|
@@ -869,15 +829,14 @@ In addition to the JavaScript management of [editable labels](/components/label#
|
|
|
869
829
|
</li>
|
|
870
830
|
<li class="pf-c-label-group__list-item">
|
|
871
831
|
<span class="pf-c-label pf-m-blue pf-m-editable">
|
|
872
|
-
<
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
currvalue=" Dynamic, editable label 1
|
|
832
|
+
<button
|
|
833
|
+
class="pf-c-label__content"
|
|
834
|
+
id="static-labels-editable-group-example-editable-label-dynamic-1-editable-content"
|
|
835
|
+
currvalue=" Dynamic, editable label 1
|
|
877
836
|
"
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
837
|
+
aria-label="Editable text"
|
|
838
|
+
>Dynamic, editable label 1</button>
|
|
839
|
+
|
|
881
840
|
<button
|
|
882
841
|
class="pf-c-button pf-m-plain"
|
|
883
842
|
type="button"
|
|
@@ -891,15 +850,14 @@ In addition to the JavaScript management of [editable labels](/components/label#
|
|
|
891
850
|
</li>
|
|
892
851
|
<li class="pf-c-label-group__list-item">
|
|
893
852
|
<span class="pf-c-label pf-m-blue pf-m-editable">
|
|
894
|
-
<
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
currvalue=" Dynamic, editable label 2
|
|
853
|
+
<button
|
|
854
|
+
class="pf-c-label__content"
|
|
855
|
+
id="static-labels-editable-group-example-editable-label-dynamic-2-editable-content"
|
|
856
|
+
currvalue=" Dynamic, editable label 2
|
|
899
857
|
"
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
858
|
+
aria-label="Editable text"
|
|
859
|
+
>Dynamic, editable label 2</button>
|
|
860
|
+
|
|
903
861
|
<button
|
|
904
862
|
class="pf-c-button pf-m-plain"
|
|
905
863
|
type="button"
|
|
@@ -913,15 +871,14 @@ In addition to the JavaScript management of [editable labels](/components/label#
|
|
|
913
871
|
</li>
|
|
914
872
|
<li class="pf-c-label-group__list-item">
|
|
915
873
|
<span class="pf-c-label pf-m-blue pf-m-active pf-m-editable">
|
|
916
|
-
<
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
currvalue=" Dynamic, editable label 3
|
|
874
|
+
<button
|
|
875
|
+
class="pf-c-label__content"
|
|
876
|
+
id="static-labels-editable-group-example-editable-label-dynamic-3-editable-content"
|
|
877
|
+
currvalue=" Dynamic, editable label 3
|
|
921
878
|
"
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
879
|
+
aria-label="Editable text"
|
|
880
|
+
>Dynamic, editable label 3</button>
|
|
881
|
+
|
|
925
882
|
<button
|
|
926
883
|
class="pf-c-button pf-m-plain"
|
|
927
884
|
type="button"
|
|
@@ -236,6 +236,181 @@ These classes can be used to ensure that the table changes between the tabular a
|
|
|
236
236
|
| `.fa-long-arrow-alt-up` | `.pf-c-table__sort > .pf-c-table__button > .pf-c-table__sort-indicator > .fas` | Initiates icon within ascending sorted and selected, sortable table header. **Required for sortable table columns** |
|
|
237
237
|
| `.fa-long-arrow-alt-down` | `.pf-c-table__sort > .pf-c-table__button > .pf-c-table__sort-indicator > .fas` | Initiates icon within descending sorted and selected, sortable table header. **Required for sortable table columns** |
|
|
238
238
|
|
|
239
|
+
### Overflow menu usage, mobile
|
|
240
|
+
|
|
241
|
+
```html
|
|
242
|
+
<table
|
|
243
|
+
class="pf-c-table pf-m-grid"
|
|
244
|
+
role="grid"
|
|
245
|
+
aria-label="This is a simple table example"
|
|
246
|
+
id="table-with-expanded-overflow-menu-mobile"
|
|
247
|
+
>
|
|
248
|
+
<caption>This is the table caption</caption>
|
|
249
|
+
<thead>
|
|
250
|
+
<tr role="row">
|
|
251
|
+
<th role="columnheader" scope="col">Repositories</th>
|
|
252
|
+
<th role="columnheader" scope="col">Branches</th>
|
|
253
|
+
<th role="columnheader" scope="col">Pull requests</th>
|
|
254
|
+
<th
|
|
255
|
+
class="pf-m-action pf-m-fit-content pf-c-table__action"
|
|
256
|
+
role="columnheader"
|
|
257
|
+
scope="col"
|
|
258
|
+
>Overflow actions</th>
|
|
259
|
+
</tr>
|
|
260
|
+
</thead>
|
|
261
|
+
|
|
262
|
+
<tbody role="rowgroup">
|
|
263
|
+
<tr role="row">
|
|
264
|
+
<td role="cell" data-label="Repository name">Repository 1</td>
|
|
265
|
+
<td role="cell" data-label="Branches">10</td>
|
|
266
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
267
|
+
<td class="pf-c-table__action" role="cell">
|
|
268
|
+
<div
|
|
269
|
+
class="pf-c-overflow-menu"
|
|
270
|
+
id="table-with-expanded-overflow-menu-mobile-overflow-menu-1"
|
|
271
|
+
>
|
|
272
|
+
<div class="pf-c-overflow-menu__control">
|
|
273
|
+
<div class="pf-c-dropdown pf-m-expanded">
|
|
274
|
+
<button
|
|
275
|
+
class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
|
|
276
|
+
type="button"
|
|
277
|
+
id="table-with-expanded-overflow-menu-mobile-overflow-menu-1-dropdown-toggle"
|
|
278
|
+
aria-label="Generic options"
|
|
279
|
+
aria-expanded="true"
|
|
280
|
+
>
|
|
281
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
282
|
+
</button>
|
|
283
|
+
<ul
|
|
284
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
285
|
+
aria-labelledby="table-with-expanded-overflow-menu-mobile-overflow-menu-1-dropdown-toggle"
|
|
286
|
+
>
|
|
287
|
+
<li>
|
|
288
|
+
<button class="pf-c-dropdown__menu-item">Start</button>
|
|
289
|
+
</li>
|
|
290
|
+
<li>
|
|
291
|
+
<button class="pf-c-dropdown__menu-item">Stop</button>
|
|
292
|
+
</li>
|
|
293
|
+
</ul>
|
|
294
|
+
</div>
|
|
295
|
+
</div>
|
|
296
|
+
</div>
|
|
297
|
+
</td>
|
|
298
|
+
</tr>
|
|
299
|
+
|
|
300
|
+
<tr role="row">
|
|
301
|
+
<td role="cell" data-label="Repository name">Repository 2</td>
|
|
302
|
+
<td role="cell" data-label="Branches">10</td>
|
|
303
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
304
|
+
<td class="pf-c-table__action" role="cell">
|
|
305
|
+
<div
|
|
306
|
+
class="pf-c-overflow-menu"
|
|
307
|
+
id="table-with-expanded-overflow-menu-mobile-overflow-menu-2"
|
|
308
|
+
>
|
|
309
|
+
<div class="pf-c-overflow-menu__control">
|
|
310
|
+
<div class="pf-c-dropdown">
|
|
311
|
+
<button
|
|
312
|
+
class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
|
|
313
|
+
type="button"
|
|
314
|
+
id="table-with-expanded-overflow-menu-mobile-overflow-menu-2-dropdown-toggle"
|
|
315
|
+
aria-label="Generic options"
|
|
316
|
+
aria-expanded="true"
|
|
317
|
+
>
|
|
318
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
319
|
+
</button>
|
|
320
|
+
<ul
|
|
321
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
322
|
+
aria-labelledby="table-with-expanded-overflow-menu-mobile-overflow-menu-2-dropdown-toggle"
|
|
323
|
+
hidden
|
|
324
|
+
>
|
|
325
|
+
<li>
|
|
326
|
+
<button class="pf-c-dropdown__menu-item">Start</button>
|
|
327
|
+
</li>
|
|
328
|
+
<li>
|
|
329
|
+
<button class="pf-c-dropdown__menu-item">Stop</button>
|
|
330
|
+
</li>
|
|
331
|
+
</ul>
|
|
332
|
+
</div>
|
|
333
|
+
</div>
|
|
334
|
+
</div>
|
|
335
|
+
</td>
|
|
336
|
+
</tr>
|
|
337
|
+
</tbody>
|
|
338
|
+
</table>
|
|
339
|
+
|
|
340
|
+
```
|
|
341
|
+
|
|
342
|
+
### Overflow menu usage, desktop
|
|
343
|
+
|
|
344
|
+
```html
|
|
345
|
+
<table
|
|
346
|
+
class="pf-c-table"
|
|
347
|
+
aria-label="This is a simple table example"
|
|
348
|
+
id="table-with-expanded-overflow-menu-desktop"
|
|
349
|
+
>
|
|
350
|
+
<caption>This is the table caption</caption>
|
|
351
|
+
<thead>
|
|
352
|
+
<tr>
|
|
353
|
+
<th scope="col">Repositories</th>
|
|
354
|
+
<th scope="col">Branches</th>
|
|
355
|
+
<th scope="col">Pull requests</th>
|
|
356
|
+
<th
|
|
357
|
+
class="pf-m-action pf-m-fit-content pf-c-table__action"
|
|
358
|
+
scope="col"
|
|
359
|
+
>Overflow actions</th>
|
|
360
|
+
</tr>
|
|
361
|
+
</thead>
|
|
362
|
+
|
|
363
|
+
<tbody>
|
|
364
|
+
<tr>
|
|
365
|
+
<td role="cell" data-label="Repository name">Repository 1</td>
|
|
366
|
+
<td role="cell" data-label="Branches">10</td>
|
|
367
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
368
|
+
<td class="pf-c-table__action" role="cell">
|
|
369
|
+
<div
|
|
370
|
+
class="pf-c-overflow-menu"
|
|
371
|
+
id="table-with-expanded-overflow-menu-desktop-overflow-menu-1"
|
|
372
|
+
>
|
|
373
|
+
<div class="pf-c-overflow-menu__content">
|
|
374
|
+
<div class="pf-c-overflow-menu__group pf-m-button-group">
|
|
375
|
+
<div class="pf-c-overflow-menu__item">
|
|
376
|
+
<button class="pf-c-button pf-m-primary" type="button">Start</button>
|
|
377
|
+
</div>
|
|
378
|
+
<div class="pf-c-overflow-menu__item">
|
|
379
|
+
<button class="pf-c-button pf-m-secondary" type="button">Stop</button>
|
|
380
|
+
</div>
|
|
381
|
+
</div>
|
|
382
|
+
</div>
|
|
383
|
+
</div>
|
|
384
|
+
</td>
|
|
385
|
+
</tr>
|
|
386
|
+
|
|
387
|
+
<tr>
|
|
388
|
+
<td role="cell" data-label="Repository name">Repository 2</td>
|
|
389
|
+
<td role="cell" data-label="Branches">10</td>
|
|
390
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
391
|
+
<td class="pf-c-table__action" role="cell">
|
|
392
|
+
<div
|
|
393
|
+
class="pf-c-overflow-menu"
|
|
394
|
+
id="table-with-expanded-overflow-menu-desktop-overflow-menu-2"
|
|
395
|
+
>
|
|
396
|
+
<div class="pf-c-overflow-menu__content">
|
|
397
|
+
<div class="pf-c-overflow-menu__group pf-m-button-group">
|
|
398
|
+
<div class="pf-c-overflow-menu__item">
|
|
399
|
+
<button class="pf-c-button pf-m-primary" type="button">Start</button>
|
|
400
|
+
</div>
|
|
401
|
+
<div class="pf-c-overflow-menu__item">
|
|
402
|
+
<button class="pf-c-button pf-m-secondary" type="button">Stop</button>
|
|
403
|
+
</div>
|
|
404
|
+
</div>
|
|
405
|
+
</div>
|
|
406
|
+
</div>
|
|
407
|
+
</td>
|
|
408
|
+
</tr>
|
|
409
|
+
</tbody>
|
|
410
|
+
</table>
|
|
411
|
+
|
|
412
|
+
```
|
|
413
|
+
|
|
239
414
|
## With checkboxes, radio select, and actions
|
|
240
415
|
|
|
241
416
|
### Checkboxes and actions example
|
|
@@ -42,7 +42,7 @@ cssPrefix: pf-c-text-input-group
|
|
|
42
42
|
|
|
43
43
|
```
|
|
44
44
|
|
|
45
|
-
### Utilities and icon
|
|
45
|
+
### Utilities and icon with placeholder text
|
|
46
46
|
|
|
47
47
|
```html
|
|
48
48
|
<div class="pf-c-text-input-group">
|
|
@@ -56,6 +56,7 @@ cssPrefix: pf-c-text-input-group
|
|
|
56
56
|
type="text"
|
|
57
57
|
value
|
|
58
58
|
aria-label="Type to filter"
|
|
59
|
+
placeholder="placeholder"
|
|
59
60
|
/>
|
|
60
61
|
</span>
|
|
61
62
|
</div>
|