disabling certain controls with ondevice-controls does not work

[lewisd1996]

Describe the bug I've seen suggestions floating around on the web that the following arg types should result in removing controls from the storybook ui:

BasicChart.argTypes = {
  width: {
    control: {
      min: 1,
      max: Dimensions.get('window').width,
      step: 3,
    },
  },
 // This doesn't work
  data: {
    control: false,
  },
  // This doesn't work
  pauses: {
    control: false,
  },
};

Is there an actual way to remove these from the controls list? In my case, these fields are huge arrays and displaying them makes scrolling to other controls extremely difficult.

To Reproduce Steps to reproduce the behavior:

1. Create a CSF
2. Add a control with the value of false
3. Load up storybook and open addons -> controls
4. Controls are still rendered in the default way

Expected behavior The controls with a value of false should not appear in the controls ui list.

Additional context Installed packages:

"@storybook/addon-actions": "^6.5.14",
"@storybook/addon-essentials": "^6.5.14",
"@storybook/addon-links": "^6.5.14",
"@storybook/addon-ondevice-actions": "^6.5.2",
"@storybook/addon-ondevice-backgrounds": "^6.5.2",
"@storybook/addon-ondevice-controls": "^6.5.2",
"@storybook/addon-ondevice-notes": "^6.5.2",
"@storybook/addons": "^6.5.14",
"@storybook/builder-webpack5": "^6.5.16",
"@storybook/docs-tools": "^6.5.14",
"@storybook/manager-webpack5": "^6.5.16",
"@storybook/react": "^6.5.14",
"@storybook/react-native": "^6.5.2",
"@storybook/react-native-server": "^6.5.2",

[dannyhw]

@lewisd1996 thanks for bringing this to my attention, I will look into it. Sorry for the delay in responding I've been very busy.

[lewisd1996]

@lewisd1996 thanks for bringing this to my attention, I will look into it. Sorry for the delay in responding I've been very busy.

No problem Danny, thank you for all your work in creating/maintaining this great tool, it really is super useful

[dannyhw]

it seems like disabling a control can be done with parameters like this:

parameters:{
    controls:{
        exclude:/pauses/g
    }
} 

[hayata-suenaga]

@dannyhw's suggestion above ⬆️ worked for me!

For the value of exclude, you can either use regex (as @dannyhw did in the example) or use an array of strings, each representing an argument to exclude from the Controls panel. You can refer to "Filtering controls" section of this official documentation page for more info.

const meta: Meta<typeof MyComponent> = {
  title: "MyComponent",
  component: MyComponent,
  parameters: {
    controls: {
      exclude: ["foo", "bar"],
    },
  },
};

export default meta;
type Story = StoryObj<typeof MyComponent>;

export const Default: Story = {
  args: {
    foo: someComplexObject,
    bar: someComplexArray,
  },
};