Need conditional options control!!!

[alajillo]

Is your feature request related to a problem? Please describe
control addon support conditinal control but it is not enough to customize.
forexample

const ButtonProp = { primary : true, color : 'red' | 'green'} |  { primary : true, color : 'blue' | 'gray'}

it need to be changed color by primary selection. but it is impossible.

Describe the solution you'd like

  argTypes: {
    primary : {control : 'radio', options : [true,false]},
     background : [
      {control : 'select', options : ['red','green'], if : {arg : 'primary', eq : true}},
      {control : 'select', options : ['blue','gray'], if : {arg : 'primary', eq : false}}
    ],
  },

like this argTypes' type is object or array and
if array
consider all of this control config.

Describe alternatives you've considered

export default {
  title: 'Example/Button',
  component: Button,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    primary : {control : 'radio', options : [true,false]},
    backgroundColor : {control : false},
    backgroundColorForPrimary : {name : 'backgroundColor', control : 'select', options : ['red','green'], if : {arg : 'primary', eq : true}},
    backgroundColorForNonPrimary : {name : 'backgroundColor', control : 'select', options : ['blue','gray'], if : {arg : 'primary', eq : false}}
  },
};

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template = (args) => {
  const newArgs = {...args, backgroundColor : args.backgroundColorForNonPrimary || args.backgroundColorForPrimary}
  return <Button {...newArgs} />
}

it works. but it is so terrible code...
Are you able to assist to bring the feature to reality?
yes, I can!

Additional context
Add any other context or screenshots about the feature request here.

[herzaso]

any news on that?

[JSMike]

Hello,

I'm also struggling with this. Would like a way to conditionally set the valid options for a control.

[JSMike]

Ideally I would prefer more logic to set the correct values, or have multiple conditionals:

argTypes: {
  size: {control : 'select', options : ['small', 'medium', 'large']},
  propValuesDependOnSize: {
    control: 'select',
    if: [
      { arg: 'size', eq: 'small', then: { options: smallOptions }, value: defaultSmallValue },
      { arg: 'size', eq: 'medium', then: { options: mediumOptions }, value: defaultMediumValue },
      { arg: 'size', eq: 'large', then: { options: largeOptions }, value: defaultLargeValue }
    ]
},

Where then could contain any prop of a control.

It would also be nice to see more conditional operators, such as 'lt', 'gt', 'contains' and 'regex'.

[JSMike]

Looks like this was also requested in an issue: #21281

[JSMike]

Concern with my proposed approach would be setting the default value for each conditional.

Edited example to include a default value, but I know setting value in the argType has been deprecated/removed, so I'm not sure if that's the best solution.

[JSMike]

Would also be powerful to have and: [] and or: [] for additional conditionals. Current state there is a limitation that conditionals can only be dependent on a single other value.

[JSMike]

Or maybe just allow passing in a function that gets the args values:

if: { fn: myConditionalFn, ... }

[peterschuelke]

I just came across a need for conditional options as well.

[masoudmanson]

Any news on this feature or workarounds?