Merge branch 'next' into ROU-11728

Author: JoaoFerreira-FrontEnd

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

@@ -51,15 +51,15 @@
 // Badge Empty (hint)
 // --------------------------------------------------
 
-:host([vertical]) {
+:host([vertical]:not(.in-tab-button)) {
   @include position(null, 0, null, null);
   position: absolute;
 }
 
-:host(:empty.badge-vertical-top) {
+:host(:not(.in-tab-button):empty.badge-vertical-top) {
   top: 0;
 }
 
-:host(:empty.badge-vertical-bottom) {
+:host(:not(.in-tab-button):empty.badge-vertical-bottom) {
   bottom: 0;
 }

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

@@ -174,3 +174,19 @@
   min-width: globals.$ion-scale-400;
   height: globals.$ion-scale-400;
 }
+
+// Badge Inside Tab Button
+// --------------------------------------------------
+
+:host([vertical].in-tab-button) {
+  position: relative;
+}
+
+// Badge Icon when Inside Tab Button
+:host([vertical].in-tab-button) ::slotted(ion-icon) {
+  @include globals.position(50%, null, null, 50%);
+
+  position: absolute;
+
+  transform: translate(-50%, -50%);
+}

core/src/components/badge/badge.ios.scss

@@ -16,3 +16,23 @@
    */
   font-size: dynamic-font-min(1, $badge-baseline-font-size);
 }
+
+// Badge Inside Tab Button
+// --------------------------------------------------
+
+:host([vertical].in-tab-button) {
+  position: relative;
+
+  min-width: $badge-ios-in-tab-button-min-width;
+}
+
+:host([vertical].in-tab-button) ::slotted(ion-icon) {
+  @include position(50%, null, null, 50%);
+
+  position: absolute;
+
+  width: $badge-ios-in-tab-button-icon-size;
+  height: $badge-ios-in-tab-button-icon-size;
+
+  transform: translate(-50%, -50%);
+}

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

@@ -5,3 +5,15 @@
 
 /// @prop - Border radius of the badge
 $badge-ios-border-radius: 10px;
+
+// Badge inside a Tab Button
+// --------------------------------------------------
+
+/// @prop - Minimum width of the badge inside a Tab Button
+$badge-ios-in-tab-button-min-width: 8px;
+
+/// @prop - Height of the badge inside a Tab Button
+$badge-ios-in-tab-button-height: 8px;
+
+/// @prop - Badge icon size inside a Tab Button
+$badge-ios-in-tab-button-icon-size: 12px;

core/src/components/badge/badge.tsx

@@ -1,6 +1,6 @@
 import type { ComponentInterface } from '@stencil/core';
-import { Component, Host, Prop, h } from '@stencil/core';
-import { createColorClasses } from '@utils/theme';
+import { Component, Element, Host, Prop, h } from '@stencil/core';
+import { createColorClasses, hostContext } from '@utils/theme';
 
 import { getIonTheme } from '../../global/ionic-global';
 import type { Color } from '../../interface';
@@ -19,6 +19,8 @@ import type { Color } from '../../interface';
   shadow: true,
 })
 export class Badge implements ComponentInterface {
+  @Element() el!: HTMLElement;
+
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -89,13 +91,15 @@ export class Badge implements ComponentInterface {
     const shape = this.getShape();
     const size = this.getSize();
     const theme = getIonTheme(this);
+
     return (
       <Host
         class={createColorClasses(this.color, {
           [theme]: true,
           [`badge-${shape}`]: shape !== undefined,
           [`badge-${size}`]: size !== undefined,
           [`badge-vertical-${this.vertical}`]: this.vertical !== undefined,
+          'in-tab-button': hostContext('ion-tab-button', this.el),
         })}
       >
         <slot></slot>

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

@@ -21,4 +21,22 @@ configs({ directions: ['ltr'], modes: ['md', 'ios', 'ionic-md'] }).forEach(({ co
       await expect(container).toHaveScreenshot(screenshot(`badge-hint-avatar`));
     });
   });
+
+  test.describe(title('badge: hint inside tab 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('#tab-button');
+
+      await expect(container).toHaveScreenshot(screenshot(`badge-hint-tab-button-icon-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('#tab-button-icon-bottom');
+
+      await expect(container).toHaveScreenshot(screenshot(`badge-hint-tab-button-icon-bottom`));
+    });
+  });
 });