Skip to content

feat(tabs): migrate to Modular Ionic#31116

Draft
thetaPC wants to merge 1 commit intoionic-modularfrom
FW-6909
Draft

feat(tabs): migrate to Modular Ionic#31116
thetaPC wants to merge 1 commit intoionic-modularfrom
FW-6909

Conversation

@thetaPC
Copy link
Copy Markdown
Contributor

@thetaPC thetaPC commented May 6, 2026

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
Copy link
Copy Markdown

vercel Bot commented May 6, 2026

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

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

Request Review

@github-actions github-actions Bot added the package: core @ionic/core package label May 6, 2026
Comment on lines -45 to -46
<button class="expand" onclick="updateBadgeCount()">Update Badge Count</button>
<button class="expand" onclick="updateBadgeColor()">Update Badge Color</button>
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

</ion-header>
<ion-content class="ion-padding">
Page Four
<h1>Page Four</h1>
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Following the setup of the other 3 pages.

private setActive(selectedTab: HTMLIonTabElement): Promise<void> {
if (this.transitioning) {
return Promise.reject('transitioning already happening');
return Promise.reject(new Error('transitioning already happening'));
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant