描述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的链接
2条答案
按热度按时间1szpjjfi1#
找到了一个解决方法:
这建议要么改变
AddonPanel
(来自"@storybook/components"
)的行为,当 active 为 false 时不渲染任何内容,要么改变 https://storybook.js.org/docs/react/addons/writing-addons/ 文档。ca1c2owp2#
如果你在
interactions
插件之后添加我的插件 *https://github.com/neil-morrison44/storybook-addon-recoil-flow,有一种方法可以重现这个问题。我的插件将无法获得正确的100%
宽度和高度,因此所有内容都将呈现为损坏状态。