@patternfly/patternfly 4.166.5 → 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.
@@ -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;
@@ -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;
@@ -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>
@@ -1202,6 +1177,82 @@ Column fill will modify the default placement of description list groups to fill
1202
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"}}
1203
1178
  ``` -->
1204
1179
 
1180
+ ## With icons
1181
+
1182
+ ### Icons on terms
1183
+
1184
+ ```html
1185
+ <dl class="pf-c-description-list">
1186
+ <div class="pf-c-description-list__group">
1187
+ <dt class="pf-c-description-list__term">
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>
1194
+ </dt>
1195
+ <dd class="pf-c-description-list__description">
1196
+ <div class="pf-c-description-list__text">example</div>
1197
+ </dd>
1198
+ </div>
1199
+ <div class="pf-c-description-list__group">
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>
1204
+ <span class="pf-c-description-list__text">Namespace</span>
1205
+ </dt>
1206
+ <dd class="pf-c-description-list__description">
1207
+ <div class="pf-c-description-list__text">
1208
+ <a href="#">mary-test</a>
1209
+ </div>
1210
+ </dd>
1211
+ </div>
1212
+ <div class="pf-c-description-list__group">
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>
1217
+ <span class="pf-c-description-list__text">Labels</span>
1218
+ </dt>
1219
+ <dd class="pf-c-description-list__description">
1220
+ <div class="pf-c-description-list__text">example</div>
1221
+ </dd>
1222
+ </div>
1223
+ <div class="pf-c-description-list__group">
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>
1228
+ <span class="pf-c-description-list__text">Pod selector</span>
1229
+ </dt>
1230
+ <dd class="pf-c-description-list__description">
1231
+ <div class="pf-c-description-list__text">
1232
+ <button class="pf-c-button pf-m-link pf-m-inline" type="button">
1233
+ <span class="pf-c-button__icon pf-m-start">
1234
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
1235
+ </span>
1236
+ app=MyApp
1237
+ </button>
1238
+ </div>
1239
+ </dd>
1240
+ </div>
1241
+ <div class="pf-c-description-list__group">
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>
1246
+ <span class="pf-c-description-list__text">Annotation</span>
1247
+ </dt>
1248
+ <dd class="pf-c-description-list__description">
1249
+ <div class="pf-c-description-list__text">2 Annotations</div>
1250
+ </dd>
1251
+ </div>
1252
+ </dl>
1253
+
1254
+ ```
1255
+
1205
1256
  ## Documentation
1206
1257
 
1207
1258
  ### Accessibility
@@ -1220,6 +1271,7 @@ Column fill will modify the default placement of description list groups to fill
1220
1271
  | `.pf-c-description-list__term` | `<dt>` | Initiates a description list component term. **Required** |
1221
1272
  | `.pf-c-description-list__description` | `<dd>` | Initiates a description list component description. **Required** |
1222
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. |
1223
1275
  | `.pf-m-compact` | `.pf-c-description-list` | Modifies the description list for compact horizontal and vertical spacing. |
1224
1276
  | `.pf-m-fluid` | `.pf-c-description-list.pf-m-horizontal` | Modifies the description list term width to be fluid. |
1225
1277
  | `.pf-m-help-text` | `.pf-c-description-list__text` | Indicates there is more information available for the description list component term text. |
@@ -388,9 +388,7 @@ wrapperTag: div
388
388
  <div class="pf-c-card__body">
389
389
  <dl class="pf-c-description-list">
390
390
  <div class="pf-c-description-list__group">
391
- <dt class="pf-c-description-list__term">
392
- <span class="pf-c-description-list__text">Cluster API Address</span>
393
- </dt>
391
+ <dt class="pf-c-description-list__term">Cluster API Address</dt>
394
392
  <dd class="pf-c-description-list__description">
395
393
  <div class="pf-c-description-list__text">
396
394
  <a href="#">https://api1.devcluster.openshift.com</a>
@@ -398,9 +396,7 @@ wrapperTag: div
398
396
  </dd>
399
397
  </div>
400
398
  <div class="pf-c-description-list__group">
401
- <dt class="pf-c-description-list__term">
402
- <span class="pf-c-description-list__text">Cluster ID</span>
403
- </dt>
399
+ <dt class="pf-c-description-list__term">Cluster ID</dt>
404
400
  <dd class="pf-c-description-list__description">
405
401
  <div
406
402
  class="pf-c-description-list__text"
@@ -408,25 +404,19 @@ wrapperTag: div
408
404
  </dd>
409
405
  </div>
410
406
  <div class="pf-c-description-list__group">
411
- <dt class="pf-c-description-list__term">
412
- <span class="pf-c-description-list__text">Provider</span>
413
- </dt>
407
+ <dt class="pf-c-description-list__term">Provider</dt>
414
408
  <dd class="pf-c-description-list__description">
415
409
  <div class="pf-c-description-list__text">AWS</div>
416
410
  </dd>
417
411
  </div>
418
412
  <div class="pf-c-description-list__group">
419
- <dt class="pf-c-description-list__term">
420
- <span class="pf-c-description-list__text">OpenShift Version</span>
421
- </dt>
413
+ <dt class="pf-c-description-list__term">OpenShift Version</dt>
422
414
  <dd class="pf-c-description-list__description">
423
415
  <div class="pf-c-description-list__text">4.5.0.ci-2020-06-16-015028</div>
424
416
  </dd>
425
417
  </div>
426
418
  <div class="pf-c-description-list__group">
427
- <dt class="pf-c-description-list__term">
428
- <span class="pf-c-description-list__text">Update Channel</span>
429
- </dt>
419
+ <dt class="pf-c-description-list__term">Update Channel</dt>
430
420
  <dd class="pf-c-description-list__description">
431
421
  <div class="pf-c-description-list__text">stable-4.5</div>
432
422
  </dd>
@@ -445,9 +435,7 @@ wrapperTag: div
445
435
  <div class="pf-c-card__body">
446
436
  <dl class="pf-c-description-list">
447
437
  <div class="pf-c-description-list__group">
448
- <dt class="pf-c-description-list__term">
449
- <span class="pf-c-description-list__text">Cluster API Address</span>
450
- </dt>
438
+ <dt class="pf-c-description-list__term">Cluster API Address</dt>
451
439
  <dd class="pf-c-description-list__description">
452
440
  <div class="pf-c-description-list__text">
453
441
  <a href="#">https://api2.devcluster.openshift.com</a>
@@ -455,9 +443,7 @@ wrapperTag: div
455
443
  </dd>
456
444
  </div>
457
445
  <div class="pf-c-description-list__group">
458
- <dt class="pf-c-description-list__term">
459
- <span class="pf-c-description-list__text">Cluster ID</span>
460
- </dt>
446
+ <dt class="pf-c-description-list__term">Cluster ID</dt>
461
447
  <dd class="pf-c-description-list__description">
462
448
  <div
463
449
  class="pf-c-description-list__text"
@@ -465,25 +451,19 @@ wrapperTag: div
465
451
  </dd>
466
452
  </div>
467
453
  <div class="pf-c-description-list__group">
468
- <dt class="pf-c-description-list__term">
469
- <span class="pf-c-description-list__text">Provider</span>
470
- </dt>
454
+ <dt class="pf-c-description-list__term">Provider</dt>
471
455
  <dd class="pf-c-description-list__description">
472
456
  <div class="pf-c-description-list__text">Azure</div>
473
457
  </dd>
474
458
  </div>
475
459
  <div class="pf-c-description-list__group">
476
- <dt class="pf-c-description-list__term">
477
- <span class="pf-c-description-list__text">OpenShift Version</span>
478
- </dt>
460
+ <dt class="pf-c-description-list__term">OpenShift Version</dt>
479
461
  <dd class="pf-c-description-list__description">
480
462
  <div class="pf-c-description-list__text">4.5.0.ci-2020-06-16-015026</div>
481
463
  </dd>
482
464
  </div>
483
465
  <div class="pf-c-description-list__group">
484
- <dt class="pf-c-description-list__term">
485
- <span class="pf-c-description-list__text">Update Channel</span>
486
- </dt>
466
+ <dt class="pf-c-description-list__term">Update Channel</dt>
487
467
  <dd class="pf-c-description-list__description">
488
468
  <div class="pf-c-description-list__text">stable-4.4</div>
489
469
  </dd>
@@ -772,24 +752,22 @@ wrapperTag: div
772
752
  <div class="pf-c-description-list__group">
773
753
  <dt class="pf-c-description-list__term">
774
754
  <span class="pf-c-description-list__text">
775
- <span class="pf-c-description-list__text">
776
- <div class="pf-l-grid">
777
- <div class="pf-l-grid__item pf-m-3-col">
778
- <span
779
- class="pf-c-spinner pf-m-md"
780
- role="progressbar"
781
- aria-label="Loading"
782
- >
783
- <span class="pf-c-spinner__clipper"></span>
784
- <span class="pf-c-spinner__lead-ball"></span>
785
- <span class="pf-c-spinner__tail-ball"></span>
786
- </span>
787
- </div>
788
- <div class="pf-l-grid__item pf-m-9-col">
789
- <h3 class="pf-c-title pf-m-md">Running</h3>
790
- </div>
755
+ <div class="pf-l-grid">
756
+ <div class="pf-l-grid__item pf-m-3-col">
757
+ <span
758
+ class="pf-c-spinner pf-m-md"
759
+ role="progressbar"
760
+ aria-label="Loading"
761
+ >
762
+ <span class="pf-c-spinner__clipper"></span>
763
+ <span class="pf-c-spinner__lead-ball"></span>
764
+ <span class="pf-c-spinner__tail-ball"></span>
765
+ </span>
791
766
  </div>
792
- </span>
767
+ <div class="pf-l-grid__item pf-m-9-col">
768
+ <h3 class="pf-c-title pf-m-md">Running</h3>
769
+ </div>
770
+ </div>
793
771
  </span>
794
772
  </dt>
795
773
  <dd class="pf-c-description-list__description">
@@ -804,16 +782,14 @@ wrapperTag: div
804
782
  <div class="pf-c-description-list__group">
805
783
  <dt class="pf-c-description-list__term">
806
784
  <span class="pf-c-description-list__text">
807
- <span class="pf-c-description-list__text">
808
- <div class="pf-l-flex">
809
- <div class="pf-l-flex__item">
810
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
811
- </div>
812
- <div class="pf-l-flex__item">
813
- <h3 class="pf-c-title pf-m-md">Ready</h3>
814
- </div>
785
+ <div class="pf-l-flex">
786
+ <div class="pf-l-flex__item">
787
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
815
788
  </div>
816
- </span>
789
+ <div class="pf-l-flex__item">
790
+ <h3 class="pf-c-title pf-m-md">Ready</h3>
791
+ </div>
792
+ </div>
817
793
  </span>
818
794
  </dt>
819
795
  <dd class="pf-c-description-list__description">
@@ -828,24 +804,22 @@ wrapperTag: div
828
804
  <div class="pf-c-description-list__group">
829
805
  <dt class="pf-c-description-list__term">
830
806
  <span class="pf-c-description-list__text">
831
- <span class="pf-c-description-list__text">
832
- <div class="pf-l-grid">
833
- <div class="pf-l-grid__item pf-m-3-col">
834
- <span
835
- class="pf-c-spinner pf-m-md"
836
- role="progressbar"
837
- aria-label="Loading"
838
- >
839
- <span class="pf-c-spinner__clipper"></span>
840
- <span class="pf-c-spinner__lead-ball"></span>
841
- <span class="pf-c-spinner__tail-ball"></span>
842
- </span>
843
- </div>
844
- <div class="pf-l-grid__item pf-m-9-col">
845
- <h3 class="pf-c-title pf-m-md">Running</h3>
846
- </div>
807
+ <div class="pf-l-grid">
808
+ <div class="pf-l-grid__item pf-m-3-col">
809
+ <span
810
+ class="pf-c-spinner pf-m-md"
811
+ role="progressbar"
812
+ aria-label="Loading"
813
+ >
814
+ <span class="pf-c-spinner__clipper"></span>
815
+ <span class="pf-c-spinner__lead-ball"></span>
816
+ <span class="pf-c-spinner__tail-ball"></span>
817
+ </span>
847
818
  </div>
848
- </span>
819
+ <div class="pf-l-grid__item pf-m-9-col">
820
+ <h3 class="pf-c-title pf-m-md">Running</h3>
821
+ </div>
822
+ </div>
849
823
  </span>
850
824
  </dt>
851
825
  <dd class="pf-c-description-list__description">
@@ -860,16 +834,14 @@ wrapperTag: div
860
834
  <div class="pf-c-description-list__group">
861
835
  <dt class="pf-c-description-list__term">
862
836
  <span class="pf-c-description-list__text">
863
- <span class="pf-c-description-list__text">
864
- <div class="pf-l-flex">
865
- <div class="pf-l-flex__item">
866
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
867
- </div>
868
- <div class="pf-l-flex__item">
869
- <h3 class="pf-c-title pf-m-md">Ready</h3>
870
- </div>
837
+ <div class="pf-l-flex">
838
+ <div class="pf-l-flex__item">
839
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
871
840
  </div>
872
- </span>
841
+ <div class="pf-l-flex__item">
842
+ <h3 class="pf-c-title pf-m-md">Ready</h3>
843
+ </div>
844
+ </div>
873
845
  </span>
874
846
  </dt>
875
847
  <dd class="pf-c-description-list__description">
@@ -2794,9 +2766,7 @@ wrapperTag: div
2794
2766
  <div class="pf-c-card__body">
2795
2767
  <dl class="pf-c-description-list">
2796
2768
  <div class="pf-c-description-list__group">
2797
- <dt class="pf-c-description-list__term">
2798
- <span class="pf-c-description-list__text">Readiness probe failed</span>
2799
- </dt>
2769
+ <dt class="pf-c-description-list__term">Readiness probe failed</dt>
2800
2770
  <dd class="pf-c-description-list__description">
2801
2771
  <div
2802
2772
  class="pf-c-description-list__text"
@@ -2809,9 +2779,7 @@ wrapperTag: div
2809
2779
  </dd>
2810
2780
  </div>
2811
2781
  <div class="pf-c-description-list__group">
2812
- <dt class="pf-c-description-list__term">
2813
- <span class="pf-c-description-list__text">Successful assignment</span>
2814
- </dt>
2782
+ <dt class="pf-c-description-list__term">Successful assignment</dt>
2815
2783
  <dd class="pf-c-description-list__description">
2816
2784
  <div
2817
2785
  class="pf-c-description-list__text"
@@ -2824,9 +2792,7 @@ wrapperTag: div
2824
2792
  </dd>
2825
2793
  </div>
2826
2794
  <div class="pf-c-description-list__group">
2827
- <dt class="pf-c-description-list__term">
2828
- <span class="pf-c-description-list__text">Pulling image</span>
2829
- </dt>
2795
+ <dt class="pf-c-description-list__term">Pulling image</dt>
2830
2796
  <dd class="pf-c-description-list__description">
2831
2797
  <div
2832
2798
  class="pf-c-description-list__text"
@@ -2839,9 +2805,7 @@ wrapperTag: div
2839
2805
  </dd>
2840
2806
  </div>
2841
2807
  <div class="pf-c-description-list__group">
2842
- <dt class="pf-c-description-list__term">
2843
- <span class="pf-c-description-list__text">Created container</span>
2844
- </dt>
2808
+ <dt class="pf-c-description-list__term">Created container</dt>
2845
2809
  <dd class="pf-c-description-list__description">
2846
2810
  <div
2847
2811
  class="pf-c-description-list__text"
@@ -2940,17 +2904,15 @@ wrapperTag: div
2940
2904
  <dl class="pf-c-description-list">
2941
2905
  <div class="pf-c-description-list__group">
2942
2906
  <dt class="pf-c-description-list__term">
2943
- <span class="pf-c-description-list__text">
2944
- <div class="pf-l-flex pf-m-nowrap">
2945
- <div class="pf-l-flex__item">
2946
- <i
2947
- class="fas fa-exclamation-circle pf-u-danger-color-100"
2948
- aria-hidden="true"
2949
- ></i>
2950
- </div>
2951
- <div class="pf-l-flex__item">Readiness probe failed</div>
2907
+ <div class="pf-l-flex pf-m-nowrap">
2908
+ <div class="pf-l-flex__item">
2909
+ <i
2910
+ class="fas fa-exclamation-circle pf-u-danger-color-100"
2911
+ aria-hidden="true"
2912
+ ></i>
2952
2913
  </div>
2953
- </span>
2914
+ <div class="pf-l-flex__item">Readiness probe failed</div>
2915
+ </div>
2954
2916
  </dt>
2955
2917
  <dd class="pf-c-description-list__description">
2956
2918
  <div
@@ -2965,17 +2927,15 @@ wrapperTag: div
2965
2927
  </div>
2966
2928
  <div class="pf-c-description-list__group">
2967
2929
  <dt class="pf-c-description-list__term">
2968
- <span class="pf-c-description-list__text">
2969
- <div class="pf-l-flex pf-m-nowrap">
2970
- <div class="pf-l-flex__item">
2971
- <i
2972
- class="fas fa-check-circle pf-u-success-color-100"
2973
- aria-hidden="true"
2974
- ></i>
2975
- </div>
2976
- <div class="pf-l-flex__item">Successful assignment</div>
2930
+ <div class="pf-l-flex pf-m-nowrap">
2931
+ <div class="pf-l-flex__item">
2932
+ <i
2933
+ class="fas fa-check-circle pf-u-success-color-100"
2934
+ aria-hidden="true"
2935
+ ></i>
2977
2936
  </div>
2978
- </span>
2937
+ <div class="pf-l-flex__item">Successful assignment</div>
2938
+ </div>
2979
2939
  </dt>
2980
2940
  <dd class="pf-c-description-list__description">
2981
2941
  <div
@@ -2990,22 +2950,20 @@ wrapperTag: div
2990
2950
  </div>
2991
2951
  <div class="pf-c-description-list__group">
2992
2952
  <dt class="pf-c-description-list__term">
2993
- <span class="pf-c-description-list__text">
2994
- <div class="pf-l-flex pf-m-nowrap">
2995
- <div class="pf-l-flex__item">
2996
- <span
2997
- class="pf-c-spinner pf-m-md"
2998
- role="progressbar"
2999
- aria-label="Loading"
3000
- >
3001
- <span class="pf-c-spinner__clipper"></span>
3002
- <span class="pf-c-spinner__lead-ball"></span>
3003
- <span class="pf-c-spinner__tail-ball"></span>
3004
- </span>
3005
- </div>
3006
- <div class="pf-l-flex__item">Pulling image</div>
2953
+ <div class="pf-l-flex pf-m-nowrap">
2954
+ <div class="pf-l-flex__item">
2955
+ <span
2956
+ class="pf-c-spinner pf-m-md"
2957
+ role="progressbar"
2958
+ aria-label="Loading"
2959
+ >
2960
+ <span class="pf-c-spinner__clipper"></span>
2961
+ <span class="pf-c-spinner__lead-ball"></span>
2962
+ <span class="pf-c-spinner__tail-ball"></span>
2963
+ </span>
3007
2964
  </div>
3008
- </span>
2965
+ <div class="pf-l-flex__item">Pulling image</div>
2966
+ </div>
3009
2967
  </dt>
3010
2968
  <dd class="pf-c-description-list__description">
3011
2969
  <div
@@ -3020,17 +2978,15 @@ wrapperTag: div
3020
2978
  </div>
3021
2979
  <div class="pf-c-description-list__group">
3022
2980
  <dt class="pf-c-description-list__term">
3023
- <span class="pf-c-description-list__text">
3024
- <div class="pf-l-flex pf-m-nowrap">
3025
- <div class="pf-l-flex__item">
3026
- <i
3027
- class="fas fa-check-circle pf-u-success-color-100"
3028
- aria-hidden="true"
3029
- ></i>
3030
- </div>
3031
- <div class="pf-l-flex__item">Created container</div>
2981
+ <div class="pf-l-flex pf-m-nowrap">
2982
+ <div class="pf-l-flex__item">
2983
+ <i
2984
+ class="fas fa-check-circle pf-u-success-color-100"
2985
+ aria-hidden="true"
2986
+ ></i>
3032
2987
  </div>
3033
- </span>
2988
+ <div class="pf-l-flex__item">Created container</div>
2989
+ </div>
3034
2990
  </dt>
3035
2991
  <dd class="pf-c-description-list__description">
3036
2992
  <div