Storybook type wrong when using children as an arg

Viewed 21

I'm trying to use TS and storybook children in args, https://storybook.js.org/docs/react/writing-stories/stories-for-multiple-components#using-children-as-an-arg

I have a Button.stories.tsx:

import { ComponentStory, ComponentMeta } from "@storybook/react"

import { Button } from "./Button"

export default {
    title: "Example/Button",
    component: Button,
    argTypes: {
        backgroundColor: { control: "color" },
    },
} as ComponentMeta<typeof Button>

const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />

export const Primary = Template.bind({})
Primary.args = {
    primary: true,
    label: "Button",
}

and ButtonGroup.stories.tsx:

import { ComponentStory, ComponentMeta } from "@storybook/react"

import { ButtonGroup } from "./ButtonGroup"

import { Primary } from "../Button/Button.stories"

export default {
    title: "Example/ButtonGroup",
    component: ButtonGroup,
    argTypes: {},
}

const Template: ComponentStory<typeof ButtonGroup> = (args) => <ButtonGroup {...args} />

export const PrimaryButtonGroup = Template.bind({})
PrimaryButtonGroup.args = {
    children: (
        <>
            <Primary {...Primary.args} />
            <Primary {...Primary.args} />
        </>
    ),
}

There is a type error on the <Primary {...Primary.args} /> on PrimaryButtonGroup.args. The problem is the args is optional, so the primary and label from Primary.args could be undefined. So it cannot match the label type string.

How can I fix this issue?

0 Answers
Related