@reshape-biotech/design-system 2.7.32 → 2.7.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/dropdown/Dropdown.stories.svelte +98 -0
- package/dist/components/dropdown/components/dropdown-content.svelte +2 -1
- package/dist/components/dropdown/components/dropdown-item.svelte +1 -1
- package/dist/components/dropdown/components/dropdown-sub-content.svelte +8 -2
- package/dist/components/dropdown/components/dropdown-sub-trigger.svelte +1 -1
- package/dist/components/dropdown/types.d.ts +2 -0
- package/package.json +1 -1
|
@@ -463,6 +463,104 @@
|
|
|
463
463
|
</div>
|
|
464
464
|
</Story>
|
|
465
465
|
|
|
466
|
+
<Story name="Custom Gap">
|
|
467
|
+
<div class="flex gap-8 py-12">
|
|
468
|
+
<div>
|
|
469
|
+
<p class="mb-2 text-sm text-secondary">Default (gap-1)</p>
|
|
470
|
+
<Dropdown.Root open>
|
|
471
|
+
<Dropdown.Trigger>Default Gap</Dropdown.Trigger>
|
|
472
|
+
<Dropdown.Portal>
|
|
473
|
+
<Dropdown.Content>
|
|
474
|
+
<Dropdown.Item>
|
|
475
|
+
<p>Item 1</p>
|
|
476
|
+
</Dropdown.Item>
|
|
477
|
+
<Dropdown.Item>
|
|
478
|
+
<p>Item 2</p>
|
|
479
|
+
</Dropdown.Item>
|
|
480
|
+
<Dropdown.Item>
|
|
481
|
+
<p>Item 3</p>
|
|
482
|
+
</Dropdown.Item>
|
|
483
|
+
</Dropdown.Content>
|
|
484
|
+
</Dropdown.Portal>
|
|
485
|
+
</Dropdown.Root>
|
|
486
|
+
</div>
|
|
487
|
+
|
|
488
|
+
<div>
|
|
489
|
+
<p class="mb-2 text-sm text-secondary">No gap (gap-0)</p>
|
|
490
|
+
<Dropdown.Root open>
|
|
491
|
+
<Dropdown.Trigger>No Gap</Dropdown.Trigger>
|
|
492
|
+
<Dropdown.Portal>
|
|
493
|
+
<Dropdown.Content gap="gap-0">
|
|
494
|
+
<Dropdown.Item>
|
|
495
|
+
<p>Item 1</p>
|
|
496
|
+
</Dropdown.Item>
|
|
497
|
+
<Dropdown.Item>
|
|
498
|
+
<p>Item 2</p>
|
|
499
|
+
</Dropdown.Item>
|
|
500
|
+
<Dropdown.Item>
|
|
501
|
+
<p>Item 3</p>
|
|
502
|
+
</Dropdown.Item>
|
|
503
|
+
</Dropdown.Content>
|
|
504
|
+
</Dropdown.Portal>
|
|
505
|
+
</Dropdown.Root>
|
|
506
|
+
</div>
|
|
507
|
+
|
|
508
|
+
<div>
|
|
509
|
+
<p class="mb-2 text-sm text-secondary">Large gap (gap-3)</p>
|
|
510
|
+
<Dropdown.Root open>
|
|
511
|
+
<Dropdown.Trigger>Large Gap</Dropdown.Trigger>
|
|
512
|
+
<Dropdown.Portal>
|
|
513
|
+
<Dropdown.Content gap="gap-3">
|
|
514
|
+
<Dropdown.Item>
|
|
515
|
+
<p>Item 1</p>
|
|
516
|
+
</Dropdown.Item>
|
|
517
|
+
<Dropdown.Item>
|
|
518
|
+
<p>Item 2</p>
|
|
519
|
+
</Dropdown.Item>
|
|
520
|
+
<Dropdown.Item>
|
|
521
|
+
<p>Item 3</p>
|
|
522
|
+
</Dropdown.Item>
|
|
523
|
+
</Dropdown.Content>
|
|
524
|
+
</Dropdown.Portal>
|
|
525
|
+
</Dropdown.Root>
|
|
526
|
+
</div>
|
|
527
|
+
</div>
|
|
528
|
+
</Story>
|
|
529
|
+
|
|
530
|
+
<Story name="Submenu with Custom Gap">
|
|
531
|
+
<div class="py-12">
|
|
532
|
+
<Dropdown.Root open>
|
|
533
|
+
<Dropdown.Trigger>Submenu Gap Example</Dropdown.Trigger>
|
|
534
|
+
<Dropdown.Portal>
|
|
535
|
+
<Dropdown.Content gap="gap-2">
|
|
536
|
+
<Dropdown.Item>
|
|
537
|
+
<p>First item</p>
|
|
538
|
+
</Dropdown.Item>
|
|
539
|
+
<Dropdown.Sub open>
|
|
540
|
+
<Dropdown.SubTrigger>
|
|
541
|
+
<p>More options</p>
|
|
542
|
+
</Dropdown.SubTrigger>
|
|
543
|
+
<Dropdown.SubContent gap="gap-0">
|
|
544
|
+
<Dropdown.Item>
|
|
545
|
+
<p>Sub item 1 (no gap)</p>
|
|
546
|
+
</Dropdown.Item>
|
|
547
|
+
<Dropdown.Item>
|
|
548
|
+
<p>Sub item 2 (no gap)</p>
|
|
549
|
+
</Dropdown.Item>
|
|
550
|
+
<Dropdown.Item>
|
|
551
|
+
<p>Sub item 3 (no gap)</p>
|
|
552
|
+
</Dropdown.Item>
|
|
553
|
+
</Dropdown.SubContent>
|
|
554
|
+
</Dropdown.Sub>
|
|
555
|
+
<Dropdown.Item>
|
|
556
|
+
<p>Last item</p>
|
|
557
|
+
</Dropdown.Item>
|
|
558
|
+
</Dropdown.Content>
|
|
559
|
+
</Dropdown.Portal>
|
|
560
|
+
</Dropdown.Root>
|
|
561
|
+
</div>
|
|
562
|
+
</Story>
|
|
563
|
+
|
|
466
564
|
<Story
|
|
467
565
|
name="Interaction Test"
|
|
468
566
|
asChild
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
class: className = '',
|
|
8
8
|
variant = 'primary',
|
|
9
9
|
matchTriggerWidth = false,
|
|
10
|
+
gap = 'gap-1',
|
|
10
11
|
...restProps
|
|
11
12
|
}: DropdownContentProps = $props();
|
|
12
13
|
|
|
@@ -22,7 +23,7 @@
|
|
|
22
23
|
</script>
|
|
23
24
|
|
|
24
25
|
<DropdownMenu.Content
|
|
25
|
-
class="z-10 rounded-md p-1 shadow-menu {variantClass} {widthClass} {className}"
|
|
26
|
+
class="z-10 flex flex-col {gap} rounded-md p-1 shadow-menu {variantClass} {widthClass} {className}"
|
|
26
27
|
{...restProps}
|
|
27
28
|
>
|
|
28
29
|
{@render children()}
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
{:else}
|
|
19
19
|
<div
|
|
20
20
|
{...props}
|
|
21
|
-
class="h-9 cursor-pointer items-center rounded-lg px-2 py-1.5 text-sm outline-none transition-colors hover:bg-neutral-hover focus:bg-neutral-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_a]:no-underline {className}"
|
|
21
|
+
class="flex h-9 cursor-pointer items-center rounded-lg px-2 py-1.5 text-sm outline-none transition-colors hover:bg-neutral-hover focus:bg-neutral-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_a]:no-underline {className}"
|
|
22
22
|
>
|
|
23
23
|
{@render children?.()}
|
|
24
24
|
</div>
|
|
@@ -2,7 +2,13 @@
|
|
|
2
2
|
import { DropdownMenu } from 'bits-ui';
|
|
3
3
|
import type { DropdownSubContentProps } from '../types';
|
|
4
4
|
|
|
5
|
-
let {
|
|
5
|
+
let {
|
|
6
|
+
children,
|
|
7
|
+
class: className = '',
|
|
8
|
+
variant = 'primary',
|
|
9
|
+
gap = 'gap-1',
|
|
10
|
+
...restProps
|
|
11
|
+
}: DropdownSubContentProps = $props();
|
|
6
12
|
|
|
7
13
|
const variantClasses: Record<string, string> = {
|
|
8
14
|
primary: 'bg-surface text-primary',
|
|
@@ -13,7 +19,7 @@
|
|
|
13
19
|
</script>
|
|
14
20
|
|
|
15
21
|
<DropdownMenu.SubContent
|
|
16
|
-
class="z-10 rounded-md p-1 shadow-menu {variantClass} {className}"
|
|
22
|
+
class="z-10 {gap} flex flex-col rounded-md p-1 shadow-menu {variantClass} {className}"
|
|
17
23
|
{...restProps}
|
|
18
24
|
>
|
|
19
25
|
{@render children()}
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
{:else}
|
|
18
18
|
<div
|
|
19
19
|
{...props}
|
|
20
|
-
class="flex h-
|
|
20
|
+
class="flex h-9 cursor-pointer items-center justify-between gap-2 rounded-lg px-2 py-1.5 text-sm outline-none transition-colors hover:bg-neutral-hover focus:bg-neutral-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_a]:no-underline {className}"
|
|
21
21
|
>
|
|
22
22
|
{#if !hideChevron && side === 'left'}
|
|
23
23
|
<Icon color="tertiary" icon={chevronIcon} size={16} />
|
|
@@ -21,6 +21,7 @@ export type DropdownContentProps = {
|
|
|
21
21
|
class?: string;
|
|
22
22
|
variant?: DropdownContentVariant;
|
|
23
23
|
matchTriggerWidth?: boolean;
|
|
24
|
+
gap?: string;
|
|
24
25
|
} & BitsDropdownMenuContentProps;
|
|
25
26
|
export type DropdownItemProps = {
|
|
26
27
|
children?: Snippet;
|
|
@@ -42,4 +43,5 @@ export type DropdownSubContentProps = {
|
|
|
42
43
|
children: Snippet;
|
|
43
44
|
class?: string;
|
|
44
45
|
variant?: DropdownContentVariant;
|
|
46
|
+
gap?: string;
|
|
45
47
|
} & BitsDropdownMenuSubContentProps;
|