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

Issue number: resolves internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
The badge presents the `xxsmall`, `xsmall`, and `xlarge`. The user
experience design expects only the `small` and `medium` sizes for badges
with content (number or icon), and `small`, `medium`, and `large` sizes
for empty badges.

## What is the new behavior?
- The badge should support only the sizes mentioned above.
- The `small` and `medium` sizes must be adjusted to the new
requirements for badges with content.
- The size property descriptions must inform that the `large` size is
only available for empty badges.

## Does this introduce a breaking change?

- [x] Yes
- [ ] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->

---------

Co-authored-by: ionitron <[email protected]>

Author: OS-giulianasilva

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

@@ -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,90 +71,37 @@
 // Badge Sizes
 // --------------------------------------------------
 
-/* 2-Extra Small Badge */
-:host(.badge-xxsmall) {
+/* Small Badge */
+:host(.badge-small) {
   --padding-start: #{globals.$ion-space-050};
   --padding-end: #{globals.$ion-space-050};
 
   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) {
-  --padding-start: #{globals.$ion-space-100};
-  --padding-end: #{globals.$ion-space-100};
-
-  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) {
-  width: globals.$ion-scale-400;
-  height: globals.$ion-scale-400;
-}
-
-/* Small Badge */
-:host(.badge-small) {
+/* Medium Badge */
+/* Large size defaults to the medium size to avoid styles breakage */
+:host(.badge-medium),
+:host(.badge-large) {
   --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;
+  min-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-medium) ::slotted(ion-icon),
 :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;
+  width: globals.$ion-scale-400;
+  height: globals.$ion-scale-400;
 }
 
 // Badge (hint)
@@ -215,15 +160,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.