@patternfly/patternfly 5.4.0-prerelease.6 → 5.4.0-prerelease.7

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 (9) hide show
  1. package/components/Form/form.css +59 -2
  2. package/components/Form/form.scss +15 -3
  3. package/docs/components/Form/examples/Form.md +41 -1
  4. package/package.json +4 -4
  5. package/patternfly-no-globals.css +59 -2
  6. package/patternfly-theme-dark-unversioned.css +59 -2
  7. package/patternfly.css +59 -2
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/Form/form.css CHANGED
@@ -32,8 +32,9 @@
32
32
  --pf-v5-c-form__group-label-help--Color: var(--pf-v5-global--Color--200);
33
33
  --pf-v5-c-form__group-label-help--hover--Color: var(--pf-v5-global--Color--100);
34
34
  --pf-v5-c-form__group-label-help--focus--Color: var(--pf-v5-global--Color--100);
35
- --pf-v5-c-form__group-label-info--MarginLeft: var(--pf-v5-global--spacer--sm);
35
+ --pf-v5-c-form__group-label--m-info--Gap: var(--pf-v5-global--spacer--sm);
36
36
  --pf-v5-c-form__group-label-info--FontSize: var(--pf-v5-global--FontSize--sm);
37
+ --pf-v5-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-v5-global--spacer--sm);
37
38
  --pf-v5-c-form__group-control--m-inline--child--MarginRight: var(--pf-v5-global--spacer--lg);
38
39
  --pf-v5-c-form__group-control__helper-text--MarginBottom: var(--pf-v5-global--spacer--xs);
39
40
  --pf-v5-c-form__group-control--m-stack--Gap: var(--pf-v5-global--spacer--sm);
@@ -119,6 +120,14 @@
119
120
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
120
121
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
121
122
  }
123
+ .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-label.pf-m-info {
124
+ flex-direction: column;
125
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
126
+ align-items: flex-start;
127
+ }
128
+ .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-label-main {
129
+ flex-grow: 0;
130
+ }
122
131
  .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-control {
123
132
  grid-column: 2;
124
133
  }
@@ -139,6 +148,14 @@
139
148
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
140
149
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
141
150
  }
151
+ .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-label.pf-m-info {
152
+ flex-direction: column;
153
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
154
+ align-items: flex-start;
155
+ }
156
+ .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-label-main {
157
+ flex-grow: 0;
158
+ }
142
159
  .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-control {
143
160
  grid-column: 2;
144
161
  }
@@ -159,6 +176,14 @@
159
176
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
160
177
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
161
178
  }
179
+ .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-label.pf-m-info {
180
+ flex-direction: column;
181
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
182
+ align-items: flex-start;
183
+ }
184
+ .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-label-main {
185
+ flex-grow: 0;
186
+ }
162
187
  .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-control {
163
188
  grid-column: 2;
164
189
  }
@@ -179,6 +204,14 @@
179
204
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
180
205
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
181
206
  }
207
+ .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-label.pf-m-info {
208
+ flex-direction: column;
209
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
210
+ align-items: flex-start;
211
+ }
212
+ .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-label-main {
213
+ flex-grow: 0;
214
+ }
182
215
  .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-control {
183
216
  grid-column: 2;
184
217
  }
@@ -199,6 +232,14 @@
199
232
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
200
233
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
201
234
  }
235
+ .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-label.pf-m-info {
236
+ flex-direction: column;
237
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
238
+ align-items: flex-start;
239
+ }
240
+ .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-label-main {
241
+ flex-grow: 0;
242
+ }
202
243
  .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-control {
203
244
  grid-column: 2;
204
245
  }
@@ -219,6 +260,14 @@
219
260
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
220
261
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
221
262
  }
263
+ .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-label.pf-m-info {
264
+ flex-direction: column;
265
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
266
+ align-items: flex-start;
267
+ }
268
+ .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-label-main {
269
+ flex-grow: 0;
270
+ }
222
271
  .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-control {
223
272
  grid-column: 2;
224
273
  }
@@ -239,6 +288,14 @@
239
288
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
240
289
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
241
290
  }
291
+ .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-label.pf-m-info {
292
+ flex-direction: column;
293
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
294
+ align-items: flex-start;
295
+ }
296
+ .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-label-main {
297
+ flex-grow: 0;
298
+ }
242
299
  .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-control {
243
300
  grid-column: 2;
244
301
  }
@@ -275,6 +332,7 @@
275
332
  }
276
333
  .pf-v5-c-form__group-label.pf-m-info {
277
334
  display: flex;
335
+ gap: var(--pf-v5-c-form__group-label--m-info--Gap);
278
336
  align-items: flex-end;
279
337
  }
280
338
 
@@ -283,7 +341,6 @@
283
341
  }
284
342
 
285
343
  .pf-v5-c-form__group-label-info {
286
- margin-inline-start: var(--pf-v5-c-form__group-label-info--MarginLeft);
287
344
  font-size: var(--pf-v5-c-form__group-label-info--FontSize);
288
345
  }
289
346
 
package/components/Form/form.scss CHANGED
@@ -96,8 +96,9 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
96
96
  --#{$form}__group-label-help--focus--Color: var(--#{$pf-global}--Color--100);
97
97
 
98
98
  // Form group label info
99
- --#{$form}__group-label-info--MarginLeft: var(--#{$pf-global}--spacer--sm);
99
+ --#{$form}__group-label--m-info--Gap: var(--#{$pf-global}--spacer--sm);
100
100
  --#{$form}__group-label-info--FontSize: var(--#{$pf-global}--FontSize--sm);
101
+ --#{$form}--m-horizontal__group-label--m-info--Gap: var(--#{$pf-global}--spacer--sm);
101
102
 
102
103
  // Group control
103
104
  --#{$form}__group-control--m-inline--child--MarginRight: var(--#{$pf-global}--spacer--lg);
@@ -201,12 +202,23 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
201
202
  .#{$form}__group-label {
202
203
  padding-block-start: var(--#{$form}--m-horizontal__group-label--md--PaddingTop);
203
204
 
204
- // stylelint-disable-next-line
205
+ // stylelint-disable max-nesting-depth
205
206
  &.pf-m-no-padding-top {
206
207
  --#{$form}--m-horizontal__group-label--md--PaddingTop: var(--#{$form}--m-horizontal__group-label--m-no-padding--md--PaddingTop);
207
208
 
208
209
  transform: translateY(var(--#{$form}--m-horizontal__group-label--m-no-padding--md--TranslateY));
209
210
  }
211
+
212
+ &.pf-m-info {
213
+ flex-direction: column;
214
+ gap: var(--#{$form}--m-horizontal__group-label--m-info--Gap);
215
+ align-items: flex-start;
216
+ }
217
+ // stylelint-enable
218
+ }
219
+
220
+ .#{$form}__group-label-main {
221
+ flex-grow: 0;
210
222
  }
211
223
 
212
224
  .#{$form}__group-control {
@@ -252,6 +264,7 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
252
264
 
253
265
  &.pf-m-info {
254
266
  display: flex;
267
+ gap: var(--#{$form}__group-label--m-info--Gap);
255
268
  align-items: flex-end;
256
269
  }
257
270
  }
@@ -261,7 +274,6 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
261
274
  }
262
275
 
263
276
  .#{$form}__group-label-info {
264
- margin-inline-start: var(--#{$form}__group-label-info--MarginLeft);
265
277
  font-size: var(--#{$form}__group-label-info--FontSize);
266
278
  }
267
279
 
package/docs/components/Form/examples/Form.md CHANGED
@@ -438,7 +438,9 @@ cssPrefix: pf-v5-c-form
438
438
  tabindex="0"
439
439
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
440
440
  </div>
441
- <div class="pf-v5-c-form__group-label-info">info</div>
441
+ <div
442
+ class="pf-v5-c-form__group-label-info"
443
+ >More information about the name field</div>
442
444
  </div>
443
445
  <div class="pf-v5-c-form__group-control">
444
446
  <span class="pf-v5-c-form-control pf-m-required">
@@ -455,6 +457,44 @@ cssPrefix: pf-v5-c-form
455
457
 
456
458
  ```
457
459
 
460
+ ### Label with additional info (horizontal form)
461
+
462
+ ```html
463
+ <form class="pf-v5-c-form pf-m-horizontal" novalidate>
464
+ <div class="pf-v5-c-form__group">
465
+ <div class="pf-v5-c-form__group-label pf-m-info">
466
+ <div class="pf-v5-c-form__group-label-main"><label
467
+ class="pf-v5-c-form__label"
468
+ for="form-additional-info-horizontal-name"
469
+ >
470
+ <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
471
+ class="pf-v5-c-form__group-label-help"
472
+ aria-label="More information for name field"
473
+ aria-describedby="form-additional-info-horizontalform-additional-info-horizontal-name"
474
+ role="button"
475
+ type="button"
476
+ tabindex="0"
477
+ ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
478
+ </div>
479
+ <div
480
+ class="pf-v5-c-form__group-label-info"
481
+ >More information about the name field</div>
482
+ </div>
483
+ <div class="pf-v5-c-form__group-control">
484
+ <span class="pf-v5-c-form-control pf-m-required">
485
+ <input
486
+ required
487
+ type="text"
488
+ id="form-additional-info-horizontal-name"
489
+ name="form-additional-info-horizontal-name"
490
+ />
491
+ </span>
492
+ </div>
493
+ </div>
494
+ </form>
495
+
496
+ ```
497
+
458
498
  ### Action group
459
499
 
460
500
  ```html
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": "5.4.0-prerelease.6",
4
+ "version": "5.4.0-prerelease.7",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -46,11 +46,11 @@
46
46
  "@commitlint/config-conventional": "^18.4.3",
47
47
  "@fortawesome/fontawesome": "^1.1.8",
48
48
  "@octokit/rest": "^20.0.2",
49
- "@patternfly/documentation-framework": "5.16.9",
49
+ "@patternfly/documentation-framework": "5.16.10",
50
50
  "@patternfly/patternfly-a11y": "4.3.1",
51
51
  "@patternfly/react-code-editor": "5.3.3",
52
- "@patternfly/react-core": "5.3.3",
53
- "@patternfly/react-table": "5.3.3",
52
+ "@patternfly/react-core": "5.3.4",
53
+ "@patternfly/react-table": "5.3.4",
54
54
  "@starptech/prettyhtml": "^0.10.0",
55
55
  "backstopjs": "^6.2.2",
56
56
  "cheerio": "^1.0.0-rc.12",
package/patternfly-no-globals.css CHANGED
@@ -14478,8 +14478,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14478
14478
  --pf-v5-c-form__group-label-help--Color: var(--pf-v5-global--Color--200);
14479
14479
  --pf-v5-c-form__group-label-help--hover--Color: var(--pf-v5-global--Color--100);
14480
14480
  --pf-v5-c-form__group-label-help--focus--Color: var(--pf-v5-global--Color--100);
14481
- --pf-v5-c-form__group-label-info--MarginLeft: var(--pf-v5-global--spacer--sm);
14481
+ --pf-v5-c-form__group-label--m-info--Gap: var(--pf-v5-global--spacer--sm);
14482
14482
  --pf-v5-c-form__group-label-info--FontSize: var(--pf-v5-global--FontSize--sm);
14483
+ --pf-v5-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-v5-global--spacer--sm);
14483
14484
  --pf-v5-c-form__group-control--m-inline--child--MarginRight: var(--pf-v5-global--spacer--lg);
14484
14485
  --pf-v5-c-form__group-control__helper-text--MarginBottom: var(--pf-v5-global--spacer--xs);
14485
14486
  --pf-v5-c-form__group-control--m-stack--Gap: var(--pf-v5-global--spacer--sm);
@@ -14565,6 +14566,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14565
14566
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14566
14567
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14567
14568
  }
14569
+ .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-label.pf-m-info {
14570
+ flex-direction: column;
14571
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14572
+ align-items: flex-start;
14573
+ }
14574
+ .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-label-main {
14575
+ flex-grow: 0;
14576
+ }
14568
14577
  .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-control {
14569
14578
  grid-column: 2;
14570
14579
  }
@@ -14585,6 +14594,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14585
14594
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14586
14595
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14587
14596
  }
14597
+ .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-label.pf-m-info {
14598
+ flex-direction: column;
14599
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14600
+ align-items: flex-start;
14601
+ }
14602
+ .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-label-main {
14603
+ flex-grow: 0;
14604
+ }
14588
14605
  .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-control {
14589
14606
  grid-column: 2;
14590
14607
  }
@@ -14605,6 +14622,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14605
14622
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14606
14623
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14607
14624
  }
14625
+ .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-label.pf-m-info {
14626
+ flex-direction: column;
14627
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14628
+ align-items: flex-start;
14629
+ }
14630
+ .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-label-main {
14631
+ flex-grow: 0;
14632
+ }
14608
14633
  .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-control {
14609
14634
  grid-column: 2;
14610
14635
  }
@@ -14625,6 +14650,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14625
14650
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14626
14651
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14627
14652
  }
14653
+ .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-label.pf-m-info {
14654
+ flex-direction: column;
14655
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14656
+ align-items: flex-start;
14657
+ }
14658
+ .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-label-main {
14659
+ flex-grow: 0;
14660
+ }
14628
14661
  .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-control {
14629
14662
  grid-column: 2;
14630
14663
  }
@@ -14645,6 +14678,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14645
14678
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14646
14679
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14647
14680
  }
14681
+ .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-label.pf-m-info {
14682
+ flex-direction: column;
14683
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14684
+ align-items: flex-start;
14685
+ }
14686
+ .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-label-main {
14687
+ flex-grow: 0;
14688
+ }
14648
14689
  .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-control {
14649
14690
  grid-column: 2;
14650
14691
  }
@@ -14665,6 +14706,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14665
14706
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14666
14707
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14667
14708
  }
14709
+ .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-label.pf-m-info {
14710
+ flex-direction: column;
14711
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14712
+ align-items: flex-start;
14713
+ }
14714
+ .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-label-main {
14715
+ flex-grow: 0;
14716
+ }
14668
14717
  .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-control {
14669
14718
  grid-column: 2;
14670
14719
  }
@@ -14685,6 +14734,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14685
14734
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14686
14735
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14687
14736
  }
14737
+ .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-label.pf-m-info {
14738
+ flex-direction: column;
14739
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14740
+ align-items: flex-start;
14741
+ }
14742
+ .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-label-main {
14743
+ flex-grow: 0;
14744
+ }
14688
14745
  .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-control {
14689
14746
  grid-column: 2;
14690
14747
  }
@@ -14721,6 +14778,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14721
14778
  }
14722
14779
  .pf-v5-c-form__group-label.pf-m-info {
14723
14780
  display: flex;
14781
+ gap: var(--pf-v5-c-form__group-label--m-info--Gap);
14724
14782
  align-items: flex-end;
14725
14783
  }
14726
14784
 
@@ -14729,7 +14787,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14729
14787
  }
14730
14788
 
14731
14789
  .pf-v5-c-form__group-label-info {
14732
- margin-inline-start: var(--pf-v5-c-form__group-label-info--MarginLeft);
14733
14790
  font-size: var(--pf-v5-c-form__group-label-info--FontSize);
14734
14791
  }
14735
14792
 
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -14595,8 +14595,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14595
14595
  --pf-v5-c-form__group-label-help--Color: var(--pf-v5-global--Color--200);
14596
14596
  --pf-v5-c-form__group-label-help--hover--Color: var(--pf-v5-global--Color--100);
14597
14597
  --pf-v5-c-form__group-label-help--focus--Color: var(--pf-v5-global--Color--100);
14598
- --pf-v5-c-form__group-label-info--MarginLeft: var(--pf-v5-global--spacer--sm);
14598
+ --pf-v5-c-form__group-label--m-info--Gap: var(--pf-v5-global--spacer--sm);
14599
14599
  --pf-v5-c-form__group-label-info--FontSize: var(--pf-v5-global--FontSize--sm);
14600
+ --pf-v5-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-v5-global--spacer--sm);
14600
14601
  --pf-v5-c-form__group-control--m-inline--child--MarginRight: var(--pf-v5-global--spacer--lg);
14601
14602
  --pf-v5-c-form__group-control__helper-text--MarginBottom: var(--pf-v5-global--spacer--xs);
14602
14603
  --pf-v5-c-form__group-control--m-stack--Gap: var(--pf-v5-global--spacer--sm);
@@ -14682,6 +14683,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14682
14683
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14683
14684
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14684
14685
  }
14686
+ .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-label.pf-m-info {
14687
+ flex-direction: column;
14688
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14689
+ align-items: flex-start;
14690
+ }
14691
+ .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-label-main {
14692
+ flex-grow: 0;
14693
+ }
14685
14694
  .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-control {
14686
14695
  grid-column: 2;
14687
14696
  }
@@ -14702,6 +14711,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14702
14711
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14703
14712
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14704
14713
  }
14714
+ .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-label.pf-m-info {
14715
+ flex-direction: column;
14716
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14717
+ align-items: flex-start;
14718
+ }
14719
+ .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-label-main {
14720
+ flex-grow: 0;
14721
+ }
14705
14722
  .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-control {
14706
14723
  grid-column: 2;
14707
14724
  }
@@ -14722,6 +14739,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14722
14739
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14723
14740
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14724
14741
  }
14742
+ .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-label.pf-m-info {
14743
+ flex-direction: column;
14744
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14745
+ align-items: flex-start;
14746
+ }
14747
+ .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-label-main {
14748
+ flex-grow: 0;
14749
+ }
14725
14750
  .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-control {
14726
14751
  grid-column: 2;
14727
14752
  }
@@ -14742,6 +14767,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14742
14767
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14743
14768
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14744
14769
  }
14770
+ .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-label.pf-m-info {
14771
+ flex-direction: column;
14772
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14773
+ align-items: flex-start;
14774
+ }
14775
+ .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-label-main {
14776
+ flex-grow: 0;
14777
+ }
14745
14778
  .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-control {
14746
14779
  grid-column: 2;
14747
14780
  }
@@ -14762,6 +14795,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14762
14795
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14763
14796
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14764
14797
  }
14798
+ .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-label.pf-m-info {
14799
+ flex-direction: column;
14800
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14801
+ align-items: flex-start;
14802
+ }
14803
+ .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-label-main {
14804
+ flex-grow: 0;
14805
+ }
14765
14806
  .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-control {
14766
14807
  grid-column: 2;
14767
14808
  }
@@ -14782,6 +14823,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14782
14823
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14783
14824
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14784
14825
  }
14826
+ .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-label.pf-m-info {
14827
+ flex-direction: column;
14828
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14829
+ align-items: flex-start;
14830
+ }
14831
+ .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-label-main {
14832
+ flex-grow: 0;
14833
+ }
14785
14834
  .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-control {
14786
14835
  grid-column: 2;
14787
14836
  }
@@ -14802,6 +14851,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14802
14851
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14803
14852
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14804
14853
  }
14854
+ .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-label.pf-m-info {
14855
+ flex-direction: column;
14856
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14857
+ align-items: flex-start;
14858
+ }
14859
+ .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-label-main {
14860
+ flex-grow: 0;
14861
+ }
14805
14862
  .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-control {
14806
14863
  grid-column: 2;
14807
14864
  }
@@ -14838,6 +14895,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14838
14895
  }
14839
14896
  .pf-v5-c-form__group-label.pf-m-info {
14840
14897
  display: flex;
14898
+ gap: var(--pf-v5-c-form__group-label--m-info--Gap);
14841
14899
  align-items: flex-end;
14842
14900
  }
14843
14901
 
@@ -14846,7 +14904,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14846
14904
  }
14847
14905
 
14848
14906
  .pf-v5-c-form__group-label-info {
14849
- margin-inline-start: var(--pf-v5-c-form__group-label-info--MarginLeft);
14850
14907
  font-size: var(--pf-v5-c-form__group-label-info--FontSize);
14851
14908
  }
14852
14909
 
package/patternfly.css CHANGED
@@ -14595,8 +14595,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14595
14595
  --pf-v5-c-form__group-label-help--Color: var(--pf-v5-global--Color--200);
14596
14596
  --pf-v5-c-form__group-label-help--hover--Color: var(--pf-v5-global--Color--100);
14597
14597
  --pf-v5-c-form__group-label-help--focus--Color: var(--pf-v5-global--Color--100);
14598
- --pf-v5-c-form__group-label-info--MarginLeft: var(--pf-v5-global--spacer--sm);
14598
+ --pf-v5-c-form__group-label--m-info--Gap: var(--pf-v5-global--spacer--sm);
14599
14599
  --pf-v5-c-form__group-label-info--FontSize: var(--pf-v5-global--FontSize--sm);
14600
+ --pf-v5-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-v5-global--spacer--sm);
14600
14601
  --pf-v5-c-form__group-control--m-inline--child--MarginRight: var(--pf-v5-global--spacer--lg);
14601
14602
  --pf-v5-c-form__group-control__helper-text--MarginBottom: var(--pf-v5-global--spacer--xs);
14602
14603
  --pf-v5-c-form__group-control--m-stack--Gap: var(--pf-v5-global--spacer--sm);
@@ -14682,6 +14683,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14682
14683
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14683
14684
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14684
14685
  }
14686
+ .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-label.pf-m-info {
14687
+ flex-direction: column;
14688
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14689
+ align-items: flex-start;
14690
+ }
14691
+ .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-label-main {
14692
+ flex-grow: 0;
14693
+ }
14685
14694
  .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-control {
14686
14695
  grid-column: 2;
14687
14696
  }
@@ -14702,6 +14711,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14702
14711
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14703
14712
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14704
14713
  }
14714
+ .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-label.pf-m-info {
14715
+ flex-direction: column;
14716
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14717
+ align-items: flex-start;
14718
+ }
14719
+ .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-label-main {
14720
+ flex-grow: 0;
14721
+ }
14705
14722
  .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-control {
14706
14723
  grid-column: 2;
14707
14724
  }
@@ -14722,6 +14739,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14722
14739
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14723
14740
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14724
14741
  }
14742
+ .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-label.pf-m-info {
14743
+ flex-direction: column;
14744
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14745
+ align-items: flex-start;
14746
+ }
14747
+ .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-label-main {
14748
+ flex-grow: 0;
14749
+ }
14725
14750
  .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-control {
14726
14751
  grid-column: 2;
14727
14752
  }
@@ -14742,6 +14767,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14742
14767
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14743
14768
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14744
14769
  }
14770
+ .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-label.pf-m-info {
14771
+ flex-direction: column;
14772
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14773
+ align-items: flex-start;
14774
+ }
14775
+ .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-label-main {
14776
+ flex-grow: 0;
14777
+ }
14745
14778
  .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-control {
14746
14779
  grid-column: 2;
14747
14780
  }
@@ -14762,6 +14795,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14762
14795
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14763
14796
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14764
14797
  }
14798
+ .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-label.pf-m-info {
14799
+ flex-direction: column;
14800
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14801
+ align-items: flex-start;
14802
+ }
14803
+ .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-label-main {
14804
+ flex-grow: 0;
14805
+ }
14765
14806
  .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-control {
14766
14807
  grid-column: 2;
14767
14808
  }
@@ -14782,6 +14823,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14782
14823
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14783
14824
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14784
14825
  }
14826
+ .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-label.pf-m-info {
14827
+ flex-direction: column;
14828
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14829
+ align-items: flex-start;
14830
+ }
14831
+ .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-label-main {
14832
+ flex-grow: 0;
14833
+ }
14785
14834
  .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-control {
14786
14835
  grid-column: 2;
14787
14836
  }
@@ -14802,6 +14851,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14802
14851
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14803
14852
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14804
14853
  }
14854
+ .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-label.pf-m-info {
14855
+ flex-direction: column;
14856
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14857
+ align-items: flex-start;
14858
+ }
14859
+ .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-label-main {
14860
+ flex-grow: 0;
14861
+ }
14805
14862
  .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-control {
14806
14863
  grid-column: 2;
14807
14864
  }
@@ -14838,6 +14895,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14838
14895
  }
14839
14896
  .pf-v5-c-form__group-label.pf-m-info {
14840
14897
  display: flex;
14898
+ gap: var(--pf-v5-c-form__group-label--m-info--Gap);
14841
14899
  align-items: flex-end;
14842
14900
  }
14843
14901
 
@@ -14846,7 +14904,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14846
14904
  }
14847
14905
 
14848
14906
  .pf-v5-c-form__group-label-info {
14849
- margin-inline-start: var(--pf-v5-c-form__group-label-info--MarginLeft);
14850
14907
  font-size: var(--pf-v5-c-form__group-label-info--FontSize);
14851
14908
  }
14852
14909