fix(badge): wrong shape in bootstrap theme (#12727)

* fix(badge): wrong shape in bootstrap theme
---------

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

Author: SisIvanova

CHANGELOG.md

@@ -23,6 +23,8 @@ All notable changes for each version of this project will be documented in this
     - **Breaking Change** The `onSlideChanged`, `onSlideAdded`, `onSlideRemoved`, `onCarouselPaused` and `onCarouselPlaying` outputs have been renamed to `slideChanged`, `slideAdded`, `slideRemoved`, `carouselPaused` and `carouselPlaying` to not violate the no on-prefixed outputs convention. Automatic migrations are available and will be applied on `ng update`.
 - `IgxRadio`, `IgxRadioGroup`
     - Added component validation along with styles for invalid state
+- `IgxBadge`
+    - Added `shape` property that controls the shape of the badge and can be either `square` or `rounded`. The default shape of the badge is rounded. 
 - `IgxAvatar`
     - **Breaking Change** The `roundShape` property has been deprecated and will be removed in a future version. Users can control the shape of the avatar by the newly added `shape` attribute that can be `square`, `rounded` or `circle`. The default shape of the avatar is `square`. 
 

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

@@ -108,7 +108,7 @@
         color: var-get($theme, 'text-color');
         line-height: 1;
         background: var-get($theme, 'background-color');
-        border-radius: var-get($theme, 'border-radius');
+        border-radius: 50%;
         box-shadow: var-get($theme, 'shadow');
         border-width: var-get($theme, 'border-width');
         border-color: var-get($theme, 'border-color');
@@ -128,7 +128,7 @@
     }
 
     %igx-badge--square {
-        border-radius: 0;
+        border-radius: var-get($theme, 'border-radius');
     }
 
     %igx-badge-value {

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_badge.scss

@@ -15,7 +15,7 @@
 /// @prop {Number} border-width [0] - The border width of the badge component.
 /// @prop {Map} background-color [color: ('primary', 500)] - The background color used.
 /// @prop {Number} elevation [1] - The elevation level, between 0-24, to be used for the badge shadow.
-/// @prop {Number} border-radius [11px] - The border radius used for badge. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-radius [0] - The border radius used for badge. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {Map} $default-elevation-badge
 $light-badge: extend(
     $default-elevation-badge,
@@ -40,7 +40,7 @@ $light-badge: extend(
 
         border-width: 0,
 
-        border-radius: rem(11px)
+        border-radius: 0
     )
 );