UI: improve component code readability in Storybook by using arrays for children

[simison]

Follow-up to #77382 (comment)

Alternative to #80129

Pairs with #80132 which adds displayNames.

What?

Avoid <React.Fragment> appearing in code examples by using [] instead of <> in Storybook examples.

Cleaner code previews and copy-paste for docs consumers.

How?

Testing Instructions

Run npm run storybook:dev
Smoke test different stories and code snippets.

Testing Instructions for Keyboard

Screenshots or screencast

Before

After

Use of AI Tools

yes

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Required label: Any label starting with [Type].
• Labels found: Storybook, [Package] UI.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Required label: Any label starting with [Type].
• Labels found: Storybook, [Package] UI.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

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: simison <simison@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>

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

[github-actions]

Size Change: 0 B

Total Size: 7.72 MB

_{compressed-size-action}

[github-actions]

Flaky tests detected in 6770226.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/29492196268
📝 Reported issues:

• [Flaky Test] adds and activates a new tab when pressing Enter at the end of a tab label #80106 in /test/e2e/specs/editor/blocks/tabs.spec.js

[ciampo]

🧹 🚀

Looks like a clean migration, let's try it out!

[ciampo]

Given how prone to conflicts this PR is, I'll go ahead and merge

[ciampo]

Should we work on a small lint rule to encourage array notation over fragments in Storybook:

[aduth]

Another thing I was curious about but didn't have a chance to look is whether we actually need key here in the sense of why key matters in React. And if it's not a real problem to soften ESLint enforcement in these Story files. Feels like it's a slightly tedious aspect of maintaining these stories. At least glad they don't come through the code examples.

[ciampo]

Another thing I was curious about but didn't have a chance to look is whether we actually need key here in the sense of why key matters in React. And if it's not a real problem to soften ESLint enforcement in these Story files. Feels like it's a slightly tedious aspect of maintaining these stories. At least glad they don't come through the code examples.

Good question. Something to investigate and potentially iterate on.

In general, I prefer tedious but correct / compliant code.

[ciampo]

We could maybe use Children.toArray([ … ]) which should allow us not to provide keys?