Core: Fix Checklist behavior with hidden sidebar

[ghengeveld]

What I did

• Prevent confetti from showing when completing a checklist item whilst the sidebar is hidden.
• Force-open the sidebar when starting main or testing onboarding tour.

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

Caution

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

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

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

• Bug Fixes

  • Ensure the sidebar checklist respects navigation visibility (it no longer renders when navigation is hidden).
  • Ensure navigation is shown automatically when starting guided tours and when initiating "Run Tests", so tour and test UI display correctly.

• Tests

  • Updated story mocks to report navigation visibility for more accurate component previews.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit c5f0f6c

Command	Status	Duration	Result
nx run-many -t compile,check,knip,test,pretty-d...	✅ Succeeded	10m 17s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-01-16 15:43:19 UTC

[nx-cloud]

View your CI Pipeline Execution ↗ for commit f3f6c63

Command	Status	Duration	Result
nx run-many -t compile,check,knip,test,pretty-d...	⏳ In Progress	...	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-01-15 22:21:33 UTC

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds navigation-visibility checks and ensures navigation is shown before certain checklist actions: the ChecklistWidget short-circuits render when nav is hidden, and two checklist actions call api.toggleNav(true) before proceeding.

Changes

Cohort / File(s)	Summary
Checklist widget guard code/core/src/manager/components/sidebar/ChecklistWidget.tsx	Adds an early guard: returns null when api.getIsNavShown() is false, preventing widget render if navigation is hidden.
Checklist actions enabling nav code/core/src/shared/checklist-store/checklistData.tsx	Inserts api.toggleNav(true) into the Guided Tour start and Run Tests start actions to ensure navigation UI is visible before their logic (TourGuide rendering).
Story mocks updated code/core/src/manager/components/sidebar/ChecklistWidget.stories.tsx, code/core/src/manager/components/sidebar/Sidebar.stories.tsx	Adds getIsNavShown: () => true to managerContext.api in story files to mock navigation visibility for stories.
Manifest package.json	Minor manifest change (lines changed noted in diff).

Sequence Diagram

sequenceDiagram
    participant User
    participant Action as "Checklist Action"
    participant API as "Navigation API"
    participant Widget as "ChecklistWidget"

    User->>Action: trigger action (Start Tour / Run Tests)
    Action->>API: toggleNav(true)
    API->>API: set navigation visible
    User->>Widget: UI re-evaluates / attempts render
    Widget->>API: getIsNavShown()
    API-->>Widget: true
    Widget->>Widget: render checklist content

Loading

Possibly Related PRs

• Core: Support disabling Checklist widget through feature config #33430 — Related changes controlling Checklist widget visibility (this PR adds a nav-visibility guard; referenced PR adds a feature-flag gate).
• Core: Avoid late layout shift and improve ChecklistWidget perceived performance #33184 — Both modify ChecklistWidget rendering/control flow; related restructuring of render/animation gating.
• Core: Fix testing widget focus outline #33172 — Modifies the same ChecklistWidget file and rendering components; likely touches similar UI flow.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

✨ Finishing touches

• 📝 Generate docstrings

---

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 501facd and dd142c6.

📒 Files selected for processing (2)

• code/core/src/manager/components/sidebar/ChecklistWidget.stories.tsx
• code/core/src/manager/components/sidebar/Sidebar.stories.tsx

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{js,jsx,ts,tsx,json,md,html,css,scss}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Format code using Prettier with yarn prettier --write <file>

Files:

• code/core/src/manager/components/sidebar/Sidebar.stories.tsx
• code/core/src/manager/components/sidebar/ChecklistWidget.stories.tsx

**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Run ESLint checks using yarn lint:js:cmd <file> or the full command cross-env NODE_ENV=production eslint --cache --cache-location=../.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives to fix linting errors before committing

Files:

• code/core/src/manager/components/sidebar/Sidebar.stories.tsx
• code/core/src/manager/components/sidebar/ChecklistWidget.stories.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Enable TypeScript strict mode across all packages

Files:

• code/core/src/manager/components/sidebar/Sidebar.stories.tsx
• code/core/src/manager/components/sidebar/ChecklistWidget.stories.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{ts,tsx,js,jsx}: Export functions from modules if they need to be tested
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

• code/core/src/manager/components/sidebar/Sidebar.stories.tsx
• code/core/src/manager/components/sidebar/ChecklistWidget.stories.tsx

code/{core,lib,addons,builders,frameworks,presets}/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use logger from storybook/internal/node-logger for server-side logging in Node.js code

Files:

• code/core/src/manager/components/sidebar/Sidebar.stories.tsx
• code/core/src/manager/components/sidebar/ChecklistWidget.stories.tsx

🧠 Learnings (1)

📚 Learning: 2025-11-05T09:38:47.712Z

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.

Applied to files:

• code/core/src/manager/components/sidebar/Sidebar.stories.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: normal-generated
• GitHub Check: nx

🔇 Additional comments (2)

code/core/src/manager/components/sidebar/Sidebar.stories.tsx (1)

60-60: LGTM!

The mock getIsNavShown method correctly returns true to simulate the navigation being visible, which is consistent with the expected behavior for these sidebar stories. This aligns with the new navigation visibility check in ChecklistWidget.

code/core/src/manager/components/sidebar/ChecklistWidget.stories.tsx (1)

14-14: LGTM!

The mock is correctly added and consistent with the Sidebar.stories.tsx implementation. Since ChecklistWidget now short-circuits rendering when getIsNavShown() returns false, this mock ensures the widget renders properly in stories.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

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

[storybook-app-bot]

Package Benchmarks

^{Commit: c5f0f6c, ran on 16 January 2026 at 15:39:16 UTC}

The following packages have significant changes to their size or dependencies:

@storybook/cli

	Before	After	Difference
Dependency count	183	183	0
Self size	775 KB	775 KB	🚨 +139 B 🚨
Dependency size	67.38 MB	67.45 MB	🚨 +68 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/codemod

	Before	After	Difference
Dependency count	176	176	0
Self size	30 KB	30 KB	🎉 -40 B 🎉
Dependency size	65.95 MB	66.02 MB	🚨 +68 KB 🚨
Bundle Size Analyzer	Link	Link