feat(button): add support for badge (#30303)

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?
The ion-badge is not currently supported when inside the ion-button.

## What is the new behavior?
- The experience of the ion-badge inside the ion-button has been
implemented according to our designs.

## 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. -->

---------

Co-authored-by: José Rio <[email protected]>

Author: OS-pedrolourenco

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

@@ -198,3 +198,32 @@
 
   transform: translate(-50%, -50%);
 }
+
+// Badge in Button
+// --------------------------------------------------
+
+:host([vertical]:not(.in-tab-button).in-button.badge-xxsmall),
+:host([vertical]:not(.in-tab-button).in-button.badge-xsmall),
+: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),
+:host([vertical]:not(.in-tab-button).in-button.badge-xlarge) {
+  @include globals.position(null, globals.$ion-space-050);
+}
+
+:host(:not(:empty).in-button) {
+  min-width: globals.$ion-scale-400;
+  height: globals.$ion-scale-400;
+
+  font-size: globals.$ion-font-size-300;
+
+  line-height: globals.$ion-font-line-height-500;
+
+  ::slotted(ion-icon) {
+    width: globals.$ion-scale-300;
+    height: globals.$ion-scale-300;
+  }
+}

core/src/components/badge/badge.native.scss

@@ -13,7 +13,7 @@
 }
 
 // TODO(ROU-10747): Review size styles when sizes are defined for native themes.
-:host([vertical]:not(.in-tab-button)),
+:host([vertical]:not(.in-button):not(.in-tab-button)),
 :host(:empty) {
   --padding-start: 0;
   --padding-end: 0;
@@ -29,3 +29,20 @@
 
   line-height: 10px;
 }
+
+// Badge in Button
+// --------------------------------------------------
+
+:host(:not(:empty).in-button) {
+  min-width: $badge-size-in-button;
+  height: $badge-size-in-button;
+
+  font-size: $badge-font-size-in-button;
+
+  line-height: $badge-line-height-in-button;
+
+  ::slotted(ion-icon) {
+    width: $badge-icon-size-in-button;
+    height: $badge-icon-size-in-button;
+  }
+}

core/src/components/badge/badge.native.vars.scss

@@ -1,4 +1,5 @@
 @import "../../themes/functions.font";
+@import "../../themes/functions.sizes";
 
 // Badge
 // --------------------------------------------------
@@ -8,3 +9,15 @@ $badge-hint-baseline-font-size: 8px;
 
 /// @prop - Font size of the badge hint
 $badge-hint-font-size: dynamic-font($badge-hint-baseline-font-size);
+
+/// @prop - Size of the badge when inside button
+$badge-size-in-button: 16px;
+
+/// @prop - Font size of the badge when inside button
+$badge-font-size-in-button: px-to-rem(12);
+
+/// @prop - Line height of the badge when inside button
+$badge-line-height-in-button: 20px;
+
+/// @prop - Size of of the badge icon when inside button
+$badge-icon-size-in-button: 12px;

core/src/components/badge/badge.tsx

@@ -99,6 +99,7 @@ export class Badge implements ComponentInterface {
           [`badge-${shape}`]: shape !== undefined,
           [`badge-${size}`]: size !== undefined,
           [`badge-vertical-${this.vertical}`]: this.vertical !== undefined,
+          'in-button': hostContext('ion-button', this.el),
           'in-tab-button': hostContext('ion-tab-button', this.el),
         })}
       >

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

@@ -39,4 +39,22 @@ configs({ directions: ['ltr'], modes: ['md', 'ios', 'ionic-md'] }).forEach(({ co
       await expect(container).toHaveScreenshot(screenshot(`badge-hint-tab-button-icon-bottom`));
     });
   });
+
+  test.describe(title('badge: hint inside button'), () => {
+    test('should not have visual regressions when icon is on the top', async ({ page }) => {
+      await page.goto('/src/components/badge/test/hint', config);
+
+      const container = page.locator('#button-top');
+
+      await expect(container).toHaveScreenshot(screenshot(`badge-hint-button-top`));
+    });
+
+    test('should not have visual regressions when icon is at the bottom', async ({ page }) => {
+      await page.goto('/src/components/badge/test/hint', config);
+
+      const container = page.locator('#button-bottom');
+
+      await expect(container).toHaveScreenshot(screenshot(`badge-hint-button-bottom`));
+    });
+  });
 });