difference between knobs and controls in Storybook?

Question

I am new to the storybook. When I go through the documentation and videos about the storybook I read about knobs Addon. Knobs addon and control looks similar. What is the difference between those two things?

Answer 1

Controls were introduced with Storybook version 6. They replace knobs for most of the use cases. However, there may be some edge cases were you still want to use knobs for dynamic values. For example, see this Github discussion on this topic: https://github.com/storybookjs/storybook/issues/11984

Answer 2

controls addon is a companion to the docs addon so it interfaces with the ArgsTable which by itself is designed to automatically extract your components' propTypes & defaultProps (although I found this not to work)

So, with Knobs you define each prop (which you wish to be dynamic) yourself, manually, and this requires some more manual sync when your component changes and also more work, and also Knobs variables definitions might be scattered all across your story's file, where controls are all defined in one place, though the same "order" can also be done with Knobs, it does not enforces it (for good reasons).

If you want to have an interactive propTypes documentation for your components, then I suggest using controls with addon-docs, and I've been using knobs for years, but that's it, it's time to upgrade.

If, for some reason, your component's propTypes where not auto-detected (in the story) then you can define then (with controls) like so:

import Alert from './';

export default {
    title: 'General/Alert',
    component: Alert,
    parameters: {
        controls: { expanded: true }, // Show full documentation for each property
    },
    argTypes: {
        type: {
            description: 'Alert.Types',
            defaultValue: Alert.Types.WARNING,
            table: {
                type: {
                    summary: 'string',
                },
                defaultValue: {
                    summary: Alert.Types.WARNING,
                },
            },
            options: Alert.Types,
            control: {
                type: 'select', // for selecting between the array of options above
            },
        },

        title: {
            defaultValue: '',
            table: {
                type: {
                    summary: 'string',
                },
            },
            description: 'An optional title',
            control: {
                type: 'text',
            },
        },

        onClose: {
            table: {
                type: {
                    summary: 'func',
                },
            },
            description: '× button click callback',
            control: { type: null },
        },

        children: {
            description: 'The message body (mandatory)',
            type : {
                required: true,
            },
            table: {
                type: {
                    summary: 'node',
                },
            },
            control: { type: null },
        },
    },
}

//...export your story...

---

Notes:

• How to migrate dynamic knobs to controls?