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:
Dante
2026-03-10 11:49:47 +09:00
committed by GitHub
parent 55789ef0fb
commit 2ef354447d
2 changed files with 85 additions and 1 deletions

View File

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