Storybook `children` not working as expected

While migrating some code from React to Solid, I noticed an issue in how

children

children

children

children are handled in Storybook args.

The following works fine with React, but not Solid:

const Base: Story = {
  args: {
    children: <span>Button Text</span>,
  },
};

export const Red: Story = {
  args: {
    ...Base.args,
    accent: "red"
  }
};

export const Blue: Story = {
  args: {
    ...Base.args,
    accent: "blue"
  }
};

const Base: Story = {
  args: {
    children: <span>Button Text</span>,
  },
};

export const Red: Story = {
  args: {
    ...Base.args,
    accent: "red"
  }
};

export const Blue: Story = {
  args: {
    ...Base.args,
    accent: "blue"
  }
};

const Base: Story = {
  args: {
    children: <span>Button Text</span>,
  },
};

export const Red: Story = {
  args: {
    ...Base.args,
    accent: "red"
  }
};

export const Blue: Story = {
  args: {
    ...Base.args,
    accent: "blue"
  }
};

const Base: Story = {
  args: {
    children: <span>Button Text</span>,
  },
};

export const Red: Story = {
  args: {
    ...Base.args,
    accent: "red"
  }
};

export const Blue: Story = {
  args: {
    ...Base.args,
    accent: "blue"
  }
};

With Solid, if both

Red

Red

Red

Red and

Blue

Blue

Blue

Blue are rendered on a single page, only 1 will have children.
Is this expected behaviour, or an issue with the Storybook plugin?

Here's an reproduction (see the 'docs' page).
https://stackblitz.com/edit/solidjs-templates-2xn7hg

First time using Solid, so apologies if I've done something stupid.

StackBlitzCathal Mullan

solid-storybook-issue - StackBlitz

Vite + solid templates

Storybook `children` not working as expected

Similar Threads

Similar Threads

Similar Threads