feat(badge): add rectangular to ionic theme (#29576)

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

core/src/components.d.ts

@@ -418,7 +418,7 @@ export namespace Components {
          */
         "mode"?: "ios" | "md";
         /**
-          * Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"rectangular"` for non-rounded corners. Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
          */
         "shape"?: 'soft' | 'round';
         /**
@@ -5666,7 +5666,7 @@ declare namespace LocalJSX {
          */
         "mode"?: "ios" | "md";
         /**
-          * Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"rectangular"` for non-rounded corners. Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
          */
         "shape"?: 'soft' | 'round';
         /**

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

@@ -32,10 +32,16 @@
   @include border-radius(globals.$ionic-border-radius-100);
 }
 
+/* Round Badge */
 :host(.badge-round) {
   @include border-radius(globals.$ionic-border-radius-full);
 }
 
+/* Rectangular Badge */
+:host(.badge-rectangular) {
+  @include border-radius(globals.$ionic-border-radius-0);
+}
+
 // Badge Sizes
 // --------------------------------------------------
 

core/src/components/badge/badge.tsx

@@ -27,6 +27,7 @@ export class Badge implements ComponentInterface {
   @Prop({ reflect: true }) color?: Color;
 
   /**
+   * Set to `"rectangular"` for non-rounded corners.
    * Set to `"soft"` for slightly rounded corners.
    * Set to `"round"` for fully rounded corners.
    *

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

@@ -99,5 +99,31 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
 
       await expect(badge).toHaveScreenshot(screenshot(`badge-shape-round-long-text`));
     });
+
+    test('should render rectangular badges', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-badge shape="rectangular">1</ion-badge>
+      `,
+        config
+      );
+
+      const badge = page.locator('ion-badge');
+
+      await expect(badge).toHaveScreenshot(screenshot(`badge-shape-rectangular`));
+    });
+
+    test('should render rectangular badges with long text', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-badge shape="rectangular">99+</ion-badge>
+      `,
+        config
+      );
+
+      const badge = page.locator('ion-badge');
+
+      await expect(badge).toHaveScreenshot(screenshot(`badge-shape-rectangular-long-text`));
+    });
   });
 });

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

@@ -18,7 +18,7 @@
     <ion-app>
       <ion-header>
         <ion-toolbar>
-          <ion-title>Button - Shape</ion-title>
+          <ion-title>Badge - Shape</ion-title>
         </ion-toolbar>
       </ion-header>
 
@@ -26,7 +26,7 @@
         <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>
@@ -39,6 +39,11 @@
             <ion-badge slot="end" shape="round">1</ion-badge>
             <ion-badge slot="end" shape="round">99+</ion-badge>
           </ion-item>
+          <ion-item>
+            <ion-label>Rectangular</ion-label>
+            <ion-badge slot="end" shape="rectangular">1</ion-badge>
+            <ion-badge slot="end" shape="rectangular">99+</ion-badge>
+          </ion-item>
         </ion-list>
       </ion-content>
     </ion-app>