feat(Drawer): add default padding classes for content snippet

This commit is contained in:
Ilia Mashkov
2026-02-07 19:26:46 +03:00
parent a1bc359c7f
commit 7f01a9cc85
4 changed files with 17 additions and 16 deletions

View File

@@ -85,8 +85,8 @@ $effect(() => {
{/snippet} {/snippet}
</IconButton> </IconButton>
{/snippet} {/snippet}
{#snippet content()} {#snippet content({ className })}
<div class="flex flex-col gap-6 px-2 py-4"> <div class={cn(className, 'flex flex-col gap-6')}>
{#each controlManager.controls as control (control.id)} {#each controlManager.controls as control (control.id)}
<ComboControlV2 <ComboControlV2
control={control.instance} control={control.instance}

View File

@@ -14,7 +14,7 @@ import type { Snippet } from 'svelte';
interface Props { interface Props {
isOpen?: boolean; isOpen?: boolean;
trigger?: Snippet<[{ isOpen: boolean; onClick: () => void }]>; trigger?: Snippet<[{ isOpen: boolean; onClick: () => void }]>;
content?: Snippet<[{ isOpen: boolean }]>; content?: Snippet<[{ isOpen: boolean; className?: string }]>;
contentClassName?: string; contentClassName?: string;
} }
@@ -35,7 +35,7 @@ function handleClick() {
</Button> </Button>
{/if} {/if}
</DrawerTrigger> </DrawerTrigger>
<DrawerContent class={cn('min-h-60', contentClassName)}> <DrawerContent>
{@render content?.({ isOpen })} {@render content?.({ isOpen, className: cn('min-h-60 px-2 pt-4 pb-8', contentClassName) })}
</DrawerContent> </DrawerContent>
</DrawerRoot> </DrawerRoot>

View File

@@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import type { ResponsiveManager } from '$shared/lib'; import type { ResponsiveManager } from '$shared/lib';
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import { import {
Drawer, Drawer,
IconButton, IconButton,
@@ -36,18 +37,18 @@ const responsive = getContext<ResponsiveManager>('responsive');
</IconButton> </IconButton>
{/snippet} {/snippet}
{#snippet content({ isOpen })} {#snippet content({ isOpen, className })}
<div class="px-2 py-4"> <div class={cn(className, 'flex flex-col gap-6')}>
<SelectComparedFonts {sliderPos} /> <SelectComparedFonts {sliderPos} />
<TypographyControls
{sliderPos}
{isDragging}
isActive={isOpen}
bind:wrapper={typographyControls}
containerWidth={container?.clientWidth}
staticPosition
/>
</div> </div>
<TypographyControls
{sliderPos}
{isDragging}
isActive={isOpen}
bind:wrapper={typographyControls}
containerWidth={container?.clientWidth}
staticPosition
/>
{/snippet} {/snippet}
</Drawer> </Drawer>
{:else} {:else}

View File

@@ -116,7 +116,7 @@ $effect(() => {
out:fade={{ duration: 300, delay: 300 }} out:fade={{ duration: 300, delay: 300 }}
> >
{#if staticPosition} {#if staticPosition}
<div class="flex flex-col gap-6 px-2 py-4"> <div class="flex flex-col gap-6">
<Input <Input
class="p-6" class="p-6"
bind:value={comparisonStore.text} bind:value={comparisonStore.text}