From 4490ce5d432e8bedaa3037f03589cd203fd5e975 Mon Sep 17 00:00:00 2001
From: ShaneK <shane@shanessite.net>
Date: Tue, 5 Aug 2025 06:18:34 -0700
Subject: [PATCH 1/4] test(react): general navigation improvement

---
 packages/react/test/base/src/App.tsx          |  2 +-
 packages/react/test/base/src/pages/Main.tsx   |  3 ++
 packages/react/test/base/src/pages/Tabs.tsx   | 26 +++++++-------
 .../react/test/base/src/pages/TabsBasic.tsx   | 36 ++++++++++---------
 .../base/src/pages/TabsDirectNavigation.tsx   |  8 ++---
 .../components/tabs-direct-navigation.cy.ts   |  3 +-
 6 files changed, 42 insertions(+), 36 deletions(-)

diff --git a/packages/react/test/base/src/App.tsx b/packages/react/test/base/src/App.tsx
index 291acf7524f..094a89d9852 100644
--- a/packages/react/test/base/src/App.tsx
+++ b/packages/react/test/base/src/App.tsx
@@ -43,7 +43,7 @@ const App: React.FC = () => (
   <IonApp>
     <IonReactRouter>
       <IonRouterOutlet>
-        <Route path="/" component={Main} />
+        <Route exact path="/" component={Main} />
         <Route path="/overlay-hooks" component={OverlayHooks} />
         <Route path="/overlay-components" component={OverlayComponents} />
         <Route path="/overlay-components/nested-popover" component={IonPopoverNested} />
diff --git a/packages/react/test/base/src/pages/Main.tsx b/packages/react/test/base/src/pages/Main.tsx
index 5595c0d6307..c9fb3c5c54e 100644
--- a/packages/react/test/base/src/pages/Main.tsx
+++ b/packages/react/test/base/src/pages/Main.tsx
@@ -40,6 +40,9 @@ const Main: React.FC<MainProps> = () => {
           <IonItem routerLink="/tabs-basic">
             <IonLabel>Tabs with Basic Navigation</IonLabel>
           </IonItem>
+          <IonItem routerLink="/tabs-direct-navigation">
+            <IonLabel>Tabs with Direct Navigation</IonLabel>
+          </IonItem>
           <IonItem routerLink="/icons">
             <IonLabel>Icons</IonLabel>
           </IonItem>
diff --git a/packages/react/test/base/src/pages/Tabs.tsx b/packages/react/test/base/src/pages/Tabs.tsx
index 08a2cfa8af8..2098bfcb266 100644
--- a/packages/react/test/base/src/pages/Tabs.tsx
+++ b/packages/react/test/base/src/pages/Tabs.tsx
@@ -1,22 +1,24 @@
 import React from 'react';
-import { IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
+import { IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs, IonPage } from '@ionic/react';
 import { Route, Redirect } from 'react-router';
 
 interface TabsProps {}
 
 const Tabs: React.FC<TabsProps> = () => {
   return (
-    <IonTabs>
-      <IonRouterOutlet>
-        <Redirect from="/tabs" to="/tabs/tab1" exact />
-        <Route path="/tabs/tab1" render={() => <IonLabel>Tab 1</IonLabel>} />
-      </IonRouterOutlet>
-      <IonTabBar slot="bottom">
-        <IonTabButton tab="tab1" onClick={() => window.alert('Tab was clicked')}>
-          <IonLabel>Click Handler</IonLabel>
-        </IonTabButton>
-      </IonTabBar>
-    </IonTabs>
+    <IonPage>
+      <IonTabs>
+        <IonRouterOutlet>
+          <Redirect from="/tabs" to="/tabs/tab1" exact />
+          <Route path="/tabs/tab1" render={() => <IonLabel>Tab 1</IonLabel>} />
+        </IonRouterOutlet>
+        <IonTabBar slot="bottom">
+          <IonTabButton tab="tab1" onClick={() => window.alert('Tab was clicked')}>
+            <IonLabel>Click Handler</IonLabel>
+          </IonTabButton>
+        </IonTabBar>
+      </IonTabs>
+    </IonPage>
   );
 };
 
diff --git a/packages/react/test/base/src/pages/TabsBasic.tsx b/packages/react/test/base/src/pages/TabsBasic.tsx
index 63821f06e0b..5751cdb3a23 100644
--- a/packages/react/test/base/src/pages/TabsBasic.tsx
+++ b/packages/react/test/base/src/pages/TabsBasic.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { IonLabel, IonTabBar, IonTabButton, IonTabs, IonTab } from '@ionic/react';
+import { IonLabel, IonTabBar, IonTabButton, IonTabs, IonTab, IonPage } from '@ionic/react';
 
 interface TabsProps {}
 
@@ -13,22 +13,24 @@ const TabsBasic: React.FC<TabsProps> = () => {
   };
 
   return (
-    <IonTabs onIonTabsWillChange={onTabWillChange} onIonTabsDidChange={onTabDidChange}>
-      <IonTab tab="tab1">
-        <IonLabel>Tab 1 Content</IonLabel>
-      </IonTab>
-      <IonTab tab="tab2">
-        <IonLabel>Tab 2 Content</IonLabel>
-      </IonTab>
-      <IonTabBar slot="bottom">
-        <IonTabButton tab="tab1">
-          <IonLabel>Tab 1</IonLabel>
-        </IonTabButton>
-        <IonTabButton tab="tab2">
-          <IonLabel>Tab 2</IonLabel>
-        </IonTabButton>
-      </IonTabBar>
-    </IonTabs>
+    <IonPage>
+      <IonTabs onIonTabsWillChange={onTabWillChange} onIonTabsDidChange={onTabDidChange}>
+        <IonTab tab="tab1">
+          <IonLabel>Tab 1 Content</IonLabel>
+        </IonTab>
+        <IonTab tab="tab2">
+          <IonLabel>Tab 2 Content</IonLabel>
+        </IonTab>
+        <IonTabBar slot="bottom">
+          <IonTabButton tab="tab1">
+            <IonLabel>Tab 1</IonLabel>
+          </IonTabButton>
+          <IonTabButton tab="tab2">
+            <IonLabel>Tab 2</IonLabel>
+          </IonTabButton>
+        </IonTabBar>
+      </IonTabs>
+    </IonPage>
   );
 };
 
diff --git a/packages/react/test/base/src/pages/TabsDirectNavigation.tsx b/packages/react/test/base/src/pages/TabsDirectNavigation.tsx
index 0e8df5db1f4..29e242ff4f4 100644
--- a/packages/react/test/base/src/pages/TabsDirectNavigation.tsx
+++ b/packages/react/test/base/src/pages/TabsDirectNavigation.tsx
@@ -78,7 +78,7 @@ const TabsDirectNavigation: React.FC = () => {
         </IonTabButton>
 
         <IonTabButton tab="library" href="/tabs-direct-navigation/library" data-testid="library-tab">
-          <IonIcon icon={libraryOutline}></IonIcon>  
+          <IonIcon icon={libraryOutline}></IonIcon>
           <IonLabel>Library</IonLabel>
         </IonTabButton>
 
@@ -86,9 +86,9 @@ const TabsDirectNavigation: React.FC = () => {
           <IonIcon icon={searchOutline}></IonIcon>
           <IonLabel>Search</IonLabel>
         </IonTabButton>
-      </IonTabBar>
-    </IonTabs>
+        </IonTabBar>
+      </IonTabs>
   );
 };
 
-export default TabsDirectNavigation;
\ No newline at end of file
+export default TabsDirectNavigation;
diff --git a/packages/react/test/base/tests/e2e/specs/components/tabs-direct-navigation.cy.ts b/packages/react/test/base/tests/e2e/specs/components/tabs-direct-navigation.cy.ts
index b1bc76cb5bc..f669470ce6b 100644
--- a/packages/react/test/base/tests/e2e/specs/components/tabs-direct-navigation.cy.ts
+++ b/packages/react/test/base/tests/e2e/specs/components/tabs-direct-navigation.cy.ts
@@ -26,10 +26,9 @@ describe('Tabs Direct Navigation', () => {
   it('should update tab selection when navigating between tabs', () => {
     cy.visit('/tabs-direct-navigation/home');
     cy.get('[data-testid="home-tab"]').should('have.class', 'tab-selected');
-    
     cy.get('[data-testid="radio-tab"]').click();
     cy.get('[data-testid="radio-tab"]').should('have.class', 'tab-selected');
     cy.get('[data-testid="home-tab"]').should('not.have.class', 'tab-selected');
     cy.get('[data-testid="radio-content"]').should('be.visible');
   });
-});
\ No newline at end of file
+});

From c094bbc4b77ecf36a1a395dc8a8bef059f2d54df Mon Sep 17 00:00:00 2001
From: Shane <shane@shanessite.net>
Date: Tue, 5 Aug 2025 09:56:34 -0700
Subject: [PATCH 2/4] Update
 packages/react/test/base/src/pages/TabsDirectNavigation.tsx

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
---
 packages/react/test/base/src/pages/TabsDirectNavigation.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/test/base/src/pages/TabsDirectNavigation.tsx b/packages/react/test/base/src/pages/TabsDirectNavigation.tsx
index 29e242ff4f4..2e412e174ab 100644
--- a/packages/react/test/base/src/pages/TabsDirectNavigation.tsx
+++ b/packages/react/test/base/src/pages/TabsDirectNavigation.tsx
@@ -86,8 +86,8 @@ const TabsDirectNavigation: React.FC = () => {
           <IonIcon icon={searchOutline}></IonIcon>
           <IonLabel>Search</IonLabel>
         </IonTabButton>
-        </IonTabBar>
-      </IonTabs>
+      </IonTabBar>
+    </IonTabs>
   );
 };
 

From 2c57e0ac36c62d26a6fd2361e0a3464315b6d024 Mon Sep 17 00:00:00 2001
From: ShaneK <shane@shanessite.net>
Date: Tue, 5 Aug 2025 09:59:49 -0700
Subject: [PATCH 3/4] test(react): fix icon page

---
 packages/react/test/base/src/pages/Icons.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react/test/base/src/pages/Icons.tsx b/packages/react/test/base/src/pages/Icons.tsx
index caf9f0b4e69..0e75acd978e 100644
--- a/packages/react/test/base/src/pages/Icons.tsx
+++ b/packages/react/test/base/src/pages/Icons.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonTitle, IonToolbar } from '@ionic/react';
+import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonTitle, IonToolbar, IonPage } from '@ionic/react';
 import { heart, heartCircleOutline, logoApple, logoTwitter, personCircleOutline, star, starOutline, trash } from 'ionicons/icons';
 
 interface IconsProps {}
@@ -14,7 +14,7 @@ const Icons: React.FC<IconsProps> = () => {
   }
 
   return (
-    <>
+    <IonPage>
       <IonHeader translucent={true}>
         <IonToolbar>
           <IonButtons>
@@ -88,7 +88,7 @@ const Icons: React.FC<IconsProps> = () => {
           </IonItem>
         </IonList>
       </IonContent>
-    </>
+    </IonPage>
   );
 };
 

From b3c3dab7874f80b86342ccb85b0953453ce52c75 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 5 Aug 2025 13:01:15 -0400
Subject: [PATCH 4/4] test(react): add slot to IonButtons

---
 packages/react/test/base/src/pages/Icons.tsx                | 2 +-
 packages/react/test/base/src/pages/Inputs.tsx               | 2 +-
 .../react/test/base/src/pages/navigation/NavComponent.tsx   | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react/test/base/src/pages/Icons.tsx b/packages/react/test/base/src/pages/Icons.tsx
index 0e75acd978e..9e0aa52e3ff 100644
--- a/packages/react/test/base/src/pages/Icons.tsx
+++ b/packages/react/test/base/src/pages/Icons.tsx
@@ -17,7 +17,7 @@ const Icons: React.FC<IconsProps> = () => {
     <IonPage>
       <IonHeader translucent={true}>
         <IonToolbar>
-          <IonButtons>
+          <IonButtons slot="start">
             <IonBackButton></IonBackButton>
           </IonButtons>
           <IonTitle>Icons</IonTitle>
diff --git a/packages/react/test/base/src/pages/Inputs.tsx b/packages/react/test/base/src/pages/Inputs.tsx
index fd4656ee68b..7e5db11b5de 100644
--- a/packages/react/test/base/src/pages/Inputs.tsx
+++ b/packages/react/test/base/src/pages/Inputs.tsx
@@ -98,7 +98,7 @@ const Inputs: React.FC<InputsProps> = () => {
     <IonPage data-pageid="inputs">
       <IonHeader translucent={true}>
         <IonToolbar>
-          <IonButtons>
+          <IonButtons slot="start">
             <IonBackButton></IonBackButton>
           </IonButtons>
           <IonTitle>Inputs</IonTitle>
diff --git a/packages/react/test/base/src/pages/navigation/NavComponent.tsx b/packages/react/test/base/src/pages/navigation/NavComponent.tsx
index 08a5acd5b24..2da3374867f 100644
--- a/packages/react/test/base/src/pages/navigation/NavComponent.tsx
+++ b/packages/react/test/base/src/pages/navigation/NavComponent.tsx
@@ -27,7 +27,7 @@ const PageOne = ({
       <IonHeader>
         <IonToolbar>
           <IonTitle>Page One</IonTitle>
-          <IonButtons>
+          <IonButtons slot="start">
             <IonBackButton />
           </IonButtons>
         </IonToolbar>
@@ -57,7 +57,7 @@ const PageTwo = ({ nav, ...rest }: { someValue: string; nav: React.MutableRefObj
       <IonHeader>
         <IonToolbar>
           <IonTitle>Page Two</IonTitle>
-          <IonButtons>
+          <IonButtons slot="start">
             <IonBackButton />
           </IonButtons>
         </IonToolbar>
@@ -84,7 +84,7 @@ const PageThree = ({ nav }: { nav: React.MutableRefObject<HTMLIonNavElement> })
       <IonHeader>
         <IonToolbar>
           <IonTitle>Page Three</IonTitle>
-          <IonButtons>
+          <IonButtons slot="start">
             <IonBackButton />
           </IonButtons>
         </IonToolbar>