Add badge sizes, dot type, and improved outline implementation

Co-authored-by: kdinev <1472513+kdinev@users.noreply.github.com>

Author: Copilot

projects/igniteui-angular/src/lib/badge/badge.component.ts

@@ -11,9 +11,20 @@ export const IgxBadgeType = {
     INFO: 'info',
     SUCCESS: 'success',
     WARNING: 'warning',
-    ERROR: 'error'
+    ERROR: 'error',
+    DOT: 'dot'
 } as const;
 export type IgxBadgeType = (typeof IgxBadgeType)[keyof typeof IgxBadgeType];
+
+/**
+ * Determines the igxBadge size
+ */
+export const IgxBadgeSize = {
+    SMALL: 'small',
+    MEDIUM: 'medium',
+    LARGE: 'large'
+} as const;
+export type IgxBadgeSize = (typeof IgxBadgeSize)[keyof typeof IgxBadgeSize];
 /**
  * Badge provides visual notifications used to decorate avatars, menus, etc.
  *
@@ -62,7 +73,7 @@ export class IgxBadgeComponent {
     * Sets/gets the type of the badge.
     *
     * @remarks
-    * Allowed values are `primary`, `info`, `success`, `warning`, `error`.
+    * Allowed values are `primary`, `info`, `success`, `warning`, `error`, `dot`.
     * Providing an invalid value won't display a badge.
     *
     * @example
@@ -73,6 +84,21 @@ export class IgxBadgeComponent {
     @Input()
     public type: string | IgxBadgeType = IgxBadgeType.PRIMARY;
 
+   /**
+    * Sets/gets the size of the badge.
+    *
+    * @remarks
+    * Allowed values are `small`, `medium`, `large`.
+    * Default value is `medium`.
+    *
+    * @example
+    * ```html
+    * <igx-badge size="large"></igx-badge>
+    * ```
+    */
+    @Input()
+    public size: string | IgxBadgeSize = IgxBadgeSize.MEDIUM;
+
    /**
     * Sets/gets the value to be displayed inside the badge.
     *
@@ -219,4 +245,16 @@ export class IgxBadgeComponent {
     public get errorClass() {
         return this.type === IgxBadgeType.ERROR;
     }
+
+    @HostBinding('class.igx-badge--dot')
+    public get dotClass() {
+        return this.type === IgxBadgeType.DOT;
+    }
+
+    @HostBinding('style.--component-size')
+    protected get componentSize() {
+        if (this.size) {
+            return `var(--ig-size-${this.size})`;
+        }
+    }
 }

projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-component.scss

@@ -35,6 +35,10 @@
             @extend %igx-badge--error !optional;
         }
 
+        @include m(dot) {
+            @extend %igx-badge--dot !optional;
+        }
+
         @include m(outlined) {
             @extend %igx-badge--outlined !optional;
         }

projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss

@@ -10,7 +10,7 @@
     $variant: map.get($theme, '_meta', 'theme');
 
     %igx-badge-display {
-        --size: #{rem(22px)};
+        --size: var(--component-size, #{rem(22px)});
         --_badge-size: var(--size);
 
         display: inline-flex;
@@ -45,7 +45,8 @@
     }
 
     %igx-badge--outlined {
-        box-shadow: inset 0 0 0 rem(if($variant != 'bootstrap', 2px, 1px)) var-get($theme, 'border-color');
+        outline: rem(if($variant != 'bootstrap', 2px, 1px)) solid var-get($theme, 'border-color');
+        outline-offset: rem(-2px);
     }
 
     %igx-badge--square {
@@ -73,6 +74,18 @@
         background: color($color: 'error');
     }
 
+    %igx-badge--dot {
+        --size: #{rem(8px)};
+        min-width: var(--size);
+        min-height: var(--size);
+        padding: 0;
+
+        .igx-badge__value,
+        igx-icon {
+            display: none;
+        }
+    }
+
     %igx-badge--hidden {
         visibility: hidden;
     }

src/app/badge/badge.sample.html

@@ -5,13 +5,15 @@ <h3 class="sample-title">Angular Badge</h3>
             [type]="properties.variant"
             value="8"
             [shape]="properties.shape"
+            [size]="properties.size"
             [outlined]="properties.outlined"
         ></igx-badge>
         <div class="avatar-sample">
             <igx-avatar icon="face" shape="rounded"></igx-avatar>
             <igx-badge
                 [type]="properties.variant"
                 [shape]="properties.shape"
+                [size]="properties.size"
                 [outlined]="properties.outlined"
             >
                 <igx-icon>bluetooth</igx-icon>

src/app/badge/badge.sample.ts

@@ -47,10 +47,17 @@ export class BadgeSampleComponent {
         variant: {
             control: {
                 type: 'select',
-                options: ['default', 'info', 'success', 'warning', 'error'],
+                options: ['default', 'info', 'success', 'warning', 'error', 'dot'],
                 defaultValue: 'default'
             }
         },
+        size: {
+            control: {
+                type: 'button-group',
+                options: ['small', 'medium', 'large'],
+                defaultValue: 'medium'
+            }
+        },
         outlined: {
             control: {
                 type: 'boolean',
@@ -84,6 +91,7 @@ export class BadgeSampleComponent {
             success: 'success',
             warning: 'warning',
             error: 'danger',
+            dot: 'primary',
         })
     );