feat(badge): add support for number and icons with vertical prop

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

@@ -153,23 +153,77 @@
   height: globals.$ion-scale-1000;
 }
 
-// Avatar Empty Badge (hint)
+// Avatar Badge Empty (hint)
 // --------------------------------------------------
 
 :host ::slotted(ion-badge.badge-vertical-top:empty) {
-  transform: translate(globals.$ion-scale-050, calc(globals.$ion-scale-050 * -1));
+  @include globals.transform(translate(globals.$ion-scale-050, calc(globals.$ion-scale-050 * -1)));
 }
 
 :host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:empty) {
-  transform: translate(globals.$ion-scale-100, calc(globals.$ion-scale-100 * -1));
+  @include globals.transform(translate(globals.$ion-scale-100, calc(globals.$ion-scale-100 * -1)));
 }
 
 :host ::slotted(ion-badge.badge-vertical-bottom:empty) {
-  transform: translate(0, globals.$ion-scale-100);
+  @include globals.transform(translate(0, globals.$ion-scale-100));
 }
 
 :host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:empty) {
-  transform: translate(globals.$ion-scale-100, calc(globals.$ion-scale-100));
+  @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

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

@@ -1,3 +1,4 @@
+@use "../../themes/native/native.globals.md" as globals;
 @import "./avatar.common";
 @import "./avatar.md.vars";
 
@@ -15,9 +16,17 @@
 // --------------------------------------------------
 
 ::slotted(ion-badge.badge-vertical-top:empty) {
-  transform: translate(-50%, 50%);
+  @include globals.transform(translate(-50%, 50%));
 }
 
 ::slotted(ion-badge.badge-vertical-bottom:empty) {
   transform: translateX(-100%);
 }
+
+:host ::slotted(ion-badge.badge-vertical-top[vertical]:not(:empty)) {
+  @include globals.transform(translate(0, 100%));
+}
+
+:host ::slotted(ion-badge.badge-vertical-bottom[vertical]:not(:empty)) {
+  @include globals.transform(translate(0, -100%));
+}

core/src/components/badge/badge.common.scss

@@ -48,18 +48,18 @@
   color: #{color.current-color(contrast)};
 }
 
-// Badge Empty (hint)
+// Badge (hint)
 // --------------------------------------------------
 
 :host([vertical]:not(.in-tab-button)) {
   @include position(null, 0, null, null);
   position: absolute;
 }
 
-:host(:not(.in-tab-button):empty.badge-vertical-top) {
+:host(:not(.in-tab-button)[vertical].badge-vertical-top) {
   top: 0;
 }
 
-:host(:not(.in-tab-button):empty.badge-vertical-bottom) {
+:host(:not(.in-tab-button)[vertical].badge-vertical-bottom) {
   bottom: 0;
 }

core/src/components/badge/badge.common.vars.scss

@@ -26,3 +26,9 @@ $badge-font-size: dynamic-font($badge-baseline-font-size);
 
 /// @prop - Font weight of the badge
 $badge-font-weight: bold;
+
+/// @prop - Font size of the badge hint
+$badge-hint-baseline-font-size: 8px;
+
+/// @prop - Font size of the badge hint
+$badge-hint-font-size: dynamic-font($badge-hint-baseline-font-size);

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

@@ -146,15 +146,22 @@
   height: globals.$ion-scale-1000;
 }
 
-// Badge Empty
+// Badge (hint)
 // --------------------------------------------------
 
 :host(:empty) {
   --padding-start: 0;
   --padding-end: 0;
 }
 
-// Badge Sizes Empty
+:host([vertical]:not(:empty)) {
+  --padding-start: #{globals.$ion-scale-100};
+  --padding-end: #{globals.$ion-scale-100};
+  --padding-top: #{globals.$ion-scale-100};
+  --padding-bottom: #{globals.$ion-scale-100};
+}
+
+// Badge (hint) Sizes
 // --------------------------------------------------
 
 /* sm */
@@ -182,8 +189,9 @@
   position: relative;
 }
 
-// Badge Icon when Inside Tab Button
-:host([vertical].in-tab-button) ::slotted(ion-icon) {
+// Icon Inside Badge Hint
+// --------------------------------------------------
+:host([vertical]) ::slotted(ion-icon) {
   @include globals.position(50%, null, null, 50%);
 
   position: absolute;

core/src/components/badge/badge.native.scss

@@ -13,6 +13,7 @@
 }
 
 // TODO(ROU-10747): Review size styles when sizes are defined for native themes.
+:host([vertical]:not(.in-tab-button)),
 :host(:empty) {
   --padding-start: 0;
   --padding-end: 0;
@@ -23,4 +24,8 @@
 
   width: $badge-min-width;
   height: $badge-min-width;
+
+  font-size: $badge-hint-font-size;
+
+  line-height: 10px;
 }

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

@@ -104,6 +104,136 @@
               <ion-badge color="danger" size="large" vertical="bottom"></ion-badge>
             </ion-avatar>
           </div>
+
+          <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
+            <ion-avatar size="xxsmall">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="xxsmall" vertical="top">1</ion-badge>
+            </ion-avatar>
+            <ion-avatar size="xsmall">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="xxsmall" vertical="top">1</ion-badge>
+            </ion-avatar>
+            <ion-avatar size="small">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="xxsmall" vertical="top">1</ion-badge>
+            </ion-avatar>
+            <ion-avatar size="medium">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="xxsmall" vertical="top">1</ion-badge>
+            </ion-avatar>
+            <ion-avatar size="large">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="xxsmall" vertical="top">1</ion-badge>
+            </ion-avatar>
+            <ion-avatar size="xlarge">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="xxsmall" vertical="top">1</ion-badge>
+            </ion-avatar>
+          </div>
+          <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
+            <ion-avatar size="xxsmall">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="xxsmall" vertical="bottom">1</ion-badge>
+            </ion-avatar>
+            <ion-avatar size="xsmall">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="xxsmall" vertical="bottom">1</ion-badge>
+            </ion-avatar>
+            <ion-avatar size="small">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="xxsmall" vertical="bottom">1</ion-badge>
+            </ion-avatar>
+            <ion-avatar size="medium">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="xxsmall" vertical="bottom">1</ion-badge>
+            </ion-avatar>
+            <ion-avatar size="large">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="xxsmall" vertical="bottom">1</ion-badge>
+            </ion-avatar>
+            <ion-avatar size="xlarge">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="xxsmall" vertical="bottom">1</ion-badge>
+            </ion-avatar>
+          </div>
+
+          <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
+            <ion-avatar size="xxsmall">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="xxsmall" vertical="top">
+                <ion-icon icon="star"></ion-icon>
+              </ion-badge>
+            </ion-avatar>
+            <ion-avatar size="xsmall">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="xxsmall" vertical="top">
+                <ion-icon icon="star"></ion-icon>
+              </ion-badge>
+            </ion-avatar>
+            <ion-avatar size="small">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="xxsmall" vertical="top">
+                <ion-icon icon="star"></ion-icon>
+              </ion-badge>
+            </ion-avatar>
+            <ion-avatar size="medium">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="xxsmall" vertical="top">
+                <ion-icon icon="star"></ion-icon>
+              </ion-badge>
+            </ion-avatar>
+            <ion-avatar size="large">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="xxsmall" vertical="top">
+                <ion-icon icon="star"></ion-icon>
+              </ion-badge>
+            </ion-avatar>
+            <ion-avatar size="xlarge">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="xxsmall" vertical="top">
+                <ion-icon icon="star"></ion-icon>
+              </ion-badge>
+            </ion-avatar>
+          </div>
+          <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
+            <ion-avatar size="xxsmall">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="xxsmall" vertical="bottom">
+                <ion-icon icon="star"></ion-icon>
+              </ion-badge>
+            </ion-avatar>
+            <ion-avatar size="xsmall">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="xxsmall" vertical="bottom">
+                <ion-icon icon="star"></ion-icon>
+              </ion-badge>
+            </ion-avatar>
+            <ion-avatar size="small">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="xxsmall" vertical="bottom">
+                <ion-icon icon="star"></ion-icon>
+              </ion-badge>
+            </ion-avatar>
+            <ion-avatar size="medium">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="xxsmall" vertical="bottom">
+                <ion-icon icon="star"></ion-icon>
+              </ion-badge>
+            </ion-avatar>
+            <ion-avatar size="large">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="xxsmall" vertical="bottom">
+                <ion-icon icon="star"></ion-icon>
+              </ion-badge>
+            </ion-avatar>
+            <ion-avatar size="xlarge">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="xxsmall" vertical="bottom">
+                <ion-icon icon="star"></ion-icon>
+              </ion-badge>
+            </ion-avatar>
+          </div>
         </ion-list>
 
         <ion-list id="tab-button">