diff --git a/.changeset/mighty-steaks-hope.md b/.changeset/mighty-steaks-hope.md new file mode 100644 index 000000000..1fe543c24 --- /dev/null +++ b/.changeset/mighty-steaks-hope.md @@ -0,0 +1,5 @@ +--- +"@cube-dev/ui-kit": patch +--- + +Fix popover transitions in ComboBox and Select. Fix transitions in Tooltip. diff --git a/src/components/fields/ComboBox/ComboBox.tsx b/src/components/fields/ComboBox/ComboBox.tsx index 59fa5a271..efddeb68d 100644 --- a/src/components/fields/ComboBox/ComboBox.tsx +++ b/src/components/fields/ComboBox/ComboBox.tsx @@ -94,9 +94,13 @@ const ComboBoxOverlayElement = tasty({ translate: { '': '0 0', 'open & [data-placement="top"]': '0 0', - '!open & [data-placement="top"]': '0 10%', + '!open & [data-placement="top"]': '0 1x', 'open & ([data-placement="bottom"] | ![data-placement]': '0 0', - '!open & ([data-placement="bottom"] | ![data-placement])': '0 -10%', + '!open & ([data-placement="bottom"] | ![data-placement])': '0 -1x', + }, + transformOrigin: { + '': 'top center', + '[data-placement="top"]': 'bottom center', }, scale: { '': '1 1', diff --git a/src/components/fields/Select/Select.tsx b/src/components/fields/Select/Select.tsx index dc9c02a69..4de585e70 100644 --- a/src/components/fields/Select/Select.tsx +++ b/src/components/fields/Select/Select.tsx @@ -137,15 +137,17 @@ const OverlayElement = tasty({ boxSizing: 'border-box', transition: - 'transform $transition ease-out, scale $transition ease-out, theme $transition ease-out', - transform: { + 'translate $transition ease-out, scale $transition ease-out, theme $transition ease-out', + translate: { '': '0 0', - 'open & [data-placement="top"]': 'translate(0, 0)', - '!open & [data-placement="top"]': 'translate(0, 10%)', - 'open & ([data-placement="bottom"] | ![data-placement])': - 'translate(0, 0)', - '!open & ([data-placement="bottom"] | ![data-placement])': - 'translate(0, -10%)', + 'open & [data-placement="top"]': '0 0', + '!open & [data-placement="top"]': '0 1x', + 'open & ([data-placement="bottom"] | ![data-placement])': '0 0', + '!open & ([data-placement="bottom"] | ![data-placement])': '0 -1x', + }, + transformOrigin: { + '': 'top center', + '[data-placement="top"]': 'bottom center', }, scale: { '': '1 1', diff --git a/src/components/overlays/Tooltip/Tooltip.tsx b/src/components/overlays/Tooltip/Tooltip.tsx index 13667a05b..3b9a56ce5 100644 --- a/src/components/overlays/Tooltip/Tooltip.tsx +++ b/src/components/overlays/Tooltip/Tooltip.tsx @@ -50,7 +50,8 @@ const TooltipElement = tasty({ '': false, light: 'drop-shadow(0 0 1px #dark.2)', }, - transition: 'translate, opacity, theme', + transition: + 'translate $transition ease-out, scale $transition ease-out, theme $transition ease-out', translate: { '': '0 0', 'open & [data-placement="top"]': '0 0', @@ -62,6 +63,17 @@ const TooltipElement = tasty({ 'open & [data-placement="right"]': '0 0', '!open & [data-placement="right"]': '-1x 0', }, + transformOrigin: { + '': 'top center', + '[data-placement="top"]': 'bottom center', + '[data-placement="left"]': 'right center', + '[data-placement="right"]': 'left center', + }, + scale: { + '': '1 1', + '!open': '1 .8', + '!open & ([data-placement="left"] | [data-placement="right"])': '.8 1', + }, opacity: { '': 1, '!open': 0.001,