mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-14 01:20:03 +00:00
8744d3dd54
## Summary Surfaces the `label_on` and `label_off` (aka `on`/`off`) props for BOOLEAN widgets in the Vue implementation using a new Reka UI ToggleGroup component. **Before:** Labels extended outside node boundaries, causing overflow issues. **After:** Labels truncate with ellipsis and share space equally within the widget. [Screencast from 2026-02-13 16-27-49.webm](https://github.com/user-attachments/assets/912bab39-50a0-4d4e-8046-4b982e145bd9) ## Changes ### New ToggleGroup Component (`src/components/ui/toggle-group/`) - `ToggleGroup.vue` - Wrapper around Reka UI `ToggleGroupRoot` with variant support - `ToggleGroupItem.vue` - Styled toggle items with size variants (sm/default/lg) - `toggleGroup.variants.ts` - CVA variants adapted to ComfyUI design tokens - `ToggleGroup.stories.ts` - Storybook stories (Default, Disabled, Outline, Sizes, LongLabels) ### WidgetToggleSwitch Updates - Conditionally renders `ToggleGroup` when `options.on` or `options.off` are provided - Keeps PrimeVue `ToggleSwitch` for implicit boolean states (no labels) - Items use `flex-1 min-w-0 truncate` to share space and handle overflow ### i18n - Added `widgets.boolean.true` and `widgets.boolean.false` translation keys for fallback labels ## Implementation Details Follows the established pattern for adding Reka UI components in this codebase: - Uses Reka UI primitives (`ToggleGroupRoot`, `ToggleGroupItem`) - Adapts shadcn-vue structure with ComfyUI design tokens - Reactive provide/inject with typed `InjectionKey` for variant context - Styling matches existing `FormSelectButton` appearance Fixes COM-12709 --------- Co-authored-by: GitHub Action <action@github.com> Co-authored-by: Alexander Brown <drjkl@comfy.org> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>