@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/components/DescriptionList/description-list.css CHANGED
@@ -8,6 +8,7 @@
8
8
  --pf-c-description-list__group--RowGap: var(--pf-global--spacer--sm);
9
9
  --pf-c-description-list__group--ColumnGap: var(--pf-global--spacer--sm);
10
10
  --pf-c-description-list__group--GridTemplateColumns: auto;
11
+ --pf-c-description-list__group--GridTemplateRows: auto 1fr;
11
12
  --pf-c-description-list__group--GridColumn: auto;
12
13
  --pf-c-description-list--m-compact--RowGap: var(--pf-global--gutter);
13
14
  --pf-c-description-list--m-compact--ColumnGap: var(--pf-global--spacer--sm);
@@ -20,9 +21,11 @@
20
21
  --pf-c-description-list__term-icon--MarginRight: var(--pf-global--spacer--sm);
21
22
  --pf-c-description-list__term-icon--Color: var(--pf-global--icon--Color--light);
22
23
  --pf-c-description-list--m-vertical__group--GridTemplateColumns: repeat(var(--pf-c-description-list--GridTemplateColumns--count));
24
+ --pf-c-description-list--m-vertical__group--GridTemplateRows: auto 1fr;
23
25
  --pf-c-description-list--m-horizontal__term--width: 12ch;
24
26
  --pf-c-description-list--m-horizontal__description--width: minmax(10ch, auto);
25
27
  --pf-c-description-list--m-horizontal__group--GridTemplateColumns: var(--pf-c-description-list__term--width) var(--pf-c-description-list--m-horizontal__description--width);
28
+ --pf-c-description-list--m-horizontal__group--GridTemplateRows: auto;
26
29
  --pf-c-description-list--m-1-col--GridTemplateColumns--count: 1;
27
30
  --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
28
31
  --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
@@ -33,6 +36,8 @@
33
36
  --pf-c-description-list__text--m-help-text--TextDecorationOffset: 0.25rem;
34
37
  --pf-c-description-list__text--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
35
38
  --pf-c-description-list__text--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
39
+ --pf-c-description-list--m-display-lg__description--FontSize: var(--pf-global--FontSize--lg);
40
+ --pf-c-description-list--m-display-2xl__description--FontSize: var(--pf-global--FontSize--2xl);
36
41
  display: grid;
37
42
  align-items: baseline;
38
43
  row-gap: var(--pf-c-description-list--RowGap);
@@ -119,7 +124,8 @@
119
124
  column-count: var(--pf-c-description-list--GridTemplateColumns--count);
120
125
  margin-bottom: calc(var(--pf-c-description-list--RowGap) * -1);
121
126
  }
122
- .pf-c-description-list.pf-m-fill-columns .pf-c-description-list__group {
127
+ .pf-c-description-list.pf-m-fill-columns .pf-c-description-list__group,
128
+ .pf-c-description-list.pf-m-fill-columns > .pf-c-card {
123
129
  display: inline-grid;
124
130
  width: 100%;
125
131
  margin-bottom: var(--pf-c-description-list--RowGap);
@@ -128,13 +134,25 @@
128
134
  -webkit-column-break-inside: avoid;
129
135
  -moz-column-break-inside: avoid;
130
136
  }
137
+ .pf-c-description-list.pf-m-display-lg {
138
+ --pf-c-description-list__description--FontSize: var(--pf-c-description-list--m-display-lg__description--FontSize);
139
+ }
140
+ .pf-c-description-list.pf-m-display-2xl {
141
+ --pf-c-description-list__description--FontSize: var(--pf-c-description-list--m-display-2xl__description--FontSize);
142
+ }
143
+ .pf-c-description-list > .pf-c-card {
144
+ align-self: stretch;
145
+ 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);
146
+ }
131
147
 
132
- .pf-c-description-list__group {
148
+ .pf-c-description-list__group,
149
+ .pf-c-description-list > .pf-c-card {
133
150
  display: grid;
134
151
  grid-column: var(--pf-c-description-list__group--GridColumn);
135
152
  row-gap: var(--pf-c-description-list__group--RowGap);
136
153
  column-gap: var(--pf-c-description-list__group--ColumnGap);
137
154
  grid-template-columns: var(--pf-c-description-list__group--GridTemplateColumns);
155
+ grid-template-rows: var(--pf-c-description-list__group--GridTemplateRows);
138
156
  align-items: baseline;
139
157
  }
140
158
 
@@ -162,6 +180,10 @@
162
180
  color: var(--pf-c-description-list__term-icon--Color);
163
181
  }
164
182
 
183
+ .pf-c-description-list__description {
184
+ font-size: var(--pf-c-description-list__description--FontSize, inherit);
185
+ }
186
+
165
187
  .pf-c-description-list__text {
166
188
  min-width: 0;
167
189
  }
@@ -191,9 +213,11 @@
191
213
  }
192
214
  .pf-c-description-list.pf-m-horizontal {
193
215
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
216
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
194
217
  }
195
218
  .pf-c-description-list.pf-m-vertical {
196
219
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
220
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
197
221
  }
198
222
  @media (min-width: 576px) {
199
223
  .pf-c-description-list.pf-m-1-col-on-sm {
@@ -207,9 +231,11 @@
207
231
  }
208
232
  .pf-c-description-list.pf-m-horizontal-on-sm {
209
233
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
234
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
210
235
  }
211
236
  .pf-c-description-list.pf-m-vertical-on-sm {
212
237
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
238
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
213
239
  }
214
240
  }
215
241
  @media (min-width: 768px) {
@@ -224,9 +250,11 @@
224
250
  }
225
251
  .pf-c-description-list.pf-m-horizontal-on-md {
226
252
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
253
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
227
254
  }
228
255
  .pf-c-description-list.pf-m-vertical-on-md {
229
256
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
257
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
230
258
  }
231
259
  }
232
260
  @media (min-width: 992px) {
@@ -241,9 +269,11 @@
241
269
  }
242
270
  .pf-c-description-list.pf-m-horizontal-on-lg {
243
271
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
272
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
244
273
  }
245
274
  .pf-c-description-list.pf-m-vertical-on-lg {
246
275
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
276
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
247
277
  }
248
278
  }
249
279
  @media (min-width: 1200px) {
@@ -258,9 +288,11 @@
258
288
  }
259
289
  .pf-c-description-list.pf-m-horizontal-on-xl {
260
290
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
291
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
261
292
  }
262
293
  .pf-c-description-list.pf-m-vertical-on-xl {
263
294
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
295
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
264
296
  }
265
297
  }
266
298
  @media (min-width: 1450px) {
@@ -275,8 +307,10 @@
275
307
  }
276
308
  .pf-c-description-list.pf-m-horizontal-on-2xl {
277
309
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
310
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
278
311
  }
279
312
  .pf-c-description-list.pf-m-vertical-on-2xl {
280
313
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
314
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
281
315
  }
282
316
  }
package/components/DescriptionList/description-list.scss CHANGED
@@ -12,6 +12,7 @@ $pf-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md",
12
12
  --pf-c-description-list__group--RowGap: var(--pf-global--spacer--sm);
13
13
  --pf-c-description-list__group--ColumnGap: var(--pf-global--spacer--sm);
14
14
  --pf-c-description-list__group--GridTemplateColumns: auto;
15
+ --pf-c-description-list__group--GridTemplateRows: auto 1fr;
15
16
  --pf-c-description-list__group--GridColumn: auto;
16
17
 
17
18
  // compact
@@ -36,11 +37,13 @@ $pf-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md",
36
37
 
37
38
  // vertical
38
39
  --pf-c-description-list--m-vertical__group--GridTemplateColumns: repeat(var(--pf-c-description-list--GridTemplateColumns--count));
40
+ --pf-c-description-list--m-vertical__group--GridTemplateRows: auto 1fr;
39
41
 
40
42
  // horizontal
41
43
  --pf-c-description-list--m-horizontal__term--width: 12ch;
42
44
  --pf-c-description-list--m-horizontal__description--width: minmax(10ch, auto);
43
45
  --pf-c-description-list--m-horizontal__group--GridTemplateColumns: var(--pf-c-description-list__term--width) var(--pf-c-description-list--m-horizontal__description--width); // use --pf-c-description-list__term--width here as it is re-defined on line 45
46
+ --pf-c-description-list--m-horizontal__group--GridTemplateRows: auto;
44
47
  --pf-c-description-list--m-1-col--GridTemplateColumns--count: 1;
45
48
  --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
46
49
  --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
@@ -56,6 +59,10 @@ $pf-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md",
56
59
  --pf-c-description-list__text--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
57
60
  --pf-c-description-list__text--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
58
61
 
62
+ // Display modifiers
63
+ --pf-c-description-list--m-display-lg__description--FontSize: var(--pf-global--FontSize--lg);
64
+ --pf-c-description-list--m-display-2xl__description--FontSize: var(--pf-global--FontSize--2xl);
65
+
59
66
  display: grid;
60
67
  align-items: baseline;
61
68
  row-gap: var(--pf-c-description-list--RowGap);
@@ -94,7 +101,8 @@ $pf-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md",
94
101
  column-count: var(--pf-c-description-list--GridTemplateColumns--count);
95
102
  margin-bottom: calc(var(--pf-c-description-list--RowGap) * -1);
96
103
 
97
- .pf-c-description-list__group {
104
+ .pf-c-description-list__group,
105
+ > .pf-c-card {
98
106
  display: inline-grid;
99
107
  width: 100%;
100
108
  margin-bottom: var(--pf-c-description-list--RowGap);
@@ -107,14 +115,29 @@ $pf-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md",
107
115
  // stylelint-enable
108
116
  }
109
117
  }
118
+
119
+ &.pf-m-display-lg {
120
+ --pf-c-description-list__description--FontSize: var(--pf-c-description-list--m-display-lg__description--FontSize);
121
+ }
122
+
123
+ &.pf-m-display-2xl {
124
+ --pf-c-description-list__description--FontSize: var(--pf-c-description-list--m-display-2xl__description--FontSize);
125
+ }
126
+
127
+ > .pf-c-card {
128
+ align-self: stretch;
129
+ 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);
130
+ }
110
131
  }
111
132
 
112
- .pf-c-description-list__group {
133
+ .pf-c-description-list__group,
134
+ .pf-c-description-list > .pf-c-card {
113
135
  display: grid;
114
136
  grid-column: var(--pf-c-description-list__group--GridColumn);
115
137
  row-gap: var(--pf-c-description-list__group--RowGap);
116
138
  column-gap: var(--pf-c-description-list__group--ColumnGap);
117
139
  grid-template-columns: var(--pf-c-description-list__group--GridTemplateColumns);
140
+ grid-template-rows: var(--pf-c-description-list__group--GridTemplateRows);
118
141
  align-items: baseline;
119
142
  }
120
143
 
@@ -143,6 +166,10 @@ $pf-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md",
143
166
  color: var(--pf-c-description-list__term-icon--Color);
144
167
  }
145
168
 
169
+ .pf-c-description-list__description {
170
+ font-size: var(--pf-c-description-list__description--FontSize, inherit);
171
+ }
172
+
146
173
  .pf-c-description-list__text {
147
174
  min-width: 0; // this allows overflow-wrap to work
148
175
 
@@ -185,10 +212,12 @@ $pf-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md",
185
212
 
186
213
  &.pf-m-horizontal#{$breakpoint-name} {
187
214
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
215
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
188
216
  }
189
217
 
190
218
  &.pf-m-vertical#{$breakpoint-name} {
191
219
  --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
220
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
192
221
  }
193
222
  }
194
223
  }
package/docs/components/DescriptionList/examples/DescriptionList.md CHANGED
@@ -118,7 +118,7 @@ cssPrefix: pf-c-description-list
118
118
 
119
119
  ```
120
120
 
121
- ### Default 2 col
121
+ ### Default, two column
122
122
 
123
123
  ```html
124
124
  <dl class="pf-c-description-list pf-m-2-col">
@@ -177,7 +177,7 @@ cssPrefix: pf-c-description-list
177
177
 
178
178
  ```
179
179
 
180
- ### Default 3 col on lg
180
+ ### Default, three column on lg breakpoint
181
181
 
182
182
  ```html
183
183
  <dl class="pf-c-description-list pf-m-3-col-on-lg">
@@ -291,7 +291,7 @@ cssPrefix: pf-c-description-list
291
291
 
292
292
  ```
293
293
 
294
- ### Horizontal 2 col
294
+ ### Horizontal, two column
295
295
 
296
296
  ```html
297
297
  <dl class="pf-c-description-list pf-m-horizontal pf-m-2-col">
@@ -348,7 +348,7 @@ cssPrefix: pf-c-description-list
348
348
 
349
349
  ```
350
350
 
351
- ### Horizontal 3 col on lg
351
+ ### Horizontal, three column on lg breakpoint
352
352
 
353
353
  ```html
354
354
  <dl class="pf-c-description-list pf-m-horizontal pf-m-3-col-on-lg">
@@ -696,7 +696,7 @@ Column fill will modify the default placement of description list groups to fill
696
696
 
697
697
  ```
698
698
 
699
- ### Auto-fit, min width modified grid template columns
699
+ ### Auto-fit, min width modified, grid template columns
700
700
 
701
701
  ```html
702
702
  <dl
@@ -818,7 +818,7 @@ Column fill will modify the default placement of description list groups to fill
818
818
 
819
819
  ## Responsive column definitions
820
820
 
821
- ### Default responsive columns
821
+ ### Default, responsive columns
822
822
 
823
823
  ```html
824
824
  <dl class="pf-c-description-list pf-m-2-col-on-lg pf-m-3-col-on-xl">
@@ -875,7 +875,7 @@ Column fill will modify the default placement of description list groups to fill
875
875
 
876
876
  ```
877
877
 
878
- ### Horizontal responsive columns
878
+ ### Horizontal, responsive columns
879
879
 
880
880
  ```html
881
881
  <dl
@@ -934,7 +934,7 @@ Column fill will modify the default placement of description list groups to fill
934
934
 
935
935
  ```
936
936
 
937
- ### Responsive horizontal, vertical group layout
937
+ ### Responsive, horizontal, vertical group layout
938
938
 
939
939
  ```html
940
940
  <dl
@@ -995,7 +995,7 @@ Column fill will modify the default placement of description list groups to fill
995
995
 
996
996
  ## Auto-column-width
997
997
 
998
- ### Default auto columns width
998
+ ### Default, auto columns width
999
999
 
1000
1000
  ```html
1001
1001
  <dl class="pf-c-description-list pf-m-auto-column-widths pf-m-3-col">
@@ -1052,7 +1052,7 @@ Column fill will modify the default placement of description list groups to fill
1052
1052
 
1053
1053
  ```
1054
1054
 
1055
- ### Horizontal auto column width
1055
+ ### Horizontal, auto column width
1056
1056
 
1057
1057
  ```html
1058
1058
  <dl
@@ -1113,7 +1113,7 @@ Column fill will modify the default placement of description list groups to fill
1113
1113
 
1114
1114
  ## Inline grid
1115
1115
 
1116
- ### Default inline grid
1116
+ ### Default, inline grid
1117
1117
 
1118
1118
  ```html
1119
1119
  <dl class="pf-c-description-list pf-m-3-col pf-m-inline-grid">
@@ -1170,6 +1170,309 @@ Column fill will modify the default placement of description list groups to fill
1170
1170
 
1171
1171
  ```
1172
1172
 
1173
+ ### Display variant
1174
+
1175
+ ```html
1176
+ <dl class="pf-c-description-list pf-m-display-lg pf-m-2-col-on-lg">
1177
+ <div class="pf-c-description-list__group">
1178
+ <dt class="pf-c-description-list__term">
1179
+ <span class="pf-c-description-list__text">Name</span>
1180
+ </dt>
1181
+ <dd class="pf-c-description-list__description">
1182
+ <div class="pf-c-description-list__text">example</div>
1183
+ </dd>
1184
+ </div>
1185
+ <div class="pf-c-description-list__group">
1186
+ <dt class="pf-c-description-list__term">
1187
+ <span class="pf-c-description-list__text">Namespace</span>
1188
+ </dt>
1189
+ <dd class="pf-c-description-list__description">
1190
+ <div class="pf-c-description-list__text">
1191
+ <a href="#">mary-test</a>
1192
+ </div>
1193
+ </dd>
1194
+ </div>
1195
+ <div class="pf-c-description-list__group">
1196
+ <dt class="pf-c-description-list__term">
1197
+ <span class="pf-c-description-list__text">Labels</span>
1198
+ </dt>
1199
+ <dd class="pf-c-description-list__description">
1200
+ <div class="pf-c-description-list__text">example</div>
1201
+ </dd>
1202
+ </div>
1203
+ <div class="pf-c-description-list__group">
1204
+ <dt class="pf-c-description-list__term">
1205
+ <span class="pf-c-description-list__text">Pod selector</span>
1206
+ </dt>
1207
+ <dd class="pf-c-description-list__description">
1208
+ <div class="pf-c-description-list__text">
1209
+ <button class="pf-c-button pf-m-link pf-m-inline" type="button">
1210
+ <span class="pf-c-button__icon pf-m-start">
1211
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
1212
+ </span>
1213
+ app=MyApp
1214
+ </button>
1215
+ </div>
1216
+ </dd>
1217
+ </div>
1218
+ <div class="pf-c-description-list__group">
1219
+ <dt class="pf-c-description-list__term">
1220
+ <span class="pf-c-description-list__text">Annotation</span>
1221
+ </dt>
1222
+ <dd class="pf-c-description-list__description">
1223
+ <div class="pf-c-description-list__text">2 Annotations</div>
1224
+ </dd>
1225
+ </div>
1226
+ </dl>
1227
+
1228
+ ```
1229
+
1230
+ ## Card variants
1231
+
1232
+ Cards can be used as [description list group wrappers](../card#description-list-group-wrapper-card-variant). Using cards in this way applies the card body padding directly to the card and enables the use of card modifiers within description list groups.
1233
+
1234
+ ### Description list group wrapper as card
1235
+
1236
+ ```html
1237
+ <dl class="pf-c-description-list pf-m-2-col-on-lg">
1238
+ <div class="pf-c-card pf-m-description-list-group">
1239
+ <dt class="pf-c-description-list__term">
1240
+ <span class="pf-c-description-list__text">Name</span>
1241
+ </dt>
1242
+ <dd class="pf-c-description-list__description">
1243
+ <div class="pf-c-description-list__text">example</div>
1244
+ </dd>
1245
+ </div>
1246
+ <div class="pf-c-card pf-m-description-list-group">
1247
+ <dt class="pf-c-description-list__term">
1248
+ <span class="pf-c-description-list__text">Namespace</span>
1249
+ </dt>
1250
+ <dd class="pf-c-description-list__description">
1251
+ <div class="pf-c-description-list__text">
1252
+ <a href="#">mary-test</a>
1253
+ </div>
1254
+ </dd>
1255
+ </div>
1256
+ <div class="pf-c-card pf-m-description-list-group">
1257
+ <dt class="pf-c-description-list__term">
1258
+ <span class="pf-c-description-list__text">Labels</span>
1259
+ </dt>
1260
+ <dd class="pf-c-description-list__description">
1261
+ <div class="pf-c-description-list__text">example</div>
1262
+ </dd>
1263
+ </div>
1264
+ <div class="pf-c-card pf-m-description-list-group">
1265
+ <dt class="pf-c-description-list__term">
1266
+ <span class="pf-c-description-list__text">Pod selector</span>
1267
+ </dt>
1268
+ <dd class="pf-c-description-list__description">
1269
+ <div class="pf-c-description-list__text">
1270
+ <button class="pf-c-button pf-m-link pf-m-inline" type="button">
1271
+ <span class="pf-c-button__icon pf-m-start">
1272
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
1273
+ </span>
1274
+ app=MyApp
1275
+ </button>
1276
+ </div>
1277
+ </dd>
1278
+ </div>
1279
+ <div class="pf-c-card pf-m-description-list-group">
1280
+ <dt class="pf-c-description-list__term">
1281
+ <span class="pf-c-description-list__text">Annotation</span>
1282
+ </dt>
1283
+ <dd class="pf-c-description-list__description">
1284
+ <div class="pf-c-description-list__text">2 Annotations</div>
1285
+ </dd>
1286
+ </div>
1287
+ </dl>
1288
+
1289
+ ```
1290
+
1291
+ ### Display lg and card variant
1292
+
1293
+ ```html
1294
+ <dl class="pf-c-description-list pf-m-display-lg pf-m-2-col-on-lg">
1295
+ <div class="pf-c-card pf-m-description-list-group">
1296
+ <dt class="pf-c-description-list__term">
1297
+ <span class="pf-c-description-list__text">Name</span>
1298
+ </dt>
1299
+ <dd class="pf-c-description-list__description">
1300
+ <div class="pf-c-description-list__text">example</div>
1301
+ </dd>
1302
+ </div>
1303
+ <div class="pf-c-card pf-m-description-list-group">
1304
+ <dt class="pf-c-description-list__term">
1305
+ <span class="pf-c-description-list__text">Namespace</span>
1306
+ </dt>
1307
+ <dd class="pf-c-description-list__description">
1308
+ <div class="pf-c-description-list__text">
1309
+ <a href="#">mary-test</a>
1310
+ </div>
1311
+ </dd>
1312
+ </div>
1313
+ <div class="pf-c-card pf-m-description-list-group">
1314
+ <dt class="pf-c-description-list__term">
1315
+ <span class="pf-c-description-list__text">Labels</span>
1316
+ </dt>
1317
+ <dd class="pf-c-description-list__description">
1318
+ <div class="pf-c-description-list__text">example</div>
1319
+ </dd>
1320
+ </div>
1321
+ <div class="pf-c-card pf-m-description-list-group">
1322
+ <dt class="pf-c-description-list__term">
1323
+ <span class="pf-c-description-list__text">Pod selector</span>
1324
+ </dt>
1325
+ <dd class="pf-c-description-list__description">
1326
+ <div class="pf-c-description-list__text">
1327
+ <button class="pf-c-button pf-m-link pf-m-inline" type="button">
1328
+ <span class="pf-c-button__icon pf-m-start">
1329
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
1330
+ </span>
1331
+ app=MyApp
1332
+ </button>
1333
+ </div>
1334
+ </dd>
1335
+ </div>
1336
+ <div class="pf-c-card pf-m-description-list-group">
1337
+ <dt class="pf-c-description-list__term">
1338
+ <span class="pf-c-description-list__text">Annotation</span>
1339
+ </dt>
1340
+ <dd class="pf-c-description-list__description">
1341
+ <div class="pf-c-description-list__text">2 Annotations</div>
1342
+ </dd>
1343
+ </div>
1344
+ </dl>
1345
+
1346
+ ```
1347
+
1348
+ ### Display 2xl and card variant
1349
+
1350
+ ```html
1351
+ <dl class="pf-c-description-list pf-m-display-2xl pf-m-2-col-on-lg">
1352
+ <div class="pf-c-card pf-m-description-list-group">
1353
+ <dt class="pf-c-description-list__term">
1354
+ <span class="pf-c-description-list__text">Name</span>
1355
+ </dt>
1356
+ <dd class="pf-c-description-list__description">
1357
+ <div class="pf-c-description-list__text">example</div>
1358
+ </dd>
1359
+ </div>
1360
+ <div class="pf-c-card pf-m-description-list-group">
1361
+ <dt class="pf-c-description-list__term">
1362
+ <span class="pf-c-description-list__text">Namespace</span>
1363
+ </dt>
1364
+ <dd class="pf-c-description-list__description">
1365
+ <div class="pf-c-description-list__text">
1366
+ <a href="#">mary-test</a>
1367
+ </div>
1368
+ </dd>
1369
+ </div>
1370
+ <div class="pf-c-card pf-m-description-list-group">
1371
+ <dt class="pf-c-description-list__term">
1372
+ <span class="pf-c-description-list__text">Labels</span>
1373
+ </dt>
1374
+ <dd class="pf-c-description-list__description">
1375
+ <div class="pf-c-description-list__text">example</div>
1376
+ </dd>
1377
+ </div>
1378
+ <div class="pf-c-card pf-m-description-list-group">
1379
+ <dt class="pf-c-description-list__term">
1380
+ <span class="pf-c-description-list__text">Pod selector</span>
1381
+ </dt>
1382
+ <dd class="pf-c-description-list__description">
1383
+ <div class="pf-c-description-list__text">
1384
+ <button class="pf-c-button pf-m-link pf-m-inline" type="button">
1385
+ <span class="pf-c-button__icon pf-m-start">
1386
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
1387
+ </span>
1388
+ app=MyApp
1389
+ </button>
1390
+ </div>
1391
+ </dd>
1392
+ </div>
1393
+ <div class="pf-c-card pf-m-description-list-group">
1394
+ <dt class="pf-c-description-list__term">
1395
+ <span class="pf-c-description-list__text">Annotation</span>
1396
+ </dt>
1397
+ <dd class="pf-c-description-list__description">
1398
+ <div class="pf-c-description-list__text">2 Annotations</div>
1399
+ </dd>
1400
+ </div>
1401
+ </dl>
1402
+
1403
+ ```
1404
+
1405
+ ### Display and card variant, three column on lg breakpoint
1406
+
1407
+ ```html
1408
+ <dl class="pf-c-description-list pf-m-3-col-on-lg pf-m-display-lg">
1409
+ <div class="pf-c-card pf-m-description-list-group">
1410
+ <dt class="pf-c-description-list__term">
1411
+ <span class="pf-c-description-list__text">Name</span>
1412
+ </dt>
1413
+ <dd class="pf-c-description-list__description">
1414
+ <div class="pf-c-description-list__text">example</div>
1415
+ </dd>
1416
+ </div>
1417
+ <div class="pf-c-card pf-m-description-list-group">
1418
+ <dt class="pf-c-description-list__term">
1419
+ <span class="pf-c-description-list__text">Namespace</span>
1420
+ </dt>
1421
+ <dd class="pf-c-description-list__description">
1422
+ <div class="pf-c-description-list__text">
1423
+ <a href="#">mary-test</a>
1424
+ </div>
1425
+ </dd>
1426
+ </div>
1427
+ <div class="pf-c-card pf-m-description-list-group">
1428
+ <dt class="pf-c-description-list__term">
1429
+ <span class="pf-c-description-list__text">Labels</span>
1430
+ </dt>
1431
+ <dd class="pf-c-description-list__description">
1432
+ <div class="pf-c-description-list__text">example</div>
1433
+ </dd>
1434
+ </div>
1435
+ </dl>
1436
+
1437
+ ```
1438
+
1439
+ ### Display and card variant, horizontal, modified term width
1440
+
1441
+ ```html
1442
+ <dl
1443
+ class="pf-c-description-list pf-m-2-col-on-lg pf-m-display-lg pf-m-horizontal"
1444
+ style="--pf-c-description-list__term--width: 10ch;"
1445
+ >
1446
+ <div class="pf-c-card pf-m-description-list-group">
1447
+ <dt class="pf-c-description-list__term">
1448
+ <span class="pf-c-description-list__text">Name</span>
1449
+ </dt>
1450
+ <dd class="pf-c-description-list__description">
1451
+ <div class="pf-c-description-list__text">example</div>
1452
+ </dd>
1453
+ </div>
1454
+ <div class="pf-c-card pf-m-description-list-group">
1455
+ <dt class="pf-c-description-list__term">
1456
+ <span class="pf-c-description-list__text">Namespace</span>
1457
+ </dt>
1458
+ <dd class="pf-c-description-list__description">
1459
+ <div class="pf-c-description-list__text">
1460
+ <a href="#">mary-test</a>
1461
+ </div>
1462
+ </dd>
1463
+ </div>
1464
+ <div class="pf-c-card pf-m-description-list-group">
1465
+ <dt class="pf-c-description-list__term">
1466
+ <span class="pf-c-description-list__text">Labels</span>
1467
+ </dt>
1468
+ <dd class="pf-c-description-list__description">
1469
+ <div class="pf-c-description-list__text">example</div>
1470
+ </dd>
1471
+ </div>
1472
+ </dl>
1473
+
1474
+ ```
1475
+
1173
1476
  <!-- ## Auto term with is only supported in FF currently
1174
1477
 
1175
1478
  ### Horizontal 2 col auto term width
@@ -1273,6 +1576,8 @@ Column fill will modify the default placement of description list groups to fill
1273
1576
  | `.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
1577
  | `.pf-c-description-list__term-icon` | `<span>` | Initiates a description list component term icon element. |
1275
1578
  | `.pf-m-compact` | `.pf-c-description-list` | Modifies the description list for compact horizontal and vertical spacing. |
1579
+ | `.pf-m-display-lg` | `.pf-c-description-list` | Modifies the description list to have large display styling. |
1580
+ | `.pf-m-display-2xl` | `.pf-c-description-list` | Modifies the description list to have 2xl display styling. |
1276
1581
  | `.pf-m-fluid` | `.pf-c-description-list.pf-m-horizontal` | Modifies the description list term width to be fluid. |
1277
1582
  | `.pf-m-help-text` | `.pf-c-description-list__text` | Indicates there is more information available for the description list component term text. |
1278
1583
  | `.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. |
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": "4.199.0",
4
+ "version": "4.200.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {