mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-25 08:49:36 +00:00
feat: add Storybook stories for Slider components (#9634)
## Summary - Add Storybook stories for `Slider` component matching Figma design system variants 1:1 - Stories at `Components/Slider`: **Default** and **Disabled** - Add hover background (`hover:bg-component-node-widget-background-hovered`) to `WidgetInputNumberSlider` only ## Figma reference [Comfy Design System — Slider](https://www.figma.com/design/vALUV83vIdBzEsTJAhQgXq/Comfy-Design-System?node-id=2-9718&m=dev) ## Scope decisions - **Hover**: Added to `WidgetInputNumberSlider.vue` only — other widgets need separate verification before applying - **Invalid**: Not implemented in `Slider.vue` — excluded until component supports it ## Files changed - `src/components/ui/slider/Slider.stories.ts` — new - `src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue` — add hover background ## Test plan - [ ] `pnpm storybook` — verify Default and Disabled render under `Components/Slider` - [ ] Hover background visible on slider widget in app (e.g. KSampler `cfg` slider) - [ ] Other widget inputs (text, textarea, select) unchanged - [ ] `pnpm typecheck` — passes - [ ] `pnpm lint` — passes 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,13 @@
|
||||
<template>
|
||||
<WidgetLayoutField :widget="widget">
|
||||
<div :class="cn(WidgetInputBaseClass, 'flex items-center gap-2 pr-2 pl-3')">
|
||||
<div
|
||||
:class="
|
||||
cn(
|
||||
WidgetInputBaseClass,
|
||||
'flex items-center gap-2 pr-2 pl-3 not-disabled:hover:bg-component-node-widget-background-hovered'
|
||||
)
|
||||
"
|
||||
>
|
||||
<Slider
|
||||
:model-value="[modelValue]"
|
||||
v-bind="filteredProps"
|
||||
|
||||
Reference in New Issue
Block a user