Fix tab item on hover (#32)

syntatis · Dec 25, 2024 · 80c3098 · 80c3098
1 parent d8fabd8
commit 80c3098
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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');
+});