feat(badge): add round to the ionic theme (#29574)

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,shape,"soft" | undefined,undefined,false,false
+ion-badge,prop,shape,"round" | "soft" | 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

core/src/components.d.ts

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

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

@@ -32,6 +32,10 @@
   @include border-radius(globals.$ionic-border-radius-100);
 }
 
+:host(.badge-round) {
+  @include border-radius(globals.$ionic-border-radius-full);
+}
+
 // Badge Sizes
 // --------------------------------------------------
 

core/src/components/badge/badge.tsx

@@ -28,10 +28,11 @@ export class Badge implements ComponentInterface {
 
   /**
    * 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.
    */
-  @Prop() shape?: 'soft';
+  @Prop() shape?: 'soft' | 'round';
 
   /**
    * Set to `"xxsmall"` for the smallest badge.

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

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

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

@@ -34,6 +34,11 @@
             <ion-badge slot="end" shape="soft">1</ion-badge>
             <ion-badge slot="end" shape="soft">99+</ion-badge>
           </ion-item>
+          <ion-item>
+            <ion-label>Round</ion-label>
+            <ion-badge slot="end" shape="round">1</ion-badge>
+            <ion-badge slot="end" shape="round">99+</ion-badge>
+          </ion-item>
         </ion-list>
       </ion-content>
     </ion-app>