Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-21 07:14:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: replace raw buttons with Button component in WidgetActions (#8973)

Browse Source 
Fixes #8889

Replaces custom-styled `<button>` elements in WidgetActions.vue with the
shared Button component for better consistency with the design system.
Uses `variant="textonly"` with `size="unset"` to match the existing
dropdown menu item styling.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8973-refactor-replace-raw-buttons-with-Button-component-in-WidgetActions-30c6d73d36508194beb2f5d810dde382)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
This commit is contained in:
Christian Byrne
2026-02-20 01:35:24 -08:00
committed by GitHub
parent f5c9c72234
commit 73e4ae2f70
1 changed files with 23 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/rightSidePanel/parameters/WidgetActions.vue
View File

@@ -1,10 +1,10 @@
<script setup lang="ts">
import { cn } from '@comfyorg/tailwind-utils'
import { isEqual } from 'es-toolkit'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import MoreButton from '@/components/button/MoreButton.vue'
import Button from '@/components/ui/button/Button.vue'
import { isProxyWidget } from '@/core/graph/subgraph/proxyWidget'
import {
demoteWidget,
@@ -123,12 +123,6 @@ function handleResetToDefault() {
if (!hasDefault.value) return
emit('resetToDefault', defaultValue.value)
}
const buttonClasses = cn([
'border-none bg-transparent',
'w-full flex items-center gap-2 rounded px-3 py-2 text-sm',
'cursor-pointer transition-all hover:bg-secondary-background-hover active:scale-95'
])
</script>
<template>
@@ -137,8 +131,10 @@ const buttonClasses = cn([
class="text-muted-foreground bg-transparent hover:text-base-foreground hover:bg-secondary-background-hover active:scale-95 transition-all"
>
<template #default="{ close }">
<button
:class="buttonClasses"
<Button
variant="textonly"
size="unset"
class="w-full flex items-center gap-2 rounded px-3 py-2 text-sm transition-all active:scale-95"
@click="
() => {
handleRename()
@@ -148,11 +144,13 @@ const buttonClasses = cn([
>
<i class="icon-[lucide--edit] size-4" />
<span>{{ t('g.rename') }}</span>
</button>
</Button>
<button
<Button
v-if="hasParents"
:class="buttonClasses"
variant="textonly"
size="unset"
class="w-full flex items-center gap-2 rounded px-3 py-2 text-sm transition-all active:scale-95"
@click="
() => {
if (isShownOnParents) handleHideInput()
@@ -169,10 +167,12 @@ const buttonClasses = cn([
<i class="icon-[lucide--eye] size-4" />
<span>{{ t('rightSidePanel.showInput') }}</span>
</template>
</button>
</Button>
<button
:class="buttonClasses"
<Button
variant="textonly"
size="unset"
class="w-full flex items-center gap-2 rounded px-3 py-2 text-sm transition-all active:scale-95"
@click="
() => {
handleToggleFavorite()
@@ -181,18 +181,20 @@ const buttonClasses = cn([
"
>
<template v-if="isFavorited">
<i class="icon-[lucide--star]" />
<i class="icon-[lucide--star] size-4" />
<span>{{ t('rightSidePanel.removeFavorite') }}</span>
</template>
<template v-else>
<i class="icon-[lucide--star]" />
<i class="icon-[lucide--star] size-4" />
<span>{{ t('rightSidePanel.addFavorite') }}</span>
</template>
</button>
</Button>
<button
<Button
v-if="hasDefault"
:class="cn(buttonClasses, isCurrentValueDefault && 'opacity-50')"
variant="textonly"
size="unset"
class="w-full flex items-center gap-2 rounded px-3 py-2 text-sm transition-all active:scale-95"
:disabled="isCurrentValueDefault"
@click="
() => {
@@ -203,7 +205,7 @@ const buttonClasses = cn([
>
<i class="icon-[lucide--rotate-ccw] size-4" />
<span>{{ t('rightSidePanel.resetToDefault') }}</span>
</button>
</Button>
</template>
</MoreButton>
</template>