Configured controls.sort mode is ignored by props table on "Docs" tab

[alexjamesmacpherson]

Describe the bug
The configured controls.sort mode (introduced in Storybook 6.2.x) is not adhered to by the props table on the "Docs" tab. Sort mode has been configured per the docs, with the sort mode defined in .storybook/preview.js (as below) to globally set controls sort mode:

export const parameters = {
  controls: {
    expanded: true,
    hideNoControlsWarning: true,
    sort: 'requiredFirst',
  },
};

Note that setting the sort mode directly within the *.stories.* file exhibits the same issue.

Also note I've observed this using TypeScript with React + Storybook; I'm not sure if the same behaviour is exhibited for non-TS component libraries as I haven't tested, but I can't imagine this being a problem specific to TypeScript.

To Reproduce
Reproduction repository

Steps to reproduce the behavior:

1. Requires a React Storybook component library with the Docs addon.
2. Create a component or type interface with a mix of required and optional props which are not alphabetically (or otherwise) sorted.
3. Set a controls.sort mode either in your stories file or globally using preview.js.
4. Observe that the "Canvas" tab presents all props (args/controls) sorted correctly by the given sort mode.
5. Observe that the "Docs" tab presents all props sorted as they are defined in the component, ignoring the specified sort mode.

Expected behavior
Args/controls in the props table on the "Docs" tab should adhere to the configured controls.sort mode.

Screenshots
Controls from "Canvas" tab (correctly sorted using requiredFirst sort mode):

Same controls from "Docs" tab (incorrectly sorted):

Code snippets
Please refer to the reproduction repository I've provided. It's based on a component library I work with but heavily stripped back to demonstrate the issue clearly.

System

storybook-controls-sort-repro % npx sb@next info

Environment Info:

  System:
    OS: macOS 11.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 14.5.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
  Browsers:
    Chrome: 89.0.4389.90
    Edge: 89.0.774.63
    Firefox: 86.0
    Safari: 14.0.2
  npmPackages:
    @storybook/addon-a11y: 6.2.1 => 6.2.1
    @storybook/addon-essentials: 6.2.1 => 6.2.1
    @storybook/addon-links: 6.2.1 => 6.2.1
    @storybook/addons: 6.2.1 => 6.2.1
    @storybook/react: 6.2.1 => 6.2.1
    @storybook/theming: 6.2.1 => 6.2.1

Let me know if this is expected behaviour, or if there's anything further I can provide to help progress this issue!

┆Issue is synchronized with this Asana task by Unito

[etlovett]

I'm running into this as well. It looks like the problem is that StoryTable isn't passing the sort prop down to TabbedArgsTable at https://github.com/storybookjs/storybook/blob/v6.2.1/addons/docs/src/blocks/ArgsTable.tsx#L190, so then it's not available in the underlying ArgsTable component: https://github.com/storybookjs/storybook/blob/v6.2.1/lib/components/src/blocks/ArgsTable/ArgsTable.tsx#L349.

I'm super excited to use this new feature!

[shilman]

Zoinks!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.2 containing PR #14422 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

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

[ananuness]

i'm using this same feature in SB 7.2.1 and is not working 🥲

[SanderCokart]

7.4 not working

[bragaru-i]

8.0.0 - same issue.
sorting in Docs is not apllied