描述问题
为了解决vue-docgen-api中与Vue中的TS类型不显示足够详细信息的一个单独问题,我尝试通过遵循以下指南来覆盖我在ArgsTable中的props的type
:
https://storybook.js.org/docs/react/api/argtypes#manual-specification
和
https://storybook.js.org/docs/react/writing-docs/doc-blocks#customizing
然而,我添加到MDX <Story>
的argTypes
对象并没有除非我也为每个prop对象添加一个control: { type: null }
属性,否则不会覆盖props表中的Type。当我包含那个节点时,它可以正常工作,更新/修复/覆盖类型,并附带一个不需要的Controls列到我的ArgsTable。
在一个ArgsTable中,如果我试图进行多个类型的更正,只需在一个 prop上包含control: { type: null }
就足以使所有其他prop采用它们纠正的类型。
虽然type
是我的用例,但我还注意到description
字段也遵循相同的行为--它也需要control
节点才能产生覆盖效果。
请查看下面的代码片段区域以查看两个示例。
重现
重现行为所需的步骤:
- 通过设置
table: { type: { summary: 'NewType' } }
调整故事/组件的ArgTypes - 观察ArgTable中的类型是否没有更改为"NewType"
预期行为
ArgsTable应该使用在argTypes
对象中描述的覆盖,而无需在argsTypes
节点上具有其他必需属性。
代码片段
以下示例不会更改ArgsTable中的Type字段
<Story name="ImageSlider"
argTypes={{
images: {
table: {
type: {
summary: 'ImageInterface[]'
}
}
},
...
</Story>
以下示例确实会更改ArgsTable中的Type字段,并添加一个不需要的“Controls”列:
<Story name="ImageSlider"
argTypes={{
images: {
table: {
type: {
summary: 'ImageInterface[]'
}
},
control: {
type: null,
},
},
...
</Story>
系统:
Environment Info:
System:
OS: macOS 10.15.6
CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
Binaries:
Node: 14.4.0 - /usr/local/bin/node
npm: 6.14.4 - /usr/local/bin/npm
Browsers:
Chrome: 85.0.4183.83
Firefox: 75.0
Safari: 13.1.2
npmPackages:
@storybook/addon-actions: >=6.0.21 => 6.0.21
@storybook/addon-docs: >=6.0.21 => 6.0.21
@storybook/addon-knobs: >=6.0.21 => 6.0.21
@storybook/addon-links: >=6.0.21 => 6.0.21
@storybook/addon-notes: ^5.3.21 => 5.3.21
@storybook/vue: >=6.0.21 => 6.0.21
8条答案
按热度按时间mpbci0fu1#
大家好!最近似乎没有太多关于这个问题的进展。如果还有问题、评论或错误,请随时继续讨论。遗憾的是,我们没有时间处理每一个问题。我们始终欢迎贡献,所以如果你想帮忙,请发送一个pull request。30天后未活跃的问题将被关闭。谢谢!
axr492tv2#
你有一个可以分享的复现仓库吗?
yqyhoc1h3#
我也遇到了同样的问题。我的
argTypes
的覆盖没有传播。在要覆盖的类型中添加一个control
字段触发了预期的更新。鉴于这些是基于合并的细粒度覆盖,我本应期望在不需要在覆盖对象中指定
control
字段的情况下发生更新。上面列出的重现案例与我的情况进行了匹配。cu6pst1q4#
大家好!最近似乎没有太多关于这个问题的进展。如果还有问题、评论或错误,请随时继续讨论。遗憾的是,我们没有时间处理每一个问题。我们始终欢迎贡献,所以如果你想帮忙,请发送一个pull request。30天后未活跃的问题将被关闭。谢谢!
fnvucqvd5#
我也在这些依赖项中遇到了这个问题
有没有解决方法可以在不显示“控制”列的情况下覆盖描述列?
我完全不想使用控件。
3phpmpom6#
你可以通过设置
control: false
来禁用控件。https://storybook.js.org/docs/react/essentials/controls#disable-controls-for-specific-properties
hvvq6cgz7#
很遗憾,添加
control: false
会移除描述,因为上面的问题发布者已经描述了指定的控制:
control: false
jxct1oxe8#
这是一个bug。我会深入研究的。