How can hide storybook control per story arg

user_16753136 0
Viewed 7955

I have rails engine project using storybook and mdx files to specify the controls but i need to hide specific control per story

<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'
    }}
/>

I have two stories [label,with_tooltip]

in case label story i need to hide tooltip control I'm using view component preview to show components

storybook
2 Answers

You can disable controls for individual properties of a story including the prop table documentation, or you can disable only the control and leave the prop table documentation intact.

To disable the control and prop table documentation for the tooltip prop:

<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'
    }}
    argTypes={{
      tooltip: {
        table: {
          disable: true
        }
      }
    }}

/>

To disable the control but leave the prop table documentation intact for the tooltip prop:

<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'
    }}
    argTypes={{
      tooltip: {
        control: false
      }
    }}

/>

See the Storybook docs on disabling controls for specific properties.

user_2581740

The best approach is doing this:

export default {
title: 'Pages/Login ',
component: Login,
parameters:{
    controls:{
       
        exclude:/.*/g
    }
}

} as ComponentMeta;

user_176647550
Related