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

refactor(typography-menu): use native Popover instead of bits-ui

Browse Source
This commit is contained in:
Ilia Mashkov
2026-06-02 16:28:05 +03:00
parent 7798c4bbdf
commit be073286dc
1 changed files with 22 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte
+22 -38
View File
@@ -16,11 +16,11 @@ import {
Button, Button,
ComboControl, ComboControl,
ControlGroup, ControlGroup,
Popover,
Slider, Slider,
} from '$shared/ui'; } from '$shared/ui';
import Settings2Icon from '@lucide/svelte/icons/settings-2'; import Settings2Icon from '@lucide/svelte/icons/settings-2';
import XIcon from '@lucide/svelte/icons/x'; import XIcon from '@lucide/svelte/icons/x';
import { Popover } from 'bits-ui';
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import { cubicOut } from 'svelte/easing'; import { cubicOut } from 'svelte/easing';
import { fly } from 'svelte/transition'; import { fly } from 'svelte/transition';
@@ -73,33 +73,21 @@ $effect(() => {
{#if !hidden} {#if !hidden}
{#if responsive.isMobileOrTablet} {#if responsive.isMobileOrTablet}
<div class={className}> <div class={className}>
<Popover.Root bind:open> <Popover bind:open side="top" align="end" sideOffset={8}>
<Popover.Trigger> {#snippet trigger(props)}
{#snippet child({ props })} <Button variant="primary" {...props}>
<Button variant="primary" {...props}> {#snippet icon()}
{#snippet icon()} <Settings2Icon class="size-4" />
<Settings2Icon class="size-4" /> {/snippet}
{/snippet} </Button>
</Button> {/snippet}
{/snippet}
</Popover.Trigger>
<Popover.Portal> {#snippet children({ close })}
<Popover.Content <div
side="top"
align="end"
sideOffset={8}
class={cn( class={cn(
'z-50 w-72 p-4 rounded-none', 'w-72 p-4 rounded-none',
'surface-popover', 'surface-popover',
'data-[state=open]:animate-in data-[state=closed]:animate-out',
'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
'data-[side=top]:slide-in-from-bottom-2',
'data-[side=bottom]:slide-in-from-top-2',
)} )}
interactOutsideBehavior="close"
escapeKeydownBehavior="close"
> >
<!-- Header --> <!-- Header -->
<div class="flex items-center justify-between mb-3 pb-3 border-b border-subtle"> <div class="flex items-center justify-between mb-3 pb-3 border-b border-subtle">
@@ -111,17 +99,13 @@ $effect(() => {
CONTROLS CONTROLS
</span> </span>
</div> </div>
<Popover.Close> <button
{#snippet child({ props })} onclick={close}
<button class="flex-center size-6 rounded-none hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
{...props} aria-label="Close controls"
class="flex-center size-6 rounded-none hover:bg-black/5 dark:hover:bg-white/5 transition-colors" >
aria-label="Close controls" <XIcon class="size-3.5 text-neutral-500" />
> </button>
<XIcon class="size-3.5 text-neutral-500" />
</button>
{/snippet}
</Popover.Close>
</div> </div>
<!-- Controls --> <!-- Controls -->
@@ -135,9 +119,9 @@ $effect(() => {
/> />
</ControlGroup> </ControlGroup>
{/each} {/each}
</Popover.Content> </div>
</Popover.Portal> {/snippet}
</Popover.Root> </Popover>
</div> </div>
{:else} {:else}
<div <div