feat(tabs): migrate to Modular Ionic by thetaPC · Pull Request #31116 · ionic-team/ionic-framework

thetaPC · 2026-05-06T13:48:07Z

Issue number: resolves internal

What is the current behavior?

ion-tabs uses a legacy @import in its stylesheet, has a separate tabs-interface.ts file (hyphen naming), and carries a @virtualProp theme doc that is no longer applicable after the Modular Ionic migration. An error message in the getTab helper always logs "undefined" instead of the actual tab id that was passed.

What is the new behavior?

Renamed tabs-interface.ts -> tabs.interfaces.ts to match the format in Modular Ionic
Converted @import "native.globals" to @use "../../themes/mixins" as mixins
Removed the @virtualProp theme JSDoc
Fixed error message in getTab. Now correctly logs the tab id passed by the caller instead of always logging "undefined"
Added spec tests

Does this introduce a breaking change?

Yes
No

Other information

Previews

vercel · 2026-05-06T13:48:12Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	May 18, 2026 1:51pm

thetaPC · 2026-05-06T13:49:00Z

-            <button class="expand" onclick="updateBadgeCount()">Update Badge Count</button>
-            <button class="expand" onclick="updateBadgeColor()">Update Badge Color</button>


These buttons weren't doing anything. I do plan on adding updateBadgeCount to the tab-bar/test/badge page when we migrate.

thetaPC · 2026-05-06T13:50:40Z

  private setActive(selectedTab: HTMLIonTabElement): Promise<void> {
    if (this.transitioning) {
-      return Promise.reject('transitioning already happening');
+      return Promise.reject(new Error('transitioning already happening'));


This change attaches a stack trace to the rejection, making it easier to identify where the error originated when debugging.

thetaPC · 2026-05-06T13:51:39Z


  if (!tabEl) {
-    printIonError(`[ion-tabs] - Tab with id: "${tabEl}" does not exist`);
+    printIonError(`[ion-tabs] - Tab with id: "${tab}" does not exist`);


This kept showing as [ion-tabs] - Tab with id: "undefined" does not exist so I fixed it by passing the correct variable.

ShaneK

Looks good to me! Just a nit

ShaneK · 2026-05-11T15:29:38Z


  contain: layout size style;
-  z-index: $z-index-page-container;
+  z-index: 0;


Was inlining 0 here instead of using $z-index-page-container deliberate? nav.scss and router-outlet.scss are still on the variable, so tabs becomes the lone magic number until they migrate too. Is the plan to define $z-index-page-container somewhere reachable from mixins.scss, or to inline 0 everywhere once those two migrate as well? Either way it works, but a short comment noting it tracks the page-container z-index would keep the intent visible during the transition.

I create a common globals file. There's going to be duplicate imports of the z index until we can migrate the rest of the components. 51f637f

… into FW-6909

brandyscarney

Looks good! Left some comments but I don't think any are blockers. Approving. 👍

brandyscarney · 2026-05-13T19:04:32Z

@@ -1,3 +1,4 @@
+@use "../../themes/common.globals" as globals;
 @import "../../themes/native/native.globals";


Why was this not changed to @use?

I'm trying to minimize the changes in other components as much as possible. The use migration will be done when we migrate nav to ionic modular. This is just a precaution in case an issue occurs. I don't want to spend more time on components that are not in the scope of tickets.

brandyscarney · 2026-05-13T19:04:36Z

@@ -1,3 +1,4 @@
+@use "../../themes/common.globals" as globals;


Why was this not changed to @use?

#31116 (comment)

brandyscarney · 2026-05-13T19:06:34Z

Was adding the s to make it tabs.interfaces.ts instead of tabs.interface.ts intentional?

Yes, we've been doing that with all the components we've migrated. Should we be using singular? If so, I can make those changes in a different PR.

brandyscarney · 2026-05-13T19:08:35Z

+
+// Z-Index
+// --------------------------------------------------
+$z-index-page-container: 0;


Shouldn't this be a token value?

No, it should be a 1:1 of the value in native.global.scss as that file will eventually be removed once we are done with the migration. However, we need to keep some variables/values since they are being shared in all themes.

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>

… into FW-6909

feat(tabs): migrate to Modular Ionic

d8cd250

github-actions Bot added the package: core @ionic/core package label May 6, 2026

thetaPC commented May 6, 2026

View reviewed changes

Comment thread core/src/components/tabs/test/basic/index.html Outdated

thetaPC commented May 6, 2026

View reviewed changes

thetaPC marked this pull request as ready for review May 6, 2026 22:15

thetaPC requested a review from a team as a code owner May 6, 2026 22:15

thetaPC requested review from brandyscarney and gnbm and removed request for gnbm May 6, 2026 22:15

ShaneK approved these changes May 11, 2026

View reviewed changes

thetaPC added 2 commits May 11, 2026 15:20

refactor(themes): add common.globals for cross-theme variables

51f637f

Merge branch 'ionic-modular' of github.com:ionic-team/ionic-framework…

29a58aa

… into FW-6909

vercel Bot deployed to Preview May 11, 2026 22:29 View deployment

brandyscarney approved these changes May 13, 2026

View reviewed changes

thetaPC and others added 4 commits May 18, 2026 06:24

test(tabs): update title

54c7161

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>

test(tabs): update title tag

61b64bb

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>

test(tabs): update title text

8c08957

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>

test(tabs): change word in title tag

5d57b05

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>

vercel Bot deployed to Preview May 18, 2026 13:36 View deployment

Merge branch 'ionic-modular' of github.com:ionic-team/ionic-framework…

5436bfd

… into FW-6909

vercel Bot deployed to Preview May 18, 2026 13:51 View deployment

thetaPC merged commit 70fa2a6 into ionic-modular May 18, 2026
49 checks passed

thetaPC deleted the FW-6909 branch May 18, 2026 14:02

		<button class="expand" onclick="updateBadgeCount()">Update Badge Count</button>
		<button class="expand" onclick="updateBadgeColor()">Update Badge Color</button>

		@@ -1,3 +1,4 @@
		@use "../../themes/common.globals" as globals;
		@import "../../themes/native/native.globals";

Conversation

thetaPC commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

Uh oh!

vercel Bot commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ShaneK left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brandyscarney left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

thetaPC commented May 6, 2026 •

edited

Loading

vercel Bot commented May 6, 2026 •

edited

Loading