@patternfly/patternfly 4.161.0 → 4.162.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.
- package/components/DescriptionList/description-list.css +14 -0
- package/components/DescriptionList/description-list.scss +19 -0
- package/docs/components/DescriptionList/examples/DescriptionList.md +174 -0
- package/package.json +1 -1
- package/patternfly-no-reset.css +14 -0
- package/patternfly.css +14 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -104,6 +104,20 @@
|
|
|
104
104
|
.pf-c-description-list.pf-m-fluid {
|
|
105
105
|
--pf-c-description-list--m-horizontal__term--width: fit-content(20ch);
|
|
106
106
|
}
|
|
107
|
+
.pf-c-description-list.pf-m-fill-columns {
|
|
108
|
+
display: block;
|
|
109
|
+
column-count: var(--pf-c-description-list--GridTemplateColumns--count);
|
|
110
|
+
margin-bottom: calc(var(--pf-c-description-list--RowGap) * -1);
|
|
111
|
+
}
|
|
112
|
+
.pf-c-description-list.pf-m-fill-columns .pf-c-description-list__group {
|
|
113
|
+
display: inline-grid;
|
|
114
|
+
width: 100%;
|
|
115
|
+
margin-bottom: var(--pf-c-description-list--RowGap);
|
|
116
|
+
break-inside: avoid;
|
|
117
|
+
page-break-inside: avoid;
|
|
118
|
+
-webkit-column-break-inside: avoid;
|
|
119
|
+
-moz-column-break-inside: avoid;
|
|
120
|
+
}
|
|
107
121
|
|
|
108
122
|
.pf-c-description-list__group {
|
|
109
123
|
display: grid;
|
|
@@ -77,6 +77,25 @@ $pf-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md",
|
|
|
77
77
|
&.pf-m-fluid {
|
|
78
78
|
--pf-c-description-list--m-horizontal__term--width: fit-content(20ch);
|
|
79
79
|
}
|
|
80
|
+
|
|
81
|
+
&.pf-m-fill-columns {
|
|
82
|
+
display: block;
|
|
83
|
+
column-count: var(--pf-c-description-list--GridTemplateColumns--count);
|
|
84
|
+
margin-bottom: calc(var(--pf-c-description-list--RowGap) * -1);
|
|
85
|
+
|
|
86
|
+
.pf-c-description-list__group {
|
|
87
|
+
display: inline-grid;
|
|
88
|
+
width: 100%;
|
|
89
|
+
margin-bottom: var(--pf-c-description-list--RowGap);
|
|
90
|
+
break-inside: avoid;
|
|
91
|
+
page-break-inside: avoid;
|
|
92
|
+
|
|
93
|
+
// stylelint-disable property-no-vendor-prefix
|
|
94
|
+
-webkit-column-break-inside: avoid;
|
|
95
|
+
-moz-column-break-inside: avoid;
|
|
96
|
+
// stylelint-enable
|
|
97
|
+
}
|
|
98
|
+
}
|
|
80
99
|
}
|
|
81
100
|
|
|
82
101
|
.pf-c-description-list__group {
|
|
@@ -599,6 +599,179 @@ cssPrefix: pf-c-description-list
|
|
|
599
599
|
|
|
600
600
|
```
|
|
601
601
|
|
|
602
|
+
### Column fill
|
|
603
|
+
|
|
604
|
+
```html
|
|
605
|
+
<dl class="pf-c-description-list pf-m-fill-columns">
|
|
606
|
+
<div class="pf-c-description-list__group">
|
|
607
|
+
<dt class="pf-c-description-list__term">
|
|
608
|
+
<span class="pf-c-description-list__text">Name</span>
|
|
609
|
+
</dt>
|
|
610
|
+
<dd class="pf-c-description-list__description">
|
|
611
|
+
<div class="pf-c-description-list__text">example</div>
|
|
612
|
+
</dd>
|
|
613
|
+
</div>
|
|
614
|
+
<div class="pf-c-description-list__group">
|
|
615
|
+
<dt class="pf-c-description-list__term">
|
|
616
|
+
<span class="pf-c-description-list__text">Namespace</span>
|
|
617
|
+
</dt>
|
|
618
|
+
<dd class="pf-c-description-list__description">
|
|
619
|
+
<div class="pf-c-description-list__text">
|
|
620
|
+
<a href="#">mary-test</a>
|
|
621
|
+
</div>
|
|
622
|
+
</dd>
|
|
623
|
+
</div>
|
|
624
|
+
<div class="pf-c-description-list__group">
|
|
625
|
+
<dt class="pf-c-description-list__term">
|
|
626
|
+
<span class="pf-c-description-list__text">Labels</span>
|
|
627
|
+
</dt>
|
|
628
|
+
<dd class="pf-c-description-list__description">
|
|
629
|
+
<div class="pf-c-description-list__text">example</div>
|
|
630
|
+
</dd>
|
|
631
|
+
</div>
|
|
632
|
+
<div class="pf-c-description-list__group">
|
|
633
|
+
<dt class="pf-c-description-list__term">
|
|
634
|
+
<span class="pf-c-description-list__text">Pod selector</span>
|
|
635
|
+
</dt>
|
|
636
|
+
<dd class="pf-c-description-list__description">
|
|
637
|
+
<div class="pf-c-description-list__text">
|
|
638
|
+
<button class="pf-c-button pf-m-link pf-m-inline" type="button">
|
|
639
|
+
<span class="pf-c-button__icon pf-m-start">
|
|
640
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
641
|
+
</span>
|
|
642
|
+
app=MyApp
|
|
643
|
+
</button>
|
|
644
|
+
</div>
|
|
645
|
+
</dd>
|
|
646
|
+
</div>
|
|
647
|
+
<div class="pf-c-description-list__group">
|
|
648
|
+
<dt class="pf-c-description-list__term">
|
|
649
|
+
<span class="pf-c-description-list__text">Annotation</span>
|
|
650
|
+
</dt>
|
|
651
|
+
<dd class="pf-c-description-list__description">
|
|
652
|
+
<div class="pf-c-description-list__text">2 Annotations</div>
|
|
653
|
+
</dd>
|
|
654
|
+
</div>
|
|
655
|
+
</dl>
|
|
656
|
+
|
|
657
|
+
```
|
|
658
|
+
|
|
659
|
+
### Column fill, horizontal
|
|
660
|
+
|
|
661
|
+
```html
|
|
662
|
+
<dl class="pf-c-description-list pf-m-fill-columns pf-m-horizontal">
|
|
663
|
+
<div class="pf-c-description-list__group">
|
|
664
|
+
<dt class="pf-c-description-list__term">
|
|
665
|
+
<span class="pf-c-description-list__text">Name</span>
|
|
666
|
+
</dt>
|
|
667
|
+
<dd class="pf-c-description-list__description">
|
|
668
|
+
<div class="pf-c-description-list__text">example</div>
|
|
669
|
+
</dd>
|
|
670
|
+
</div>
|
|
671
|
+
<div class="pf-c-description-list__group">
|
|
672
|
+
<dt class="pf-c-description-list__term">
|
|
673
|
+
<span class="pf-c-description-list__text">Namespace</span>
|
|
674
|
+
</dt>
|
|
675
|
+
<dd class="pf-c-description-list__description">
|
|
676
|
+
<div class="pf-c-description-list__text">
|
|
677
|
+
<a href="#">mary-test</a>
|
|
678
|
+
</div>
|
|
679
|
+
</dd>
|
|
680
|
+
</div>
|
|
681
|
+
<div class="pf-c-description-list__group">
|
|
682
|
+
<dt class="pf-c-description-list__term">
|
|
683
|
+
<span class="pf-c-description-list__text">Labels</span>
|
|
684
|
+
</dt>
|
|
685
|
+
<dd class="pf-c-description-list__description">
|
|
686
|
+
<div class="pf-c-description-list__text">example</div>
|
|
687
|
+
</dd>
|
|
688
|
+
</div>
|
|
689
|
+
<div class="pf-c-description-list__group">
|
|
690
|
+
<dt class="pf-c-description-list__term">
|
|
691
|
+
<span class="pf-c-description-list__text">Pod selector</span>
|
|
692
|
+
</dt>
|
|
693
|
+
<dd class="pf-c-description-list__description">
|
|
694
|
+
<div class="pf-c-description-list__text">
|
|
695
|
+
<button class="pf-c-button pf-m-link pf-m-inline" type="button">
|
|
696
|
+
<span class="pf-c-button__icon pf-m-start">
|
|
697
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
698
|
+
</span>
|
|
699
|
+
app=MyApp
|
|
700
|
+
</button>
|
|
701
|
+
</div>
|
|
702
|
+
</dd>
|
|
703
|
+
</div>
|
|
704
|
+
<div class="pf-c-description-list__group">
|
|
705
|
+
<dt class="pf-c-description-list__term">
|
|
706
|
+
<span class="pf-c-description-list__text">Annotation</span>
|
|
707
|
+
</dt>
|
|
708
|
+
<dd class="pf-c-description-list__description">
|
|
709
|
+
<div class="pf-c-description-list__text">2 Annotations</div>
|
|
710
|
+
</dd>
|
|
711
|
+
</div>
|
|
712
|
+
</dl>
|
|
713
|
+
|
|
714
|
+
```
|
|
715
|
+
|
|
716
|
+
### Column fill, horizontal, multi-column
|
|
717
|
+
|
|
718
|
+
```html
|
|
719
|
+
<dl
|
|
720
|
+
class="pf-c-description-list pf-m-fill-columns pf-m-horizontal pf-m-2-col pf-m-3-col-on-lg"
|
|
721
|
+
>
|
|
722
|
+
<div class="pf-c-description-list__group">
|
|
723
|
+
<dt class="pf-c-description-list__term">
|
|
724
|
+
<span class="pf-c-description-list__text">Name</span>
|
|
725
|
+
</dt>
|
|
726
|
+
<dd class="pf-c-description-list__description">
|
|
727
|
+
<div class="pf-c-description-list__text">example</div>
|
|
728
|
+
</dd>
|
|
729
|
+
</div>
|
|
730
|
+
<div class="pf-c-description-list__group">
|
|
731
|
+
<dt class="pf-c-description-list__term">
|
|
732
|
+
<span class="pf-c-description-list__text">Namespace</span>
|
|
733
|
+
</dt>
|
|
734
|
+
<dd class="pf-c-description-list__description">
|
|
735
|
+
<div class="pf-c-description-list__text">
|
|
736
|
+
<a href="#">mary-test</a>
|
|
737
|
+
</div>
|
|
738
|
+
</dd>
|
|
739
|
+
</div>
|
|
740
|
+
<div class="pf-c-description-list__group">
|
|
741
|
+
<dt class="pf-c-description-list__term">
|
|
742
|
+
<span class="pf-c-description-list__text">Labels</span>
|
|
743
|
+
</dt>
|
|
744
|
+
<dd class="pf-c-description-list__description">
|
|
745
|
+
<div class="pf-c-description-list__text">example</div>
|
|
746
|
+
</dd>
|
|
747
|
+
</div>
|
|
748
|
+
<div class="pf-c-description-list__group">
|
|
749
|
+
<dt class="pf-c-description-list__term">
|
|
750
|
+
<span class="pf-c-description-list__text">Pod selector</span>
|
|
751
|
+
</dt>
|
|
752
|
+
<dd class="pf-c-description-list__description">
|
|
753
|
+
<div class="pf-c-description-list__text">
|
|
754
|
+
<button class="pf-c-button pf-m-link pf-m-inline" type="button">
|
|
755
|
+
<span class="pf-c-button__icon pf-m-start">
|
|
756
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
757
|
+
</span>
|
|
758
|
+
app=MyApp
|
|
759
|
+
</button>
|
|
760
|
+
</div>
|
|
761
|
+
</dd>
|
|
762
|
+
</div>
|
|
763
|
+
<div class="pf-c-description-list__group">
|
|
764
|
+
<dt class="pf-c-description-list__term">
|
|
765
|
+
<span class="pf-c-description-list__text">Annotation</span>
|
|
766
|
+
</dt>
|
|
767
|
+
<dd class="pf-c-description-list__description">
|
|
768
|
+
<div class="pf-c-description-list__text">2 Annotations</div>
|
|
769
|
+
</dd>
|
|
770
|
+
</div>
|
|
771
|
+
</dl>
|
|
772
|
+
|
|
773
|
+
```
|
|
774
|
+
|
|
602
775
|
## Auto fit
|
|
603
776
|
|
|
604
777
|
### Auto-fit basic
|
|
@@ -1162,6 +1335,7 @@ cssPrefix: pf-c-description-list
|
|
|
1162
1335
|
| `.pf-m-help-text` | `.pf-c-description-list__text` | Indicates there is more information available for the description list component term text. |
|
|
1163
1336
|
| `.pf-m-horizontal{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a horizontal layout. |
|
|
1164
1337
|
| `.pf-m-vertical{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a vertical layout. |
|
|
1338
|
+
| `.pf-m-fill-columns` | `.pf-c-description-list` | Modifies the description list groups to fill columns . |
|
|
1165
1339
|
| `.pf-m-auto-column-widths` | `.pf-c-description-list` | Modifies the description list to format automatically. |
|
|
1166
1340
|
| `.pf-m-inline-grid` | `.pf-c-description-list` | Modifies the description list display to inline-grid. |
|
|
1167
1341
|
| `.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list number of columns. |
|
package/package.json
CHANGED
package/patternfly-no-reset.css
CHANGED
|
@@ -9561,6 +9561,20 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
9561
9561
|
.pf-c-description-list.pf-m-fluid {
|
|
9562
9562
|
--pf-c-description-list--m-horizontal__term--width: fit-content(20ch);
|
|
9563
9563
|
}
|
|
9564
|
+
.pf-c-description-list.pf-m-fill-columns {
|
|
9565
|
+
display: block;
|
|
9566
|
+
column-count: var(--pf-c-description-list--GridTemplateColumns--count);
|
|
9567
|
+
margin-bottom: calc(var(--pf-c-description-list--RowGap) * -1);
|
|
9568
|
+
}
|
|
9569
|
+
.pf-c-description-list.pf-m-fill-columns .pf-c-description-list__group {
|
|
9570
|
+
display: inline-grid;
|
|
9571
|
+
width: 100%;
|
|
9572
|
+
margin-bottom: var(--pf-c-description-list--RowGap);
|
|
9573
|
+
break-inside: avoid;
|
|
9574
|
+
page-break-inside: avoid;
|
|
9575
|
+
-webkit-column-break-inside: avoid;
|
|
9576
|
+
-moz-column-break-inside: avoid;
|
|
9577
|
+
}
|
|
9564
9578
|
|
|
9565
9579
|
.pf-c-description-list__group {
|
|
9566
9580
|
display: grid;
|
package/patternfly.css
CHANGED
|
@@ -9683,6 +9683,20 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
9683
9683
|
.pf-c-description-list.pf-m-fluid {
|
|
9684
9684
|
--pf-c-description-list--m-horizontal__term--width: fit-content(20ch);
|
|
9685
9685
|
}
|
|
9686
|
+
.pf-c-description-list.pf-m-fill-columns {
|
|
9687
|
+
display: block;
|
|
9688
|
+
column-count: var(--pf-c-description-list--GridTemplateColumns--count);
|
|
9689
|
+
margin-bottom: calc(var(--pf-c-description-list--RowGap) * -1);
|
|
9690
|
+
}
|
|
9691
|
+
.pf-c-description-list.pf-m-fill-columns .pf-c-description-list__group {
|
|
9692
|
+
display: inline-grid;
|
|
9693
|
+
width: 100%;
|
|
9694
|
+
margin-bottom: var(--pf-c-description-list--RowGap);
|
|
9695
|
+
break-inside: avoid;
|
|
9696
|
+
page-break-inside: avoid;
|
|
9697
|
+
-webkit-column-break-inside: avoid;
|
|
9698
|
+
-moz-column-break-inside: avoid;
|
|
9699
|
+
}
|
|
9686
9700
|
|
|
9687
9701
|
.pf-c-description-list__group {
|
|
9688
9702
|
display: grid;
|