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

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:

1. 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

[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.

[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