fix(tab-bar): badge positioning for tab bar

Author: OS-susmitabhowmik

core/src/components/tab-bar/tab-bar.ionic.scss

@@ -51,7 +51,7 @@
 /* Full */
 :host(.tab-bar-full) {
   /* stylelint-disable */
-  padding-top: globals.$ion-space-100;
+  padding-top: globals.$ion-space-250;
   padding-bottom: calc(globals.$ion-space-100 + var(--ion-safe-area-bottom, 0));
 
   padding-right: calc(globals.$ion-space-400 + var(--ion-safe-area-right, 0));
@@ -61,7 +61,7 @@
 
 :host([slot="top"].tab-bar-full) {
   padding-top: calc(globals.$ion-space-100 + var(--ion-safe-area-top, 0));
-  padding-bottom: globals.$ion-space-100;
+  padding-bottom: globals.$ion-space-250;
 }
 
 /* Compact */

core/src/components/tab-bar/test/basic/index.html

@@ -99,7 +99,7 @@
           <ion-tab-button tab="1">
             <ion-icon name="heart"></ion-icon>
             <ion-label>Favorites</ion-label>
-            <ion-badge color="danger"></ion-badge>
+            <ion-badge color="danger" size="medium"></ion-badge>
           </ion-tab-button>
 
           <ion-tab-button tab="2">

core/src/components/tab-button/tab-button.ionic.scss

@@ -103,7 +103,13 @@
 // --------------------------------------------------
 
 :host ::slotted(ion-badge) {
-  @include globals.position(null, null, null, calc(50% + globals.$ion-scale-300));
+  @include globals.position(calc(globals.$ion-scale-100 * -2), null, null, calc(50% + globals.$ion-scale-300));
+  transform: translateX(-50%);
+}
+
+// Status badge (empty) needs less offset to overlap the icon
+:host ::slotted(ion-badge:empty) {
+  @include globals.position(calc(globals.$ion-scale-100 * -1), null, null, calc(50% + globals.$ion-scale-250));
 }
 
 :host ::slotted(ion-badge.badge-vertical-top) {