Core: Fix built-in tags filtering

[ghengeveld]

Closes #

What I did

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

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 pull request has been released as version 0.0.0-pr-32526-sha-8a835923. Try it out in a new sandbox by running npx [email protected] sandbox or in an existing project with npx [email protected] upgrade.

More information

Published version	0.0.0-pr-32526-sha-8a835923
Triggered by	@yannbf
Repository	storybookjs/storybook
Branch	fix-built-in-tags-filtering
Commit	8a835923
Datetime	Tue Sep 23 10:21:28 UTC 2025 (1758622888)
Workflow run	17943081185

To request a new release of this pull request, mention the @storybookjs/core team.

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

Summary by CodeRabbit

• New Features

  • Introduced “test” items under stories with dedicated icons, deep-linking, and sidebar support.
  • Enhanced tag filtering with include/exclude, default presets, and built-in filters (Docs/Play/Testing).

• Improvements

  • Single-story/test runs refined; search/sidebar/status logic recognizes test subtype.
  • Story index now distinguishes subtype (story/test) and nests tests under their parent stories.
  • Save controls hidden for test entries; better tree navigation and status display.

• Bug Fixes

  • Prevented tooltip list item overflow.

• Tests

  • Added component/e2e coverage for test items and filtering.

• Documentation

  • Updated init/upgrade commands to use latest; adjusted migration links; added Vitest config notes.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

Introduces Story.test support and test sub-entries across CSF, indexing, manager/store APIs, vitest integration, and UI. Adds subtype fields (story/test), toTestId, getStoryChildren, and TEST_FN_TAG. Updates transformers, sorting, summarization, and filtering. Adjusts Storybook configs, templates, e2e tests, and various mocks/snapshots. Removes legacy tocbot exposure.

Changes

Cohort / File(s)	Summary
CSF test syntax + APIs code/core/src/csf/csf-factories.ts, code/core/src/csf/index.ts, code/core/src/csf/story.ts, code/core/src/csf-factories.test.ts	Add Story.test API, child story storage (__children), getStoryChildren, toTestId, TestFunction type, run(testName) support; tests updated.
CSF parsing and indexing code/core/src/csf-tools/CsfFile.ts, code/core/src/csf-tools/CsfFile.test.ts, code/core/src/csf-tools/storyIndexer.test.ts	Parse and collect tests, emit index inputs with subtype 'test', parent links, TEST_FN_TAG; broaden test coverage.
Index generation and summarization code/core/src/core-server/utils/StoryIndexGenerator.ts, .../summarizeIndex.ts, .../utils/__tests__/index-extraction.test.ts, .../summarizeIndex.test.ts, .../stories-json.test.ts, .../build-index.test.ts, .../StoryIndexGenerator.test.ts	Add TEST_FN_TAG, emit subtype for stories/tests, parent fields for tests; summary now includes testStoryCount, maxTestsPerStory, singleTestStoryCount; tests updated.
Prepared index and manager types code/core/src/types/modules/indexer.ts, code/core/src/types/modules/api-stories.ts, code/core/src/types/modules/csf.ts, code/core/src/types/modules/core-common.ts, code/core/src/types/modules/story.ts	Extend StoryIndexEntry with subtype/parent/parentName; add API_TestEntry, subtype on API_StoryEntry, component importPath, TagOptions.defaultFilterSelection; re-export TestFunction; adjust unions.
Manager: sidebar/tree UI for tests code/core/src/manager/components/sidebar/*.tsx, .../components/CollapseIcon.tsx, .../mockdata.ts, .../HighlightStyles.tsx, .../IconSymbols.tsx, .../useExpanded.ts, .../useHighlighted.ts, code/core/src/manager/utils/{tree.ts,status.tsx}	Render test nodes with new icon; unify node rendering; status handling for stories; dynamic type icon by subtype; pass tag presets; CollapseIcon props refactor; keyboard handling includes test; tree utils guard; mock data gains subtype and test child.
Manager: stories preparation and API code/core/src/manager-api/lib/stories.ts, .../lib/stories.test.ts, .../modules/stories.ts, .../root.tsx, .../tests/*	Prepared entries include subtype; hash building handles tests re-homing; APIs accept API_TestEntry; useCurrentStory widened; tests/mocks updated with subtype.
Preview/store processing code/core/src/preview-api/modules/store/{processCSFFile.ts,StoryStore.ts,sortStories.ts}, .../PreviewWeb.*, .../render/StoryRender.test.ts, .../PreviewWeb.mockdata.ts	Process child tests via getStoryChildren/toTestId; include subtype/parent in index entries; map test storyName to parentName; adjust logs/snapshots.
Vitest integration code/addons/vitest/src/node/vitest-manager.ts, .../test-manager.test.ts, .../components/TestProviderRender.tsx, .../components/TestProviderRender.stories.tsx, code/core/src/csf-tools/vitest-plugin/transformer.ts, .../transformer.test.ts, code/addons/vitest/src/vitest-plugin/test-utils.ts	Single-story run regex logic with DOUBLE_SPACES; test name building; payload refinement; transformer emits describe/test blocks per Story.test; test-utils accept Story/Meta, optional testName, storyId.
Docs addon and typings code/addons/docs/src/preview.ts, .../typings.d.ts, .../blocks/external/ExternalPreview.ts	Remove global tocbot exposure; add subtype 'story' in external preview entries; typing cleanup.
Storybook config and new examples code/.storybook/{main.ts,preview.tsx}, code/core/src/component-testing/components/test-fn.stories.tsx, code/renderers/react/template/stories/{preview.ts,test-fn.stories.tsx}	Limit loaded stories to test-fn; preview decorator recognizes testFunction; add CSF examples demonstrating Story.test for core and react template.
Controls and filtering code/core/src/controls/components/ControlsPanel.tsx, code/core/src/manager/components/sidebar/{TagsFilter.tsx,TagsFilterPanel.tsx,TagsFilter*.stories.tsx,Sidebar.tsx}	Hide Save for test sub-entries; redesign tags filter with include/exclude model, presets, new panel API; stories updated.
Renderers/server code/renderers/server/src/preset.ts	experimental_indexers now set subtype: 'story' on entries.
E2E tests and utils code/e2e-tests/*	Add deep-linking to test via :testName, add test function suite, selector tweaks, checkTemplate helper, remove unused import.
CLI codemods and messages code/lib/cli-storybook/src/codemod/helpers/*, .../helpers/logMigrationSummary*, .../upgrade.ts, .../sandbox-templates.ts	Wrap configs with defineMain/definePreview; safer story codemod with bail-out and warnings; update migration URLs; broaden React beta resolutions.
Misc/UI fixes code/core/src/components/components/tooltip/ListItem.tsx, code/frameworks/sveltekit/src/preset.ts, docs/*, scripts/sandbox/generate.ts	Min-width fixes; remove unused type import; docs command updates and latest.json; minor formatting.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor Dev as Developer
  participant SB as Storybook (CSF)
  participant Index as Story Index Generator
  participant Manager as Manager UI
  participant Vitest as Vitest Runner

  Dev->>SB: Define Story S and S.test("Name", fn/annotations, fn)
  SB-->>SB: Create child test stories via getStoryChildren + toTestId
  SB->>Index: Emit entries {type: 'story', subtype: 'story'|'test', parent?}
  Index-->>Manager: Prepared index with stories and tests
  Manager->>Manager: Render Sidebar nodes (story/test), filters apply TEST_FN_TAG
  Dev->>Vitest: Trigger run (global/story/test)
  Vitest->>Index: fetchStories(requestedIds?)
  Vitest->>Vitest: Build regex via getTestName / DOUBLE_SPACES
  Vitest-->>Dev: Execute matching tests (composeStory.run(testName))
  Note over Manager,Vitest: Test selection deep-link uses id: "storyId:testName"

Loading

Estimated code review effort

🎯 5 (Critical) | ⏱️ ~120 minutes

Possibly related issues

• [Tracking]: .test syntax preview in Storybook #32244 — Implements .test support across CSF, indexing, vitest, manager/store, and UI, matching these changes.

Possibly related PRs

• Core: Add missing subtype props #32490 — Also adds subtype: 'story' to story index entries and related handling across similar modules.

Suggested labels

core, ui

Suggested reviewers

• kylegach
• jonniebigodes
• yannbf

Poem

A rabbit taps the test drum: thump-thump, hooray!
Stories sprout children, in tidy array.
Sidebar grows badges, a twinkle, a glint—
Double spaces whisper each regex hint.
Hops to Vitest, green lights align—
Carrots for coverage; all checks fine! 🥕✨

Pre-merge checks and finishing touches and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 21.74% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The PR title "Core: Fix built-in tags filtering" is concise and accurately reflects the primary intent of the changeset; key changes in TagsFilter, TagsFilterPanel, TagOptions types, and related tests implement built-in tag filtering and include/exclude behavior. Although the diff touches additional areas (story/test indexing, subtype fields, and test infra) these appear to be supporting or ancillary changes enabling the tag-filtering fix. A reviewer scanning history will understand the main purpose from this title.

---

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

[nx-cloud]

View your CI Pipeline Execution ↗ for commit a25c124

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	52s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-09-23 11:17:23 UTC

[storybook-app-bot]

Package Benchmarks

^{Commit: a25c124, ran on 23 September 2025 at 11:02:01 UTC}

No significant changes detected, all good. 👏