Add support for badges in ion-button

Author: OS-pedrolourenco

core/src/components/badge/badge.common.scss

@@ -1,3 +1,4 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
 @use "../../themes/functions.color" as color;
 @import "../../themes/mixins";
 @import "./badge.common.vars";
@@ -48,6 +49,14 @@
   color: #{color.current-color(contrast)};
 }
 
+:host(:not(.in-tab-button).badge-vertical-top) {
+  top: 0;
+}
+
+:host(:not(.in-tab-button).badge-vertical-bottom) {
+  bottom: 0;
+}
+
 // Badge Empty (hint)
 // --------------------------------------------------
 
@@ -56,10 +65,24 @@
   position: absolute;
 }
 
-:host(:not(.in-tab-button):empty.badge-vertical-top) {
-  top: 0;
+// Badge in Button
+// --------------------------------------------------
+
+:host([vertical]:not(.in-tab-button).in-button) {
+  // stylelint-disable-next-line property-disallowed-list
+  right: globals.$ion-space-050;
 }
 
-:host(:not(.in-tab-button):empty.badge-vertical-bottom) {
-  bottom: 0;
+: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.ionic.scss

@@ -190,3 +190,11 @@
 
   transform: translate(-50%, -50%);
 }
+
+// Badge in Button
+// --------------------------------------------------
+
+:host([vertical]:not(.in-tab-button).in-button.badge-small) {
+  // stylelint-disable-next-line property-disallowed-list
+  right: calc(-1 * globals.$ion-space-050);
+}

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