addon-controls - Disabling controls for a story does not hide them on argsTable

[7studio]

Describe the bug
When I set the controls parameter to { disabled: true } for a story, the "Control" column into <argsTable story=""> doesn't disappear, even if I override argTypes on story with control: { type: null }.

Case 1: <Story parameters={{ controls: { disable: true } }}></Story>
argsTable

Control panel

Case 2: <Story argTypes={{ title: { control: { type: null } } }}></Story>
argsTable

Control panel

To Reproduce
Steps to reproduce the behaviour:

0. In a *.stories.mdx file:

import {
  Meta,
  Story,
  Canvas,
  ArgsTable,
} from '@storybook/addon-docs'
import html from './card.html'

<Meta
  title="Components/Card"
  parameters={{
    viewMode: 'docs',
  }}
  args={{
    title: '',
  }}
  argTypes={{
    title: {
      name: 'Titre',
      description: 'Titre de l’article',
      type: { name: 'string', required: true },
      table: {
        type: {
          summary: 'string',
        },
        defaultValue: { summary: '' },
      },
      control: { type: 'text' },
    }
  }}
/>

export const PlaygroundTmpl = (args) => `
<div class="Card">
    <h4 class="Card-title">${args.title}</h4>
</div>
`

# Card

<Canvas>
  <Story
    name="Card"
    height="600px"
    parameters={{
      controls: { disable: true },
      docs: { source: { code: html } },
      viewMode: 'story',
    }}
  >
    {PlaygroundTmpl.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Card" />

<Canvas>
  <Story
    name="Card 1"
    height="600px"
    parameters={{
      controls: { disable: true },
      docs: { source: { code: html } },
      viewMode: 'story',
    }}
    argTypes={{
      title: { control: { type: null } },
    }}
  >
    {PlaygroundTmpl.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Card 1" />

1. Serve Storybook.
2. Navigate to MyGreatComponent
3. Click on the Canvas tab.
4. See that the Controls tab is no visible.
5. Click on the Docs tab.
6. See that the "Control" column and the reload button are still visible.

Expected behaviour
When I disable controls for a story (or all controls are null), I expect the "Control" column and the reload button into <argsTable>component to disappear and the Control panel to be empty.

System

System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i5-8350U CPU @ 1.70GHz
  Binaries:
    Node: 14.17.0 - C:\nodejs\node.EXE
    npm: 6.14.13 - C:\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.423.0), Chromium (92.0.902.62)
  npmPackages:
    @storybook/addon-essentials: ^6.3.4 => 6.3.6
    @storybook/addon-links: ^6.3.4 => 6.3.6
    @storybook/addons: ^6.3.6 => 6.3.6
    @storybook/html: ^6.3.4 => 6.3.6
    @storybook/preset-scss: ^1.0.3 => 1.0.3
    @storybook/theming: ^6.3.4 => 6.3.6

[maeriens]

I don't think that hiding the Controls column is supported; I know you can remove the rows from the table. There seems to be some mentions about hiding the column in #12345 and it might have some workarounds but that is the best Storybook can offer so far

[Sheparzo]

@7studio As a workaround you could wrap the <ArgsTable /> with a <div> and give it an id and use some CSS to hide the column.

In your stories.mdx file:

<div id="hide-controls-column">
  <ArgsTable story="Card" />
</div>

in a .storybook/storybook.css (override) file:

/* Hiding certain control columns from argstable */
#hide-controls-column > div > table > thead > tr > th:last-child,
#hide-controls-column > div > table > tbody > tr > td:last-child {
  display: none;
}

#hide-controls-column > div > table > thead > tr th:nth-child(1),
#hide-controls-column > div > table > tbody > tr td:nth-child(1) {
  width: 15%;
}

make sure to setup that storybook.css override in .storybook/preview.js:

import '../dist/esm/index.css';
import './storybook.css';

export const parameters = {
	viewMode: 'docs',
	actions: { argTypesRegex: "^on[A-Z].*" },
}

[eltranseunteurbano]

Controls does not hidden on args table, for that exist another property.

If you want to hidde some property on table, you have to use table.

title: { table: { disable: true } }

You can check the documentation here

[maeriens]

That would disable the entire row for an arg, not a specific property of it.
What OP wants is to show the row but not the control column in the argsTable, or at least not show the control field itself.

[ops1ops]

any news? its kind of weird that disabling table (which corresponds to doc page) deletes control, and i cant override it by directly writing "control",
according to current api, ArgsTable component has exclude property, but i need to recreate docs markup for each story where i want to disable some properties from doc - it requires a lot of code
easier would be to move this property to argTypes or fix current behavior with table disabling

P.S. What is wrong with docs? Why do i get know about "disable" property from issues on github?
Currently https://storybook.js.org/docs/react/writing-docs/doc-block-argstable#argstable does not have info about disable property and about exclue/include

[joelstransky]

@ops1ops Storybook docs are famously bad. They are more of a blog about storybook than a simple listing of api. I'm not sure why no one does this anymore.

[alvamanu]

@maeriens Exactly. Have you by any chance found a solution?

[alvamanu]

Leaving the prop for documentation purposes only and disabling the ability to change the component can be done like so:

component: MyComponent,
title: 'MyComponent',
argTypes: {
    multiple: {
        control: { type: null }
    }
}

[KurtGokhan]

I have another problem. For good measure I write this in global argTypes:

export const argTypes = {
  style: {
    table: {
      disable: true,
    },
  },
};

But if I do this, style prop is visible under every story. This does not always happen though. Also, it does not show in Docs tab, but only in Canvas tab. This is very weird.

[tfoxy]

This is now mentioned here: https://storybook.js.org/docs/react/essentials/controls#disable-controls-for-specific-properties

  argTypes: {
    // remove the prop documentation from the table
    foo: {
      table: {
        disable: true,
      },
    },
  },

  argTypes: {
    // render the prop documentation, but without a control
    foo: {
      control: false,
    },
  },

[manavm1990]

Can we disable controls for the whole story without going into the each and every prop? There are only 2️⃣ , but still...:)

[FilipePfluck]

I have the same question as @manavm1990. I am usiong pandacss to style my components, and they can receive hundreds of styling properties, I want to hide them in storybook. And ain't no way Imma disable all of them manually.

[tfoxy]

@manavm1990 @FilipePfluck you can overwrite extractArgTypes which is the function used to infer all the arg types of a component.

function extractArgTypes(component) {
  // return `argTypes` here
}

{
  parameters: {
    docs: {
      extractArgTypes,  
    }
  }
}

You can check how the default function is implemented here:

storybook/code/renderers/react/src/docs/extractArgTypes.ts

Line 5 in aecfa17

export const extractArgTypes: ArgTypesExtractor = (component) => {

The function implementation is different between frameworks. The one above is for React. You can look for the others inside the repo.

You can set this in preview.js to change all stories, in the default export of a file to change all stories in that file or in a single story.

[matthewrose]

@FilipePfluck and @manavm1990 Took me a while to figure this out, and it may not work for your needs, but I personally use the propFilter function to filter out props defined in node_modules via my typescript config in main.js:

  typescript: {
    check: false,
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      shouldExtractValuesFromUnion: true,
      shouldRemoveUndefinedFromOptional: true,

      // filter out props from dependency modules
      propFilter: prop =>
        !!prop.declarations?.find(
          declaration => !declaration.fileName.includes('node_modules')
        ),
    },
  },

Source(ish): https://storybook.js.org/docs/react/configure/typescript#extending-the-default-configuration