[addon-docs] Globally customize content of the ArgsTable

[thany]

Is your feature request related to a problem? Please describe.
Kind of. We've got a few components that borrow props from generic utilities, which add a lot of props. These props sort of clutter the props table, and since they are explained in the specific utility anyway, they don't need to appear in each and every props table.

Additionally, I would like a certain prop (as in our case, an instrinsic prop from styled-components) to be always the first one, and possibly have the rest sorted by name. Currently, the sort order is random if you don't see the source code that generates it. It's probably ordered by source-order, which is not super helpful in most our cases.

Describe the solution you'd like
I would like a global way to exclude certain props, and to be able to pass a sort function that takes two PropDescriptor arguments for custom sorting.

So maybe in .storybook/preview.jsx, we could have something like:

export const parameters = {
  docs: {
    exclude: [ 'foo', 'bar' ],
    sort: (a, b) => a.localeCompare(b)
  }
};

Describe alternatives you've considered
The first part I can probably do by <ArgsTable exclude=... /> (I haven't tried this, but looking at the sourcecode for ArgsTable, this should be a thing), but I would have to add those everywhere-available props to each and every props table individually, which is not ideal. Props sorting doesn't seem to be available at all, so I don't know how to get to a workaround for that.

Are you able to assist bring the feature to reality?
I can test some stuff for you, but we don't really have the resources to deep-dive into Storybook source, sorry.

Additional context
Might be helpful to know we're on Storybook 6.0.21 and using MDX stories.

[thany]

Alternatively, inclusion, exclusion and sorting could be handled by a single function that takes an array of props that you can just go crazy with. Filter, order, whatever you like, and simply return an array of props you'd like to be shown. Example:

export const parameters = {
  docs: {
    processProps: props => props.filter(...).sort(...)
  }
};

[SanichKotikov]

Hi, Is there any way to exclude some props globally right now?

[shilman]

Closing this as a duplicate of #11697 and #12126

[thany]

Although I don't like the proposed API in #11697 personally, I hope that at least some sort of config like that will be implemented at one point. Sorry about the dupes, thumbs-upped both of them 😀

[shilman]

thanks @thany ❤️

[as-zlynn-philipps]

@shilman Just calling out that include and exclude are useful props of ArgsTable, that would be useful to configure globally, and probably wouldn't be accounted for in #11697.

[shilman]

@as-zlynn-philipps @thany does this fix it for you? #13898

[thany]

@shilman Seems like it, yeah. I'm not sure where to put those configs, but I'm sure you're also going to update the documentation, so everyone can find out on their own 😉

[shilman]

@thany yup, the documentation is updated in the PR and will be reflected on the live site once 6.2 is released. we might also have a deploy preview for the next release somewhere (@jonniebigodes ?)

[as-zlynn-philipps]

@shilman just tested it out, seems to work well on both the Canvas and Docs tab when I add exclude to the global parameters.controls. However, for subcomponents, the excluded controls still show up. It doesn't seem like this feature has complete parity with <ArgsTable exclude={[]} /> for that reason, and also because ArgsTable must have a story prop set in order for the global exclude to work.

[shilman]

cc @yannbf any chance you can make this work for subcomponents?