@patternfly/patternfly 6.2.0-prerelease.19 → 6.2.0-prerelease.20

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 (17) hide show
  1. package/components/Button/button.css +25 -0
  2. package/components/Button/button.scss +34 -0
  3. package/components/Menu/menu.css +4 -4
  4. package/components/Menu/menu.scss +2 -1
  5. package/components/Switch/switch.css +3 -1
  6. package/components/Switch/switch.scss +4 -2
  7. package/components/Table/table.css +3 -3
  8. package/components/Table/table.scss +3 -2
  9. package/components/_index.css +35 -8
  10. package/docs/components/Button/examples/Button.md +29 -0
  11. package/docs/components/Menu/examples/Menu.md +6 -6
  12. package/docs/components/Table/examples/Table.md +14 -26
  13. package/package.json +2 -2
  14. package/patternfly-no-globals.css +35 -8
  15. package/patternfly.css +35 -8
  16. package/patternfly.min.css +1 -1
  17. package/patternfly.min.css.map +1 -1
package/patternfly.css CHANGED
@@ -9271,6 +9271,12 @@ button.pf-v6-c-breadcrumb__link {
9271
9271
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
9272
9272
  --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
9273
9273
  --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
9274
+ --pf-v6-c-button--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
9275
+ --pf-v6-c-button--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
9276
+ --pf-v6-c-button--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default);
9277
+ --pf-v6-c-button--m-favorited--hover__icon--Color: var(--pf-t--global--color--favorite--hover);
9278
+ --pf-v6-c-button--m-favorited__icon--AnimationDuration: var(--pf-t--global--motion--duration--icon--long);
9279
+ --pf-v6-c-button--m-favorited__icon--AnimationTimingFunction: var(--pf-t--global--motion--timing-function--default);
9274
9280
  --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
9275
9281
  --pf-v6-c-button__progress--Opacity: 0;
9276
9282
  --pf-v6-c-button__progress--TranslateY: -50%;
@@ -9580,6 +9586,20 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9580
9586
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-display-lg--PaddingInlineStart);
9581
9587
  --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-display-lg--FontSize);
9582
9588
  }
9589
+ .pf-v6-c-button.pf-m-favorite .pf-v6-c-button__icon {
9590
+ transition-timing-function: var(--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction);
9591
+ transition-duration: var(--pf-v6-c-button--m-favorite__icon--TransitionDuration);
9592
+ transition-property: color;
9593
+ }
9594
+ .pf-v6-c-button.pf-m-favorited {
9595
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
9596
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
9597
+ }
9598
+ .pf-v6-c-button.pf-m-favorited .pf-v6-c-button__icon {
9599
+ animation-name: pf-v6-c-button-icon-favorited;
9600
+ animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
9601
+ animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
9602
+ }
9583
9603
  .pf-v6-c-button:hover, .pf-v6-c-button:focus {
9584
9604
  --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
9585
9605
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
@@ -9678,6 +9698,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9678
9698
  transform: rotate(-60deg);
9679
9699
  }
9680
9700
  }
9701
+ @keyframes pf-v6-c-button-icon-favorited {
9702
+ 50% {
9703
+ transform: scale(1.5);
9704
+ }
9705
+ }
9681
9706
  .pf-v6-c-calendar-month {
9682
9707
  --pf-v6-c-calendar-month--BackgroundColor: var(--pf-t--global--background--color--primary--default);
9683
9708
  --pf-v6-c-calendar-month--PaddingBlockStart: var(--pf-t--global--spacer--lg);
@@ -17648,16 +17673,16 @@ ul.pf-v6-c-list {
17648
17673
  opacity: 0;
17649
17674
  }
17650
17675
 
17651
- .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button,
17676
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited),
17652
17677
  .pf-v6-c-menu__item-action.pf-m-favorited,
17653
17678
  .pf-v6-c-menu__item-action.pf-m-favorited:hover,
17654
- .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button {
17679
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
17655
17680
  --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
17656
17681
  }
17657
- .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:is(:hover, :focus),
17682
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus),
17658
17683
  .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
17659
17684
  .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
17660
- .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
17685
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
17661
17686
  --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
17662
17687
  }
17663
17688
 
@@ -22313,7 +22338,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
22313
22338
  --pf-v6-c-switch__toggle--before--Height: var(--pf-v6-c-switch__toggle--before--Width);
22314
22339
  --pf-v6-c-switch__toggle--before--InsetInlineStart: calc((var(--pf-v6-c-switch__toggle--Height) - var(--pf-v6-c-switch__toggle--before--Height)) / 2);
22315
22340
  --pf-v6-c-switch__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
22316
- --pf-v6-c-switch__toggle--before--Transition: transform .25s ease 0s;
22341
+ --pf-v6-c-switch__toggle--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
22342
+ --pf-v6-c-switch__toggle--before--TransitionDuration: var(--pf-t--global--motion--duration--md);
22343
+ --pf-v6-c-switch__toggle--before--Transition: transform var(--pf-v6-c-switch__toggle--before--TransitionTimingFunction) var(--pf-v6-c-switch__toggle--before--TransitionDuration), background-color var(--pf-v6-c-switch__toggle--before--TransitionTimingFunction) var(--pf-v6-c-switch__toggle--before--TransitionDuration);
22317
22344
  --pf-v6-c-switch__toggle--Width: calc(var(--pf-v6-c-switch__toggle--Height) + var(--pf-v6-c-switch__toggle-icon--Offset) + var(--pf-v6-c-switch__toggle--before--Width));
22318
22345
  }
22319
22346
 
@@ -24628,13 +24655,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
24628
24655
  vertical-align: baseline;
24629
24656
  }
24630
24657
 
24631
- .pf-v6-c-table__favorite .pf-v6-c-button {
24658
+ .pf-v6-c-table__favorite .pf-v6-c-button:not(.pf-m-favorite) {
24632
24659
  --pf-v6-c-button--FontSize: var(--pf-v6-c-table__favorite--c-button--FontSize);
24633
24660
  }
24634
- .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button {
24661
+ .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
24635
24662
  --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
24636
24663
  }
24637
- .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
24664
+ .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
24638
24665
  --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
24639
24666
  }
24640
24667