Storybook 8: How to render multiple components inside a single <Canvas/>

[dmitriybo]

Summary

It used to be like this.

<Canvas>
  <Story of={Stories.Large} />
  <Story of={Stories.Medium} />
  <Story of={Stories.Small} />
</Canvas>

Now only one element is rendered. How to display multiple elements in one Canvas?

Additional information

No response

Create a reproduction

No response

[valentinpalkovic]

Hi @dmitriybo

This isn’t supported anymore. Can you elaborate what’s the necessity for rendering all stories in one canvas? You could just render multiple canvases. Wouldn't this be an alternative?

[dmitriybo]

@valentinpalkovic
Why do this? This is inconvenient. If I want to show all the colors that buttons have, for example there are 10 of them, then it is much more convenient to show them in one block.

[valentinpalkovic]

I understand! @JReinhold has more knowledge about the doc block components. Is there any way to achieve the mentioned use case?

[Mauladen]

@JReinhold I am also interested in solving this problem, we are very much waiting for your answer

[dmitriybo]

@JReinhold @valentinpalkovic Will there be any answer to this topic?

[JReinhold]

8.1 introduces a new Tags feature that provides a viable workaround for this.

https://storybook.js.org/docs/writing-stories/tags

You can write a story that renders whatever you want, ie. render your button 10 times with different variants in the same story. Then reference that with <Canvas of={ButtonStories.AllButtonVariants} />. Finally, give the story the tags ["!dev", "!test"] to exclude it from the sidebar and test-runner tests.

This isn't exactly what you're asking for, but for anyone out there that want a more flexible canvas that can render more stories/content, please open an RFC that details which problems you want solved and how the existing solutions are inadequate.