Sorting controls by argTypes order

[aldrichdev]

Is your feature request related to a problem? Please describe.

I have the following argTypes in a meta object of my story file:

  argTypes: {
    chevronPosition: { name: 'Chevron Position', options: ['left', 'right'] },
    href: { name: 'Href', control: 'text' },
    children: { name: 'Text', control: 'text' },
    title: { name: 'Title', control: 'text' },
    target: { table: { disable: true } },
    styles: { table: { disable: true } },
    rel: { table: { disable: true } },
    id: { table: { disable: true } },
  },

However, this order is not reflected on the Storybook page under Controls (which is expected at this time).

The only ways to sort controls appear to be 1) alphabetically, 2) required first, or 3) not at all, none of which really work for me.

Describe the solution you'd like

It would be nice if there was an option to have the order of controls in the Controls tab of the UI match the order they are listed in argTypes - perhaps a new parameters.controls.sort setting like byArgTypes.

Describe alternatives you've considered

The existing sort options - alpha, requiredFirst, none - none of which are ideal

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

No response

[kornjiradej]

You can sort the order of controls by using args

For example:
args: { chevronPosition: 'left', href: 'www.test.com', title: 'Try me!' }

Is your feature request related to a problem? Please describe.

I have the following argTypes in a meta object of my story file:

  argTypes: {
    chevronPosition: { name: 'Chevron Position', options: ['left', 'right'] },
    href: { name: 'Href', control: 'text' },
    children: { name: 'Text', control: 'text' },
    title: { name: 'Title', control: 'text' },
    target: { table: { disable: true } },
    styles: { table: { disable: true } },
    rel: { table: { disable: true } },
    id: { table: { disable: true } },
  },

However, this order is not reflected on the Storybook page under Controls (which is expected at this time).

The only ways to sort controls appear to be 1) alphabetically, 2) required first, or 3) not at all, none of which really work for me.

Describe the solution you'd like

It would be nice if there was an option to have the order of controls in the Controls tab of the UI match the order they are listed in argTypes - perhaps a new parameters.controls.sort setting like byArgTypes.

Describe alternatives you've considered

The existing sort options - alpha, requiredFirst, none - none of which are ideal

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

No response

[Shinigami92]

This does not satisfy my usecase where I have argTypes that are not covered by args

e.g. I have expose in a category and I want them after props category (talking about a Vue component)

The order should be props, events, slots, expose
And then by argType.name

[Shinigami92]

I opened a PR to address this

• Allow custom argType sorting #28565