From 7807f1cbf85d71d94f8d78b57f726a42d8f8a88a Mon Sep 17 00:00:00 2001
From: Dennis Collaris <d.a.c.collaris@uu.nl>
Date: Tue, 5 Nov 2024 08:58:51 +0000
Subject: [PATCH] fix: prevent warning about invalid nesting of button in DOM
---
libs/shared/lib/components/tabs/Tab.tsx | 9 ++++-----
1 file changed, 4 insertions(+), 5 deletions(-)
diff --git a/libs/shared/lib/components/tabs/Tab.tsx b/libs/shared/lib/components/tabs/Tab.tsx
index 49a66667f..3d8aad9f6 100644
--- a/libs/shared/lib/components/tabs/Tab.tsx
+++ b/libs/shared/lib/components/tabs/Tab.tsx
@@ -30,7 +30,6 @@ export const Tabs = (props: { children: React.ReactNode; tabType?: TabTypes }) =
export const Tab = ({
activeTab,
text,
- variant = 'ghost',
className = '',
...props
}: ButtonProps & {
@@ -43,7 +42,7 @@ export const Tab = ({
if (context.tabType === 'inline') {
className += ` pl-2 pr-1 gap-1 relative h-full text-secondary-500 border-secondary-200 before:content-['']
before:absolute before:left-0 before:bottom-0 before:h-[2px] before:w-full
- ${activeTab ? 'before:bg-primary-500' : 'before:bg-transparent hover:before:bg-secondary-300 hover:bg-secondary-200'}`;
+ ${activeTab ? 'before:bg-primary-500 hover:bg-inherit' : 'before:bg-transparent hover:before:bg-secondary-300 hover:text-dark hover:bg-secondary-200'}`;
} else if (context.tabType === 'rounded') {
className += ` -mb-px py-4 px-4 text-sm text-secondary-500 text-center border rounded-t-lg rounded-b-none
${activeTab ? 'active text-secondary-950 border-l-secondary-300 border-r-secondary-300 border-t-secondary-300 border-b-white' : ''}
@@ -53,10 +52,10 @@ export const Tab = ({
}
return (
- <Button className={className} label={text} variant={variant} size="xs" {...props}>
- {/* <p className={`text-xs font-semibold ${activeTab && 'text-secondary-950'}`}>{text}</p> */}
+ <div className={`btn btn-ghost btn-xs rounded-none ${className}`} {...props}>
+ <span>{text}</span>
{props.children}
- </Button>
+ </div>
);
};
--
GitLab