@patternfly/react-styles 6.2.0-prerelease.10 → 6.2.0-prerelease.11

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 (33) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/css/components/Accordion/accordion.css +3 -1
  3. package/css/components/Alert/alert-group.css +2 -2
  4. package/css/components/Banner/banner.css +2 -2
  5. package/css/components/Button/button.css +25 -0
  6. package/css/components/Button/button.d.ts +2 -0
  7. package/css/components/Button/button.js +2 -0
  8. package/css/components/Button/button.mjs +2 -0
  9. package/css/components/Card/card.css +4 -2
  10. package/css/components/ClipboardCopy/clipboard-copy.css +6 -1
  11. package/css/components/ClipboardCopy/clipboard-copy.d.ts +1 -0
  12. package/css/components/ClipboardCopy/clipboard-copy.js +1 -0
  13. package/css/components/ClipboardCopy/clipboard-copy.mjs +1 -0
  14. package/css/components/DataList/data-list.css +3 -1
  15. package/css/components/DualListSelector/dual-list-selector.css +4 -2
  16. package/css/components/ExpandableSection/expandable-section.css +3 -1
  17. package/css/components/Form/form.css +4 -2
  18. package/css/components/FormControl/form-control.css +108 -41
  19. package/css/components/JumpLinks/jump-links.css +4 -2
  20. package/css/components/Menu/menu.css +4 -4
  21. package/css/components/MenuToggle/menu-toggle.css +1 -1
  22. package/css/components/NotificationDrawer/notification-drawer.css +3 -1
  23. package/css/components/Switch/switch.css +3 -1
  24. package/css/components/Table/table-grid.css +3 -1
  25. package/css/components/Table/table.css +7 -5
  26. package/css/components/Tabs/tabs.css +6 -2
  27. package/css/components/Toolbar/toolbar.css +4 -2
  28. package/css/components/Wizard/wizard.css +4 -2
  29. package/css/components/_index.css +203 -76
  30. package/css/components/_index.d.ts +2 -2
  31. package/css/components/_index.js +2 -2
  32. package/css/components/_index.mjs +2 -2
  33. package/package.json +3 -3
package/css/components/Table/table.css CHANGED
@@ -50,7 +50,7 @@
50
50
  --pf-v6-c-table__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
51
51
  --pf-v6-c-table__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
52
52
  --pf-v6-c-table__toggle--c-button__toggle-icon--Rotate: 270deg;
53
- --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
53
+ --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
54
54
  --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
55
55
  --pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;
56
56
  --pf-v6-c-table__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -548,7 +548,9 @@
548
548
  transform: rotate(var(--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
549
549
  }
550
550
  .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
551
- transition: transform var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration) var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction);
551
+ transition-timing-function: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction);
552
+ transition-duration: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration);
553
+ transition-property: transform;
552
554
  transform: rotate(var(--pf-v6-c-table__toggle--c-button__toggle-icon--Rotate));
553
555
  }
554
556
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
@@ -583,13 +585,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
583
585
  vertical-align: baseline;
584
586
  }
585
587
 
586
- .pf-v6-c-table__favorite .pf-v6-c-button {
588
+ .pf-v6-c-table__favorite .pf-v6-c-button:not(.pf-m-favorite) {
587
589
  --pf-v6-c-button--FontSize: var(--pf-v6-c-table__favorite--c-button--FontSize);
588
590
  }
589
- .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button {
591
+ .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
590
592
  --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
591
593
  }
592
- .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
594
+ .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
593
595
  --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
594
596
  }
595
597
 
package/css/components/Tabs/tabs.css CHANGED
@@ -102,7 +102,9 @@
102
102
  --pf-v6-c-tabs__item--ScrollSnapAlign: end;
103
103
  --pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis: y;
104
104
  --pf-v6-c-tabs__toggle--Display: flex;
105
- --pf-v6-c-tabs__toggle-icon--Transition: all 250ms cubic-bezier(.42, 0, .58, 1);
105
+ --pf-v6-c-tabs__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
106
+ --pf-v6-c-tabs__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
107
+ --pf-v6-c-tabs__toggle-icon--Transition: transform var(--pf-v6-c-tabs__toggle-icon--TransitionDuration) var(--pf-v6-c-tabs__toggle-icon--TransitionTimingFunction);
106
108
  --pf-v6-c-tabs__toggle-icon--Rotate: 0;
107
109
  --pf-v6-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
108
110
  --pf-v6-c-tabs--m-expandable--RowGap: var(--pf-t--global--spacer--sm);
@@ -122,7 +124,9 @@
122
124
  --pf-v6-c-tabs__add--PaddingInlineStart: var(--pf-t--global--spacer--sm);
123
125
  --pf-v6-c-tabs__add--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
124
126
  --pf-v6-c-tabs__link-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
125
- --pf-v6-c-tabs__link-toggle-icon--Transition: .2s ease-in 0s;
127
+ --pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
128
+ --pf-v6-c-tabs__link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
129
+ --pf-v6-c-tabs__link-toggle-icon--Transition: transform var(--pf-v6-c-tabs__link-toggle-icon--TransitionDuration) var(--pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction);
126
130
  --pf-v6-c-tabs__link-toggle-icon--Rotate: 0;
127
131
  --pf-v6-c-tabs__link-toggle-icon--FontSize: var(--pf-t--global--font--size--sm);
128
132
  --pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate: 90deg;
package/css/components/Toolbar/toolbar.css CHANGED
@@ -37,7 +37,7 @@
37
37
  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
38
38
  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
39
39
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
40
- --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
40
+ --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
41
41
  --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
42
42
  --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
43
43
  --pf-v6-c-toolbar__group--m-filter-group--ColumnGap: var(--pf-t--global--spacer--gap--control-to-control--default);
@@ -375,7 +375,9 @@
375
375
 
376
376
  .pf-v6-c-toolbar__expand-all-icon {
377
377
  display: inline-flex;
378
- transition: transform var(--pf-v6-c-toolbar__expand-all-icon--TransitionDuration) var(--pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction);
378
+ transition-timing-function: var(--pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction);
379
+ transition-duration: var(--pf-v6-c-toolbar__expand-all-icon--TransitionDuration);
380
+ transition-property: transform;
379
381
  transform: rotate(var(--pf-v6-c-toolbar__expand-all-icon--Rotate));
380
382
  }
381
383
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-toolbar__expand-all-icon {
package/css/components/Wizard/wizard.css CHANGED
@@ -39,7 +39,7 @@
39
39
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
40
40
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
41
41
  --pf-v6-c-wizard__nav-link-toggle--Color: var(--pf-t--global--icon--color--regular);
42
- --pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
42
+ --pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
43
43
  --pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
44
44
  --pf-v6-c-wizard__nav-link-toggle-icon--Rotate: 0;
45
45
  --pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
@@ -445,7 +445,9 @@
445
445
 
446
446
  .pf-v6-c-wizard__nav-link-toggle-icon {
447
447
  display: inline-block;
448
- transition: transform var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration) var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction);
448
+ transition-timing-function: var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction);
449
+ transition-duration: var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration);
450
+ transition-property: transform;
449
451
  transform: rotate(var(--pf-v6-c-wizard__nav-link-toggle-icon--Rotate));
450
452
  }
451
453
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__nav-link-toggle-icon {