@patternfly/patternfly 6.6.0-prerelease.24 → 6.6.0-prerelease.26
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.scss +1 -0
- package/components/FormControl/form-control.css +12 -2
- package/components/FormControl/form-control.scss +14 -2
- package/components/Tabs/tabs.css +19 -5
- package/components/Tabs/tabs.scss +22 -5
- package/components/_index.css +31 -7
- package/docs/components/Button/examples/Button.md +2 -2
- package/docs/components/Form/examples/Form.md +36 -8
- package/docs/components/Tabs/examples/Tabs.md +18 -998
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +46 -34
- package/docs/demos/Alert/examples/Alert.md +32 -14
- package/docs/demos/Button/examples/Button.md +57 -45
- package/docs/demos/Compass/examples/Compass.md +0 -404
- package/docs/demos/Form/examples/BasicForms.md +56 -28
- package/package.json +2 -2
- package/patternfly-no-globals.css +31 -7
- package/patternfly.css +31 -7
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -16,6 +16,10 @@
|
|
|
16
16
|
--pf-v6-c-form-control--after--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
|
|
17
17
|
--pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
|
18
18
|
--pf-v6-c-form-control--Width: 100%;
|
|
19
|
+
--pf-v6-c-form-control--TransitionDelay: 0s;
|
|
20
|
+
--pf-v6-c-form-control--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
|
|
21
|
+
--pf-v6-c-form-control--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
|
|
22
|
+
--pf-v6-c-form-control--TransitionProperty: color, background-color, border-color;
|
|
19
23
|
--pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
|
|
20
24
|
--pf-v6-c-form-control--PaddingBlockStart--base: var(--pf-t--global--spacer--control--vertical--default);
|
|
21
25
|
--pf-v6-c-form-control--PaddingBlockEnd--base: var(--pf-t--global--spacer--control--vertical--default);
|
|
@@ -121,12 +125,17 @@
|
|
|
121
125
|
resize: var(--pf-v6-c-form-control--Resize);
|
|
122
126
|
background-color: var(--pf-v6-c-form-control--BackgroundColor);
|
|
123
127
|
border-radius: var(--pf-v6-c-form-control--BorderRadius);
|
|
128
|
+
transition-delay: var(--pf-v6-c-form-control--TransitionDelay);
|
|
129
|
+
transition-timing-function: var(--pf-v6-c-form-control--TransitionTimingFunction);
|
|
130
|
+
transition-duration: var(--pf-v6-c-form-control--TransitionDuration);
|
|
131
|
+
transition-property: var(--pf-v6-c-form-control--TransitionProperty);
|
|
124
132
|
}
|
|
125
133
|
.pf-v6-c-form-control::before, .pf-v6-c-form-control::after {
|
|
126
134
|
position: absolute;
|
|
127
135
|
inset: 0;
|
|
128
136
|
pointer-events: none;
|
|
129
137
|
content: "";
|
|
138
|
+
transition: inherit;
|
|
130
139
|
}
|
|
131
140
|
.pf-v6-c-form-control::before {
|
|
132
141
|
border-color: var(--pf-v6-c-form-control--before--BorderColor);
|
|
@@ -222,10 +231,11 @@
|
|
|
222
231
|
--pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-disabled--Color);
|
|
223
232
|
--pf-v6-c-form-control--m-placeholder--Color: var(--pf-v6-c-form-control--m-disabled--Color);
|
|
224
233
|
--pf-v6-c-form-control__toggle-icon--Color: var(--pf-v6-c-form-control--m-disabled__toggle-icon--Color);
|
|
225
|
-
--pf-v6-c-form-control--before--BorderStyle: none;
|
|
226
|
-
--pf-v6-c-form-control--after--BorderStyle: none;
|
|
227
234
|
cursor: not-allowed;
|
|
228
235
|
}
|
|
236
|
+
.pf-v6-c-form-control.pf-m-disabled::before, .pf-v6-c-form-control.pf-m-disabled::after {
|
|
237
|
+
border-color: transparent;
|
|
238
|
+
}
|
|
229
239
|
.pf-v6-c-form-control.pf-m-error {
|
|
230
240
|
--pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
|
|
231
241
|
--pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor);
|
|
@@ -18,6 +18,10 @@
|
|
|
18
18
|
--#{$form-control}--after--BorderRadius: var(--#{$form-control}--BorderRadius);
|
|
19
19
|
--#{$form-control}--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
|
20
20
|
--#{$form-control}--Width: 100%;
|
|
21
|
+
--#{$form-control}--TransitionDelay: 0s;
|
|
22
|
+
--#{$form-control}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
|
|
23
|
+
--#{$form-control}--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
|
|
24
|
+
--#{$form-control}--TransitionProperty: color, background-color, border-color;
|
|
21
25
|
|
|
22
26
|
// padding
|
|
23
27
|
--#{$form-control}--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
|
|
@@ -161,6 +165,10 @@
|
|
|
161
165
|
resize: var(--#{$form-control}--Resize);
|
|
162
166
|
background-color: var(--#{$form-control}--BackgroundColor);
|
|
163
167
|
border-radius: var(--#{$form-control}--BorderRadius);
|
|
168
|
+
transition-delay: var(--#{$form-control}--TransitionDelay);
|
|
169
|
+
transition-timing-function: var(--#{$form-control}--TransitionTimingFunction);
|
|
170
|
+
transition-duration: var(--#{$form-control}--TransitionDuration);
|
|
171
|
+
transition-property: var(--#{$form-control}--TransitionProperty);
|
|
164
172
|
|
|
165
173
|
&::before,
|
|
166
174
|
&::after {
|
|
@@ -168,6 +176,7 @@
|
|
|
168
176
|
inset: 0;
|
|
169
177
|
pointer-events: none;
|
|
170
178
|
content: "";
|
|
179
|
+
transition: inherit;
|
|
171
180
|
}
|
|
172
181
|
|
|
173
182
|
&::before {
|
|
@@ -288,10 +297,13 @@
|
|
|
288
297
|
--#{$form-control}--Color: var(--#{$form-control}--m-disabled--Color);
|
|
289
298
|
--#{$form-control}--m-placeholder--Color: var(--#{$form-control}--m-disabled--Color);
|
|
290
299
|
--#{$form-control}__toggle-icon--Color: var(--#{$form-control}--m-disabled__toggle-icon--Color);
|
|
291
|
-
--#{$form-control}--before--BorderStyle: none;
|
|
292
|
-
--#{$form-control}--after--BorderStyle: none;
|
|
293
300
|
|
|
294
301
|
cursor: not-allowed;
|
|
302
|
+
|
|
303
|
+
&::before,
|
|
304
|
+
&::after {
|
|
305
|
+
border-color: transparent;
|
|
306
|
+
}
|
|
295
307
|
}
|
|
296
308
|
|
|
297
309
|
&.pf-m-error {
|
package/components/Tabs/tabs.css
CHANGED
|
@@ -50,10 +50,10 @@
|
|
|
50
50
|
--pf-v6-c-tabs__link--BorderColor: transparent;
|
|
51
51
|
--pf-v6-c-tabs__link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
52
52
|
--pf-v6-c-tabs__link--disabled--BorderColor: transparent;
|
|
53
|
-
--pf-v6-c-tabs__link--PaddingBlockStart: var(--pf-t--global--spacer--
|
|
54
|
-
--pf-v6-c-tabs__link--PaddingInlineEnd: var(--pf-t--global--spacer--
|
|
55
|
-
--pf-v6-c-tabs__link--PaddingBlockEnd: var(--pf-t--global--spacer--
|
|
56
|
-
--pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-t--global--spacer--
|
|
53
|
+
--pf-v6-c-tabs__link--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
|
|
54
|
+
--pf-v6-c-tabs__link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
|
|
55
|
+
--pf-v6-c-tabs__link--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
|
|
56
|
+
--pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
|
|
57
57
|
--pf-v6-c-tabs__link--ColumnGap: var(--pf-t--global--spacer--sm);
|
|
58
58
|
--pf-v6-c-tabs__link--disabled--Color: var(--pf-t--global--text--color--disabled);
|
|
59
59
|
--pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
|
|
@@ -72,9 +72,15 @@
|
|
|
72
72
|
--pf-v6-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor: transparent;
|
|
73
73
|
--pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
74
74
|
--pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
75
|
-
--pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
|
|
76
75
|
--pf-v6-c-tabs__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--short);
|
|
77
76
|
--pf-v6-c-tabs__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
|
|
77
|
+
--pf-v6-c-tabs--m-subtab__link--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) - var(--pf-t--global--spacer--control--vertical--compact) + (var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body) - 1lh) / 2);
|
|
78
|
+
--pf-v6-c-tabs--m-subtab__link--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) - var(--pf-t--global--spacer--control--vertical--compact) + (var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body) - 1lh) / 2);
|
|
79
|
+
--pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
80
|
+
--pf-v6-c-tabs--m-subtab__link--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
|
|
81
|
+
--pf-v6-c-tabs--m-subtab__link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
|
|
82
|
+
--pf-v6-c-tabs--m-subtab__link--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
|
|
83
|
+
--pf-v6-c-tabs--m-subtab__link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
|
|
78
84
|
--pf-v6-c-tabs__link--before--border-color--base: var(--pf-t--global--border--color--default);
|
|
79
85
|
--pf-v6-c-tabs__link--before--border-width--base: var(--pf-t--global--border--width--regular);
|
|
80
86
|
--pf-v6-c-tabs__link--before--BorderBlockStartColor: var(--pf-v6-c-tabs__link--before--border-color--base);
|
|
@@ -441,9 +447,17 @@
|
|
|
441
447
|
}
|
|
442
448
|
.pf-v6-c-tabs.pf-m-subtab {
|
|
443
449
|
--pf-v6-c-tabs__link--FontSize: var(--pf-v6-c-tabs--m-subtab__link--FontSize);
|
|
450
|
+
--pf-v6-c-tabs__link--PaddingBlockStart: var(--pf-v6-c-tabs--m-subtab__link--PaddingBlockStart);
|
|
451
|
+
--pf-v6-c-tabs__link--PaddingBlockEnd: var(--pf-v6-c-tabs--m-subtab__link--PaddingBlockEnd);
|
|
452
|
+
--pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-v6-c-tabs--m-subtab__link--PaddingInlineStart);
|
|
453
|
+
--pf-v6-c-tabs__link--PaddingInlineEnd: var(--pf-v6-c-tabs--m-subtab__link--PaddingInlineEnd);
|
|
444
454
|
--pf-v6-c-tabs__item-action--c-button--FontSize: var(--pf-v6-c-tabs--m-subtab__item-action--c-button--FontSize);
|
|
445
455
|
--pf-v6-c-tabs__add--c-button--FontSize: var(--pf-v6-c-tabs--m-subtab__add--c-button--FontSize);
|
|
446
456
|
}
|
|
457
|
+
.pf-v6-c-tabs.pf-m-subtab .pf-v6-c-tabs__link {
|
|
458
|
+
margin-block-start: var(--pf-v6-c-tabs--m-subtab__link--MarginBlockStart);
|
|
459
|
+
margin-block-end: var(--pf-v6-c-tabs--m-subtab__link--MarginBlockEnd);
|
|
460
|
+
}
|
|
447
461
|
.pf-v6-c-tabs.pf-m-page-insets {
|
|
448
462
|
--pf-v6-c-tabs--inset: var(--pf-v6-c-tabs--m-page-insets--inset);
|
|
449
463
|
}
|
|
@@ -70,10 +70,10 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
|
|
|
70
70
|
--#{$tabs}__link--BorderColor: transparent;
|
|
71
71
|
--#{$tabs}__link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
72
72
|
--#{$tabs}__link--disabled--BorderColor: transparent;
|
|
73
|
-
--#{$tabs}__link--PaddingBlockStart: var(--pf-t--global--spacer--
|
|
74
|
-
--#{$tabs}__link--PaddingInlineEnd: var(--pf-t--global--spacer--
|
|
75
|
-
--#{$tabs}__link--PaddingBlockEnd: var(--pf-t--global--spacer--
|
|
76
|
-
--#{$tabs}__link--PaddingInlineStart: var(--pf-t--global--spacer--
|
|
73
|
+
--#{$tabs}__link--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
|
|
74
|
+
--#{$tabs}__link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
|
|
75
|
+
--#{$tabs}__link--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
|
|
76
|
+
--#{$tabs}__link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
|
|
77
77
|
--#{$tabs}__link--ColumnGap: var(--pf-t--global--spacer--sm);
|
|
78
78
|
--#{$tabs}__link--disabled--Color: var(--pf-t--global--text--color--disabled);
|
|
79
79
|
--#{$tabs}__link--disabled--BackgroundColor: transparent;
|
|
@@ -92,10 +92,18 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
|
|
|
92
92
|
--#{$tabs}--m-box--m-secondary__link--disabled--BackgroundColor: transparent;
|
|
93
93
|
--#{$tabs}--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
94
94
|
--#{$tabs}--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
95
|
-
--#{$tabs}--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
|
|
96
95
|
--#{$tabs}__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--short);
|
|
97
96
|
--#{$tabs}__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
|
|
98
97
|
|
|
98
|
+
// Subtab link
|
|
99
|
+
--#{$tabs}--m-subtab__link--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) - var(--pf-t--global--spacer--control--vertical--compact) + (var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body) - 1lh) / 2);
|
|
100
|
+
--#{$tabs}--m-subtab__link--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) - var(--pf-t--global--spacer--control--vertical--compact) + (var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body) - 1lh) / 2);
|
|
101
|
+
--#{$tabs}--m-subtab__link--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
102
|
+
--#{$tabs}--m-subtab__link--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
|
|
103
|
+
--#{$tabs}--m-subtab__link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
|
|
104
|
+
--#{$tabs}--m-subtab__link--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
|
|
105
|
+
--#{$tabs}--m-subtab__link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
|
|
106
|
+
|
|
99
107
|
// Link before
|
|
100
108
|
--#{$tabs}__link--before--border-color--base: var(--pf-t--global--border--color--default);
|
|
101
109
|
--#{$tabs}__link--before--border-width--base: var(--pf-t--global--border--width--regular);
|
|
@@ -512,8 +520,17 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
|
|
|
512
520
|
|
|
513
521
|
&.pf-m-subtab {
|
|
514
522
|
--#{$tabs}__link--FontSize: var(--#{$tabs}--m-subtab__link--FontSize);
|
|
523
|
+
--#{$tabs}__link--PaddingBlockStart: var(--#{$tabs}--m-subtab__link--PaddingBlockStart);
|
|
524
|
+
--#{$tabs}__link--PaddingBlockEnd: var(--#{$tabs}--m-subtab__link--PaddingBlockEnd);
|
|
525
|
+
--#{$tabs}__link--PaddingInlineStart: var(--#{$tabs}--m-subtab__link--PaddingInlineStart);
|
|
526
|
+
--#{$tabs}__link--PaddingInlineEnd: var(--#{$tabs}--m-subtab__link--PaddingInlineEnd);
|
|
515
527
|
--#{$tabs}__item-action--c-button--FontSize: var(--#{$tabs}--m-subtab__item-action--c-button--FontSize);
|
|
516
528
|
--#{$tabs}__add--c-button--FontSize: var(--#{$tabs}--m-subtab__add--c-button--FontSize);
|
|
529
|
+
|
|
530
|
+
.#{$tabs}__link {
|
|
531
|
+
margin-block-start: var(--#{$tabs}--m-subtab__link--MarginBlockStart);
|
|
532
|
+
margin-block-end: var(--#{$tabs}--m-subtab__link--MarginBlockEnd);
|
|
533
|
+
}
|
|
517
534
|
}
|
|
518
535
|
|
|
519
536
|
&.pf-m-page-insets {
|
package/components/_index.css
CHANGED
|
@@ -8499,6 +8499,10 @@ ul) {
|
|
|
8499
8499
|
--pf-v6-c-form-control--after--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
|
|
8500
8500
|
--pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
|
8501
8501
|
--pf-v6-c-form-control--Width: 100%;
|
|
8502
|
+
--pf-v6-c-form-control--TransitionDelay: 0s;
|
|
8503
|
+
--pf-v6-c-form-control--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
|
|
8504
|
+
--pf-v6-c-form-control--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
|
|
8505
|
+
--pf-v6-c-form-control--TransitionProperty: color, background-color, border-color;
|
|
8502
8506
|
--pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
|
|
8503
8507
|
--pf-v6-c-form-control--PaddingBlockStart--base: var(--pf-t--global--spacer--control--vertical--default);
|
|
8504
8508
|
--pf-v6-c-form-control--PaddingBlockEnd--base: var(--pf-t--global--spacer--control--vertical--default);
|
|
@@ -8604,12 +8608,17 @@ ul) {
|
|
|
8604
8608
|
resize: var(--pf-v6-c-form-control--Resize);
|
|
8605
8609
|
background-color: var(--pf-v6-c-form-control--BackgroundColor);
|
|
8606
8610
|
border-radius: var(--pf-v6-c-form-control--BorderRadius);
|
|
8611
|
+
transition-delay: var(--pf-v6-c-form-control--TransitionDelay);
|
|
8612
|
+
transition-timing-function: var(--pf-v6-c-form-control--TransitionTimingFunction);
|
|
8613
|
+
transition-duration: var(--pf-v6-c-form-control--TransitionDuration);
|
|
8614
|
+
transition-property: var(--pf-v6-c-form-control--TransitionProperty);
|
|
8607
8615
|
}
|
|
8608
8616
|
.pf-v6-c-form-control::before, .pf-v6-c-form-control::after {
|
|
8609
8617
|
position: absolute;
|
|
8610
8618
|
inset: 0;
|
|
8611
8619
|
pointer-events: none;
|
|
8612
8620
|
content: "";
|
|
8621
|
+
transition: inherit;
|
|
8613
8622
|
}
|
|
8614
8623
|
.pf-v6-c-form-control::before {
|
|
8615
8624
|
border-color: var(--pf-v6-c-form-control--before--BorderColor);
|
|
@@ -8705,10 +8714,11 @@ ul) {
|
|
|
8705
8714
|
--pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-disabled--Color);
|
|
8706
8715
|
--pf-v6-c-form-control--m-placeholder--Color: var(--pf-v6-c-form-control--m-disabled--Color);
|
|
8707
8716
|
--pf-v6-c-form-control__toggle-icon--Color: var(--pf-v6-c-form-control--m-disabled__toggle-icon--Color);
|
|
8708
|
-
--pf-v6-c-form-control--before--BorderStyle: none;
|
|
8709
|
-
--pf-v6-c-form-control--after--BorderStyle: none;
|
|
8710
8717
|
cursor: not-allowed;
|
|
8711
8718
|
}
|
|
8719
|
+
.pf-v6-c-form-control.pf-m-disabled::before, .pf-v6-c-form-control.pf-m-disabled::after {
|
|
8720
|
+
border-color: transparent;
|
|
8721
|
+
}
|
|
8712
8722
|
.pf-v6-c-form-control.pf-m-error {
|
|
8713
8723
|
--pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
|
|
8714
8724
|
--pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor);
|
|
@@ -21496,10 +21506,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
21496
21506
|
--pf-v6-c-tabs__link--BorderColor: transparent;
|
|
21497
21507
|
--pf-v6-c-tabs__link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
21498
21508
|
--pf-v6-c-tabs__link--disabled--BorderColor: transparent;
|
|
21499
|
-
--pf-v6-c-tabs__link--PaddingBlockStart: var(--pf-t--global--spacer--
|
|
21500
|
-
--pf-v6-c-tabs__link--PaddingInlineEnd: var(--pf-t--global--spacer--
|
|
21501
|
-
--pf-v6-c-tabs__link--PaddingBlockEnd: var(--pf-t--global--spacer--
|
|
21502
|
-
--pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-t--global--spacer--
|
|
21509
|
+
--pf-v6-c-tabs__link--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
|
|
21510
|
+
--pf-v6-c-tabs__link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
|
|
21511
|
+
--pf-v6-c-tabs__link--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
|
|
21512
|
+
--pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
|
|
21503
21513
|
--pf-v6-c-tabs__link--ColumnGap: var(--pf-t--global--spacer--sm);
|
|
21504
21514
|
--pf-v6-c-tabs__link--disabled--Color: var(--pf-t--global--text--color--disabled);
|
|
21505
21515
|
--pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
|
|
@@ -21518,9 +21528,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
21518
21528
|
--pf-v6-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor: transparent;
|
|
21519
21529
|
--pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
21520
21530
|
--pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
21521
|
-
--pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
|
|
21522
21531
|
--pf-v6-c-tabs__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--short);
|
|
21523
21532
|
--pf-v6-c-tabs__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
|
|
21533
|
+
--pf-v6-c-tabs--m-subtab__link--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) - var(--pf-t--global--spacer--control--vertical--compact) + (var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body) - 1lh) / 2);
|
|
21534
|
+
--pf-v6-c-tabs--m-subtab__link--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) - var(--pf-t--global--spacer--control--vertical--compact) + (var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body) - 1lh) / 2);
|
|
21535
|
+
--pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
21536
|
+
--pf-v6-c-tabs--m-subtab__link--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
|
|
21537
|
+
--pf-v6-c-tabs--m-subtab__link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
|
|
21538
|
+
--pf-v6-c-tabs--m-subtab__link--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
|
|
21539
|
+
--pf-v6-c-tabs--m-subtab__link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
|
|
21524
21540
|
--pf-v6-c-tabs__link--before--border-color--base: var(--pf-t--global--border--color--default);
|
|
21525
21541
|
--pf-v6-c-tabs__link--before--border-width--base: var(--pf-t--global--border--width--regular);
|
|
21526
21542
|
--pf-v6-c-tabs__link--before--BorderBlockStartColor: var(--pf-v6-c-tabs__link--before--border-color--base);
|
|
@@ -21887,9 +21903,17 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
21887
21903
|
}
|
|
21888
21904
|
.pf-v6-c-tabs.pf-m-subtab {
|
|
21889
21905
|
--pf-v6-c-tabs__link--FontSize: var(--pf-v6-c-tabs--m-subtab__link--FontSize);
|
|
21906
|
+
--pf-v6-c-tabs__link--PaddingBlockStart: var(--pf-v6-c-tabs--m-subtab__link--PaddingBlockStart);
|
|
21907
|
+
--pf-v6-c-tabs__link--PaddingBlockEnd: var(--pf-v6-c-tabs--m-subtab__link--PaddingBlockEnd);
|
|
21908
|
+
--pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-v6-c-tabs--m-subtab__link--PaddingInlineStart);
|
|
21909
|
+
--pf-v6-c-tabs__link--PaddingInlineEnd: var(--pf-v6-c-tabs--m-subtab__link--PaddingInlineEnd);
|
|
21890
21910
|
--pf-v6-c-tabs__item-action--c-button--FontSize: var(--pf-v6-c-tabs--m-subtab__item-action--c-button--FontSize);
|
|
21891
21911
|
--pf-v6-c-tabs__add--c-button--FontSize: var(--pf-v6-c-tabs--m-subtab__add--c-button--FontSize);
|
|
21892
21912
|
}
|
|
21913
|
+
.pf-v6-c-tabs.pf-m-subtab .pf-v6-c-tabs__link {
|
|
21914
|
+
margin-block-start: var(--pf-v6-c-tabs--m-subtab__link--MarginBlockStart);
|
|
21915
|
+
margin-block-end: var(--pf-v6-c-tabs--m-subtab__link--MarginBlockEnd);
|
|
21916
|
+
}
|
|
21893
21917
|
.pf-v6-c-tabs.pf-m-page-insets {
|
|
21894
21918
|
--pf-v6-c-tabs--inset: var(--pf-v6-c-tabs--m-page-insets--inset);
|
|
21895
21919
|
}
|
|
@@ -3570,8 +3570,8 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
|
|
|
3570
3570
|
<span class="pf-v6-c-button__text">Submit</span>
|
|
3571
3571
|
</button>
|
|
3572
3572
|
|
|
3573
|
-
<button class="pf-v6-c-button pf-m-primary" type="
|
|
3574
|
-
<span class="pf-v6-c-button__text">
|
|
3573
|
+
<button class="pf-v6-c-button pf-m-primary" type="button">
|
|
3574
|
+
<span class="pf-v6-c-button__text">Cancel</span>
|
|
3575
3575
|
</button>
|
|
3576
3576
|
|
|
3577
3577
|
<button class="pf-v6-c-button pf-m-primary" type="button">
|
|
@@ -613,13 +613,41 @@ cssPrefix: pf-v6-c-form
|
|
|
613
613
|
```html
|
|
614
614
|
<form class="pf-v6-c-form" novalidate>
|
|
615
615
|
<div class="pf-v6-c-form__group pf-m-action">
|
|
616
|
-
<div class="pf-v6-c-
|
|
617
|
-
<
|
|
618
|
-
<
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
616
|
+
<div class="pf-v6-c-form__group-control">
|
|
617
|
+
<div class="pf-v6-c-action-list">
|
|
618
|
+
<div class="pf-v6-c-action-list__group">
|
|
619
|
+
<div class="pf-v6-c-action-list__item">
|
|
620
|
+
<button class="pf-v6-c-button pf-m-primary" type="submit">
|
|
621
|
+
<span class="pf-v6-c-button__text">Submit</span>
|
|
622
|
+
</button>
|
|
623
|
+
</div>
|
|
624
|
+
<div class="pf-v6-c-action-list__item">
|
|
625
|
+
<button class="pf-v6-c-button pf-m-link" type="button">
|
|
626
|
+
<span class="pf-v6-c-button__text">Cancel</span>
|
|
627
|
+
</button>
|
|
628
|
+
</div>
|
|
629
|
+
</div>
|
|
630
|
+
</div>
|
|
631
|
+
</div>
|
|
632
|
+
</div>
|
|
633
|
+
</form>
|
|
634
|
+
|
|
635
|
+
```
|
|
636
|
+
|
|
637
|
+
### Action group (deprecated)
|
|
638
|
+
|
|
639
|
+
```html isDeprecated
|
|
640
|
+
<form class="pf-v6-c-form" novalidate>
|
|
641
|
+
<div class="pf-v6-c-form__group pf-m-action">
|
|
642
|
+
<div class="pf-v6-c-form__group-control">
|
|
643
|
+
<div class="pf-v6-c-form__actions">
|
|
644
|
+
<button class="pf-v6-c-button pf-m-primary" type="submit">
|
|
645
|
+
<span class="pf-v6-c-button__text">Submit</span>
|
|
646
|
+
</button>
|
|
647
|
+
<button class="pf-v6-c-button pf-m-link" type="button">
|
|
648
|
+
<span class="pf-v6-c-button__text">Cancel</span>
|
|
649
|
+
</button>
|
|
650
|
+
</div>
|
|
623
651
|
</div>
|
|
624
652
|
</div>
|
|
625
653
|
</form>
|
|
@@ -2062,7 +2090,7 @@ To avoid the form label's required indicator or help tooltip icon from wrapping
|
|
|
2062
2090
|
| `.pf-v6-c-form__group-label-info` | `<div>` | Initiates a form group info label. |
|
|
2063
2091
|
| `.pf-v6-c-form__group-label-help` | `<span>` | Initiates field level help. |
|
|
2064
2092
|
| `.pf-v6-c-form__group-control` | `<div>` | Initiates a form group control section. |
|
|
2065
|
-
| `.pf-v6-c-form__actions` | `<div>` |
|
|
2093
|
+
| `.pf-v6-c-form__actions` | `<div>` | Initiates a row of actions. **Deprecated:** Use [Action list](/components/action-list) instead. **Note:** `.pf-v6-c-form__actions` will be removed in a future release. |
|
|
2066
2094
|
| `.pf-v6-c-form__helper-text` | `<p>`, `<div>` | Initiates a form helper text block. |
|
|
2067
2095
|
| `.pf-v6-c-form__alert` | `<div>` | Initiates the form alert container for inline alerts. |
|
|
2068
2096
|
| `.pf-v6-c-form__field-group` | `<div>` | Initiates a form field group. |
|