feat(badge): add xxsmall size to ionic theme (#29570)

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>

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

@@ -21,6 +21,16 @@
 // Badge Sizes
 // --------------------------------------------------
 
+/* 2-Extra Small Badge */
+:host(.badge-xxsmall) {
+  min-width: globals.$ionic-scale-400;
+  height: globals.$ionic-scale-400;
+
+  font-size: globals.$ionic-font-size-300;
+
+  line-height: globals.$ionic-line-height-400;
+}
+
 /* Extra Small Badge */
 :host(.badge-xsmall) {
   min-width: globals.$ionic-scale-600;

core/src/components/badge/badge.tsx

@@ -27,10 +27,16 @@ export class Badge implements ComponentInterface {
   @Prop({ reflect: true }) color?: Color;
 
   /**
-   * Set to "xsmall" for even less height and width. Set to `"small"` for less height and width. Set to "medium" for slightly larger dimensions. Set to "large" for even greater height and width. Set to `"xlarge"` for the largest badge.
+   * Set to `"xxsmall"` for the smallest badge.
+   * Set to "xsmall" for a very small badge.
+   * Set to `"small"` for a small badge.
+   * Set to "medium" for a medium badge.
+   * Set to "large" for a large badge.
+   * Set to `"xlarge"` for the largest badge.
+   *
    * Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
    */
-  @Prop() size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+  @Prop() size?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 
   private getSize(): string | undefined {
     const theme = getIonTheme(this);

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

@@ -6,6 +6,32 @@ import { configs, test } from '@utils/test/playwright';
  */
 configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
   test.describe(title('badge: size'), () => {
+    test('should render xxsmall badges', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-badge size="xxsmall">1</ion-badge>
+      `,
+        config
+      );
+
+      const badge = page.locator('ion-badge');
+
+      await expect(badge).toHaveScreenshot(screenshot(`badge-size-xxsmall`));
+    });
+
+    test('should render xxsmall badges with long text', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-badge size="xxsmall">99+</ion-badge>
+      `,
+        config
+      );
+
+      const badge = page.locator('ion-badge');
+
+      await expect(badge).toHaveScreenshot(screenshot(`badge-size-xxsmall-long-text`));
+    });
+
     test('should render xsmall badges', async ({ page }) => {
       await page.setContent(
         `

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

@@ -28,6 +28,11 @@
             <ion-label>Default</ion-label>
             <ion-badge slot="end">00</ion-badge>
           </ion-item>
+          <ion-item>
+            <ion-label>XXSmall</ion-label>
+            <ion-badge slot="end" size="xxsmall">1</ion-badge>
+            <ion-badge slot="end" size="xxsmall">99+</ion-badge>
+          </ion-item>
           <ion-item>
             <ion-label>XSmall</ion-label>
             <ion-badge slot="end" size="xsmall">1</ion-badge>