mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-19 22:09:37 +00:00
dee494f019
## Summary We've had some reports of issues selecting inputs/nodes when trying to use the builder in LiteGraph mode and due to the complexity of the canvas system, we're going to enable Nodes 2.0 when entering the builder to ensure the best experience. ## Changes - **What**: - When entering builder select mode automatically switch to Nodes 2.0 - Extract reusable component from features toast - Show popup telling user the mode was changed - Add hidden setting for storing "don't show again" on the switch popup ## Review Focus - I have not removed the LiteGraph selection code in case someone still manages to enter the builder in LiteGraph mode, this should be cleaned up in future ## Screenshots (if applicable) <img width="423" height="224" alt="image" src="https://github.com/user-attachments/assets/cc2591bc-e5dc-47ef-a3c6-91ca7b6066ff" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10337-feat-App-mode-Switch-to-Nodes-2-0-when-entering-builder-3296d73d3650818e9f3cdaac59d15609) by [Unito](https://www.unito.io)
70 lines
2.4 KiB
TypeScript
70 lines
2.4 KiB
TypeScript
import type { VariantProps } from 'cva'
|
|
import { cva } from 'cva'
|
|
|
|
export const buttonVariants = cva({
|
|
base: 'relative inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0',
|
|
variants: {
|
|
variant: {
|
|
secondary:
|
|
'text-secondary-foreground bg-secondary-background hover:bg-secondary-background-hover',
|
|
primary:
|
|
'bg-primary-background text-base-foreground hover:bg-primary-background-hover',
|
|
inverted:
|
|
'bg-base-foreground text-base-background hover:bg-base-foreground/80',
|
|
destructive:
|
|
'bg-destructive-background text-base-foreground hover:bg-destructive-background-hover',
|
|
textonly:
|
|
'bg-transparent text-base-foreground hover:bg-secondary-background-hover',
|
|
'muted-textonly':
|
|
'bg-transparent text-muted-foreground hover:bg-secondary-background-hover',
|
|
'destructive-textonly':
|
|
'bg-transparent text-destructive-background hover:bg-destructive-background/10',
|
|
link: 'bg-transparent text-muted-foreground hover:text-base-foreground',
|
|
'overlay-white': 'bg-white text-gray-600 hover:bg-white/90',
|
|
base: 'bg-base-background text-base-foreground hover:bg-secondary-background-hover',
|
|
gradient:
|
|
'border-transparent bg-(image:--subscription-button-gradient) text-white hover:opacity-90'
|
|
},
|
|
size: {
|
|
sm: 'h-6 rounded-sm px-2 py-1 text-xs',
|
|
md: 'h-8 rounded-lg p-2 text-xs',
|
|
lg: 'h-10 rounded-lg px-4 py-2 text-sm',
|
|
'icon-sm': 'size-5 p-0',
|
|
icon: 'size-8',
|
|
'icon-lg': 'size-10',
|
|
unset: ''
|
|
}
|
|
},
|
|
|
|
defaultVariants: {
|
|
variant: 'secondary',
|
|
size: 'md'
|
|
}
|
|
})
|
|
|
|
export type ButtonVariants = VariantProps<typeof buttonVariants>
|
|
|
|
const variants = [
|
|
'secondary',
|
|
'primary',
|
|
'inverted',
|
|
'destructive',
|
|
'textonly',
|
|
'muted-textonly',
|
|
'destructive-textonly',
|
|
'link',
|
|
'base',
|
|
'overlay-white',
|
|
'gradient'
|
|
] as const satisfies Array<ButtonVariants['variant']>
|
|
const sizes = [
|
|
'sm',
|
|
'md',
|
|
'lg',
|
|
'icon-sm',
|
|
'icon',
|
|
'icon-lg'
|
|
] as const satisfies Array<ButtonVariants['size']>
|
|
|
|
export const FOR_STORIES = { variants, sizes } as const
|