Skip to content

Commit 6cdcdfc

Browse files
deboer-timdeboer-tim
committed
chore: revert to sharing tip prop for string or snippet
Uses the same method as here: sveltejs/svelte#9774 (comment) to tell if the property is a string or Snippet, which is both simpler and avoids extra migration for clients. Signed-off-by: Tim deBoer <[email protected]>
1 parent a92c567 commit 6cdcdfc

File tree

7 files changed

+93
-130
lines changed

7 files changed

+93
-130
lines changed

‎packages/renderer/src/lib/preferences/PreferencesKubernetesContextsRendering.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -320,7 +320,7 @@ async function connect(contextName: string): Promise<void> {
320320
<div class="ml-1 text-xs text-[var(--pd-status-dead)]" aria-label="Error">
321321
<Tooltip>
322322
<div>ERROR</div>
323-
{#snippet tipSnippet()}
323+
{#snippet tip()}
324324
<div class="p-2">
325325
{#if context.errorMessage}
326326
{#each context.errorMessage.split('\n').filter(l => l) as line, index (index)}

‎packages/renderer/src/lib/statusbar/ProviderWidget.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ let connections = $derived.by(() => {
3636
</script>
3737

3838
<Tooltip top={!tooltipTopRight} topRight={tooltipTopRight} class="mb-[20px]">
39-
{#snippet tipSnippet()}
39+
{#snippet tip()}
4040
<div class="py-2 px-4" hidden={disableTooltip}>
4141
<div class="flex flex-col">
4242
{#if entry.updateInfo?.version}

‎packages/renderer/src/lib/ui/Label.spec.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@ test('Expect tooltip', async () => {
4747
});
4848
const label = screen.getByText(tip);
4949
expect(label).toBeInTheDocument();
50-
expect(label.parentElement?.firstChild).toBeInTheDocument();
5150
});
5251

5352
test('Expect role to be defined', async () => {

‎packages/ui/src/lib/tooltip/Tooltip.spec.ts

Lines changed: 73 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**********************************************************************
2-
* Copyright (C) 2024 Red Hat, Inc.
2+
* Copyright (C) 2024-2025 Red Hat, Inc.
33
*
44
* Licensed under the Apache License, Version 2.0 (the "License");
55
* you may not use this file except in compliance with the License.
@@ -19,13 +19,43 @@
1919
import '@testing-library/jest-dom/vitest';
2020

2121
import { render, screen } from '@testing-library/svelte';
22-
import { tick } from 'svelte';
22+
import { createRawSnippet, tick } from 'svelte';
2323
import { expect, test } from 'vitest';
2424

2525
import Tooltip from './Tooltip.svelte';
2626
import { tooltipHidden } from './tooltip-store';
2727

28-
test('tooltip is not empty string when tooltipHidden value false', async () => {
28+
const tip = 'test';
29+
30+
test('Expect basic prop styling', async () => {
31+
render(Tooltip, { tip: tip });
32+
33+
const element = screen.getByLabelText('tooltip');
34+
expect(element).toBeInTheDocument();
35+
expect(element).toHaveClass('bg-[var(--pd-tooltip-bg)]');
36+
expect(element).toHaveClass('text-[var(--pd-tooltip-text)]');
37+
expect(element).toHaveClass('border-[var(--pd-tooltip-border)]');
38+
expect(element).toHaveClass('border-[1px]');
39+
});
40+
41+
test('Expect basic slot styling', async () => {
42+
render(Tooltip, {
43+
tip: createRawSnippet(() => {
44+
return {
45+
render: (): string => 'test',
46+
};
47+
}),
48+
});
49+
50+
const element = screen.getByLabelText('tooltip');
51+
expect(element).toBeInTheDocument();
52+
expect(element).toHaveClass('bg-[var(--pd-tooltip-bg)]');
53+
expect(element).toHaveClass('text-[var(--pd-tooltip-text)]');
54+
expect(element).toHaveClass('border-[var(--pd-tooltip-border)]');
55+
expect(element).toHaveClass('border-[1px]');
56+
});
57+
58+
test('Expect tooltip is not empty string when tooltipHidden value false', async () => {
2959
tooltipHidden.set(false);
3060

3161
render(Tooltip, { tip: 'test 1' });
@@ -40,10 +70,49 @@ test('tooltip is not empty string when tooltipHidden value false', async () => {
4070
expect(screen.queryByText('test 1')).toBeInTheDocument();
4171
});
4272

43-
test('tooltip z order', async () => {
73+
test('Expect tooltip z order', async () => {
4474
render(Tooltip, { tip: 'my tooltip' });
4575

4676
// get the tooltip
4777
const tooltip = screen.getByText('my tooltip');
4878
expect(tooltip.parentElement).toHaveClass('z-60');
4979
});
80+
81+
test('Expect class styling to apply to tip', async () => {
82+
render(Tooltip, { class: 'my-[5px] mx-[10px]', tip });
83+
84+
const slotElement = screen.getByLabelText('tooltip');
85+
expect(slotElement).toHaveClass('my-[5px] mx-[10px]');
86+
});
87+
88+
test('Expect class styling to apply to tip snippet', async () => {
89+
render(Tooltip, {
90+
class: 'my-[5px] mx-[10px]',
91+
tip: createRawSnippet(() => {
92+
return {
93+
render: (): string => 'test',
94+
};
95+
}),
96+
});
97+
98+
const slotElement = screen.getByLabelText('tooltip');
99+
expect(slotElement).toHaveClass('my-[5px] mx-[10px]');
100+
});
101+
102+
function createTest(props: Record<string, boolean>, locationName: string, expectedStyle = locationName): void {
103+
test(`Expect property ${locationName} to add ${expectedStyle} class to parent element`, () => {
104+
render(Tooltip, { tip, ...props });
105+
const element = screen.getByLabelText('tooltip');
106+
expect(element).toBeInTheDocument();
107+
expect(element.parentElement).toHaveClass(expectedStyle);
108+
});
109+
}
110+
111+
createTest({ left: true }, 'left');
112+
createTest({ right: true }, 'right');
113+
createTest({ bottom: true }, 'bottom');
114+
createTest({ top: true }, 'top');
115+
createTest({ topLeft: true }, 'topLeft', 'top-left');
116+
createTest({ topRight: true }, 'topRight', 'top-right');
117+
createTest({ bottomLeft: true }, 'bottomLeft', 'bottom-left');
118+
createTest({ bottomRight: true }, 'bottomRight', 'bottom-right');

‎packages/ui/src/lib/tooltip/Tooltip.svelte

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ import type { Snippet } from 'svelte';
5555
import { tooltipHidden } from './tooltip-store';
5656
5757
interface Props {
58-
tip?: string;
58+
tip?: string | Snippet;
5959
top?: boolean;
6060
topLeft?: boolean;
6161
topRight?: boolean;
@@ -66,7 +66,6 @@ interface Props {
6666
left?: boolean;
6767
class?: string;
6868
'aria-label'?: string;
69-
tipSnippet?: Snippet;
7069
children?: Snippet;
7170
}
7271
let {
@@ -81,9 +80,12 @@ let {
8180
left = false,
8281
class: className = '',
8382
'aria-label': ariaLabel,
84-
tipSnippet = undefined,
8583
children = undefined,
8684
}: Props = $props();
85+
86+
function isSnippet(obj: string | Snippet): obj is Snippet {
87+
return obj.length === 1;
88+
}
8789
</script>
8890

8991
<div class="relative inline-block">
@@ -101,18 +103,19 @@ let {
101103
class:bottom-left={bottomLeft}
102104
class:bottom-right={bottomRight}>
103105
{#if tip && !$tooltipHidden}
104-
<div
105-
class="inline-block py-2 px-4 rounded-md bg-[var(--pd-tooltip-bg)] text-[var(--pd-tooltip-text)] border-[1px] border-[var(--pd-tooltip-border)] {className}"
106-
aria-label="{ariaLabel ?? 'tooltip'}">
107-
{tip}
108-
</div>
109-
{/if}
110-
{#if tipSnippet && !tip && !$tooltipHidden}
111-
<div
112-
class="inline-block rounded-md bg-[var(--pd-tooltip-bg)] text-[var(--pd-tooltip-text)] border-[1px] border-[var(--pd-tooltip-border)] {className}"
113-
aria-label="{ariaLabel ?? 'tooltip'}">
114-
{@render tipSnippet?.()}
115-
</div>
106+
{#if !isSnippet(tip)}
107+
<div
108+
class="inline-block py-2 px-4 rounded-md bg-[var(--pd-tooltip-bg)] text-[var(--pd-tooltip-text)] border-[1px] border-[var(--pd-tooltip-border)] {className}"
109+
aria-label="{ariaLabel ?? 'tooltip'}">
110+
{tip}
111+
</div>
112+
{:else}
113+
<div
114+
class="inline-block rounded-md bg-[var(--pd-tooltip-bg)] text-[var(--pd-tooltip-text)] border-[1px] border-[var(--pd-tooltip-border)] {className}"
115+
aria-label="{ariaLabel ?? 'tooltip'}">
116+
{@render tip()}
117+
</div>
118+
{/if}
116119
{/if}
117120
</div>
118121
</div>

‎packages/ui/src/lib/tooltip/TooltipSpec.spec.ts

Lines changed: 0 additions & 75 deletions
This file was deleted.

‎packages/ui/src/lib/tooltip/TooltipSpec.svelte

Lines changed: 0 additions & 33 deletions
This file was deleted.

0 commit comments

Comments
 (0)