fix(button): fix tokens on ionic theme

core/src/components/badge/badge.ionic.scss

@@ -160,12 +160,17 @@
 // Badge in Button
 // --------------------------------------------------
 
-:host(:not(:empty).in-button) {
-  --padding-start: #{globals.$ion-scale-050};
-  --padding-end: #{globals.$ion-scale-050};
+:host([vertical]:not(.in-tab-button).in-button.badge-small) {
+  @include globals.position(null, calc(-1 * var(globals.$ion-space-050)));
+}
 
-  @include globals.typography(globals.$ion-body-action-xs);
+:host([vertical]:not(.in-tab-button).in-button.badge-medium),
+:host([vertical]:not(.in-tab-button).in-button.badge-large) {
+  @include globals.position(null, globals.$ion-space-050);
+}
 
+:host(:not(:empty).in-button) {
+  @include globals.typography(globals.$ion-body-action-xs);
   min-width: globals.$ion-scale-400;
   height: globals.$ion-scale-400;
 

core/src/components/badge/badge.tsx

@@ -80,7 +80,7 @@ export class Badge implements ComponentInterface {
     const theme = getIonTheme(this);
     const { size } = this;
 
-    // TODO(FW-6355): Remove theme check when sizes are defined for all themes.
+    // TODO(ROU-10747): Remove theme check when sizes are defined for all themes.
     if (theme !== 'ionic') {
       return undefined;
     }
@@ -133,7 +133,6 @@ export class Badge implements ComponentInterface {
           [`badge-vertical-${this.vertical}`]: this.vertical !== undefined,
           'in-button': hostContext('ion-button', this.el),
           'in-tab-button': hostContext('ion-tab-button', this.el),
-          'long-badge': (this.el.textContent?.trim().length ?? 0) > 2,
         })}
       >
         <slot></slot>

core/src/components/badge/test/hint/badge.e2e.ts

@@ -56,13 +56,5 @@ configs({ directions: ['ltr'], modes: ['md', 'ios', 'ionic-md'] }).forEach(({ co
 
       await expect(container).toHaveScreenshot(screenshot(`badge-hint-button-bottom`));
     });
-
-    test('should not have visual regressions for different button sizes', async ({ page }) => {
-      await page.goto('/src/components/badge/test/hint', config);
-
-      const container = page.locator('#button-size');
-
-      await expect(container).toHaveScreenshot(screenshot(`badge-hint-button-size`));
-    });
   });
 });

core/src/components/badge/test/hint/index.html

@@ -417,47 +417,6 @@
             </ion-button>
           </div>
         </ion-list>
-        <ion-list id="button-size">
-          <ion-list-header>
-            <ion-label> Inside Button - Button Size </ion-label>
-          </ion-list-header>
-          <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
-            <ion-button fill="clear">
-              <ion-icon slot="icon-only" name="add"></ion-icon>
-              <ion-badge color="danger" size="small" vertical="top">1</ion-badge>
-            </ion-button>
-            <ion-button fill="clear" size="small">
-              <ion-icon slot="icon-only" name="add"></ion-icon>
-              <ion-badge color="danger" size="small" vertical="top">1</ion-badge>
-            </ion-button>
-            <ion-button fill="clear" size="medium">
-              <ion-icon slot="icon-only" name="add"></ion-icon>
-              <ion-badge color="danger" size="small" vertical="top">1</ion-badge>
-            </ion-button>
-            <ion-button fill="clear" size="large">
-              <ion-icon slot="icon-only" name="add"></ion-icon>
-              <ion-badge color="danger" size="small" vertical="top">1</ion-badge>
-            </ion-button>
-          </div>
-          <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
-            <ion-button fill="clear">
-              <ion-icon slot="icon-only" name="add"></ion-icon>
-              <ion-badge color="danger" size="small" vertical="bottom">1</ion-badge>
-            </ion-button>
-            <ion-button fill="clear" size="small">
-              <ion-icon slot="icon-only" name="add"></ion-icon>
-              <ion-badge color="danger" size="small" vertical="bottom">1</ion-badge>
-            </ion-button>
-            <ion-button fill="clear" size="medium">
-              <ion-icon slot="icon-only" name="add"></ion-icon>
-              <ion-badge color="danger" size="small" vertical="bottom">1</ion-badge>
-            </ion-button>
-            <ion-button fill="clear" size="large">
-              <ion-icon slot="icon-only" name="add"></ion-icon>
-              <ion-badge color="danger" size="small" vertical="bottom">1</ion-badge>
-            </ion-button>
-          </div>
-        </ion-list>
       </ion-content>
     </ion-app>
   </body>

core/src/components/button/button.common.scss

@@ -304,7 +304,13 @@ ion-ripple-effect {
   @include border-radius(inherit);
 }
 
-:host(.button-has-badge) .button-native {
+// This rule works for Chrome.
+:has(ion-badge) .button-native {
+  --overflow: visible;
+}
+
+// This rule works for the rest of the browsers.
+:host(:has(ion-badge)) .button-native {
   --overflow: visible;
 }
 

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

@@ -102,6 +102,7 @@
   --padding-end: #{globals.$ion-space-400};
 
   @include globals.typography(globals.$ion-body-action-sm);
+  min-width: globals.$ion-scale-1600;
 
   min-height: #{globals.$ion-scale-1000};
 }
@@ -111,6 +112,7 @@
   --padding-end: #{globals.$ion-space-500};
 
   @include globals.typography(globals.$ion-body-action-md);
+  min-width: globals.$ion-scale-1800;
 
   min-height: #{globals.$ion-scale-1200};
 }
@@ -120,30 +122,35 @@
   --padding-end: #{globals.$ion-space-700};
 
   @include globals.typography(globals.$ion-body-action-lg);
+  min-width: globals.$ion-scale-2000;
 
   min-height: #{globals.$ion-scale-1400};
 }
 
 // Button with Icons
 // -------------------------------------------------------------------------------
-
-/* Button containing only an icon */
-::slotted(ion-icon[slot="start"]),
-::slotted(ion-icon[slot="end"]),
-::slotted(ion-icon[slot="icon-only"]) {
-  font-size: globals.$ion-font-size-500;
+:host(.button-small),
+:host(.button-medium) {
+  ::slotted(ion-icon[slot="start"]),
+  ::slotted(ion-icon[slot="end"]),
+  ::slotted(ion-icon[slot="icon-only"]) {
+    width: globals.$ion-scale-500;
+    height: globals.$ion-scale-500;
+  }
 }
 
 :host(.button-large) {
   ::slotted(ion-icon[slot="start"]),
   ::slotted(ion-icon[slot="end"]),
   ::slotted(ion-icon[slot="icon-only"]) {
-    font-size: globals.$ion-font-size-600;
+    width: globals.$ion-scale-600;
+    height: globals.$ion-scale-600;
   }
 }
 
 :host(.button-has-icon-only) {
   --padding-end: var(--padding-top);
+  min-width: unset;
 
   aspect-ratio: 1 / 1;
 }
@@ -158,8 +165,8 @@
 ::slotted(ion-spinner[slot="start"]),
 ::slotted(ion-spinner[slot="end"]),
 ::slotted(ion-spinner[slot="icon-only"]) {
-  width: globals.$ion-space-500;
-  height: globals.$ion-space-500;
+  width: globals.$ion-scale-500;
+  height: globals.$ion-scale-500;
 }
 
 // Button Shapes
@@ -263,46 +270,8 @@
   @include globals.margin-horizontal(globals.$ion-space-300, null);
 }
 
-// Button with Badge
+// Button Badge
 // --------------------------------------------------
-
-:host(.button-has-badge) {
-  --padding-top: #{globals.$ion-space-0};
-  --padding-bottom: #{globals.$ion-space-0};
-}
-
-:host(.button-small) ::slotted(ion-badge) {
-  @include globals.position(null, calc(-1 * globals.$ion-space-050), null, null);
-}
-
-:host(.button-medium) {
-  ::slotted(ion-badge.long-badge.badge-vertical-top) {
-    @include globals.position($top: globals.$ion-space-100);
-  }
-  ::slotted(ion-badge.long-badge.badge-vertical-bottom) {
-    @include globals.position($bottom: globals.$ion-space-100);
-  }
-
-  ::slotted(ion-badge:not(.long-badge).badge-vertical-top) {
-    @include globals.position(globals.$ion-space-100, globals.$ion-space-150, null, null);
-  }
-  ::slotted(ion-badge:not(.long-badge).badge-vertical-bottom) {
-    @include globals.position(null, globals.$ion-space-150, globals.$ion-space-100, null);
-  }
-}
-
-:host(.button-large) {
-  ::slotted(ion-badge.long-badge.badge-vertical-top) {
-    @include globals.position($top: globals.$ion-space-200);
-  }
-  ::slotted(ion-badge.long-badge.badge-vertical-bottom) {
-    @include globals.position($bottom: globals.$ion-space-200);
-  }
-
-  ::slotted(ion-badge:not(.long-badge).badge-vertical-top) {
-    @include globals.position(globals.$ion-space-200, globals.$ion-space-200, null, null);
-  }
-  ::slotted(ion-badge:not(.long-badge).badge-vertical-bottom) {
-    @include globals.position(null, globals.$ion-space-200, globals.$ion-space-200, null);
-  }
+:host ::slotted(ion-badge[vertical]:not(:empty)) {
+  @include globals.padding(globals.$ion-space-050);
 }

core/src/components/button/button.tsx

@@ -206,10 +206,6 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
     return !!this.el.querySelector('[slot="icon-only"]');
   }
 
-  private get hasBadge() {
-    return !!this.el.querySelector('ion-badge');
-  }
-
   private get rippleType() {
     const hasClearFill = this.fill === undefined || this.fill === 'clear';
 
@@ -349,20 +345,8 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   };
 
   render() {
-    const {
-      buttonType,
-      type,
-      disabled,
-      rel,
-      target,
-      href,
-      color,
-      expand,
-      hasIconOnly,
-      hasBadge,
-      strong,
-      inheritedAttributes,
-    } = this;
+    const { buttonType, type, disabled, rel, target, href, color, expand, hasIconOnly, strong, inheritedAttributes } =
+      this;
 
     const theme = getIonTheme(this);
     const mode = getIonMode(this);
@@ -414,7 +398,6 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
           'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
           'in-buttons': hostContext('ion-buttons', this.el),
           'button-has-icon-only': hasIconOnly,
-          'button-has-badge': hasBadge,
           'button-disabled': disabled,
           'ion-activatable': true,
           'ion-focusable': true,

core/src/components/button/test/theme-ionic/index.html

@@ -34,7 +34,7 @@ <h4>Preview options</h4>
 
         <p>
           <ion-select id="select-size" justify="space-between" interface="alert" label="Size" placeholder="">
-            <ion-select-option selected="true" value="">default</ion-select-option>
+            <ion-select-option selected="true" value="medium">Medium</ion-select-option>
             <ion-select-option value="small">Small</ion-select-option>
             <ion-select-option value="large">Large</ion-select-option>
           </ion-select>