fix(angular/badge): fix badge positioning on icon (#2246)

This fixes the positioning of badges on icons. Since I couldn't find any cases where the badge was positioned "above" on an icon, I would not consider this fix as a breaking change.

Fixes #2225

Author: mhaertwig

src/angular/badge/badge.md

@@ -5,6 +5,8 @@ another object.
 ### Badge position
 
 By default, the badge will be placed `above`. Alternatively `after` can be used.
+For `SbbIcon` components, the badge will always be placed in the top right corner of the icon,
+independent of the value of the position attribute.
 
 ### Badge visibility
 

src/angular/styles/_typography.scss

@@ -1746,6 +1746,11 @@ textarea {
     right: 0;
   }
 
+  :where(.sbb-icon):is(.sbb-badge-above, .sbb-badge-after) & {
+    top: calc(#{sbb.pxToRem(-2)} * var(--sbb-scaling-factor));
+    right: 0;
+  }
+
   .sbb-badge-hidden & {
     display: none;
   }

src/components-examples/angular/badge/BUILD.bazel

@@ -15,6 +15,7 @@ ng_module(
     deps = [
         "//src/angular/badge",
         "//src/angular/button",
+        "//src/angular/icon",
         "@npm//@angular/core",
     ],
 )

src/components-examples/angular/badge/badge-overview/badge-overview-example.html

@@ -1,3 +1,8 @@
 <h3 sbbBadge="4" [sbbBadgeHidden]="hidden">Text with a badge</h3>
 
+<h3>Icon with a badge</h3>
+<p>
+  <sbb-icon svgIcon="bell-medium" sbbBadge="4" [sbbBadgeHidden]="hidden"></sbb-icon>
+</p>
+
 <button sbb-button (click)="toggleBadgeVisibility()">Toggle Badge</button>

src/components-examples/angular/badge/badge-overview/badge-overview-example.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { SbbBadgeModule } from '@sbb-esta/angular/badge';
 import { SbbButtonModule } from '@sbb-esta/angular/button';
+import { SbbIcon } from '@sbb-esta/angular/icon';
 
 /**
  * @title Badge overview
@@ -9,7 +10,7 @@ import { SbbButtonModule } from '@sbb-esta/angular/button';
   selector: 'sbb-badge-overview-example',
   templateUrl: 'badge-overview-example.html',
   standalone: true,
-  imports: [SbbBadgeModule, SbbButtonModule],
+  imports: [SbbBadgeModule, SbbButtonModule, SbbIcon],
 })
 export class BadgeOverviewExample {
   hidden = false;