feat(button): add support for badge

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

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

@@ -235,6 +235,58 @@
             </ion-tab-bar>
           </div>
         </ion-list>
+
+        <ion-list id="button-top">
+          <ion-list-header>
+            <ion-label> Inside Button - Top Placement </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"></ion-badge>
+            </ion-button>
+            <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">
+              <ion-icon slot="icon-only" name="add"></ion-icon>
+              <ion-badge color="danger" size="small" vertical="top">99+</ion-badge>
+            </ion-button>
+            <ion-button fill="clear">
+              <ion-icon slot="icon-only" name="add"></ion-icon>
+              <ion-badge color="danger" size="small" vertical="top">
+                <ion-icon name="star"></ion-icon>
+              </ion-badge>
+            </ion-button>
+          </div>
+        </ion-list>
+
+        <ion-list id="button-bottom">
+          <ion-list-header>
+            <ion-label> Inside Button - Bottom Placement </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="bottom"></ion-badge>
+            </ion-button>
+            <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">
+              <ion-icon slot="icon-only" name="add"></ion-icon>
+              <ion-badge color="danger" size="small" vertical="bottom">99+</ion-badge>
+            </ion-button>
+            <ion-button fill="clear">
+              <ion-icon slot="icon-only" name="add"></ion-icon>
+              <ion-badge color="danger" size="small" vertical="bottom">
+                <ion-icon name="star"></ion-icon>
+              </ion-badge>
+            </ion-button>
+          </div>
+        </ion-list>
       </ion-content>
     </ion-app>
   </body>

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

@@ -1,3 +1,4 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
 @import "./button.vars";
 
 // Button
@@ -306,3 +307,25 @@ ion-ripple-effect {
   background: #{var(--ion-toolbar-color, var(--background))};
   color: #{var(--ion-toolbar-background, var(--color))};
 }
+
+// Button Badge
+// --------------------------------------------------
+
+// This rule only works in Chrome
+:has(ion-badge) .button-native {
+  overflow: visible;
+}
+
+// This rule only works in Safari
+:host(:has(ion-badge)) .button-native {
+  overflow: visible;
+}
+
+:host ::slotted(ion-badge[vertical]:not(:empty)) {
+  @include globals.padding(globals.$ion-scale-050);
+
+  display: flex;
+
+  align-items: center;
+  justify-content: center;
+}

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

@@ -290,3 +290,18 @@
 :host(.button-xlarge) ::slotted(ion-spinner[slot="end"]) {
   @include globals.margin-horizontal(globals.$ion-space-300, null);
 }
+
+// Button Badge
+// --------------------------------------------------
+
+:has(ion-badge) .button-native {
+  ion-ripple-effect {
+    // stylelint-disable-next-line property-disallowed-list
+    border-radius: inherit;
+  }
+
+  &::after {
+    // stylelint-disable-next-line property-disallowed-list
+    border-radius: inherit;
+  }
+}

core/src/components/button/button.native.scss

@@ -22,3 +22,12 @@
 ::slotted(ion-icon[slot="end"]) {
   @include globals.margin(0, -0.2em, 0, 0.3em);
 }
+
+// Button Badge
+// --------------------------------------------------
+
+:has(ion-badge) .button-native {
+  ::slotted(ion-badge) {
+    position: fixed;
+  }
+}