feat(badge): design enhancement

projects/igniteui-angular/src/lib/badge/README.md

@@ -1,7 +1,7 @@
 # igx-badge
 
 The **igx-badge** component is an absolutely positioned element that can be used in tandem with other components such as avatars, navigation menus, or anywhere else in an app where some active indication is required.
-With the igx-badge you can display active count or an icon in several different predefined styles.  
+With the igx-badge you can display active count or an icon in several different predefined styles and sizes.  
 A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/badge.html)
 
 # Usage
@@ -13,10 +13,13 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 | Name   |      Type      |  Description |
 |:----------|:-------------:|:------|
 | `id` | string | Unique identifier of the component. If not provided it will be automatically generated.|
-| `type` | string | Set the type of the badge to either `primary`, `info`, `success`, `warning`, or `error`. This will change the background color of the badge according to the values set in the default theme. |
+| `type` | string | Set the type of the badge to either `primary`, `info`, `success`, `warning`, `error`, or `dot`. This will change the background color of the badge according to the values set in the default theme. The `dot` type creates a minimal badge without any content. |
+| `size` | string | Set the size of the badge to either `small`, `medium`, or `large`. Default is `medium`. |
 | `position` | string | Set the position of the badge relative to its parent container to either `top-right`, `top-left`, `bottom-right`, or `bottom-left`. |
 | `value` | string | Set the value to be displayed inside the badge. |
 | `icon` | string | Set an icon for the badge from the material icons set. Will not be displayed if `value` for the badge is already set. |
+| `outlined` | boolean | Set whether the badge should have an outline. Default is `false`. |
+| `shape` | string | Set the shape of the badge to either `rounded` or `square`. Default is `rounded`. |
 
 # Examples
 
@@ -26,3 +29,16 @@ Using `igx-badge` with the `igx-avatar` component to show active status.
     <igx-badge type="info" value="8"></igx-badge>
 </igx-avatar>
 ```
+
+Using `igx-badge` with different sizes.
+```html
+<igx-badge size="small" value="5"></igx-badge>
+<igx-badge size="medium" value="10"></igx-badge>
+<igx-badge size="large" value="99+"></igx-badge>
+```
+
+Using `igx-badge` as a dot indicator.
+```html
+<igx-badge type="dot"></igx-badge>
+<igx-badge type="dot" outlined></igx-badge>
+```

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

@@ -1,7 +1,7 @@
 import { Component, ViewChild } from '@angular/core';
 import { TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { IgxBadgeComponent, IgxBadgeType } from './badge.component';
+import { IgxBadgeComponent, IgxBadgeType, IgxBadgeSize } from './badge.component';
 
 describe('Badge', () => {
     beforeEach(waitForAsync(() => {
@@ -11,7 +11,9 @@ describe('Badge', () => {
                 InitBadgeWithDefaultsComponent,
                 InitBadgeWithIconComponent,
                 IgxBadgeComponent,
-                InitBadgeWithIconARIAComponent
+                InitBadgeWithIconARIAComponent,
+                InitBadgeWithSizeComponent,
+                InitBadgeWithDotTypeComponent
             ]
         }).compileComponents();
     }));
@@ -87,6 +89,33 @@ describe('Badge', () => {
         const container = fixture.nativeElement.querySelectorAll('.igx-badge')[0];
         expect(container.getAttribute('aria-roledescription')).toMatch(expectedDescription);
     });
+
+    it('Initializes badge with size', () => {
+        const fixture = TestBed.createComponent(InitBadgeWithSizeComponent);
+        fixture.detectChanges();
+        const badge = fixture.componentInstance.badge;
+        const domBadge = fixture.debugElement.query(By.css('igx-badge')).nativeElement;
+
+        expect(badge.size).toBe(IgxBadgeSize.LARGE);
+        expect(domBadge.style.getPropertyValue('--component-size')).toBe('var(--ig-size-large)');
+    });
+
+    it('Initializes badge with default size', () => {
+        const fixture = TestBed.createComponent(InitBadgeWithDefaultsComponent);
+        fixture.detectChanges();
+        const badge = fixture.componentInstance.badge;
+
+        expect(badge.size).toBe(IgxBadgeSize.MEDIUM);
+    });
+
+    it('Initializes badge with dot type', () => {
+        const fixture = TestBed.createComponent(InitBadgeWithDotTypeComponent);
+        fixture.detectChanges();
+        const badge = fixture.componentInstance.badge;
+
+        expect(badge.type).toBe(IgxBadgeType.DOT);
+        expect(fixture.debugElement.query(By.css('.igx-badge--dot'))).toBeTruthy();
+    });
 });
 
 @Component({
@@ -120,3 +149,19 @@ class InitBadgeWithIconComponent {
 class InitBadgeWithIconARIAComponent {
     @ViewChild(IgxBadgeComponent, { static: true }) public badge: IgxBadgeComponent;
 }
+
+@Component({
+    template: `<igx-badge size="large" value="10"></igx-badge>`,
+    imports: [IgxBadgeComponent]
+})
+class InitBadgeWithSizeComponent {
+    @ViewChild(IgxBadgeComponent, { static: true }) public badge: IgxBadgeComponent;
+}
+
+@Component({
+    template: `<igx-badge type="dot"></igx-badge>`,
+    imports: [IgxBadgeComponent]
+})
+class InitBadgeWithDotTypeComponent {
+    @ViewChild(IgxBadgeComponent, { static: true }) public badge: IgxBadgeComponent;
+}

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, var(--ig-size-medium, #{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 {
@@ -59,18 +60,50 @@
 
     %igx-badge--success {
         background: color($color: 'success');
+        color: white;
+
+        igx-icon {
+            color: white;
+        }
     }
 
     %igx-badge--info {
         background: color($color: 'info');
+        color: white;
+
+        igx-icon {
+            color: white;
+        }
     }
 
     %igx-badge--warn {
         background: color($color: 'warn');
+        color: white;
+
+        igx-icon {
+            color: white;
+        }
     }
 
     %igx-badge--error {
         background: color($color: 'error');
+        color: white;
+
+        igx-icon {
+            color: white;
+        }
+    }
+
+    %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 {

src/app/badge/badge.sample.html

@@ -1,21 +1,97 @@
 <div class="wrapper">
     <div class="badges">
-        <h3 class="sample-title">Angular Badge</h3>
-        <igx-badge
-            [type]="properties.variant"
-            value="8"
-            [shape]="properties.shape"
-            [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"
-                [outlined]="properties.outlined"
-            >
-                <igx-icon>bluetooth</igx-icon>
-            </igx-badge>
+        <h3 class="sample-title">Angular Badge - Interactive</h3>
+        <div class="badge-examples">
+            <div class="badge-item">
+                <igx-badge
+                    [type]="properties.variant"
+                    value="8"
+                    [shape]="properties.shape"
+                    [size]="properties.size"
+                    [outlined]="properties.outlined"
+                ></igx-badge>
+                <span>With Value</span>
+            </div>
+            <div class="badge-item">
+                <igx-badge
+                    [type]="properties.variant"
+                    [shape]="properties.shape"
+                    [size]="properties.size"
+                    [outlined]="properties.outlined"
+                >
+                    <igx-icon>bluetooth</igx-icon>
+                </igx-badge>
+                <span>With Icon</span>
+            </div>
+            <div class="badge-item 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>
+                </igx-badge>
+                <span>On Avatar</span>
+            </div>
+        </div>
+
+        <h3 class="sample-title">Size Variants</h3>
+        <div class="badge-examples">
+            <div class="badge-item">
+                <igx-badge type="info" value="5" size="small"></igx-badge>
+                <span>Small</span>
+            </div>
+            <div class="badge-item">
+                <igx-badge type="info" value="10" size="medium"></igx-badge>
+                <span>Medium</span>
+            </div>
+            <div class="badge-item">
+                <igx-badge type="info" value="99+" size="large"></igx-badge>
+                <span>Large</span>
+            </div>
+        </div>
+
+        <h3 class="sample-title">Dot Type</h3>
+        <div class="badge-examples">
+            <div class="badge-item">
+                <igx-badge type="dot"></igx-badge>
+                <span>Default Dot</span>
+            </div>
+            <div class="badge-item">
+                <igx-badge type="dot" outlined></igx-badge>
+                <span>Outlined Dot</span>
+            </div>
+            <div class="badge-item avatar-sample">
+                <igx-avatar icon="face" shape="rounded"></igx-avatar>
+                <igx-badge type="dot"></igx-badge>
+                <span>Dot on Avatar</span>
+            </div>
+        </div>
+
+        <h3 class="sample-title">Type Variants</h3>
+        <div class="badge-examples">
+            <div class="badge-item">
+                <igx-badge type="primary" value="1"></igx-badge>
+                <span>Primary</span>
+            </div>
+            <div class="badge-item">
+                <igx-badge type="info" value="2"></igx-badge>
+                <span>Info</span>
+            </div>
+            <div class="badge-item">
+                <igx-badge type="success" value="3"></igx-badge>
+                <span>Success</span>
+            </div>
+            <div class="badge-item">
+                <igx-badge type="warning" value="4"></igx-badge>
+                <span>Warning</span>
+            </div>
+            <div class="badge-item">
+                <igx-badge type="error" value="5"></igx-badge>
+                <span>Error</span>
+            </div>
         </div>
     </div>