storybook addon-docs ArgsTable API 需要 'control' 属性存在才能产生覆盖效果,

pzfprimi  于 3个月前  发布在  其他
关注(0)|答案(8)|浏览(45)

描述问题

为了解决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节点才能产生覆盖效果。
请查看下面的代码片段区域以查看两个示例。

重现

重现行为所需的步骤:

  1. 通过设置table: { type: { summary: 'NewType' } }调整故事/组件的ArgTypes
  2. 观察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
mpbci0fu

mpbci0fu1#

大家好!最近似乎没有太多关于这个问题的进展。如果还有问题、评论或错误,请随时继续讨论。遗憾的是,我们没有时间处理每一个问题。我们始终欢迎贡献,所以如果你想帮忙,请发送一个pull request。30天后未活跃的问题将被关闭。谢谢!

axr492tv

axr492tv2#

你有一个可以分享的复现仓库吗?

yqyhoc1h

yqyhoc1h3#

我也遇到了同样的问题。我的argTypes的覆盖没有传播。在要覆盖的类型中添加一个control字段触发了预期的更新。
鉴于这些是基于合并的细粒度覆盖,我本应期望在不需要在覆盖对象中指定control字段的情况下发生更新。上面列出的重现案例与我的情况进行了匹配。

cu6pst1q

cu6pst1q4#

大家好!最近似乎没有太多关于这个问题的进展。如果还有问题、评论或错误,请随时继续讨论。遗憾的是,我们没有时间处理每一个问题。我们始终欢迎贡献,所以如果你想帮忙,请发送一个pull request。30天后未活跃的问题将被关闭。谢谢!

fnvucqvd

fnvucqvd5#

我也在这些依赖项中遇到了这个问题

"@storybook/addon-actions": "^6.1.21",
"@storybook/addon-essentials": "^6.1.21",
"@storybook/addon-links": "^6.1.21",
"@storybook/addons": "^6.1.21",
"@storybook/preset-scss": "^1.0.3",
"@storybook/react": "^6.1.21",
"@storybook/theming": "^6.1.21",

有没有解决方法可以在不显示“控制”列的情况下覆盖描述列?
我完全不想使用控件。

3phpmpom

3phpmpom6#

你可以通过设置 control: false 来禁用控件。
https://storybook.js.org/docs/react/essentials/controls#disable-controls-for-specific-properties

hvvq6cgz

hvvq6cgz7#

很遗憾,添加 control: false 会移除描述,因为上面的问题发布者已经描述了
指定的控制:

control: false

jxct1oxe

jxct1oxe8#

这是一个bug。我会深入研究的。

相关问题