[Bug]: Multiple Stories in Canvas

[Martin Kozák]

Describe the bug

In previous version I was able to see multiple stories in one Canvas tag. Here I add the code, which have worked in previous version but not now.

import { Canvas, Meta, Story } from '@storybook/addon-docs';
import * as Button from './Button.stories.jsx';

<Meta of={Button} title="Button" />

# Button

Button components with different props

## Examples

### Different variations

#### Primary, Secondary, Outlined, Ghost, Destructive

<Canvas>
  <Story of={Button.Primary} />
  <Story of={Button.Secondary} />
  <Story of={Button.Ghost} />
  <Story of={Button.GhostSecondary} />
  <Story of={Button.Destructive} />
</Canvas>

Reproduction link

https://stackblitz.com/edit/github-cfdir1?file=src%2Fstories%2FButton.mdx

Reproduction steps

1. go to this link https://stackblitz.com/edit/github-cfdir1?file=src%2Fstories%2FButton.mdx
2. then open the storybook and go to Button stories and find Docs

Here you can see that only the first button variant is showed

System

Storybook Environment Info:

  System:
    OS: Windows 11 10.0.22621
    CPU: (8) x64 Intel(R) Core(TM) i5-10310U CPU @ 1.70GHz
  Binaries:
    Node: 20.12.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.5 - ~\AppData\Roaming\npm\pnpm.CMD <----- active
  Browsers:
    Edge: Chromium (126.0.2592.68)
  npmPackages:
    @storybook/addon-docs: ^8.1.11 => 8.1.11
    @storybook/addon-essentials: ^8.1.6 => 8.1.6
    @storybook/addon-interactions: ^8.1.6 => 8.1.6
    @storybook/addon-links: ^8.1.6 => 8.1.6
    @storybook/addon-onboarding: ^8.1.6 => 8.1.6
    @storybook/addon-styling-webpack: ^1.0.0 => 1.0.0
    @storybook/addon-themes: ^8.1.6 => 8.1.6
    @storybook/addon-webpack5-compiler-babel: 3.0.3 => 3.0.3
    @storybook/blocks: ^8.1.6 => 8.1.6
    @storybook/client-logger: latest => 8.1.6
    @storybook/react: ^8.1.6 => 8.1.6
    @storybook/react-vite: ^8.1.6 => 8.1.6
    @storybook/test: ^8.1.6 => 8.1.6
    @storybook/test-runner: ^0.18.2 => 0.18.2
    eslint-plugin-storybook: ^0.8.0 => 0.8.0
    storybook: ^8.1.6 => 8.1.6

Additional context

No response

[Vanessa Yuen]

In pre-7.0 versions of Storybook it was possible to pass in arbitrary components as children to Canvas. That is deprecated and the Canvas block now only supports a single story (docs). For your use case, you can use: <Canvas of={...} />