docs: pass of to Canvas so docs render the right story - #1276
Merged
Conversation
`<Canvas>` wrapping a `<Story of={...} />` child silently rendered the
wrong story. Storybook's `CanvasImpl` ignores `props.children` entirely and
renders its own `<Story of={of || story.moduleExport} />`, where `story`
comes from `useOf(of || 'story')`. With no `of` on the `Canvas`, that
resolves to the *primary* story — the first export in the CSF file — so
every such block rendered the first story and discarded the nested
`<Story>` reference. No error or warning was emitted, which is why the
markup looked correct.
This is the Storybook 6 nesting pattern; SB 7+ requires `of` on `Canvas`.
Move `of` onto `Canvas` in all 13 occurrences:
- Result.docs.mdx (8) — Info, Warning, Error, Custom Icon, Custom Title,
Compact, Width Limit and Custom Width all rendered `Success`
- SimpleLayout.docs.mdx (4) — all four rendered `Flow`
- NumberInput.docs.mdx (1) — latent only, since `Default` already happens
to be the first export
Also drop the now-unused `Story` import from the latter two files.
Verified in a running Storybook: each section now renders its own story.
Contributor
Bugbot is paused — on-demand spend limit reachedBugbot uses usage-based billing for this team and has hit its on-demand spend limit. A team admin can raise the spend limit in the Cursor dashboard, or wait for the next billing cycle to continue. |
🦋 Changeset detectedLatest commit: 0d9571a The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
📦 NPM canary releaseDeployed canary version 0.0.0-canary-c3105d7. |
Contributor
🧪 Storybook is successfully deployed!
|
Contributor
🏋️ Size limit report
Click here if you want to find out what is changed in this build |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Describe changes
Every
<Canvas>block inResult.docs.mdxrendered the same story (Success), no matter which story it referenced. Same inSimpleLayout.docs.mdx(all four renderedFlow). The markup looked correct, and nothing errored or warned.The cause is the Storybook 6 nesting pattern, which SB 7+ silently broke.
CanvasImplignoresprops.childrenentirely and renders its own story:With no
ofon theCanvas,useOf(of || 'story')resolves to the primary story — the first export in the CSF file — so the block rendered that and threw away the nested<Story of={...} />reference.Moved
ofontoCanvasin all 13 occurrences — every one in the repo:Result.docs.mdxSuccessSimpleLayout.docs.mdxFlowNumberInput.docs.mdxDefaultalready happens to be the first exportAlso dropped the now-unused
Storyimport from the latter two files.Verification
Checked against a running Storybook. Each section now renders its own story:
SimpleLayoutlikewise now shows four distinct examples. No new console errors. Chromatic should show real visual diffs on these three docs pages — that's the fix landing, not a regression.Notes for the reviewer
src/**/*.docs.mdxis not inpackage.json#files, so nothing ships to consumers. The changeset is intentionally empty, per CONTRIBUTING's guidance for trivial changes..ts/.tsx/.jsfiles are touched.pnpm testis flaky onmainitself (verified —mainfails the same hook, with a different test file each run).pnpm lintpasses.no-redundant-default-propstyle lint rule for this pattern could prevent regressions, but it needs MDX support, so I left it out of scope.Checklist
Closes: N/A
Other information
The same 13 occurrences exist in the
feat-migration-to-okhslbranch checkout; not touched here.🤖 Generated with Claude Code