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

Issue number: 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?
<!-- Please describe the current behavior that you are modifying. -->
Currently the vertical prop only works for empty badges.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Added styles for badge with numbers or icons to be used as hint
(vertical prop)
- Added new tests for these scenarios and updated snapshots.
- Added best effort styles for ios/md to look decent (not on the scope
of this task and no UI from figma).

## Does this introduce a breaking change?

- [ ] Yes
- [x] 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.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

[Badge Ionic
Hint](https://ionic-framework-git-rou-11750-ionic1.vercel.app/src/components/badge/test/hint?ionic:theme=ionic)

---------

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

Author: 3 people

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%);
+  @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/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.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

@@ -1,6 +1,6 @@
 @import "../../themes/native/native.globals.md";
 @import "./badge.common";
-@import "./badge.common.vars";
+@import "./badge.native.vars";
 
 // Badge
 // --------------------------------------------------
@@ -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/badge.native.vars.scss

@@ -0,0 +1,10 @@
+@import "../../themes/functions.font";
+
+// Badge
+// --------------------------------------------------
+
+/// @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);