Skip to content

Commit e81f9e4

Browse files
endigo9740endigo9740
authored
Fixes Tooltip and Popover arrow styles and improves documentation (#3601)
1 parent 667752c commit e81f9e4

File tree

11 files changed

+99
-49
lines changed

11 files changed

+99
-49
lines changed

‎.changeset/many-birds-show.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@skeletonlabs/skeleton-svelte": minor
3+
---
4+
5+
bugfix: resolves issues with Svelte Tooltip and Popover arrow style props
6+

‎packages/skeleton-svelte/src/components/Combobox/types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export interface ComboboxProps<T extends ComboboxItem> extends Omit<combobox.Pro
66
data?: T[];
77
/** Set the label to display. */
88
label?: string;
9-
/** Set z-index for the positioner. */
9+
/** Set a positioner style for z-index, ex: "10" */
1010
zIndex?: string;
1111

1212
// Base ---

‎packages/skeleton-svelte/src/components/Modal/types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export interface ModalProps extends Omit<dialog.Props, 'id'> {
99
base?: string;
1010
/** Provide arbitrary classes for the root element. */
1111
classes?: string;
12-
/** Set z-index for the positioner. */
12+
/** Set a positioner style for z-index, ex: "10" */
1313
zIndex?: string;
1414

1515
// Trigger ---

‎packages/skeleton-svelte/src/components/Popover/Popover.svelte

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,11 @@
66
import type { PopoverProps } from './types.js';
77
88
const {
9-
arrow = false,
109
zIndex = 'auto',
10+
// Arrow
11+
arrow = false,
12+
arrowBackground = 'var(--color-surface-950-50)',
13+
arrowSize = '10px',
1114
// Base
1215
base = '',
1316
classes = '',
@@ -25,7 +28,6 @@
2528
contentClasses = '',
2629
// Arrow
2730
arrowBase = '',
28-
arrowBackground = '!bg-surface-200 dark:!bg-surface-800',
2931
arrowClasses = '',
3032
// Snippets
3133
trigger,
@@ -60,8 +62,8 @@
6062
<div {...api.getContentProps()} transition:fade={{ duration: 100 }} style="z-index: {zIndex};">
6163
<!-- Arrow -->
6264
{#if arrow}
63-
<div {...api.getArrowProps()}>
64-
<div {...api.getArrowTipProps()} class="{arrowBase} {arrowBackground} {arrowClasses}"></div>
65+
<div {...api.getArrowProps()} style:--arrow-size={arrowSize}>
66+
<div {...api.getArrowTipProps()} class="{arrowBase} {arrowClasses}" style:--arrow-background={arrowBackground}></div>
6567
</div>
6668
{/if}
6769
<!-- Snippet: Content -->
@@ -70,9 +72,3 @@
7072
{/if}
7173
</div>
7274
</span>
73-
74-
<style>
75-
:global([data-part='arrow']) {
76-
--arrow-size: 10px;
77-
}
78-
</style>

‎packages/skeleton-svelte/src/components/Popover/types.ts

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,16 @@ import * as popover from '@zag-js/popover';
33
import type { HTMLButtonAttributes } from 'svelte/elements';
44

55
export interface PopoverProps extends Omit<popover.Props, 'id'> {
6+
/** Set a positioner style for z-index, ex: "10" */
7+
zIndex?: string;
8+
9+
// Arrow ---
610
/** Enable display of the popover arrow. */
711
arrow?: boolean;
8-
/** Set z-index for the positioner. */
9-
zIndex?: string;
12+
/** Set a style value for --arrow-background, ex: "var(--color-surface-50-950)" */
13+
arrowBackground?: string;
14+
/** Set a style value for --arrow-size, ex: "10px" */
15+
arrowSize?: string;
1016

1117
// Base ---
1218
/** Set base classes for the root element. */
@@ -41,8 +47,6 @@ export interface PopoverProps extends Omit<popover.Props, 'id'> {
4147
// Arrow ---
4248
/** Set base classes for the arrow. */
4349
arrowBase?: string;
44-
/** Set background classes for the arrow. */
45-
arrowBackground?: string;
4650
/** Provide arbitrary classes for the arrow. */
4751
arrowClasses?: string;
4852

‎packages/skeleton-svelte/src/components/Tooltip/Tooltip.svelte

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,11 @@
66
import type { TooltipProps } from './types.js';
77
88
const {
9-
arrow = false,
109
zIndex = 'auto',
10+
// Arrow
11+
arrow = false,
12+
arrowBackground = 'var(--color-surface-950-50)',
13+
arrowSize = '10px',
1114
// Base
1215
base = '',
1316
classes = '',
@@ -25,7 +28,7 @@
2528
contentClasses = '',
2629
// Arrow
2730
arrowBase = '',
28-
arrowBackground = '!bg-white',
31+
// arrowBackground = '',
2932
arrowClasses = '',
3033
// Snippets
3134
trigger,
@@ -61,8 +64,8 @@
6164
<div {...api.getContentProps()} transition:fade={{ duration: 100 }} style="z-index: {zIndex};">
6265
<!-- Arrow -->
6366
{#if arrow}
64-
<div {...api.getArrowProps()}>
65-
<div {...api.getArrowTipProps()} class="{arrowBase} {arrowBackground} {arrowClasses}"></div>
67+
<div {...api.getArrowProps()} style:--arrow-size={arrowSize}>
68+
<div {...api.getArrowTipProps()} class="{arrowBase} {arrowClasses}" style:--arrow-background={arrowBackground}></div>
6669
</div>
6770
{/if}
6871
<!-- Snippet Content -->
@@ -73,10 +76,3 @@
7376
{/if}
7477
</div>
7578
</span>
76-
77-
<style>
78-
:global([data-part='arrow']) {
79-
--arrow-size: 10px;
80-
--arrow-background: white;
81-
}
82-
</style>

‎packages/skeleton-svelte/src/components/Tooltip/types.ts

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,16 @@ import * as tooltip from '@zag-js/tooltip';
33
import type { HTMLButtonAttributes } from 'svelte/elements';
44

55
export interface TooltipProps extends Omit<tooltip.Props, 'id'> {
6+
/** Set a positioner style for z-index, ex: "10" */
7+
zIndex?: string;
8+
9+
// Arrow ---
610
/** Enable display of the popover arrow. */
711
arrow?: boolean;
8-
/** Set z-index for the positioner. */
9-
zIndex?: string;
12+
/** Set a style value for --arrow-background, ex: "var(--color-surface-50-950)" */
13+
arrowBackground?: string;
14+
/** Set a style value for --arrow-size, ex: "10px" */
15+
arrowSize?: string;
1016

1117
// Base ---
1218
/** Set base classes for the root element. */
@@ -41,8 +47,6 @@ export interface TooltipProps extends Omit<tooltip.Props, 'id'> {
4147
// Arrow ---
4248
/** Set base classes for the arrow. */
4349
arrowBase?: string;
44-
/** Set background classes for the arrow. */
45-
arrowBackground?: string;
4650
/** Provide arbitrary classes for the arrow. */
4751
arrowClasses?: string;
4852

‎playgrounds/skeleton-svelte/src/routes/+layout.svelte

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,14 @@
88
<div class="grid h-screen grid-cols-[320px_minmax(0,_1fr)]">
99
<!-- Nav -->
1010
<div class="bg-surface-100-900 space-y-8 overflow-y-auto p-8">
11-
<header>
12-
<a class="text-sm bg-orange-500 p-2 font-mono font-bold text-white" href="/">skeleton-svelte</a>
11+
<header class="space-y-8">
12+
<a class="inline-block text-sm bg-orange-500 p-2 font-mono font-bold text-white" href="/">skeleton-svelte</a>
1313
<hr class="hr" />
1414
<LightSwitch></LightSwitch>
1515
<hr class="hr" />
1616
<!-- Components -->
1717
<div class="space-y-8">
18-
<span class="font-bold">Components</span>
18+
<div class="font-bold">Components</div>
1919
<nav class="text-sm flex flex-col gap-2">
2020
<a class="anchor" href="/components/accordions">Accordions</a>
2121
<a class="anchor" href="/components/app-bars">App Bars</a>
@@ -36,7 +36,7 @@
3636
</div>
3737
<!-- Svelte-Only -->
3838
<div class="space-y-8">
39-
<span class="font-bold">Svelte-Only</span>
39+
<div class="font-bold">Svelte-Only</div>
4040
<nav class="text-sm flex flex-col gap-2">
4141
<a class="anchor" href="/components/popover">Popover</a>
4242
<a class="anchor" href="/components/tooltip">Tooltip</a>

‎playgrounds/skeleton-svelte/src/routes/components/popover/+page.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
triggerBase="btn preset-tonal"
3939
contentBase="card bg-surface-200-800 p-4 space-y-4 max-w-[320px]"
4040
arrow
41-
arrowBackground="!bg-surface-200 dark:!bg-surface-800"
41+
arrowBackground="var(--color-surface-200-800)"
4242
>
4343
{#snippet trigger()}Click Me{/snippet}
4444
{#snippet content()}

‎playgrounds/skeleton-svelte/src/routes/components/tooltip/+page.svelte

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,31 @@
2020
<pre class="pre">{JSON.stringify(openState, null, 2)}</pre>
2121
<button class="btn preset-filled" onclick={tooltipOpen} disabled={openState}>Hover</button>
2222
</section>
23-
<section class="border border-surface-200-800 space-y-4 p-20 flex justify-center items-center">
23+
<section class="border border-surface-200-800 space-y-4 p-20 flex flex-col justify-center items-center">
24+
<!-- --- test --- -->
25+
<div class="relative bg-green-500 w-48">
26+
<div class="absolute bottom-0 left-0 right-0 z-10 card preset-filled-primary-500 p-2">
27+
<span>z: 10</span>
28+
</div>
29+
<div class="absolute bottom-0 left-0 right-0 z-20 translate-x-16 card preset-filled-secondary-500 p-2">
30+
<span>z: 20</span>
31+
</div>
32+
<div class="absolute bottom-0 left-0 right-0 z-30 translate-x-32 card preset-filled-tertiary-500 p-2">
33+
<span>z: 30</span>
34+
</div>
35+
</div>
36+
<!-- --- / --- -->
2437
<Tooltip
2538
open={openState}
2639
onOpenChange={(e) => (openState = e.open)}
2740
positioning={{ placement: 'top' }}
2841
triggerBase="btn preset-tonal"
2942
contentBase="card preset-filled p-4"
43+
zIndex="32"
44+
arrow
3045
>
3146
{#snippet trigger()}Hover Me{/snippet}
32-
{#snippet content()}This is a tooltip.{/snippet}
47+
{#snippet content()}This is a really long tooltip.{/snippet}
3348
</Tooltip>
3449
</section>
3550
</div>

0 commit comments

Comments
 (0)