addon: controlsbughas workaroundhelp wantedsev:S3
説明
Describe the bug
I am using args on a story, and the panel is not displaying.
This is what I see in my storybook:
And when I press the "a" button, the icon in the top right appears although when I click on it, it disapears:
https://github.com/storybookjs/storybook/assets/19930241/10a6291b-932e-49c3-821f-6cba6eb8c87d
To Reproduce
import type { Meta, StoryObj } from '@storybook/react'
import { ToolbarEditor } from './toolbar-editor'
export default {
title: 'Toolbars',
argTypes: {
size: {
options: ['small', 'medium'],
control: { type: 'radio' },
},
},
} as Meta
type EditorStory = StoryObj<typeof ToolbarEditor>
export let Editor: EditorStory = {
render: args => <ToolbarEditor {...args} />,
args: {
size: 'small',
},
}
System
Environment Info:
System:
OS: macOS 12.4
CPU: (8) arm64 Apple M1
Binaries:
Node: 20.3.1 - ~/.nvm/versions/node/v20.3.1/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 9.6.7 - ~/.nvm/versions/node/v20.3.1/bin/npm
Browsers:
Chrome: 114.0.5735.198
Edge: 114.0.1823.51
Safari: 15.5
Additional context
{"dependencies": {
"localforage": "^1.10.0",
"lodash.merge": "4.6.2",
"match-sorter": "^6.3.1",
"primitives": "*",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.14.1",
"sort-by": "^1.2.0",
"tailwind-config": "*"
},
"devDependencies": {
"@storybook/addon-essentials": "^7.0.26",
"@storybook/addon-interactions": "^7.0.26",
"@storybook/addon-links": "^7.0.26",
"@storybook/addon-styling": "^1.3.2",
"@storybook/blocks": "^7.0.26",
"@storybook/react": "^7.0.26",
"@storybook/react-vite": "^7.0.26",
"@storybook/testing-library": "^0.0.14-next.2",
"@types/react": "^18.2.14",
"@types/react-dom": "^18.2.6",
"@typescript-eslint/eslint-plugin": "^5.60.1",
"@typescript-eslint/parser": "^5.60.1",
"@vitejs/plugin-react": "^4.0.1",
"autoprefixer": "^10.4.14",
"eslint": "^8.44.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.5",
"postcss": "^8.4.24",
"prop-types": "^15.8.1",
"storybook": "^7.0.26",
"styles": "*",
"typescript": "^5.1.6",
"vite": "^4.3.9",
"vite-tsconfig-paths": "^4.2.0"
}
}
// .storybook/main.ts
import type { StorybookConfig } from '@storybook/react-vite'
const config: StorybookConfig = {
stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-styling',
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
],
framework: {
name: '@storybook/react-vite',
options: {},
},
docs: {
autodocs: 'tag',
},
}
export default config
// .storybook/preview.ts
import type { Preview } from '@storybook/react'
import 'styles/main.css'
import 'styles/init'
const preview: Preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
},
}
export default preview