UI: Fix mobile navigation when renderLabel returns a React node

[Dev-profil]

Summary

Fixes #34261

When sidebar.renderLabel returns a React node (supported on desktop sidebar), the mobile bottom bar built a breadcrumb string via template literals, coercing nodes to [object Object].

Changes

• In useFullStoryName, use renderLabel output only when it is a string; otherwise fall back to name for the current story and each parent in the path.
• Add story ReactNodeRenderLabel to cover non-string renderLabel (regression guard for Chromatic / manual QA).

How to test

1. Run Storybook for the core manager UI (or open Mobile/Navigation → ReactNodeRenderLabel in the internal Storybook).
2. Confirm the bottom bar shows component/story (plain names), not [object Object].

Notes for reviewers

• Deliberately minimal: mobile bar is text-only; mirroring rich React labels would need a larger UI change. This aligns with fixing the broken string coercion while keeping ellipsis behavior on plain names.

Summary by CodeRabbit

Bug Fixes

• Enhanced mobile navigation to more robustly handle custom label rendering when non-string values are returned, improving stability and preventing potential display issues.

Tests

• Added test story demonstrating ReactNode-based custom label rendering for mobile navigation.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d0ddbc24-633c-4ff6-9980-e35fb5d47374

📥 Commits

Reviewing files that changed from the base of the PR and between 87733f1 and d7f47f6.

📒 Files selected for processing (2)

• code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx
• code/core/src/manager/components/mobile/navigation/MobileNavigation.tsx

---

📝 Walkthrough

Walkthrough

This PR extends MobileNavigation's renderLabel support to handle ReactNode return types alongside strings. A new Story export (ReactNodeRenderLabel) demonstrates this capability with a mock store defining renderLabel as a function returning a styled ReactNode. The corresponding component hook is updated to strictly validate that renderLabel returns a string before using it as a label, falling back to the story or node name otherwise.

Changes

Cohort / File(s)	Summary
MobileNavigation Story code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx	Added new ReactNodeRenderLabel Story export with ManagerContext decorator providing a mock store where renderLabel returns a styled ReactNode (<em>{startCase(name)}</em>) for all tree nodes.
MobileNavigation Hook Update code/core/src/manager/components/mobile/navigation/MobileNavigation.tsx	Updated useFullStoryName to validate renderLabel results as strings using typeof checks before using them; falls back to currentStory.name or node.name when renderLabel returns non-string values.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• storybookjs/storybook#32577: Modifies mockManagerStore and renderLabel behavior in MobileNavigation.stories.tsx with similar concerns around renderLabel type handling.

---

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.}

Tip

You can disable sequence diagrams in the walkthrough.

Disable the reviews.sequence_diagrams setting to disable sequence diagrams in the walkthrough.

[JReinhold]

Thanks ❤️