fix(badge): improvements made based on feedback.

joselrio · joselrio · commit 85bfa52d981d · 2025-03-18T13:16:37.000Z
diff --git a/core/src/components/badge/badge.ionic.scss b/core/src/components/badge/badge.ionic.scss
@@ -1,6 +1,6 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
 @use "./badge.common";
-@import "./badge.ionic.vars";
+@use "./badge.ionic.vars" as badge-ionic-vars;
 
 // Ionic Badge
 // --------------------------------------------------
@@ -182,16 +182,13 @@
 :host([vertical].in-tab-button) {
   position: relative;
 
-  min-width: $badge-ionic-in-tab-button-min-width;
+  min-width: badge-ionic-vars.$badge-ionic-in-tab-button-min-width;
 }
 
 :host([vertical].in-tab-button) ::slotted(ion-icon) {
   @include globals.position($top: 50%, $start: 50%);
 
   position: absolute;
 
-  width: $badge-ionic-in-tab-button-icon-size;
-  height: $badge-ionic-in-tab-button-icon-size;
-
   transform: translate(-50%, -50%);
 }
diff --git a/core/src/components/badge/test/hint/index.html b/core/src/components/badge/test/hint/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" dir="ltr">
+<html lang="en" dir="ltr" theme="ionic">
   <head>
     <meta charset="UTF-8" />
     <title>Badge - Hint</title>
@@ -108,27 +108,27 @@
               <ion-tab-button href="" tab="tab-one">
                 <ion-label>Tab One</ion-label>
                 <ion-icon name="star"></ion-icon>
-                <ion-badge vertical="top" color="danger">9</ion-badge>
+                <ion-badge size="xxsmall" vertical="top" color="danger">9</ion-badge>
               </ion-tab-button>
 
               <ion-tab-button tab="schedule" class="e2eTabTwoButton">
                 <ion-label>Tab Two</ion-label>
                 <ion-icon name="globe"></ion-icon>
-                <ion-badge vertical="top" color="primary">
+                <ion-badge size="xxsmall" vertical="top" color="primary">
                   <ion-icon name="star"></ion-icon>
                 </ion-badge>
               </ion-tab-button>
 
               <ion-tab-button tab="tab-three">
                 <ion-label>Tab Three</ion-label>
                 <ion-icon name="logo-facebook"></ion-icon>
-                <ion-badge vertical="top" color="warning">999</ion-badge>
+                <ion-badge size="xxsmall" vertical="top" color="warning">999</ion-badge>
               </ion-tab-button>
 
               <ion-tab-button tab="tab-four" class="e2eTabFourButton">
                 <ion-label>Tab Four</ion-label>
                 <ion-icon name="chatbox"></ion-icon>
-                <ion-badge vertical="top" color="success"></ion-badge>
+                <ion-badge size="xxsmall" vertical="top" color="success"></ion-badge>
               </ion-tab-button>
             </ion-tab-bar>
           </div>
@@ -138,27 +138,27 @@
               <ion-tab-button href="" tab="tab-one">
                 <ion-label>Tab One</ion-label>
                 <ion-icon name="star"></ion-icon>
-                <ion-badge vertical="bottom" color="danger">9</ion-badge>
+                <ion-badge size="xxsmall" vertical="bottom" color="danger">9</ion-badge>
               </ion-tab-button>
 
               <ion-tab-button tab="schedule" class="e2eTabTwoButton">
                 <ion-label>Tab Two</ion-label>
                 <ion-icon name="globe"></ion-icon>
-                <ion-badge vertical="bottom" color="primary">
+                <ion-badge size="xxsmall" vertical="bottom" color="primary">
                   <ion-icon name="star"></ion-icon>
                 </ion-badge>
               </ion-tab-button>
 
               <ion-tab-button tab="tab-three">
                 <ion-label>Tab Three</ion-label>
                 <ion-icon name="logo-facebook"></ion-icon>
-                <ion-badge vertical="bottom" color="warning">999</ion-badge>
+                <ion-badge size="xxsmall" vertical="bottom" color="warning">999</ion-badge>
               </ion-tab-button>
 
               <ion-tab-button tab="tab-four" class="e2eTabFourButton">
                 <ion-label>Tab Four</ion-label>
                 <ion-icon name="chatbox"></ion-icon>
-                <ion-badge vertical="bottom" color="success"></ion-badge>
+                <ion-badge size="xxsmall" vertical="bottom" color="success"></ion-badge>
               </ion-tab-button>
             </ion-tab-bar>
           </div>
diff --git a/core/src/components/tab-button/tab-button.ionic.scss b/core/src/components/tab-button/tab-button.ionic.scss
@@ -135,7 +135,4 @@
   justify-content: center;
 
   min-width: $tab-ionic-button-badge-size;
-  height: $tab-ionic-button-badge-size;
-
-  font-size: $tab-ionic-button-badge-font-size;
 }
diff --git a/core/src/components/tab-button/tab-button.ionic.vars.scss b/core/src/components/tab-button/tab-button.ionic.vars.scss
@@ -36,6 +36,3 @@ $tab-ionic-button-badge-padding-bottom: var(--badge-padding-bottom, 4px);
 
 /// @prop - Badge padding start
 $tab-ionic-button-badge-padding-start: var(--badge-padding-left, 4px);
-
-/// @prop - Badge font size
-$tab-ionic-button-badge-font-size: var(--badge-font-size, 12px);

Original file line number	Diff line number	Diff line change
`@@ -135,7 +135,4 @@`
`135`	`135`	`justify-content: center;`
`136`	`136`
`137`	`137`	`min-width: $tab-ionic-button-badge-size;`
`138`		`- height: $tab-ionic-button-badge-size;`
`139`		`-`
`140`		`- font-size: $tab-ionic-button-badge-font-size;`
`141`	`138`	`}`