Addon-Docs: Add Reset story button to re-render stories in docs

[6810779s]

Closes #12101

What I did

Add a "Reload story" button to the Canvas action bar in Docs view.
Uses FORCE_REMOUNT event, matching the existing Story canvas reload behavior.
The button is shown by default for all inline stories — no configuration needed.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

1. Run a sandbox: yarn task --task sandbox --start-from auto --template react-vite/default-ts
2. Open Storybook in your browser at http://localhost:6006
3. Go to any story's Docs page
4. Click the "Reload story" button in the action bar
5. Verify the story remounts from scratch

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update MIGRATION.MD

Summary by CodeRabbit

• New Features
  • Added a Reload Story button in the preview panel so users can reset and refresh the current story directly from documentation.
  • The Reload action appears in the preview toolbar when available, offering a quick way to reinitialize the displayed story without leaving the docs.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

Adds a Reload action to the docs preview: Preview accepts an optional onReloadStory prop and renders a Sync (Reload) button; Canvas wires onReloadStory to emit FORCE_REMOUNT with the current storyId via docsContext.channel when inline is true.

Changes

Cohort / File(s)	Summary
Canvas wiring code/addons/docs/src/blocks/blocks/Canvas.tsx	Added handleReloadStory (via useCallback) that emits FORCE_REMOUNT on docsContext.channel with the current storyId; passes this callback into PurePreview as onReloadStory when inline is true.
Preview component code/addons/docs/src/blocks/components/Preview.tsx	Added onReloadStory?: () => void to Preview props and wiring so the toolbar/actions render a Reload control when provided; passes onReloadStory into the positioned toolbar/action handler.
Toolbar UI code/addons/docs/src/blocks/components/Toolbar.tsx	Introduced ReloadProps and extended ToolbarProps with onReloadStory; imported SyncIcon and conditionally renders a ghost Reload button (ariaLabel "Reload story") that calls onReloadStory when present and not loading.

sequenceDiagram
  autonumber
  actor User as "User"
  participant Preview as "Preview UI"
  participant Canvas as "Canvas / PurePreview wrapper"
  participant Channel as "docsContext.channel"
  participant Story as "Story iframe / Manager"

  User->>Preview: Click Reload button
  Preview->>Canvas: call onReloadStory()
  Canvas->>Channel: emit(FORCE_REMOUNT, { storyId })
  Channel->>Story: FORCE_REMOUNT event
  Story->>Story: Remount / reload story

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• UI: Fix code/copy buttons overlap with content #33889: Modifies Preview.tsx and toolbar/prop handling — closely related to adding the Reload action.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@code/addons/docs/src/blocks/blocks/Canvas.tsx`:
- Around line 100-102: The inline Canvas currently always wires onResetStory
(inline ? handleResetStory : undefined) which forces a reset button for every
inline Docs canvas; change this to check a configurable prop/parameter (e.g., a
block prop like allowReset or a docs parameter like docs.disableReset) so the
handler is only passed when inline && !disableReset (or inline && allowReset).
Update the Canvas component where onResetStory is assigned and ensure the Story
usage (Story ... resetKey={resetKey}) remains unchanged; document/read the prop
from props or props.meta so consumers can opt out per-story, per-component, or
globally.
- Around line 86-89: The handler currently emits RESET_STORY_ARGS and also bumps
local resetKey (setResetKey), causing two remounts; remove the local remount
path by deleting the setResetKey((prev) => prev + 1) call (and remove/reset the
resetKey state if present) so handleResetStory only calls
docsContext.channel.emit(RESET_STORY_ARGS, { storyId: story.id }); update the
handleResetStory dependency array to only include docsContext.channel and
story.id and remove any references to setResetKey/resetKey elsewhere in this
component.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5ae9e1b6-5386-4fb6-841a-97bca5fc45c7

📥 Commits

Reviewing files that changed from the base of the PR and between 8dff441 and 6e99fc3.

📒 Files selected for processing (4)

• code/addons/docs/src/blocks/blocks/Canvas.tsx
• code/addons/docs/src/blocks/blocks/Story.tsx
• code/addons/docs/src/blocks/components/Preview.tsx
• code/addons/docs/src/blocks/components/Story.tsx

[valentinpalkovic]

Hi @6810779s

Thank you so much for your contribution!

After reviewing the changes and discussing them internally, we have a few requested adjustments to ensure this aligns with the original issue and our existing UI patterns.

The original issue specifically requested a way to reload a story. Currently, this PR introduces a feature that does an args reset + reload. We feel it's best to give users the exact same controls in the Docs canvas as they already have in the Story canvas, which is a standard "reload" action. Additionally, we'd prefer not to put this behind a parameter (docs.canvas.resetButton). Managing this configuration seems unnecessary for users, and we'd rather it be the default behavior.

[6810779s]

Hi @6810779s

Thank you so much for your contribution!

After reviewing the changes and discussing them internally, we have a few requested adjustments to ensure this aligns with the original issue and our existing UI patterns.

The original issue specifically requested a way to reload a story. Currently, this PR introduces a feature that does an args reset + reload. We feel it's best to give users the exact same controls in the Docs canvas as they already have in the Story canvas, which is a standard "reload" action. Additionally, we'd prefer not to put this behind a parameter (docs.canvas.resetButton). Managing this configuration seems unnecessary for users, and we'd rather it be the default behavior.

Thanks for the feedback! I've updated the PR:

• Replaced RESET_STORY_ARGS with FORCE_REMOUNT to match the Story canvas reload behavior
• Removed the docs.canvas.resetButton parameter — the button now shows by default for all inline stories
• Changed the icon from UndoIcon to SyncIcon and label to "Reload story"

[Sidnioulz]

Thanks for the PR! I've added some notes on UI/copy for you!

UI concerns are addressed. Thanks!

[Sidnioulz]

Could you please move the button to the start of the canvas toolbar, to match its position in the main UI toolbar in story mode?

[storybook-app-bot]

Package Benchmarks

^{Commit: da4e76a, ran on 24 March 2026 at 11:28:44 UTC}

No significant changes detected, all good. 👏

[Sidnioulz]

Thanks so much @6810779s! Now we wait for CI to go green 🍿 🤓

I'll let you know if something requires your attention.

[6810779s]

Thanks so much @6810779s! Now we wait for CI to go green 🍿 🤓

I'll let you know if something requires your attention.

Thank you for the thorough review, @Sidnioulz ! 🙏