如何针对单个story的arg隐藏对应的Storybook control控件

你可以通过单独配置对应story的argTypes参数实现需求，将需要隐藏的control对应的属性control设为false即可，两种适配你技术栈的实现方式如下：

方式一：直接在MDX文件中配置 #

修改你的现有MDX代码，给label story单独加argTypes配置即可：

<Meta
    title='Label Component'
    story='with_tooltip'
    args={{
        object: 'employee',
        field_name: 'name',
        text: 'Employee name',
        tooltip: 'Lorem ipsum dolor sit amet, consectetur adipiscing eli'
    }}
/>

<!-- label场景：隐藏tooltip control -->
<Story
  name="label"
  argTypes={{
    tooltip: { control: false }
  }}
>
  {/* 此处保留你原有的label组件渲染逻辑即可 */}
</Story>

<!-- with_tooltip场景：保留所有默认control -->
<Story
  name="with_tooltip"
>
  {/* 此处保留你原有的with_tooltip组件渲染逻辑即可 */}
</Story>

方式二：在ViewComponent Preview文件中配置 #

如果你更倾向于在Rails侧的预览文件中配置，直接给对应方法加隐藏规则即可：

class LabelComponentPreview < ViewComponent::Preview
  # label场景
  controls tooltip: { hidden: true }
  def label
    render LabelComponent.new(
      object: 'employee',
      field_name: 'name',
      text: 'Employee name'
    )
  end

  # with_tooltip场景
  def with_tooltip(tooltip: 'Lorem ipsum dolor sit amet, consectetur adipiscing eli')
    render LabelComponent.new(
      object: 'employee',
      field_name: 'name',
      text: 'Employee name',
      tooltip: tooltip
    )
  end
end

注意事项 #

• 原Meta标签中指定默认展示story的story='with_tooltip'属性可正常保留，无需修改
• 配置隐藏后对应参数仅不会在Storybook的controls面板显示，代码内赋值仍然生效

内容的提问来源于stack exchange，提问作者Amr Abu Aza