test(badge): match design screenshots (#29572)

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

@@ -61,7 +61,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
     test('should render small badges', async ({ page }) => {
       await page.setContent(
         `
-        <ion-badge size="small">00</ion-badge>
+        <ion-badge size="small">1</ion-badge>
       `,
         config
       );
@@ -71,10 +71,23 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
       await expect(badge).toHaveScreenshot(screenshot(`badge-size-small`));
     });
 
+    test('should render small badges with long text', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-badge size="small">99+</ion-badge>
+      `,
+        config
+      );
+
+      const badge = page.locator('ion-badge');
+
+      await expect(badge).toHaveScreenshot(screenshot(`badge-size-small-long-text`));
+    });
+
     test('should render medium badges', async ({ page }) => {
       await page.setContent(
         `
-        <ion-badge size="medium">00</ion-badge>
+        <ion-badge size="medium">1</ion-badge>
       `,
         config
       );
@@ -84,10 +97,23 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
       await expect(badge).toHaveScreenshot(screenshot(`badge-size-medium`));
     });
 
+    test('should render medium badges with long text', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-badge size="medium">99+</ion-badge>
+      `,
+        config
+      );
+
+      const badge = page.locator('ion-badge');
+
+      await expect(badge).toHaveScreenshot(screenshot(`badge-size-medium-long-text`));
+    });
+
     test('should render large badges', async ({ page }) => {
       await page.setContent(
         `
-        <ion-badge size="large">00</ion-badge>
+        <ion-badge size="large">1</ion-badge>
       `,
         config
       );
@@ -97,10 +123,23 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
       await expect(badge).toHaveScreenshot(screenshot(`badge-size-large`));
     });
 
+    test('should render large badges with long text', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-badge size="large">99+</ion-badge>
+      `,
+        config
+      );
+
+      const badge = page.locator('ion-badge');
+
+      await expect(badge).toHaveScreenshot(screenshot(`badge-size-large-long-text`));
+    });
+
     test('should render xlarge badges', async ({ page }) => {
       await page.setContent(
         `
-        <ion-badge size="xlarge">00</ion-badge>
+        <ion-badge size="xlarge">1</ion-badge>
       `,
         config
       );
@@ -109,5 +148,18 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
 
       await expect(badge).toHaveScreenshot(screenshot(`badge-size-xlarge`));
     });
+
+    test('should render xlarge badges with long text', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-badge size="xlarge">99+</ion-badge>
+      `,
+        config
+      );
+
+      const badge = page.locator('ion-badge');
+
+      await expect(badge).toHaveScreenshot(screenshot(`badge-size-xlarge-long-text`));
+    });
   });
 });

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

@@ -18,7 +18,7 @@
     <ion-app>
       <ion-header>
         <ion-toolbar>
-          <ion-title>Button - Size</ion-title>
+          <ion-title>Badge - Size</ion-title>
         </ion-toolbar>
       </ion-header>
 
@@ -26,7 +26,8 @@
         <ion-list>
           <ion-item>
             <ion-label>Default</ion-label>
-            <ion-badge slot="end">00</ion-badge>
+            <ion-badge slot="end">1</ion-badge>
+            <ion-badge slot="end">99+</ion-badge>
           </ion-item>
           <ion-item>
             <ion-label>XXSmall</ion-label>
@@ -40,19 +41,23 @@
           </ion-item>
           <ion-item>
             <ion-label>Small</ion-label>
-            <ion-badge slot="end" size="small">00</ion-badge>
+            <ion-badge slot="end" size="small">1</ion-badge>
+            <ion-badge slot="end" size="small">99+</ion-badge>
           </ion-item>
           <ion-item>
             <ion-label>Medium</ion-label>
-            <ion-badge slot="end" size="medium">00</ion-badge>
+            <ion-badge slot="end" size="medium">1</ion-badge>
+            <ion-badge slot="end" size="medium">99+</ion-badge>
           </ion-item>
           <ion-item>
             <ion-label>Large</ion-label>
-            <ion-badge slot="end" size="large">00</ion-badge>
+            <ion-badge slot="end" size="large">1</ion-badge>
+            <ion-badge slot="end" size="large">99+</ion-badge>
           </ion-item>
           <ion-item>
             <ion-label>XLarge</ion-label>
-            <ion-badge slot="end" size="xlarge">00</ion-badge>
+            <ion-badge slot="end" size="xlarge">1</ion-badge>
+            <ion-badge slot="end" size="xlarge">99+</ion-badge>
           </ion-item>
         </ion-list>
       </ion-content>