Merge branch 'next' into feat/disabled-for-modal

skeletonlabs · Feb 7, 2025 · 56cea05 · 56cea05
2 parents 1b0c8df + 4439350
commit 56cea05
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 0 deletions.
diff --git a/.changeset/brave-numbers-glow.md b/.changeset/brave-numbers-glow.md
@@ -0,0 +1,5 @@
+---
+'@skeletonlabs/skeleton-svelte': patch
+---
+
+feat: Implement `arrow` for Tooltip
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -1,6 +1,7 @@
 name: 🐞 Bug
 description: Report an issue or bug
 labels: [bug]
+type: Bug
 body:
   - type: textarea
     attributes:
@@ -29,6 +30,26 @@ body:
     id: reproduction
     attributes:
       label: Link to Reproduction / Stackblitz
+  - type: textarea
+    attributes:
+      label: Environment Information
+      description: Relevant information about your environment. Use `npx envinfo --system --npmPackages "@skeletonlabs/*" --binaries --browsers` to get this information.
+      placeholder: |
+        System:
+          OS: Windows 11 10.0.26100
+          CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-12400
+          Memory: 4.72 GB / 15.78 GB
+        Binaries:
+          Node: 22.11.0 - C:\Program Files\nodejs\node.EXE
+          Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
+          npm: 10.2.0 - C:\Program Files\nodejs\npm.CMD
+          pnpm: 9.6.0 - ~\AppData\Local\pnpm\pnpm.CMD
+        Browsers:
+          Edge: Chromium (130.0.2849.46)
+          Internet Explorer: 11.0.26100.1882
+        npmPackages:
+          @skeletonlabs/skeleton: ^3.0.0-next.10 => 3.0.0-next.10
+          @skeletonlabs/skeleton-react: ^1.0.0-next.13 => 1.0.0-next.13
   - type: textarea
     attributes:
       label: More Information

diff --git a/.github/ISSUE_TEMPLATE/docs_issue.yml b/.github/ISSUE_TEMPLATE/docs_issue.yml
@@ -1,6 +1,7 @@
 name: 📗 Report Docs Issue
 description: Use this to report a typo or incorrect information.
 labels: [documentation]
+type: Task
 body:
   - type: input
     id: link

diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -1,6 +1,7 @@
 name: 🛠️ Request New Feature
 description: Let us know what you would like to see added.
 labels: ['feature request']
+type: Feature
 body:
   - type: textarea
     id: description

diff --git a/packages/skeleton-svelte/src/lib/components/Tooltip/Tooltip.svelte b/packages/skeleton-svelte/src/lib/components/Tooltip/Tooltip.svelte
@@ -9,6 +9,7 @@
 	let {
 		open = $bindable(false),
 		disabled = false,
+		arrow = false,
 		// Base
 		base = '',
 		classes = '',
@@ -24,6 +25,10 @@
 		contentBase = '',
 		contentBackground = '',
 		contentClasses = '',
+		// Arrow
+		arrowBase = '',
+		arrowBackground = '!bg-white',
+		arrowClasses = '',
 		// Snippets
 		trigger,
 		content,
@@ -65,10 +70,23 @@
 	<!-- Tooltip Content -->
 	{#if api.open}
 		<div {...api.getPositionerProps()} transition:fade={{ duration: 100 }} class="{positionerBase} {positionerZIndex} {positionerClasses}">
+			<!-- Arrow -->
+			{#if arrow}
+				<div {...api.getArrowProps()}>
+					<div {...api.getArrowTipProps()} class="{arrowBase} {arrowBackground} {arrowClasses}"></div>
+				</div>
+			{/if}
 			<!-- Snippet Content -->
 			<div {...api.getContentProps()} class="{contentBase} {contentBackground} {contentClasses}">
 				{@render content?.()}
 			</div>
 		</div>
 	{/if}
 </span>
+
+<style>
+	:global([data-part='arrow']) {
+		--arrow-size: 10px;
+		--arrow-background: white;
+	}
+</style>
diff --git a/packages/skeleton-svelte/src/lib/components/Tooltip/types.ts b/packages/skeleton-svelte/src/lib/components/Tooltip/types.ts
@@ -6,6 +6,8 @@ export interface TooltipProps extends Omit<tooltip.Context, 'id' | 'open'> {
 	open?: boolean;
 	/** Disable the trigger element of the tooltip */
 	disabled?: boolean;
+	/** Enable display of the popover arrow. */
+	arrow?: boolean;
 
 	// Base ---
 	/** Set base classes for the root element. */
@@ -37,6 +39,14 @@ export interface TooltipProps extends Omit<tooltip.Context, 'id' | 'open'> {
 	/** Provide arbitrary styles for the content. */
 	contentClasses?: string;
 
+	// Arrow ---
+	/** Set base classes for the arrow. */
+	arrowBase?: string;
+	/** Set background classes for the arrow. */
+	arrowBackground?: string;
+	/** Provide arbitrary classes for the arrow. */
+	arrowClasses?: string;
+
 	// Snippets ---
 	/** Provide the template contents inside the trigger button. */
 	trigger?: Snippet;

diff --git a/sites/next.skeleton.dev/src/examples/components/popover/ExampleTooltip.svelte b/sites/next.skeleton.dev/src/examples/components/popover/ExampleTooltip.svelte
@@ -9,6 +9,7 @@
 	triggerBase="underline"
 	contentBase="card preset-filled p-4"
 	openDelay={200}
+	arrow
 >
 	{#snippet trigger()}Hover Me{/snippet}
 	{#snippet content()}This is a tooltip.{/snippet}