feat(badge): implement square shape (#12681)

* feat(badge): implement shape property

Co-authored-by: Simeon Simeonoff <[email protected]>

Author: SisIvanova

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

@@ -133,6 +133,24 @@ export class IgxBadgeComponent {
     @HostBinding('class.igx-badge')
     public cssClass = 'igx-badge';
 
+    /**
+     * Sets a square shape to the badge, if `shape` is set to `square`.
+     * By default the shape of the badge is rounded.
+     *
+     * @example
+     * ```html
+     * <igx-badge shape="square"></igx-badge>
+     * ```
+     */
+    @Input()
+    public shape: 'rounded' | 'square' = 'rounded';
+
+    /** @hidden @internal */
+    @HostBinding('class.igx-badge--square')
+    public get _squareShape(): boolean {
+        return this.shape === 'square';
+    }
+
     /**
      * Sets/gets the aria-label attribute value.
      *

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

@@ -39,6 +39,10 @@
             @extend %igx-badge--error !optional;
         }
 
+        @include m(square) {
+            @extend %igx-badge--square !optional;
+        }
+
         @include m(hidden) {
             @extend %igx-badge--hidden !optional;
         }

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

@@ -127,6 +127,10 @@
         }
     }
 
+    %igx-badge--square {
+        border-radius: 0;
+    }
+
     %igx-badge-value {
         white-space: nowrap;
         padding: $badge-value-padding;

src/app/badge/badge.sample.html

@@ -9,7 +9,7 @@ <h4 class="sample-title">In conjunction with the
 
     <div class="avatar-sample">
         <igx-avatar icon="face" size="medium"></igx-avatar>
-        <igx-badge value="8"></igx-badge>
+        <igx-badge value="8" shape="square"></igx-badge>
     </div>
 
     <div class="avatar-sample">