mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-28 18:54:09 +00:00
Style button widgets (#6900)
This pull request introduces improvements to widget customization and UI consistency in the application. The most notable changes are the addition of support for icon classes in widget options, updates to button rendering logic, and enhanced visual consistency for button components. Widget customization enhancements: * Added an optional `iconClass` property to the `IWidgetOptions` interface in `widgets.ts`, allowing widgets to specify custom icons. UI and rendering updates: * Updated `WidgetButton.vue` to render the widget label and, if provided, an icon using the new `iconClass` option. Also standardized button styling and label usage. * Improved button styling in `WidgetRecordAudio.vue` for better visual consistency with other components. <img width="662" height="534" alt="Screenshot 2025-11-25 at 01 36 45" src="https://github.com/user-attachments/assets/43bbe226-07fd-48be-9b98-78b08a726b1b" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6900-Style-button-widgets-2b66d73d3650818ebeadd9315a47ba0f) by [Unito](https://www.unito.io)
This commit is contained in:
committed by
GitHub
parent
df373af987
commit
a21c813d11
@@ -32,6 +32,7 @@ export interface IWidgetOptions<TValues = unknown[]> {
|
||||
/** Optional function to format values for display (e.g., hash → human-readable name) */
|
||||
getOptionLabel?: (value?: string | null) => string
|
||||
callback?: IWidget['callback']
|
||||
iconClass?: string
|
||||
}
|
||||
|
||||
interface IWidgetSliderOptions extends IWidgetOptions<number[]> {
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
<template>
|
||||
<div class="flex flex-col gap-1">
|
||||
<Button
|
||||
class="text-base-foreground w-full border-0 bg-component-node-widget-background p-2"
|
||||
v-bind="filteredProps"
|
||||
:aria-label="widget.name || widget.label"
|
||||
:aria-label="widget.label"
|
||||
size="small"
|
||||
:text="true"
|
||||
@click="handleClick"
|
||||
>
|
||||
<template v-if="widget.name">
|
||||
{{ widget.name }}
|
||||
</template>
|
||||
{{ widget.label ?? widget.name }}
|
||||
<i v-if="widget.options?.iconClass" :class="widget.options.iconClass" />
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="relative">
|
||||
<div class="mb-4">
|
||||
<Button
|
||||
class="text-text-secondary w-full border-0 bg-secondary-background hover:bg-secondary-background-hover"
|
||||
class="text-base-foreground w-full border-0 bg-secondary-background hover:bg-secondary-background-hover"
|
||||
:disabled="isRecording || readonly"
|
||||
@click="handleStartRecording"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user