Sidebar: Show same status icon at story and group level

[valentinpalkovic]

Closes #

What I did

Follow-up to #34701 — unifies the change-detection and test status iconography between the story leaf and the group/component branch in the sidebar.

Story leaf

• Renders both the change-detection icon and the test status icon side-by-side, matching the dual-slot layout already used at the branch level.
• Change icon visibility uses the same gating as the branch (affected always hidden, modified gated on the modified status filter, new always shown).
• Test icon comes directly from getStatus(theme, testStatus).icon instead of being folded into a single `storyStatus` slot.

Group / component branch

• `branchTestIcon` now uses the same `getStatus(theme, branchTest).icon` shape as the leaf — error/warning render the canonical SVGs instead of the small colored dot sprite. Story and group statuses are now visually identical at both depths.

Cleanup

• The `#DOT_ID` indirection is no longer referenced from `Tree.tsx` (the symbol stays in `IconSymbols.tsx` for any future use). Removes the unused `UseSymbol` import from Tree.

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

Run: `cd code && yarn vitest run --config vitest.config.storybook.ts core/src/manager/components/sidebar/{Tree,Sidebar,ReviewChangesButton}.stories.tsx` — 51/51 pass.

Manual testing

Caution

This section is mandatory for all contributions.

1. `cd code && yarn storybook:ui`
2. With change detection enabled, browse the sidebar:
   • A story marked new shows the sparkle icon at both the story leaf and any parent component/group (same shape, same color).
   • A story marked modified with the modified filter active shows the modified icon at both leaf and group level.
   • A story with a failing/warning test shows the error/warning SVG at both leaf and group level (the small colored dot is gone).
   • Stories with both a change-detection status and a test status display two distinct slots at the leaf, mirroring the existing branch behavior.

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
• Make sure this PR contains one of the labels below:
  • `maintenance` recommended

🦋 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.

Summary by CodeRabbit

• Refactor

  • Improved status indicator display in the sidebar tree, now showing separate buttons for change and test status for enhanced clarity.
  • Refined status color logic to reflect the most critical status across different indicator types.

• Tests

  • Updated test assertions to validate enhanced status display behavior across story, component, and group hierarchy levels.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 9ff27da2-71f4-4091-853d-e530f75ad8bb

📥 Commits

Reviewing files that changed from the base of the PR and between cfa5d30 and 4589f3c.

📒 Files selected for processing (2)

• test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/component-testing.spec.ts
• test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/component-testing.spec.ts

---

📝 Walkthrough

Walkthrough

The PR refactors the Storybook sidebar tree UI to separate change-detection and test status indicators into independent computed values and rendered buttons, replacing a single combined status icon. Leaf-node status computation conditions when change icons appear, derives text color from the overall most-critical status, and renders dual status buttons when both exist. Branch-node test icon logic is simplified to direct icon lookup, and related tests are updated to expect multiple status buttons per hierarchy level.

Changes

Sidebar Tree Status Icon Refactoring

Layer / File(s)	Summary
Leaf Node Status Computation code/core/src/manager/components/sidebar/Tree.tsx	leafChangeIcon is computed with conditions to suppress for unknown, affected, and modified when filter inactive; testIcon is derived independently; overallStoryStatus and textColor are computed from the most-critical status across both change and test.
Leaf Node Rendering code/core/src/manager/components/sidebar/Tree.tsx	Leaf-node UI conditionally renders separate StatusButton elements for changeStatus and testStatus in a StatusSlots container when both icons exist, instead of a single combined status button.
Branch Node Icon Simplification code/core/src/manager/components/sidebar/Tree.tsx	Branch-node branchTestIcon logic uses getStatus(theme, branchTest).icon directly, removing prior special-casing for error/warning conditions.
Storybook Play Tests code/core/src/manager/components/sidebar/Tree.stories.tsx	WithModified and WithNew play tests now await all tree-change-status-button elements and assert count is at least 1, replacing prior single-element assertions.
E2E Test Expectations test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/component-testing.spec.ts, test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/component-testing.spec.ts	Focused-test assertions updated to expect 3 "Test status: Success" buttons (covering story, component, and group) instead of 1.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• storybookjs/storybook#34504: Modifies status-handling UI and button rendering in the same Tree.tsx component.
• storybookjs/storybook#34305: Related refactoring of change-detection vs test status icon separation and rendering in Tree.tsx.
• storybookjs/storybook#34652: Modifies sidebar tree status-icon logic and change-detection status rendering.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

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

[valentinpalkovic]

@copilot resolve the merge conflicts in this pull request

[Copilot]

@copilot resolve the merge conflicts in this pull request

Resolved in cfa5d30. The conflict in Tree.tsx was between the shouldShowBranchChangeIcon variable refactor from the base branch and this PR's getStatus(theme, branchTest).icon change — merged both cleanly.

[coderabbitai]

🧹 Nitpick comments (1)

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

808-840: 💤 Low value

Story name could be clearer.

The story name WithCTAInActive is ambiguous—it could be read as "CTA In Active [state]" or "CTA Inactive". Consider renaming to something clearer like WithCTAReviewingState or WithCTAActiveNoExplicitFilters to match the assertions (checking for aria-checked="true" and "Reviewing new stories").

The implementation and assertions look correct.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@code/core/src/manager/components/sidebar/Sidebar.stories.tsx` around lines
808 - 840, Rename the ambiguous story export WithCTAInActive to a clearer name
that matches its behavior (e.g., WithCTAReviewingState or
WithCTAActiveNoExplicitFilters) and update all occurrences: change the export
constant name (export const WithCTAInActive) and any references to it in the
file (including beforeEach/play test labels if they reference the symbol) so the
new identifier is used consistently; ensure the Story type annotation and
args/parameters/play/beforeEach blocks remain intact and unchanged except for
the identifier rename.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@code/core/src/manager/components/sidebar/Sidebar.stories.tsx`:
- Around line 808-840: Rename the ambiguous story export WithCTAInActive to a
clearer name that matches its behavior (e.g., WithCTAReviewingState or
WithCTAActiveNoExplicitFilters) and update all occurrences: change the export
constant name (export const WithCTAInActive) and any references to it in the
file (including beforeEach/play test labels if they reference the symbol) so the
new identifier is used consistently; ensure the Story type annotation and
args/parameters/play/beforeEach blocks remain intact and unchanged except for
the identifier rename.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 2223e5a9-58e1-4bda-99eb-b2c778e7c9bf

📥 Commits

Reviewing files that changed from the base of the PR and between 3593430 and cfa5d30.

📒 Files selected for processing (3)

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

[valentinpalkovic]

@copilot resolve the merge conflicts in this pull request

[storybook-app-bot]

Package Benchmarks

^{Commit: 4589f3c, ran on 11 May 2026 at 10:41:20 UTC}

No significant changes detected, all good. 👏

[Copilot]

@copilot resolve the merge conflicts in this pull request

Resolved in 40f0b29. The conflict in Sidebar.stories.tsx was a story name typo (WithCTAInActive → WithCTAInactive) and updated play assertions to match the current label ('Review new stories', aria-checked: 'false') now that the base branch has landed in next.