Filter a control's options based on the value of an arg

[tender igloo]

I have a component with the props (and storybook controls) level and style

As an example, should the level be set to h1 I'd like to the filter and remove this value from the array of options for style – is this possible?

Heres an example of what I'd like to encourage and discourage with the controls

<h1 class="h2">Heading</h1> // OK
<h1 class="h1">Heading</h1> // Not encouraged

How could I go about filtering the options in this component's stories file's argTypes?

argTypes: {
    level: {
        control: 'select',
        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
    },
    style: {
        control: 'select',
        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
    },
}

[formal falcon]

Hi @tender igloo , did you make it? If yes how? I'm searching for the same thing

[lilac kernel]

Here's how I responded to @formal falcon's question (which I saw before this one):

Hi! You cannot dynamically set the options for an argType. What you can do instead is conditionally show a different argType altogether, depending on the selected value of another. I wrote up something similar (for a more complex case) here: #addons message

[tender igloo]

@formal falcon We didnt. We ended up leaving it as is for now and document its usage through docs instead.

@lilac kernel Thank you! I ended up trying that approach, but ended up not making sense in our use case (I think the name of the args had to be unique as well). We did end up using this in another component's story so its good to know we can use conditional argTypes

(sorry for the very much belated response)