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

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 (10) 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/docs/components/InlineEdit/examples/InlineEdit.md +29 -22
  5. package/package.json +7 -6
  6. package/patternfly-no-globals.css +59 -2
  7. package/patternfly-theme-dark-unversioned.css +59 -2
  8. package/patternfly.css +59 -2
  9. package/patternfly.min.css +1 -1
  10. 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/docs/components/InlineEdit/examples/InlineEdit.md CHANGED
@@ -90,7 +90,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
90
90
  <button
91
91
  class="pf-v5-c-button pf-m-plain"
92
92
  type="button"
93
- aria-label="Cancel edits"
93
+ aria-label="Cancel edits for row "
94
94
  >
95
95
  <i class="fas fa-times" aria-hidden="true"></i>
96
96
  </button>
@@ -145,7 +145,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
145
145
  <button
146
146
  class="pf-v5-c-button pf-m-plain"
147
147
  type="button"
148
- aria-label="Cancel edits"
148
+ aria-label="Cancel edits for row "
149
149
  >
150
150
  <i class="fas fa-times" aria-hidden="true"></i>
151
151
  </button>
@@ -204,7 +204,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
204
204
  <button
205
205
  class="pf-v5-c-button pf-m-plain"
206
206
  type="button"
207
- aria-label="Cancel edits"
207
+ aria-label="Cancel edits for row "
208
208
  >
209
209
  <i class="fas fa-times" aria-hidden="true"></i>
210
210
  </button>
@@ -277,7 +277,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
277
277
  <button
278
278
  class="pf-v5-c-button pf-m-plain"
279
279
  type="button"
280
- aria-label="Cancel edits"
280
+ aria-label="Cancel edits for row "
281
281
  >
282
282
  <i class="fas fa-times" aria-hidden="true"></i>
283
283
  </button>
@@ -338,7 +338,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
338
338
  <button
339
339
  class="pf-v5-c-button pf-m-plain"
340
340
  type="button"
341
- aria-label="Cancel edits"
341
+ aria-label="Cancel edits for row "
342
342
  >
343
343
  <i class="fas fa-times" aria-hidden="true"></i>
344
344
  </button>
@@ -396,8 +396,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
396
396
  <button
397
397
  class="pf-v5-c-button pf-m-plain"
398
398
  type="button"
399
- disabled
400
- aria-label="Save edits"
399
+ aria-label="Save edits for row "
401
400
  >
402
401
  <i class="fas fa-check" aria-hidden="true"></i>
403
402
  </button>
@@ -406,7 +405,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
406
405
  <button
407
406
  class="pf-v5-c-button pf-m-plain"
408
407
  type="button"
409
- aria-label="Cancel edits"
408
+ aria-label="Cancel edits for row "
410
409
  >
411
410
  <i class="fas fa-times" aria-hidden="true"></i>
412
411
  </button>
@@ -455,7 +454,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
455
454
  type="text"
456
455
  value="Text input description content"
457
456
  id="bulk-edit-table-example-row-1-text-input"
458
- aria-label="Text input"
457
+ aria-label="Text input for row 1"
459
458
  />
460
459
  </span>
461
460
  </div>
@@ -475,14 +474,18 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
475
474
  type="text"
476
475
  value="Text input disabled, description content"
477
476
  id="bulk-edit-table-example-row-1-text-input-disabled"
478
- aria-label="Disabled text input"
477
+ aria-label="Disabled text input for row 1"
479
478
  />
480
479
  </span>
481
480
  </div>
482
481
  </td>
483
482
  <td class="pf-v5-c-table__td" role="cell" data-label="Checkboxes">
484
483
  <div class="pf-v5-c-inline-edit__value">Check 1, Check 2</div>
485
- <div class="pf-v5-c-inline-edit__group pf-m-column">
484
+ <div
485
+ class="pf-v5-c-inline-edit__group pf-m-column"
486
+ role="group"
487
+ aria-label="Checkbox group for row 1"
488
+ >
486
489
  <div class="pf-v5-c-inline-edit__input">
487
490
  <div class="pf-v5-c-check">
488
491
  <input
@@ -520,7 +523,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
520
523
  <div
521
524
  class="pf-v5-c-inline-edit__group pf-m-column"
522
525
  role="radiogroup"
523
- aria-label="Radio group example"
526
+ aria-label="Radio group for row 1"
524
527
  >
525
528
  <div class="pf-v5-c-inline-edit__input">
526
529
  <div class="pf-v5-c-radio">
@@ -562,7 +565,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
562
565
  type="number"
563
566
  value="2"
564
567
  id="bulk-edit-table-example-row-1-number-input"
565
- aria-label="Number input"
568
+ aria-label="Number input for row 1"
566
569
  />
567
570
  </span>
568
571
  </div>
@@ -587,7 +590,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
587
590
  <button
588
591
  class="pf-v5-c-button pf-m-plain"
589
592
  type="button"
590
- aria-label="Cancel edits"
593
+ aria-label="Cancel edits for row 1"
591
594
  >
592
595
  <i class="fas fa-times" aria-hidden="true"></i>
593
596
  </button>
@@ -598,7 +601,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
598
601
  class="pf-v5-c-button pf-m-plain"
599
602
  type="button"
600
603
  id="bulk-edit-table-example-row-1-edit-button"
601
- aria-label="Edit"
604
+ aria-label="Edit row 1"
602
605
  aria-labelledby="bulk-edit-table-example-label bulk-edit-table-example-row-1-edit-button"
603
606
  >
604
607
  <i class="fas fa-pencil-alt" aria-hidden="true"></i>
@@ -679,7 +682,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
679
682
  type="text"
680
683
  value="Text input description content"
681
684
  id="bulk-edit-table-example-row-2-text-input"
682
- aria-label="Text input"
685
+ aria-label="Text input for row 2"
683
686
  />
684
687
  </span>
685
688
  </div>
@@ -699,14 +702,18 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
699
702
  type="text"
700
703
  value="Text input disabled, description content"
701
704
  id="bulk-edit-table-example-row-2-text-input-disabled"
702
- aria-label="Disabled text input"
705
+ aria-label="Disabled text input for row 2"
703
706
  />
704
707
  </span>
705
708
  </div>
706
709
  </td>
707
710
  <td class="pf-v5-c-table__td" role="cell" data-label="Checkboxes">
708
711
  <div class="pf-v5-c-inline-edit__value">Check 1, Check 2</div>
709
- <div class="pf-v5-c-inline-edit__group pf-m-column">
712
+ <div
713
+ class="pf-v5-c-inline-edit__group pf-m-column"
714
+ role="group"
715
+ aria-label="Checkbox group for row 2"
716
+ >
710
717
  <div class="pf-v5-c-inline-edit__input">
711
718
  <div class="pf-v5-c-check">
712
719
  <input
@@ -744,7 +751,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
744
751
  <div
745
752
  class="pf-v5-c-inline-edit__group pf-m-column"
746
753
  role="radiogroup"
747
- aria-label="Radio group example"
754
+ aria-label="Radio group for row 2"
748
755
  >
749
756
  <div class="pf-v5-c-inline-edit__input">
750
757
  <div class="pf-v5-c-radio">
@@ -786,7 +793,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
786
793
  type="number"
787
794
  value="2"
788
795
  id="bulk-edit-table-example-row-2-number-input"
789
- aria-label="Number input"
796
+ aria-label="Number input for row 2"
790
797
  />
791
798
  </span>
792
799
  </div>
@@ -811,7 +818,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
811
818
  <button
812
819
  class="pf-v5-c-button pf-m-plain"
813
820
  type="button"
814
- aria-label="Cancel edits"
821
+ aria-label="Cancel edits for row 2"
815
822
  >
816
823
  <i class="fas fa-times" aria-hidden="true"></i>
817
824
  </button>
@@ -822,7 +829,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
822
829
  class="pf-v5-c-button pf-m-plain"
823
830
  type="button"
824
831
  id="bulk-edit-table-example-row-2-edit-button"
825
- aria-label="Edit"
832
+ aria-label="Edit row 2"
826
833
  aria-labelledby="bulk-edit-table-example-label bulk-edit-table-example-row-2-edit-button"
827
834
  >
828
835
  <i class="fas fa-pencil-alt" aria-hidden="true"></i>
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.8",
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.12",
50
50
  "@patternfly/patternfly-a11y": "4.3.1",
51
- "@patternfly/react-code-editor": "5.3.3",
52
- "@patternfly/react-core": "5.3.3",
53
- "@patternfly/react-table": "5.3.3",
51
+ "@patternfly/react-code-editor": "5.3.4",
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",
@@ -108,5 +108,6 @@
108
108
  "publishConfig": {
109
109
  "registry": "https://registry.npmjs.org/",
110
110
  "access": "public"
111
- }
111
+ },
112
+ "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
112
113
  }
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