@patternfly/patternfly 6.2.0-prerelease.16 → 6.2.0-prerelease.18

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 (17) hide show
  1. package/components/Card/card.css +17 -0
  2. package/components/Card/card.scss +22 -0
  3. package/components/Toolbar/toolbar.css +6 -1
  4. package/components/Toolbar/toolbar.scss +7 -1
  5. package/components/_index.css +23 -1
  6. package/docs/components/Card/examples/Card.md +30 -0
  7. package/docs/components/Tabs/examples/Tabs.md +145 -3
  8. package/docs/components/TextInputGroup/examples/TextInputGroup.md +10 -0
  9. package/docs/components/Toolbar/examples/Toolbar.css +3 -0
  10. package/docs/components/Toolbar/examples/Toolbar.md +28 -0
  11. package/docs/demos/Card/examples/Card.md +32 -24
  12. package/package.json +1 -1
  13. package/patternfly-no-globals.css +23 -1
  14. package/patternfly.css +23 -1
  15. package/patternfly.min.css +1 -1
  16. package/patternfly.min.css.map +1 -1
  17. package/docs/components/TabContent/examples/TabContent.md +0 -153
package/docs/demos/Card/examples/Card.md CHANGED
@@ -444,7 +444,7 @@ wrapperTag: div
444
444
  <h2 class="pf-v6-c-card__title-text">5 Clusters</h2>
445
445
  </div>
446
446
  <div class="pf-v6-c-card__body">
447
- <span class="pf-v6-c-icon">
447
+ <span class="pf-v6-c-icon pf-m-inline">
448
448
  <span class="pf-v6-c-icon__content pf-m-success">
449
449
  <i class="fas fa-check-circle" aria-hidden="true"></i>
450
450
  </span>
@@ -456,7 +456,7 @@ wrapperTag: div
456
456
  <h2 class="pf-v6-c-card__title-text">15 Clusters</h2>
457
457
  </div>
458
458
  <div class="pf-v6-c-card__body">
459
- <span class="pf-v6-c-icon">
459
+ <span class="pf-v6-c-icon pf-m-inline">
460
460
  <span class="pf-v6-c-icon__content pf-m-warning">
461
461
  <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
462
462
  </span>
@@ -468,7 +468,7 @@ wrapperTag: div
468
468
  <h2 class="pf-v6-c-card__title-text">3 Clusters</h2>
469
469
  </div>
470
470
  <div class="pf-v6-c-card__body">
471
- <span class="pf-v6-c-icon">
471
+ <span class="pf-v6-c-icon pf-m-inline">
472
472
  <span class="pf-v6-c-icon__content pf-m-danger">
473
473
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
474
474
  </span>
@@ -487,7 +487,7 @@ wrapperTag: div
487
487
  <div class="pf-v6-l-flex pf-m-inline-flex pf-m-space-items-md">
488
488
  <div class="pf-v6-l-flex pf-m-space-items-sm">
489
489
  <div class="pf-v6-l-flex__item">
490
- <span class="pf-v6-c-icon">
490
+ <span class="pf-v6-c-icon pf-m-inline">
491
491
  <span class="pf-v6-c-icon__content pf-m-success">
492
492
  <i class="fas fa-check-circle" aria-hidden="true"></i>
493
493
  </span>
@@ -500,7 +500,7 @@ wrapperTag: div
500
500
  <hr class="pf-v6-c-divider pf-m-vertical" />
501
501
  <div class="pf-v6-l-flex pf-m-space-items-sm">
502
502
  <div class="pf-v6-l-flex__item">
503
- <span class="pf-v6-c-icon">
503
+ <span class="pf-v6-c-icon pf-m-inline">
504
504
  <span class="pf-v6-c-icon__content pf-m-warning">
505
505
  <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
506
506
  </span>
@@ -521,7 +521,7 @@ wrapperTag: div
521
521
  <div class="pf-v6-l-flex pf-m-inline-flex pf-m-space-items-md">
522
522
  <div class="pf-v6-l-flex pf-m-space-items-sm">
523
523
  <div class="pf-v6-l-flex__item">
524
- <span class="pf-v6-c-icon">
524
+ <span class="pf-v6-c-icon pf-m-inline">
525
525
  <span class="pf-v6-c-icon__content pf-m-success">
526
526
  <i class="fas fa-check-circle" aria-hidden="true"></i>
527
527
  </span>
@@ -534,7 +534,7 @@ wrapperTag: div
534
534
  <hr class="pf-v6-c-divider pf-m-vertical" />
535
535
  <div class="pf-v6-l-flex pf-m-space-items-sm">
536
536
  <div class="pf-v6-l-flex__item">
537
- <span class="pf-v6-c-icon">
537
+ <span class="pf-v6-c-icon pf-m-inline">
538
538
  <span class="pf-v6-c-icon__content pf-m-danger">
539
539
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
540
540
  </span>
@@ -555,7 +555,7 @@ wrapperTag: div
555
555
  <div class="pf-v6-l-flex pf-m-inline-flex pf-m-space-items-md">
556
556
  <div class="pf-v6-l-flex pf-m-space-items-sm">
557
557
  <div class="pf-v6-l-flex__item">
558
- <span class="pf-v6-c-icon">
558
+ <span class="pf-v6-c-icon pf-m-inline">
559
559
  <span class="pf-v6-c-icon__content pf-m-warning">
560
560
  <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
561
561
  </span>
@@ -568,7 +568,7 @@ wrapperTag: div
568
568
  <hr class="pf-v6-c-divider pf-m-vertical" />
569
569
  <div class="pf-v6-l-flex pf-m-space-items-sm">
570
570
  <div class="pf-v6-l-flex__item">
571
- <span class="pf-v6-c-icon">
571
+ <span class="pf-v6-c-icon pf-m-inline">
572
572
  <span class="pf-v6-c-icon__content pf-m-danger">
573
573
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
574
574
  </span>
@@ -600,7 +600,7 @@ wrapperTag: div
600
600
  >
601
601
  <div class="pf-v6-l-flex pf-m-space-items-sm">
602
602
  <div class="pf-v6-l-flex__item">
603
- <span class="pf-v6-c-icon">
603
+ <span class="pf-v6-c-icon pf-m-inline">
604
604
  <span class="pf-v6-c-icon__content pf-m-danger">
605
605
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
606
606
  </span>
@@ -613,7 +613,7 @@ wrapperTag: div
613
613
  </div>
614
614
  <div class="pf-v6-l-flex pf-m-space-items-sm">
615
615
  <div class="pf-v6-l-flex__item">
616
- <span class="pf-v6-c-icon">
616
+ <span class="pf-v6-c-icon pf-m-inline">
617
617
  <span class="pf-v6-c-icon__content pf-m-warning">
618
618
  <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
619
619
  </span>
@@ -637,7 +637,7 @@ wrapperTag: div
637
637
  >
638
638
  <div class="pf-v6-l-flex pf-m-space-items-sm">
639
639
  <div class="pf-v6-l-flex__item">
640
- <span class="pf-v6-c-icon">
640
+ <span class="pf-v6-c-icon pf-m-inline">
641
641
  <span class="pf-v6-c-icon__content pf-m-success">
642
642
  <i class="fas fa-check-circle" aria-hidden="true"></i>
643
643
  </span>
@@ -650,7 +650,7 @@ wrapperTag: div
650
650
  </div>
651
651
  <div class="pf-v6-l-flex pf-m-space-items-sm">
652
652
  <div class="pf-v6-l-flex__item">
653
- <span class="pf-v6-c-icon">
653
+ <span class="pf-v6-c-icon pf-m-inline">
654
654
  <span class="pf-v6-c-icon__content pf-m-warning">
655
655
  <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
656
656
  </span>
@@ -674,7 +674,7 @@ wrapperTag: div
674
674
  >
675
675
  <div class="pf-v6-l-flex pf-m-space-items-sm">
676
676
  <div class="pf-v6-l-flex__item">
677
- <span class="pf-v6-c-icon">
677
+ <span class="pf-v6-c-icon pf-m-inline">
678
678
  <span class="pf-v6-c-icon__content pf-m-warning">
679
679
  <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
680
680
  </span>
@@ -687,7 +687,7 @@ wrapperTag: div
687
687
  </div>
688
688
  <div class="pf-v6-l-flex pf-m-space-items-sm">
689
689
  <div class="pf-v6-l-flex__item">
690
- <span class="pf-v6-c-icon">
690
+ <span class="pf-v6-c-icon pf-m-inline">
691
691
  <span class="pf-v6-c-icon__content pf-m-danger">
692
692
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
693
693
  </span>
@@ -767,7 +767,7 @@ wrapperTag: div
767
767
  <div class="pf-v6-l-grid">
768
768
  <div class="pf-v6-l-grid__item pf-m-3-col">
769
769
  <svg
770
- class="pf-v6-c-spinner pf-m-md"
770
+ class="pf-v6-c-spinner pf-m-inline"
771
771
  role="progressbar"
772
772
  viewBox="0 0 100 100"
773
773
  aria-label="Loading"
@@ -801,7 +801,11 @@ wrapperTag: div
801
801
  <span class="pf-v6-c-description-list__text">
802
802
  <div class="pf-v6-l-flex">
803
803
  <div class="pf-v6-l-flex__item">
804
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
804
+ <span class="pf-v6-c-icon pf-m-inline">
805
+ <span class="pf-v6-c-icon__content pf-m-success">
806
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
807
+ </span>
808
+ </span>
805
809
  </div>
806
810
  <div class="pf-v6-l-flex__item">
807
811
  <h3 class="pf-v6-c-title pf-m-md">Ready</h3>
@@ -824,7 +828,7 @@ wrapperTag: div
824
828
  <div class="pf-v6-l-grid">
825
829
  <div class="pf-v6-l-grid__item pf-m-3-col">
826
830
  <svg
827
- class="pf-v6-c-spinner pf-m-md"
831
+ class="pf-v6-c-spinner pf-m-inline"
828
832
  role="progressbar"
829
833
  viewBox="0 0 100 100"
830
834
  aria-label="Loading"
@@ -858,7 +862,11 @@ wrapperTag: div
858
862
  <span class="pf-v6-c-description-list__text">
859
863
  <div class="pf-v6-l-flex">
860
864
  <div class="pf-v6-l-flex__item">
861
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
865
+ <span class="pf-v6-c-icon pf-m-inline">
866
+ <span class="pf-v6-c-icon__content pf-m-success">
867
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
868
+ </span>
869
+ </span>
862
870
  </div>
863
871
  <div class="pf-v6-l-flex__item">
864
872
  <h3 class="pf-v6-c-title pf-m-md">Ready</h3>
@@ -1935,7 +1943,7 @@ wrapperTag: div
1935
1943
  <div class="pf-v6-l-flex pf-m-column">
1936
1944
  <span>System</span>
1937
1945
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1938
- <span class="pf-v6-c-icon">
1946
+ <span class="pf-v6-c-icon pf-m-inline">
1939
1947
  <span class="pf-v6-c-icon__content pf-m-danger">
1940
1948
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1941
1949
  </span>
@@ -2907,7 +2915,7 @@ wrapperTag: div
2907
2915
  <dt class="pf-v6-c-description-list__term">
2908
2916
  <div class="pf-v6-l-flex pf-m-nowrap pf-m-space-items-sm">
2909
2917
  <div class="pf-v6-l-flex__item">
2910
- <span class="pf-v6-c-icon">
2918
+ <span class="pf-v6-c-icon pf-m-inline">
2911
2919
  <span class="pf-v6-c-icon__content pf-m-danger">
2912
2920
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
2913
2921
  </span>
@@ -2936,7 +2944,7 @@ wrapperTag: div
2936
2944
  <dt class="pf-v6-c-description-list__term">
2937
2945
  <div class="pf-v6-l-flex pf-m-nowrap pf-m-space-items-sm">
2938
2946
  <div class="pf-v6-l-flex__item">
2939
- <span class="pf-v6-c-icon">
2947
+ <span class="pf-v6-c-icon pf-m-inline">
2940
2948
  <span class="pf-v6-c-icon__content pf-m-success">
2941
2949
  <i class="fas fa-check-circle" aria-hidden="true"></i>
2942
2950
  </span>
@@ -2966,7 +2974,7 @@ wrapperTag: div
2966
2974
  <div class="pf-v6-l-flex pf-m-nowrap pf-m-space-items-sm">
2967
2975
  <div class="pf-v6-l-flex__item">
2968
2976
  <svg
2969
- class="pf-v6-c-spinner pf-m-md"
2977
+ class="pf-v6-c-spinner pf-m-inline"
2970
2978
  role="progressbar"
2971
2979
  viewBox="0 0 100 100"
2972
2980
  aria-label="Loading"
@@ -3003,7 +3011,7 @@ wrapperTag: div
3003
3011
  <dt class="pf-v6-c-description-list__term">
3004
3012
  <div class="pf-v6-l-flex pf-m-nowrap pf-m-space-items-sm">
3005
3013
  <div class="pf-v6-l-flex__item">
3006
- <span class="pf-v6-c-icon">
3014
+ <span class="pf-v6-c-icon pf-m-inline">
3007
3015
  <span class="pf-v6-c-icon__content pf-m-success">
3008
3016
  <i class="fas fa-check-circle" aria-hidden="true"></i>
3009
3017
  </span>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.2.0-prerelease.16",
4
+ "version": "6.2.0-prerelease.18",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -9772,6 +9772,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9772
9772
  --pf-v6-c-card__actions--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
9773
9773
  --pf-v6-c-card__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
9774
9774
  --pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
9775
+ --pf-v6-c-card__header--m-wrap--RowGap: var(--pf-t--global--spacer--sm);
9776
+ --pf-v6-c-card__header--m-wrap--ColumnGap: var(--pf-t--global--spacer--md);
9775
9777
  --pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
9776
9778
  --pf-v6-c-card__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
9777
9779
  --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
@@ -9935,6 +9937,21 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9935
9937
  .pf-v6-c-card__header.pf-m-toggle-right .pf-v6-c-card__header-toggle {
9936
9938
  order: 2;
9937
9939
  }
9940
+ .pf-v6-c-card__header.pf-m-wrap {
9941
+ --pf-v6-c-card__actions--PaddingInlineStart: 0;
9942
+ gap: var(--pf-v6-c-card__header--m-wrap--RowGap) var(--pf-v6-c-card__header--m-wrap--ColumnGap);
9943
+ }
9944
+ .pf-v6-c-card__header.pf-m-wrap,
9945
+ .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
9946
+ flex-wrap: wrap;
9947
+ row-gap: var(--pf-v6-c-card__header--m-wrap--RowGap);
9948
+ }
9949
+ .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
9950
+ margin-inline-start: 0;
9951
+ }
9952
+ .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions + * {
9953
+ margin-inline-end: auto;
9954
+ }
9938
9955
 
9939
9956
  .pf-v6-c-card__header-main {
9940
9957
  flex-grow: 1;
@@ -27228,13 +27245,18 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
27228
27245
  }
27229
27246
  .pf-v6-c-toolbar.pf-m-full-height {
27230
27247
  --pf-v6-c-toolbar--PaddingBlockStart: 0;
27231
- --pf-v6-c-toolbar--PaddinkBlockEnd: 0;
27248
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
27232
27249
  }
27233
27250
  .pf-v6-c-toolbar.pf-m-full-height .pf-v6-c-toolbar__group,
27234
27251
  .pf-v6-c-toolbar.pf-m-full-height .pf-v6-c-toolbar__item {
27235
27252
  align-items: stretch;
27236
27253
  align-self: stretch;
27237
27254
  }
27255
+ .pf-v6-c-toolbar.pf-m-no-padding {
27256
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
27257
+ --pf-v6-c-toolbar--m-sticky--PaddingBlockStart: 0;
27258
+ --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: 0;
27259
+ }
27238
27260
  .pf-v6-c-toolbar.pf-m-primary {
27239
27261
  --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-primary--BackgroundColor);
27240
27262
  }
package/patternfly.css CHANGED
@@ -9908,6 +9908,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9908
9908
  --pf-v6-c-card__actions--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
9909
9909
  --pf-v6-c-card__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
9910
9910
  --pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
9911
+ --pf-v6-c-card__header--m-wrap--RowGap: var(--pf-t--global--spacer--sm);
9912
+ --pf-v6-c-card__header--m-wrap--ColumnGap: var(--pf-t--global--spacer--md);
9911
9913
  --pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
9912
9914
  --pf-v6-c-card__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
9913
9915
  --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
@@ -10071,6 +10073,21 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
10071
10073
  .pf-v6-c-card__header.pf-m-toggle-right .pf-v6-c-card__header-toggle {
10072
10074
  order: 2;
10073
10075
  }
10076
+ .pf-v6-c-card__header.pf-m-wrap {
10077
+ --pf-v6-c-card__actions--PaddingInlineStart: 0;
10078
+ gap: var(--pf-v6-c-card__header--m-wrap--RowGap) var(--pf-v6-c-card__header--m-wrap--ColumnGap);
10079
+ }
10080
+ .pf-v6-c-card__header.pf-m-wrap,
10081
+ .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
10082
+ flex-wrap: wrap;
10083
+ row-gap: var(--pf-v6-c-card__header--m-wrap--RowGap);
10084
+ }
10085
+ .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
10086
+ margin-inline-start: 0;
10087
+ }
10088
+ .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions + * {
10089
+ margin-inline-end: auto;
10090
+ }
10074
10091
 
10075
10092
  .pf-v6-c-card__header-main {
10076
10093
  flex-grow: 1;
@@ -27364,13 +27381,18 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
27364
27381
  }
27365
27382
  .pf-v6-c-toolbar.pf-m-full-height {
27366
27383
  --pf-v6-c-toolbar--PaddingBlockStart: 0;
27367
- --pf-v6-c-toolbar--PaddinkBlockEnd: 0;
27384
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
27368
27385
  }
27369
27386
  .pf-v6-c-toolbar.pf-m-full-height .pf-v6-c-toolbar__group,
27370
27387
  .pf-v6-c-toolbar.pf-m-full-height .pf-v6-c-toolbar__item {
27371
27388
  align-items: stretch;
27372
27389
  align-self: stretch;
27373
27390
  }
27391
+ .pf-v6-c-toolbar.pf-m-no-padding {
27392
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
27393
+ --pf-v6-c-toolbar--m-sticky--PaddingBlockStart: 0;
27394
+ --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: 0;
27395
+ }
27374
27396
  .pf-v6-c-toolbar.pf-m-primary {
27375
27397
  --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-primary--BackgroundColor);
27376
27398
  }