Docs: Update tags, add filtering

[kylegach]

What I did

• Update tags guidance
  • Add play-fn and test-fn built-in tags
  • Add custom tag definition
  • Update sidebar filtering
  • Add "exclude test-fn" recipe
• Add main config tags API reference

Checklist for Contributors

Testing

Manual testing

1. Sync this branch with locally running docs

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.

Summary by CodeRabbit

• Documentation
  • Added “tags” property to main configuration docs, including a dedicated page detailing tag configuration and default include/exclude behavior.
  • Introduced snippets for configuring custom tags, including “experimental” and a “test-fn” tag excluded by default (JS/TS examples).
  • Expanded “Writing stories” docs: new built-in tags (play-fn, test-fn), custom tag guidance, revamped sidebar filtering by tags, updated examples and images, and a test-case sidebar decluttering example.
  • Adjusted sidebar ordering for main-config TypeScript, viteFinal, and webpackFinal pages for improved navigation.

[coderabbitai]

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (1)

• docs/_assets/writing-stories/tag-filter.png is excluded by !**/*.png

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

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

📝 Walkthrough

Walkthrough

Adds documentation for a new main config property "tags", introduces built-in tags (play-fn, test-fn), JS/TS snippet examples (including excluding test-fn by default), updates writing-stories/tags guidance, and adjusts sidebar ordering metadata for several main-config docs.

Changes

Cohort / File(s)	Summary of changes
Main config tag snippets docs/_snippets/main-config-tags.md, docs/_snippets/main-config-tags-test-fn-exclude.md	Add JS and TS example snippets showing a tags config object, including a custom experimental example and a test-fn example with defaultFilterSelection: 'exclude'.
API: main config tags doc docs/api/main-config/main-config-tags.mdx	New documentation describing the tags config shape, per-tag defaultFilterSelection, behavior when unset, and links to example snippets.
API: sidebar order updates docs/api/main-config/main-config-typescript.mdx, docs/api/main-config/main-config-vite-final.mdx, docs/api/main-config/main-config-webpack-final.mdx	Update frontmatter sidebar.order values (incremented). No content changes.
API: main config index docs/api/main-config/main-config.mdx	Add listing/link for the new tags main config property.
Writing stories: tags guide docs/writing-stories/tags.mdx	Expand guide with built-in tags (play-fn, test-fn), add custom tags section, reorganize filtering guidance, add examples and snippet references (including test-fn exclude), and update images/illustrations paths.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor Dev as Developer
  participant SB as Storybook
  participant CFG as ConfigLoader
  participant TAG as TagResolver
  participant UI as Sidebar

  Dev->>SB: start
  SB->>CFG: load main.(js|ts)
  CFG-->>SB: config { framework, stories, tags }
  SB->>TAG: register built-in + custom tags
  TAG-->>SB: defaultFilterSelection map
  SB->>TAG: assign tags to stories
  TAG-->>SB: story-tag mappings
  SB->>UI: build sidebar applying include/exclude defaults
  UI-->>Dev: render filtered sidebar

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• CSF: Add Storybook test syntax (Storybook v10) #32455 — Adds the test-fn and play-fn tag behavior that these docs describe.
• Core: Add missing subtype props #32490 — Introduces TEST_FN_TAG and related tag handling referenced by the documentation.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch docs-update-tags

---

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

[coderabbitai]

Actionable comments posted: 2

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 05e224e and 1dab618.

⛔ Files ignored due to path filters (2)

• docs/_assets/writing-stories/custom-tag-filter.png is excluded by !**/*.png
• docs/_assets/writing-stories/tag-filter.png is excluded by !**/*.png

📒 Files selected for processing (8)

• docs/_snippets/main-config-tags-test-fn-exclude.md (1 hunks)
• docs/_snippets/main-config-tags.md (1 hunks)
• docs/api/main-config/main-config-tags.mdx (1 hunks)
• docs/api/main-config/main-config-typescript.mdx (1 hunks)
• docs/api/main-config/main-config-vite-final.mdx (1 hunks)
• docs/api/main-config/main-config-webpack-final.mdx (1 hunks)
• docs/api/main-config/main-config.mdx (1 hunks)
• docs/writing-stories/tags.mdx (3 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-09-25T09:21:27.284Z

Learnt from: CR
PR: storybookjs/storybook#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-25T09:21:27.284Z
Learning: Applies to test-storybooks/** : Maintain test configurations and assets under test-storybooks/ for Storybook testing

Applied to files:

• docs/_snippets/main-config-tags.md
• docs/_snippets/main-config-tags-test-fn-exclude.md

⏰ 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: Danger JS
• GitHub Check: Core Unit Tests, windows-latest

[kylegach]

@shilman — Reading markdown table diffs sucks, so here's a screenshot:

Do I have the details correct here?

[shilman]

I wonder if it would slightly better if Applied by default? => Default and the column values were true or false?

[kylegach]

I think we lose some clarity without "applied". I'm going to leave it as-is for now.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit fffe5e4

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

---

☁️ Nx Cloud last updated this comment at 2025-10-06 14:52:15 UTC

[shilman]

Great job! Everything is correct and reads well AFAICT, though @coderabbitai seems to have caught some issues.

[jonniebigodes]

Since this has already been merged, it is worth mentioning that changing this heading will lead to a broken URL in the UI. Specifically in the TagsFilterPanel component