@patternfly/patternfly 6.3.0-prerelease.22 → 6.3.0-prerelease.23
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.
- package/components/Form/form.css +33 -2
- package/components/Form/form.scss +39 -2
- package/components/_index.css +33 -2
- package/docs/components/Form/examples/Form.md +92 -5
- package/docs/demos/Form/examples/BasicForms.md +12 -12
- package/package.json +1 -1
- package/patternfly-no-globals.css +33 -2
- package/patternfly.css +33 -2
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/components/Form/form.css
CHANGED
|
@@ -78,6 +78,19 @@
|
|
|
78
78
|
--pf-v6-c-form__field-group__field-group__field-group-body--GridColumn: 1 / 3;
|
|
79
79
|
--pf-v6-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn: 2 / 3;
|
|
80
80
|
--pf-v6-c-form__field-group-body__field-group--last-child--MarginBlockEnd: calc(var(--pf-v6-c-form__field-group-body--PaddingBlockEnd) * -1);
|
|
81
|
+
--pf-v6-c-form__field-group-body--TranslateY: 0;
|
|
82
|
+
--pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY: 0;
|
|
83
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: 0s;
|
|
84
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
|
|
85
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: 0s;
|
|
86
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
|
|
87
|
+
}
|
|
88
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
89
|
+
.pf-v6-c-form {
|
|
90
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
|
91
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
|
92
|
+
--pf-v6-c-form__field-group-body--TranslateY: -.5rem;
|
|
93
|
+
}
|
|
81
94
|
}
|
|
82
95
|
|
|
83
96
|
.pf-v6-c-form {
|
|
@@ -434,6 +447,16 @@
|
|
|
434
447
|
.pf-v6-c-form__field-group.pf-m-expanded > .pf-v6-c-form__field-group-toggle {
|
|
435
448
|
--pf-v6-c-form__field-group-toggle-icon--Rotate: var(--pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate);
|
|
436
449
|
}
|
|
450
|
+
.pf-v6-c-form__field-group.pf-m-expanded.pf-m-expandable > .pf-v6-c-form__field-group-body {
|
|
451
|
+
max-height: 9999px;
|
|
452
|
+
padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
|
|
453
|
+
padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
|
|
454
|
+
visibility: visible;
|
|
455
|
+
opacity: 1;
|
|
456
|
+
transition-delay: 0s;
|
|
457
|
+
transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
|
|
458
|
+
translate: 0 var(--pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY);
|
|
459
|
+
}
|
|
437
460
|
|
|
438
461
|
.pf-v6-c-form__field-group-toggle {
|
|
439
462
|
grid-row: 1/2;
|
|
@@ -500,9 +523,17 @@
|
|
|
500
523
|
display: grid;
|
|
501
524
|
grid-column: var(--pf-v6-c-form__field-group-body--GridColumn);
|
|
502
525
|
gap: var(--pf-v6-c-form__field-group-body--Gap);
|
|
503
|
-
padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
|
|
504
|
-
padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
|
|
505
526
|
}
|
|
527
|
+
.pf-v6-c-form__field-group.pf-m-expandable > .pf-v6-c-form__field-group-body {
|
|
528
|
+
max-height: 0;
|
|
529
|
+
visibility: hidden;
|
|
530
|
+
opacity: 0;
|
|
531
|
+
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);
|
|
532
|
+
transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide), 0s, 0s, 0s, 0s;
|
|
533
|
+
transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
|
|
534
|
+
translate: 0 var(--pf-v6-c-form__field-group-body--TranslateY);
|
|
535
|
+
}
|
|
536
|
+
|
|
506
537
|
.pf-v6-c-form__field-group-body > .pf-v6-c-form__field-group:first-child {
|
|
507
538
|
--pf-v6-c-form__field-group-toggle--PaddingBlockStart: 0;
|
|
508
539
|
--pf-v6-c-form__field-group-header--PaddingBlockStart: 0;
|
|
@@ -125,6 +125,8 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
|
|
|
125
125
|
--#{$form}__field-group--BorderBlockEndWidth: var(--#{$form}__field-group--border-width-base);
|
|
126
126
|
--#{$form}__field-group--BorderBlockEndColor: var(--pf-t--global--border--color--default);
|
|
127
127
|
--#{$form}__field-group--field-group--MarginBlockStart: calc(var(--#{$form}--GridGap) * -1);
|
|
128
|
+
|
|
129
|
+
// Field group toggle
|
|
128
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
|
|
129
131
|
--#{$form}__field-group-toggle--PaddingBlockStart: var(--#{$form}__field-group-header--PaddingBlockStart);
|
|
130
132
|
--#{$form}__field-group-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
|
|
@@ -138,6 +140,8 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
|
|
|
138
140
|
--#{$form}__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
|
|
139
141
|
--#{$form}__field-group-toggle-icon--Rotate: 0;
|
|
140
142
|
--#{$form}__field-group--m-expanded__toggle-icon--Rotate: 90deg;
|
|
143
|
+
|
|
144
|
+
// Field group header
|
|
141
145
|
--#{$form}__field-group-header--PaddingBlockStart: var(--pf-t--global--spacer--md);
|
|
142
146
|
--#{$form}__field-group-header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
|
|
143
147
|
--#{$form}__field-group-header--GridColumn: 1 / 3;
|
|
@@ -148,6 +152,8 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
|
|
|
148
152
|
--#{$form}__field-group-header-description--MarginBlockStart: var(--pf-t--global--spacer--xs);
|
|
149
153
|
--#{$form}__field-group-header-description--Color: var(--pf-t--global--text--color--subtle);
|
|
150
154
|
--#{$form}__field-group-header-actions--MarginInlineStart: var(--pf-t--global--spacer--sm);
|
|
155
|
+
|
|
156
|
+
// Field group body
|
|
151
157
|
--#{$form}__field-group-body--PaddingBlockStart: var(--pf-t--global--spacer--lg);
|
|
152
158
|
--#{$form}__field-group-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
|
|
153
159
|
--#{$form}__field-group-body--Gap: var(--#{$form}--GridGap);
|
|
@@ -155,6 +161,18 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
|
|
|
155
161
|
--#{$form}__field-group__field-group__field-group-body--GridColumn: 1 / 3;
|
|
156
162
|
--#{$form}__field-group__field-group__field-group-toggle--field-group-body--GridColumn: 2 / 3;
|
|
157
163
|
--#{$form}__field-group-body__field-group--last-child--MarginBlockEnd: calc(var(--#{$form}__field-group-body--PaddingBlockEnd) * -1);
|
|
164
|
+
--#{$form}__field-group-body--TranslateY: 0;
|
|
165
|
+
--#{$form}__field-group--m-expanded__field-group-body--TranslateY: 0;
|
|
166
|
+
--#{$form}__field-group-body--TransitionDuration--expand--slide: 0s;
|
|
167
|
+
--#{$form}__field-group-body--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
|
|
168
|
+
--#{$form}__field-group-body--TransitionDuration--collapse--slide: 0s;
|
|
169
|
+
--#{$form}__field-group-body--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
|
|
170
|
+
|
|
171
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
172
|
+
--#{$form}__field-group-body--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
|
173
|
+
--#{$form}__field-group-body--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
|
174
|
+
--#{$form}__field-group-body--TranslateY: -.5rem;
|
|
175
|
+
}
|
|
158
176
|
}
|
|
159
177
|
|
|
160
178
|
.#{$form} {
|
|
@@ -385,6 +403,17 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
|
|
|
385
403
|
> .#{$form}__field-group-toggle {
|
|
386
404
|
--#{$form}__field-group-toggle-icon--Rotate: var(--#{$form}__field-group--m-expanded__toggle-icon--Rotate);
|
|
387
405
|
}
|
|
406
|
+
|
|
407
|
+
&.pf-m-expandable > .#{$form}__field-group-body { // TODO - remove .pf-m-expandable in a breaking change, it shouldn't be needed. Only needed now so that these styles are an opt-in behind .pf-m-expandable
|
|
408
|
+
max-height: 9999px;
|
|
409
|
+
padding-block-start: var(--#{$form}__field-group-body--PaddingBlockStart);
|
|
410
|
+
padding-block-end: var(--#{$form}__field-group-body--PaddingBlockEnd);
|
|
411
|
+
visibility: visible;
|
|
412
|
+
opacity: 1;
|
|
413
|
+
transition-delay: 0s;
|
|
414
|
+
transition-duration: var(--#{$form}__field-group-body--TransitionDuration--expand--fade), var(--#{$form}__field-group-body--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
|
|
415
|
+
translate: 0 var(--#{$form}__field-group--m-expanded__field-group-body--TranslateY);
|
|
416
|
+
}
|
|
388
417
|
}
|
|
389
418
|
}
|
|
390
419
|
|
|
@@ -453,8 +482,16 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
|
|
|
453
482
|
display: grid;
|
|
454
483
|
grid-column: var(--#{$form}__field-group-body--GridColumn);
|
|
455
484
|
gap: var(--#{$form}__field-group-body--Gap);
|
|
456
|
-
|
|
457
|
-
|
|
485
|
+
|
|
486
|
+
@at-root .#{$form}__field-group.pf-m-expandable > & {
|
|
487
|
+
max-height: 0;
|
|
488
|
+
visibility: hidden;
|
|
489
|
+
opacity: 0;
|
|
490
|
+
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);
|
|
491
|
+
transition-duration: var(--#{$form}__field-group-body--TransitionDuration--collapse--fade), var(--#{$form}__field-group-body--TransitionDuration--collapse--slide), 0s, 0s, 0s, 0s;
|
|
492
|
+
transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
|
|
493
|
+
translate: 0 var(--#{$form}__field-group-body--TranslateY);
|
|
494
|
+
}
|
|
458
495
|
|
|
459
496
|
> .#{$form}__field-group {
|
|
460
497
|
&:first-child {
|
package/components/_index.css
CHANGED
|
@@ -6704,6 +6704,19 @@ ul) {
|
|
|
6704
6704
|
--pf-v6-c-form__field-group__field-group__field-group-body--GridColumn: 1 / 3;
|
|
6705
6705
|
--pf-v6-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn: 2 / 3;
|
|
6706
6706
|
--pf-v6-c-form__field-group-body__field-group--last-child--MarginBlockEnd: calc(var(--pf-v6-c-form__field-group-body--PaddingBlockEnd) * -1);
|
|
6707
|
+
--pf-v6-c-form__field-group-body--TranslateY: 0;
|
|
6708
|
+
--pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY: 0;
|
|
6709
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: 0s;
|
|
6710
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
|
|
6711
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: 0s;
|
|
6712
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
|
|
6713
|
+
}
|
|
6714
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
6715
|
+
.pf-v6-c-form {
|
|
6716
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
|
6717
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
|
6718
|
+
--pf-v6-c-form__field-group-body--TranslateY: -.5rem;
|
|
6719
|
+
}
|
|
6707
6720
|
}
|
|
6708
6721
|
|
|
6709
6722
|
.pf-v6-c-form {
|
|
@@ -7060,6 +7073,16 @@ ul) {
|
|
|
7060
7073
|
.pf-v6-c-form__field-group.pf-m-expanded > .pf-v6-c-form__field-group-toggle {
|
|
7061
7074
|
--pf-v6-c-form__field-group-toggle-icon--Rotate: var(--pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate);
|
|
7062
7075
|
}
|
|
7076
|
+
.pf-v6-c-form__field-group.pf-m-expanded.pf-m-expandable > .pf-v6-c-form__field-group-body {
|
|
7077
|
+
max-height: 9999px;
|
|
7078
|
+
padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
|
|
7079
|
+
padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
|
|
7080
|
+
visibility: visible;
|
|
7081
|
+
opacity: 1;
|
|
7082
|
+
transition-delay: 0s;
|
|
7083
|
+
transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
|
|
7084
|
+
translate: 0 var(--pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY);
|
|
7085
|
+
}
|
|
7063
7086
|
|
|
7064
7087
|
.pf-v6-c-form__field-group-toggle {
|
|
7065
7088
|
grid-row: 1/2;
|
|
@@ -7126,9 +7149,17 @@ ul) {
|
|
|
7126
7149
|
display: grid;
|
|
7127
7150
|
grid-column: var(--pf-v6-c-form__field-group-body--GridColumn);
|
|
7128
7151
|
gap: var(--pf-v6-c-form__field-group-body--Gap);
|
|
7129
|
-
padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
|
|
7130
|
-
padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
|
|
7131
7152
|
}
|
|
7153
|
+
.pf-v6-c-form__field-group.pf-m-expandable > .pf-v6-c-form__field-group-body {
|
|
7154
|
+
max-height: 0;
|
|
7155
|
+
visibility: hidden;
|
|
7156
|
+
opacity: 0;
|
|
7157
|
+
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);
|
|
7158
|
+
transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide), 0s, 0s, 0s, 0s;
|
|
7159
|
+
transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
|
|
7160
|
+
translate: 0 var(--pf-v6-c-form__field-group-body--TranslateY);
|
|
7161
|
+
}
|
|
7162
|
+
|
|
7132
7163
|
.pf-v6-c-form__field-group-body > .pf-v6-c-form__field-group:first-child {
|
|
7133
7164
|
--pf-v6-c-form__field-group-toggle--PaddingBlockStart: 0;
|
|
7134
7165
|
--pf-v6-c-form__field-group-header--PaddingBlockStart: 0;
|
|
@@ -652,7 +652,7 @@ cssPrefix: pf-v6-c-form
|
|
|
652
652
|
</button>
|
|
653
653
|
</div>
|
|
654
654
|
</div>
|
|
655
|
-
<div class="pf-v6-c-form__field-group-body"
|
|
655
|
+
<div class="pf-v6-c-form__field-group-body" inert>
|
|
656
656
|
<div class="pf-v6-c-form__group">
|
|
657
657
|
<div class="pf-v6-c-form__group-label"><label
|
|
658
658
|
class="pf-v6-c-form__label"
|
|
@@ -748,7 +748,7 @@ cssPrefix: pf-v6-c-form
|
|
|
748
748
|
```html
|
|
749
749
|
<form class="pf-v6-c-form" novalidate>
|
|
750
750
|
<div
|
|
751
|
-
class="pf-v6-c-form__field-group"
|
|
751
|
+
class="pf-v6-c-form__field-group pf-m-expandable"
|
|
752
752
|
role="group"
|
|
753
753
|
aria-labelledby="form-expandable-field-groups-field-group-1-title"
|
|
754
754
|
>
|
|
@@ -787,9 +787,95 @@ cssPrefix: pf-v6-c-form
|
|
|
787
787
|
</button>
|
|
788
788
|
</div>
|
|
789
789
|
</div>
|
|
790
|
+
<div class="pf-v6-c-form__field-group-body" inert>
|
|
791
|
+
<div class="pf-v6-c-form__group">
|
|
792
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
793
|
+
class="pf-v6-c-form__label"
|
|
794
|
+
for="form-expandable-field-groupsform-expandable-field-groups-field-group-1-label1"
|
|
795
|
+
>
|
|
796
|
+
<span class="pf-v6-c-form__label-text">Label 1</span> <span class="pf-v6-c-form__label-required" aria-hidden="true">*</span></label> <span class="pf-v6-c-form__group-label-help">
|
|
797
|
+
<span
|
|
798
|
+
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
799
|
+
type="button"
|
|
800
|
+
role="button"
|
|
801
|
+
tabindex="0"
|
|
802
|
+
aria-label="More information for label 1 field"
|
|
803
|
+
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-1-label1"
|
|
804
|
+
>
|
|
805
|
+
<span class="pf-v6-c-button__icon">
|
|
806
|
+
<svg
|
|
807
|
+
class="pf-v6-svg"
|
|
808
|
+
viewBox="0 0 1024 1024"
|
|
809
|
+
fill="currentColor"
|
|
810
|
+
aria-hidden="true"
|
|
811
|
+
role="img"
|
|
812
|
+
width="1em"
|
|
813
|
+
height="1em"
|
|
814
|
+
>
|
|
815
|
+
<path
|
|
816
|
+
d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
|
|
817
|
+
/>
|
|
818
|
+
</svg>
|
|
819
|
+
</span>
|
|
820
|
+
</span></span>
|
|
821
|
+
</div>
|
|
822
|
+
<div class="pf-v6-c-form__group-control">
|
|
823
|
+
<span class="pf-v6-c-form-control pf-m-required">
|
|
824
|
+
<input
|
|
825
|
+
required
|
|
826
|
+
type="text"
|
|
827
|
+
id="form-expandable-field-groupsform-expandable-field-groups-field-group-1-label1"
|
|
828
|
+
name="form-expandable-field-groupsform-expandable-field-groups-field-group-1-label1"
|
|
829
|
+
/>
|
|
830
|
+
</span>
|
|
831
|
+
</div>
|
|
832
|
+
</div>
|
|
833
|
+
<div class="pf-v6-c-form__group">
|
|
834
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
835
|
+
class="pf-v6-c-form__label"
|
|
836
|
+
for="form-expandable-field-groupsform-expandable-field-groups-field-group-1-label2"
|
|
837
|
+
>
|
|
838
|
+
<span class="pf-v6-c-form__label-text">Label 2</span> <span class="pf-v6-c-form__label-required" aria-hidden="true">*</span></label> <span class="pf-v6-c-form__group-label-help">
|
|
839
|
+
<span
|
|
840
|
+
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
841
|
+
type="button"
|
|
842
|
+
role="button"
|
|
843
|
+
tabindex="0"
|
|
844
|
+
aria-label="More information for label 2 field"
|
|
845
|
+
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-1-label2"
|
|
846
|
+
>
|
|
847
|
+
<span class="pf-v6-c-button__icon">
|
|
848
|
+
<svg
|
|
849
|
+
class="pf-v6-svg"
|
|
850
|
+
viewBox="0 0 1024 1024"
|
|
851
|
+
fill="currentColor"
|
|
852
|
+
aria-hidden="true"
|
|
853
|
+
role="img"
|
|
854
|
+
width="1em"
|
|
855
|
+
height="1em"
|
|
856
|
+
>
|
|
857
|
+
<path
|
|
858
|
+
d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
|
|
859
|
+
/>
|
|
860
|
+
</svg>
|
|
861
|
+
</span>
|
|
862
|
+
</span></span>
|
|
863
|
+
</div>
|
|
864
|
+
<div class="pf-v6-c-form__group-control">
|
|
865
|
+
<span class="pf-v6-c-form-control pf-m-required">
|
|
866
|
+
<input
|
|
867
|
+
required
|
|
868
|
+
type="text"
|
|
869
|
+
id="form-expandable-field-groupsform-expandable-field-groups-field-group-1-label2"
|
|
870
|
+
name="form-expandable-field-groupsform-expandable-field-groups-field-group-1-label2"
|
|
871
|
+
/>
|
|
872
|
+
</span>
|
|
873
|
+
</div>
|
|
874
|
+
</div>
|
|
875
|
+
</div>
|
|
790
876
|
</div>
|
|
791
877
|
<div
|
|
792
|
-
class="pf-v6-c-form__field-group pf-m-expanded"
|
|
878
|
+
class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
|
|
793
879
|
role="group"
|
|
794
880
|
aria-labelledby="form-expandable-field-groups-field-group-2-title"
|
|
795
881
|
>
|
|
@@ -910,7 +996,7 @@ cssPrefix: pf-v6-c-form
|
|
|
910
996
|
</div>
|
|
911
997
|
</div>
|
|
912
998
|
<div
|
|
913
|
-
class="pf-v6-c-form__field-group
|
|
999
|
+
class="pf-v6-c-form__field-group"
|
|
914
1000
|
role="group"
|
|
915
1001
|
aria-labelledby="form-expandable-field-groups-field-group-3-title"
|
|
916
1002
|
>
|
|
@@ -924,7 +1010,7 @@ cssPrefix: pf-v6-c-form
|
|
|
924
1010
|
</div>
|
|
925
1011
|
</div>
|
|
926
1012
|
</div>
|
|
927
|
-
<div class="pf-v6-c-form__field-group-body">
|
|
1013
|
+
<div class="pf-v6-c-form__field-group-body" inert>
|
|
928
1014
|
<div class="pf-v6-c-form__group">
|
|
929
1015
|
<div class="pf-v6-c-form__group-label"><label
|
|
930
1016
|
class="pf-v6-c-form__label"
|
|
@@ -1088,5 +1174,6 @@ To avoid the form label's required indicator or help tooltip icon from wrapping
|
|
|
1088
1174
|
| `.pf-m-no-padding-top` | `.pf-v6-c-form__group-label` | Removes top padding from the label element for labels adjacent to an element that isn't a form control. |
|
|
1089
1175
|
| `.pf-m-inline` | `.pf-v6-c-form__group-control` | Modifies form group children to be inline (this is primarily for radio buttons and checkboxes). |
|
|
1090
1176
|
| `.pf-m-stack` | `.pf-v6-c-form__group-control` | Modifies form group children to be stacked with space between children. |
|
|
1177
|
+
| `.pf-m-expandable` | `.pf-v6-c-form__field-group` | Modifies a field group to be expandable. Currently used as the opt-in for animating the expanded state. |
|
|
1091
1178
|
| `.pf-m-expanded` | `.pf-v6-c-form__field-group` | Modifies an expandable field group for the expanded state. |
|
|
1092
1179
|
| `--pf-v6-c-form--m-limit-width--MaxWidth` | `.pf-v6-c-form.pf-m-limit-width` | Sets a custom `max-width` for a width limited form. |
|
|
@@ -1049,7 +1049,7 @@ subsection: forms
|
|
|
1049
1049
|
</div>
|
|
1050
1050
|
|
|
1051
1051
|
<div
|
|
1052
|
-
class="pf-v6-c-form__field-group"
|
|
1052
|
+
class="pf-v6-c-form__field-group pf-m-expandable"
|
|
1053
1053
|
role="group"
|
|
1054
1054
|
aria-labelledby="form-demo-sections-complex-form-alerting-title"
|
|
1055
1055
|
>
|
|
@@ -1086,7 +1086,7 @@ subsection: forms
|
|
|
1086
1086
|
</div>
|
|
1087
1087
|
|
|
1088
1088
|
<div
|
|
1089
|
-
class="pf-v6-c-form__field-group"
|
|
1089
|
+
class="pf-v6-c-form__field-group pf-m-expandable"
|
|
1090
1090
|
role="group"
|
|
1091
1091
|
aria-labelledby="form-demo-sections-complex-form-query-title"
|
|
1092
1092
|
>
|
|
@@ -1123,7 +1123,7 @@ subsection: forms
|
|
|
1123
1123
|
</div>
|
|
1124
1124
|
|
|
1125
1125
|
<div
|
|
1126
|
-
class="pf-v6-c-form__field-group"
|
|
1126
|
+
class="pf-v6-c-form__field-group pf-m-expandable"
|
|
1127
1127
|
role="group"
|
|
1128
1128
|
aria-labelledby="form-demo-sections-complex-form-affinity-title"
|
|
1129
1129
|
>
|
|
@@ -1157,9 +1157,9 @@ subsection: forms
|
|
|
1157
1157
|
>If specified, the pod's scheduling constraints.</div>
|
|
1158
1158
|
</div>
|
|
1159
1159
|
</div>
|
|
1160
|
-
<div class="pf-v6-c-form__field-group-body"
|
|
1160
|
+
<div class="pf-v6-c-form__field-group-body" inert>
|
|
1161
1161
|
<div
|
|
1162
|
-
class="pf-v6-c-form__field-group pf-m-expanded"
|
|
1162
|
+
class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
|
|
1163
1163
|
role="group"
|
|
1164
1164
|
aria-labelledby="form-demo-sections-complex-form-node-affinity-title"
|
|
1165
1165
|
>
|
|
@@ -1196,7 +1196,7 @@ subsection: forms
|
|
|
1196
1196
|
</div>
|
|
1197
1197
|
<div class="pf-v6-c-form__field-group-body">
|
|
1198
1198
|
<div
|
|
1199
|
-
class="pf-v6-c-form__field-group"
|
|
1199
|
+
class="pf-v6-c-form__field-group pf-m-expandable"
|
|
1200
1200
|
role="group"
|
|
1201
1201
|
aria-labelledby="form-demo-sections-complex-form-node-affinity-required-title"
|
|
1202
1202
|
>
|
|
@@ -1233,7 +1233,7 @@ subsection: forms
|
|
|
1233
1233
|
</div>
|
|
1234
1234
|
|
|
1235
1235
|
<div
|
|
1236
|
-
class="pf-v6-c-form__field-group pf-m-expanded"
|
|
1236
|
+
class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
|
|
1237
1237
|
role="group"
|
|
1238
1238
|
aria-labelledby="form-demo-sections-complex-form-node-affinity-required-2-title"
|
|
1239
1239
|
>
|
|
@@ -1327,7 +1327,7 @@ subsection: forms
|
|
|
1327
1327
|
</div>
|
|
1328
1328
|
|
|
1329
1329
|
<div
|
|
1330
|
-
class="pf-v6-c-form__field-group"
|
|
1330
|
+
class="pf-v6-c-form__field-group pf-m-expandable"
|
|
1331
1331
|
role="group"
|
|
1332
1332
|
aria-labelledby="form-demo-sections-complex-form-pod-affinity-title"
|
|
1333
1333
|
>
|
|
@@ -1366,7 +1366,7 @@ subsection: forms
|
|
|
1366
1366
|
</div>
|
|
1367
1367
|
|
|
1368
1368
|
<div
|
|
1369
|
-
class="pf-v6-c-form__field-group pf-m-expanded"
|
|
1369
|
+
class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
|
|
1370
1370
|
role="group"
|
|
1371
1371
|
aria-labelledby="form-demo-sections-complex-form-routing-title"
|
|
1372
1372
|
>
|
|
@@ -1552,7 +1552,7 @@ subsection: forms
|
|
|
1552
1552
|
</div>
|
|
1553
1553
|
|
|
1554
1554
|
<div
|
|
1555
|
-
class="pf-v6-c-form__field-group pf-m-expanded"
|
|
1555
|
+
class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
|
|
1556
1556
|
role="group"
|
|
1557
1557
|
aria-labelledby="form-demo-sections-complex-form-health-checks-title"
|
|
1558
1558
|
>
|
|
@@ -1657,7 +1657,7 @@ subsection: forms
|
|
|
1657
1657
|
</div>
|
|
1658
1658
|
|
|
1659
1659
|
<div
|
|
1660
|
-
class="pf-v6-c-form__field-group"
|
|
1660
|
+
class="pf-v6-c-form__field-group pf-m-expandable"
|
|
1661
1661
|
role="group"
|
|
1662
1662
|
aria-labelledby="form-demo-sections-complex-form-build-configuration-title"
|
|
1663
1663
|
>
|
|
@@ -1696,7 +1696,7 @@ subsection: forms
|
|
|
1696
1696
|
</div>
|
|
1697
1697
|
|
|
1698
1698
|
<div
|
|
1699
|
-
class="pf-v6-c-form__field-group"
|
|
1699
|
+
class="pf-v6-c-form__field-group pf-m-expandable"
|
|
1700
1700
|
role="group"
|
|
1701
1701
|
aria-labelledby="form-demo-sections-complex-form-deployment-title"
|
|
1702
1702
|
>
|
package/package.json
CHANGED
|
@@ -14166,6 +14166,19 @@ ul) {
|
|
|
14166
14166
|
--pf-v6-c-form__field-group__field-group__field-group-body--GridColumn: 1 / 3;
|
|
14167
14167
|
--pf-v6-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn: 2 / 3;
|
|
14168
14168
|
--pf-v6-c-form__field-group-body__field-group--last-child--MarginBlockEnd: calc(var(--pf-v6-c-form__field-group-body--PaddingBlockEnd) * -1);
|
|
14169
|
+
--pf-v6-c-form__field-group-body--TranslateY: 0;
|
|
14170
|
+
--pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY: 0;
|
|
14171
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: 0s;
|
|
14172
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
|
|
14173
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: 0s;
|
|
14174
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
|
|
14175
|
+
}
|
|
14176
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
14177
|
+
.pf-v6-c-form {
|
|
14178
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
|
14179
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
|
14180
|
+
--pf-v6-c-form__field-group-body--TranslateY: -.5rem;
|
|
14181
|
+
}
|
|
14169
14182
|
}
|
|
14170
14183
|
|
|
14171
14184
|
.pf-v6-c-form {
|
|
@@ -14522,6 +14535,16 @@ ul) {
|
|
|
14522
14535
|
.pf-v6-c-form__field-group.pf-m-expanded > .pf-v6-c-form__field-group-toggle {
|
|
14523
14536
|
--pf-v6-c-form__field-group-toggle-icon--Rotate: var(--pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate);
|
|
14524
14537
|
}
|
|
14538
|
+
.pf-v6-c-form__field-group.pf-m-expanded.pf-m-expandable > .pf-v6-c-form__field-group-body {
|
|
14539
|
+
max-height: 9999px;
|
|
14540
|
+
padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
|
|
14541
|
+
padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
|
|
14542
|
+
visibility: visible;
|
|
14543
|
+
opacity: 1;
|
|
14544
|
+
transition-delay: 0s;
|
|
14545
|
+
transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
|
|
14546
|
+
translate: 0 var(--pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY);
|
|
14547
|
+
}
|
|
14525
14548
|
|
|
14526
14549
|
.pf-v6-c-form__field-group-toggle {
|
|
14527
14550
|
grid-row: 1/2;
|
|
@@ -14588,9 +14611,17 @@ ul) {
|
|
|
14588
14611
|
display: grid;
|
|
14589
14612
|
grid-column: var(--pf-v6-c-form__field-group-body--GridColumn);
|
|
14590
14613
|
gap: var(--pf-v6-c-form__field-group-body--Gap);
|
|
14591
|
-
padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
|
|
14592
|
-
padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
|
|
14593
14614
|
}
|
|
14615
|
+
.pf-v6-c-form__field-group.pf-m-expandable > .pf-v6-c-form__field-group-body {
|
|
14616
|
+
max-height: 0;
|
|
14617
|
+
visibility: hidden;
|
|
14618
|
+
opacity: 0;
|
|
14619
|
+
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);
|
|
14620
|
+
transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide), 0s, 0s, 0s, 0s;
|
|
14621
|
+
transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
|
|
14622
|
+
translate: 0 var(--pf-v6-c-form__field-group-body--TranslateY);
|
|
14623
|
+
}
|
|
14624
|
+
|
|
14594
14625
|
.pf-v6-c-form__field-group-body > .pf-v6-c-form__field-group:first-child {
|
|
14595
14626
|
--pf-v6-c-form__field-group-toggle--PaddingBlockStart: 0;
|
|
14596
14627
|
--pf-v6-c-form__field-group-header--PaddingBlockStart: 0;
|
package/patternfly.css
CHANGED
|
@@ -14302,6 +14302,19 @@ ul) {
|
|
|
14302
14302
|
--pf-v6-c-form__field-group__field-group__field-group-body--GridColumn: 1 / 3;
|
|
14303
14303
|
--pf-v6-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn: 2 / 3;
|
|
14304
14304
|
--pf-v6-c-form__field-group-body__field-group--last-child--MarginBlockEnd: calc(var(--pf-v6-c-form__field-group-body--PaddingBlockEnd) * -1);
|
|
14305
|
+
--pf-v6-c-form__field-group-body--TranslateY: 0;
|
|
14306
|
+
--pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY: 0;
|
|
14307
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: 0s;
|
|
14308
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
|
|
14309
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: 0s;
|
|
14310
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
|
|
14311
|
+
}
|
|
14312
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
14313
|
+
.pf-v6-c-form {
|
|
14314
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
|
14315
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
|
14316
|
+
--pf-v6-c-form__field-group-body--TranslateY: -.5rem;
|
|
14317
|
+
}
|
|
14305
14318
|
}
|
|
14306
14319
|
|
|
14307
14320
|
.pf-v6-c-form {
|
|
@@ -14658,6 +14671,16 @@ ul) {
|
|
|
14658
14671
|
.pf-v6-c-form__field-group.pf-m-expanded > .pf-v6-c-form__field-group-toggle {
|
|
14659
14672
|
--pf-v6-c-form__field-group-toggle-icon--Rotate: var(--pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate);
|
|
14660
14673
|
}
|
|
14674
|
+
.pf-v6-c-form__field-group.pf-m-expanded.pf-m-expandable > .pf-v6-c-form__field-group-body {
|
|
14675
|
+
max-height: 9999px;
|
|
14676
|
+
padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
|
|
14677
|
+
padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
|
|
14678
|
+
visibility: visible;
|
|
14679
|
+
opacity: 1;
|
|
14680
|
+
transition-delay: 0s;
|
|
14681
|
+
transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
|
|
14682
|
+
translate: 0 var(--pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY);
|
|
14683
|
+
}
|
|
14661
14684
|
|
|
14662
14685
|
.pf-v6-c-form__field-group-toggle {
|
|
14663
14686
|
grid-row: 1/2;
|
|
@@ -14724,9 +14747,17 @@ ul) {
|
|
|
14724
14747
|
display: grid;
|
|
14725
14748
|
grid-column: var(--pf-v6-c-form__field-group-body--GridColumn);
|
|
14726
14749
|
gap: var(--pf-v6-c-form__field-group-body--Gap);
|
|
14727
|
-
padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
|
|
14728
|
-
padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
|
|
14729
14750
|
}
|
|
14751
|
+
.pf-v6-c-form__field-group.pf-m-expandable > .pf-v6-c-form__field-group-body {
|
|
14752
|
+
max-height: 0;
|
|
14753
|
+
visibility: hidden;
|
|
14754
|
+
opacity: 0;
|
|
14755
|
+
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);
|
|
14756
|
+
transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide), 0s, 0s, 0s, 0s;
|
|
14757
|
+
transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
|
|
14758
|
+
translate: 0 var(--pf-v6-c-form__field-group-body--TranslateY);
|
|
14759
|
+
}
|
|
14760
|
+
|
|
14730
14761
|
.pf-v6-c-form__field-group-body > .pf-v6-c-form__field-group:first-child {
|
|
14731
14762
|
--pf-v6-c-form__field-group-toggle--PaddingBlockStart: 0;
|
|
14732
14763
|
--pf-v6-c-form__field-group-header--PaddingBlockStart: 0;
|