@patternfly/patternfly 6.6.0-prerelease.25 → 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.
Files changed (8) hide show
  1. package/components/FormControl/form-control.css +12 -2
  2. package/components/FormControl/form-control.scss +14 -2
  3. package/components/_index.css +12 -2
  4. package/package.json +1 -1
  5. package/patternfly-no-globals.css +12 -2
  6. package/patternfly.css +12 -2
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/components/FormControl/form-control.css CHANGED
@@ -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);
package/components/FormControl/form-control.scss CHANGED
@@ -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/_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);
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
- "version": "6.6.0-prerelease.25",
4
+ "version": "6.6.0-prerelease.26",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -17755,6 +17755,10 @@ ul) {
17755
17755
  --pf-v6-c-form-control--after--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
17756
17756
  --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
17757
17757
  --pf-v6-c-form-control--Width: 100%;
17758
+ --pf-v6-c-form-control--TransitionDelay: 0s;
17759
+ --pf-v6-c-form-control--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
17760
+ --pf-v6-c-form-control--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
17761
+ --pf-v6-c-form-control--TransitionProperty: color, background-color, border-color;
17758
17762
  --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
17759
17763
  --pf-v6-c-form-control--PaddingBlockStart--base: var(--pf-t--global--spacer--control--vertical--default);
17760
17764
  --pf-v6-c-form-control--PaddingBlockEnd--base: var(--pf-t--global--spacer--control--vertical--default);
@@ -17860,12 +17864,17 @@ ul) {
17860
17864
  resize: var(--pf-v6-c-form-control--Resize);
17861
17865
  background-color: var(--pf-v6-c-form-control--BackgroundColor);
17862
17866
  border-radius: var(--pf-v6-c-form-control--BorderRadius);
17867
+ transition-delay: var(--pf-v6-c-form-control--TransitionDelay);
17868
+ transition-timing-function: var(--pf-v6-c-form-control--TransitionTimingFunction);
17869
+ transition-duration: var(--pf-v6-c-form-control--TransitionDuration);
17870
+ transition-property: var(--pf-v6-c-form-control--TransitionProperty);
17863
17871
  }
17864
17872
  .pf-v6-c-form-control::before, .pf-v6-c-form-control::after {
17865
17873
  position: absolute;
17866
17874
  inset: 0;
17867
17875
  pointer-events: none;
17868
17876
  content: "";
17877
+ transition: inherit;
17869
17878
  }
17870
17879
  .pf-v6-c-form-control::before {
17871
17880
  border-color: var(--pf-v6-c-form-control--before--BorderColor);
@@ -17961,10 +17970,11 @@ ul) {
17961
17970
  --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-disabled--Color);
17962
17971
  --pf-v6-c-form-control--m-placeholder--Color: var(--pf-v6-c-form-control--m-disabled--Color);
17963
17972
  --pf-v6-c-form-control__toggle-icon--Color: var(--pf-v6-c-form-control--m-disabled__toggle-icon--Color);
17964
- --pf-v6-c-form-control--before--BorderStyle: none;
17965
- --pf-v6-c-form-control--after--BorderStyle: none;
17966
17973
  cursor: not-allowed;
17967
17974
  }
17975
+ .pf-v6-c-form-control.pf-m-disabled::before, .pf-v6-c-form-control.pf-m-disabled::after {
17976
+ border-color: transparent;
17977
+ }
17968
17978
  .pf-v6-c-form-control.pf-m-error {
17969
17979
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
17970
17980
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor);
package/patternfly.css CHANGED
@@ -17910,6 +17910,10 @@ ul) {
17910
17910
  --pf-v6-c-form-control--after--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
17911
17911
  --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
17912
17912
  --pf-v6-c-form-control--Width: 100%;
17913
+ --pf-v6-c-form-control--TransitionDelay: 0s;
17914
+ --pf-v6-c-form-control--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
17915
+ --pf-v6-c-form-control--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
17916
+ --pf-v6-c-form-control--TransitionProperty: color, background-color, border-color;
17913
17917
  --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
17914
17918
  --pf-v6-c-form-control--PaddingBlockStart--base: var(--pf-t--global--spacer--control--vertical--default);
17915
17919
  --pf-v6-c-form-control--PaddingBlockEnd--base: var(--pf-t--global--spacer--control--vertical--default);
@@ -18015,12 +18019,17 @@ ul) {
18015
18019
  resize: var(--pf-v6-c-form-control--Resize);
18016
18020
  background-color: var(--pf-v6-c-form-control--BackgroundColor);
18017
18021
  border-radius: var(--pf-v6-c-form-control--BorderRadius);
18022
+ transition-delay: var(--pf-v6-c-form-control--TransitionDelay);
18023
+ transition-timing-function: var(--pf-v6-c-form-control--TransitionTimingFunction);
18024
+ transition-duration: var(--pf-v6-c-form-control--TransitionDuration);
18025
+ transition-property: var(--pf-v6-c-form-control--TransitionProperty);
18018
18026
  }
18019
18027
  .pf-v6-c-form-control::before, .pf-v6-c-form-control::after {
18020
18028
  position: absolute;
18021
18029
  inset: 0;
18022
18030
  pointer-events: none;
18023
18031
  content: "";
18032
+ transition: inherit;
18024
18033
  }
18025
18034
  .pf-v6-c-form-control::before {
18026
18035
  border-color: var(--pf-v6-c-form-control--before--BorderColor);
@@ -18116,10 +18125,11 @@ ul) {
18116
18125
  --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-disabled--Color);
18117
18126
  --pf-v6-c-form-control--m-placeholder--Color: var(--pf-v6-c-form-control--m-disabled--Color);
18118
18127
  --pf-v6-c-form-control__toggle-icon--Color: var(--pf-v6-c-form-control--m-disabled__toggle-icon--Color);
18119
- --pf-v6-c-form-control--before--BorderStyle: none;
18120
- --pf-v6-c-form-control--after--BorderStyle: none;
18121
18128
  cursor: not-allowed;
18122
18129
  }
18130
+ .pf-v6-c-form-control.pf-m-disabled::before, .pf-v6-c-form-control.pf-m-disabled::after {
18131
+ border-color: transparent;
18132
+ }
18123
18133
  .pf-v6-c-form-control.pf-m-error {
18124
18134
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
18125
18135
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor);