fix(frontend): add size prop to tabs (#894)

windmill-labs · Nov 14, 2022 · e8d3a0e · e8d3a0e
1 parent 1eedbfa
commit e8d3a0e
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git a/frontend/src/lib/components/common/tabs/Tab.svelte b/frontend/src/lib/components/common/tabs/Tab.svelte
@@ -4,16 +4,28 @@
 	import type { TabsContext } from './Tabs.svelte'
 
 	export let value: string
+	export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm'
+
+	const fontSizeClasses = {
+		xs: 'text-xs',
+		sm: 'text-sm',
+		md: 'text-md',
+		lg: 'text-lg',
+		xl: 'text-xl'
+	}
 
 	const { selected, update } = getContext<TabsContext>('Tabs')
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
 	class={classNames(
 		value === $selected
-			? 'border-b-2 border-gray-900 text-gray-900 text-sm'
-			: 'text-sm hover:border-b-2 hover:border-gray-300',
-		' py-1 px-4 cursor-pointer transition-all ease-linear  font-medium'
+			? 'border-b-2 border-gray-600 text-gray-800 '
+			: 'hover:border-b-2 hover:border-gray-300 text-gray-500',
+		'py-1 px-4 cursor-pointer transition-all ease-linear font-medium',
+		fontSizeClasses[size],
+		$$props.class
 	)}
 	on:click={() => update(value)}
 >

diff --git a/frontend/src/lib/components/common/tabs/Tabs.svelte b/frontend/src/lib/components/common/tabs/Tabs.svelte
@@ -9,6 +9,7 @@
 	import { setContext } from 'svelte'
 	import { writable, type Writable } from 'svelte/store'
 	import { createEventDispatcher } from 'svelte'
+	import { classNames } from '$lib/utils'
 
 	const dispatch = createEventDispatcher()
 
@@ -34,7 +35,10 @@
 </script>
 
 <div
-	class="border-b border-gray-200 flex flex-row whitespace-nowrap overflow-y-auto scrollbar-hidden {$$props.class}"
+	class={classNames(
+		'border-b border-gray-200 flex flex-row whitespace-nowrap overflow-y-auto scrollbar-hidden',
+		$$props.class
+	)}
 >
 	<slot />
 </div>

diff --git a/frontend/src/lib/components/scriptEditor/LogPanel.svelte b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
@@ -66,9 +66,9 @@
 </Drawer>
 
 <Tabs bind:selected={selectedTab}>
-	<Tab value="logs"><span class="text-xs">Logs/Result</span></Tab>
-	<Tab value="history"><span class="text-xs">History</span></Tab>
-	<Tab value="last_save"><span class="text-xs">Last save</span></Tab>
+	<Tab value="logs" size="xs">Logs/Result</Tab>
+	<Tab value="history" size="xs">History</Tab>
+	<Tab value="last_save" size="xs">Last save</Tab>
 
 	<svelte:fragment slot="content">
 		<!--