Navigator: polish Storybook examples

[ciampo]

What?

Part of #59418
Extracted from #64777

While working on a few Navigator-related PRs, I accumulated a few small tweaks and improvements to the Storybook files.

Why?

Mostly small tweaks that don't dramatically change how the Storybook examples work and look, but iteratively improve the code quality and the examples' usefulness and sense of polish.

How?

• better spacing, no "cutoff" overflowing styles
• removed Card components (they are not required to show how Navigator works)
• better clarity, typography, and semantics of screen titles
• cleaned up some outdated code

I also removed the intermediary index.ts files, since I found out that the lack of .tsx extension can interfere with Storybook's docgen.

Testing Instructions

• Load Storybook
• Make sure that the examples continue to work as expected

[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: ciampo <[email protected]>
Co-authored-by: mirka <[email protected]>
Co-authored-by: tyxla <[email protected]>

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

[mirka]

To be honest I still have difficulty with the overall state of our stories here, but this is a good cleanup nonetheless 🚀

[mirka]

Is it necessary for this Nested Navigator story to take up this much vertical space?

[ciampo]

I thought it would be a good practice to set each screen to be full height — do you think it's actually a bad practice?

[mirka]

Honest question — why is it a good practice? Does it ensure that the screens animate properly or something? I'm not familiar enough with the component to know why it should be that tall. As a consumer I just see some relatively short content and a lot of whitespace 🙈

[ciampo]

Good questions! I looked a bit more into why historically (and instinctively) these stories had height styles.

It's not important for the screens to be full height or to have height: 100%.

What matters is that the NavigatorProvider (soon to be renamed Navigator) wrapper has enough height to host the tallest screen. Otherwise, when transitioning between screens (and especially with the changes proposed in #64777), the content may "jump" (or get cut off) unexpectedly.

[mirka]

Thanks for investigating, that makes sense! Maybe something to document as well.

[mirka]

Out of scope for this PR, but as a consumer I have difficulty understanding this story. It seems like a grab bag demo of features, including some "tests" for edge cases which aren't particularly useful to a consumer.

Since we're stabilizing this component, I think we can improve the stories a bit more to highlight features and common use cases in a consumer-centric way. Story descriptions would also help.

[ciampo]

I'll see if I can tidy up the examples in this PR — stay tuned

[ciampo]

I've updated the stories:

• removed "edge case" screens (overflowing content, sticky headers)
• removed "Nested navigator" example, since it's now the default behavior anyway
• added a "with initial nested path" story
• removed external components (dropdown) from the story
• renamed "product screen" to "dynamic screen", and added more details about it in the screen's body text.

[mirka]

Huge improvement, thank you 🙇

[ciampo]

@mirka let me know if this is ready to be merged after the recent changes, or if there's anything else that we should address

[tyxla]

Great cleanup, thanks @ciampo!

I've done some testing and all stories worked well 🚀

[ciampo]

Thank you for the review — always happy to make more incremental changes in follow-ups.