storybook 自定义插件没有从#panel-tab-content中移除其内容,导致尺寸问题,

ogq8wdun  于 5个月前  发布在  其他
关注(0)|答案(2)|浏览(56)

描述bug

  • 我们创建了2个(私有的)插件来覆盖我们需要的内容(将它们称为 @company/intl@company/config )
  • 它们只是显示一个带有实时可编辑JSON的大文本区域,其中有一个 height: 100%;
  • 我注意到第二个插件总是缩小
  • 意识到有一个 > *:first-child{ height: 100%; } 规则附加到storybook的 #panel-tab-content
  • 但出于某种原因,我的插件没有从 #panel-tab-content 中删除它们的HTML(其他插件如 @storybookjs/a11y 可以被删除),所以这似乎没有按预期工作
    重现

我不确定我在这里能详细描述一个重现过程,因为这些插件是私有的,但我遵循了 https://storybook.js.org/docs/react/addons/writing-addons/ 的步骤,最终得到了一个简化的代码块...

addons.register("@company/intl", (api) => {
  addons.add("@company/intl/panel", {
    type: types.PANEL,
    title: "@company/intl",
    render: ({ active, key }) => (
      <AddonPanel active={active} key={key}>
            <textarea style={{ width: "100%", height: "100%" }} />
      </AddonPanel>
    ),
  })
})

&

addons.register("@company/config", (api) => {
  addons.add("@company/config/panel", {
    type: types.PANEL,
    title: "@company/config",
    render: ({ active, key }) => (
      <AddonPanel active={active} key={key}>
            <textarea style={{ width: "100%", height: "100%" }} />
      </AddonPanel>
    ),
  })
})
  • 两个插件都在它们的面板中设置全局值,并在添加的装饰器中读取它们
  • 两个插件来自不同的依赖项
  • 没有与此相关的控制台错误
  • 不知道还有什么其他相关的内容
    系统
Environment Info:

  System:
    OS: Linux 5.10 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (4) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
  Binaries:
    Node: 14.16.1 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.12 - /usr/local/bin/npm
  Browsers:
    Chrome: 89.0.4389.114
  npmPackages:
    @storybook/addon-a11y: ^6.3.4 => 6.3.4 
    @storybook/addon-actions: ^6.3.4 => 6.3.4 
    @storybook/addon-backgrounds: ^6.3.4 => 6.3.4 
    @storybook/addon-docs: ^6.3.4 => 6.3.4 
    @storybook/addon-essentials: ^6.3.4 => 6.3.4 
    @storybook/addon-knobs: ^6.3.0 => 6.3.0 
    @storybook/addon-links: ^6.3.4 => 6.3.4 
    @storybook/addon-storyshots: ^6.3.4 => 6.3.4 
    @storybook/react: ^6.3.4 => 6.3.4 
    @storybook/react-testing: ^0.0.3 => 0.0.3 
    @storybook/testing-react: ^0.0.18 => 0.0.18

附加上下文

  • 两个插件在加载时都进入 #panel-tab-content ,与其他插件不同 - 这可能表明可能有一些配置的地方不这样做,我只是错过了?
  • 如果需要,我可以向您发送发布在S3上的storybook的链接
1szpjjfi

1szpjjfi1#

找到了一个解决方法:

render: ({ active, key }) =>
      active && (
        <AddonPanel active={active} key={key}>
          <MyPanel />
        </AddonPanel>
      ),

这建议要么改变 AddonPanel(来自 "@storybook/components")的行为,当 active 为 false 时不渲染任何内容,要么改变 https://storybook.js.org/docs/react/addons/writing-addons/ 文档。

ca1c2owp

ca1c2owp2#

如果你在 interactions 插件之后添加我的插件 *https://github.com/neil-morrison44/storybook-addon-recoil-flow,有一种方法可以重现这个问题。我的插件将无法获得正确的 100% 宽度和高度,因此所有内容都将呈现为损坏状态。

相关问题