Storybook: Addon-controls: Handle no-args stories gracefully.

[shilman]

Why

Currently, no-args stories offer a poor experience in addon-controls. We disable the controls because the story is not making use of the args anyway, so nothing would happen if they were available to the user. Unfortunately, ALL pre-6.0 stories are no-args stories, so this is a bad out-of-box experience for users who are upgrading from an older storybook:

What

We should provide a better UI in this case:

• [ ] Explain why there are no controls in a mouseover?
• [ ] Show the expanded version of the table (type / defaultValue / description) even if the addon is in collapsed mode
• [ ] Other ideas?

[matheo]

A visible warning in the ControlsPanel is the ideal one,
but I guess that the StoryFn is not accessible there right?

IMO showing the controls by default makes you realize that you need to process them in the Story to make something happen, or if you don't want them then you proceed to disable the tab for the Story with controls: { disable: true } :)

[domyen]

Good point @shilman.

Strawman:

• When there are no controls for a component, show a yellow warning bar above the props table that says "No controls found for this component. Learn how to add controls »"
• Link to docs for controls

Notes:

• If there is 1+ controls don't show the yellow bar

Show the expanded version of the table (type / defaultValue / description) even if the addon is in collapsed mode

I don't have much context on this. Can we switch between props table with and without controls?

[shilman]

@domyen Yes, the controls data is handled separately from the props table data, so when there is a no-args story function, we still have everything we need to show a standard 5.3-style props table if we wanted. I'll put together a quick POC for your suggestion and we can iterate from there. Thanks!

[shilman]

Here's the POC in "compact" mode:

Here's the POC in "expanded" mode:

The user can toggle between the two modes using the controls.expanded parameter. However, my proposal is to always show the panel in expanded mode when there are no controls, just to make the thing more useful out of the box. WDYT?

[shilman]

@domyen @matheo Added the warning per @domyen 's design and created a PR at #10986

[matheo]

Looks really good!

[matheo]

perhaps, another way to say it, is that the Story is not configured to handle control args, and that's why there are no controls inferred. So another warning message could be:

This story is not configured to handle controls

[shilman]

Missed your comment but will tweak it for the next release. Good call

[shilman]

¡Ay Caramba!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.19 containing PR #10986 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[jayarjo]

@matheo how do you disable control for a given arg? Lets say I don't want to have control auto-generated for the Function type.

[matheo]

@jayarjo right now I don't see a way to remove rows

@shilman maybe do you know if this is possible?
or a new hidden property to be filtered by?

[jayarjo]

@matheo not that I want to remove the whole row, I'd actually prefer for the name of the prop and its type and description to stay - just to hide the control for the given arg row.

[matheo]

@jayarjo you can try:

argTypes: {
  fieldName: {
    control: { type: null }
  },
}

[jayarjo]

@matheo talking about argTypes - can't find a way to reference them in .mdx doc, is there one?

[matheo]

I found this one:

<Meta title="Button" args={{ a: 1, b: 2 }} argTypes={{ a: { name: 'A' }, b: { name: 'B' } }} />

in this PR

[jayarjo]

@matheo wow, it works! Not sure how 'cause I was looking for it in type definition of the Meta and it definitely wasn't there. But huge thanks to you personally for the hint!

[matheo]

@jayarjo the latest v6.0.0 beta included a way to disable it ;)
https://github.com/storybookjs/storybook/pull/11388