feat: support dynamic tab button layout based on orientation

[AmitMY]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Guidelines: https://developer.apple.com/design/human-interface-guidelines/tab-bars

Natively (photos app), tabs look like this:	Behavior	Native	Ionic
Default tabs ✅

When the content is scrolled to the bottom, it functions like:

<ion-footer collapse="fade" [translucent]="true">

But in ionic it stays the same:	Behavior	Native	Ionic
Scrolled footer ❌

When rotated to landscape mode, tabs look like this (text next to icon), but in ionic the text stays below the icon:	Behavior	Native	Ionic
Landscape mode ❌

Expected Behavior

Should replicate native behavior

Steps to Reproduce

Demo in https://ionicframework.com/docs/api/tabs

Code Reproduction URL

https://ionicframework.com/docs/api/tabs

Ionic Info

Ionic:

Ionic CLI : 7.1.1

Utility:

cordova-res : 0.15.4 native-run : 1.7.2

System:

NodeJS : v18.15.0 npm : 9.5.0 OS : macOS Unknown

Additional Information

No response

[liamdebeasi]

Thanks for the report. The collapse="fade" fix is being tracked in https://github.com/ionic-team/ionic-framework/issues/26510.

[liamdebeasi]

For the tab bar positioning, are you able to use the layout property on ion-tab-button? https://ionicframework.com/docs/api/tab-button#properties

It defaults to icon-top, so you could have it change to icon-start when in landscape.

[AmitMY]

It defaults to icon-top, so you could have it change to icon-start when in landscape.

Thanks for letting me know Do you not think this should be the default behavior instead of everyone implementing a media query and more logic on the tabs? icon-default perhaps? Furthermore, I'm not sure what the behavior should be for Material, so I think it should be in the framework

[liamdebeasi]

We could do that. However, it would be a breaking change to update the default behavior, so we wouldn't be able to do that until Ionic 8 at the earliest. (That being said we could add the feature now and just make it opt-in). Could you clarify the impact the current behavior has on your applications?

[AmitMY]

The impact is: The app does not feel like a native iOS app - something about it is "off" Furthermore, the height of the tab-bar is too high, taking more space than it otherwise would

I'm all for making an icon-default option, that in ionic 8 will become the default. seems like the right thing to me

[liamdebeasi]

Is this impacting any apps you have live/published?

[AmitMY]

Only an app that is WIP - https://github.com/sign/translate

[liamdebeasi]

Thanks! I spoke with the team, and this is something we would like to support.