@patternfly/patternfly 4.199.0 → 4.200.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 (8) hide show
  1. package/components/DescriptionList/description-list.css +36 -2
  2. package/components/DescriptionList/description-list.scss +31 -2
  3. package/docs/components/DescriptionList/examples/DescriptionList.md +316 -11
  4. package/package.json +1 -1
  5. package/patternfly-no-reset.css +36 -2
  6. package/patternfly.css +36 -2
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/patternfly-no-reset.css CHANGED
@@ -10521,6 +10521,7 @@ label.pf-c-check, .pf-c-check__label,
10521
10521
  --pf-c-description-list__group--RowGap: var(--pf-global--spacer--sm);
10522
10522
  --pf-c-description-list__group--ColumnGap: var(--pf-global--spacer--sm);
10523
10523
  --pf-c-description-list__group--GridTemplateColumns: auto;
10524
+ --pf-c-description-list__group--GridTemplateRows: auto 1fr;
10524
10525
  --pf-c-description-list__group--GridColumn: auto;
10525
10526
  --pf-c-description-list--m-compact--RowGap: var(--pf-global--gutter);
10526
10527
  --pf-c-description-list--m-compact--ColumnGap: var(--pf-global--spacer--sm);
@@ -10533,9 +10534,11 @@ label.pf-c-check, .pf-c-check__label,
10533
10534
  --pf-c-description-list__term-icon--MarginRight: var(--pf-global--spacer--sm);
10534
10535
  --pf-c-description-list__term-icon--Color: var(--pf-global--icon--Color--light);
10535
10536
  --pf-c-description-list--m-vertical__group--GridTemplateColumns: repeat(var(--pf-c-description-list--GridTemplateColumns--count));
10537
+ --pf-c-description-list--m-vertical__group--GridTemplateRows: auto 1fr;
10536
10538
  --pf-c-description-list--m-horizontal__term--width: 12ch;
10537
10539
  --pf-c-description-list--m-horizontal__description--width: minmax(10ch, auto);
10538
10540
  --pf-c-description-list--m-horizontal__group--GridTemplateColumns: var(--pf-c-description-list__term--width) var(--pf-c-description-list--m-horizontal__description--width);
10541
+ --pf-c-description-list--m-horizontal__group--GridTemplateRows: auto;
10539
10542
  --pf-c-description-list--m-1-col--GridTemplateColumns--count: 1;
10540
10543
  --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
10541
10544
  --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
@@ -10546,6 +10549,8 @@ label.pf-c-check, .pf-c-check__label,
10546
10549
  --pf-c-description-list__text--m-help-text--TextDecorationOffset: 0.25rem;
10547
10550
  --pf-c-description-list__text--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
10548
10551
  --pf-c-description-list__text--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
10552
+ --pf-c-description-list--m-display-lg__description--FontSize: var(--pf-global--FontSize--lg);
10553
+ --pf-c-description-list--m-display-2xl__description--FontSize: var(--pf-global--FontSize--2xl);
10549
10554
  display: grid;
10550
10555
  align-items: baseline;
10551
10556
  row-gap: var(--pf-c-description-list--RowGap);
@@ -10632,7 +10637,8 @@ label.pf-c-check, .pf-c-check__label,
10632
10637
  column-count: var(--pf-c-description-list--GridTemplateColumns--count);
10633
10638
  margin-bottom: calc(var(--pf-c-description-list--RowGap) * -1);
10634
10639
  }
10635
- .pf-c-description-list.pf-m-fill-columns .pf-c-description-list__group {
10640
+ .pf-c-description-list.pf-m-fill-columns .pf-c-description-list__group,
10641
+ .pf-c-description-list.pf-m-fill-columns > .pf-c-card {
10636
10642
  display: inline-grid;
10637
10643
  width: 100%;
10638
10644
  margin-bottom: var(--pf-c-description-list--RowGap);
@@ -10641,13 +10647,25 @@ label.pf-c-check, .pf-c-check__label,
10641
10647
  -webkit-column-break-inside: avoid;
10642
10648
  -moz-column-break-inside: avoid;
10643
10649
  }
10650
+ .pf-c-description-list.pf-m-display-lg {
10651
+ --pf-c-description-list__description--FontSize: var(--pf-c-description-list--m-display-lg__description--FontSize);
10652
+ }
10653
+ .pf-c-description-list.pf-m-display-2xl {
10654
+ --pf-c-description-list__description--FontSize: var(--pf-c-description-list--m-display-2xl__description--FontSize);
10655
+ }
10656
+ .pf-c-description-list > .pf-c-card {
10657
+ align-self: stretch;
10658
+ padding: var(--pf-c-card--first-child--PaddingTop) var(--pf-c-card--child--PaddingRight) var(--pf-c-card--child--PaddingBottom) var(--pf-c-card--child--PaddingLeft);
10659
+ }
10644
10660
 
10645
- .pf-c-description-list__group {
10661
+ .pf-c-description-list__group,
10662
+ .pf-c-description-list > .pf-c-card {
10646
10663
  display: grid;
10647
10664
  grid-column: var(--pf-c-description-list__group--GridColumn);
10648
10665
  row-gap: var(--pf-c-description-list__group--RowGap);
10649
10666
  column-gap: var(--pf-c-description-list__group--ColumnGap);
10650
10667
  grid-template-columns: var(--pf-c-description-list__group--GridTemplateColumns);
10668
+ grid-template-rows: var(--pf-c-description-list__group--GridTemplateRows);
10651
10669
  align-items: baseline;
10652
10670
  }
10653
10671
 
@@ -10675,6 +10693,10 @@ label.pf-c-check, .pf-c-check__label,
10675
10693
  color: var(--pf-c-description-list__term-icon--Color);
10676
10694
  }
10677
10695
 
10696
+ .pf-c-description-list__description {
10697
+ font-size: var(--pf-c-description-list__description--FontSize, inherit);
10698
+ }
10699
+
10678
10700
  .pf-c-description-list__text {
10679
10701
  min-width: 0;
10680
10702
  }
@@ -10704,9 +10726,11 @@ label.pf-c-check, .pf-c-check__label,
10704
10726
  }
10705
10727
  .pf-c-description-list.pf-m-horizontal {
10706
10728
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
10729
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
10707
10730
  }
10708
10731
  .pf-c-description-list.pf-m-vertical {
10709
10732
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
10733
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
10710
10734
  }
10711
10735
  @media (min-width: 576px) {
10712
10736
  .pf-c-description-list.pf-m-1-col-on-sm {
@@ -10720,9 +10744,11 @@ label.pf-c-check, .pf-c-check__label,
10720
10744
  }
10721
10745
  .pf-c-description-list.pf-m-horizontal-on-sm {
10722
10746
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
10747
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
10723
10748
  }
10724
10749
  .pf-c-description-list.pf-m-vertical-on-sm {
10725
10750
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
10751
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
10726
10752
  }
10727
10753
  }
10728
10754
  @media (min-width: 768px) {
@@ -10737,9 +10763,11 @@ label.pf-c-check, .pf-c-check__label,
10737
10763
  }
10738
10764
  .pf-c-description-list.pf-m-horizontal-on-md {
10739
10765
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
10766
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
10740
10767
  }
10741
10768
  .pf-c-description-list.pf-m-vertical-on-md {
10742
10769
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
10770
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
10743
10771
  }
10744
10772
  }
10745
10773
  @media (min-width: 992px) {
@@ -10754,9 +10782,11 @@ label.pf-c-check, .pf-c-check__label,
10754
10782
  }
10755
10783
  .pf-c-description-list.pf-m-horizontal-on-lg {
10756
10784
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
10785
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
10757
10786
  }
10758
10787
  .pf-c-description-list.pf-m-vertical-on-lg {
10759
10788
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
10789
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
10760
10790
  }
10761
10791
  }
10762
10792
  @media (min-width: 1200px) {
@@ -10771,9 +10801,11 @@ label.pf-c-check, .pf-c-check__label,
10771
10801
  }
10772
10802
  .pf-c-description-list.pf-m-horizontal-on-xl {
10773
10803
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
10804
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
10774
10805
  }
10775
10806
  .pf-c-description-list.pf-m-vertical-on-xl {
10776
10807
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
10808
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
10777
10809
  }
10778
10810
  }
10779
10811
  @media (min-width: 1450px) {
@@ -10788,9 +10820,11 @@ label.pf-c-check, .pf-c-check__label,
10788
10820
  }
10789
10821
  .pf-c-description-list.pf-m-horizontal-on-2xl {
10790
10822
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
10823
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
10791
10824
  }
10792
10825
  .pf-c-description-list.pf-m-vertical-on-2xl {
10793
10826
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
10827
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
10794
10828
  }
10795
10829
  }
10796
10830
 
package/patternfly.css CHANGED
@@ -10648,6 +10648,7 @@ label.pf-c-check, .pf-c-check__label,
10648
10648
  --pf-c-description-list__group--RowGap: var(--pf-global--spacer--sm);
10649
10649
  --pf-c-description-list__group--ColumnGap: var(--pf-global--spacer--sm);
10650
10650
  --pf-c-description-list__group--GridTemplateColumns: auto;
10651
+ --pf-c-description-list__group--GridTemplateRows: auto 1fr;
10651
10652
  --pf-c-description-list__group--GridColumn: auto;
10652
10653
  --pf-c-description-list--m-compact--RowGap: var(--pf-global--gutter);
10653
10654
  --pf-c-description-list--m-compact--ColumnGap: var(--pf-global--spacer--sm);
@@ -10660,9 +10661,11 @@ label.pf-c-check, .pf-c-check__label,
10660
10661
  --pf-c-description-list__term-icon--MarginRight: var(--pf-global--spacer--sm);
10661
10662
  --pf-c-description-list__term-icon--Color: var(--pf-global--icon--Color--light);
10662
10663
  --pf-c-description-list--m-vertical__group--GridTemplateColumns: repeat(var(--pf-c-description-list--GridTemplateColumns--count));
10664
+ --pf-c-description-list--m-vertical__group--GridTemplateRows: auto 1fr;
10663
10665
  --pf-c-description-list--m-horizontal__term--width: 12ch;
10664
10666
  --pf-c-description-list--m-horizontal__description--width: minmax(10ch, auto);
10665
10667
  --pf-c-description-list--m-horizontal__group--GridTemplateColumns: var(--pf-c-description-list__term--width) var(--pf-c-description-list--m-horizontal__description--width);
10668
+ --pf-c-description-list--m-horizontal__group--GridTemplateRows: auto;
10666
10669
  --pf-c-description-list--m-1-col--GridTemplateColumns--count: 1;
10667
10670
  --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
10668
10671
  --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
@@ -10673,6 +10676,8 @@ label.pf-c-check, .pf-c-check__label,
10673
10676
  --pf-c-description-list__text--m-help-text--TextDecorationOffset: 0.25rem;
10674
10677
  --pf-c-description-list__text--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
10675
10678
  --pf-c-description-list__text--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
10679
+ --pf-c-description-list--m-display-lg__description--FontSize: var(--pf-global--FontSize--lg);
10680
+ --pf-c-description-list--m-display-2xl__description--FontSize: var(--pf-global--FontSize--2xl);
10676
10681
  display: grid;
10677
10682
  align-items: baseline;
10678
10683
  row-gap: var(--pf-c-description-list--RowGap);
@@ -10759,7 +10764,8 @@ label.pf-c-check, .pf-c-check__label,
10759
10764
  column-count: var(--pf-c-description-list--GridTemplateColumns--count);
10760
10765
  margin-bottom: calc(var(--pf-c-description-list--RowGap) * -1);
10761
10766
  }
10762
- .pf-c-description-list.pf-m-fill-columns .pf-c-description-list__group {
10767
+ .pf-c-description-list.pf-m-fill-columns .pf-c-description-list__group,
10768
+ .pf-c-description-list.pf-m-fill-columns > .pf-c-card {
10763
10769
  display: inline-grid;
10764
10770
  width: 100%;
10765
10771
  margin-bottom: var(--pf-c-description-list--RowGap);
@@ -10768,13 +10774,25 @@ label.pf-c-check, .pf-c-check__label,
10768
10774
  -webkit-column-break-inside: avoid;
10769
10775
  -moz-column-break-inside: avoid;
10770
10776
  }
10777
+ .pf-c-description-list.pf-m-display-lg {
10778
+ --pf-c-description-list__description--FontSize: var(--pf-c-description-list--m-display-lg__description--FontSize);
10779
+ }
10780
+ .pf-c-description-list.pf-m-display-2xl {
10781
+ --pf-c-description-list__description--FontSize: var(--pf-c-description-list--m-display-2xl__description--FontSize);
10782
+ }
10783
+ .pf-c-description-list > .pf-c-card {
10784
+ align-self: stretch;
10785
+ padding: var(--pf-c-card--first-child--PaddingTop) var(--pf-c-card--child--PaddingRight) var(--pf-c-card--child--PaddingBottom) var(--pf-c-card--child--PaddingLeft);
10786
+ }
10771
10787
 
10772
- .pf-c-description-list__group {
10788
+ .pf-c-description-list__group,
10789
+ .pf-c-description-list > .pf-c-card {
10773
10790
  display: grid;
10774
10791
  grid-column: var(--pf-c-description-list__group--GridColumn);
10775
10792
  row-gap: var(--pf-c-description-list__group--RowGap);
10776
10793
  column-gap: var(--pf-c-description-list__group--ColumnGap);
10777
10794
  grid-template-columns: var(--pf-c-description-list__group--GridTemplateColumns);
10795
+ grid-template-rows: var(--pf-c-description-list__group--GridTemplateRows);
10778
10796
  align-items: baseline;
10779
10797
  }
10780
10798
 
@@ -10802,6 +10820,10 @@ label.pf-c-check, .pf-c-check__label,
10802
10820
  color: var(--pf-c-description-list__term-icon--Color);
10803
10821
  }
10804
10822
 
10823
+ .pf-c-description-list__description {
10824
+ font-size: var(--pf-c-description-list__description--FontSize, inherit);
10825
+ }
10826
+
10805
10827
  .pf-c-description-list__text {
10806
10828
  min-width: 0;
10807
10829
  }
@@ -10831,9 +10853,11 @@ label.pf-c-check, .pf-c-check__label,
10831
10853
  }
10832
10854
  .pf-c-description-list.pf-m-horizontal {
10833
10855
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
10856
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
10834
10857
  }
10835
10858
  .pf-c-description-list.pf-m-vertical {
10836
10859
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
10860
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
10837
10861
  }
10838
10862
  @media (min-width: 576px) {
10839
10863
  .pf-c-description-list.pf-m-1-col-on-sm {
@@ -10847,9 +10871,11 @@ label.pf-c-check, .pf-c-check__label,
10847
10871
  }
10848
10872
  .pf-c-description-list.pf-m-horizontal-on-sm {
10849
10873
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
10874
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
10850
10875
  }
10851
10876
  .pf-c-description-list.pf-m-vertical-on-sm {
10852
10877
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
10878
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
10853
10879
  }
10854
10880
  }
10855
10881
  @media (min-width: 768px) {
@@ -10864,9 +10890,11 @@ label.pf-c-check, .pf-c-check__label,
10864
10890
  }
10865
10891
  .pf-c-description-list.pf-m-horizontal-on-md {
10866
10892
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
10893
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
10867
10894
  }
10868
10895
  .pf-c-description-list.pf-m-vertical-on-md {
10869
10896
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
10897
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
10870
10898
  }
10871
10899
  }
10872
10900
  @media (min-width: 992px) {
@@ -10881,9 +10909,11 @@ label.pf-c-check, .pf-c-check__label,
10881
10909
  }
10882
10910
  .pf-c-description-list.pf-m-horizontal-on-lg {
10883
10911
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
10912
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
10884
10913
  }
10885
10914
  .pf-c-description-list.pf-m-vertical-on-lg {
10886
10915
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
10916
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
10887
10917
  }
10888
10918
  }
10889
10919
  @media (min-width: 1200px) {
@@ -10898,9 +10928,11 @@ label.pf-c-check, .pf-c-check__label,
10898
10928
  }
10899
10929
  .pf-c-description-list.pf-m-horizontal-on-xl {
10900
10930
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
10931
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
10901
10932
  }
10902
10933
  .pf-c-description-list.pf-m-vertical-on-xl {
10903
10934
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
10935
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
10904
10936
  }
10905
10937
  }
10906
10938
  @media (min-width: 1450px) {
@@ -10915,9 +10947,11 @@ label.pf-c-check, .pf-c-check__label,
10915
10947
  }
10916
10948
  .pf-c-description-list.pf-m-horizontal-on-2xl {
10917
10949
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
10950
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
10918
10951
  }
10919
10952
  .pf-c-description-list.pf-m-vertical-on-2xl {
10920
10953
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
10954
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
10921
10955
  }
10922
10956
  }
10923
10957