How can I conditionally disable a control in Storybook based on the value of another argument?

Question

I am trying to conditionally disable a Storybook.js control based on the value of another argument. For example, I have a modal component that can be of type 'alert', 'confirmation', 'content', or 'photo'. All of these modal types, except for 'photo', also require a content prop of type string. The photo modal does not require this content prop because it does not display any text.

So I would like to disable the content control in Storybook whenever the type prop is selected as 'photo'.

I first tried writing a custom propType validator, but Storybook thinks this prop is supposed to be a function: Custom PropType validator in Storybook

Now I am trying to disable the control in the component's storybook file:

export default {
  title: 'Global Design System/Modal',
  component: Modal,
  argTypes: {
    type: {
      control: {
        type: 'select',
        options: [
          'alert',
          'confirmation',
          'content',
          'photo'
        ]
      }
    },
    content: {
      table: {
        disable: function() {
          return this.argTypes.type === 'photo'
        }
      }
    }
  },
};

But in this case I do not have a way of referencing the current value of 'type'

Hardship

I think you could use this storybook.js.org/docs/react/essentials/… – Karnak

Answer 1

It can not for now!. I saw member SB create PR for similar feature but it closed without merging.

Claire

Answer 2

There are now conditional control options: https://storybook.js.org/docs/react/essentials/controls#conditional-controls

You can do something like the following:

export default {
  title: 'Global Design System/Modal',
  component: Modal,
  argTypes: {
    type: {
      control: {
        type: 'select',
        options: [
          'alert',
          'confirmation',
          'content',
          'photo'
        ]
      }
    },
    content: {
      ...,
      if: { arg: 'type', neq: 'photo' },
    }
  },
};

Pelisse