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

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

@@ -153,7 +153,7 @@
   height: globals.$ion-scale-1000;
 }
 
-// Avatar Empty Badge (hint)
+// Avatar Badge Empty (hint)
 // --------------------------------------------------
 
 :host ::slotted(ion-badge.badge-vertical-top:empty) {
@@ -169,7 +169,62 @@
 }
 
 :host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:empty) {
-  transform: translate(globals.$ion-scale-100, calc(globals.$ion-scale-100));
+  transform: translate(globals.$ion-scale-100, globals.$ion-scale-100);
+}
+
+// Avatar Badge Bottom (hint)
+// --------------------------------------------------
+
+:host ::slotted(ion-badge.badge-vertical-bottom[vertical]:not(:empty)) {
+  transform: translate(50%, 50%);
+}
+
+:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom[vertical]:not(:empty)) {
+  @include globals.position(null, globals.$ion-scale-100, globals.$ion-scale-100, null);
+
+  transform: translate(100%, 100%);
+}
+
+:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-bottom[vertical]: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[vertical]:not(:empty)),
+:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-bottom[vertical]:not(:empty)),
+:host(.avatar-large) ::slotted(ion-badge.badge-vertical-bottom[vertical]:not(:empty)) {
+  @include globals.position(null, globals.$ion-scale-050, globals.$ion-scale-050, null);
+}
+
+:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-bottom[vertical]: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[vertical]:not(:empty)) {
+  transform: translate(50%, -50%);
+}
+
+:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top[vertical]:not(:empty)) {
+  @include globals.position(globals.$ion-scale-050, 0, null, null);
+}
+
+:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-top[vertical]: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[vertical]:not(:empty)),
+:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-top[vertical]:not(:empty)) {
+  @include globals.position(globals.$ion-scale-150, 0, null, null);
+}
+
+:host(.avatar-large) ::slotted(ion-badge.badge-vertical-top[vertical]:not(:empty)) {
+  @include globals.position(globals.$ion-scale-150, globals.$ion-scale-050, null, null);
+}
+
+:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-top[vertical]:not(:empty)) {
+  @include globals.position(globals.$ion-scale-150, globals.$ion-scale-150, null, null);
 }
 
 // Avatar Disabled

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

@@ -21,3 +21,11 @@
 ::slotted(ion-badge.badge-vertical-bottom:empty) {
   transform: translateX(-100%);
 }
+
+:host ::slotted(ion-badge.badge-vertical-top[vertical]:not(:empty)) {
+  transform: translate(0, 100%);
+}
+
+:host ::slotted(ion-badge.badge-vertical-bottom[vertical]:not(:empty)) {
+  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,14 +146,21 @@
   height: globals.$ion-scale-1000;
 }
 
-// Badge Empty
+// Badge Vertical Prop
 // --------------------------------------------------
 
 :host(:empty) {
   --padding-start: 0;
   --padding-end: 0;
 }
 
+: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 Sizes Empty
 // --------------------------------------------------
 
@@ -175,18 +182,33 @@
   height: globals.$ion-scale-400;
 }
 
+// Badge Sizes Not Empty With Vertical Prop
+// --------------------------------------------------
+
+:host(.badge-small[vertical]:not(:empty)),
+:host(.badge-medium[vertical]:not(:empty)),
+:host(.badge-large[vertical]:not(:empty)) {
+  @include globals.typography(globals.$ion-body-sm-medium);
+  min-width: globals.$ion-scale-400;
+  height: globals.$ion-scale-400;
+}
+
 // Badge Inside Tab Button
 // --------------------------------------------------
 
 :host([vertical].in-tab-button) {
   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;
 
+  width: globals.$ion-scale-300;
+  height: globals.$ion-scale-300;
+
   transform: translate(-50%, -50%);
 }

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-baseline-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="small" vertical="top">1</ion-badge>
+            </ion-avatar>
+            <ion-avatar size="xsmall">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="small" vertical="top">1</ion-badge>
+            </ion-avatar>
+            <ion-avatar size="small">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="medium" vertical="top">1</ion-badge>
+            </ion-avatar>
+            <ion-avatar size="medium">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="medium" vertical="top">1</ion-badge>
+            </ion-avatar>
+            <ion-avatar size="large">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="medium" vertical="top">1</ion-badge>
+            </ion-avatar>
+            <ion-avatar size="xlarge">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="large" 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="small" vertical="bottom">1</ion-badge>
+            </ion-avatar>
+            <ion-avatar size="xsmall">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="small" vertical="bottom">1</ion-badge>
+            </ion-avatar>
+            <ion-avatar size="small">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="medium" vertical="bottom">1</ion-badge>
+            </ion-avatar>
+            <ion-avatar size="medium">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="medium" vertical="bottom">1</ion-badge>
+            </ion-avatar>
+            <ion-avatar size="large">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="medium" vertical="bottom">1</ion-badge>
+            </ion-avatar>
+            <ion-avatar size="xlarge">
+              <img src="/src/components/avatar/test/avatar.svg" />
+              <ion-badge color="danger" size="large" 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="small" 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="small" 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="medium" 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="medium" 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="medium" 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="large" 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="small" 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="medium" 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="medium" 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="medium" 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="large" vertical="bottom">
+                <ion-icon icon="star"></ion-icon>
+              </ion-badge>
+            </ion-avatar>
+          </div>
         </ion-list>
 
         <ion-list id="tab-button">