From 80c309840b26c501328fc1f2662e59c36bec9b41 Mon Sep 17 00:00:00 2001
From: Thoriq Firdaus <2067467+tfirdaus@users.noreply.github.com>
Date: Wed, 25 Dec 2024 22:48:01 +0700
Subject: [PATCH] Fix tab item on hover (#32)

---
 packages/kubrick/src/Box/Box.module.scss   |  7 ++++++-
 packages/kubrick/src/Tabs/TabItem.tsx      |  6 +++---
 packages/kubrick/src/Tabs/Tabs.module.scss |  1 +
 packages/kubrick/src/Tabs/Tabs.test.tsx    | 19 +++++++++++++++++++
 4 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/packages/kubrick/src/Box/Box.module.scss b/packages/kubrick/src/Box/Box.module.scss
index 062c3e0..caeb7ef 100644
--- a/packages/kubrick/src/Box/Box.module.scss
+++ b/packages/kubrick/src/Box/Box.module.scss
@@ -1,4 +1,4 @@
-@use 'sass:color';
+@use 'sass:color' as color;
 @use '../../scss/variables/colors';
 
 :global(.wp-core-ui) {
@@ -79,6 +79,7 @@
 
 			&:hover:not([aria-selected="true"], [aria-disabled="true"]) {
 				color: colors.$blue-500;
+				background-color: transparent;
 			}
 		}
 
@@ -126,6 +127,10 @@
 				border-bottom: 1px solid transparent;
 				border-left: 0;
 				transition: background-color 0.1s linear;
+
+				&:hover:not([aria-selected="true"], [aria-disabled="true"]) {
+					background-color: color.adjust(colors.$gray-10, $lightness: -5);
+				}
 			}
 
 			:global(.kubrick-Tabs-item[data-focus-visible="true"]) {
diff --git a/packages/kubrick/src/Tabs/TabItem.tsx b/packages/kubrick/src/Tabs/TabItem.tsx
index c2596c9..892f25f 100644
--- a/packages/kubrick/src/Tabs/TabItem.tsx
+++ b/packages/kubrick/src/Tabs/TabItem.tsx
@@ -17,9 +17,9 @@ export const TabItem = (props: TabItemProps) => {
 	const { componentProps, rootProps } = useProps('Tabs', props);
 	const { isDisabled, isSelected, tabProps } = useTab({ key }, state, ref);
 	const { focusProps, isFocusVisible } = useFocusRing(componentProps);
-	const { navigate, url } = useTabsProvider();
+	const { context, navigate, url } = useTabsProvider();
 
-	if (navigate && url) {
+	if (navigate && url && !context) {
 		const uri = new URL(url);
 
 		uri?.searchParams.set(navigate, `${key}`);
@@ -34,7 +34,7 @@ export const TabItem = (props: TabItemProps) => {
 				data-disabled={isDisabled || undefined}
 				data-focus-visible={isFocusVisible || undefined}
 				data-selected={isSelected || undefined}
-				href={`${uri?.toString()}`}
+				href={isDisabled ? undefined : uri?.toString()}
 				ref={ref}
 			>
 				{rendered}
diff --git a/packages/kubrick/src/Tabs/Tabs.module.scss b/packages/kubrick/src/Tabs/Tabs.module.scss
index a7be622..9d5a2a9 100644
--- a/packages/kubrick/src/Tabs/Tabs.module.scss
+++ b/packages/kubrick/src/Tabs/Tabs.module.scss
@@ -23,6 +23,7 @@
 			&:hover:not([data-disabled="true"], [data-selected="true"]) {
 				color: colors.$gray-700;
 				cursor: pointer;
+				background-color: colors.$white;
 			}
 
 			&[data-selected="true"] {
diff --git a/packages/kubrick/src/Tabs/Tabs.test.tsx b/packages/kubrick/src/Tabs/Tabs.test.tsx
index 43268be..7624137 100644
--- a/packages/kubrick/src/Tabs/Tabs.test.tsx
+++ b/packages/kubrick/src/Tabs/Tabs.test.tsx
@@ -88,3 +88,22 @@ it('should render item as link', () => {
 	expect(payments).toHaveRole('link');
 	expect(payments).toHaveAttribute('href', 'http://localhost/app?tab=payments');
 });
+
+it('should not render link url when disabled', () => {
+	render(
+		<TabsProvider navigate url="http://localhost/app">
+			<Tabs disabledKeys={['general']} />
+		</TabsProvider>
+	);
+
+	const general = screen.queryByText('General');
+	const shipping = screen.queryByText('Shipping');
+	const payments = screen.queryByText('Payments');
+
+	expect(general).toHaveRole('generic');
+	expect(general).not.toHaveAttribute('href');
+	expect(shipping).toHaveRole('link');
+	expect(shipping).toHaveAttribute('href', 'http://localhost/app?tab=shipping');
+	expect(payments).toHaveRole('link');
+	expect(payments).toHaveAttribute('href', 'http://localhost/app?tab=payments');
+});