Merge branch 'next' into ROU-11968-avatar

Author: BenOsodrac

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

@@ -160,17 +160,12 @@
 // Badge in Button
 // --------------------------------------------------
 
-:host([vertical]:not(.in-tab-button).in-button.badge-small) {
-  @include globals.position(null, calc(-1 * var(globals.$ion-space-050)));
-}
-
-: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) {
+  --padding-start: #{globals.$ion-scale-050};
+  --padding-end: #{globals.$ion-scale-050};
+
   @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(ROU-10747): Remove theme check when sizes are defined for all themes.
+    // TODO(FW-6355): Remove theme check when sizes are defined for all themes.
     if (theme !== 'ionic') {
       return undefined;
     }
@@ -133,6 +133,7 @@ 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,5 +56,13 @@ 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`));
+    });
   });
 });