feat(badge): add medium size for ionic theme (#29528)

core/api.txt

@@ -310,7 +310,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,"small" | undefined,undefined,false,false
+ion-badge,prop,size,"medium" | "small" | 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

@@ -410,9 +410,9 @@ export namespace Components {
          */
         "mode"?: "ios" | "md";
         /**
-          * Set to `"small"` for less height and width. Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"small"` for less height and width. Set to "medium" for slightly larger dimensions. Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
          */
-        "size"?: 'small';
+        "size"?: 'small' | 'medium';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -5642,9 +5642,9 @@ declare namespace LocalJSX {
          */
         "mode"?: "ios" | "md";
         /**
-          * Set to `"small"` for less height and width. Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"small"` for less height and width. Set to "medium" for slightly larger dimensions. Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
          */
-        "size"?: 'small';
+        "size"?: 'small' | 'medium';
         /**
           * The theme determines the visual appearance of the component.
          */

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

@@ -30,3 +30,13 @@
 
   line-height: globals.$ionic-line-height-600;
 }
+
+/* Medium Badge */
+:host(.badge-medium) {
+  min-width: globals.$ionic-scale-1000;
+  height: globals.$ionic-scale-1000;
+
+  font-size: globals.$ionic-font-size-450;
+
+  line-height: globals.$ionic-line-height-700;
+}

core/src/components/badge/badge.tsx

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

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

@@ -18,5 +18,18 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
 
       await expect(badge).toHaveScreenshot(screenshot(`badge-size-small`));
     });
+
+    test('should render medium badges', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-badge size="medium">00</ion-badge>
+      `,
+        config
+      );
+
+      const badge = page.locator('ion-badge');
+
+      await expect(badge).toHaveScreenshot(screenshot(`badge-size-medium`));
+    });
   });
 });

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

@@ -32,6 +32,10 @@
             <ion-label>Small Badge</ion-label>
             <ion-badge slot="end" size="small">00</ion-badge>
           </ion-item>
+          <ion-item>
+            <ion-label>Medium Badge</ion-label>
+            <ion-badge slot="end" size="medium">00</ion-badge>
+          </ion-item>
         </ion-list>
       </ion-content>
     </ion-app>