From d7f47f61d27d81fdc3409414368564d3e42699bf Mon Sep 17 00:00:00 2001
From: Nathan54Villaume <nathan.villaume@gmail.com>
Date: Sun, 22 Mar 2026 20:31:28 +0100
Subject: [PATCH] Fix mobile navigation renderLabel to handle React nodes

When renderLabel returns a React node instead of a string, the mobile navigation bottom bar displays [object Object] due to template literal string coercion. This checks the return type and falls back to .name when the result is not a string, matching the behavior the user expects.

Closes #34261
---
 .../navigation/MobileNavigation.stories.tsx   | 46 +++++++++++++++++++
 .../mobile/navigation/MobileNavigation.tsx    |  6 ++-
 2 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx b/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx
index e8943f1dcd9b..f9c0e53cfec3 100644
--- a/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx
+++ b/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx
@@ -200,3 +200,49 @@ export const PanelDisabled: Story = {
     showPanel: false,
   },
 };
+
+export const ReactNodeRenderLabel: Story = {
+  decorators: [
+    (storyFn) => {
+      const renderReactNodeLabel = ({ name }: { name: string }) => <em>{startCase(name)}</em>;
+
+      const mockManagerStoreWithReactNodeLabels: any = {
+        state: {
+          index: {
+            someRootId: {
+              type: 'root',
+              id: 'someRootId',
+              name: 'root',
+              renderLabel: renderReactNodeLabel,
+            },
+            someComponentId: {
+              type: 'component',
+              id: 'someComponentId',
+              name: 'component',
+              parent: 'someRootId',
+              renderLabel: renderReactNodeLabel,
+            },
+            someStoryId: {
+              type: 'story',
+              subtype: 'story',
+              id: 'someStoryId',
+              name: 'story',
+              parent: 'someComponentId',
+              renderLabel: renderReactNodeLabel,
+            },
+          },
+        },
+        api: {
+          getCurrentStoryData() {
+            return mockManagerStoreWithReactNodeLabels.state.index.someStoryId;
+          },
+        },
+      };
+      return (
+        <ManagerContext.Provider value={mockManagerStoreWithReactNodeLabels}>
+          {storyFn()}
+        </ManagerContext.Provider>
+      );
+    },
+  ],
+};
diff --git a/code/core/src/manager/components/mobile/navigation/MobileNavigation.tsx b/code/core/src/manager/components/mobile/navigation/MobileNavigation.tsx
index 83cc6f4596b2..1c12bc83b039 100644
--- a/code/core/src/manager/components/mobile/navigation/MobileNavigation.tsx
+++ b/code/core/src/manager/components/mobile/navigation/MobileNavigation.tsx
@@ -49,7 +49,8 @@ const useFullStoryName = () => {
     return '';
   }
   const combinedIndex = combineIndexes(index, refs || {});
-  let fullStoryName = currentStory.renderLabel?.(currentStory, api) || currentStory.name;
+  const storyLabel = currentStory.renderLabel?.(currentStory, api);
+  let fullStoryName = typeof storyLabel === 'string' ? storyLabel : currentStory.name;
 
   let node = combinedIndex[currentStory.id];
 
@@ -61,7 +62,8 @@ const useFullStoryName = () => {
     fullStoryName.length < 24
   ) {
     node = combinedIndex[node.parent];
-    const parentName = node.renderLabel?.(node, api) || node.name;
+    const parentLabel = node.renderLabel?.(node, api);
+    const parentName = typeof parentLabel === 'string' ? parentLabel : node.name;
     fullStoryName = `${parentName}/${fullStoryName}`;
   }
   return fullStoryName;