mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
<img width="1048" height="482" alt="스크린샷 2026-03-12 오전 9 11 56" src="https://github.com/user-attachments/assets/68009980-097c-4736-b7c4-eb8f9a6f05be" /> ## Summary - Extract inline value control button from `WidgetWithControl` into reusable `SeedControlButton` component - Support `badge` (pill) and `button` (square) variants per Figma design system spec - Use native `<button>` element for proper a11y (works with Reka UI's `PopoverTrigger as-child`) ## Test plan - [x] Verify seed control button renders correctly on KSampler node's seed widget - [x] Verify popover opens on click and mode selection works - [x] Verify all 4 modes display correct icon/text (shuffle, pencil-off, +1, -1) 🤖 Generated with [Claude Code](https://claude.com/claude-code) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9744-feat-extract-SeedControlButton-component-3206d73d365081a3823cc19e48d205c1) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: github-actions <github-actions@github.com>
58 lines
1.2 KiB
TypeScript
58 lines
1.2 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
|
|
|
import ChartBar from './ChartBar.vue'
|
|
|
|
const meta: Meta<typeof ChartBar> = {
|
|
title: 'Components/Chart/ChartBar',
|
|
component: ChartBar,
|
|
tags: ['autodocs'],
|
|
parameters: { layout: 'centered' },
|
|
decorators: [
|
|
(story) => ({
|
|
components: { story },
|
|
template:
|
|
'<div class="w-[413px] bg-neutral-900 p-4 rounded-lg"><story /></div>'
|
|
})
|
|
]
|
|
}
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
ariaLabel: 'Bar chart example',
|
|
data: {
|
|
labels: ['A', 'B', 'C', 'D'],
|
|
datasets: [
|
|
{
|
|
label: 'BarName1',
|
|
data: [10, 50, 35, 75],
|
|
backgroundColor: '#ff8000'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
|
|
export const MultipleDatasets: Story = {
|
|
args: {
|
|
ariaLabel: 'Bar chart with multiple datasets',
|
|
data: {
|
|
labels: ['A', 'B', 'C', 'D'],
|
|
datasets: [
|
|
{
|
|
label: 'Series 1',
|
|
data: [30, 60, 45, 80],
|
|
backgroundColor: '#ff8000'
|
|
},
|
|
{
|
|
label: 'Series 2',
|
|
data: [50, 40, 70, 20],
|
|
backgroundColor: '#4ade80'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|