mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
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:
@@ -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"
|
||||
|
||||
@@ -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'
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user