[Feature Request]: Allow multiple conditional controls

[megbailey]

Is your feature request related to a problem? Please describe

I'm converting dynamic knobs to controls in prep for 7.0 knob deprecation. Some of our more complex stories require more than one condition for some controls.

Adding more than one conditional in this way is not a valid solution.

{
    "control": {
        "type": "select"
    },
    "name": "Slides per view",
    "options": {
        "2": 2,
        "3": 3,
        "4": 4,
        "5": 5,
        "1 (default)": 1
    },
    if: { arg: 'type', eq: 'carousel'},
    if: { arg: 'carouseleffect', eq: 'slide'},
    ],
    "table": {
        "category": "Carousel"
    }
}

Describe the solution you'd like

I would like the ability to assign array of objects to 'if' rather than object. If conditions within the array should be logically ANDed.

Suggestion for solution

{
    "control": {
        "type": "select"
    },
    "name": "Slides per view",
    "options": {
        "2": 2,
        "3": 3,
        "4": 4,
        "5": 5,
        "1 (default)": 1
    },
    "if": [
        {
            "arg": "type",
            "eq": "carousel"
        },
        {
            "arg": "carouseleffect",
            "eq": "slide"
        }
    ],
    "table": {
        "category": "Carousel"
    }
}

Describe alternatives you've considered

I've considered splitting the situations into different stories, but this would alter the story experience.

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

No response

[tailanedebrito]

Hello, I'm trying to implement multiple conditions on storybook level and saw this PR.

are we considering to add some options on the level of each "if" condition such as:

level: {
      control: { type: 'select'},
      options: ['1', '2', '3']
},
variant: {
      control: { type: 'select'},
      if: {
        arg: "level", eq: '1',
        options: ['option1.var1', 'option1.var2', 'option1.var3']
      },
      if: {
        arg: "level", eq: '2',
        options: ['option2.var1', 'option2.var2', 'option2.var3']
      },
      if: {
         arg: "level", eq: '3', 
         options: ['option3.var1', 'option3.var2', 'option3.var3'},
    }

[herzaso]

Any news on that?

[dionatan-g]

Guys, this feature is very important and I'm quite surprised it wasn't thought before hand and included in the initial implementation, since its quite obvious that something like this would be required.

[megbailey]

I've researched implementing this feature, and I learned that Storybook uses ComponentDriven/csf standard to create and validate conditional args (defined here). I doubt storybook maintainers want to deviate from that so it looks like a feature request will need to be opened with csf.

[ThejanNim]

Hi guys, this feature is very important to maintain the design system in a storybook, So have you any solution?

[DiogoDoreto]

I needed something similar and created a PR: ComponentDriven/csf#76