Additional information
\nReact 18, SB9
\nCreate a reproduction
\nNo response
","upvoteCount":1,"answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"\nHi @JesusTheHun! I'm Dosu and I’m helping the storybook team.
\n\nStorybook 9 has trouble auto-generating or parsing union types that involve generics or arrays (like string | string[]), which is why you see unknown in the UI. This happens because Storybook’s type extraction and conversion logic can’t always interpret these complex types, so it falls back to unknown and the Docs UI just displays that as-is (source).
\nA practical workaround is to manually set the type summary for docs using the summary/detail fields in argTypes. For example:
\nargTypes: {\n value: {\n description: 'The current value of the element.',\n table: {\n type: {\n summary: 'string | string[]',\n detail: 'A single string or an array of strings.',\n },\n },\n },\n}This won’t enable controls for both types, but it will document the prop clearly in the ArgsTable. If you want controls, you’ll need to pick one type (e.g., string) for the control and explain array usage in the description.
\nThere’s no official support for union types with arrays/generics in argTypes as of SB9, so this manual summary is the best option for now (docs). Keep an eye on future Storybook releases for improvements in this area.
\n\nTo reply, just mention @dosu.
\n\n
How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other ![\"Join](\"https://img.shields.io/badge/join-5865F2?logo=discord&logoColor=white&label=\"){kind=icon}
![\"Share](\"https://img.shields.io/badge/X-share-black\"){kind=icon}
ArgType type: union #31990
-
SummaryI have a component that accepts argTypes: {
value: {
description: 'The current value of the element.',
type: {
name: 'union',
value: [
{
name: 'string',
},
{
name: 'array',
value: { name: 'string' },
},
],
},
}Additional informationReact 18, SB9 Create a reproductionNo response |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
Hi @JesusTheHun! I'm Dosu and I’m helping the storybook team. Storybook 9 has trouble auto-generating or parsing union types that involve generics or arrays (like string | string[]), which is why you see unknown in the UI. This happens because Storybook’s type extraction and conversion logic can’t always interpret these complex types, so it falls back to unknown and the Docs UI just displays that as-is (source). A practical workaround is to manually set the type summary for docs using the summary/detail fields in argTypes. For example: argTypes: {
value: {
description: 'The current value of the element.',
table: {
type: {
summary: 'string | string[]',
detail: 'A single string or an array of strings.',
},
},
},
}This won’t enable controls for both types, but it will document the prop clearly in the ArgsTable. If you want controls, you’ll need to pick one type (e.g., string) for the control and explain array usage in the description. There’s no official support for union types with arrays/generics in argTypes as of SB9, so this manual summary is the best option for now (docs). Keep an eye on future Storybook releases for improvements in this area. To reply, just mention @dosu. How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other |
Beta Was this translation helpful? Give feedback.
Hi @JesusTheHun! I'm Dosu and I’m helping the storybook team.
Storybook 9 has trouble auto-generating or parsing union types that involve generics or arrays (like string | string[]), which is why you see unknown in the UI. This happens because Storybook’s type extraction and conversion logic can’t always interpret these complex types, so it falls back to unknown and the Docs UI just displays that as-is (source).
A practical workaround is to manually set the type summary for docs using the summary/detail fields in argTypes. For example: