From 6ffd8962c978fa6a4839163eb2aac123395d9251 Mon Sep 17 00:00:00 2001
From: Aidan Bleser <aidanbleser35@gmail.com>
Date: Tue, 13 Aug 2024 12:14:07 -0500
Subject: [PATCH] fix: Tabs overflow handling

---
 src/lib/components/shared/demo.svelte       |  2 +-
 src/lib/components/ui/tabs/tabs-list.svelte | 43 ++++++++++++++++++++-
 src/routes/tabs/+page.svelte                |  6 +++
 src/routes/tabs/overflow-tabs.svelte        | 29 ++++++++++++++
 tailwind.config.ts                          | 16 +++++++-
 5 files changed, 92 insertions(+), 4 deletions(-)
 create mode 100644 src/routes/tabs/overflow-tabs.svelte

diff --git a/src/lib/components/shared/demo.svelte b/src/lib/components/shared/demo.svelte
index 2c040bb..bfacafa 100644
--- a/src/lib/components/shared/demo.svelte
+++ b/src/lib/components/shared/demo.svelte
@@ -70,7 +70,7 @@
 		</p>
 	{/if}
 	<div
-		class="group relative mt-4 w-full overflow-x-auto rounded-xl border border-gray-alpha-400 bg-background-100 md:overflow-visible xl:mt-7"
+		class="group relative mt-4 overflow-x-auto rounded-xl border border-gray-alpha-400 bg-background-100 xl:mt-7"
 	>
 		<section id="component-demo" class={cn('w-full p-6', class_name)}>
 			<slot></slot>
diff --git a/src/lib/components/ui/tabs/tabs-list.svelte b/src/lib/components/ui/tabs/tabs-list.svelte
index b207642..782aa99 100644
--- a/src/lib/components/ui/tabs/tabs-list.svelte
+++ b/src/lib/components/ui/tabs/tabs-list.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { cn } from '$lib/utils.js';
 	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { onMount } from 'svelte';
 
 	type $$Props = TabsPrimitive.ListProps & {
 		variant?: 'default' | 'secondary';
@@ -9,16 +10,54 @@
 	let class_name: $$Props['class'] = undefined;
 	export let variant: $$Props['variant'] = 'default';
 	export { class_name as class };
+
+	let el: HTMLDivElement;
+
+	let preBlur = false;
+	let postBlur = false;
+
+	// When the tabs are scrolled it will determine whether or not to show the blur at the end
+	const scroll = () => {
+		if (el.offsetWidth + el.scrollLeft < el.scrollWidth) {
+			postBlur = true;
+		} else {
+			postBlur = false;
+		}
+
+		if (el.scrollLeft == 0) {
+			preBlur = false;
+		} else {
+			preBlur = true;
+		}
+	};
+
+	onMount(() => {
+		scroll(); // initially determine blur state
+		el.addEventListener('scroll', scroll); // on:scroll listener doesn't work on TabsPrimitive
+
+		return () => {
+			el.removeEventListener('scroll', scroll);
+		};
+	});
 </script>
 
-<!-- TODO: Add a no-scrollbar class. -->
+<!-- Make sure you have the `no-scrollbar` class in your tailwind.config file -->
+
 <TabsPrimitive.List
 	data-variant={variant}
+	bind:el
 	class={cn(
-		'group inline-flex w-full flex-wrap items-baseline gap-3 overflow-hidden overflow-x-auto p-1 text-gray-900 data-[variant=default]:[box-shadow:_0_-1px_0_var(--accents-2)_inset;]',
+		'group flex w-full items-baseline gap-3 overflow-hidden overflow-x-auto p-1 text-gray-900 no-scrollbar data-[variant=default]:[box-shadow:_0_-1px_0_var(--accents-2)_inset;]',
 		class_name
 	)}
 	{...$$restProps}
 >
+	{#if preBlur}
+		<span class="absolute left-4 h-10 w-8 bg-gray-100 bg-opacity-80 blur-lg"></span>
+	{/if}
 	<slot />
+	<!-- This indicates to the user that there is more content -->
+	{#if postBlur}
+		<span class="absolute right-4 h-10 w-8 bg-gray-100 bg-opacity-80 blur-lg"></span>
+	{/if}
 </TabsPrimitive.List>
diff --git a/src/routes/tabs/+page.svelte b/src/routes/tabs/+page.svelte
index 9f7e5f4..999d4f4 100644
--- a/src/routes/tabs/+page.svelte
+++ b/src/routes/tabs/+page.svelte
@@ -5,6 +5,8 @@
 	import default_code from './default.svelte?raw';
 	import DisableSpecificTabs from './disable-specific-tabs.svelte';
 	import disable_specific_tabs_code from './disable-specific-tabs.svelte?raw';
+	import Overflow from './overflow-tabs.svelte';
+	import overflow_code from './overflow-tabs.svelte?raw';
 	import Secondary from './secondary.svelte';
 	import secondary_code from './secondary.svelte?raw';
 	import WithIcons from './with-icons.svelte';
@@ -29,4 +31,8 @@
 	<Demo id="secondary" code={secondary_code}>
 		<Secondary />
 	</Demo>
+
+	<Demo id="overflow" code={overflow_code}>
+		<Overflow />
+	</Demo>
 </PageWrapper>
diff --git a/src/routes/tabs/overflow-tabs.svelte b/src/routes/tabs/overflow-tabs.svelte
new file mode 100644
index 0000000..1869860
--- /dev/null
+++ b/src/routes/tabs/overflow-tabs.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import * as Tabs from '$lib/components/ui/tabs';
+
+	const tabs = [
+		{ title: 'Apple', value: 'apple' },
+		{ title: 'Banana', value: 'banana' },
+		{ title: 'Orange', value: 'orange' },
+		{ title: 'Strawberry', value: 'strawberry' },
+		{ title: 'Mango', value: 'mango' },
+		{ title: 'Pineapple', value: 'pineapple' },
+		{ title: 'Grape', value: 'grape' },
+		{ title: 'Watermelon', value: 'watermelon' },
+		{ title: 'Peach', value: 'peach' },
+		{ title: 'Kiwi', value: 'kiwi' },
+		{ title: 'Cherry', value: 'cherry' },
+		{ title: 'Blueberry', value: 'blueberry' },
+		{ title: 'Pear', value: 'pear' },
+		{ title: 'Plum', value: 'plum' },
+		{ title: 'Raspberry', value: 'raspberry' }
+	];
+</script>
+
+<Tabs.Root value="apple">
+	<Tabs.List>
+		{#each tabs as { title, value }}
+			<Tabs.Trigger {value}>{title}</Tabs.Trigger>
+		{/each}
+	</Tabs.List>
+</Tabs.Root>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d46a88f..2eb5ab9 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -156,7 +156,21 @@ const config: Config = {
 			}
 		}
 	},
-	plugins: [typography]
+	plugins: [
+		typography,
+		function ({ addUtilities }) {
+			const newUtilities = {
+				'.no-scrollbar': {
+					'-ms-overflow-style': 'none',
+					'scrollbar-width': 'none',
+					'&::-webkit-scrollbar': {
+						display: 'none'
+					}
+				}
+			};
+			addUtilities(newUtilities);
+		}
+	]
 };
 
 export default config;