feat(badge): add recipe and tokens

core/api.txt

@@ -316,28 +316,79 @@ 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,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,shape,"crisp" | "rectangular" | "round" | "soft" | 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
-ion-badge,css-prop,--background,ios
-ion-badge,css-prop,--background,md
-ion-badge,css-prop,--color,ionic
-ion-badge,css-prop,--color,ios
-ion-badge,css-prop,--color,md
-ion-badge,css-prop,--padding-bottom,ionic
-ion-badge,css-prop,--padding-bottom,ios
-ion-badge,css-prop,--padding-bottom,md
-ion-badge,css-prop,--padding-end,ionic
-ion-badge,css-prop,--padding-end,ios
-ion-badge,css-prop,--padding-end,md
-ion-badge,css-prop,--padding-start,ionic
-ion-badge,css-prop,--padding-start,ios
-ion-badge,css-prop,--padding-start,md
-ion-badge,css-prop,--padding-top,ionic
-ion-badge,css-prop,--padding-top,ios
-ion-badge,css-prop,--padding-top,md
+ion-badge,css-prop,--ion-badge-font-family
+ion-badge,css-prop,--ion-badge-hue-bold-default-background
+ion-badge,css-prop,--ion-badge-hue-bold-default-color
+ion-badge,css-prop,--ion-badge-hue-bold-semantic-default-background
+ion-badge,css-prop,--ion-badge-hue-bold-semantic-default-color
+ion-badge,css-prop,--ion-badge-hue-subtle-default-background
+ion-badge,css-prop,--ion-badge-hue-subtle-default-color
+ion-badge,css-prop,--ion-badge-hue-subtle-semantic-default-background
+ion-badge,css-prop,--ion-badge-hue-subtle-semantic-default-color
+ion-badge,css-prop,--ion-badge-shape-crisp-border-radius
+ion-badge,css-prop,--ion-badge-shape-rectangular-border-radius
+ion-badge,css-prop,--ion-badge-shape-round-border-radius
+ion-badge,css-prop,--ion-badge-shape-soft-border-radius
+ion-badge,css-prop,--ion-badge-size-large-content-font-size
+ion-badge,css-prop,--ion-badge-size-large-content-font-weight
+ion-badge,css-prop,--ion-badge-size-large-content-height
+ion-badge,css-prop,--ion-badge-size-large-content-icon-height
+ion-badge,css-prop,--ion-badge-size-large-content-icon-width
+ion-badge,css-prop,--ion-badge-size-large-content-letter-spacing
+ion-badge,css-prop,--ion-badge-size-large-content-line-height
+ion-badge,css-prop,--ion-badge-size-large-content-min-height
+ion-badge,css-prop,--ion-badge-size-large-content-min-width
+ion-badge,css-prop,--ion-badge-size-large-content-padding-bottom
+ion-badge,css-prop,--ion-badge-size-large-content-padding-end
+ion-badge,css-prop,--ion-badge-size-large-content-padding-start
+ion-badge,css-prop,--ion-badge-size-large-content-padding-top
+ion-badge,css-prop,--ion-badge-size-large-dot-height
+ion-badge,css-prop,--ion-badge-size-large-dot-min-width
+ion-badge,css-prop,--ion-badge-size-large-dot-padding-bottom
+ion-badge,css-prop,--ion-badge-size-large-dot-padding-end
+ion-badge,css-prop,--ion-badge-size-large-dot-padding-start
+ion-badge,css-prop,--ion-badge-size-large-dot-padding-top
+ion-badge,css-prop,--ion-badge-size-medium-content-font-size
+ion-badge,css-prop,--ion-badge-size-medium-content-font-weight
+ion-badge,css-prop,--ion-badge-size-medium-content-height
+ion-badge,css-prop,--ion-badge-size-medium-content-icon-height
+ion-badge,css-prop,--ion-badge-size-medium-content-icon-width
+ion-badge,css-prop,--ion-badge-size-medium-content-letter-spacing
+ion-badge,css-prop,--ion-badge-size-medium-content-line-height
+ion-badge,css-prop,--ion-badge-size-medium-content-min-height
+ion-badge,css-prop,--ion-badge-size-medium-content-min-width
+ion-badge,css-prop,--ion-badge-size-medium-content-padding-bottom
+ion-badge,css-prop,--ion-badge-size-medium-content-padding-end
+ion-badge,css-prop,--ion-badge-size-medium-content-padding-start
+ion-badge,css-prop,--ion-badge-size-medium-content-padding-top
+ion-badge,css-prop,--ion-badge-size-medium-dot-height
+ion-badge,css-prop,--ion-badge-size-medium-dot-min-width
+ion-badge,css-prop,--ion-badge-size-medium-dot-padding-bottom
+ion-badge,css-prop,--ion-badge-size-medium-dot-padding-end
+ion-badge,css-prop,--ion-badge-size-medium-dot-padding-start
+ion-badge,css-prop,--ion-badge-size-medium-dot-padding-top
+ion-badge,css-prop,--ion-badge-size-small-content-font-size
+ion-badge,css-prop,--ion-badge-size-small-content-font-weight
+ion-badge,css-prop,--ion-badge-size-small-content-height
+ion-badge,css-prop,--ion-badge-size-small-content-icon-height
+ion-badge,css-prop,--ion-badge-size-small-content-icon-width
+ion-badge,css-prop,--ion-badge-size-small-content-letter-spacing
+ion-badge,css-prop,--ion-badge-size-small-content-line-height
+ion-badge,css-prop,--ion-badge-size-small-content-min-height
+ion-badge,css-prop,--ion-badge-size-small-content-min-width
+ion-badge,css-prop,--ion-badge-size-small-content-padding-bottom
+ion-badge,css-prop,--ion-badge-size-small-content-padding-end
+ion-badge,css-prop,--ion-badge-size-small-content-padding-start
+ion-badge,css-prop,--ion-badge-size-small-content-padding-top
+ion-badge,css-prop,--ion-badge-size-small-dot-height
+ion-badge,css-prop,--ion-badge-size-small-dot-min-width
+ion-badge,css-prop,--ion-badge-size-small-dot-padding-bottom
+ion-badge,css-prop,--ion-badge-size-small-dot-padding-end
+ion-badge,css-prop,--ion-badge-size-small-dot-padding-start
+ion-badge,css-prop,--ion-badge-size-small-dot-padding-top
 
 ion-breadcrumb,shadow
 ion-breadcrumb,prop,active,boolean,false,false,false

core/src/components.d.ts

@@ -11,6 +11,7 @@ import { ActionSheetButton } from "./components/action-sheet/action-sheet-interf
 import { OverlayEventDetail } from "./utils/overlays-interface";
 import { IonicSafeString } from "./utils/sanitization";
 import { AlertButton, AlertInput } from "./components/alert/alert-interface";
+import { IonBadgeHue, IonBadgeShape, IonBadgeSize, IonBadgeVerticalPosition } from "./components/badge/badge.interfaces";
 import { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./components/router/utils/interface";
 import { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
@@ -52,6 +53,7 @@ export { ActionSheetButton } from "./components/action-sheet/action-sheet-interf
 export { OverlayEventDetail } from "./utils/overlays-interface";
 export { IonicSafeString } from "./utils/sanitization";
 export { AlertButton, AlertInput } from "./components/alert/alert-interface";
+export { IonBadgeHue, IonBadgeShape, IonBadgeSize, IonBadgeVerticalPosition } from "./components/badge/badge.interfaces";
 export { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./components/router/utils/interface";
 export { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
@@ -471,29 +473,25 @@ export namespace Components {
          */
         "color"?: Color;
         /**
-          * Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for a badge with muted, subtle colors.  Only applies to the `ionic` theme.
+          * Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for a badge with muted, subtle colors.  Defaults to `"bold"` if both the hue property and theme config are unset.
          */
-        "hue"?: 'bold' | 'subtle';
+        "hue"?: IonBadgeHue;
         /**
           * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
-          * Set to `"rectangular"` for non-rounded corners. 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.
+          * Set to `"crisp"` for a badge with even slightly rounded corners, `"soft"` for a badge with slightly rounded corners, `"round"` for a badge with fully rounded corners, or `"rectangular"` for a badge without rounded corners.  Defaults to `"soft"` if both the shape property and theme config are unset.
          */
-        "shape"?: 'soft' | 'round | rectangular';
+        "shape"?: IonBadgeShape;
         /**
-          * 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.
+          * Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a larger size.  Defaults to `"small"` if both the size property and theme config are unset.
          */
-        "size"?: 'small' | 'medium' | 'large';
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
+        "size"?: IonBadgeSize;
         /**
           * Set to `"top"` to position the badge on top right absolute position of the parent element. Set to `"bottom"` to position the badge on bottom right absolute position of the parent element.
          */
-        "vertical"?: 'top' | 'bottom';
+        "vertical"?: IonBadgeVerticalPosition;
     }
     interface IonBreadcrumb {
         /**
@@ -900,7 +898,7 @@ export namespace Components {
          */
         "shape"?: IonChipShape;
         /**
-          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"` if both the size property and theme config are unset.
+          * Set to `"small"` for a chip with less height and padding, or `"large"` for a chip with more height and padding.  Defaults to `"large"` if both the size property and theme config are unset.
          */
         "size"?: IonChipSize;
     }
@@ -6398,29 +6396,25 @@ declare namespace LocalJSX {
          */
         "color"?: Color;
         /**
-          * Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for a badge with muted, subtle colors.  Only applies to the `ionic` theme.
+          * Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for a badge with muted, subtle colors.  Defaults to `"bold"` if both the hue property and theme config are unset.
          */
-        "hue"?: 'bold' | 'subtle';
+        "hue"?: IonBadgeHue;
         /**
           * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
-          * Set to `"rectangular"` for non-rounded corners. 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.
+          * Set to `"crisp"` for a badge with even slightly rounded corners, `"soft"` for a badge with slightly rounded corners, `"round"` for a badge with fully rounded corners, or `"rectangular"` for a badge without rounded corners.  Defaults to `"soft"` if both the shape property and theme config are unset.
          */
-        "shape"?: 'soft' | 'round | rectangular';
+        "shape"?: IonBadgeShape;
         /**
-          * 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.
+          * Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a larger size.  Defaults to `"small"` if both the size property and theme config are unset.
          */
-        "size"?: 'small' | 'medium' | 'large';
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
+        "size"?: IonBadgeSize;
         /**
           * Set to `"top"` to position the badge on top right absolute position of the parent element. Set to `"bottom"` to position the badge on bottom right absolute position of the parent element.
          */
-        "vertical"?: 'top' | 'bottom';
+        "vertical"?: IonBadgeVerticalPosition;
     }
     interface IonBreadcrumb {
         /**
@@ -6862,7 +6856,7 @@ declare namespace LocalJSX {
          */
         "shape"?: IonChipShape;
         /**
-          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"` if both the size property and theme config are unset.
+          * Set to `"small"` for a chip with less height and padding, or `"large"` for a chip with more height and padding.  Defaults to `"large"` if both the size property and theme config are unset.
          */
         "size"?: IonChipSize;
     }

core/src/components/avatar/avatar.ionic.scss

@@ -169,79 +169,6 @@
   height: globals.$ion-scale-800;
 }
 
-// Avatar Badge Empty (hint)
-// --------------------------------------------------
-
-:host ::slotted(ion-badge.badge-vertical-top:empty) {
-  @include globals.transform(translate(globals.$ion-scale-050, calc(globals.$ion-scale-050 * -1)));
-}
-
-:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:empty) {
-  @include globals.transform(translate(globals.$ion-scale-100, calc(globals.$ion-scale-100 * -1)));
-}
-
-:host ::slotted(ion-badge.badge-vertical-bottom:empty) {
-  @include globals.transform(translate(0, globals.$ion-scale-100));
-}
-
-:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:empty) {
-  @include globals.transform(translate(globals.$ion-scale-100, globals.$ion-scale-100));
-}
-
-// Avatar Badge Bottom (hint)
-// --------------------------------------------------
-
-:host ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
-  @include globals.transform(translate(50%, 50%));
-}
-
-:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
-  @include globals.position(null, globals.$ion-scale-100, globals.$ion-scale-100, null);
-  @include globals.transform(translate(100%, 100%));
-}
-
-:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
-  @include globals.position(null, calc(globals.$ion-scale-050 * -1), calc(globals.$ion-scale-050 * -1), null);
-}
-
-:host(.avatar-small) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),
-:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),
-:host(.avatar-large) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
-  @include globals.position(null, globals.$ion-scale-050, globals.$ion-scale-050, null);
-}
-
-:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
-  @include globals.position(null, globals.$ion-scale-150, globals.$ion-scale-150, null);
-}
-
-// Avatar Badge Top (hint)
-// --------------------------------------------------
-
-:host ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
-  @include globals.transform(translate(50%, -50%));
-}
-
-:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
-  @include globals.position(globals.$ion-scale-050, 0, null, null);
-}
-
-:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
-  @include globals.position(globals.$ion-scale-100, calc(globals.$ion-scale-050 * -1), null, null);
-}
-
-:host(.avatar-small) ::slotted(ion-badge.badge-vertical-top:not(:empty)),
-:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
-  @include globals.position(globals.$ion-scale-150, 0, null, null);
-}
-
-:host(.avatar-large) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
-  @include globals.position(globals.$ion-scale-150, globals.$ion-scale-050, null, null);
-}
-
-:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
-  @include globals.position(globals.$ion-scale-150, globals.$ion-scale-150, null, null);
-}
-
 // Avatar Disabled
 // --------------------------------------------------
 :host(.avatar-disabled)::after {

core/src/components/avatar/avatar.md.scss

@@ -11,22 +11,3 @@
   width: $avatar-md-width;
   height: $avatar-md-height;
 }
-
-// Avatar Empty Badge (hint)
-// --------------------------------------------------
-
-::slotted(ion-badge.badge-vertical-top:empty) {
-  @include globals.transform(translate(-50%, 50%));
-}
-
-::slotted(ion-badge.badge-vertical-bottom:empty) {
-  @include globals.transform(translateX(-100%));
-}
-
-:host ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
-  @include globals.transform(translate(0, 100%));
-}
-
-:host ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
-  @include globals.transform(translate(0, -100%));
-}

core/src/components/avatar/avatar.tsx

@@ -1,5 +1,6 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h } from '@stencil/core';
+import { createBadgeManager } from '@utils/badge-position';
 
 import { getIonTheme } from '../../global/ionic-global';
 
@@ -19,6 +20,12 @@ import { getIonTheme } from '../../global/ionic-global';
 export class Avatar implements ComponentInterface {
   @Element() el!: HTMLElement;
 
+  private hasLoaded = false;
+
+  private badgeManager = createBadgeManager(this.el, () => ({
+    target: this.el,
+  }));
+
   /**
    * Set to `"xxsmall"` for the smallest size.
    * Set to `"xsmall"` for a very small size.
@@ -45,6 +52,21 @@ export class Avatar implements ComponentInterface {
    */
   @Prop() disabled = false;
 
+  connectedCallback() {
+    if (this.hasLoaded) {
+      this.badgeManager.init();
+    }
+  }
+
+  componentDidLoad() {
+    this.hasLoaded = true;
+    this.badgeManager.init();
+  }
+
+  disconnectedCallback() {
+    this.badgeManager.destroy();
+  }
+
   get hasImage() {
     return !!this.el.querySelector('ion-img') || !!this.el.querySelector('img');
   }
@@ -53,15 +75,13 @@ export class Avatar implements ComponentInterface {
     return !!this.el.querySelector('ion-icon');
   }
 
+  private onSlotChanged = () => {
+    this.badgeManager.onSlotChanged();
+  };
+
   private getSize(): string | undefined {
-    const theme = getIonTheme(this);
     const { size } = this;
 
-    // TODO(ROU-10752): Remove theme check when sizes are defined for all themes.
-    if (theme !== 'ionic') {
-      return undefined;
-    }
-
     if (size === undefined) {
       return 'medium';
     }
@@ -102,7 +122,7 @@ export class Avatar implements ComponentInterface {
           [`avatar-disabled`]: disabled,
         }}
       >
-        <slot></slot>
+        <slot onSlotchange={this.onSlotChanged}></slot>
       </Host>
     );
   }