fix(button): update styling for badge (#30414)

Issue number: internal
---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
Some stylings for the ion-badge when slotted in an ion-button were
missing.

## What is the new behavior?
Updated the styling for the ion-badge when slotted in an ion-button
according to the designs:
- Adjusted badge padding;
- Abandoned the `:has` pseudo-selector for a simple 'button-had-badge'
class;
- Adjusted font-size for icons inside the button;
- Adjusted badge positioning according to button size and badge length.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Author: OS-pedrolourenco

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`));
+    });
   });
 });