@patternfly/patternfly 4.166.3 → 4.168.0

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 (18) hide show
  1. package/components/DescriptionList/description-list.css +18 -0
  2. package/components/DescriptionList/description-list.scss +19 -0
  3. package/components/Table/table.css +8 -0
  4. package/components/Table/table.scss +16 -0
  5. package/components/Truncate/truncate.css +14 -26
  6. package/components/Truncate/truncate.scss +13 -32
  7. package/docs/components/DescriptionList/examples/DescriptionList.md +73 -131
  8. package/docs/components/Table/examples/Table.md +899 -253
  9. package/docs/components/Truncate/examples/Truncate.css +9 -0
  10. package/docs/components/Truncate/examples/Truncate.md +16 -25
  11. package/docs/demos/Card/examples/Card.md +95 -139
  12. package/docs/demos/Tabs/examples/Tabs.md +25 -67
  13. package/package.json +1 -1
  14. package/patternfly-no-reset.css +40 -26
  15. package/patternfly.css +40 -26
  16. package/patternfly.min.css +1 -1
  17. package/patternfly.min.css.map +1 -1
  18. package/docs/pages/modifiers.md +0 -86
package/docs/components/Truncate/examples/Truncate.css ADDED
@@ -0,0 +1,9 @@
1
+ .pf-c-truncate--example {
2
+ width: 320px;
3
+ resize: horizontal;
4
+ overflow: auto;
5
+ min-width: 161px;
6
+ max-width: 100%;
7
+ padding: var(--pf-global--spacer--md);
8
+ border: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
9
+ }
package/docs/components/Truncate/examples/Truncate.md CHANGED
@@ -3,7 +3,9 @@ id: 'Truncate'
3
3
  beta: true
4
4
  section: components
5
5
  cssPrefix: pf-c-truncate
6
- ---## Examples
6
+ ---import './Truncate.css'
7
+
8
+ ## Examples
7
9
 
8
10
  ### Notes
9
11
 
@@ -12,13 +14,11 @@ The truncate component contains two child elements, `.pf-c-truncate__start` and
12
14
  ### Default
13
15
 
14
16
  ```html
15
- <div style="width: 220px; resize: horizontal; overflow: auto;">
17
+ <div class="pf-c-truncate--example">
16
18
  <span class="pf-c-truncate">
17
- <span class="pf-c-truncate__start">
18
- <span
19
- class="pf-c-truncate__text"
20
- >Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.</span>
21
- </span>
19
+ <span
20
+ class="pf-c-truncate__start"
21
+ >Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.</span>
22
22
  </span>
23
23
  </div>
24
24
 
@@ -27,17 +27,12 @@ The truncate component contains two child elements, `.pf-c-truncate__start` and
27
27
  ### Middle
28
28
 
29
29
  ```html
30
- <div style="width: 226px; resize: horizontal; overflow: auto;">
30
+ <div class="pf-c-truncate--example">
31
31
  <span class="pf-c-truncate">
32
- <span class="pf-c-truncate__start">
33
- <span class="pf-c-truncate__text">redhat_logo_black_and_white_reversed_</span>
34
- </span>
35
- <span class="pf-c-truncate__end">
36
- <span
37
- class="pf-c-truncate__text"
38
- style="--pf-c-truncate--FontSize: 1rem"
39
- >simple_with_fedora_container.zip</span>
40
- </span>
32
+ <span
33
+ class="pf-c-truncate__start"
34
+ >redhat_logo_black_and_white_reversed_simple_with_fedora_con</span>
35
+ <span class="pf-c-truncate__end">tainer.zip</span>
41
36
  </span>
42
37
  </div>
43
38
 
@@ -46,14 +41,11 @@ The truncate component contains two child elements, `.pf-c-truncate__start` and
46
41
  ### Start
47
42
 
48
43
  ```html
49
- <div style="width: 220px; resize: horizontal; overflow: auto;">
44
+ <div class="pf-c-truncate--example">
50
45
  <span class="pf-c-truncate">
51
- <span class="pf-c-truncate__end">
52
- <span
53
- class="pf-c-truncate__text"
54
- style="--pf-c-truncate--FontSize: 1rem"
55
- >Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.&lrm;</span>
56
- </span>
46
+ <span
47
+ class="pf-c-truncate__end"
48
+ >Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.&lrm;</span>
57
49
  </span>
58
50
  </div>
59
51
 
@@ -68,4 +60,3 @@ The truncate component contains two child elements, `.pf-c-truncate__start` and
68
60
  | `.pf-c-truncate` | `<span>` | Initiates the truncate component. |
69
61
  | `.pf-c-truncate__start` | `<span>` | Defines the truncate component starting text. |
70
62
  | `.pf-c-truncate__end` | `<span>` | Defines the truncate component ending text. |
71
- | `.pf-c-truncate__text` | `<span>` | Defines the truncate component text. |
package/docs/demos/Card/examples/Card.md CHANGED
@@ -388,9 +388,7 @@ wrapperTag: div
388
388
  <div class="pf-c-card__body">
389
389
  <dl class="pf-c-description-list">
390
390
  <div class="pf-c-description-list__group">
391
- <dt class="pf-c-description-list__term">
392
- <span class="pf-c-description-list__text">Cluster API Address</span>
393
- </dt>
391
+ <dt class="pf-c-description-list__term">Cluster API Address</dt>
394
392
  <dd class="pf-c-description-list__description">
395
393
  <div class="pf-c-description-list__text">
396
394
  <a href="#">https://api1.devcluster.openshift.com</a>
@@ -398,9 +396,7 @@ wrapperTag: div
398
396
  </dd>
399
397
  </div>
400
398
  <div class="pf-c-description-list__group">
401
- <dt class="pf-c-description-list__term">
402
- <span class="pf-c-description-list__text">Cluster ID</span>
403
- </dt>
399
+ <dt class="pf-c-description-list__term">Cluster ID</dt>
404
400
  <dd class="pf-c-description-list__description">
405
401
  <div
406
402
  class="pf-c-description-list__text"
@@ -408,25 +404,19 @@ wrapperTag: div
408
404
  </dd>
409
405
  </div>
410
406
  <div class="pf-c-description-list__group">
411
- <dt class="pf-c-description-list__term">
412
- <span class="pf-c-description-list__text">Provider</span>
413
- </dt>
407
+ <dt class="pf-c-description-list__term">Provider</dt>
414
408
  <dd class="pf-c-description-list__description">
415
409
  <div class="pf-c-description-list__text">AWS</div>
416
410
  </dd>
417
411
  </div>
418
412
  <div class="pf-c-description-list__group">
419
- <dt class="pf-c-description-list__term">
420
- <span class="pf-c-description-list__text">OpenShift Version</span>
421
- </dt>
413
+ <dt class="pf-c-description-list__term">OpenShift Version</dt>
422
414
  <dd class="pf-c-description-list__description">
423
415
  <div class="pf-c-description-list__text">4.5.0.ci-2020-06-16-015028</div>
424
416
  </dd>
425
417
  </div>
426
418
  <div class="pf-c-description-list__group">
427
- <dt class="pf-c-description-list__term">
428
- <span class="pf-c-description-list__text">Update Channel</span>
429
- </dt>
419
+ <dt class="pf-c-description-list__term">Update Channel</dt>
430
420
  <dd class="pf-c-description-list__description">
431
421
  <div class="pf-c-description-list__text">stable-4.5</div>
432
422
  </dd>
@@ -445,9 +435,7 @@ wrapperTag: div
445
435
  <div class="pf-c-card__body">
446
436
  <dl class="pf-c-description-list">
447
437
  <div class="pf-c-description-list__group">
448
- <dt class="pf-c-description-list__term">
449
- <span class="pf-c-description-list__text">Cluster API Address</span>
450
- </dt>
438
+ <dt class="pf-c-description-list__term">Cluster API Address</dt>
451
439
  <dd class="pf-c-description-list__description">
452
440
  <div class="pf-c-description-list__text">
453
441
  <a href="#">https://api2.devcluster.openshift.com</a>
@@ -455,9 +443,7 @@ wrapperTag: div
455
443
  </dd>
456
444
  </div>
457
445
  <div class="pf-c-description-list__group">
458
- <dt class="pf-c-description-list__term">
459
- <span class="pf-c-description-list__text">Cluster ID</span>
460
- </dt>
446
+ <dt class="pf-c-description-list__term">Cluster ID</dt>
461
447
  <dd class="pf-c-description-list__description">
462
448
  <div
463
449
  class="pf-c-description-list__text"
@@ -465,25 +451,19 @@ wrapperTag: div
465
451
  </dd>
466
452
  </div>
467
453
  <div class="pf-c-description-list__group">
468
- <dt class="pf-c-description-list__term">
469
- <span class="pf-c-description-list__text">Provider</span>
470
- </dt>
454
+ <dt class="pf-c-description-list__term">Provider</dt>
471
455
  <dd class="pf-c-description-list__description">
472
456
  <div class="pf-c-description-list__text">Azure</div>
473
457
  </dd>
474
458
  </div>
475
459
  <div class="pf-c-description-list__group">
476
- <dt class="pf-c-description-list__term">
477
- <span class="pf-c-description-list__text">OpenShift Version</span>
478
- </dt>
460
+ <dt class="pf-c-description-list__term">OpenShift Version</dt>
479
461
  <dd class="pf-c-description-list__description">
480
462
  <div class="pf-c-description-list__text">4.5.0.ci-2020-06-16-015026</div>
481
463
  </dd>
482
464
  </div>
483
465
  <div class="pf-c-description-list__group">
484
- <dt class="pf-c-description-list__term">
485
- <span class="pf-c-description-list__text">Update Channel</span>
486
- </dt>
466
+ <dt class="pf-c-description-list__term">Update Channel</dt>
487
467
  <dd class="pf-c-description-list__description">
488
468
  <div class="pf-c-description-list__text">stable-4.4</div>
489
469
  </dd>
@@ -772,24 +752,22 @@ wrapperTag: div
772
752
  <div class="pf-c-description-list__group">
773
753
  <dt class="pf-c-description-list__term">
774
754
  <span class="pf-c-description-list__text">
775
- <span class="pf-c-description-list__text">
776
- <div class="pf-l-grid">
777
- <div class="pf-l-grid__item pf-m-3-col">
778
- <span
779
- class="pf-c-spinner pf-m-md"
780
- role="progressbar"
781
- aria-label="Loading"
782
- >
783
- <span class="pf-c-spinner__clipper"></span>
784
- <span class="pf-c-spinner__lead-ball"></span>
785
- <span class="pf-c-spinner__tail-ball"></span>
786
- </span>
787
- </div>
788
- <div class="pf-l-grid__item pf-m-9-col">
789
- <h3 class="pf-c-title pf-m-md">Running</h3>
790
- </div>
755
+ <div class="pf-l-grid">
756
+ <div class="pf-l-grid__item pf-m-3-col">
757
+ <span
758
+ class="pf-c-spinner pf-m-md"
759
+ role="progressbar"
760
+ aria-label="Loading"
761
+ >
762
+ <span class="pf-c-spinner__clipper"></span>
763
+ <span class="pf-c-spinner__lead-ball"></span>
764
+ <span class="pf-c-spinner__tail-ball"></span>
765
+ </span>
791
766
  </div>
792
- </span>
767
+ <div class="pf-l-grid__item pf-m-9-col">
768
+ <h3 class="pf-c-title pf-m-md">Running</h3>
769
+ </div>
770
+ </div>
793
771
  </span>
794
772
  </dt>
795
773
  <dd class="pf-c-description-list__description">
@@ -804,16 +782,14 @@ wrapperTag: div
804
782
  <div class="pf-c-description-list__group">
805
783
  <dt class="pf-c-description-list__term">
806
784
  <span class="pf-c-description-list__text">
807
- <span class="pf-c-description-list__text">
808
- <div class="pf-l-flex">
809
- <div class="pf-l-flex__item">
810
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
811
- </div>
812
- <div class="pf-l-flex__item">
813
- <h3 class="pf-c-title pf-m-md">Ready</h3>
814
- </div>
785
+ <div class="pf-l-flex">
786
+ <div class="pf-l-flex__item">
787
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
815
788
  </div>
816
- </span>
789
+ <div class="pf-l-flex__item">
790
+ <h3 class="pf-c-title pf-m-md">Ready</h3>
791
+ </div>
792
+ </div>
817
793
  </span>
818
794
  </dt>
819
795
  <dd class="pf-c-description-list__description">
@@ -828,24 +804,22 @@ wrapperTag: div
828
804
  <div class="pf-c-description-list__group">
829
805
  <dt class="pf-c-description-list__term">
830
806
  <span class="pf-c-description-list__text">
831
- <span class="pf-c-description-list__text">
832
- <div class="pf-l-grid">
833
- <div class="pf-l-grid__item pf-m-3-col">
834
- <span
835
- class="pf-c-spinner pf-m-md"
836
- role="progressbar"
837
- aria-label="Loading"
838
- >
839
- <span class="pf-c-spinner__clipper"></span>
840
- <span class="pf-c-spinner__lead-ball"></span>
841
- <span class="pf-c-spinner__tail-ball"></span>
842
- </span>
843
- </div>
844
- <div class="pf-l-grid__item pf-m-9-col">
845
- <h3 class="pf-c-title pf-m-md">Running</h3>
846
- </div>
807
+ <div class="pf-l-grid">
808
+ <div class="pf-l-grid__item pf-m-3-col">
809
+ <span
810
+ class="pf-c-spinner pf-m-md"
811
+ role="progressbar"
812
+ aria-label="Loading"
813
+ >
814
+ <span class="pf-c-spinner__clipper"></span>
815
+ <span class="pf-c-spinner__lead-ball"></span>
816
+ <span class="pf-c-spinner__tail-ball"></span>
817
+ </span>
847
818
  </div>
848
- </span>
819
+ <div class="pf-l-grid__item pf-m-9-col">
820
+ <h3 class="pf-c-title pf-m-md">Running</h3>
821
+ </div>
822
+ </div>
849
823
  </span>
850
824
  </dt>
851
825
  <dd class="pf-c-description-list__description">
@@ -860,16 +834,14 @@ wrapperTag: div
860
834
  <div class="pf-c-description-list__group">
861
835
  <dt class="pf-c-description-list__term">
862
836
  <span class="pf-c-description-list__text">
863
- <span class="pf-c-description-list__text">
864
- <div class="pf-l-flex">
865
- <div class="pf-l-flex__item">
866
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
867
- </div>
868
- <div class="pf-l-flex__item">
869
- <h3 class="pf-c-title pf-m-md">Ready</h3>
870
- </div>
837
+ <div class="pf-l-flex">
838
+ <div class="pf-l-flex__item">
839
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
871
840
  </div>
872
- </span>
841
+ <div class="pf-l-flex__item">
842
+ <h3 class="pf-c-title pf-m-md">Ready</h3>
843
+ </div>
844
+ </div>
873
845
  </span>
874
846
  </dt>
875
847
  <dd class="pf-c-description-list__description">
@@ -2794,9 +2766,7 @@ wrapperTag: div
2794
2766
  <div class="pf-c-card__body">
2795
2767
  <dl class="pf-c-description-list">
2796
2768
  <div class="pf-c-description-list__group">
2797
- <dt class="pf-c-description-list__term">
2798
- <span class="pf-c-description-list__text">Readiness probe failed</span>
2799
- </dt>
2769
+ <dt class="pf-c-description-list__term">Readiness probe failed</dt>
2800
2770
  <dd class="pf-c-description-list__description">
2801
2771
  <div
2802
2772
  class="pf-c-description-list__text"
@@ -2809,9 +2779,7 @@ wrapperTag: div
2809
2779
  </dd>
2810
2780
  </div>
2811
2781
  <div class="pf-c-description-list__group">
2812
- <dt class="pf-c-description-list__term">
2813
- <span class="pf-c-description-list__text">Successful assignment</span>
2814
- </dt>
2782
+ <dt class="pf-c-description-list__term">Successful assignment</dt>
2815
2783
  <dd class="pf-c-description-list__description">
2816
2784
  <div
2817
2785
  class="pf-c-description-list__text"
@@ -2824,9 +2792,7 @@ wrapperTag: div
2824
2792
  </dd>
2825
2793
  </div>
2826
2794
  <div class="pf-c-description-list__group">
2827
- <dt class="pf-c-description-list__term">
2828
- <span class="pf-c-description-list__text">Pulling image</span>
2829
- </dt>
2795
+ <dt class="pf-c-description-list__term">Pulling image</dt>
2830
2796
  <dd class="pf-c-description-list__description">
2831
2797
  <div
2832
2798
  class="pf-c-description-list__text"
@@ -2839,9 +2805,7 @@ wrapperTag: div
2839
2805
  </dd>
2840
2806
  </div>
2841
2807
  <div class="pf-c-description-list__group">
2842
- <dt class="pf-c-description-list__term">
2843
- <span class="pf-c-description-list__text">Created container</span>
2844
- </dt>
2808
+ <dt class="pf-c-description-list__term">Created container</dt>
2845
2809
  <dd class="pf-c-description-list__description">
2846
2810
  <div
2847
2811
  class="pf-c-description-list__text"
@@ -2940,17 +2904,15 @@ wrapperTag: div
2940
2904
  <dl class="pf-c-description-list">
2941
2905
  <div class="pf-c-description-list__group">
2942
2906
  <dt class="pf-c-description-list__term">
2943
- <span class="pf-c-description-list__text">
2944
- <div class="pf-l-flex pf-m-nowrap">
2945
- <div class="pf-l-flex__item">
2946
- <i
2947
- class="fas fa-exclamation-circle pf-u-danger-color-100"
2948
- aria-hidden="true"
2949
- ></i>
2950
- </div>
2951
- <div class="pf-l-flex__item">Readiness probe failed</div>
2907
+ <div class="pf-l-flex pf-m-nowrap">
2908
+ <div class="pf-l-flex__item">
2909
+ <i
2910
+ class="fas fa-exclamation-circle pf-u-danger-color-100"
2911
+ aria-hidden="true"
2912
+ ></i>
2952
2913
  </div>
2953
- </span>
2914
+ <div class="pf-l-flex__item">Readiness probe failed</div>
2915
+ </div>
2954
2916
  </dt>
2955
2917
  <dd class="pf-c-description-list__description">
2956
2918
  <div
@@ -2965,17 +2927,15 @@ wrapperTag: div
2965
2927
  </div>
2966
2928
  <div class="pf-c-description-list__group">
2967
2929
  <dt class="pf-c-description-list__term">
2968
- <span class="pf-c-description-list__text">
2969
- <div class="pf-l-flex pf-m-nowrap">
2970
- <div class="pf-l-flex__item">
2971
- <i
2972
- class="fas fa-check-circle pf-u-success-color-100"
2973
- aria-hidden="true"
2974
- ></i>
2975
- </div>
2976
- <div class="pf-l-flex__item">Successful assignment</div>
2930
+ <div class="pf-l-flex pf-m-nowrap">
2931
+ <div class="pf-l-flex__item">
2932
+ <i
2933
+ class="fas fa-check-circle pf-u-success-color-100"
2934
+ aria-hidden="true"
2935
+ ></i>
2977
2936
  </div>
2978
- </span>
2937
+ <div class="pf-l-flex__item">Successful assignment</div>
2938
+ </div>
2979
2939
  </dt>
2980
2940
  <dd class="pf-c-description-list__description">
2981
2941
  <div
@@ -2990,22 +2950,20 @@ wrapperTag: div
2990
2950
  </div>
2991
2951
  <div class="pf-c-description-list__group">
2992
2952
  <dt class="pf-c-description-list__term">
2993
- <span class="pf-c-description-list__text">
2994
- <div class="pf-l-flex pf-m-nowrap">
2995
- <div class="pf-l-flex__item">
2996
- <span
2997
- class="pf-c-spinner pf-m-md"
2998
- role="progressbar"
2999
- aria-label="Loading"
3000
- >
3001
- <span class="pf-c-spinner__clipper"></span>
3002
- <span class="pf-c-spinner__lead-ball"></span>
3003
- <span class="pf-c-spinner__tail-ball"></span>
3004
- </span>
3005
- </div>
3006
- <div class="pf-l-flex__item">Pulling image</div>
2953
+ <div class="pf-l-flex pf-m-nowrap">
2954
+ <div class="pf-l-flex__item">
2955
+ <span
2956
+ class="pf-c-spinner pf-m-md"
2957
+ role="progressbar"
2958
+ aria-label="Loading"
2959
+ >
2960
+ <span class="pf-c-spinner__clipper"></span>
2961
+ <span class="pf-c-spinner__lead-ball"></span>
2962
+ <span class="pf-c-spinner__tail-ball"></span>
2963
+ </span>
3007
2964
  </div>
3008
- </span>
2965
+ <div class="pf-l-flex__item">Pulling image</div>
2966
+ </div>
3009
2967
  </dt>
3010
2968
  <dd class="pf-c-description-list__description">
3011
2969
  <div
@@ -3020,17 +2978,15 @@ wrapperTag: div
3020
2978
  </div>
3021
2979
  <div class="pf-c-description-list__group">
3022
2980
  <dt class="pf-c-description-list__term">
3023
- <span class="pf-c-description-list__text">
3024
- <div class="pf-l-flex pf-m-nowrap">
3025
- <div class="pf-l-flex__item">
3026
- <i
3027
- class="fas fa-check-circle pf-u-success-color-100"
3028
- aria-hidden="true"
3029
- ></i>
3030
- </div>
3031
- <div class="pf-l-flex__item">Created container</div>
2981
+ <div class="pf-l-flex pf-m-nowrap">
2982
+ <div class="pf-l-flex__item">
2983
+ <i
2984
+ class="fas fa-check-circle pf-u-success-color-100"
2985
+ aria-hidden="true"
2986
+ ></i>
3032
2987
  </div>
3033
- </span>
2988
+ <div class="pf-l-flex__item">Created container</div>
2989
+ </div>
3034
2990
  </dt>
3035
2991
  <dd class="pf-c-description-list__description">
3036
2992
  <div