glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(ComboControl): replace shadcn tooltip with the one from bits-ui

Browse Source
This commit is contained in:
Ilia Mashkov
2026-04-17 13:20:47 +03:00
parent fb1d2765d0
commit 0004b81e40
1 changed files with 7 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/shared/ui/ComboControl/ComboControl.svelte
View File

@@ -5,16 +5,12 @@
--> -->
<script lang="ts"> <script lang="ts">
import type { TypographyControl } from '$shared/lib'; import type { TypographyControl } from '$shared/lib';
import {
Content as PopoverContent,
Root as PopoverRoot,
Trigger as PopoverTrigger,
} from '$shared/shadcn/ui/popover';
import { cn } from '$shared/shadcn/utils/shadcn-utils'; import { cn } from '$shared/shadcn/utils/shadcn-utils';
import { Slider } from '$shared/ui'; import { Slider } from '$shared/ui';
import { Button } from '$shared/ui/Button'; import { Button } from '$shared/ui/Button';
import MinusIcon from '@lucide/svelte/icons/minus'; import MinusIcon from '@lucide/svelte/icons/minus';
import PlusIcon from '@lucide/svelte/icons/plus'; import PlusIcon from '@lucide/svelte/icons/plus';
import { Popover } from 'bits-ui';
import TechText from '../TechText/TechText.svelte'; import TechText from '../TechText/TechText.svelte';
interface Props { interface Props {
@@ -118,8 +114,8 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
<!-- Trigger --> <!-- Trigger -->
<div class="relative mx-1"> <div class="relative mx-1">
<PopoverRoot bind:open> <Popover.Root bind:open>
<PopoverTrigger> <Popover.Trigger>
{#snippet child({ props })} {#snippet child({ props })}
<button <button
{...props} {...props}
@@ -153,10 +149,10 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
</TechText> </TechText>
</button> </button>
{/snippet} {/snippet}
</PopoverTrigger> </Popover.Trigger>
<!-- Vertical slider popover --> <!-- Vertical slider popover -->
<PopoverContent <Popover.Content
class="w-auto py-4 px-3 h-64 flex items-center justify-center rounded-none border border-subtle shadow-sm bg-paper dark:bg-dark-card" class="w-auto py-4 px-3 h-64 flex items-center justify-center rounded-none border border-subtle shadow-sm bg-paper dark:bg-dark-card"
align="center" align="center"
side="top" side="top"
@@ -169,8 +165,8 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
step={control.step} step={control.step}
orientation="vertical" orientation="vertical"
/> />
</PopoverContent> </Popover.Content>
</PopoverRoot> </Popover.Root>
</div> </div>
<!-- Increase button --> <!-- Increase button -->