feat(badge): remove xxsmall, xsmall and xlarge sizes

core/api.txt

@@ -317,7 +317,7 @@ ion-badge,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secon
 ion-badge,prop,hue,"bold" | "subtle" | undefined,undefined,false,false
 ion-badge,prop,mode,"ios" | "md",undefined,false,false
 ion-badge,prop,shape,"round | rectangular" | "soft" | undefined,undefined,false,false
-ion-badge,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall" | undefined,undefined,false,false
+ion-badge,prop,size,"large" | "medium" | "small" | undefined,undefined,false,false
 ion-badge,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-badge,prop,vertical,"bottom" | "top" | undefined,undefined,false,false
 ion-badge,css-prop,--background,ionic

core/src/components.d.ts

@@ -442,9 +442,9 @@ export namespace Components {
          */
         "shape"?: 'soft' | 'round | rectangular';
         /**
-          * 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.
+          * Set to `"small"` for a small badge. Set to `"medium"` for a medium badge. Set to `"large"` for a large badge, when it is empty (no text or icon).  Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
          */
-        "size"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+        "size"?: 'small' | 'medium' | 'large';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -5899,9 +5899,9 @@ declare namespace LocalJSX {
          */
         "shape"?: 'soft' | 'round | rectangular';
         /**
-          * 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.
+          * Set to `"small"` for a small badge. Set to `"medium"` for a medium badge. Set to `"large"` for a large badge, when it is empty (no text or icon).  Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
          */
-        "size"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+        "size"?: 'small' | 'medium' | 'large';
         /**
           * The theme determines the visual appearance of the component.
          */

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

@@ -5,8 +5,8 @@
 // --------------------------------------------------
 
 :host {
-  --padding-start: #{globals.$ion-space-200};
-  --padding-end: #{globals.$ion-space-200};
+  --padding-start: #{globals.$ion-space-050};
+  --padding-end: #{globals.$ion-space-050};
   --padding-top: #{globals.$ion-space-0};
   --padding-bottom: #{globals.$ion-space-0};
 
@@ -54,8 +54,6 @@
   @include globals.border-radius(globals.$ion-border-radius-200);
 }
 
-:host(.badge-xxsmall.badge-soft),
-:host(.badge-xsmall.badge-soft),
 :host(.badge-small.badge-soft) {
   @include globals.border-radius(globals.$ion-border-radius-100);
 }
@@ -73,92 +71,33 @@
 // Badge Sizes
 // --------------------------------------------------
 
-/* 2-Extra Small Badge */
-:host(.badge-xxsmall) {
-  --padding-start: #{globals.$ion-space-050};
-  --padding-end: #{globals.$ion-space-050};
-
+/* Small Badge */
+:host(.badge-small) {
   min-width: globals.$ion-scale-400;
   height: globals.$ion-scale-400;
-
-  font-size: globals.$ion-font-size-300;
-
-  line-height: globals.$ion-font-line-height-400;
 }
 
-:host(.badge-xxsmall) ::slotted(ion-icon) {
+:host(.badge-small) ::slotted(ion-icon) {
   width: globals.$ion-scale-300;
   height: globals.$ion-scale-300;
 }
 
-/* Extra Small Badge */
-:host(.badge-xsmall) {
+/* Medium Badge */
+:host(.badge-medium) {
   --padding-start: #{globals.$ion-space-100};
   --padding-end: #{globals.$ion-space-100};
 
+  @include globals.typography(globals.$ion-body-md-medium);
+
   min-width: globals.$ion-scale-600;
   height: globals.$ion-scale-600;
-
-  font-size: globals.$ion-font-size-350;
-
-  line-height: globals.$ion-font-line-height-600;
 }
 
-:host(.badge-xsmall) ::slotted(ion-icon) {
+:host(.badge-medium) ::slotted(ion-icon) {
   width: globals.$ion-scale-400;
   height: globals.$ion-scale-400;
 }
 
-/* Small Badge */
-:host(.badge-small) {
-  --padding-start: #{globals.$ion-space-100};
-  --padding-end: #{globals.$ion-space-100};
-
-  min-width: globals.$ion-scale-800;
-  height: globals.$ion-scale-800;
-}
-
-:host(.badge-small) ::slotted(ion-icon) {
-  width: globals.$ion-scale-500;
-  height: globals.$ion-scale-500;
-}
-
-/* Medium Badge */
-:host(.badge-medium) {
-  @include globals.typography(globals.$ion-body-md-medium);
-  min-width: globals.$ion-scale-1000;
-  height: globals.$ion-scale-1000;
-}
-
-:host(.badge-medium) ::slotted(ion-icon) {
-  width: globals.$ion-scale-600;
-  height: globals.$ion-scale-600;
-}
-
-/* Large Badge */
-:host(.badge-large) {
-  @include globals.typography(globals.$ion-body-lg-medium);
-  min-width: globals.$ion-scale-1200;
-  height: globals.$ion-scale-1200;
-}
-
-:host(.badge-large) ::slotted(ion-icon) {
-  width: globals.$ion-scale-800;
-  height: globals.$ion-scale-800;
-}
-
-/* Extra Large Badge */
-:host(.badge-xlarge) {
-  @include globals.typography(globals.$ion-heading-h4-medium);
-  min-width: globals.$ion-scale-1400;
-  height: globals.$ion-scale-1400;
-}
-
-:host(.badge-xlarge) ::slotted(ion-icon) {
-  width: globals.$ion-scale-1000;
-  height: globals.$ion-scale-1000;
-}
-
 // Badge (hint)
 // --------------------------------------------------
 
@@ -215,15 +154,12 @@
 // Badge in Button
 // --------------------------------------------------
 
-:host([vertical]:not(.in-tab-button).in-button.badge-xxsmall),
-:host([vertical]:not(.in-tab-button).in-button.badge-xsmall),
 :host([vertical]:not(.in-tab-button).in-button.badge-small) {
   @include globals.position(null, calc(-1 * var(globals.$ion-space-050)));
 }
 
 :host([vertical]:not(.in-tab-button).in-button.badge-medium),
-:host([vertical]:not(.in-tab-button).in-button.badge-large),
-:host([vertical]:not(.in-tab-button).in-button.badge-xlarge) {
+:host([vertical]:not(.in-tab-button).in-button.badge-large) {
   @include globals.position(null, globals.$ion-space-050);
 }
 

core/src/components/badge/badge.tsx

@@ -46,16 +46,13 @@ export class Badge implements ComponentInterface {
   @Prop() shape?: 'soft' | 'round | rectangular';
 
   /**
-   * 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.
+   * Set to `"medium"` for a medium badge.
+   * Set to `"large"` for a large badge, when it is empty (no text or icon).
    *
    * Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
    */
-  @Prop() size?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+  @Prop() size?: 'small' | 'medium' | 'large';
 
   /**
    * Set to `"top"` to position the badge on top right absolute position of the parent element.