refactor(badge): design enhancement

Author: SisIvanova

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

@@ -153,7 +153,9 @@ export class IgxBadgeComponent {
     /** @hidden @internal */
     @HostBinding('class.igx-badge--square')
     public get _squareShape(): boolean {
-        return this.shape === 'square';
+        if (!this.dot) {
+            return this.shape === 'square';
+        }
     }
 
     /**

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

@@ -10,8 +10,11 @@
     $variant: map.get($theme, '_meta', 'theme');
 
     %igx-badge-display {
-        --size: var(--ig-size, #{rem(22px)});
-        --_badge-size: var(--size);
+        @include sizable();
+
+        --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
+        --badge-size: var(--component-size);
+        --_badge-size: #{var-get($theme, 'size')};
 
         display: inline-flex;
         justify-content: center;
@@ -25,18 +28,18 @@
         overflow: hidden;
 
         igx-icon {
-            --size: var(--igx-icon-size, calc(var(--_badge-size) / 2));
+            --size: var(--igx-icon-size, #{sizable(rem(12px), rem(14px), rem(16px))});
+            --component-size: var(--badge-size);
 
             display: inline-flex;
             justify-content: center;
             align-items: center;
-            font-weight: 400;
             color: var-get($theme, 'icon-color');
         }
 
         @if $variant == 'indigo' {
             igx-icon {
-                $icon-size: rem(12px);
+                $icon-size: sizable(rem(8px), rem(10px), rem(12px));
 
                 --ig-icon-size: #{$icon-size};
                 --igx-icon-size: #{$icon-size};
@@ -45,8 +48,7 @@
     }
 
     %igx-badge--outlined {
-        outline: rem(if($variant != 'bootstrap', 2px, 1px)) solid var-get($theme, 'border-color');
-        outline-offset: rem(-2px);
+        box-shadow: 0 0 0 rem(2px) var-get($theme, 'border-color');
     }
 
     %igx-badge--square {
@@ -55,53 +57,36 @@
 
     %igx-badge-value {
         white-space: nowrap;
-        padding-inline: pad-inline(rem(4px));
+        padding-inline: pad-inline(rem(4px), rem(6px), if($variant == 'indigo', rem(6px), rem(8px)));
     }
 
     %igx-badge--success {
-        background: color($color: 'success');
-        color: white;
-
-        igx-icon {
-            color: white;
-        }
+        background: color($color: 'success', $variant: if($variant != 'material', if($variant == 'indigo', 700, 500), 900));
     }
 
     %igx-badge--info {
-        background: color($color: 'info');
-        color: white;
-
-        igx-icon {
-            color: white;
-        }
+        background: color($color: 'info', $variant: if($variant != 'material', if($variant == 'fluent', 700, 500), 800));
     }
 
     %igx-badge--warn {
         background: color($color: 'warn');
-        color: white;
-
-        igx-icon {
-            color: white;
-        }
+        color: contrast-color($color: 'warn', $variant: 500);
     }
 
     %igx-badge--error {
-        background: color($color: 'error');
-        color: white;
-
-        igx-icon {
-            color: white;
-        }
+        background: color($color: 'error', $variant: if($variant == 'material', 700, 500));
+        color: contrast-color($color: 'error', $variant: if($variant == 'bootstrap', 100, 900));
     }
 
     %igx-badge--dot {
-        --size: #{rem(8px)};
-        min-width: var(--size);
-        min-height: var(--size);
+        --_dot-size: #{var-get($theme, 'dot-size')};
+
+        min-width: var(--_dot-size);
+        min-height: var(--_dot-size);
         padding: 0;
 
-        .igx-badge__value,
-        igx-icon {
+        igx-icon,
+        > * {
             display: none;
         }
     }
@@ -112,15 +97,28 @@
 }
 
 /// Adds typography styles for the igx-badge component.
-/// Uses the 'caption' category from the typographic scale.
+/// Uses 'caption' and 'body-2' categories from the typographic scale.
 /// @group typography
 /// @param {Map} $categories [(text: 'caption')] - The categories from the typographic scale used for type styles.
-@mixin badge-typography($categories: (text: 'caption')) {
+@mixin badge-typography($categories: (text: null), $theme: null) {
     $text: map.get($categories, 'text');
 
     %igx-badge-display {
-        @include type-style($text) {
-            margin: 0;
+        @if $text {
+            @include type-style($text);
+        } @else {
+            @if $theme == 'indigo' {
+                @include type-style('button', false) {
+                    font-size: sizable(rem(9px), rem(10px), var(--ig-button-font-size));
+                    line-height: sizable(rem(12px), rem(14px), var(--ig-button-line-height));
+                }
+            } @else {
+                font-size: sizable(var(--ig-caption-font-size), var(--ig-body-2-font-size), var(--ig-body-2-font-size));
+                font-weight: sizable(var(--ig-caption-font-weight), var(--ig-body-2-font-weight), var(--ig-body-2-font-weight));
+                line-height: sizable(var(--ig-caption-line-height), var(--ig-body-2-line-height), var(--ig-body-2-line-height));
+                letter-spacing: sizable(var(--ig-caption-letter-spacing), var(--ig-body-2-letter-spacing), var(--ig-body-2-letter-spacing));
+                text-transform: sizable(var(--ig-caption-text-transform), var(--ig-body-2-text-transform), var(--ig-body-2-text-transform));
+            }
         }
     }
 }

projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss

@@ -36,7 +36,7 @@
 @use '../components/input/file-input-theme' as *;
 
 @mixin typography($type-scale) {
-    @include badge-typography();
+    @include badge-typography($theme: 'bootstrap');
     @include banner-typography();
     @include bottom-nav-typography();
     @include button-typography();

projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss

@@ -35,7 +35,7 @@
 @use '../components/input/file-input-theme' as *;
 
 @mixin typography() {
-    @include badge-typography();
+    @include badge-typography($theme: 'fluent');
     @include banner-typography($categories: (
         message: 'caption'
     ));

projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss

@@ -35,9 +35,7 @@
 @use '../components/input/file-input-theme' as *;
 
 @mixin typography($type-scale) {
-    @include badge-typography($categories: (
-        text: 'button',
-    ));
+    @include badge-typography($theme: 'indigo');
     @include banner-typography();
     @include bottom-nav-typography();
     @include button-typography();

projects/igniteui-angular/src/lib/core/styles/typography/_material.scss

@@ -35,7 +35,7 @@
 @use '../components/input/file-input-theme' as *;
 
 @mixin typography() {
-    @include badge-typography();
+    @include badge-typography($theme: 'material');
     @include banner-typography();
     @include bottom-nav-typography();
     @include button-typography();

src/app/badge/badge.sample.html

@@ -1,14 +1,13 @@
 <div class="wrapper">
     <div class="badges">
-        <h3 class="sample-title">Angular Badge - Interactive</h3>
-        <div class="badge-examples">
+        <h3 class="sample-title">Angular Badge</h3>
+        <div class="badge-examples" [igSize]="properties.size">
             <div class="badge-item">
                 <igx-badge
                     [type]="properties.variant"
                     value="8"
                     [shape]="properties.shape"
                     [outlined]="properties.outlined"
-                    [dot]="properties.dot"
                 ></igx-badge>
                 <span>With Value</span>
             </div>
@@ -17,7 +16,6 @@ <h3 class="sample-title">Angular Badge - Interactive</h3>
                     [type]="properties.variant"
                     [shape]="properties.shape"
                     [outlined]="properties.outlined"
-                    [dot]="properties.dot"
                 >
                     <igx-icon>bluetooth</igx-icon>
                 </igx-badge>
@@ -29,67 +27,62 @@ <h3 class="sample-title">Angular Badge - Interactive</h3>
                     [type]="properties.variant"
                     [shape]="properties.shape"
                     [outlined]="properties.outlined"
-                    [dot]="properties.dot"
                 >
                     <igx-icon>bluetooth</igx-icon>
                 </igx-badge>
                 <span>On Avatar</span>
             </div>
         </div>
 
-        <h3 class="sample-title">Dot Badges</h3>
-        <div class="badge-examples">
+        <h3 class="sample-title">Dot Type Badges</h3>
+        <div class="badge-examples" [igSize]="properties.size">
             <div class="badge-item">
-                <igx-badge dot type="primary"></igx-badge>
+                <igx-badge dot type="primary" [outlined]="properties.outlined" [shape]="properties.shape"></igx-badge>
                 <span>Primary Dot</span>
             </div>
             <div class="badge-item">
-                <igx-badge dot type="info"></igx-badge>
+                <igx-badge dot type="info" [outlined]="properties.outlined"></igx-badge>
                 <span>Info Dot</span>
             </div>
             <div class="badge-item">
-                <igx-badge dot type="success"></igx-badge>
+                <igx-badge dot type="success" [outlined]="properties.outlined"></igx-badge>
                 <span>Success Dot</span>
             </div>
             <div class="badge-item">
-                <igx-badge dot type="warning"></igx-badge>
+                <igx-badge dot type="warning" [outlined]="properties.outlined"></igx-badge>
                 <span>Warning Dot</span>
             </div>
             <div class="badge-item">
-                <igx-badge dot type="error"></igx-badge>
+                <igx-badge dot type="error" [outlined]="properties.outlined"></igx-badge>
                 <span>Error Dot</span>
             </div>
-            <div class="badge-item">
-                <igx-badge dot outlined type="success"></igx-badge>
-                <span>Outlined Dot</span>
-            </div>
             <div class="badge-item avatar-sample">
                 <igx-avatar icon="face" shape="rounded"></igx-avatar>
-                <igx-badge dot type="success"></igx-badge>
+                <igx-badge dot type="success" [outlined]="properties.outlined"></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>
+                <igx-badge type="primary" value="1" [outlined]="properties.outlined" [shape]="properties.shape"></igx-badge>
                 <span>Primary</span>
             </div>
             <div class="badge-item">
-                <igx-badge type="info" value="2"></igx-badge>
+                <igx-badge type="info" value="2" [outlined]="properties.outlined" [shape]="properties.shape"></igx-badge>
                 <span>Info</span>
             </div>
             <div class="badge-item">
-                <igx-badge type="success" value="3"></igx-badge>
+                <igx-badge type="success" value="3" [outlined]="properties.outlined" [shape]="properties.shape"></igx-badge>
                 <span>Success</span>
             </div>
             <div class="badge-item">
-                <igx-badge type="warning" value="4"></igx-badge>
+                <igx-badge type="warning" value="4" [outlined]="properties.outlined" [shape]="properties.shape"></igx-badge>
                 <span>Warning</span>
             </div>
             <div class="badge-item">
-                <igx-badge type="error" value="5"></igx-badge>
+                <igx-badge type="error" value="5" [outlined]="properties.outlined" [shape]="properties.shape"></igx-badge>
                 <span>Error</span>
             </div>
         </div>

src/app/badge/badge.sample.scss

@@ -1,3 +1,5 @@
+@use '../../../projects/igniteui-angular/src/lib/core/styles/themes/utilities' as *;
+
 .wrapper {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
@@ -23,6 +25,8 @@
     flex-wrap: wrap;
     gap: 32px;
     align-items: center;
+    padding: 16px;
+    background: color($color: 'surface', $variant: 700);
 }
 
 .badge-item {
@@ -33,9 +37,7 @@
     position: relative;
 
     span {
-        font-size: 12px;
-        color: #666;
-        margin-top: 4px;
+        font-size: 14px;
     }
 }
 

src/app/badge/badge.sample.ts

@@ -3,6 +3,7 @@ import {
     IgxBadgeComponent,
     IgxAvatarComponent,
     IgxIconComponent,
+    IgSizeDirective,
 } from 'igniteui-angular';
 import {
     defineComponents,
@@ -32,11 +33,18 @@ registerIconFromText('bluetooth', bluetooth);
     styleUrls: ['badge.sample.scss'],
     templateUrl: 'badge.sample.html',
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    imports: [IgxBadgeComponent, IgxAvatarComponent, IgxIconComponent]
+    imports: [IgxBadgeComponent, IgxAvatarComponent, IgxIconComponent, IgSizeDirective]
 })
 
 export class BadgeSampleComponent {
     public panelConfig: PropertyPanelConfig = {
+        size: {
+            control: {
+                type: 'button-group',
+                options: ['small', 'medium', 'large'],
+                defaultValue: 'medium'
+            }
+        },
         shape: {
             control: {
                 type: 'button-group',
@@ -56,12 +64,6 @@ export class BadgeSampleComponent {
                 type: 'boolean',
                 defaultValue: false
             }
-        },
-        dot: {
-            control: {
-                type: 'boolean',
-                defaultValue: false
-            }
         }
     };