Use new pink tooltip for copy and download icons

appwrite · Dec 27, 2024 · bb852ad · bb852ad
1 parent 751be60
commit bb852ad
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 21 deletions.
diff --git a/src/lib/components/copy.svelte b/src/lib/components/copy.svelte
@@ -4,11 +4,11 @@
     import { clickOnEnter } from '$lib/helpers/a11y';
     import { copy } from '$lib/helpers/copy';
     import { addNotification } from '$lib/stores/notifications';
+    import { Tooltip } from '@appwrite.io/pink-svelte';
 
     export let value: string;
     export let event: string = null;
     export let eventContext = 'click_id_tag';
-    export let appendTo: Parameters<typeof tooltip>['1']['appendTo'] = undefined;
 
     let content = 'Click to copy';
 
@@ -32,18 +32,16 @@
     }
 </script>
 
-<span
-    data-private
-    role="button"
-    tabindex="0"
-    style:cursor="pointer"
-    on:click|preventDefault={handleClick}
-    on:keyup={clickOnEnter}
-    on:mouseenter={() => setTimeout(() => (content = 'Click to copy'))}
-    use:tooltip={{
-        content,
-        hideOnClick: false,
-        appendTo
-    }}>
-    <slot />
-</span>
+<Tooltip>
+    <span
+        data-private
+        role="button"
+        tabindex="0"
+        style:cursor="pointer"
+        on:click|preventDefault={handleClick}
+        on:keyup={clickOnEnter}
+        on:mouseenter={() => setTimeout(() => (content = 'Click to copy'))}>
+        <slot />
+    </span>
+    <p slot="tooltip">{content}</p>
+</Tooltip>
diff --git a/src/routes/(console)/project-[project]/rawVariableEditor.svelte b/src/routes/(console)/project-[project]/rawVariableEditor.svelte
@@ -7,6 +7,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import type { Models } from '@appwrite.io/console';
     import { parse } from 'envfile';
+    import { Tooltip } from '@appwrite.io/pink-svelte';
 
     export let isGlobal: boolean;
     export let showEditor = false;
@@ -166,18 +167,16 @@
                 class="buttons-list u-gap-8 u-cross-center u-position-absolute d u-inset-block-end-1 u-inset-inline-end-1 u-padding-block-8 u-padding-inline-12"
                 style="border-end-end-radius:0.0625rem;">
                 <li class="buttons-list-item">
-                    <div class="tooltip" aria-label={`Download .${tab} file`}>
+                    <Tooltip>
                         <button
                             on:click={() => downloadVariables()}
                             type="button"
                             class="button is-small is-text is-only-icon"
                             aria-label={`Download .${tab} file`}>
                             <span class="icon-download" aria-hidden="true" />
                         </button>
-                        <span class="tooltip-popup" role="tooltip">
-                            Download .{tab} file.
-                        </span>
-                    </div>
+                        <p slot="tooltip">Download .{tab} file.</p>
+                    </Tooltip>
                 </li>
                 <li class="buttons-list-item">
                     <div bind:this={copyParent}>