UI: Prevent primary story from duplicating anchor ID

[Sidnioulz]

Closes #33363

What I did

Changed DocsStory so it treats the Primary story anchor ID differently. This is because we know that we include the Primary story on top of all stories, so it needs a unique anchor.

Alternatively, we could choose to not create an anchor at all here as it appears unused.

Checklist for Contributors

Testing

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

I didn't manage to write DocsStory stories that wouldn't pick up a primary story, due to useOf usage in the component.

Manual testing

1. Visit http://localhost:6006/?path=/docs/components-togglebutton--docs or any other autodocs page
2. Check that no sb-anchor has the same ID

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
  • Corrected story identification in docs so the intended story is targeted when primary mode is active, preventing mislinked documentation.
• Tests
  • Updated end-to-end test to validate the primary/basic story display reliably by checking the first basic story's text.

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

[nx-cloud]

View your CI Pipeline Execution ↗ for commit edaf213

Command	Status	Duration	Result
nx run-many --targets compile	✅ Succeeded	34s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-12-24 13:18:28 UTC

[coderabbitai]

📝 Walkthrough

Walkthrough

Updates change how story IDs are generated for primary stories (prefixing with "primary--" when __primary is true) and simplify an e2e test to select and assert the first basic story instead of the second.

Changes

Cohort / File(s)	Summary
Docs story ID behavior code/addons/docs/src/blocks/blocks/DocsStory.tsx	Anchor storyId prop now uses __primary ? \primary--${story.id}` : story.idinstead of alwaysstory.id`.
E2E test selection update code/e2e-tests/addon-docs.spec.ts	Test now selects the first basic story directly and asserts its text ("A basic button") rather than selecting the second item previously.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~5–15 minutes

• Verify primary-- prefix matches routing/lookup expectations where story IDs are consumed.
• Confirm tests reflect intended UI ordering and that selector changes remain robust (no flakiness).

✨ 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 1f4668c and d02c83f.

📒 Files selected for processing (1)

• code/e2e-tests/addon-docs.spec.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (7)

**/*.{test,spec}.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{test,spec}.{ts,tsx}: Test files should follow the naming pattern *.test.ts, *.test.tsx, *.spec.ts, or *.spec.tsx
Follow the spy mocking rules defined in .cursor/rules/spy-mocking.mdc for consistent mocking patterns with Vitest

Files:

• code/e2e-tests/addon-docs.spec.ts

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

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

Use ESLint and Prettier configurations that are enforced in the codebase

Files:

• code/e2e-tests/addon-docs.spec.ts

**/*.{ts,tsx}

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

Enable TypeScript strict mode

Files:

• code/e2e-tests/addon-docs.spec.ts

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

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

code/**/*.{ts,tsx,js,jsx,mjs}: Use server-side logger from 'storybook/internal/node-logger' for Node.js code
Use client-side logger from 'storybook/internal/client-logger' for browser code
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/e2e-tests/addon-docs.spec.ts

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

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

Export functions that need to be tested from their modules

Files:

• code/e2e-tests/addon-docs.spec.ts

code/**/*.{test,spec}.{ts,tsx,js,jsx}

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

code/**/*.{test,spec}.{ts,tsx,js,jsx}: Write meaningful unit tests that actually import and call the functions being tested
Mock external dependencies using vi.mock() for file system, loggers, and other external dependencies in tests
Aim for high test coverage of business logic (75%+ for statements/lines) using coverage reports

Files:

• code/e2e-tests/addon-docs.spec.ts

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

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

code/**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier with --write flag to format code before committing
Run ESLint with yarn lint:js:cmd to check for linting issues and fix errors before committing

Files:

• code/e2e-tests/addon-docs.spec.ts

🧠 Learnings (2)

📓 Common learnings

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.

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Tabs/Tabs.stories.tsx:222-227
Timestamp: 2025-11-05T09:36:55.944Z
Learning: Repo: storybookjs/storybook PR: 32458 — In code/core/src/components/components/Button/Button.tsx (React/TypeScript), ButtonProps includes ariaLabel?: string | false and the component maps it to the DOM aria-label. Convention: ariaLabel is mandatory on all Button usages — provide a descriptive string for icon-only buttons; set ariaLabel=false when the button’s children already serve as the accessible name. Do not suggest using a raw aria-label prop on Button call sites.

📚 Learning: 2025-11-28T14:50:24.889Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-28T14:50:24.889Z
Learning: Follow existing patterns and conventions in the Storybook codebase

Applied to files:

• code/e2e-tests/addon-docs.spec.ts

⏰ 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). (3)

• GitHub Check: normal
• GitHub Check: Core Unit Tests, windows-latest
• GitHub Check: nx

🔇 Additional comments (1)

code/e2e-tests/addon-docs.spec.ts (1)

33-34: The test change is correct. Direct ID selection is appropriate for validating story content display on the docs page.

---

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

[storybook-app-bot]

Package Benchmarks

^{Commit: edaf213, ran on 24 December 2025 at 13:18:53 UTC}

No significant changes detected, all good. 👏