From ab7a0ab050935b22249c28a2a46803994ddc3bd3 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Thu, 12 Sep 2024 16:18:35 -0700
Subject: [PATCH] refactor(react): update tab-bar requirement on tabs (#29868)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

As mentioned in this
[PR](https://github.com/ionic-team/ionic-docs/pull/3797), React
`IonTabs` requires `IonTabBar` do be a child, else it doesn't render and
throws an error.

Angular, JS, and Vue doesn't have this requirement.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

I didn't see any reason why React does not mimic the other frameworks.
In order to keep consistency, I've updated the React tabs. This would
allow `ion-tabs` and `ion-tab-bar` can be used as standalone elements as
mentioned in the [docs](https://ionicframework.com/docs/api/tabs).

- React follows the same structure as the other frameworks: `IonTabs`
doesn't require `IonTabBar` to be a child to render.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: 8.3.1-dev.11726159792.1a6f49de

How to test:
1. Create a Ionic React app through the Ionic CLI with tabs as the
starter
2. Run the app
3. Comment out the `IonTabBar`
4. Notice that the `IonTabs` does not render
5. Notice that there's an error in the console: "IonTabs needs a
IonTabBar"
6. Install the dev build: `npm install
@ionic/react@8.3.1-dev.11726159792.1a6f49de`
7. Make sure the `IonTabBar` is still commented out
8. Verify that `IonTabs` renders
9. Verify that there isn't an error in the console
---
 packages/react/src/components/navigation/IonTabs.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/navigation/IonTabs.tsx b/packages/react/src/components/navigation/IonTabs.tsx
index 6de93bd6a8..c23de222b5 100644
--- a/packages/react/src/components/navigation/IonTabs.tsx
+++ b/packages/react/src/components/navigation/IonTabs.tsx
@@ -165,9 +165,6 @@ export const IonTabs = /*@__PURE__*/ (() =>
       if (outlet && hasTab) {
         throw new Error('IonTabs cannot contain an IonRouterOutlet and an IonTab at the same time');
       }
-      if (!tabBar) {
-        throw new Error('IonTabs needs a IonTabBar');
-      }
 
       if (hasTab) {
         return <IonTabsInner {...this.props}></IonTabsInner>;
@@ -223,11 +220,11 @@ export const IonTabs = /*@__PURE__*/ (() =>
             </PageManager>
           ) : (
             <div className={className ? `${className}` : 'ion-tabs'} {...props} style={hostStyles}>
-              {tabBar.props.slot === 'top' ? tabBar : null}
+              {tabBar?.props.slot === 'top' ? tabBar : null}
               <div style={tabsInner} className="tabs-inner">
                 {outlet}
               </div>
-              {tabBar.props.slot === 'bottom' ? tabBar : null}
+              {tabBar?.props.slot === 'bottom' ? tabBar : null}
             </div>
           )}
         </IonTabsContext.Provider>