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', 'data-[orientation=horizontal]:focus-ring',
// Vertical // Vertical
'data-[orientation=vertical]:gap-2', 'data-[orientation=vertical]:gap-2',
'data-[orientation=vertical]:justify-start',
], ],
triggerList: [ triggerList: [
'flex', '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 // Disabled focus state for horizontal tabs
tabIndex={orientation === 'horizontal' ? -1 : undefined} tabIndex={orientation === 'horizontal' ? -1 : undefined}
className={triggerWrapper({ className })} className={triggerWrapper({ className })}
asChild
{...props} {...props}
> >
{/* Need to add button in the trigger children because there's focus state inside the children */} {/* Need to add button in the trigger children because there's focus state inside the children */}
<button <button className={triggerWrapper({ className })}>
data-orientation={orientation} <span
// Disabled focus state for vertical tabs // Disabled focus state for vertical tabs
tabIndex={orientation === 'vertical' ? -1 : undefined} tabIndex={orientation === 'horizontal' ? 0 : -1}
className={trigger()} data-orientation={orientation}
> className={trigger()}
{/* Put the icon on the left of the text for veritcal tab */} >
{orientation === 'vertical' && icon} {/* Put the icon on the left of the text for veritcal tab */}
{children} {orientation === 'vertical' && icon}
{/* Put the icon on the right of the text for horizontal tab */} {children}
{orientation === 'horizontal' && icon} {/* Put the icon on the right of the text for horizontal tab */}
{orientation === 'horizontal' && icon}
</span>
</button> </button>
</Trigger> </Trigger>
); );