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

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

core/api.txt

@@ -312,7 +312,7 @@ ion-backdrop,event,ionBackdropTap,void,true
 ion-badge,shadow
 ion-badge,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-badge,prop,mode,"ios" | "md",undefined,false,false
-ion-badge,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | undefined,undefined,false,false
+ion-badge,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall" | undefined,undefined,false,false
 ion-badge,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-badge,css-prop,--background,ionic
 ion-badge,css-prop,--background,ios

core/src/components.d.ts

@@ -418,9 +418,9 @@ export namespace Components {
          */
         "mode"?: "ios" | "md";
         /**
-          * 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. Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
+          * 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.
          */
-        "size"?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+        "size"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -5662,9 +5662,9 @@ declare namespace LocalJSX {
          */
         "mode"?: "ios" | "md";
         /**
-          * 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. Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
+          * 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.
          */
-        "size"?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+        "size"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
         /**
           * The theme determines the visual appearance of the component.
          */

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>