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

feat(ComboControl): Add tooltips and enhance intraction effects

Browse Source
This commit is contained in:
Ilia Mashkov
2026-01-24 15:37:06 +03:00
parent 3dce409034
commit 873b697e8c
1 changed files with 105 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,6 +16,11 @@ import {
Trigger as PopoverTrigger, Trigger as PopoverTrigger,
} from '$shared/shadcn/ui/popover'; } from '$shared/shadcn/ui/popover';
import { Slider } from '$shared/shadcn/ui/slider'; import { Slider } from '$shared/shadcn/ui/slider';
import {
Content as TooltipContent,
Root as TooltipRoot,
Trigger as TooltipTrigger,
} from '$shared/shadcn/ui/tooltip';
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 type { ChangeEventHandler } from 'svelte/elements'; import type { ChangeEventHandler } from 'svelte/elements';
@@ -71,16 +76,35 @@ const handleSliderChange = (newValue: number) => {
}; };
</script> </script>
<ButtonGroupRoot class="bg-transparent border-none shadow-none"> <TooltipRoot>
<ButtonGroupRoot class="bg-transparent border-none shadow-none">
<TooltipTrigger class="flex items-center">
<Button <Button
variant="ghost" variant="ghost"
class="hover:bg-white/50 bg-white/20 border-none" class="
group relative border-none size-9
bg-white/20 hover:bg-white/60
transition-all duration-200 ease-out
will-change-transform
hover:-translate-y-0.5
active:translate-y-0 active:scale-95 active:shadow-none
cursor-pointer
disabled:opacity-50 disabled:pointer-events-none
"
size="icon" size="icon"
aria-label={decreaseLabel}
onclick={control.decrease} onclick={control.decrease}
disabled={control.isAtMin} disabled={control.isAtMin}
aria-label={decreaseLabel}
> >
<MinusIcon class="size-4" /> <MinusIcon
class="
size-4 transition-all duration-200
stroke-slate-600/50
group-hover:stroke-indigo-500 group-hover:scale-110 group-hover:stroke-3
group-active:scale-90 group-active:-rotate-6
group-disabled:stroke-transparent
"
/>
</Button> </Button>
<PopoverRoot> <PopoverRoot>
<PopoverTrigger> <PopoverTrigger>
@@ -88,7 +112,7 @@ const handleSliderChange = (newValue: number) => {
<Button <Button
{...props} {...props}
variant="ghost" variant="ghost"
class="hover:bg-white/50 bg-white/20 border-none" class="hover:bg-white/50 hover:font-bold bg-white/20 border-none duration-150 will-change-transform active:scale-95 cursor-pointer"
size="icon" size="icon"
aria-label={controlLabel} aria-label={controlLabel}
> >
@@ -118,14 +142,39 @@ const handleSliderChange = (newValue: number) => {
</div> </div>
</PopoverContent> </PopoverContent>
</PopoverRoot> </PopoverRoot>
<Button <Button
variant="ghost" variant="ghost"
class="hover:bg-white/50 bg-white/20 border-none" class="
group relative border-none size-9
bg-white/20 hover:bg-white/60
transition-all duration-200 ease-out
will-change-transform
hover:-translate-y-0.5
active:translate-y-0 active:scale-95 active:shadow-none
disabled:opacity-50 disabled:pointer-events-none
cursor-pointer
"
size="icon" size="icon"
aria-label={increaseLabel} aria-label={increaseLabel}
onclick={control.increase} onclick={control.increase}
disabled={control.isAtMax} disabled={control.isAtMax}
> >
<PlusIcon class="size-4" /> <PlusIcon
class="
size-4 transition-all duration-200
stroke-slate-600/50
group-hover:stroke-indigo-500 group-hover:scale-110 group-hover:stroke-3
group-active:scale-90 group-active:rotate-6
group-disabled:stroke-transparent
"
/>
</Button> </Button>
</ButtonGroupRoot> </TooltipTrigger>
</ButtonGroupRoot>
{#if controlLabel}
<TooltipContent>
{controlLabel}
</TooltipContent>
{/if}
</TooltipRoot>