Skip to content

Core: Respect !dev tag on MDX docs in sidebar#35031

Merged
JReinhold merged 1 commit into
nextfrom
jeppe/fix-mdx-no-dev-tag
Jun 2, 2026
Merged

Core: Respect !dev tag on MDX docs in sidebar#35031
JReinhold merged 1 commit into
nextfrom
jeppe/fix-mdx-no-dev-tag

Conversation

@JReinhold

@JReinhold JReinhold commented Jun 2, 2026

Copy link
Copy Markdown
Contributor

Closes #35029

What I did

The static sidebar filter treated every type === 'docs' entry as visible, which bypassed !dev on unattached and attached MDX. That behavior was introduced in 15d7ef9 to keep CSF autodocs pages visible when meta uses !dev.

Narrowed the exception to CSF autodocs entries only (docs without attached-mdx or unattached-mdx system tags). MDX docs now require the dev tag to appear in the sidebar, same as stories.

Added no-dev-unattached.mdx and no-dev-attached.mdx fixtures under addons/docs docs2, unit tests for computeStaticFilterFn, and e2e assertions in tags.spec.ts.

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!

  1. Run cd code && yarn storybook:ui (or a React sandbox with docs: yarn task sandbox --template react-vite/default-ts --start-from auto)
  2. Open the sidebar under addons/docs → docs2
  3. Confirm no-dev-unattached and no-dev-attached (under button) are not listed
  4. Open core → tags-add → Docs and confirm the autodocs page still appears in the sidebar when meta uses !dev

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

  • Declare whether manual QA will be needed for this PR during the next release, through qa:needed or qa:skip

  • 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>

Made with Cursor

Summary by CodeRabbit

  • Bug Fixes

    • Sidebar filtering now correctly hides docs marked with the !dev tag, including autodocs and attached/unattached MDX docs.
  • Documentation

    • Added MDX docs demonstrating !dev behavior for attached and unattached examples.
  • Tests

    • Expanded unit and end-to-end tests to cover doc visibility, !dev handling, and sidebar exclusion behavior.

@JReinhold JReinhold added bug ci:normal Run our default set of CI jobs (choose this for most PRs). qa:skip Pull Requests that do not need any QA. labels Jun 2, 2026
@JReinhold JReinhold marked this pull request as ready for review June 2, 2026 20:00
@JReinhold JReinhold requested a review from shilman June 2, 2026 20:00
@JReinhold JReinhold self-assigned this Jun 2, 2026
@JReinhold JReinhold requested a review from Sidnioulz June 2, 2026 20:01
@JReinhold JReinhold added the patch:yes Bugfix & documentation PR that need to be picked to main branch label Jun 2, 2026
@coderabbitai

coderabbitai Bot commented Jun 2, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

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: 24bf3d1c-f41b-4bf8-8b3f-25723d07b210

📥 Commits

Reviewing files that changed from the base of the PR and between c5151d6 and 6f41347.

📒 Files selected for processing (5)
  • code/addons/docs/template/stories/docs2/no-dev-attached.mdx
  • code/addons/docs/template/stories/docs2/no-dev-unattached.mdx
  • code/core/src/manager-api/modules/tags.ts
  • code/core/src/manager-api/tests/tags.test.js
  • code/e2e-tests/tags.spec.ts
🚧 Files skipped from review as they are similar to previous changes (3)
  • code/e2e-tests/tags.spec.ts
  • code/core/src/manager-api/modules/tags.ts
  • code/core/src/manager-api/tests/tags.test.js

📝 Walkthrough

Walkthrough

This PR changes the static sidebar filter to distinguish CSF autodocs from explicit MDX docs: autodocs are shown unless explicitly filtered, while MDX docs with !dev tags are filtered. It adds two MDX fixtures and extends unit and E2E tests to validate the behavior.

Changes

Static filter logic for sidebar doc visibility

Layer / File(s) Summary
CSF autodocs filter logic
code/core/src/manager-api/modules/tags.ts
computeStaticFilterFn now computes an isCsfAutodocsEntry flag to detect docs entries without attached/unattached MDX system tags, and includes entries when they have the dev tag or are CSF autodocs; static exclude tags still remove entries regardless.
MDX !dev test fixtures
code/addons/docs/template/stories/docs2/no-dev-unattached.mdx, code/addons/docs/template/stories/docs2/no-dev-attached.mdx
Adds two MDX docs with !dev and manifest tags: one unattached and one attached to button stories, used as fixtures to test sidebar filtering.
Unit and E2E tests
code/core/src/manager-api/tests/tags.test.js, code/e2e-tests/tags.spec.ts
Adds computeStaticFilterFn unit tests covering dev visibility, MDX attached/unattached behavior, a CSF autodocs regression case, and excludeFromSidebar handling; updates E2E test to assert !dev docs are omitted from the static sidebar.

🎯 3 (Moderate) | ⏱️ ~20 minutes

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
code/core/src/manager-api/tests/tags.test.js (1)

1-60: ⚡ Quick win

Consider migrating to TypeScript for type safety.

The test file uses JavaScript (.test.js) while testing a TypeScript module (tags.ts). Using TypeScript for the test file would provide type safety for the test data structures and catch potential type mismatches at write time.

♻️ Rename to TypeScript

Rename tags.test.jstags.test.ts and add type annotations for the test data:

+import type { API_PreparedIndexEntry } from 'storybook/internal/types';
+
-  it('shows stories with dev tag and hides stories without dev', () => {
-    expect(filter({ id: 's1', type: 'story', tags: ['dev'] })).toBe(true);
-    expect(filter({ id: 's2', type: 'story', tags: ['test'] })).toBe(false);
+  it('shows stories with dev tag and hides stories without dev', () => {
+    expect(filter({ id: 's1', type: 'story', tags: ['dev'] } as API_PreparedIndexEntry)).toBe(true);
+    expect(filter({ id: 's2', type: 'story', tags: ['test'] } as API_PreparedIndexEntry)).toBe(false);

Apply similar type assertions to other test cases.

🤖 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-api/tests/tags.test.js` around lines 1 - 60, Rename the
test file from tags.test.js to tags.test.ts and convert the test code to
TypeScript: import types for story/docs entries and annotate test fixtures
passed into computeStaticFilterFn (e.g., the objects with id, type, tags) so the
compiler validates shapes; ensure the test imports remain from '../modules/tags'
(computeStaticFilterFn, parseTagsParam, serializeTagsParam) and adjust any
default exports or import paths if needed, and update project test/tsconfig or
Vitest config to include .ts tests if not already enabled.
🤖 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-api/tests/tags.test.js`:
- Around line 1-60: Rename the test file from tags.test.js to tags.test.ts and
convert the test code to TypeScript: import types for story/docs entries and
annotate test fixtures passed into computeStaticFilterFn (e.g., the objects with
id, type, tags) so the compiler validates shapes; ensure the test imports remain
from '../modules/tags' (computeStaticFilterFn, parseTagsParam,
serializeTagsParam) and adjust any default exports or import paths if needed,
and update project test/tsconfig or Vitest config to include .ts tests if not
already enabled.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d728b948-a144-4eae-ba5d-d54e9f068fd0

📥 Commits

Reviewing files that changed from the base of the PR and between db278fc and c5151d6.

📒 Files selected for processing (5)
  • code/addons/docs/template/stories/docs2/no-dev-attached.mdx
  • code/addons/docs/template/stories/docs2/no-dev-unattached.mdx
  • code/core/src/manager-api/modules/tags.ts
  • code/core/src/manager-api/tests/tags.test.js
  • code/e2e-tests/tags.spec.ts

@JReinhold JReinhold force-pushed the jeppe/fix-mdx-no-dev-tag branch from c5151d6 to 6f41347 Compare June 2, 2026 20:07
@JReinhold JReinhold merged commit c91f986 into next Jun 2, 2026
142 checks passed
@JReinhold JReinhold deleted the jeppe/fix-mdx-no-dev-tag branch June 2, 2026 21:13
Sidnioulz pushed a commit that referenced this pull request Jun 9, 2026
Core: Respect !dev tag on MDX docs in sidebar
(cherry picked from commit c91f986)
@github-actions github-actions Bot added the patch:done Patch/release PRs already cherry-picked to main/release branch label Jun 9, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug ci:normal Run our default set of CI jobs (choose this for most PRs). patch:done Patch/release PRs already cherry-picked to main/release branch patch:yes Bugfix & documentation PR that need to be picked to main branch qa:skip Pull Requests that do not need any QA.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: <Meta tags={['!dev']} />` does not work for unattached docs

2 participants