Search code examples
storybook

How to hide auto generated properties in doc tab of storybook?


I using Storybook 6.4 (with angular framework) I m trying to hide a property from auto generated doc (the args table of Storybook)

How to do that for the following story

export default {
    component: MyComponent,
    decorators: [moduleMetadata({ imports: [AModuleModule] })],
    parameters: {
        controls: { hideNoControlsWarning: true },
    },
} as Meta;
type MyStory = MyComponent;

export const Default: StoryObj<MyStory> = {};

Solution

  • It is possible to control the auto generated output via the argTypes of Meta definition

    export default {
        component: MyComponent,
        decorators: [moduleMetadata({ imports: [AModuleModule] })],
        parameters: {
            controls: { hideNoControlsWarning: true },
        },
        argTypes: {
           aPropName: { table: { disable: true } },
           anInputName: { control: { disable: true } },
        }
    
    } as Meta<MyComponent>; // Hint: type your meta object to have some code completion from your IDE for argTypes
    type MyStory = MyComponent;
    
    export const Default: StoryObj<MyStory> = {};
    

    Et voilà :)