cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

🐛 fix: console error becasue button inside button

Browse Source
This commit is contained in:
Wahyu Kurniawan 2024-02-24 04:52:07 +07:00
parent cfeb85f5c4
commit 0bcb7ca4d6
No known key found for this signature in database
GPG Key ID: 040A1549143A8E33
2 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/frontend/src/components/shared/Tabs/Tabs.theme.ts
View File

@ -61,6 +61,7 @@ export const tabsTheme = tv({
'data-[orientation=horizontal]:focus-ring',
// Vertical
'data-[orientation=vertical]:gap-2',
'data-[orientation=vertical]:justify-start',
],
triggerList: [
'flex',

25
packages/frontend/src/components/shared/Tabs/TabsTrigger/TabsTrigger.tsx
View File

@ -35,20 +35,23 @@ const TabsTrigger = forwardRef<
// Disabled focus state for horizontal tabs
tabIndex={orientation === 'horizontal' ? -1 : undefined}
className={triggerWrapper({ className })}
asChild
{...props}
>
{/* Need to add button in the trigger children because there's focus state inside the children */}
<button
data-orientation={orientation}
// Disabled focus state for vertical tabs
tabIndex={orientation === 'vertical' ? -1 : undefined}
className={trigger()}
>
{/* Put the icon on the left of the text for veritcal tab */}
{orientation === 'vertical' && icon}
{children}
{/* Put the icon on the right of the text for horizontal tab */}
{orientation === 'horizontal' && icon}
<button className={triggerWrapper({ className })}>
<span
// Disabled focus state for vertical tabs
tabIndex={orientation === 'horizontal' ? 0 : -1}
data-orientation={orientation}
className={trigger()}
>
{/* Put the icon on the left of the text for veritcal tab */}
{orientation === 'vertical' && icon}
{children}
{/* Put the icon on the right of the text for horizontal tab */}
{orientation === 'horizontal' && icon}
</span>
</button>
</Trigger>
);