feat(tab-button): update barge target

Author: thetaPC

core/src/components/tab-button/tab-button.tsx

@@ -34,7 +34,47 @@ export class TabButton implements ComponentInterface, AnchorInterface {
   @Element() el!: HTMLElement;
 
   private badgeManager = createBadgeManager(this.el, () => {
-    const target = this.el.querySelector(':scope > ion-icon') || this.el.querySelector('ion-label');
+    const layout = this.layout || config.get('tabButtonLayout', 'icon-top');
+    const hasIcon = this.hasIcon;
+    const hasLabel = this.hasLabel;
+
+    // Clamp the badge if icon and label exists and layout is either `icon-top` or `icon-bottom` since the badge is positioned in the center of the button and could overlap with both the icon and label.
+    const clamp = hasIcon && hasLabel && (layout === 'icon-top' || layout === 'icon-bottom');
+
+    let target: HTMLElement | null = null;
+
+    switch (layout) {
+      case 'icon-top':
+      case 'icon-bottom':
+        if (hasIcon) {
+          target = this.el.querySelector(':scope > ion-icon');
+        }
+        break;
+      case 'icon-start':
+        if (hasIcon && hasLabel) {
+          target = this.el.querySelector('ion-label');
+        } else if (hasIcon) {
+          target = this.el.querySelector(':scope > ion-icon');
+        }
+        break;
+      case 'icon-end':
+        if (hasIcon && hasLabel) {
+          target = this.el.querySelector(':scope > ion-icon');
+        } else if (hasLabel) {
+          target = this.el.querySelector('ion-label');
+        }
+        break;
+      case 'icon-hide':
+        if (hasLabel) {
+          target = this.el.querySelector('ion-label');
+        }
+        break;
+      case 'label-hide':
+        if (hasIcon) {
+          target = this.el.querySelector(':scope > ion-icon');
+        }
+        break;
+    }
 
     if (!target) {
       return undefined;
@@ -44,7 +84,7 @@ export class TabButton implements ComponentInterface, AnchorInterface {
       host: this.el,
       target,
       relativeTo: this.el.shadowRoot!.querySelector('.button-inner')!,
-      clamp: this.hasIcon && this.hasLabel,
+      clamp,
     };
   });
 

core/src/components/tab-button/test/layout/tab-button.e2e.ts

@@ -10,7 +10,7 @@ configs().forEach(({ title, screenshot, config }) => {
           <ion-tab-button tab="1" layout="icon-start">
             <ion-label>Recents</ion-label>
             <ion-icon name="call"></ion-icon>
-            <ion-badge color="danger">12</ion-badge>
+            <ion-badge color="danger" vertical="top" size="small">12</ion-badge>
           </ion-tab-button>
 
           <ion-tab-button tab="2" layout="icon-start">
@@ -44,7 +44,7 @@ configs().forEach(({ title, screenshot, config }) => {
           <ion-tab-button tab="2" layout="icon-end">
             <ion-label>Favorites</ion-label>
             <ion-icon name="heart"></ion-icon>
-            <ion-badge color="dark">33</ion-badge>
+            <ion-badge color="dark" vertical="top" size="small">33</ion-badge>
           </ion-tab-button>
 
           <ion-tab-button tab="3" layout="icon-end">
@@ -71,7 +71,7 @@ configs().forEach(({ title, screenshot, config }) => {
           </ion-tab-button>
 
           <ion-tab-button tab="2">
-            <ion-badge>16</ion-badge>
+            <ion-badge vertical="top" size="small">16</ion-badge>
             <ion-label>Favorites</ion-label>
             <ion-icon name="heart"></ion-icon>
           </ion-tab-button>
@@ -100,7 +100,7 @@ configs().forEach(({ title, screenshot, config }) => {
           </ion-tab-button>
 
           <ion-tab-button tab="2">
-            <ion-badge color="danger">44</ion-badge>
+            <ion-badge color="danger" vertical="top" size="small">44</ion-badge>
             <ion-icon name="heart"></ion-icon>
           </ion-tab-button>
 
@@ -135,7 +135,7 @@ configs().forEach(({ title, screenshot, config }) => {
           <ion-tab-button tab="3" layout="icon-hide">
             <ion-label>Settings</ion-label>
             <ion-icon name="settings"></ion-icon>
-            <ion-badge color="danger">2</ion-badge>
+            <ion-badge color="danger" vertical="top" size="small">2</ion-badge>
           </ion-tab-button>
         </ion-tab-bar>
       `,