Commit ab7a0ab
authored
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](ionic-team/ionic-docs#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/[email protected]`
7. Make sure the `IonTabBar` is still commented out
8. Verify that `IonTabs` renders
9. Verify that there isn't an error in the console1 parent df39cea commit ab7a0ab
File tree
1 file changed
+2
-5
lines changed1 file changed
+2
-5
lines changed| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
165 | 165 | | |
166 | 166 | | |
167 | 167 | | |
168 | | - | |
169 | | - | |
170 | | - | |
171 | 168 | | |
172 | 169 | | |
173 | 170 | | |
| |||
223 | 220 | | |
224 | 221 | | |
225 | 222 | | |
226 | | - | |
| 223 | + | |
227 | 224 | | |
228 | 225 | | |
229 | 226 | | |
230 | | - | |
| 227 | + | |
231 | 228 | | |
232 | 229 | | |
233 | 230 | | |
| |||
0 commit comments