fix(tabs, tab-bar): use standalone tab bar in React - #29927
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
thetaPC
marked this pull request as ready for review
October 10, 2024 17:48
thetaPC
requested review from
BenOsodrac and
gnbm
and removed request for
a team
October 10, 2024 17:48
thetaPC
changed the title
thetaPC
changed the title
BenOsodrac
approved these changes
Oct 11, 2024
| if (React.isValidElement(child)) { | ||
| const isRouterOutlet = | ||
| child.type === IonRouterOutlet || | ||
| (child.type as any).isRouterOutlet || |
Contributor
There was a problem hiding this comment.
Just an observation, but maybe in these cases is better to use unknown than any
Contributor
Author
There was a problem hiding this comment.
I'll keep that in mind. I recall that we have a ticket to improve the types for this so we can make the update then. Thank you!
brandyscarney
approved these changes
Oct 15, 2024
brandyscarney
left a comment
brandyscarney
left a comment
Member
There was a problem hiding this comment.
Both test cases pass. 👍
2 tasks
github-merge-queue Bot
pushed a commit
that referenced
this pull request
Oct 16, 2024
Issue number: resolves #29885, resolves #29924 --------- <!-- 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. --> React and Vue: Tab bar could be a standalone element within `IonTabs` and would navigate without issues with a router outlet before v8.3: ```tsx <IonTabs> <IonRouterOutlet></IonRouterOutlet> <IonTabBar></IonTabBar> </IonTabs> ``` It would work as if it was written as: ```tsx <IonTabs> <IonRouterOutlet></IonRouterOutlet> <IonTabBar slot="bottom"> <!-- Buttons --> </IonTabBar> </IonTabs> ``` After v8.3, any `ion-tab-bar` that was not a direct child of `ion-tabs` would lose it's expected behavior when used with a router outlet. If a user clicked on a tab button, then the content would not be redirected to that expected view. React only: Users can no longer add a `ref` to the `IonRouterOutlet`, it always returns undefined. ``` <IonTabs> <IonRouterOutlet ref={ref}> <IonTabBar slot="bottom"> <!-- Buttons --> </IonTabBar> </IonTabs> ``` ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> The fixes were already reviewed through PR #29925 and PR #29927. I split them to make it easier to review. React and Vue: The React tabs has been updated to pass data to the tab bar through context instead of passing it through a ref. By using a context, the data will be available for the tab bar to use regardless of its level. React only: Reverted the logic for `routerOutletRef` and added a comment of the importance of it. ## 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. --> N/A
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue number: resolves part of #29885, resolves #29924
What is the current behavior?
React: There are two issues here.
Issue 1:
Tab bar could be a standalone element within
IonTabsand would navigate without issues with a router outlet before v8.3:It would work as if it was written as:
After v8.3, any
ion-tab-barthat was not a direct child ofion-tabswould lose it's expected behavior when used with a router outlet. If a user clicked on a tab button, then the content would not be redirected to that expected view.Issue 2:
Users can no longer add a
refto theIonRouterOutlet, it always returns undefined.What is the new behavior?
Issue 1:
The React tabs has been updated to pass data to the tab bar through context instead of passing it through a ref. By using a context, the data will be available for the tab bar to use regardless of its level.
Issue 2:
Reverted the logic for
routerOutletRefand added a comment of the importance of it.Does this introduce a breaking change?
Other information
Dev build:
8.3.3-dev.11728581904.17739cf7How to test Issue 1:
IonTabBarinto a separate componentIonTabBarnpm install @ionic/react@8.3.3-dev.11728581904.17739cf7How to test Issue 2:
undefinednpm install @ionic/react@8.3.3-dev.11728581904.17739cf7ion-router-outlet