storybookjs/storybook

[Bug]: Args/Control panel not displaying

Open

#23,400 建立於 2023年7月11日

在 GitHub 查看
 (6 留言) (1 反應) (0 負責人)TypeScript (89,909 star) (10,058 fork)batch import
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:

Screenshot 2023-07-11 at 12 55 18

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

貢獻者指南