@patternfly/patternfly 4.166.2 → 4.167.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 (21) hide show
  1. package/components/DescriptionList/description-list.css +18 -0
  2. package/components/DescriptionList/description-list.scss +19 -0
  3. package/components/Truncate/truncate.css +14 -26
  4. package/components/Truncate/truncate.scss +13 -32
  5. package/docs/components/DescriptionList/examples/DescriptionList.md +73 -131
  6. package/docs/components/Table/examples/Table.md +25 -14
  7. package/docs/components/Toolbar/examples/Toolbar.md +0 -2
  8. package/docs/components/Truncate/examples/Truncate.css +9 -0
  9. package/docs/components/Truncate/examples/Truncate.md +16 -25
  10. package/docs/demos/Card/examples/Card.md +95 -139
  11. package/docs/demos/CardView/examples/CardView.md +0 -1
  12. package/docs/demos/DataList/examples/DataList.md +0 -2
  13. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +0 -1
  14. package/docs/demos/Table/examples/Table.md +11 -23
  15. package/docs/demos/Tabs/examples/Tabs.md +25 -68
  16. package/docs/demos/Toolbar/examples/Toolbar.md +0 -1827
  17. package/package.json +1 -1
  18. package/patternfly-no-reset.css +32 -26
  19. package/patternfly.css +32 -26
  20. package/patternfly.min.css +1 -1
  21. package/patternfly.min.css.map +1 -1
package/components/DescriptionList/description-list.css CHANGED
@@ -11,9 +11,14 @@
11
11
  --pf-c-description-list__group--GridColumn: auto;
12
12
  --pf-c-description-list--m-compact--RowGap: var(--pf-global--gutter);
13
13
  --pf-c-description-list--m-compact--ColumnGap: var(--pf-global--spacer--sm);
14
+ --pf-c-description-list__term--Display: inline;
15
+ --pf-c-description-list__term--sm--Display: flex;
14
16
  --pf-c-description-list__term--FontWeight: var(--pf-global--FontWeight--bold);
15
17
  --pf-c-description-list__term--FontSize: var(--pf-global--FontSize--sm);
16
18
  --pf-c-description-list__term--LineHeight: var(--pf-global--LineHeight--sm);
19
+ --pf-c-description-list__term-icon--MinWidth: var(--pf-global--icon--FontSize--sm);
20
+ --pf-c-description-list__term-icon--MarginRight: var(--pf-global--spacer--sm);
21
+ --pf-c-description-list__term-icon--Color: var(--pf-global--icon--Color--light);
17
22
  --pf-c-description-list--m-vertical__group--GridTemplateColumns: repeat(var(--pf-c-description-list--GridTemplateColumns--count));
18
23
  --pf-c-description-list--m-horizontal__term--width: 12ch;
19
24
  --pf-c-description-list--m-horizontal__description--width: minmax(10ch, auto);
@@ -34,6 +39,11 @@
34
39
  column-gap: var(--pf-c-description-list--ColumnGap);
35
40
  grid-template-columns: var(--pf-c-description-list--GridTemplateColumns);
36
41
  }
42
+ @media screen and (min-width: 576px) {
43
+ .pf-c-description-list {
44
+ --pf-c-description-list__term--Display: var(--pf-c-description-list__term--sm--Display);
45
+ }
46
+ }
37
47
  .pf-c-description-list[class*=pf-m-horizontal] {
38
48
  --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width);
39
49
  }
@@ -136,6 +146,7 @@
136
146
  }
137
147
 
138
148
  .pf-c-description-list__term {
149
+ display: var(--pf-c-description-list__term--Display);
139
150
  font-size: var(--pf-c-description-list__term--FontSize);
140
151
  font-weight: var(--pf-c-description-list__term--FontWeight);
141
152
  line-height: var(--pf-c-description-list__term--LineHeight);
@@ -144,6 +155,13 @@
144
155
  display: inline;
145
156
  }
146
157
 
158
+ .pf-c-description-list__term-icon {
159
+ flex-shrink: 0;
160
+ min-width: var(--pf-c-description-list__term-icon--MinWidth);
161
+ margin-right: var(--pf-c-description-list__term-icon--MarginRight);
162
+ color: var(--pf-c-description-list__term-icon--Color);
163
+ }
164
+
147
165
  .pf-c-description-list__text.pf-m-help-text {
148
166
  text-decoration: underline;
149
167
  cursor: pointer;
package/components/DescriptionList/description-list.scss CHANGED
@@ -19,10 +19,21 @@ $pf-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md",
19
19
  --pf-c-description-list--m-compact--ColumnGap: var(--pf-global--spacer--sm);
20
20
 
21
21
  // term
22
+ --pf-c-description-list__term--Display: inline;
23
+ --pf-c-description-list__term--sm--Display: flex;
22
24
  --pf-c-description-list__term--FontWeight: var(--pf-global--FontWeight--bold);
23
25
  --pf-c-description-list__term--FontSize: var(--pf-global--FontSize--sm);
24
26
  --pf-c-description-list__term--LineHeight: var(--pf-global--LineHeight--sm);
25
27
 
28
+ @media screen and (min-width: $pf-global--breakpoint--sm) {
29
+ --pf-c-description-list__term--Display: var(--pf-c-description-list__term--sm--Display);
30
+ }
31
+
32
+ // icon
33
+ --pf-c-description-list__term-icon--MinWidth: var(--pf-global--icon--FontSize--sm);
34
+ --pf-c-description-list__term-icon--MarginRight: var(--pf-global--spacer--sm);
35
+ --pf-c-description-list__term-icon--Color: var(--pf-global--icon--Color--light);
36
+
26
37
  // vertical
27
38
  --pf-c-description-list--m-vertical__group--GridTemplateColumns: repeat(var(--pf-c-description-list--GridTemplateColumns--count));
28
39
 
@@ -115,6 +126,7 @@ $pf-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md",
115
126
  }
116
127
 
117
128
  .pf-c-description-list__term {
129
+ display: var(--pf-c-description-list__term--Display);
118
130
  font-size: var(--pf-c-description-list__term--FontSize);
119
131
  font-weight: var(--pf-c-description-list__term--FontWeight);
120
132
  line-height: var(--pf-c-description-list__term--LineHeight);
@@ -124,6 +136,13 @@ $pf-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md",
124
136
  }
125
137
  }
126
138
 
139
+ .pf-c-description-list__term-icon {
140
+ flex-shrink: 0;
141
+ min-width: var(--pf-c-description-list__term-icon--MinWidth);
142
+ margin-right: var(--pf-c-description-list__term-icon--MarginRight);
143
+ color: var(--pf-c-description-list__term-icon--Color);
144
+ }
145
+
127
146
  .pf-c-description-list__text {
128
147
  &.pf-m-help-text {
129
148
  text-decoration: underline;
package/components/Truncate/truncate.css CHANGED
@@ -1,45 +1,33 @@
1
1
  .pf-c-truncate {
2
- --pf-c-truncate--FontSize: 1rem;
3
- display: inline-flex;
4
- flex-wrap: nowrap;
5
- max-width: 100%;
2
+ --pf-c-truncate--MinWidth: 12ch;
3
+ --pf-c-truncate__start--MinWidth: 6ch;
4
+ display: inline-grid;
5
+ grid-auto-flow: column;
6
+ align-items: baseline;
7
+ min-width: var(--pf-c-truncate--MinWidth);
6
8
  }
7
9
 
8
10
  .pf-c-truncate__start,
9
11
  .pf-c-truncate__end {
10
- flex-shrink: 1;
11
12
  overflow: hidden;
12
13
  text-overflow: ellipsis;
13
14
  white-space: nowrap;
14
15
  }
15
16
 
17
+ .pf-c-truncate__start {
18
+ min-width: var(--pf-c-truncate__start--MinWidth);
19
+ }
20
+
16
21
  .pf-c-truncate__end {
17
22
  direction: rtl;
18
- text-align: left;
19
23
  }
20
24
 
21
- @supports (text-overflow: "") {
22
- .pf-c-truncate__start + .pf-c-truncate__end {
23
- text-overflow: "";
24
- }
25
+ .pf-c-truncate__start + .pf-c-truncate__end {
26
+ overflow: visible;
27
+ direction: ltr;
25
28
  }
26
- @supports not (text-overflow: "") {
27
- .pf-c-truncate__start + .pf-c-truncate__end {
28
- font-size: 0;
29
- }
30
- .pf-c-truncate__start + .pf-c-truncate__end .pf-c-truncate__text {
31
- font-size: var(--pf-c-truncate--FontSize);
32
- }
33
- }
34
- @supports (-webkit-hyphens: none) {
35
- .pf-c-truncate {
36
- display: inline-block;
37
- max-width: 100%;
38
- overflow: hidden;
39
- text-overflow: ellipsis;
40
- white-space: nowrap;
41
- }
42
29
 
30
+ @supports (-webkit-hyphens: none) {
43
31
  .pf-c-truncate__end {
44
32
  direction: ltr;
45
33
  }
package/components/Truncate/truncate.scss CHANGED
@@ -1,55 +1,36 @@
1
1
  .pf-c-truncate {
2
- --pf-c-truncate--FontSize: 1rem;
2
+ --pf-c-truncate--MinWidth: 12ch;
3
+ --pf-c-truncate__start--MinWidth: 6ch;
3
4
 
4
- display: inline-flex;
5
- flex-wrap: nowrap;
6
- max-width: 100%;
5
+ display: inline-grid;
6
+ grid-auto-flow: column;
7
+ align-items: baseline;
8
+ min-width: var(--pf-c-truncate--MinWidth);
7
9
  }
8
10
 
9
- // Start, end
10
11
  .pf-c-truncate__start,
11
12
  .pf-c-truncate__end {
12
- flex-shrink: 1;
13
13
  overflow: hidden;
14
14
  text-overflow: ellipsis;
15
15
  white-space: nowrap;
16
16
  }
17
17
 
18
+ .pf-c-truncate__start {
19
+ min-width: var(--pf-c-truncate__start--MinWidth);
20
+ }
21
+
18
22
  // End
19
23
  .pf-c-truncate__end {
20
24
  direction: rtl;
21
- text-align: left;
22
25
  }
23
26
 
24
- // text-overflow: <string>
25
- @supports (text-overflow: "") {
26
- .pf-c-truncate__start + .pf-c-truncate__end {
27
- text-overflow: "";
28
- }
29
- }
30
-
31
- // text-overflow: ellipsis
32
- @supports not (text-overflow: "") {
33
- // Start + end = middle truncation
34
- .pf-c-truncate__start + .pf-c-truncate__end {
35
- font-size: 0; // shrink ellipsis size to zero
36
-
37
- .pf-c-truncate__text {
38
- font-size: var(--pf-c-truncate--FontSize);
39
- }
40
- }
27
+ .pf-c-truncate__start + .pf-c-truncate__end {
28
+ overflow: visible;
29
+ direction: ltr;
41
30
  }
42
31
 
43
32
  // safari not supported
44
33
  @supports (-webkit-hyphens: none) {
45
- .pf-c-truncate {
46
- display: inline-block;
47
- max-width: 100%;
48
- overflow: hidden;
49
- text-overflow: ellipsis;
50
- white-space: nowrap;
51
- }
52
-
53
34
  .pf-c-truncate__end {
54
35
  direction: ltr;
55
36
  }
package/docs/components/DescriptionList/examples/DescriptionList.md CHANGED
@@ -67,12 +67,7 @@ cssPrefix: pf-c-description-list
67
67
  <dl class="pf-c-description-list">
68
68
  <div class="pf-c-description-list__group">
69
69
  <dt class="pf-c-description-list__term">
70
- <span
71
- class="pf-c-description-list__text pf-m-help-text"
72
- role="button"
73
- type="button"
74
- tabindex="0"
75
- >Name</span>
70
+ <span class="pf-c-description-list__text">Name</span>
76
71
  </dt>
77
72
  <dd class="pf-c-description-list__description">
78
73
  <div class="pf-c-description-list__text">example</div>
@@ -80,12 +75,7 @@ cssPrefix: pf-c-description-list
80
75
  </div>
81
76
  <div class="pf-c-description-list__group">
82
77
  <dt class="pf-c-description-list__term">
83
- <span
84
- class="pf-c-description-list__text pf-m-help-text"
85
- role="button"
86
- type="button"
87
- tabindex="0"
88
- >Namespace</span>
78
+ <span class="pf-c-description-list__text">Namespace</span>
89
79
  </dt>
90
80
  <dd class="pf-c-description-list__description">
91
81
  <div class="pf-c-description-list__text">
@@ -95,12 +85,7 @@ cssPrefix: pf-c-description-list
95
85
  </div>
96
86
  <div class="pf-c-description-list__group">
97
87
  <dt class="pf-c-description-list__term">
98
- <span
99
- class="pf-c-description-list__text pf-m-help-text"
100
- role="button"
101
- type="button"
102
- tabindex="0"
103
- >Labels</span>
88
+ <span class="pf-c-description-list__text">Labels</span>
104
89
  </dt>
105
90
  <dd class="pf-c-description-list__description">
106
91
  <div class="pf-c-description-list__text">example</div>
@@ -108,12 +93,7 @@ cssPrefix: pf-c-description-list
108
93
  </div>
109
94
  <div class="pf-c-description-list__group">
110
95
  <dt class="pf-c-description-list__term">
111
- <span
112
- class="pf-c-description-list__text pf-m-help-text"
113
- role="button"
114
- type="button"
115
- tabindex="0"
116
- >Pod selector</span>
96
+ <span class="pf-c-description-list__text">Pod selector</span>
117
97
  </dt>
118
98
  <dd class="pf-c-description-list__description">
119
99
  <div class="pf-c-description-list__text">
@@ -128,12 +108,7 @@ cssPrefix: pf-c-description-list
128
108
  </div>
129
109
  <div class="pf-c-description-list__group">
130
110
  <dt class="pf-c-description-list__term">
131
- <span
132
- class="pf-c-description-list__text pf-m-help-text"
133
- role="button"
134
- type="button"
135
- tabindex="0"
136
- >Annotation</span>
111
+ <span class="pf-c-description-list__text">Annotation</span>
137
112
  </dt>
138
113
  <dd class="pf-c-description-list__description">
139
114
  <div class="pf-c-description-list__text">2 Annotations</div>
@@ -152,7 +127,9 @@ cssPrefix: pf-c-description-list
152
127
  <span class="pf-c-description-list__text">Name</span>
153
128
  </dt>
154
129
  <dd class="pf-c-description-list__description">
155
- <div class="pf-c-description-list__text">example</div>
130
+ <div
131
+ class="pf-c-description-list__text"
132
+ >This is a long description that should wrap to multiple lines in a multi-column layout.</div>
156
133
  </dd>
157
134
  </div>
158
135
  <div class="pf-c-description-list__group">
@@ -601,14 +578,18 @@ cssPrefix: pf-c-description-list
601
578
 
602
579
  ### Column fill
603
580
 
581
+ 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.
582
+
604
583
  ```html
605
- <dl class="pf-c-description-list pf-m-fill-columns">
584
+ <dl class="pf-c-description-list pf-m-fill-columns pf-m-2-col pf-m-3-col-on-lg">
606
585
  <div class="pf-c-description-list__group">
607
586
  <dt class="pf-c-description-list__term">
608
587
  <span class="pf-c-description-list__text">Name</span>
609
588
  </dt>
610
589
  <dd class="pf-c-description-list__description">
611
- <div class="pf-c-description-list__text">example</div>
590
+ <div
591
+ class="pf-c-description-list__text"
592
+ >This is a long description that should wrap to multiple lines in a multi-column layout.</div>
612
593
  </dd>
613
594
  </div>
614
595
  <div class="pf-c-description-list__group">
@@ -656,10 +637,12 @@ cssPrefix: pf-c-description-list
656
637
 
657
638
  ```
658
639
 
659
- ### Column fill, horizontal
640
+ ## Auto fit
641
+
642
+ ### Auto-fit basic
660
643
 
661
644
  ```html
662
- <dl class="pf-c-description-list pf-m-fill-columns pf-m-horizontal">
645
+ <dl class="pf-c-description-list pf-m-auto-fit">
663
646
  <div class="pf-c-description-list__group">
664
647
  <dt class="pf-c-description-list__term">
665
648
  <span class="pf-c-description-list__text">Name</span>
@@ -713,11 +696,12 @@ cssPrefix: pf-c-description-list
713
696
 
714
697
  ```
715
698
 
716
- ### Column fill, horizontal, multi-column
699
+ ### Auto-fit, min width modified grid template columns
717
700
 
718
701
  ```html
719
702
  <dl
720
- class="pf-c-description-list pf-m-fill-columns pf-m-horizontal pf-m-2-col pf-m-3-col-on-lg"
703
+ class="pf-c-description-list pf-m-auto-fit"
704
+ style="--pf-c-description-list--GridTemplateColumns--min: 200px;"
721
705
  >
722
706
  <div class="pf-c-description-list__group">
723
707
  <dt class="pf-c-description-list__term">
@@ -772,12 +756,13 @@ cssPrefix: pf-c-description-list
772
756
 
773
757
  ```
774
758
 
775
- ## Auto fit
776
-
777
- ### Auto-fit basic
759
+ ### Auto-fit, min width modified, responsive grid template columns
778
760
 
779
761
  ```html
780
- <dl class="pf-c-description-list pf-m-auto-fit">
762
+ <dl
763
+ class="pf-c-description-list pf-m-auto-fit"
764
+ style="--pf-c-description-list--GridTemplateColumns--min-on-md: 100px; --pf-c-description-list--GridTemplateColumns--min-on-lg: 150px; --pf-c-description-list--GridTemplateColumns--min-on-xl: 200px; --pf-c-description-list--GridTemplateColumns--min-on-2xl: 300px;"
765
+ >
781
766
  <div class="pf-c-description-list__group">
782
767
  <dt class="pf-c-description-list__term">
783
768
  <span class="pf-c-description-list__text">Name</span>
@@ -831,13 +816,12 @@ cssPrefix: pf-c-description-list
831
816
 
832
817
  ```
833
818
 
834
- ### Auto-fit, min width modified grid template columns
819
+ ## Responsive column definitions
820
+
821
+ ### Default responsive columns
835
822
 
836
823
  ```html
837
- <dl
838
- class="pf-c-description-list pf-m-auto-fit"
839
- style="--pf-c-description-list--GridTemplateColumns--min: 200px;"
840
- >
824
+ <dl class="pf-c-description-list pf-m-2-col-on-lg pf-m-3-col-on-xl">
841
825
  <div class="pf-c-description-list__group">
842
826
  <dt class="pf-c-description-list__term">
843
827
  <span class="pf-c-description-list__text">Name</span>
@@ -891,12 +875,11 @@ cssPrefix: pf-c-description-list
891
875
 
892
876
  ```
893
877
 
894
- ### Auto-fit, min width modified, responsive grid template columns
878
+ ### Horizontal responsive columns
895
879
 
896
880
  ```html
897
881
  <dl
898
- class="pf-c-description-list pf-m-auto-fit"
899
- style="--pf-c-description-list--GridTemplateColumns--min-on-md: 100px; --pf-c-description-list--GridTemplateColumns--min-on-lg: 150px; --pf-c-description-list--GridTemplateColumns--min-on-xl: 200px; --pf-c-description-list--GridTemplateColumns--min-on-2xl: 300px;"
882
+ class="pf-c-description-list pf-m-horizontal pf-m-2-col-on-lg pf-m-3-col-on-xl"
900
883
  >
901
884
  <div class="pf-c-description-list__group">
902
885
  <dt class="pf-c-description-list__term">
@@ -951,12 +934,12 @@ cssPrefix: pf-c-description-list
951
934
 
952
935
  ```
953
936
 
954
- ## Responsive column definitions
955
-
956
- ### Default responsive columns
937
+ ### Responsive horizontal, vertical group layout
957
938
 
958
939
  ```html
959
- <dl class="pf-c-description-list pf-m-2-col-on-lg pf-m-3-col-on-xl">
940
+ <dl
941
+ class="pf-c-description-list pf-m-horizontal pf-m-vertical-on-md pf-m-horizontal-on-lg pf-m-vertical-on-xl pf-m-horizontal-on-2xl"
942
+ >
960
943
  <div class="pf-c-description-list__group">
961
944
  <dt class="pf-c-description-list__term">
962
945
  <span class="pf-c-description-list__text">Name</span>
@@ -1010,12 +993,12 @@ cssPrefix: pf-c-description-list
1010
993
 
1011
994
  ```
1012
995
 
1013
- ### Horizontal responsive columns
996
+ ## Auto-column-width
997
+
998
+ ### Default auto columns width
1014
999
 
1015
1000
  ```html
1016
- <dl
1017
- class="pf-c-description-list pf-m-horizontal pf-m-2-col-on-lg pf-m-3-col-on-xl"
1018
- >
1001
+ <dl class="pf-c-description-list pf-m-auto-column-widths pf-m-3-col">
1019
1002
  <div class="pf-c-description-list__group">
1020
1003
  <dt class="pf-c-description-list__term">
1021
1004
  <span class="pf-c-description-list__text">Name</span>
@@ -1069,11 +1052,11 @@ cssPrefix: pf-c-description-list
1069
1052
 
1070
1053
  ```
1071
1054
 
1072
- ### Responsive horizontal, vertical group layout
1055
+ ### Horizontal auto column width
1073
1056
 
1074
1057
  ```html
1075
1058
  <dl
1076
- class="pf-c-description-list pf-m-horizontal pf-m-vertical-on-md pf-m-horizontal-on-lg pf-m-vertical-on-xl pf-m-horizontal-on-2xl"
1059
+ class="pf-c-description-list pf-m-horizontal pf-m-auto-column-widths pf-m-2-col-on-lg"
1077
1060
  >
1078
1061
  <div class="pf-c-description-list__group">
1079
1062
  <dt class="pf-c-description-list__term">
@@ -1128,12 +1111,12 @@ cssPrefix: pf-c-description-list
1128
1111
 
1129
1112
  ```
1130
1113
 
1131
- ## Auto-column-width
1114
+ ## Inline grid
1132
1115
 
1133
- ### Default auto columns width
1116
+ ### Default inline grid
1134
1117
 
1135
1118
  ```html
1136
- <dl class="pf-c-description-list pf-m-auto-column-widths pf-m-3-col">
1119
+ <dl class="pf-c-description-list pf-m-3-col pf-m-inline-grid">
1137
1120
  <div class="pf-c-description-list__group">
1138
1121
  <dt class="pf-c-description-list__term">
1139
1122
  <span class="pf-c-description-list__text">Name</span>
@@ -1187,74 +1170,27 @@ cssPrefix: pf-c-description-list
1187
1170
 
1188
1171
  ```
1189
1172
 
1190
- ### Horizontal auto column width
1191
-
1192
- ```html
1193
- <dl
1194
- class="pf-c-description-list pf-m-horizontal pf-m-auto-column-widths pf-m-2-col-on-lg"
1195
- >
1196
- <div class="pf-c-description-list__group">
1197
- <dt class="pf-c-description-list__term">
1198
- <span class="pf-c-description-list__text">Name</span>
1199
- </dt>
1200
- <dd class="pf-c-description-list__description">
1201
- <div class="pf-c-description-list__text">example</div>
1202
- </dd>
1203
- </div>
1204
- <div class="pf-c-description-list__group">
1205
- <dt class="pf-c-description-list__term">
1206
- <span class="pf-c-description-list__text">Namespace</span>
1207
- </dt>
1208
- <dd class="pf-c-description-list__description">
1209
- <div class="pf-c-description-list__text">
1210
- <a href="#">mary-test</a>
1211
- </div>
1212
- </dd>
1213
- </div>
1214
- <div class="pf-c-description-list__group">
1215
- <dt class="pf-c-description-list__term">
1216
- <span class="pf-c-description-list__text">Labels</span>
1217
- </dt>
1218
- <dd class="pf-c-description-list__description">
1219
- <div class="pf-c-description-list__text">example</div>
1220
- </dd>
1221
- </div>
1222
- <div class="pf-c-description-list__group">
1223
- <dt class="pf-c-description-list__term">
1224
- <span class="pf-c-description-list__text">Pod selector</span>
1225
- </dt>
1226
- <dd class="pf-c-description-list__description">
1227
- <div class="pf-c-description-list__text">
1228
- <button class="pf-c-button pf-m-link pf-m-inline" type="button">
1229
- <span class="pf-c-button__icon pf-m-start">
1230
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1231
- </span>
1232
- app=MyApp
1233
- </button>
1234
- </div>
1235
- </dd>
1236
- </div>
1237
- <div class="pf-c-description-list__group">
1238
- <dt class="pf-c-description-list__term">
1239
- <span class="pf-c-description-list__text">Annotation</span>
1240
- </dt>
1241
- <dd class="pf-c-description-list__description">
1242
- <div class="pf-c-description-list__text">2 Annotations</div>
1243
- </dd>
1244
- </div>
1245
- </dl>
1173
+ <!-- ## Auto term with is only supported in FF currently
1246
1174
 
1247
- ```
1175
+ ### Horizontal 2 col auto term width
1176
+ ```hbs
1177
+ {{> description-list__example description-list--title="Horizontal 2 column DL" description-list--modifier="pf-m-horizontal pf-m-auto-term-widths pf-m-2-col"}}
1178
+ ``` -->
1248
1179
 
1249
- ## Inline grid
1180
+ ## With icons
1250
1181
 
1251
- ### Default inline grid
1182
+ ### Icons on terms
1252
1183
 
1253
1184
  ```html
1254
- <dl class="pf-c-description-list pf-m-3-col pf-m-inline-grid">
1185
+ <dl class="pf-c-description-list">
1255
1186
  <div class="pf-c-description-list__group">
1256
1187
  <dt class="pf-c-description-list__term">
1257
- <span class="pf-c-description-list__text">Name</span>
1188
+ <span class="pf-c-description-list__term-icon">
1189
+ <i class="fas fa-cube" aria-hidden="true"></i>
1190
+ </span>
1191
+ <span
1192
+ class="pf-c-description-list__text"
1193
+ >This is a long description that should wrap to multiple lines in cases where the viewport is quite narrow.</span>
1258
1194
  </dt>
1259
1195
  <dd class="pf-c-description-list__description">
1260
1196
  <div class="pf-c-description-list__text">example</div>
@@ -1262,6 +1198,9 @@ cssPrefix: pf-c-description-list
1262
1198
  </div>
1263
1199
  <div class="pf-c-description-list__group">
1264
1200
  <dt class="pf-c-description-list__term">
1201
+ <span class="pf-c-description-list__term-icon">
1202
+ <i class="fas fa-book" aria-hidden="true"></i>
1203
+ </span>
1265
1204
  <span class="pf-c-description-list__text">Namespace</span>
1266
1205
  </dt>
1267
1206
  <dd class="pf-c-description-list__description">
@@ -1272,6 +1211,9 @@ cssPrefix: pf-c-description-list
1272
1211
  </div>
1273
1212
  <div class="pf-c-description-list__group">
1274
1213
  <dt class="pf-c-description-list__term">
1214
+ <span class="pf-c-description-list__term-icon">
1215
+ <i class="fas fa-key" aria-hidden="true"></i>
1216
+ </span>
1275
1217
  <span class="pf-c-description-list__text">Labels</span>
1276
1218
  </dt>
1277
1219
  <dd class="pf-c-description-list__description">
@@ -1280,6 +1222,9 @@ cssPrefix: pf-c-description-list
1280
1222
  </div>
1281
1223
  <div class="pf-c-description-list__group">
1282
1224
  <dt class="pf-c-description-list__term">
1225
+ <span class="pf-c-description-list__term-icon">
1226
+ <i class="fas fa-globe" aria-hidden="true"></i>
1227
+ </span>
1283
1228
  <span class="pf-c-description-list__text">Pod selector</span>
1284
1229
  </dt>
1285
1230
  <dd class="pf-c-description-list__description">
@@ -1295,6 +1240,9 @@ cssPrefix: pf-c-description-list
1295
1240
  </div>
1296
1241
  <div class="pf-c-description-list__group">
1297
1242
  <dt class="pf-c-description-list__term">
1243
+ <span class="pf-c-description-list__term-icon">
1244
+ <i class="fas fa-flag" aria-hidden="true"></i>
1245
+ </span>
1298
1246
  <span class="pf-c-description-list__text">Annotation</span>
1299
1247
  </dt>
1300
1248
  <dd class="pf-c-description-list__description">
@@ -1305,13 +1253,6 @@ cssPrefix: pf-c-description-list
1305
1253
 
1306
1254
  ```
1307
1255
 
1308
- <!-- ## Auto term with is only supported in FF currently
1309
-
1310
- ### Horizontal 2 col auto term width
1311
- ```hbs
1312
- {{> description-list__example description-list--title="Horizontal 2 column DL" description-list--modifier="pf-m-horizontal pf-m-auto-term-widths pf-m-2-col"}}
1313
- ``` -->
1314
-
1315
1256
  ## Documentation
1316
1257
 
1317
1258
  ### Accessibility
@@ -1330,12 +1271,13 @@ cssPrefix: pf-c-description-list
1330
1271
  | `.pf-c-description-list__term` | `<dt>` | Initiates a description list component term. **Required** |
1331
1272
  | `.pf-c-description-list__description` | `<dd>` | Initiates a description list component description. **Required** |
1332
1273
  | `.pf-c-description-list__text` | `<span>`, `<div>` | Initiates a description list component text element. Use a `<span>` when a child of `.pf-c-description-list__term`. **Required** |
1274
+ | `.pf-c-description-list__term-icon` | `<span>` | Initiates a description list component term icon element. |
1333
1275
  | `.pf-m-compact` | `.pf-c-description-list` | Modifies the description list for compact horizontal and vertical spacing. |
1334
1276
  | `.pf-m-fluid` | `.pf-c-description-list.pf-m-horizontal` | Modifies the description list term width to be fluid. |
1335
1277
  | `.pf-m-help-text` | `.pf-c-description-list__text` | Indicates there is more information available for the description list component term text. |
1336
1278
  | `.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
1279
  | `.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 . |
1280
+ | `.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
1281
  | `.pf-m-auto-column-widths` | `.pf-c-description-list` | Modifies the description list to format automatically. |
1340
1282
  | `.pf-m-inline-grid` | `.pf-c-description-list` | Modifies the description list display to inline-grid. |
1341
1283
  | `.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list number of columns. |