[Bug]: Preview config argTypes condition does not work anymore for optional props with undefined story arg

[chbiel]

Describe the bug

Now when configuring a global argType in the preview config with an if condition using exists for a prop that is optional (can be undefined), it's not displayed, although present.
It feels like the exists behavior has changed from "exists as available prop" to "has a non empty value set" what more be truthy not exists.

argTypes: {
    theme: {
      description: 'Choose between light and dark theme.',
      control: { type: 'radio' },
      options: [undefined, 'light', 'dark'],
      mapping: {
        light: 'LIGHT,
        dark: 'DARK',
      },
      // THIS BROKE SOME WHEN IN STORYBOOK 10
      if: {
        arg: 'theme', // theme arg of type `theme?: 'LIGHT' | 'DARK'`
        exists: true,
      },
    },
  }

I added that into our code in storybook 9 and there it was showing as expected.

Reproduction link

https://stackblitz.com/edit/github-vfwgneid-wytzuv3u?file=src%2Fstories%2FButton.tsx,.storybook%2Fpreview.ts&preset=node

Reproduction steps

Look at the Button component (has an added theme prop), but it's not showing up in the controls.
Remove the if condition from .storybook/preview.ts argTypes.
See the theme control appear on the page again.
Also when setting the theme arg in the stories file to e.g. LIGHT makes it reapear.

System

Storybook Environment Info:

  System:
    OS: Linux 6.14 Ubuntu 24.04.3 LTS 24.04.3 LTS (Noble Numbat)
    CPU: (16) x64 AMD Ryzen 7 PRO 7840U w/ Radeon 780M Graphics
    Shell: 3.7.1 - /usr/bin/fish
  Binaries:
    Node: 22.20.0 - /home/dejhcb0c/.nvm/versions/node/v22.20.0/bin/node
    npm: 11.6.2 - /home/dejhcb0c/.nvm/versions/node/v22.20.0/bin/npm <----- active
  Browsers:
    Chrome: 142.0.7444.175
    Firefox: 145.0.1
  npmPackages:
    @storybook/addon-docs: 10.0.8 => 10.0.8 
    @storybook/react-vite: 10.0.8 => 10.0.8 
    storybook: 10.0.8 => 10.0.8 
    storybook-addon-tag-badges: 3.0.2 => 3.0.2

Additional context

No response

[dosubot]

The behavior of if: { exists: true } in argTypes changed in Storybook 10. It now checks if the arg has a defined value (not just that the prop exists), so optional props with undefined values won't satisfy the condition and the control won't show up. This is confirmed by the implementation and tests in the codebase: the exists operator only returns true if the value is not undefined [source].

There’s no migration note or workaround in the docs, but you can either remove the if condition or use a different operator (like truthy) if you want the control to always appear, even when the value is undefined. If you need conditional logic for optional props, consider setting a default value or revisiting your control logic.

Let me know if you need help with a specific workaround or want to discuss alternative approaches.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[chbiel]

As there is no workaround it should still be considered a bug, as this removes one flexibility in configuration. And optional props are not that uncommon, so it should be correctly covered as before.

The provided suggestion using truthy from @dosu is obviously wrong, as undefined is not truthy...

[dosubot]

You're right—using truthy doesn't help for undefined values, so that suggestion doesn't address your use case. In Storybook 10, the exists operator only checks if the arg value is defined, not just present as a prop, which means optional props with undefined won't satisfy the condition and the control won't show up. This is confirmed by both the docs and tests: "exists" means "is defined".

There isn't an official workaround or migration note for restoring the previous flexibility. The only practical (but not elegant) workaround is to handle undefined/null manually in your stories, for example by including a placeholder value in your options and mapping it to undefined in your component logic. This approach has been discussed in older threads but requires extra code in every story and isn't automatic or ideal example workaround.

There are ongoing discussions about the challenges with optional props and conditional controls, but no fix or alternative is currently planned or documented. If this limitation is blocking your workflow, you might want to add your feedback to related threads to help inform future improvements. Let me know if you want help tracking updates or want to discuss mitigation strategies for your specific setup.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[chbiel]

@dosu can you list the ongoing discussions for optional props so i can add my feedback?

[dosubot]

Here are the most relevant ongoing discussions about optional props and conditional controls in Storybook where you can add feedback:

• Conditional controls and TypeScript/discriminated unions: Discusses how Storybook hides controls based on conditions but does not remove the corresponding args from the store, causing TypeScript errors with discriminated unions. Covers workarounds and current limitations.

• Need conditional options control!!!: Users and maintainers discuss the need for more flexible conditional controls in argTypes, including changing control options based on other args. Many users are looking for better solutions.

• Boolean controls for optional boolean props: Focuses on how Storybook renders controls for props typed as boolean | undefined, and the challenges of getting the correct control type without manual argTypes annotation.

• Conditional controls and documentation: Covers the interplay between conditional controls and auto-generated docs, and the lack of a way to always show all conditional args in documentation.

You can add your feedback or use cases to any of these threads to help inform future improvements. Let me know if you want updates on new discussions or related changes.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}