Cathal
Cathal
PostsComments
SSolidJS
Created by Cathal on 4/4/2024 in #support
Storybook `children` not working as expected
While migrating some code from React to Solid, I noticed an issue in how 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"
  }
};
With Solid, if both Red and 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. 🙂
4 replies