@patternfly/patternfly 6.0.0-alpha.185 → 6.0.0-alpha.186

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 +58 -1
  2. package/components/Form/form.scss +14 -2
  3. package/components/_index.css +58 -1
  4. package/docs/components/Form/examples/Form.md +42 -1
  5. package/package.json +1 -1
  6. package/patternfly-no-globals.css +58 -1
  7. package/patternfly.css +58 -1
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/Form/form.css CHANGED
@@ -20,8 +20,9 @@
20
20
  --pf-v6-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
21
21
  --pf-v6-c-form__label-required--Color: var(--pf-t--global--color--status--danger--default);
22
22
  --pf-v6-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
23
- --pf-v6-c-form__group-label-info--MarginInlineStart: var(--pf-t--global--spacer--sm);
23
+ --pf-v6-c-form__group-label--m-info--Gap: var(--pf-t--global--spacer--sm);
24
24
  --pf-v6-c-form__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
25
+ --pf-v6-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--sm);
25
26
  --pf-v6-c-form__group-control--m-inline--child--MarginInlineEnd: var(--pf-t--global--spacer--lg);
26
27
  --pf-v6-c-form__group-control__helper-text--MarginBlockEnd: var(--pf-t--global--spacer--xs);
27
28
  --pf-v6-c-form__group-control--Gap: var(--pf-t--global--spacer--sm);
@@ -102,6 +103,14 @@
102
103
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
103
104
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
104
105
  }
106
+ .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label.pf-m-info {
107
+ flex-direction: column;
108
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
109
+ align-items: flex-start;
110
+ }
111
+ .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label-main {
112
+ flex-grow: 0;
113
+ }
105
114
  .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-control {
106
115
  grid-column: 2;
107
116
  }
@@ -122,6 +131,14 @@
122
131
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
123
132
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
124
133
  }
134
+ .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label.pf-m-info {
135
+ flex-direction: column;
136
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
137
+ align-items: flex-start;
138
+ }
139
+ .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label-main {
140
+ flex-grow: 0;
141
+ }
125
142
  .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-control {
126
143
  grid-column: 2;
127
144
  }
@@ -142,6 +159,14 @@
142
159
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
143
160
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
144
161
  }
162
+ .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label.pf-m-info {
163
+ flex-direction: column;
164
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
165
+ align-items: flex-start;
166
+ }
167
+ .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label-main {
168
+ flex-grow: 0;
169
+ }
145
170
  .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-control {
146
171
  grid-column: 2;
147
172
  }
@@ -162,6 +187,14 @@
162
187
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
163
188
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
164
189
  }
190
+ .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label.pf-m-info {
191
+ flex-direction: column;
192
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
193
+ align-items: flex-start;
194
+ }
195
+ .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label-main {
196
+ flex-grow: 0;
197
+ }
165
198
  .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-control {
166
199
  grid-column: 2;
167
200
  }
@@ -182,6 +215,14 @@
182
215
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
183
216
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
184
217
  }
218
+ .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label.pf-m-info {
219
+ flex-direction: column;
220
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
221
+ align-items: flex-start;
222
+ }
223
+ .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label-main {
224
+ flex-grow: 0;
225
+ }
185
226
  .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-control {
186
227
  grid-column: 2;
187
228
  }
@@ -202,6 +243,14 @@
202
243
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
203
244
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
204
245
  }
246
+ .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label.pf-m-info {
247
+ flex-direction: column;
248
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
249
+ align-items: flex-start;
250
+ }
251
+ .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label-main {
252
+ flex-grow: 0;
253
+ }
205
254
  .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-control {
206
255
  grid-column: 2;
207
256
  }
@@ -222,6 +271,14 @@
222
271
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
223
272
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
224
273
  }
274
+ .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label.pf-m-info {
275
+ flex-direction: column;
276
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
277
+ align-items: flex-start;
278
+ }
279
+ .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label-main {
280
+ flex-grow: 0;
281
+ }
225
282
  .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-control {
226
283
  grid-column: 2;
227
284
  }
package/components/Form/form.scss CHANGED
@@ -85,8 +85,9 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
85
85
  --#{$form}__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
86
86
 
87
87
  // Form group label info
88
- --#{$form}__group-label-info--MarginInlineStart: var(--pf-t--global--spacer--sm);
88
+ --#{$form}__group-label--m-info--Gap: var(--pf-t--global--spacer--sm);
89
89
  --#{$form}__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
90
+ --#{$form}--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--sm);
90
91
 
91
92
  // Group control
92
93
  --#{$form}__group-control--m-inline--child--MarginInlineEnd: var(--pf-t--global--spacer--lg);
@@ -179,12 +180,23 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
179
180
  .#{$form}__group-label {
180
181
  padding-block-start: var(--#{$form}--m-horizontal__group-label--md--PaddingBlockStart);
181
182
 
182
- // stylelint-disable-next-line
183
+ // stylelint-disable max-nesting-depth
183
184
  &.pf-m-no-padding-top {
184
185
  --#{$form}--m-horizontal__group-label--md--PaddingBlockStart: var(--#{$form}--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
185
186
 
186
187
  transform: translateY(var(--#{$form}--m-horizontal__group-label--m-no-padding--md--TranslateY));
187
188
  }
189
+
190
+ &.pf-m-info {
191
+ flex-direction: column;
192
+ gap: var(--#{$form}--m-horizontal__group-label--m-info--Gap);
193
+ align-items: flex-start;
194
+ }
195
+ // stylelint-enable
196
+ }
197
+
198
+ .#{$form}__group-label-main {
199
+ flex-grow: 0;
188
200
  }
189
201
 
190
202
  .#{$form}__group-control {
package/components/_index.css CHANGED
@@ -6305,8 +6305,9 @@ ul) {
6305
6305
  --pf-v6-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
6306
6306
  --pf-v6-c-form__label-required--Color: var(--pf-t--global--color--status--danger--default);
6307
6307
  --pf-v6-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
6308
- --pf-v6-c-form__group-label-info--MarginInlineStart: var(--pf-t--global--spacer--sm);
6308
+ --pf-v6-c-form__group-label--m-info--Gap: var(--pf-t--global--spacer--sm);
6309
6309
  --pf-v6-c-form__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
6310
+ --pf-v6-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--sm);
6310
6311
  --pf-v6-c-form__group-control--m-inline--child--MarginInlineEnd: var(--pf-t--global--spacer--lg);
6311
6312
  --pf-v6-c-form__group-control__helper-text--MarginBlockEnd: var(--pf-t--global--spacer--xs);
6312
6313
  --pf-v6-c-form__group-control--Gap: var(--pf-t--global--spacer--sm);
@@ -6387,6 +6388,14 @@ ul) {
6387
6388
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
6388
6389
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
6389
6390
  }
6391
+ .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label.pf-m-info {
6392
+ flex-direction: column;
6393
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
6394
+ align-items: flex-start;
6395
+ }
6396
+ .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label-main {
6397
+ flex-grow: 0;
6398
+ }
6390
6399
  .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-control {
6391
6400
  grid-column: 2;
6392
6401
  }
@@ -6407,6 +6416,14 @@ ul) {
6407
6416
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
6408
6417
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
6409
6418
  }
6419
+ .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label.pf-m-info {
6420
+ flex-direction: column;
6421
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
6422
+ align-items: flex-start;
6423
+ }
6424
+ .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label-main {
6425
+ flex-grow: 0;
6426
+ }
6410
6427
  .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-control {
6411
6428
  grid-column: 2;
6412
6429
  }
@@ -6427,6 +6444,14 @@ ul) {
6427
6444
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
6428
6445
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
6429
6446
  }
6447
+ .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label.pf-m-info {
6448
+ flex-direction: column;
6449
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
6450
+ align-items: flex-start;
6451
+ }
6452
+ .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label-main {
6453
+ flex-grow: 0;
6454
+ }
6430
6455
  .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-control {
6431
6456
  grid-column: 2;
6432
6457
  }
@@ -6447,6 +6472,14 @@ ul) {
6447
6472
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
6448
6473
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
6449
6474
  }
6475
+ .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label.pf-m-info {
6476
+ flex-direction: column;
6477
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
6478
+ align-items: flex-start;
6479
+ }
6480
+ .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label-main {
6481
+ flex-grow: 0;
6482
+ }
6450
6483
  .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-control {
6451
6484
  grid-column: 2;
6452
6485
  }
@@ -6467,6 +6500,14 @@ ul) {
6467
6500
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
6468
6501
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
6469
6502
  }
6503
+ .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label.pf-m-info {
6504
+ flex-direction: column;
6505
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
6506
+ align-items: flex-start;
6507
+ }
6508
+ .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label-main {
6509
+ flex-grow: 0;
6510
+ }
6470
6511
  .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-control {
6471
6512
  grid-column: 2;
6472
6513
  }
@@ -6487,6 +6528,14 @@ ul) {
6487
6528
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
6488
6529
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
6489
6530
  }
6531
+ .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label.pf-m-info {
6532
+ flex-direction: column;
6533
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
6534
+ align-items: flex-start;
6535
+ }
6536
+ .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label-main {
6537
+ flex-grow: 0;
6538
+ }
6490
6539
  .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-control {
6491
6540
  grid-column: 2;
6492
6541
  }
@@ -6507,6 +6556,14 @@ ul) {
6507
6556
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
6508
6557
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
6509
6558
  }
6559
+ .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label.pf-m-info {
6560
+ flex-direction: column;
6561
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
6562
+ align-items: flex-start;
6563
+ }
6564
+ .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label-main {
6565
+ flex-grow: 0;
6566
+ }
6510
6567
  .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-control {
6511
6568
  grid-column: 2;
6512
6569
  }
package/docs/components/Form/examples/Form.md CHANGED
@@ -475,7 +475,7 @@ cssPrefix: pf-v6-c-form
475
475
  </span>
476
476
  </span></span>
477
477
  </div>
478
- <div class="pf-v6-c-form__group-label-info">info</div>
478
+ <div class="pf-v6-c-form__group-label-info">More info about the name field</div>
479
479
  </div>
480
480
  <div class="pf-v6-c-form__group-control">
481
481
  <span class="pf-v6-c-form-control pf-m-required">
@@ -492,6 +492,47 @@ cssPrefix: pf-v6-c-form
492
492
 
493
493
  ```
494
494
 
495
+ ### Label with additional info (horizontal form)
496
+
497
+ ```html
498
+ <form class="pf-v6-c-form pf-m-horizontal" novalidate>
499
+ <div class="pf-v6-c-form__group">
500
+ <div class="pf-v6-c-form__group-label pf-m-info">
501
+ <div class="pf-v6-c-form__group-label-main"><label
502
+ class="pf-v6-c-form__label"
503
+ for="form-additional-info-horizontal-name"
504
+ >
505
+ <span class="pf-v6-c-form__label-text">Name</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
506
+ <span
507
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
508
+ type="button"
509
+ role="button"
510
+ tabindex="0"
511
+ aria-label="More information for name field"
512
+ aria-describedby="form-additional-info-horizontalform-additional-info-horizontal-name"
513
+ >
514
+ <span class="pf-v6-c-button__icon">
515
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
516
+ </span>
517
+ </span></span>
518
+ </div>
519
+ <div class="pf-v6-c-form__group-label-info">More info about the name field</div>
520
+ </div>
521
+ <div class="pf-v6-c-form__group-control">
522
+ <span class="pf-v6-c-form-control pf-m-required">
523
+ <input
524
+ required
525
+ type="text"
526
+ id="form-additional-info-horizontal-name"
527
+ name="form-additional-info-horizontal-name"
528
+ />
529
+ </span>
530
+ </div>
531
+ </div>
532
+ </form>
533
+
534
+ ```
535
+
495
536
  ### Action group
496
537
 
497
538
  ```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": "6.0.0-alpha.185",
4
+ "version": "6.0.0-alpha.186",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -12372,8 +12372,9 @@ ul) {
12372
12372
  --pf-v6-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
12373
12373
  --pf-v6-c-form__label-required--Color: var(--pf-t--global--color--status--danger--default);
12374
12374
  --pf-v6-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
12375
- --pf-v6-c-form__group-label-info--MarginInlineStart: var(--pf-t--global--spacer--sm);
12375
+ --pf-v6-c-form__group-label--m-info--Gap: var(--pf-t--global--spacer--sm);
12376
12376
  --pf-v6-c-form__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
12377
+ --pf-v6-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--sm);
12377
12378
  --pf-v6-c-form__group-control--m-inline--child--MarginInlineEnd: var(--pf-t--global--spacer--lg);
12378
12379
  --pf-v6-c-form__group-control__helper-text--MarginBlockEnd: var(--pf-t--global--spacer--xs);
12379
12380
  --pf-v6-c-form__group-control--Gap: var(--pf-t--global--spacer--sm);
@@ -12454,6 +12455,14 @@ ul) {
12454
12455
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
12455
12456
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
12456
12457
  }
12458
+ .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label.pf-m-info {
12459
+ flex-direction: column;
12460
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
12461
+ align-items: flex-start;
12462
+ }
12463
+ .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label-main {
12464
+ flex-grow: 0;
12465
+ }
12457
12466
  .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-control {
12458
12467
  grid-column: 2;
12459
12468
  }
@@ -12474,6 +12483,14 @@ ul) {
12474
12483
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
12475
12484
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
12476
12485
  }
12486
+ .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label.pf-m-info {
12487
+ flex-direction: column;
12488
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
12489
+ align-items: flex-start;
12490
+ }
12491
+ .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label-main {
12492
+ flex-grow: 0;
12493
+ }
12477
12494
  .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-control {
12478
12495
  grid-column: 2;
12479
12496
  }
@@ -12494,6 +12511,14 @@ ul) {
12494
12511
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
12495
12512
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
12496
12513
  }
12514
+ .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label.pf-m-info {
12515
+ flex-direction: column;
12516
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
12517
+ align-items: flex-start;
12518
+ }
12519
+ .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label-main {
12520
+ flex-grow: 0;
12521
+ }
12497
12522
  .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-control {
12498
12523
  grid-column: 2;
12499
12524
  }
@@ -12514,6 +12539,14 @@ ul) {
12514
12539
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
12515
12540
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
12516
12541
  }
12542
+ .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label.pf-m-info {
12543
+ flex-direction: column;
12544
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
12545
+ align-items: flex-start;
12546
+ }
12547
+ .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label-main {
12548
+ flex-grow: 0;
12549
+ }
12517
12550
  .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-control {
12518
12551
  grid-column: 2;
12519
12552
  }
@@ -12534,6 +12567,14 @@ ul) {
12534
12567
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
12535
12568
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
12536
12569
  }
12570
+ .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label.pf-m-info {
12571
+ flex-direction: column;
12572
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
12573
+ align-items: flex-start;
12574
+ }
12575
+ .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label-main {
12576
+ flex-grow: 0;
12577
+ }
12537
12578
  .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-control {
12538
12579
  grid-column: 2;
12539
12580
  }
@@ -12554,6 +12595,14 @@ ul) {
12554
12595
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
12555
12596
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
12556
12597
  }
12598
+ .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label.pf-m-info {
12599
+ flex-direction: column;
12600
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
12601
+ align-items: flex-start;
12602
+ }
12603
+ .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label-main {
12604
+ flex-grow: 0;
12605
+ }
12557
12606
  .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-control {
12558
12607
  grid-column: 2;
12559
12608
  }
@@ -12574,6 +12623,14 @@ ul) {
12574
12623
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
12575
12624
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
12576
12625
  }
12626
+ .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label.pf-m-info {
12627
+ flex-direction: column;
12628
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
12629
+ align-items: flex-start;
12630
+ }
12631
+ .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label-main {
12632
+ flex-grow: 0;
12633
+ }
12577
12634
  .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-control {
12578
12635
  grid-column: 2;
12579
12636
  }
package/patternfly.css CHANGED
@@ -12493,8 +12493,9 @@ ul) {
12493
12493
  --pf-v6-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
12494
12494
  --pf-v6-c-form__label-required--Color: var(--pf-t--global--color--status--danger--default);
12495
12495
  --pf-v6-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
12496
- --pf-v6-c-form__group-label-info--MarginInlineStart: var(--pf-t--global--spacer--sm);
12496
+ --pf-v6-c-form__group-label--m-info--Gap: var(--pf-t--global--spacer--sm);
12497
12497
  --pf-v6-c-form__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
12498
+ --pf-v6-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--sm);
12498
12499
  --pf-v6-c-form__group-control--m-inline--child--MarginInlineEnd: var(--pf-t--global--spacer--lg);
12499
12500
  --pf-v6-c-form__group-control__helper-text--MarginBlockEnd: var(--pf-t--global--spacer--xs);
12500
12501
  --pf-v6-c-form__group-control--Gap: var(--pf-t--global--spacer--sm);
@@ -12575,6 +12576,14 @@ ul) {
12575
12576
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
12576
12577
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
12577
12578
  }
12579
+ .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label.pf-m-info {
12580
+ flex-direction: column;
12581
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
12582
+ align-items: flex-start;
12583
+ }
12584
+ .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label-main {
12585
+ flex-grow: 0;
12586
+ }
12578
12587
  .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-control {
12579
12588
  grid-column: 2;
12580
12589
  }
@@ -12595,6 +12604,14 @@ ul) {
12595
12604
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
12596
12605
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
12597
12606
  }
12607
+ .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label.pf-m-info {
12608
+ flex-direction: column;
12609
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
12610
+ align-items: flex-start;
12611
+ }
12612
+ .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label-main {
12613
+ flex-grow: 0;
12614
+ }
12598
12615
  .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-control {
12599
12616
  grid-column: 2;
12600
12617
  }
@@ -12615,6 +12632,14 @@ ul) {
12615
12632
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
12616
12633
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
12617
12634
  }
12635
+ .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label.pf-m-info {
12636
+ flex-direction: column;
12637
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
12638
+ align-items: flex-start;
12639
+ }
12640
+ .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label-main {
12641
+ flex-grow: 0;
12642
+ }
12618
12643
  .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-control {
12619
12644
  grid-column: 2;
12620
12645
  }
@@ -12635,6 +12660,14 @@ ul) {
12635
12660
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
12636
12661
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
12637
12662
  }
12663
+ .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label.pf-m-info {
12664
+ flex-direction: column;
12665
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
12666
+ align-items: flex-start;
12667
+ }
12668
+ .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label-main {
12669
+ flex-grow: 0;
12670
+ }
12638
12671
  .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-control {
12639
12672
  grid-column: 2;
12640
12673
  }
@@ -12655,6 +12688,14 @@ ul) {
12655
12688
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
12656
12689
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
12657
12690
  }
12691
+ .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label.pf-m-info {
12692
+ flex-direction: column;
12693
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
12694
+ align-items: flex-start;
12695
+ }
12696
+ .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label-main {
12697
+ flex-grow: 0;
12698
+ }
12658
12699
  .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-control {
12659
12700
  grid-column: 2;
12660
12701
  }
@@ -12675,6 +12716,14 @@ ul) {
12675
12716
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
12676
12717
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
12677
12718
  }
12719
+ .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label.pf-m-info {
12720
+ flex-direction: column;
12721
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
12722
+ align-items: flex-start;
12723
+ }
12724
+ .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label-main {
12725
+ flex-grow: 0;
12726
+ }
12678
12727
  .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-control {
12679
12728
  grid-column: 2;
12680
12729
  }
@@ -12695,6 +12744,14 @@ ul) {
12695
12744
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
12696
12745
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
12697
12746
  }
12747
+ .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label.pf-m-info {
12748
+ flex-direction: column;
12749
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
12750
+ align-items: flex-start;
12751
+ }
12752
+ .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label-main {
12753
+ flex-grow: 0;
12754
+ }
12698
12755
  .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-control {
12699
12756
  grid-column: 2;
12700
12757
  }