@patternfly/patternfly 4.166.3 → 4.166.4
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.
|
@@ -152,7 +152,9 @@ cssPrefix: pf-c-description-list
|
|
|
152
152
|
<span class="pf-c-description-list__text">Name</span>
|
|
153
153
|
</dt>
|
|
154
154
|
<dd class="pf-c-description-list__description">
|
|
155
|
-
<div
|
|
155
|
+
<div
|
|
156
|
+
class="pf-c-description-list__text"
|
|
157
|
+
>This is a long description that should wrap to multiple lines in a multi-column layout.</div>
|
|
156
158
|
</dd>
|
|
157
159
|
</div>
|
|
158
160
|
<div class="pf-c-description-list__group">
|
|
@@ -601,130 +603,18 @@ cssPrefix: pf-c-description-list
|
|
|
601
603
|
|
|
602
604
|
### Column fill
|
|
603
605
|
|
|
604
|
-
|
|
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
|
|
606
|
+
Column fill will modify the default placement of description list groups to fill from top to bottom using css column-count, instead of left to right. **Note:** using this modifier will change the layout so that horizontally adjacent groups are no longer aligned in the same row.
|
|
660
607
|
|
|
661
608
|
```html
|
|
662
|
-
<dl class="pf-c-description-list pf-m-fill-columns pf-m-
|
|
609
|
+
<dl class="pf-c-description-list pf-m-fill-columns pf-m-2-col pf-m-3-col-on-lg">
|
|
663
610
|
<div class="pf-c-description-list__group">
|
|
664
611
|
<dt class="pf-c-description-list__term">
|
|
665
612
|
<span class="pf-c-description-list__text">Name</span>
|
|
666
613
|
</dt>
|
|
667
614
|
<dd class="pf-c-description-list__description">
|
|
668
|
-
<div
|
|
669
|
-
|
|
670
|
-
|
|
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>
|
|
615
|
+
<div
|
|
616
|
+
class="pf-c-description-list__text"
|
|
617
|
+
>This is a long description that should wrap to multiple lines in a multi-column layout.</div>
|
|
728
618
|
</dd>
|
|
729
619
|
</div>
|
|
730
620
|
<div class="pf-c-description-list__group">
|
|
@@ -1335,7 +1225,7 @@ cssPrefix: pf-c-description-list
|
|
|
1335
1225
|
| `.pf-m-help-text` | `.pf-c-description-list__text` | Indicates there is more information available for the description list component term text. |
|
|
1336
1226
|
| `.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. |
|
|
1337
1227
|
| `.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 .
|
|
1228
|
+
| `.pf-m-fill-columns` | `.pf-c-description-list` | Modifies the description list groups to fill columns from top to bottom, instead of rows from left to right. |
|
|
1339
1229
|
| `.pf-m-auto-column-widths` | `.pf-c-description-list` | Modifies the description list to format automatically. |
|
|
1340
1230
|
| `.pf-m-inline-grid` | `.pf-c-description-list` | Modifies the description list display to inline-grid. |
|
|
1341
1231
|
| `.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list number of columns. |
|
|
@@ -21413,12 +21413,6 @@ For sticky columns to function correctly, the parent table's width must be contr
|
|
|
21413
21413
|
aria-label="This is a nested column header table example"
|
|
21414
21414
|
id="nested-columns-expandable-example"
|
|
21415
21415
|
>
|
|
21416
|
-
<col />
|
|
21417
|
-
<col />
|
|
21418
|
-
<col />
|
|
21419
|
-
<colgroup span="3"></colgroup>
|
|
21420
|
-
<col />
|
|
21421
|
-
<col />
|
|
21422
21416
|
<thead class="pf-m-nested-column-header">
|
|
21423
21417
|
<tr role="row">
|
|
21424
21418
|
<td rowspan="2"></td>
|
|
@@ -21797,12 +21791,6 @@ For sticky columns to function correctly, the parent table's width must be contr
|
|
|
21797
21791
|
aria-label="This is a nested column header table example"
|
|
21798
21792
|
id="table-nested-column-headers-example"
|
|
21799
21793
|
>
|
|
21800
|
-
<colgroup span="3"></colgroup>
|
|
21801
|
-
<colgroup span="2"></colgroup>
|
|
21802
|
-
<col />
|
|
21803
|
-
<col />
|
|
21804
|
-
<col />
|
|
21805
|
-
<col />
|
|
21806
21794
|
<thead class="pf-m-nested-column-header">
|
|
21807
21795
|
<tr role="row">
|
|
21808
21796
|
<th
|