@patternfly/patternfly 6.0.0-alpha.145 → 6.0.0-alpha.146

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/Button/button.css +7 -3
  2. package/components/Button/button.scss +8 -5
  3. package/components/_index.css +7 -3
  4. package/package.json +1 -1
  5. package/patternfly-no-globals.css +7 -3
  6. package/patternfly.css +7 -3
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/components/Button/button.css CHANGED
@@ -13,6 +13,9 @@
13
13
  --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--button--default);
14
14
  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
15
15
  --pf-v6-c-button--TextDecoration: none;
16
+ --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
17
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
18
+ --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
16
19
  --pf-v6-c-button--hover--BackgroundColor: transparent;
17
20
  --pf-v6-c-button--hover--BorderColor: transparent;
18
21
  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
@@ -205,8 +208,6 @@
205
208
  --pf-v6-c-button__progress--InsetBlockStart: 50%;
206
209
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--md);
207
210
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
208
- --pf-v6-c-button--m-progress--TransitionProperty: padding;
209
- --pf-v6-c-button--m-progress--TransitionDuration: var(--pf-t--global--transition--duration);
210
211
  --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
211
212
  --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
212
213
  --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -246,6 +247,9 @@
246
247
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
247
248
  border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
248
249
  border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
250
+ transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
251
+ transition-duration: var(--pf-v6-c-button--TransitionDuration);
252
+ transition-property: var(--pf-v6-c-button--TransitionProperty);
249
253
  }
250
254
  .pf-v6-c-button::after {
251
255
  position: absolute;
@@ -255,6 +259,7 @@
255
259
  border: var(--pf-v6-c-button--BorderWidth) solid;
256
260
  border-color: var(--pf-v6-c-button--BorderColor);
257
261
  border-radius: inherit;
262
+ transition: inherit;
258
263
  }
259
264
  .pf-v6-c-button.pf-m-primary {
260
265
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-primary--Color);
@@ -518,7 +523,6 @@
518
523
  .pf-v6-c-button.pf-m-progress {
519
524
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
520
525
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
521
- transition: var(--pf-v6-c-button--m-progress--TransitionProperty) var(--pf-v6-c-button--m-progress--TransitionDuration);
522
526
  }
523
527
  .pf-v6-c-button.pf-m-in-progress {
524
528
  --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
package/components/Button/button.scss CHANGED
@@ -15,13 +15,16 @@
15
15
  --#{$button}--BorderWidth: var(--pf-t--global--border--width--button--default);
16
16
  --#{$button}--BorderRadius: var(--pf-t--global--border--radius--pill);
17
17
  --#{$button}--TextDecoration: none;
18
+ --#{$button}--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
19
+ --#{$button}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
20
+ --#{$button}--TransitionProperty: color, background-color, border-width, border-color, padding;
18
21
 
19
22
  // Hover
20
23
  --#{$button}--hover--BackgroundColor: transparent;
21
24
  --#{$button}--hover--BorderColor: transparent;
22
25
  --#{$button}--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
23
26
  --#{$button}--hover--TextDecoration: none;
24
-
27
+
25
28
  // Clicked
26
29
  --#{$button}--m-clicked--BackgroundColor: transparent;
27
30
  --#{$button}--m-clicked--BorderColor: transparent;
@@ -251,8 +254,6 @@
251
254
  --#{$button}__progress--InsetBlockStart: 50%;
252
255
  --#{$button}__progress--InsetInlineStart: var(--pf-t--global--spacer--md);
253
256
  --#{$button}__progress--Color: var(--#{$button}__icon--Color);
254
- --#{$button}--m-progress--TransitionProperty: padding;
255
- --#{$button}--m-progress--TransitionDuration: var(--pf-t--global--transition--duration);
256
257
  --#{$button}--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--md) + var(--#{$button}__progress--width) / 2);
257
258
  --#{$button}--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--md) + var(--#{$button}__progress--width) / 2);
258
259
  --#{$button}--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -294,6 +295,9 @@
294
295
  border-start-end-radius: var(--#{$button}--BorderStartEndRadius, var(--#{$button}--BorderRadius));
295
296
  border-end-start-radius: var(--#{$button}--BorderEndStartRadius, var(--#{$button}--BorderRadius));
296
297
  border-end-end-radius: var(--#{$button}--BorderEndEndRadius, var(--#{$button}--BorderRadius));
298
+ transition-timing-function: var(--#{$button}--TransitionTimingFunction);
299
+ transition-duration: var(--#{$button}--TransitionDuration);
300
+ transition-property: var(--#{$button}--TransitionProperty);
297
301
 
298
302
  &::after {
299
303
  position: absolute;
@@ -303,6 +307,7 @@
303
307
  border: var(--#{$button}--BorderWidth) solid;
304
308
  border-color: var(--#{$button}--BorderColor);
305
309
  border-radius: inherit;
310
+ transition: inherit;
306
311
  }
307
312
 
308
313
  // Primary
@@ -618,8 +623,6 @@
618
623
  &.pf-m-progress {
619
624
  --#{$button}--PaddingInlineEnd: var(--#{$button}--m-progress--PaddingInlineEnd);
620
625
  --#{$button}--PaddingInlineStart: var(--#{$button}--m-progress--PaddingInlineStart);
621
-
622
- transition: var(--#{$button}--m-progress--TransitionProperty) var(--#{$button}--m-progress--TransitionDuration);
623
626
  }
624
627
 
625
628
  &.pf-m-in-progress {
package/components/_index.css CHANGED
@@ -1353,6 +1353,9 @@ button.pf-v6-c-breadcrumb__link {
1353
1353
  --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--button--default);
1354
1354
  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
1355
1355
  --pf-v6-c-button--TextDecoration: none;
1356
+ --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
1357
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
1358
+ --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
1356
1359
  --pf-v6-c-button--hover--BackgroundColor: transparent;
1357
1360
  --pf-v6-c-button--hover--BorderColor: transparent;
1358
1361
  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
@@ -1545,8 +1548,6 @@ button.pf-v6-c-breadcrumb__link {
1545
1548
  --pf-v6-c-button__progress--InsetBlockStart: 50%;
1546
1549
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--md);
1547
1550
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
1548
- --pf-v6-c-button--m-progress--TransitionProperty: padding;
1549
- --pf-v6-c-button--m-progress--TransitionDuration: var(--pf-t--global--transition--duration);
1550
1551
  --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
1551
1552
  --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
1552
1553
  --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -1586,6 +1587,9 @@ button.pf-v6-c-breadcrumb__link {
1586
1587
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
1587
1588
  border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
1588
1589
  border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
1590
+ transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
1591
+ transition-duration: var(--pf-v6-c-button--TransitionDuration);
1592
+ transition-property: var(--pf-v6-c-button--TransitionProperty);
1589
1593
  }
1590
1594
  .pf-v6-c-button::after {
1591
1595
  position: absolute;
@@ -1595,6 +1599,7 @@ button.pf-v6-c-breadcrumb__link {
1595
1599
  border: var(--pf-v6-c-button--BorderWidth) solid;
1596
1600
  border-color: var(--pf-v6-c-button--BorderColor);
1597
1601
  border-radius: inherit;
1602
+ transition: inherit;
1598
1603
  }
1599
1604
  .pf-v6-c-button.pf-m-primary {
1600
1605
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-primary--Color);
@@ -1858,7 +1863,6 @@ button.pf-v6-c-breadcrumb__link {
1858
1863
  .pf-v6-c-button.pf-m-progress {
1859
1864
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
1860
1865
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
1861
- transition: var(--pf-v6-c-button--m-progress--TransitionProperty) var(--pf-v6-c-button--m-progress--TransitionDuration);
1862
1866
  }
1863
1867
  .pf-v6-c-button.pf-m-in-progress {
1864
1868
  --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
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": "6.0.0-alpha.145",
4
+ "version": "6.0.0-alpha.146",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -7373,6 +7373,9 @@ button.pf-v6-c-breadcrumb__link {
7373
7373
  --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--button--default);
7374
7374
  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
7375
7375
  --pf-v6-c-button--TextDecoration: none;
7376
+ --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
7377
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
7378
+ --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
7376
7379
  --pf-v6-c-button--hover--BackgroundColor: transparent;
7377
7380
  --pf-v6-c-button--hover--BorderColor: transparent;
7378
7381
  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
@@ -7565,8 +7568,6 @@ button.pf-v6-c-breadcrumb__link {
7565
7568
  --pf-v6-c-button__progress--InsetBlockStart: 50%;
7566
7569
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--md);
7567
7570
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
7568
- --pf-v6-c-button--m-progress--TransitionProperty: padding;
7569
- --pf-v6-c-button--m-progress--TransitionDuration: var(--pf-t--global--transition--duration);
7570
7571
  --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
7571
7572
  --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
7572
7573
  --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -7606,6 +7607,9 @@ button.pf-v6-c-breadcrumb__link {
7606
7607
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
7607
7608
  border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
7608
7609
  border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
7610
+ transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
7611
+ transition-duration: var(--pf-v6-c-button--TransitionDuration);
7612
+ transition-property: var(--pf-v6-c-button--TransitionProperty);
7609
7613
  }
7610
7614
  .pf-v6-c-button::after {
7611
7615
  position: absolute;
@@ -7615,6 +7619,7 @@ button.pf-v6-c-breadcrumb__link {
7615
7619
  border: var(--pf-v6-c-button--BorderWidth) solid;
7616
7620
  border-color: var(--pf-v6-c-button--BorderColor);
7617
7621
  border-radius: inherit;
7622
+ transition: inherit;
7618
7623
  }
7619
7624
  .pf-v6-c-button.pf-m-primary {
7620
7625
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-primary--Color);
@@ -7878,7 +7883,6 @@ button.pf-v6-c-breadcrumb__link {
7878
7883
  .pf-v6-c-button.pf-m-progress {
7879
7884
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
7880
7885
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
7881
- transition: var(--pf-v6-c-button--m-progress--TransitionProperty) var(--pf-v6-c-button--m-progress--TransitionDuration);
7882
7886
  }
7883
7887
  .pf-v6-c-button.pf-m-in-progress {
7884
7888
  --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
package/patternfly.css CHANGED
@@ -7490,6 +7490,9 @@ button.pf-v6-c-breadcrumb__link {
7490
7490
  --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--button--default);
7491
7491
  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
7492
7492
  --pf-v6-c-button--TextDecoration: none;
7493
+ --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
7494
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
7495
+ --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
7493
7496
  --pf-v6-c-button--hover--BackgroundColor: transparent;
7494
7497
  --pf-v6-c-button--hover--BorderColor: transparent;
7495
7498
  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
@@ -7682,8 +7685,6 @@ button.pf-v6-c-breadcrumb__link {
7682
7685
  --pf-v6-c-button__progress--InsetBlockStart: 50%;
7683
7686
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--md);
7684
7687
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
7685
- --pf-v6-c-button--m-progress--TransitionProperty: padding;
7686
- --pf-v6-c-button--m-progress--TransitionDuration: var(--pf-t--global--transition--duration);
7687
7688
  --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
7688
7689
  --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
7689
7690
  --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -7723,6 +7724,9 @@ button.pf-v6-c-breadcrumb__link {
7723
7724
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
7724
7725
  border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
7725
7726
  border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
7727
+ transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
7728
+ transition-duration: var(--pf-v6-c-button--TransitionDuration);
7729
+ transition-property: var(--pf-v6-c-button--TransitionProperty);
7726
7730
  }
7727
7731
  .pf-v6-c-button::after {
7728
7732
  position: absolute;
@@ -7732,6 +7736,7 @@ button.pf-v6-c-breadcrumb__link {
7732
7736
  border: var(--pf-v6-c-button--BorderWidth) solid;
7733
7737
  border-color: var(--pf-v6-c-button--BorderColor);
7734
7738
  border-radius: inherit;
7739
+ transition: inherit;
7735
7740
  }
7736
7741
  .pf-v6-c-button.pf-m-primary {
7737
7742
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-primary--Color);
@@ -7995,7 +8000,6 @@ button.pf-v6-c-breadcrumb__link {
7995
8000
  .pf-v6-c-button.pf-m-progress {
7996
8001
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
7997
8002
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
7998
- transition: var(--pf-v6-c-button--m-progress--TransitionProperty) var(--pf-v6-c-button--m-progress--TransitionDuration);
7999
8003
  }
8000
8004
  .pf-v6-c-button.pf-m-in-progress {
8001
8005
  --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);