[Bug]: Cannot disable "Args table with interactive controls couldn't be auto-generated" panel

[scottbert]

Describe the bug

I have some purely visual components that take no props and simply render SVGs.
I've added the config as described here:
https://storybook.js.org/docs/react/essentials/controls#hide-nocontrols-warning
To hide the warning about there being no controls, but I still get a panel saying "Args table with interactive controls couldn't be auto-generated". I was expecting it to be hidden by this control parameter.

To Reproduce

Create a component that has no props.

Create a story

Set the option as shown:

export const Visual: Story = {
  parameters: {
    controls: { hideNoControlsWarning: true }
  }
};

Notice the "Args table with interactive controls couldn't be auto-generated" panel is still visible

System

Environment Info:

  System:
    OS: macOS 14.1
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.0/bin/npm
  Browsers:
    Chrome: 117.0.5938.149
    Edge: 117.0.2045.55
    Safari: 17.1
  npmPackages:
    @storybook/addon-essentials: ^7.4.6 => 7.4.6 
    @storybook/addon-interactions: ^7.4.6 => 7.4.6 
    @storybook/addon-links: ^7.4.6 => 7.4.6 
    @storybook/addon-onboarding: ^1.0.8 => 1.0.8 
    @storybook/blocks: ^7.4.6 => 7.4.6 
    @storybook/nextjs: ^7.4.6 => 7.4.6 
    @storybook/react: ^7.4.6 => 7.4.6 
    @storybook/testing-library: ^0.2.2 => 0.2.2

Additional context

No response

[opr]

Also experiencing this issue, I have tried the way you did and also like this:

import type { Meta, StoryFn } from '@storybook/react';
import Spinner from '..';

export default {
	title: 'Block Components/Spinner',
	component: Spinner,
} as Meta;

const Template: StoryFn = () => <Spinner />;

export const Default = Template.bind( {} );
Default.args = {};
Default.parameters = { controls: { hideNoControlsWarning: true } };

and neither work for me unfortunately.

Looks like it is deprecated but the docs should be updated to reflect that.

[vanessayuenn]

@cdedreuille did you mean to deprecate hideNoControlsWarning? I don't see a rationale for that in #23635. If this is indeed on purpose, can you please update the documentation to reflect this?

cc @jonniebigodes for 8.0 docs update as well.

Thanks both!

[cdedreuille]

When we updated the empty state for controls, we explicitly made sure it was showing the empty state every time. That's why hideNoControlsWarning was deprecated. But I can totally see your use case. @vanessayuenn I think the correct way forward would be to bring this feature back only for docs.

[shilman]

Starting in 7.0, there are two doc blocks, Controls and ArgTypes. The former is interactive and the latter is not. I wonder whether we can detect this case and simply use ArgTypes when there is nothing to control.

[valentinpalkovic]

The documentation about hideNoControlsWarning and the flag itself will be removed for Storybook 8.0. The flag was never meant to disable the controls on the docs page. We had a little warning bar inside controls, which could be disabled with that flag.

If no controls are available, we think it makes sense not to show them on the docs page since it is about presentation and not really about active development. WDYT @JReinhold?

[JReinhold]

I would think we should completely remove that element - not showing either of Controls or ArgTypes - if we don't detect any argTypes, auto-generated or not.

[cdedreuille]

@JReinhold @valentinpalkovic The idea is that on controls you get this empty state to present what the feature is about and how you can set up controls. But on docs, this empty state doesn't make sense. The proposition is as followed:

• In Storybook 8.0 we remove as planned the deprecated hideNoControlsWarning.
• As a new feature, we completely remove this empty state on docs if there's no args
• No changes to controls.

Does that work for both of you?

[JReinhold]

Sounds perfect to me @cdedreuille

[kate-hall]

For anyone who wants the empty args table hidden now, I have a crazy CSS selector that works to hide this table when empty, display it when not empty.

I'm using Storybook 8, but I think this should work in other versions? If not, adjust the selectors as needed.

In .storybook/preview-head.html (create it if it doesn't exist), place:

<style>
  /* insane selector to hide empty argstables */
  .sbdocs-content
    div.sb-anchor:has(+ div:not(.sb-anchor))
    + div:not(:has(table)) {
    display: none;
  }
</style>

[cdedreuille]

@valentinpalkovic I was wondering if you think this is still realistic to make this change as part of SB8?