@patternfly/patternfly 6.3.0-prerelease.29 → 6.3.0-prerelease.30

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 +9 -1
  2. package/components/Form/form.scss +10 -1
  3. package/components/_index.css +9 -1
  4. package/docs/components/Form/examples/Form.md +1054 -220
  5. package/package.json +1 -1
  6. package/patternfly-no-globals.css +9 -1
  7. package/patternfly.css +9 -1
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/Form/form.css CHANGED
@@ -51,7 +51,7 @@
51
51
  --pf-v6-c-form__field-group--GridTemplateColumns--toggle: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-v6-c-form__field-group-toggle-icon--MinWidth) + var(--pf-t--global--spacer--xs));
52
52
  --pf-v6-c-form__field-group-toggle--PaddingBlockStart: var(--pf-v6-c-form__field-group-header--PaddingBlockStart);
53
53
  --pf-v6-c-form__field-group-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
54
- --pf-v6-c-form__field-group__field-group__field-group-toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
54
+ --pf-v6-c-form__field-group__field-group__field-group-toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg);
55
55
  --pf-v6-c-form__field-group-header-toggle--BorderWidth--base: var(--pf-t--global--border--width--divider--default);
56
56
  --pf-v6-c-form__field-group__field-group--field-group__field-group-toggle--after--BorderBlockStartWidth: var(--pf-v6-c-form__field-group-header-toggle--BorderWidth--base);
57
57
  --pf-v6-c-form__field-group-toggle-button--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
@@ -71,6 +71,8 @@
71
71
  --pf-v6-c-form__field-group-header-description--MarginBlockStart: var(--pf-t--global--spacer--xs);
72
72
  --pf-v6-c-form__field-group-header-description--Color: var(--pf-t--global--text--color--subtle);
73
73
  --pf-v6-c-form__field-group-header-actions--MarginInlineStart: var(--pf-t--global--spacer--sm);
74
+ --pf-v6-c-form__field-group-header-actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
75
+ --pf-v6-c-form__field-group-header-actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
74
76
  --pf-v6-c-form__field-group-body--PaddingBlockStart: var(--pf-t--global--spacer--lg);
75
77
  --pf-v6-c-form__field-group-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
76
78
  --pf-v6-c-form__field-group-body--Gap: var(--pf-v6-c-form--GridGap);
@@ -515,6 +517,8 @@
515
517
  }
516
518
 
517
519
  .pf-v6-c-form__field-group-header-actions {
520
+ margin-block-start: var(--pf-v6-c-form__field-group-header-actions--MarginBlockStart);
521
+ margin-block-end: var(--pf-v6-c-form__field-group-header-actions--MarginBlockEnd);
518
522
  margin-inline-start: var(--pf-v6-c-form__field-group-header-actions--MarginInlineStart);
519
523
  white-space: nowrap;
520
524
  }
@@ -523,9 +527,13 @@
523
527
  display: grid;
524
528
  grid-column: var(--pf-v6-c-form__field-group-body--GridColumn);
525
529
  gap: var(--pf-v6-c-form__field-group-body--Gap);
530
+ padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
531
+ padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
526
532
  }
527
533
  .pf-v6-c-form__field-group.pf-m-expandable > .pf-v6-c-form__field-group-body {
528
534
  max-height: 0;
535
+ padding-block-start: 0;
536
+ padding-block-end: 0;
529
537
  visibility: hidden;
530
538
  opacity: 0;
531
539
  transition-delay: 0s, 0s, var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade);
package/components/Form/form.scss CHANGED
@@ -130,7 +130,7 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
130
130
  --#{$form}__field-group--GridTemplateColumns--toggle: calc(var(--pf-t--global--spacer--md) * 2 + var(--#{$form}__field-group-toggle-icon--MinWidth) + var(--pf-t--global--spacer--xs)); // based off of the expected width of the group toggle, for use to define a column when the toggle is not present
131
131
  --#{$form}__field-group-toggle--PaddingBlockStart: var(--#{$form}__field-group-header--PaddingBlockStart);
132
132
  --#{$form}__field-group-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
133
- --#{$form}__field-group__field-group__field-group-toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
133
+ --#{$form}__field-group__field-group__field-group-toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg); // remove in breaking change
134
134
  --#{$form}__field-group-header-toggle--BorderWidth--base: var(--pf-t--global--border--width--divider--default);
135
135
  --#{$form}__field-group__field-group--field-group__field-group-toggle--after--BorderBlockStartWidth: var(--#{$form}__field-group-header-toggle--BorderWidth--base);
136
136
  --#{$form}__field-group-toggle-button--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
@@ -152,6 +152,9 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
152
152
  --#{$form}__field-group-header-description--MarginBlockStart: var(--pf-t--global--spacer--xs);
153
153
  --#{$form}__field-group-header-description--Color: var(--pf-t--global--text--color--subtle);
154
154
  --#{$form}__field-group-header-actions--MarginInlineStart: var(--pf-t--global--spacer--sm);
155
+ --#{$form}__field-group-header-actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
156
+ --#{$form}__field-group-header-actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
157
+
155
158
 
156
159
  // Field group body
157
160
  --#{$form}__field-group-body--PaddingBlockStart: var(--pf-t--global--spacer--lg);
@@ -474,6 +477,8 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
474
477
  }
475
478
 
476
479
  .#{$form}__field-group-header-actions {
480
+ margin-block-start: var(--#{$form}__field-group-header-actions--MarginBlockStart);
481
+ margin-block-end: var(--#{$form}__field-group-header-actions--MarginBlockEnd);
477
482
  margin-inline-start: var(--#{$form}__field-group-header-actions--MarginInlineStart);
478
483
  white-space: nowrap;
479
484
  }
@@ -482,9 +487,13 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
482
487
  display: grid;
483
488
  grid-column: var(--#{$form}__field-group-body--GridColumn);
484
489
  gap: var(--#{$form}__field-group-body--Gap);
490
+ padding-block-start: var(--#{$form}__field-group-body--PaddingBlockStart);
491
+ padding-block-end: var(--#{$form}__field-group-body--PaddingBlockEnd);
485
492
 
486
493
  @at-root .#{$form}__field-group.pf-m-expandable > & {
487
494
  max-height: 0;
495
+ padding-block-start: 0;
496
+ padding-block-end: 0;
488
497
  visibility: hidden;
489
498
  opacity: 0;
490
499
  transition-delay: 0s, 0s, var(--#{$form}__field-group-body--TransitionDuration--collapse--fade), var(--#{$form}__field-group-body--TransitionDuration--collapse--fade), var(--#{$form}__field-group-body--TransitionDuration--collapse--fade), var(--#{$form}__field-group-body--TransitionDuration--collapse--fade);
package/components/_index.css CHANGED
@@ -6797,7 +6797,7 @@ ul) {
6797
6797
  --pf-v6-c-form__field-group--GridTemplateColumns--toggle: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-v6-c-form__field-group-toggle-icon--MinWidth) + var(--pf-t--global--spacer--xs));
6798
6798
  --pf-v6-c-form__field-group-toggle--PaddingBlockStart: var(--pf-v6-c-form__field-group-header--PaddingBlockStart);
6799
6799
  --pf-v6-c-form__field-group-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
6800
- --pf-v6-c-form__field-group__field-group__field-group-toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
6800
+ --pf-v6-c-form__field-group__field-group__field-group-toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg);
6801
6801
  --pf-v6-c-form__field-group-header-toggle--BorderWidth--base: var(--pf-t--global--border--width--divider--default);
6802
6802
  --pf-v6-c-form__field-group__field-group--field-group__field-group-toggle--after--BorderBlockStartWidth: var(--pf-v6-c-form__field-group-header-toggle--BorderWidth--base);
6803
6803
  --pf-v6-c-form__field-group-toggle-button--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
@@ -6817,6 +6817,8 @@ ul) {
6817
6817
  --pf-v6-c-form__field-group-header-description--MarginBlockStart: var(--pf-t--global--spacer--xs);
6818
6818
  --pf-v6-c-form__field-group-header-description--Color: var(--pf-t--global--text--color--subtle);
6819
6819
  --pf-v6-c-form__field-group-header-actions--MarginInlineStart: var(--pf-t--global--spacer--sm);
6820
+ --pf-v6-c-form__field-group-header-actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
6821
+ --pf-v6-c-form__field-group-header-actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
6820
6822
  --pf-v6-c-form__field-group-body--PaddingBlockStart: var(--pf-t--global--spacer--lg);
6821
6823
  --pf-v6-c-form__field-group-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
6822
6824
  --pf-v6-c-form__field-group-body--Gap: var(--pf-v6-c-form--GridGap);
@@ -7261,6 +7263,8 @@ ul) {
7261
7263
  }
7262
7264
 
7263
7265
  .pf-v6-c-form__field-group-header-actions {
7266
+ margin-block-start: var(--pf-v6-c-form__field-group-header-actions--MarginBlockStart);
7267
+ margin-block-end: var(--pf-v6-c-form__field-group-header-actions--MarginBlockEnd);
7264
7268
  margin-inline-start: var(--pf-v6-c-form__field-group-header-actions--MarginInlineStart);
7265
7269
  white-space: nowrap;
7266
7270
  }
@@ -7269,9 +7273,13 @@ ul) {
7269
7273
  display: grid;
7270
7274
  grid-column: var(--pf-v6-c-form__field-group-body--GridColumn);
7271
7275
  gap: var(--pf-v6-c-form__field-group-body--Gap);
7276
+ padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
7277
+ padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
7272
7278
  }
7273
7279
  .pf-v6-c-form__field-group.pf-m-expandable > .pf-v6-c-form__field-group-body {
7274
7280
  max-height: 0;
7281
+ padding-block-start: 0;
7282
+ padding-block-end: 0;
7275
7283
  visibility: hidden;
7276
7284
  opacity: 0;
7277
7285
  transition-delay: 0s, 0s, var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade);