Replies: 3 comments 2 replies
-
I found out that the order can be affected by ordering I would like to order by Right now it is somehow based on the component that is used 🤷 |
Beta Was this translation helpful? Give feedback.
-
I wonder, is it possible to sort not only categories, but subcategories too. function sortControls : ( args: StrictArgTypes<TArgs>) => StrictArgTypes<TArgs> |
Beta Was this translation helpful? Give feedback.
-
You can use zero width space characters in your category names to influence the sort order in combination with export const apiCategory = {
attributes: 'Attributes',
events: '\u200BEvents',
localizableLabels: '\u200BLocalizable Labels',
methods: '\u200BMethods',
nonAttributeProperties: '\u200BProperties',
slots: '\u200BSlots',
styles: 'Styles'
} as const; The final order will be: "Attributes", "Styles", "Events", "Localizable Labels", "Methods", "Properties", "Slots". At least, this approach has been working well for me. It's absolutely a hack. You can verify the effect of the zero width space in a REPL:
|
Beta Was this translation helpful? Give feedback.
-
Is your feature request related to a problem? Please describe.
In my storybook we manually specify a table category in the
argTypes
for every control. When rendered in a Controls block these categories are appearing in a different order across stories. I would like to put more important categories first and have a consistent order so that users of my storybook know what to expect.Describe the solution you'd like
A way to provide a custom sort order for categories which is shared across all stories. Ideally it would have as much customizability as storySort: some preconfigured orders like "alphabetical", an array specifying the order of known items, or a custom sort function. Personally I would only need an
order
array since I have a small fixed set of categories.If we added that level of customizability for sorting categories we'd probably want the same for sorting arguments. Right now there are only a couple preconfigured orders.
Here's a first draft at an API on
parameters.docs.controls
:Existing
sort
:'none'
|'alpha'
|'requiredFirst'
Proposed
sort
:'none'
|'alpha'
|'requiredFirst'
| order array | sort functionsortCategories
:'none'
|'alpha'
| order array | sort functionDescribe alternatives you've considered
docs.controls.sort = 'alpha'
to sort individual arguments. It works within a category but doesn't impact the categories themselves. A less-ideal alternative would be for this to affect category sort too; that would at least provide consistency if not customizability.Are you able to assist to bring the feature to reality?
yes, I can
Additional context
You can see an example of the inconsistency in this story and this story (source here). My categories are things like "Slots", "Attributes", "Properties", "Methods", "Events", and "Styles". I would like them to appear in that order since that's roughly the order of importance for configuring components correctly.
Beta Was this translation helpful? Give feedback.
All reactions