Allow defining controls for argTypes that are objects (nested properties)

See original GitHub issue

Is your feature request related to a problem? Please describe Also see https://stackoverflow.com/questions/69220096/storybook-how-to-define-argtypes-for-properties-that-are-objects I have an input web component that has a very simple API - it has both a get state() and a set state(model). This web component also handles the label which is being used for the input, thus a simple model looks like this:

{
  "value": "Foobar",
  "required": true,
  "disabled": false,
  "label": {
    "text": "Label for input",
    "toolTip": "Tooltip for the input's label",
    "position": "east"
  }
}

Now to describe the argTypes for the stories, I tried this:

export default {
    title: `Components/Input/text-input`,
    argTypes: {
        value: { control: 'text' },
        disabled: { control: 'boolean' },
        required: { control: 'boolean' },
        label: {
            text: { control: 'text' },
            toolTip: { control: 'text' },
            position: { control: 'select', options: ['north', 'south', 'east', 'west'] },
        },
    },
};

it renders in Storybook as follows:

As you can see, I’m not getting proper controls for the label aspect, like e.g. a dropdown for label.position.

So how do I achieve that without changing my model structure?

Note: I’m using Storybook HTML v6.3.8.

Describe the solution you’d like I would love to see the syntax work as shown in the StackOverflow question:

    argTypes: {
        value: { control: 'text' },
        disabled: { control: 'boolean' },
        required: { control: 'boolean' },
        label: {
            text: { control: 'text' },
            toolTip: { control: 'text' },
            position: { control: 'select', options: ['north', 'south', 'east', 'west'] },
        },

Describe alternatives you’ve considered Sure, I could compromise on my state structure and make all label properties flat state properties like labelText, labelPosition, and labelToolTip. But as I understand, Storybook is not meant to influence design decisions this way.

Are you able to assist to bring the feature to reality? I will probably not be able to help implementing this. This seems like a very basic/common need though and I’m surprised I couldn’t find anything on it in the docs/in storybook.

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

Issue Analytics

State:
Created 2 years ago
Reactions:27
Comments:8 (1 by maintainers)

Top GitHub Comments

9reactions

franktopelcommented, Sep 20, 2021

Sorry, I tried to follow that #12078, but turned out to be totally unable to figure out what is the state of the whole thing.

I understand for objects you originally only had a textarea that allowed editing the object in JSON notation.

Then you implemented a tree view (which is what I’m currently getting, and dissatisfied with, hence this issue).

What I’m asking for is to allow argTypes to allow for nested control definitions:

      argTypes: {
        value: { control: 'text' },
        disabled: { control: 'boolean' },
        required: { control: 'boolean' },
        label: {
            text: { control: 'text' },
            toolTip: { control: 'text' },
            position: { control: 'select', options: ['north', 'south', 'east', 'west'] },
        },

So I’m not asking for any new features here, I’m just asking to allow using existing controls for nested properties.

If you have trouble identifying if argsType.foo is a nested object, or simply an object that is supposed to define the control, I suggest using a constructor function

function ArgsTypesControlModel(control, options = null) {
  this.control = control;
  if (options) this.options = options;
}

(feel free to pick a shorter name) which would allow to check if (argTypes.prop instanceof ArgsTypesControlModel) ..., and then the above code would look like

      argTypes: {
        value: new ArgsTypesControlModel('text'),
        disabled: new ArgsTypesControlModel('boolean'),
        required: new ArgsTypesControlModel('boolean'),
        label: {
            text: new ArgsTypesControlModel('text'),
            toolTip: new ArgsTypesControlModel('text'),
            position: new ArgsTypesControlModel('select',  ['north', 'south', 'east', 'west'])
        },

5reactions

Sparraguscommented, Oct 15, 2021

@franktopel I would love if Storybook had a way to do what you want. I actually stumbled upon this issue looking for a way to do the same.

Here’s what I’m currently doing:

export default {
    component: ReportsListItem,
    title: "ReportsListItem",
    args: {
        report: {
            id: 1,
            title: "Oracle manipulation",
            severity: Severity.critical,
            status: ReportStatus.confirmed,
            createdAt: new Date(2020, 3, 20).toISOString(),
            comments: 42,
            project: {
                id: 2,
                slug: "awesome",
                name: "The awesome project",
                triagingType: "managed",
            },
            user: {
                uid: "24A31EA9-689C-4055-8096-A6674D70574F",
                username: "console_cowboy",
                avatar_url: "",
            },
        },
        severity: Severity.critical,
        status: ReportStatus.confirmed,
    },
    argTypes: {
        severity: {
            options: Object.values(Severity),
            control: { type: "select" },
        },
        status: {
            options: Object.values(ReportStatus),
            control: { type: "select" },
        },
    },
} as ComponentMeta<typeof ReportsListItem>;

type Args = React.ComponentProps<typeof ReportsListItem> & { severity: Severity; status: ReportStatus };
const Template: Story<Args> = ({ report, status, severity, ...args }) => {
    const finalReport = { ...report };
    finalReport.severity = severity;
    finalReport.status = status;

    return <ReportsListItem report={finalReport} {...args} />;
};

I defined the values I want controls for in argTypes, then use a Template to merge these values accordingly. Not the best, but it unblocks me.