@patternfly/patternfly 4.163.0 → 4.164.3

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 (22) hide show
  1. package/RELEASE-NOTES.md +31 -0
  2. package/components/Form/form.css +121 -1
  3. package/components/Form/form.scss +26 -1
  4. package/components/Label/label.css +37 -0
  5. package/components/Label/label.scss +43 -0
  6. package/components/MultipleFileUpload/multiple-file-upload.css +180 -0
  7. package/components/MultipleFileUpload/multiple-file-upload.scss +214 -0
  8. package/components/Truncate/truncate.css +46 -0
  9. package/components/Truncate/truncate.scss +56 -0
  10. package/components/_all.scss +2 -0
  11. package/docs/components/Form/examples/Form.md +69 -41
  12. package/docs/components/Label/examples/Label.md +102 -41
  13. package/docs/components/LabelGroup/examples/LabelGroup.md +98 -73
  14. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +685 -0
  15. package/docs/components/Truncate/examples/Truncate.md +71 -0
  16. package/docs/demos/Card/examples/Card.md +22 -0
  17. package/docs/demos/Tabs/examples/Tabs.md +2 -0
  18. package/package.json +1 -1
  19. package/patternfly-no-reset.css +385 -1
  20. package/patternfly.css +385 -1
  21. package/patternfly.min.css +1 -1
  22. package/patternfly.min.css.map +1 -1
package/docs/components/LabelGroup/examples/LabelGroup.md CHANGED
@@ -17,6 +17,7 @@ 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
+
20
21
  Label
21
22
  </span>
22
23
  </span>
@@ -27,6 +28,7 @@ cssPrefix: pf-c-label-group
27
28
  <span class="pf-c-label__icon">
28
29
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
29
30
  </span>
31
+
30
32
  Label 2
31
33
  </span>
32
34
  </span>
@@ -37,6 +39,7 @@ cssPrefix: pf-c-label-group
37
39
  <span class="pf-c-label__icon">
38
40
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
39
41
  </span>
42
+
40
43
  Label 3
41
44
  </span>
42
45
  </span>
@@ -59,6 +62,7 @@ cssPrefix: pf-c-label-group
59
62
  <span class="pf-c-label__icon">
60
63
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
61
64
  </span>
65
+
62
66
  Label
63
67
  </span>
64
68
  </span>
@@ -69,6 +73,7 @@ cssPrefix: pf-c-label-group
69
73
  <span class="pf-c-label__icon">
70
74
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
71
75
  </span>
76
+
72
77
  Label 2
73
78
  </span>
74
79
  </span>
@@ -79,6 +84,7 @@ cssPrefix: pf-c-label-group
79
84
  <span class="pf-c-label__icon">
80
85
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
81
86
  </span>
87
+
82
88
  Label 3
83
89
  </span>
84
90
  </span>
@@ -106,6 +112,7 @@ cssPrefix: pf-c-label-group
106
112
  <span class="pf-c-label__icon">
107
113
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
108
114
  </span>
115
+
109
116
  Label
110
117
  </span>
111
118
  </span>
@@ -116,6 +123,7 @@ cssPrefix: pf-c-label-group
116
123
  <span class="pf-c-label__icon">
117
124
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
118
125
  </span>
126
+
119
127
  Label 2
120
128
  </span>
121
129
  </span>
@@ -126,6 +134,7 @@ cssPrefix: pf-c-label-group
126
134
  <span class="pf-c-label__icon">
127
135
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
128
136
  </span>
137
+
129
138
  Label 3
130
139
  </span>
131
140
  </span>
@@ -136,6 +145,7 @@ cssPrefix: pf-c-label-group
136
145
  <span class="pf-c-label__icon">
137
146
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
138
147
  </span>
148
+
139
149
  Label 3
140
150
  </span>
141
151
  </span>
@@ -146,6 +156,7 @@ cssPrefix: pf-c-label-group
146
156
  <span class="pf-c-label__icon">
147
157
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
148
158
  </span>
159
+
149
160
  Label 3
150
161
  </span>
151
162
  </span>
@@ -182,6 +193,7 @@ cssPrefix: pf-c-label-group
182
193
  <span class="pf-c-label__icon">
183
194
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
184
195
  </span>
196
+
185
197
  Label
186
198
  </span>
187
199
  </span>
@@ -192,6 +204,7 @@ cssPrefix: pf-c-label-group
192
204
  <span class="pf-c-label__icon">
193
205
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
194
206
  </span>
207
+
195
208
  Label 2
196
209
  </span>
197
210
  </span>
@@ -202,6 +215,7 @@ cssPrefix: pf-c-label-group
202
215
  <span class="pf-c-label__icon">
203
216
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
204
217
  </span>
218
+
205
219
  Label 3
206
220
  </span>
207
221
  </span>
@@ -233,6 +247,7 @@ cssPrefix: pf-c-label-group
233
247
  <span class="pf-c-label__icon">
234
248
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
235
249
  </span>
250
+
236
251
  Label
237
252
  </span>
238
253
  </span>
@@ -243,6 +258,7 @@ cssPrefix: pf-c-label-group
243
258
  <span class="pf-c-label__icon">
244
259
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
245
260
  </span>
261
+
246
262
  Label 2
247
263
  </span>
248
264
  </span>
@@ -253,6 +269,7 @@ cssPrefix: pf-c-label-group
253
269
  <span class="pf-c-label__icon">
254
270
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
255
271
  </span>
272
+
256
273
  Label 3
257
274
  </span>
258
275
  </span>
@@ -263,6 +280,7 @@ cssPrefix: pf-c-label-group
263
280
  <span class="pf-c-label__icon">
264
281
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
265
282
  </span>
283
+
266
284
  Label 4
267
285
  </span>
268
286
  </span>
@@ -273,6 +291,7 @@ cssPrefix: pf-c-label-group
273
291
  <span class="pf-c-label__icon">
274
292
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
275
293
  </span>
294
+
276
295
  Label 5
277
296
  </span>
278
297
  </span>
@@ -283,6 +302,7 @@ cssPrefix: pf-c-label-group
283
302
  <span class="pf-c-label__icon">
284
303
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
285
304
  </span>
305
+
286
306
  Label 6
287
307
  </span>
288
308
  </span>
@@ -316,6 +336,7 @@ cssPrefix: pf-c-label-group
316
336
  <span class="pf-c-label__icon">
317
337
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
318
338
  </span>
339
+
319
340
  Label
320
341
  </span>
321
342
  </span>
@@ -326,6 +347,7 @@ cssPrefix: pf-c-label-group
326
347
  <span class="pf-c-label__icon">
327
348
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
328
349
  </span>
350
+
329
351
  Label 2
330
352
  </span>
331
353
  </span>
@@ -336,6 +358,7 @@ cssPrefix: pf-c-label-group
336
358
  <span class="pf-c-label__icon">
337
359
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
338
360
  </span>
361
+
339
362
  Label 3
340
363
  </span>
341
364
  </span>
@@ -358,6 +381,7 @@ cssPrefix: pf-c-label-group
358
381
  <span class="pf-c-label__icon">
359
382
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
360
383
  </span>
384
+
361
385
  Label
362
386
  </span>
363
387
  </span>
@@ -368,6 +392,7 @@ cssPrefix: pf-c-label-group
368
392
  <span class="pf-c-label__icon">
369
393
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
370
394
  </span>
395
+
371
396
  Label 2
372
397
  </span>
373
398
  </span>
@@ -378,6 +403,7 @@ cssPrefix: pf-c-label-group
378
403
  <span class="pf-c-label__icon">
379
404
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
380
405
  </span>
406
+
381
407
  Label 3
382
408
  </span>
383
409
  </span>
@@ -405,6 +431,7 @@ cssPrefix: pf-c-label-group
405
431
  <span class="pf-c-label__icon">
406
432
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
407
433
  </span>
434
+
408
435
  Label
409
436
  </span>
410
437
  </span>
@@ -415,6 +442,7 @@ cssPrefix: pf-c-label-group
415
442
  <span class="pf-c-label__icon">
416
443
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
417
444
  </span>
445
+
418
446
  Label 2
419
447
  </span>
420
448
  </span>
@@ -425,6 +453,7 @@ cssPrefix: pf-c-label-group
425
453
  <span class="pf-c-label__icon">
426
454
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
427
455
  </span>
456
+
428
457
  Label 3
429
458
  </span>
430
459
  </span>
@@ -435,6 +464,7 @@ cssPrefix: pf-c-label-group
435
464
  <span class="pf-c-label__icon">
436
465
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
437
466
  </span>
467
+
438
468
  Label 3
439
469
  </span>
440
470
  </span>
@@ -445,6 +475,7 @@ cssPrefix: pf-c-label-group
445
475
  <span class="pf-c-label__icon">
446
476
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
447
477
  </span>
478
+
448
479
  Label 3
449
480
  </span>
450
481
  </span>
@@ -481,6 +512,7 @@ cssPrefix: pf-c-label-group
481
512
  <span class="pf-c-label__icon">
482
513
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
483
514
  </span>
515
+
484
516
  Label
485
517
  </span>
486
518
  </span>
@@ -491,6 +523,7 @@ cssPrefix: pf-c-label-group
491
523
  <span class="pf-c-label__icon">
492
524
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
493
525
  </span>
526
+
494
527
  Label 2
495
528
  </span>
496
529
  </span>
@@ -501,6 +534,7 @@ cssPrefix: pf-c-label-group
501
534
  <span class="pf-c-label__icon">
502
535
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
503
536
  </span>
537
+
504
538
  Label 3
505
539
  </span>
506
540
  </span>
@@ -571,14 +605,13 @@ In addition to the JavaScript management of [editable labels](/components/label#
571
605
  <li class="pf-c-label-group__list-item">
572
606
  <span class="pf-c-label pf-m-blue pf-m-editable">
573
607
  <span class="pf-c-label__content">
574
- <div class="pf-c-inline-edit">
575
- <div
576
- class="pf-c-inline-edit__editable-text"
577
- role="textbox"
578
- id="editable-labels-editable-group-example-editable-label-editable-1-text"
579
- aria-label="Editable text"
580
- >Editable label 1</div>
581
- </div>
608
+ <button
609
+ class="pf-c-label__editable-text"
610
+ id="editable-labels-editable-group-example-editable-label-editable-1-editable-text"
611
+ currvalue=" Editable label 1
612
+ "
613
+ aria-label="Editable text"
614
+ >Editable label 1</button>
582
615
  </span>
583
616
  <button
584
617
  class="pf-c-button pf-m-plain"
@@ -594,14 +627,13 @@ In addition to the JavaScript management of [editable labels](/components/label#
594
627
  <li class="pf-c-label-group__list-item">
595
628
  <span class="pf-c-label pf-m-blue pf-m-editable">
596
629
  <span class="pf-c-label__content">
597
- <div class="pf-c-inline-edit">
598
- <div
599
- class="pf-c-inline-edit__editable-text"
600
- role="textbox"
601
- id="editable-labels-editable-group-example-editable-label-editable-2-text"
602
- aria-label="Editable text"
603
- >Editable label 2</div>
604
- </div>
630
+ <button
631
+ class="pf-c-label__editable-text"
632
+ id="editable-labels-editable-group-example-editable-label-editable-2-editable-text"
633
+ currvalue=" Editable label 2
634
+ "
635
+ aria-label="Editable text"
636
+ >Editable label 2</button>
605
637
  </span>
606
638
  <button
607
639
  class="pf-c-button pf-m-plain"
@@ -617,14 +649,13 @@ In addition to the JavaScript management of [editable labels](/components/label#
617
649
  <li class="pf-c-label-group__list-item">
618
650
  <span class="pf-c-label pf-m-blue pf-m-editable">
619
651
  <span class="pf-c-label__content">
620
- <div class="pf-c-inline-edit">
621
- <div
622
- class="pf-c-inline-edit__editable-text"
623
- role="textbox"
624
- id="editable-labels-editable-group-example-editable-label-editable-3-text"
625
- aria-label="Editable text"
626
- >Editable label 3</div>
627
- </div>
652
+ <button
653
+ class="pf-c-label__editable-text"
654
+ id="editable-labels-editable-group-example-editable-label-editable-3-editable-text"
655
+ currvalue=" Editable label 3
656
+ "
657
+ aria-label="Editable text"
658
+ >Editable label 3</button>
628
659
  </span>
629
660
  <button
630
661
  class="pf-c-button pf-m-plain"
@@ -660,14 +691,13 @@ In addition to the JavaScript management of [editable labels](/components/label#
660
691
  <li class="pf-c-label-group__list-item">
661
692
  <span class="pf-c-label pf-m-blue pf-m-editable">
662
693
  <span class="pf-c-label__content">
663
- <div class="pf-c-inline-edit">
664
- <div
665
- class="pf-c-inline-edit__editable-text"
666
- role="textbox"
667
- id="editable-labels-label-active-editable-group-example-editable-label-default-1-text"
668
- aria-label="Editable text"
669
- >Editable label 1</div>
670
- </div>
694
+ <button
695
+ class="pf-c-label__editable-text"
696
+ id="editable-labels-label-active-editable-group-example-editable-label-default-1-editable-text"
697
+ currvalue=" Editable label 1
698
+ "
699
+ aria-label="Editable text"
700
+ >Editable label 1</button>
671
701
  </span>
672
702
  <button
673
703
  class="pf-c-button pf-m-plain"
@@ -683,14 +713,13 @@ In addition to the JavaScript management of [editable labels](/components/label#
683
713
  <li class="pf-c-label-group__list-item">
684
714
  <span class="pf-c-label pf-m-blue pf-m-editable">
685
715
  <span class="pf-c-label__content">
686
- <div class="pf-c-inline-edit">
687
- <div
688
- class="pf-c-inline-edit__editable-text"
689
- role="textbox"
690
- id="editable-labels-label-active-editable-group-example-editable-label-default-2-text"
691
- aria-label="Editable text"
692
- >Editable label 2</div>
693
- </div>
716
+ <button
717
+ class="pf-c-label__editable-text"
718
+ id="editable-labels-label-active-editable-group-example-editable-label-default-2-editable-text"
719
+ currvalue=" Editable label 2
720
+ "
721
+ aria-label="Editable text"
722
+ >Editable label 2</button>
694
723
  </span>
695
724
  <button
696
725
  class="pf-c-button pf-m-plain"
@@ -708,15 +737,14 @@ In addition to the JavaScript management of [editable labels](/components/label#
708
737
  class="pf-c-label pf-m-blue pf-m-active pf-m-editable pf-m-editable-active"
709
738
  >
710
739
  <span class="pf-c-label__content">
711
- <div class="pf-c-inline-edit">
712
- <div
713
- class="pf-c-inline-edit__editable-text"
714
- role="textbox"
715
- id="editable-labels-label-active-editable-group-example-editable-label-active-text"
716
- contenteditable="true"
717
- aria-label="Editable text"
718
- >Editable label 3, active</div>
719
- </div>
740
+ <input
741
+ class="pf-c-label__editable-text"
742
+ id="editable-labels-label-active-editable-group-example-editable-label-active-editable-text"
743
+ type="text"
744
+ value=" Editable label 3, active
745
+ "
746
+ aria-label="Editable text"
747
+ />
720
748
  </span>
721
749
  <button
722
750
  class="pf-c-button pf-m-plain"
@@ -842,14 +870,13 @@ In addition to the JavaScript management of [editable labels](/components/label#
842
870
  <li class="pf-c-label-group__list-item">
843
871
  <span class="pf-c-label pf-m-blue pf-m-editable">
844
872
  <span class="pf-c-label__content">
845
- <div class="pf-c-inline-edit">
846
- <div
847
- class="pf-c-inline-edit__editable-text"
848
- role="textbox"
849
- id="static-labels-editable-group-example-editable-label-dynamic-1-text"
850
- aria-label="Editable text"
851
- >Dynamic, editable label 1</div>
852
- </div>
873
+ <button
874
+ class="pf-c-label__editable-text"
875
+ id="static-labels-editable-group-example-editable-label-dynamic-1-editable-text"
876
+ currvalue=" Dynamic, editable label 1
877
+ "
878
+ aria-label="Editable text"
879
+ >Dynamic, editable label 1</button>
853
880
  </span>
854
881
  <button
855
882
  class="pf-c-button pf-m-plain"
@@ -865,14 +892,13 @@ In addition to the JavaScript management of [editable labels](/components/label#
865
892
  <li class="pf-c-label-group__list-item">
866
893
  <span class="pf-c-label pf-m-blue pf-m-editable">
867
894
  <span class="pf-c-label__content">
868
- <div class="pf-c-inline-edit">
869
- <div
870
- class="pf-c-inline-edit__editable-text"
871
- role="textbox"
872
- id="static-labels-editable-group-example-editable-label-dynamic-2-text"
873
- aria-label="Editable text"
874
- >Dynamic, editable label 2</div>
875
- </div>
895
+ <button
896
+ class="pf-c-label__editable-text"
897
+ id="static-labels-editable-group-example-editable-label-dynamic-2-editable-text"
898
+ currvalue=" Dynamic, editable label 2
899
+ "
900
+ aria-label="Editable text"
901
+ >Dynamic, editable label 2</button>
876
902
  </span>
877
903
  <button
878
904
  class="pf-c-button pf-m-plain"
@@ -888,14 +914,13 @@ In addition to the JavaScript management of [editable labels](/components/label#
888
914
  <li class="pf-c-label-group__list-item">
889
915
  <span class="pf-c-label pf-m-blue pf-m-active pf-m-editable">
890
916
  <span class="pf-c-label__content">
891
- <div class="pf-c-inline-edit">
892
- <div
893
- class="pf-c-inline-edit__editable-text"
894
- role="textbox"
895
- id="static-labels-editable-group-example-editable-label-dynamic-3-text"
896
- aria-label="Editable text"
897
- >Dynamic, editable label 3</div>
898
- </div>
917
+ <button
918
+ class="pf-c-label__editable-text"
919
+ id="static-labels-editable-group-example-editable-label-dynamic-3-editable-text"
920
+ currvalue=" Dynamic, editable label 3
921
+ "
922
+ aria-label="Editable text"
923
+ >Dynamic, editable label 3</button>
899
924
  </span>
900
925
  <button
901
926
  class="pf-c-button pf-m-plain"