UI: improve component code readability in Storybook

[simison]

Follow-up to #77382 (comment)

Pairs with #80132 which adds displayNames.

What?

Avoids <React.Fragment> appearing in code examples

Why?

Cleaner code previews and copy-paste for docs consumers.

How?

Switch from args: { children: () } to replacing rendering fully with render prop.

Passes dummy {} just to work around a known Storybook quirk: otherwise Storybook will show: render: () => () as part of the code snippet.

Testing Instructions

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

Testing Instructions for Keyboard

Screenshots or screencast

Before

After

When combined with #80132:

Use of AI Tools

yes

[github-actions]

Size Change: 0 B

Total Size: 7.72 MB

_{compressed-size-action}

[simison]

Without {} here we'd get render() => ( ) visible in the code example. Some kind of known Storybook quirk to pass either {} or _args to fix it. 🤷

[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>
Co-authored-by: aduth <aduth@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]

Flaky tests detected in ad0d750.
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/29123316066
📝 Reported issues:

• [Flaky Test] should undo backtick transform with backspace #76178 in /test/e2e/specs/editor/various/rich-text.spec.js

[ciampo]

Switch from args: { children: () } to replacing rendering fully with render prop.

This defeats the point of using Storybook controls and args, though? cc @mirka as the resident Storybook-typescript integration expert

[aduth]

Out of curiosity, would it work to pass args.children as an array instead of using the fragment?

[simison]

Out of curiosity, would it work to pass args.children as an array instead of using the fragment?

Seems to do the trick as well! It'll require adding keys everywhere, but thankfully those don't show up in Storybook examples.

Moved that solution to another PR:

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

[simison]

This defeats the point of using Storybook controls and args, though?

We would still continue using args for the actual args and just pass them down to render.

E.g.

• Select control: render: ( { items = defaultItems, ...args } ) => (
• Stack: render: ( { gap, align, justify } ) => (
• Button: render: ( { children: _children, ...args } ) => (

[ciampo]

With #80352 merged, can we close this PR?