ArgType multiple conditions?

[TGChrisRArendt]

Hello, I checked https://storybook.js.org/docs/react/essentials/controls#conditional-controls for info about conditionals and found I can use something like this:

    hasError: {
      if: {arg: "isDisabled", truthy: false}
    },

How can I define multiple conditionals? I tried this but it doesn't work:

    errorMessage: {
      if: [
        {arg: "hasError", truthy: true},
        {arg: "isDisabled", truthy: false}
      ]
    },

It says Invalid conditional value {}

[zecka]

In reference to this discussion, it seems that it is not currently possible.
#11984

[lnvglr]

This would be a very useful feature. Any plans of implementing it at some point?

[ryuran]

This syntax only allow "and" or "or" condition.
We should be able to do both and maybe even more complex condition by mixing them.

[jakec-dev]

Any update on if this will be implemented?

[Goldflow]

would be really great if this could be done!

[eduardaaragao]

It seems that if you add the "if" condition twice, it works.

if: { global: "brand", eq: "BMW" }, if: { global: "brand", eq: "MOTORRAD" }
It worked for me, at least.

[WouterBos]

Cool! But it looks like it's not working when you work with TypeScript:

An object literal cannot have multiple properties with the same name.ts(1117)

[megbailey]

i had a similar issue with js in that only the last if is evaluated/considered

[WouterBos]

Makes sense.

[abtriey]

The syntax you used for defining multiple conditionals is not correct. When defining multiple conditions, you should use an array of objects where each object represents a conditional statement. Here's an example of how you can define multiple conditionals:

errorMessage: {
if: [
{arg: "hasError", truthy: true},
{arg: "isDisabled", truthy: false, value: "Input is disabled"}
]
},
In the above example, errorMessage is the name of the control and if is the keyword to define a conditional. The if keyword expects an array of objects where each object represents a conditional statement.

The first object agencia inmobiliaria sitges in the array {arg: "hasError", truthy: true} checks if the hasError control is truthy or not. If it's truthy, the control will be displayed.

The second object in the array {arg: "isDisabled", truthy: false, value: "Input is disabled"} checks if the isDisabled control is falsy and also specifies a custom value "Input is disabled" for the errorMessage control.

Note that you can add as many objects as you need to the array to define multiple conditionals.

[Emiliano-Bucci]

Can we report this comment as spam?

[megbailey]

I created a request for this capability #21281

[marcialc]

Any updates in this feature being implemented?

[tobiaswendling]

Still nothing new?

[kuschti]

Any news about multiple conditionals?

[selrond]

This would be very useful, and I’m surprised it’s not possible yet.
The use case seems quite common & universal as well - if you have a component, that uses certain props conditionally (helped by discriminated union in TS). Without having multiple conditions available, one must disable certain properties story by story instead of defining it in meta