@patternfly/patternfly 6.0.0-alpha.156 → 6.0.0-alpha.157

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/Menu/menu.css +11 -0
  2. package/components/Menu/menu.scss +13 -0
  3. package/components/_index.css +11 -0
  4. package/package.json +1 -1
  5. package/patternfly-no-globals.css +11 -0
  6. package/patternfly.css +11 -0
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/components/Menu/menu.css CHANGED
@@ -12,6 +12,8 @@
12
12
  --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
13
13
  --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
14
14
  --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
15
+ --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
16
+ --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
15
17
  --pf-v6-c-menu--m-plain--BoxShadow: none;
16
18
  --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
17
19
  --pf-v6-c-menu__content--Height: auto;
@@ -25,6 +27,9 @@
25
27
  --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
26
28
  --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);
27
29
  --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
30
+ --pf-v6-c-menu__list-item--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
31
+ --pf-v6-c-menu__list-item--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
32
+ --pf-v6-c-menu__list-item--TransitionProperty: background-color;
28
33
  --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
29
34
  --pf-v6-c-menu__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
30
35
  --pf-v6-c-menu__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default);
@@ -195,6 +200,8 @@
195
200
  background-color: var(--pf-v6-c-menu--BackgroundColor);
196
201
  border-radius: var(--pf-v6-c-menu--BorderRadius);
197
202
  box-shadow: var(--pf-v6-c-menu--BoxShadow);
203
+ transition-timing-function: var(--pf-v6-c-menu--TransitionTimingFunction) !important;
204
+ transition-duration: var(--pf-v6-c-menu--TransitionDuration) !important;
198
205
  }
199
206
  .pf-v6-c-menu .pf-v6-c-menu {
200
207
  min-width: 100%;
@@ -366,6 +373,9 @@
366
373
  .pf-v6-c-menu__list-item {
367
374
  align-items: baseline;
368
375
  min-width: 0;
376
+ transition-timing-function: var(--pf-v6-c-menu__list-item--TransitionTimingFunction);
377
+ transition-duration: var(--pf-v6-c-menu__list-item--TransitionDuration);
378
+ transition-property: var(--pf-v6-c-menu__list-item--TransitionProperty);
369
379
  }
370
380
  .pf-v6-c-menu__list-item > * {
371
381
  position: relative;
@@ -375,6 +385,7 @@
375
385
  inset: 0;
376
386
  content: "";
377
387
  background-color: var(--pf-v6-c-menu__list-item--BackgroundColor);
388
+ transition: inherit;
378
389
  }
379
390
  .pf-v6-c-menu__list-item.pf-m-load {
380
391
  --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-load__item--Color);
package/components/Menu/menu.scss CHANGED
@@ -15,6 +15,8 @@
15
15
  --#{$menu}--ZIndex: var(--pf-t--global--z-index--sm);
16
16
  --#{$menu}--button--disabled--Color: var(--pf-t--global--text--color--disabled);
17
17
  --#{$menu}--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
18
+ --#{$menu}--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
19
+ --#{$menu}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
18
20
 
19
21
  // * Menu plain
20
22
  --#{$menu}--m-plain--BoxShadow: none;
@@ -38,6 +40,9 @@
38
40
  // * Menu list item
39
41
  --#{$menu}__list-item--Color: var(--pf-t--global--text--color--regular);
40
42
  --#{$menu}__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
43
+ --#{$menu}__list-item--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
44
+ --#{$menu}__list-item--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
45
+ --#{$menu}__list-item--TransitionProperty: background-color;
41
46
  --#{$menu}__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
42
47
  --#{$menu}__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
43
48
  --#{$menu}__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default);
@@ -200,6 +205,10 @@
200
205
  background-color: var(--#{$menu}--BackgroundColor);
201
206
  border-radius: var(--#{$menu}--BorderRadius);
202
207
  box-shadow: var(--#{$menu}--BoxShadow);
208
+ // stylelint-disable declaration-no-important
209
+ transition-timing-function: var(--#{$menu}--TransitionTimingFunction) !important; // Note that this timing function is overriding the default that Popper is using
210
+ transition-duration: var(--#{$menu}--TransitionDuration) !important; // Note that this duration is overriding whatever value is supplied as a prop to Popper
211
+ // stylelint-enable declaration-no-important
203
212
 
204
213
  .#{$menu} {
205
214
  min-width: 100%;
@@ -437,6 +446,9 @@
437
446
  .#{$menu}__list-item {
438
447
  align-items: baseline;
439
448
  min-width: 0; // allow list item to shrink for text overflow
449
+ transition-timing-function: var(--#{$menu}__list-item--TransitionTimingFunction);
450
+ transition-duration: var(--#{$menu}__list-item--TransitionDuration);
451
+ transition-property: var(--#{$menu}__list-item--TransitionProperty);
440
452
 
441
453
  > * {
442
454
  position: relative;
@@ -447,6 +459,7 @@
447
459
  inset: 0;
448
460
  content: "";
449
461
  background-color: var(--#{$menu}__list-item--BackgroundColor);
462
+ transition: inherit;
450
463
  }
451
464
 
452
465
  // - Menu item load
package/components/_index.css CHANGED
@@ -9394,6 +9394,8 @@ ul.pf-v6-c-list {
9394
9394
  --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
9395
9395
  --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
9396
9396
  --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
9397
+ --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
9398
+ --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
9397
9399
  --pf-v6-c-menu--m-plain--BoxShadow: none;
9398
9400
  --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
9399
9401
  --pf-v6-c-menu__content--Height: auto;
@@ -9407,6 +9409,9 @@ ul.pf-v6-c-list {
9407
9409
  --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
9408
9410
  --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);
9409
9411
  --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
9412
+ --pf-v6-c-menu__list-item--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
9413
+ --pf-v6-c-menu__list-item--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
9414
+ --pf-v6-c-menu__list-item--TransitionProperty: background-color;
9410
9415
  --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
9411
9416
  --pf-v6-c-menu__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
9412
9417
  --pf-v6-c-menu__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default);
@@ -9577,6 +9582,8 @@ ul.pf-v6-c-list {
9577
9582
  background-color: var(--pf-v6-c-menu--BackgroundColor);
9578
9583
  border-radius: var(--pf-v6-c-menu--BorderRadius);
9579
9584
  box-shadow: var(--pf-v6-c-menu--BoxShadow);
9585
+ transition-timing-function: var(--pf-v6-c-menu--TransitionTimingFunction) !important;
9586
+ transition-duration: var(--pf-v6-c-menu--TransitionDuration) !important;
9580
9587
  }
9581
9588
  .pf-v6-c-menu .pf-v6-c-menu {
9582
9589
  min-width: 100%;
@@ -9748,6 +9755,9 @@ ul.pf-v6-c-list {
9748
9755
  .pf-v6-c-menu__list-item {
9749
9756
  align-items: baseline;
9750
9757
  min-width: 0;
9758
+ transition-timing-function: var(--pf-v6-c-menu__list-item--TransitionTimingFunction);
9759
+ transition-duration: var(--pf-v6-c-menu__list-item--TransitionDuration);
9760
+ transition-property: var(--pf-v6-c-menu__list-item--TransitionProperty);
9751
9761
  }
9752
9762
  .pf-v6-c-menu__list-item > * {
9753
9763
  position: relative;
@@ -9757,6 +9767,7 @@ ul.pf-v6-c-list {
9757
9767
  inset: 0;
9758
9768
  content: "";
9759
9769
  background-color: var(--pf-v6-c-menu__list-item--BackgroundColor);
9770
+ transition: inherit;
9760
9771
  }
9761
9772
  .pf-v6-c-menu__list-item.pf-m-load {
9762
9773
  --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-load__item--Color);
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.156",
4
+ "version": "6.0.0-alpha.157",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -15414,6 +15414,8 @@ ul.pf-v6-c-list {
15414
15414
  --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
15415
15415
  --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
15416
15416
  --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
15417
+ --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
15418
+ --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
15417
15419
  --pf-v6-c-menu--m-plain--BoxShadow: none;
15418
15420
  --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
15419
15421
  --pf-v6-c-menu__content--Height: auto;
@@ -15427,6 +15429,9 @@ ul.pf-v6-c-list {
15427
15429
  --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
15428
15430
  --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);
15429
15431
  --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
15432
+ --pf-v6-c-menu__list-item--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
15433
+ --pf-v6-c-menu__list-item--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
15434
+ --pf-v6-c-menu__list-item--TransitionProperty: background-color;
15430
15435
  --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
15431
15436
  --pf-v6-c-menu__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
15432
15437
  --pf-v6-c-menu__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default);
@@ -15597,6 +15602,8 @@ ul.pf-v6-c-list {
15597
15602
  background-color: var(--pf-v6-c-menu--BackgroundColor);
15598
15603
  border-radius: var(--pf-v6-c-menu--BorderRadius);
15599
15604
  box-shadow: var(--pf-v6-c-menu--BoxShadow);
15605
+ transition-timing-function: var(--pf-v6-c-menu--TransitionTimingFunction) !important;
15606
+ transition-duration: var(--pf-v6-c-menu--TransitionDuration) !important;
15600
15607
  }
15601
15608
  .pf-v6-c-menu .pf-v6-c-menu {
15602
15609
  min-width: 100%;
@@ -15768,6 +15775,9 @@ ul.pf-v6-c-list {
15768
15775
  .pf-v6-c-menu__list-item {
15769
15776
  align-items: baseline;
15770
15777
  min-width: 0;
15778
+ transition-timing-function: var(--pf-v6-c-menu__list-item--TransitionTimingFunction);
15779
+ transition-duration: var(--pf-v6-c-menu__list-item--TransitionDuration);
15780
+ transition-property: var(--pf-v6-c-menu__list-item--TransitionProperty);
15771
15781
  }
15772
15782
  .pf-v6-c-menu__list-item > * {
15773
15783
  position: relative;
@@ -15777,6 +15787,7 @@ ul.pf-v6-c-list {
15777
15787
  inset: 0;
15778
15788
  content: "";
15779
15789
  background-color: var(--pf-v6-c-menu__list-item--BackgroundColor);
15790
+ transition: inherit;
15780
15791
  }
15781
15792
  .pf-v6-c-menu__list-item.pf-m-load {
15782
15793
  --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-load__item--Color);
package/patternfly.css CHANGED
@@ -15535,6 +15535,8 @@ ul.pf-v6-c-list {
15535
15535
  --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
15536
15536
  --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
15537
15537
  --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
15538
+ --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
15539
+ --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
15538
15540
  --pf-v6-c-menu--m-plain--BoxShadow: none;
15539
15541
  --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
15540
15542
  --pf-v6-c-menu__content--Height: auto;
@@ -15548,6 +15550,9 @@ ul.pf-v6-c-list {
15548
15550
  --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
15549
15551
  --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);
15550
15552
  --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
15553
+ --pf-v6-c-menu__list-item--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
15554
+ --pf-v6-c-menu__list-item--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
15555
+ --pf-v6-c-menu__list-item--TransitionProperty: background-color;
15551
15556
  --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
15552
15557
  --pf-v6-c-menu__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
15553
15558
  --pf-v6-c-menu__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default);
@@ -15718,6 +15723,8 @@ ul.pf-v6-c-list {
15718
15723
  background-color: var(--pf-v6-c-menu--BackgroundColor);
15719
15724
  border-radius: var(--pf-v6-c-menu--BorderRadius);
15720
15725
  box-shadow: var(--pf-v6-c-menu--BoxShadow);
15726
+ transition-timing-function: var(--pf-v6-c-menu--TransitionTimingFunction) !important;
15727
+ transition-duration: var(--pf-v6-c-menu--TransitionDuration) !important;
15721
15728
  }
15722
15729
  .pf-v6-c-menu .pf-v6-c-menu {
15723
15730
  min-width: 100%;
@@ -15889,6 +15896,9 @@ ul.pf-v6-c-list {
15889
15896
  .pf-v6-c-menu__list-item {
15890
15897
  align-items: baseline;
15891
15898
  min-width: 0;
15899
+ transition-timing-function: var(--pf-v6-c-menu__list-item--TransitionTimingFunction);
15900
+ transition-duration: var(--pf-v6-c-menu__list-item--TransitionDuration);
15901
+ transition-property: var(--pf-v6-c-menu__list-item--TransitionProperty);
15892
15902
  }
15893
15903
  .pf-v6-c-menu__list-item > * {
15894
15904
  position: relative;
@@ -15898,6 +15908,7 @@ ul.pf-v6-c-list {
15898
15908
  inset: 0;
15899
15909
  content: "";
15900
15910
  background-color: var(--pf-v6-c-menu__list-item--BackgroundColor);
15911
+ transition: inherit;
15901
15912
  }
15902
15913
  .pf-v6-c-menu__list-item.pf-m-load {
15903
15914
  --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-load__item--Color);