@patternfly/patternfly 4.199.0 → 4.201.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 (15) hide show
  1. package/components/DescriptionList/description-list.css +36 -2
  2. package/components/DescriptionList/description-list.scss +31 -2
  3. package/components/ProgressStepper/progress-stepper.css +416 -69
  4. package/components/ProgressStepper/progress-stepper.scss +211 -80
  5. package/components/Wizard/wizard.css +2 -1
  6. package/components/Wizard/wizard.scss +3 -1
  7. package/docs/components/DescriptionList/examples/DescriptionList.md +316 -11
  8. package/docs/components/ProgressStepper/examples/ProgressStepper.md +328 -2
  9. package/docs/components/Wizard/examples/Wizard.md +59 -57
  10. package/docs/demos/Wizard/examples/Wizard.md +2581 -275
  11. package/package.json +1 -1
  12. package/patternfly-no-reset.css +454 -72
  13. package/patternfly.css +454 -72
  14. package/patternfly.min.css +1 -1
  15. 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
  }