feat(badge): add xlarge size for ionic theme (#29530)

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,"large" | "medium" | "small" | undefined,undefined,false,false
+ion-badge,prop,size,"large" | "medium" | "small" | "xlarge" | 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. Set to "medium" for slightly larger dimensions. Set to "large" for even greater 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. 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.
          */
-        "size"?: 'small' | 'medium' | 'large';
+        "size"?: 'small' | 'medium' | 'large' | 'xlarge';
         /**
           * 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. Set to "medium" for slightly larger dimensions. Set to "large" for even greater 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. 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.
          */
-        "size"?: 'small' | 'medium' | 'large';
+        "size"?: 'small' | 'medium' | 'large' | 'xlarge';
         /**
           * The theme determines the visual appearance of the component.
          */

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

@@ -53,3 +53,16 @@
 
   line-height: globals.$ionic-line-height-700;
 }
+
+/* Extra Large Badge */
+:host(.badge-xlarge) {
+  --padding-start: #{globals.$ionic-space-200};
+  --padding-end: #{globals.$ionic-space-200};
+
+  min-width: globals.$ionic-scale-1400;
+  height: globals.$ionic-scale-1400;
+
+  font-size: globals.$ionic-font-size-550;
+
+  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 "medium" for slightly larger dimensions. Set to "large" for even greater 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.
    */
-  @Prop() size?: 'small' | 'medium' | 'large';
+  @Prop() size?: 'small' | 'medium' | 'large' | 'xlarge';
 
   private getSize(): string | undefined {
     const theme = getIonTheme(this);

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

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

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

@@ -25,21 +25,25 @@
       <ion-content class="ion-padding" id="content" no-bounce>
         <ion-list>
           <ion-item>
-            <ion-label>Default Badge</ion-label>
+            <ion-label>Default</ion-label>
             <ion-badge slot="end">00</ion-badge>
           </ion-item>
           <ion-item>
-            <ion-label>Small Badge</ion-label>
+            <ion-label>Small</ion-label>
             <ion-badge slot="end" size="small">00</ion-badge>
           </ion-item>
           <ion-item>
-            <ion-label>Medium Badge</ion-label>
+            <ion-label>Medium</ion-label>
             <ion-badge slot="end" size="medium">00</ion-badge>
           </ion-item>
           <ion-item>
-            <ion-label>Large Badge</ion-label>
+            <ion-label>Large</ion-label>
             <ion-badge slot="end" size="large">00</ion-badge>
           </ion-item>
+          <ion-item>
+            <ion-label>XLarge</ion-label>
+            <ion-badge slot="end" size="xlarge">00</ion-badge>
+          </ion-item>
         </ion-list>
       </ion-content>
     </ion-app>