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:
Johnpaul Chiwetelu
2025-11-25 02:12:30 +01:00
committed by GitHub
parent df373af987
commit a21c813d11
3 changed files with 7 additions and 5 deletions

View File

@@ -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[]> {

View File

@@ -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>

View File

@@ -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"
>