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}
</IconButton>
{/snippet}
{#snippet content()}
<div class="flex flex-col gap-6 px-2 py-4">
{#snippet content({ className })}
<div class={cn(className, 'flex flex-col gap-6')}>
{#each controlManager.controls as control (control.id)}
<ComboControlV2
control={control.instance}

View File

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

View File

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

View File

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