fix(Tooltip): added Presence to TooltipContent to allow close animation

unovue · Jun 6, 2024 · df3ebe4 · df3ebe4
1 parent b85f1a5
commit df3ebe4
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/packages/radix-vue/src/Tooltip/TooltipContent.vue b/packages/radix-vue/src/Tooltip/TooltipContent.vue
@@ -11,6 +11,7 @@ import TooltipContentImpl from './TooltipContentImpl.vue'
 import TooltipContentHoverable from './TooltipContentHoverable.vue'
 import { injectTooltipRootContext } from './TooltipRoot.vue'
 import { useForwardExpose, useForwardPropsEmits } from '@/shared'
+import { Presence } from '@/Presence'
 
 const props = withDefaults(defineProps<TooltipContentProps>(), {
   side: 'top',
@@ -23,12 +24,13 @@ const { forwardRef } = useForwardExpose()
 </script>
 
 <template>
-  <component
-    :is="rootContext.disableHoverableContent.value ? TooltipContentImpl : TooltipContentHoverable"
-    v-if="rootContext.open.value"
-    :ref="forwardRef"
-    v-bind="forwarded"
-  >
-    <slot />
-  </component>
+  <Presence :present="rootContext.open.value">
+    <component
+      :is="rootContext.disableHoverableContent.value ? TooltipContentImpl : TooltipContentHoverable"
+      :ref="forwardRef"
+      v-bind="forwarded"
+    >
+      <slot />
+    </component>
+  </Presence>
 </template>
diff --git a/packages/radix-vue/src/Tooltip/stories/Tooltip.story.vue b/packages/radix-vue/src/Tooltip/stories/Tooltip.story.vue
@@ -31,5 +31,27 @@ const disableTooltip = ref(false)
         </TooltipProvider>
       </div>
     </Variant>
+    <Variant title="closeAnimation">
+      <div class="py-20">
+        <TooltipProvider :disabled="disableTooltip">
+          <TooltipRoot v-model:open="toggleState">
+            <TooltipTrigger
+              class="text-violet11 shadow-blackA7 hover:bg-violet3 inline-flex h-[35px] w-[35px] items-center justify-center rounded-full bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
+            >
+              <Icon icon="radix-icons:plus" />
+            </TooltipTrigger>
+            <TooltipPortal>
+              <TooltipContent
+                :side-offset="5"
+                class="data-[state=closed]:animate-fadeOut data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-violet11 select-none rounded-[4px] bg-white px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]"
+              >
+                Add to library
+                <TooltipArrow class="fill-white" />
+              </TooltipContent>
+            </TooltipPortal>
+          </TooltipRoot>
+        </TooltipProvider>
+      </div>
+    </Variant>
   </Story>
 </template>