storybook icon indicating copy to clipboard operation
storybook copied to clipboard

[Bug]: sort in controls doesn't work

Open herzaso opened this issue 1 year ago • 6 comments

Describe the bug

The sort option is very limited (alpha or requiredFirst) and it would be nice to see more options (like alpha and requiredFirst or any custom sort funtion). Anyways, even with only those 2 options, it doesn't seem to work (see reporoduction link) - unsorted order is maintained even when changing the sort option.

To Reproduce

https://stackblitz.com/edit/github-fjyc54?file=src%2Fstories%2FButton.stories.ts&preset=node

System

Storybook Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm <----- active
    pnpm: 8.10.5 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-essentials: ^8.0.0-alpha.5 => 8.0.0-alpha.5 
    @storybook/addon-interactions: ^8.0.0-alpha.5 => 8.0.0-alpha.5 
    @storybook/addon-links: ^8.0.0-alpha.5 => 8.0.0-alpha.5 
    @storybook/addon-onboarding: ^1.0.10 => 1.0.10 
    @storybook/blocks: ^8.0.0-alpha.5 => 8.0.0-alpha.5 
    @storybook/react: ^8.0.0-alpha.5 => 8.0.0-alpha.5 
    @storybook/react-vite: ^8.0.0-alpha.5 => 8.0.0-alpha.5 
    @storybook/test: ^8.0.0-alpha.5 => 8.0.0-alpha.5 
    storybook: ^8.0.0-alpha.5 => 8.0.0-alpha.5

Additional context

No response

herzaso avatar Dec 29 '23 15:12 herzaso

@herzaso thanks so much for raising this!

@JReinhold @jonniebigodes it looks like the 7.0 docs work made it so that controls sorting is determined by docs.controls.sort. However, the docs still say it's controls.sort

I'm not sure if this is a bug in the code or in the documentation, but it should be an easy fix one way or the other. WDYT?

shilman avatar Dec 30 '23 09:12 shilman

@shilman thanks for putting this on my radar, I'll check this and follow up with a pull request if it's a documentation issue and loop either you or @JReinhold for a follow-up.

jonniebigodes avatar Dec 30 '23 19:12 jonniebigodes

This fix is working for me in Documentation, but not in the stories control table. Is that expected?

@herzaso thanks so much for raising this!

@JReinhold @jonniebigodes it looks like the 7.0 docs work made it so that controls sorting is determined by docs.controls.sort. However, the docs still say it's controls.sort

I'm not sure if this is a bug in the code or in the documentation, but it should be an easy fix one way or the other. WDYT?

ben-hamel avatar Jan 19 '24 17:01 ben-hamel

This fix is working for me in Documentation, but not in the stories control table. Is that expected?

This makes sense @shilman, controls addon reads from parameters.controls.sort while the Controls doc block reads from parameters.docs.controls.sort. I don't think that makes sense, they should do the same thing. Is this a special case where we want the doc block to read from parameters.controls.sort ?? parameters.docs.controls.sort, the latter only being an option for consistency with the other doc blocks? We could even deprecate/remove the latter to make the API less confusing.

JReinhold avatar Jan 23 '24 07:01 JReinhold

@JReinhold I think we can use your suggestion as a short-term fix. Long term I'd actually like to go the other way where (1) every doc block has its own standalone addon (e.g. Source addon replaces Storysource and uses the doc block under the hood), and (2) the parameters are hoisted up so docs.source.x => source.x. Because it feels like a needless extra level of nesting. WDYT? (Maybe we are saying the same thing if I parsed your comment correctly)

shilman avatar Jan 23 '24 08:01 shilman

That sounds reasonable to me, move the parameters up one level for any block that is both an addon and a doc block.

JReinhold avatar Jan 23 '24 08:01 JReinhold