From 88eb4cac974194b13a34281f76d4771f125685a2 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Wed, 5 Jun 2024 15:46:07 +0200 Subject: [PATCH] fix(Tabs): improve config --- src/theme/tabs.ts | 8 +- .../__snapshots__/Tabs.spec.ts.snap | 140 +++++++++--------- 2 files changed, 74 insertions(+), 74 deletions(-) diff --git a/src/theme/tabs.ts b/src/theme/tabs.ts index 11114217..51e36d53 100644 --- a/src/theme/tabs.ts +++ b/src/theme/tabs.ts @@ -3,8 +3,8 @@ export default (config: { colors: string[] }) => ({ root: 'flex items-center gap-2', list: 'relative flex p-1 group', indicator: 'absolute transition-[translate,width] duration-200', - trigger: 'relative inline-flex items-center justify-center gap-1.5 shrink-0 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none', - content: 'focus:outline-none', + trigger: 'relative inline-flex items-center justify-center gap-1.5 shrink-0 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none', + content: 'focus:outline-none w-full', leadingIcon: 'shrink-0 size-5', leadingAvatar: 'shrink-0', label: 'truncate' @@ -18,6 +18,7 @@ export default (config: { colors: string[] }) => ({ variant: { pill: { list: 'bg-gray-50 dark:bg-gray-800 rounded-lg', + trigger: 'flex-1', indicator: 'rounded-md shadow-sm' }, link: { @@ -33,8 +34,7 @@ export default (config: { colors: string[] }) => ({ }, vertical: { list: 'flex-col items-center', - indicator: 'top-0 h-[--radix-tabs-indicator-size] translate-y-[--radix-tabs-indicator-position]', - content: 'flex-1' + indicator: 'top-0 h-[--radix-tabs-indicator-size] translate-y-[--radix-tabs-indicator-position]' } } }, diff --git a/test/components/__snapshots__/Tabs.spec.ts.snap b/test/components/__snapshots__/Tabs.spec.ts.snap index 93e30125..f7e04cc1 100644 --- a/test/components/__snapshots__/Tabs.spec.ts.snap +++ b/test/components/__snapshots__/Tabs.spec.ts.snap @@ -3,172 +3,172 @@ exports[`Tabs > renders with class correctly 1`] = ` "
-
+
-
This is the content shown for Tab1
- - +
This is the content shown for Tab1
+ +
" `; exports[`Tabs > renders with color black correctly 1`] = ` "
-
+
-
This is the content shown for Tab1
- - +
This is the content shown for Tab1
+ +
" `; exports[`Tabs > renders with color green correctly 1`] = ` "
-
+
-
This is the content shown for Tab1
- - +
This is the content shown for Tab1
+ +
" `; exports[`Tabs > renders with color primary correctly 1`] = ` "
-
+
-
This is the content shown for Tab1
- - +
This is the content shown for Tab1
+ +
" `; exports[`Tabs > renders with color red correctly 1`] = ` "
-
+
-
This is the content shown for Tab1
- - +
This is the content shown for Tab1
+ +
" `; exports[`Tabs > renders with color white correctly 1`] = ` "
-
+
-
This is the content shown for Tab1
- - +
This is the content shown for Tab1
+ +
" `; exports[`Tabs > renders with content slot correctly 1`] = ` "
-
+
-
Content slot
- - +
Content slot
+ +
" `; exports[`Tabs > renders with custom slot correctly 1`] = ` "
-
+
-
This is the content shown for Tab1
- - +
This is the content shown for Tab1
+ +
" `; exports[`Tabs > renders with default slot correctly 1`] = ` "
-
+
-
This is the content shown for Tab1
- - +
This is the content shown for Tab1
+ +
" `; exports[`Tabs > renders with defaultValue correctly 1`] = ` "
-
+
- -
And, this is the content for Tab2
- + +
And, this is the content for Tab2
+
" `; exports[`Tabs > renders with items correctly 1`] = ` "
-
+
-
This is the content shown for Tab1
- - +
This is the content shown for Tab1
+ +
" `; exports[`Tabs > renders with leading slot correctly 1`] = ` "
-
+
-
This is the content shown for Tab1
- - +
This is the content shown for Tab1
+ +
" `; exports[`Tabs > renders with modelValue correctly 1`] = ` "
-
+
- -
And, this is the content for Tab2
- + +
And, this is the content for Tab2
+
" `; exports[`Tabs > renders with orientation vertical correctly 1`] = ` "
-
+
-
This is the content shown for Tab1
- - +
This is the content shown for Tab1
+ +
" `; exports[`Tabs > renders with trailing slot correctly 1`] = ` "
-
+
-
This is the content shown for Tab1
- - +
This is the content shown for Tab1
+ +
" `; exports[`Tabs > renders with ui correctly 1`] = ` "
-
+
This is the content shown for Tab1
@@ -179,29 +179,29 @@ exports[`Tabs > renders with ui correctly 1`] = ` exports[`Tabs > renders with variant link correctly 1`] = ` "
-
+
-
This is the content shown for Tab1
- - +
This is the content shown for Tab1
+ +
" `; exports[`Tabs > renders with variant pill correctly 1`] = ` "
-
+
-
This is the content shown for Tab1
- - +
This is the content shown for Tab1
+ +
" `; exports[`Tabs > renders without content correctly 1`] = ` "
-
+
"