How to assign size to AccordionHeader in Storybook

[viciouspotato-coder]

Hello,

I am getting this warning when I try to assign a size to AccordionHeader in Storybook.

Type '{ size: string; }' is not assignable to type 'Partial<Omit<AccordionSlots, "root"> & Omit<{ as?: "div" | undefined; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }, "ref"> & { ...; } & RefAttributes<...>>'. Object literal may only specify known properties, and 'size' does not exist in type 'Partial<Omit<AccordionSlots, "root"> & Omit<{ as?: "div" | undefined; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }, "ref"> & { ...; } & RefAttributes<...>>'.

This is the short version of my code:

const Template: ComponentStory<typeof Accordion> = (
  args: AccordionHeaderProps
) => (
  <Accordion>
    <AccordionItem value="1">
      <AccordionHeader {...args}>Accordion Header 1</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 1</div>
      </AccordionPanel>
    </AccordionItem>
  </Accordion>
);

export const Sizes = Template.bind({});
Sizes.args = { size: "small" };

[smhigley]

Since the Template is typed as ComponentStory<typeof Accordion>, Sizes.args is typed as AccordionProps, not AccordionHeaderProps. The type of the function parameter (args) isn't affecting that type inference.

If you do this, it fixes the error:

const Template: ComponentStory<typeof AccordionHeader> = (
  args: AccordionHeaderProps
) => (
  <Accordion>
    <AccordionItem value="1">
      <AccordionHeader {...args}>Accordion Header 1</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 1</div>
      </AccordionPanel>
    </AccordionItem>
  </Accordion>
);

export const Sizes = Template.bind({});
Sizes.args = { size: "small" };