Skip to content

Storybook: Keep Docs before named attached MDX pages - #85308

Merged
mirka merged 3 commits into
trunkfrom
fix-storybook-attached-docs-order
Oct 22, 2026
Merged

mirka merged 3 commits into
trunkfrom
fix-storybook-attached-docs-order

Conversation

@mirka

@mirka mirka commented Oct 21, 2026 •

Copy link
Copy Markdown
Member

What?

Keep the Docs page above named attached MDX pages, including TextareaControl's Migration Guide, in the Storybook sidebar.

Follow-up to #84563.

Why?

The existing Docs-first comparison works for entries sharing a title, but the earlier hierarchy comparison treats a named attached MDX page as a standalone page. For example, TextareaControl's Migration Guide is prioritized ahead of neighboring components while its Docs page is sorted alphabetically. These contradictory comparisons allow the migration guide to appear above Docs in the complete index.

How?

Exclude named attached MDX entries from the hierarchy's standalone-MDX priority. Entries named Docs retain that priority, preserving nested documentation pages such as Badge's Usage Guidelines. The existing same-title priority then puts Docs before the migration guide and examples.

This also fixes the same ordering issue in CheckboxControl, InputControl, RadioControl, ToggleControl, Tabs, Menu, and Combobox.

Extend the existing sidebar validator to require every Docs page to precede all other entries in its folder, including nested documentation. Run it against the complete generated index in the existing Storybook CI job.

Testing Instructions

  1. Open TextareaControl's Docs page in Storybook, using ?path=/docs/components-textareacontrol--docs.
  2. Confirm its sidebar entries appear in this order: Docs, Migration Guide, Default.
  3. Open CheckboxControl, InputControl, RadioControl, and ToggleControl, and confirm Docs appears before Migration Guide and the examples.
  4. Check Tabs, Menu, and Combobox. Confirm Docs appears before Best Practices or Usage guidelines, followed by the examples.
  5. Check Badge and confirm Docs still appears before the nested Usage Guidelines page. Check Form and confirm Best Practices and Checkbox Groups remain above its component folders.

Screenshots or screencast

Before After
TextareaControl sidebar with Migration Guide above Docs TextareaControl sidebar with Docs above Migration Guide

@mirka mirka added the [Type] Bug An existing feature does not function as intended label Oct 21, 2026
@mirka mirka self-assigned this Oct 21, 2026
@github-actions

github-actions Bot commented Oct 21, 2026 •

Copy link
Copy Markdown

🤖 PR meta 🤖

Preview in WordPress Playground

🎉 Props

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Updated as activity occurs, without notifying anyone named here. Add the props-bot label to refresh.

📦 Bundle size

Size Change: 0 B

Total Size: 9.05 MB

b5399c4 Run

@mirka
mirka marked this pull request as ready for review October 22, 2026 06:08
@mirka
mirka requested a review from desrosj as a code owner October 22, 2026 06:08
@mirka
mirka requested a review from a team October 22, 2026 07:15
@mirka mirka added [Type] Developer Documentation Documentation for developers Storybook Storybook and its stories for components and removed [Type] Bug An existing feature does not function as intended labels Oct 22, 2026

@im3dabasia im3dabasia 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.

Thanks, this looks good! 🙌 Left a couple of small, non-blocking comments.

TextareaControl Tip DataViews
TextareaControl sidebar with Docs first Tip sidebar with Docs first DataViews sidebar with Docs first

Comment thread storybook/preview.jsx
Comment thread storybook/scripts/validate-sidebar.mjs Outdated
@mirka
mirka enabled auto-merge (squash) October 22, 2026 11:31
@mirka
mirka merged commit 5417420 into trunk Oct 22, 2026
61 checks passed
@mirka
mirka deleted the fix-storybook-attached-docs-order branch October 22, 2026 11:48
@github-actions github-actions Bot added this to the Gutenberg 24.4 milestone Oct 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Storybook Storybook and its stories for components [Type] Developer Documentation Documentation for developers

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants