feat(tab-button): support new badge hint features (#30246)

Issue number: internal

## What is the current behavior?
- tab-button with badge only supports status badges (small circle with
specific color), missing cases with text or icon.

## What is the new behavior?
- Added css on tab-button to support new badge hint functionalities such
text and icon
- Added css on badge to support the existence of a icon inside it
- Added support on ionic theme for different position (top and button)
- Added badge test case for this use case
- There's no figma for md/iOS implementation, so just added for now a
best effort on how it looks.

**Theme md:**
<img width="418" alt="md"
src="https://github.com/user-attachments/assets/0281b616-12aa-4107-bf4c-e8fdbe72d7d3"
/>


**Theme iOS:**
<img width="417" alt="ios"
src="https://github.com/user-attachments/assets/6102d874-b608-4527-91fb-4ed8b7e536a0"
/>


**Theme ionic:**
<img width="418" alt="ionic"
src="https://github.com/user-attachments/assets/10f59d57-0c30-4f04-bbe8-de625b93eb46"
/>


### Notes:
- All the styles added are based on the [vertical] attribute in order to
prevent breaking changes and only affect the badge hint with the new
features implemented.
- Also top and bottom position under the context of md/iOS themes are
not exactly the same as ionic theme due the usage of an
`overflow:hidden;` attribute at the `.button-native` context. This
`overflow:hidden;` attribute has been overwritten to `overflow:visible;`
for ionic theme.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information


[Sample](https://ionic-framework-git-rou-11666-ionic1.vercel.app/src/components/badge/test/hint)

Author: joselrio

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