refactor: align tooltip variants with Figma design system

Replace variant prop (default/small/large) with size prop (small/large)
to match Figma component properties. Remove default variant that was
replicating PrimeVue Aura styling. Extract shared styles into cva base.
This commit is contained in:
dante01yoon
2026-03-21 21:36:22 +09:00
parent 2a0daf20da
commit ae07b4d3f8
2 changed files with 8 additions and 12 deletions

View File

@@ -17,7 +17,7 @@ const {
text = '',
side = 'top',
sideOffset = 4,
variant = 'default',
size = 'small',
delayDuration,
disabled = false,
class: className
@@ -25,7 +25,7 @@ const {
text?: string
side?: 'top' | 'bottom' | 'left' | 'right'
sideOffset?: number
variant?: NonNullable<TooltipVariants['variant']>
size?: NonNullable<TooltipVariants['size']>
delayDuration?: number
disabled?: boolean
class?: HTMLAttributes['class']
@@ -41,11 +41,10 @@ const {
<TooltipContent
:side="side"
:side-offset="sideOffset"
:class="cn(tooltipVariants({ variant }), className)"
:class="cn(tooltipVariants({ size }), className)"
>
{{ text }}
<TooltipArrow
v-if="variant !== 'default'"
:width="8"
:height="5"
class="fill-node-component-tooltip-surface"

View File

@@ -2,18 +2,15 @@ import type { VariantProps } from 'cva'
import { cva } from 'cva'
export const tooltipVariants = cva({
base: 'z-50 select-none',
base: 'z-50 select-none border border-node-component-tooltip-border bg-node-component-tooltip-surface px-4 py-2 text-node-component-tooltip shadow-none',
variants: {
variant: {
default: 'rounded-md bg-[#3f3f46] px-3 py-2 text-sm text-white shadow-sm',
small:
'rounded-lg border border-node-component-tooltip-border bg-node-component-tooltip-surface px-4 py-2 text-xs text-node-component-tooltip shadow-none',
large:
'max-w-75 rounded-sm border border-node-component-tooltip-border bg-node-component-tooltip-surface px-4 py-2 text-sm/tight font-normal text-node-component-tooltip shadow-none'
size: {
small: 'rounded-lg text-xs',
large: 'max-w-75 rounded-sm text-sm/tight font-normal'
}
},
defaultVariants: {
variant: 'default'
size: 'small'
}
})