Docs: CSF Next - Adjust custom args example for better type safety

[matthijsgroen]

Updated the documentation to include the proper type for CSF Next, so that the footer becomes a known type to the story

Closes #33377

What I did

Added a type definition to the CSF Next example

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

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Not sure if there is a test already for the documentation of CSF Next, but if there was that test should have been failing. In the example there is no explicit type on the render function, so TS cannot infer the 'footer' type. An explicit type definition is required.

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

• Documentation
  • Updated Storybook examples for the Page component (Next variant) with clearer, safer prop annotations to improve example clarity and reduce confusion for consumers.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a local TypeScript type alias combining Page's props with an optional footer and applies it to the destructured props parameter in a Storybook CSF3 render snippet (TSX Next variant) in documentation.

Changes

Cohort / File(s)	Summary
Documentation snippet type annotation docs/_snippets/page-story-slots.md	Adds PagePropsAndCustomArgs = React.ComponentProps<typeof Page> & { footer?: string } and updates the TSX Next CSF3 render to use ({ footer, ...args }: PagePropsAndCustomArgs) as the render parameter.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

---

📜 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 c4f665c and 00a3594.

📒 Files selected for processing (1)

• docs/_snippets/page-story-slots.md

🚧 Files skipped from review as they are similar to previous changes (1)

• docs/_snippets/page-story-slots.md

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3d9a2a5 and 5ff27ce.

📒 Files selected for processing (1)

• docs/_snippets/page-story-slots.md

🔇 Additional comments (1)

docs/_snippets/page-story-slots.md (1)

276-276: LGTM! Type annotation properly enables TypeScript inference for custom args.

The type definition combined with the render function parameter annotation correctly solves the issue. By explicitly typing the destructured props as PagePropsAndCustomArgs, TypeScript now recognizes footer as a valid property and can infer the custom arg in CSF Next examples. This mirrors the established pattern from the CSF 3 TypeScript example (line 55).

Also applies to: 280-280

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 15c1361

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

---

☁️ Nx Cloud last updated this comment at 2025-12-26 21:00:57 UTC

[jonniebigodes]

@matthijsgroen, thanks for taking the time to put together this pull request and helping us improve the documentation by catching this oversight in the examples. We appreciate it.

I've left one small item for you to look into when you have a chance.

Let me know once you've addressed it, and I'll be happy to take another look and merge it.

Hope you have a fantastic day.

stay safe

[matthijsgroen]

@jonniebigodes done! Thanks for taking your time to review

[jonniebigodes]

@matthijsgroen, no need to thank whatsoever, it was my pleasure. Thank you so much for addressing the feedback so promptly. All is good on my end and will merge this once the checklist clears.