[Bug]: Autodocs "union" type

[markokos01]

Describe the bug

I have defined some props on the component with union. For example:

export interface MyComponentProps { title: string; subtitle?: string | undefined; }

I wrote a story for my component, added "autodocs" to tags and Storybook generated controls but for prop subtitle I got type union. I expected to see string | undefined.

To Reproduce

Add prop type for example string | undefined.

System

storybook: 7.6.5 @storybook/vue3: 7.6.5 @storybook/vue3-vite: 7.6.5

Additional context

No response

[larsrickert]

Hey, this will be fixed with #22285

[larsrickert]

Fixed with #22285 in version 8

[Jan-IaMe]

Hi @larsrickert , this seems to be still a problem in React/Typescript/Vite. I'm using the latest version of storybook (v8.0.6).

[larsrickert]

@janitza-IaMe React and Vue use completely different docgen plugins :) @storybookjs/core not sure who is responsible for react?

[IanVS]

@janitza-IaMe the default docgen for react is now react-docgen, which is faster, but not as fully-featured. See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-docgen-component-analysis-by-default to find out how to use the previous default, react-docgen-typescript instead.

[Jan-IaMe]

I use react-docgen and it has this problem.

[IanVS]

@Jan-IaMe yes that is an expected limitation of react-docgen.

[asso1985]

I'm seeing something very similar in our Storybook recently, basically when we set props via URL we had 2 weird issues where passed prop value is not set:

1 - Placement type from floating-ui If either we redefined this as a union as such

type Placement =
  | 'top'
  | 'right'
  | 'bottom'
  | 'left'
  | 'bottom-start'
  | 'top-start'
  | 'top-end'
  | 'right-start'
  | 'right-end'
  | 'bottom-end'
  | 'left-start'
  | 'left-end';

or mark this as string problem is solved

2. IconName We have this type

export type IconName = (typeof iconsKeys)[number];

Where iconsKeys comes from an object.

const iconsKeys = Object.keys(defaultIcons).sort();

In both cases if you either pass placement:top-start or for the other component icon:add these get ignored.

[yannbf]

Hey @asso1985 that looks like a different issue, would you mind writing an issue with a reproduction (using Storybook 8) so we can take a look? Thanks!