feat(badge): Eva theme (#1407)

BREAKING CHANGE:

NbBadgeComponent status static fields removed.
STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING,
STATUS_DANGER.

NbBadgeComponent position static fields replaced with NbBadgePosition type.
Removed properties: TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT,
TOP_START, TOP_END, BOTTOM_START, BOTTOM_END.

Badge status class now set on host element

NbBadgeComponent 'positionClass' getter removed.
Badge position class set on host element.
Position class names prefixed with 'position-'.

Following theme properties were renamed:
badge-fg-text -> badge-[status]-text-color
badge-primary-bg-color -> badge-primary-background-color
badge-success-bg-color -> badge-success-background-color
badge-info-bg-color -> badge-info-background-color
badge-warning-bg-color -> badge-warning-background-color
badge-danger-bg-color -> badge-danger-background-color

Author: yggg

e2e/actions.e2e-spec.ts

@@ -5,7 +5,6 @@
  */
 
 import { browser } from 'protractor';
-import { NbBadgeComponent } from '../src/framework/theme/components/badge/badge.component';
 import badgeTests from './badge.e2e-spec';
 
 describe('nb-action', () => {
@@ -19,7 +18,7 @@ describe('nb-action', () => {
     const badgesConf = {
       selector: (i) => `nb-card:nth-child(4) nb-actions nb-action:nth-child(${i + 1}) nb-badge > span`,
       badges: [
-        { position: NbBadgeComponent.BOTTOM_LEFT, status: NbBadgeComponent.STATUS_SUCCESS, text: badgeText },
+        { position: 'bottom left', status: 'success', text: badgeText },
       ],
     };
     badgeTests(badgesConf);

e2e/user.e2e-spec.ts

@@ -5,7 +5,6 @@
  */
 
 import { browser, element, by } from 'protractor';
-import { NbBadgeComponent } from '../src/framework/theme/components/badge/badge.component';
 import badgeTests from './badge.e2e-spec';
 
 describe('nb-user', () => {
@@ -20,7 +19,7 @@ describe('nb-user', () => {
     const badgesConf = {
       selector: (i) => `.test-row:nth-child(${elementsOffset + i + 1}) nb-badge > span`,
       badges: [
-        { position: NbBadgeComponent.TOP_RIGHT, status: NbBadgeComponent.STATUS_PRIMARY, text: badgeText },
+        { position: 'top right', status: 'primary', text: badgeText },
       ],
     };
     badgeTests(badgesConf);

src/framework/theme/components/actions/actions.component.ts

@@ -8,6 +8,8 @@ import { Component, HostBinding, Input } from '@angular/core';
 
 import { convertToBoolProperty } from '../helpers';
 import { NbComponentSize } from '../component-size';
+import { NbComponentStatus } from '../component-status';
+import { NbBadgePosition } from '../badge/badge.component';
 
 /**
  * Action item, display a link with an icon, or any other content provided instead.
@@ -100,7 +102,7 @@ export class NbActionComponent {
    * 'primary', 'info', 'success', 'warning', 'danger'
    * @param {string} val
    */
-  @Input() badgeStatus: string;
+  @Input() badgeStatus: NbComponentStatus;
 
   /**
    * Badge position.
@@ -109,7 +111,7 @@ export class NbActionComponent {
    * 'top start', 'top end', 'bottom start', 'bottom end'
    * @type string
    */
-  @Input() badgePosition: string;
+  @Input() badgePosition: NbBadgePosition;
 }
 
 /**

src/framework/theme/components/actions/actions.spec.ts

@@ -188,14 +188,14 @@ describe('NbActionComponent link with icon', () => {
 
   it('should pass set badge position and status to badge component', () => {
     actionComponent.badgeText = '1';
-    actionComponent.badgePosition = NbBadgeComponent.BOTTOM_RIGHT;
-    actionComponent.badgeStatus = NbBadgeComponent.STATUS_INFO;
+    actionComponent.badgePosition = 'bottom right';
+    actionComponent.badgeStatus = 'info';
     fixture.detectChanges();
 
     const badge = fixture.debugElement.query(By.directive(NbBadgeComponent));
     const badgeComponent: NbBadgeComponent = badge.componentInstance;
-    expect(badgeComponent.position).toEqual(NbBadgeComponent.BOTTOM_RIGHT);
-    expect(badgeComponent.colorClass).toEqual(NbBadgeComponent.STATUS_INFO);
+    expect(badgeComponent.position).toEqual('bottom right');
+    expect(badgeComponent.status).toEqual('info');
   });
 });
 

src/framework/theme/components/badge/_badge.component.theme.scss

@@ -5,23 +5,19 @@
  */
 
 @mixin nb-badge-theme() {
-  .nb-badge {
-    color: nb-theme(badge-fg-text);
+  nb-badge {
+    border-radius: nb-theme(badge-border-radius);
+    font-family: nb-theme(badge-text-font-family);
+    font-size: nb-theme(badge-text-font-size);
+    font-weight: nb-theme(badge-text-font-weight);
+    line-height: nb-theme(badge-text-line-height);
+    padding: nb-theme(badge-padding);
+  }
 
-    &.nb-badge-primary {
-      background-color: nb-theme(badge-primary-bg-color);
-    }
-    &.nb-badge-info {
-      background-color: nb-theme(badge-info-bg-color);
-    }
-    &.nb-badge-success {
-      background-color: nb-theme(badge-success-bg-color);
-    }
-    &.nb-badge-warning {
-      background-color: nb-theme(badge-warning-bg-color);
-    }
-    &.nb-badge-danger {
-      background-color: nb-theme(badge-danger-bg-color);
+  @each $status in nb-get-statuses() {
+    nb-badge.status-#{$status} {
+      color: nb-theme(badge-#{$status}-text-color);
+      background-color: nb-theme(badge-#{$status}-background-color);
     }
   }
 }

src/framework/theme/components/badge/badge.component.scss

@@ -4,19 +4,37 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-:host .nb-badge {
+@import '../../styles/core/mixins';
+
+:host {
   position: absolute;
-  padding: 0.25em 0.4em;
-  font-size: 75%;
-  font-weight: 700;
-  line-height: 1;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
-  border-radius: 0.25rem;
+}
+
+:host(.position-top) {
+  top: 0;
+}
+
+:host(.position-right) {
+  right: 0;
+}
+
+:host(.position-bottom) {
+  bottom: 0;
+}
+
+:host(.position-left) {
+  left: 0;
+}
+
+:host(.position-start) {
+  @include nb-ltr(left, 0);
+  @include nb-rtl(right, 0);
+}
 
-  &.top { top: 0; }
-  &.right { right: 0; }
-  &.bottom { bottom: 0; }
-  &.left { left: 0; }
+:host(.position-end) {
+  @include nb-ltr(right, 0);
+  @include nb-rtl(left, 0);
 }

src/framework/theme/components/badge/badge.component.spec.ts

@@ -0,0 +1,111 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NbBadgeComponent, NbBadgeModule, NbBadgePosition, NbComponentStatus } from '@nebular/theme';
+
+describe('NbBadgeComponent', () => {
+  let fixture: ComponentFixture<NbBadgeComponent>;
+  let badgeComponent: NbBadgeComponent;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ NbBadgeModule ],
+    });
+
+    fixture = TestBed.createComponent(NbBadgeComponent);
+    badgeComponent = fixture.componentInstance;
+  });
+
+  it(`should contain text set to 'text' input`, () => {
+    const text = 'random badge text';
+    badgeComponent.text = text;
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.nativeElement.textContent).toEqual(text);
+  });
+
+  it('should has primary status by default', () => {
+    expect(badgeComponent.status).toEqual('primary');
+  });
+
+  it('should set status class', () => {
+    const statuses: NbComponentStatus[] = [ 'primary', 'success', 'info', 'warning', 'danger' ];
+
+    for (const status of statuses) {
+      badgeComponent.status = status;
+      fixture.detectChanges();
+
+      expect(fixture.debugElement.classes[`status-${status}`]).toEqual(true);
+    }
+  });
+
+  it(`should has 'top' class if position contains 'top'`, () => {
+    const topPositions: NbBadgePosition[] = [ 'top end', 'top left', 'top right', 'top start' ];
+
+    for (const position of topPositions) {
+      badgeComponent.position = position;
+      fixture.detectChanges();
+
+      expect(badgeComponent.top).toEqual(true);
+      expect(fixture.debugElement.classes['position-top']).toEqual(true);
+    }
+  });
+
+  it(`should has 'right' class if position contains 'right'`, () => {
+    const rightPositions: NbBadgePosition[] = [ 'top right', 'bottom right' ];
+
+    for (const position of rightPositions) {
+      badgeComponent.position = position;
+      fixture.detectChanges();
+
+      expect(badgeComponent.right).toEqual(true);
+      expect(fixture.debugElement.classes['position-right']).toEqual(true);
+    }
+  });
+
+  it(`should has 'bottom' class if position contains 'bottom'`, () => {
+    const bottomPositions: NbBadgePosition[] = [ 'bottom end', 'bottom left', 'bottom right', 'bottom start' ];
+
+    for (const position of bottomPositions) {
+      badgeComponent.position = position;
+      fixture.detectChanges();
+
+      expect(badgeComponent.bottom).toEqual(true);
+      expect(fixture.debugElement.classes['position-bottom']).toEqual(true);
+    }
+  });
+
+  it(`should has 'left' class if position contains 'left'`, () => {
+    const leftPositions: NbBadgePosition[] = [ 'top left', 'bottom left' ];
+
+    for (const position of leftPositions) {
+      badgeComponent.position = position;
+      fixture.detectChanges();
+
+      expect(badgeComponent.left).toEqual(true);
+      expect(fixture.debugElement.classes['position-left']).toEqual(true);
+    }
+  });
+
+  it(`should has 'start' class if position contains 'start'`, () => {
+    const startPositions: NbBadgePosition[] = [ 'top start', 'bottom start' ];
+
+    for (const position of startPositions) {
+      badgeComponent.position = position;
+      fixture.detectChanges();
+
+      expect(badgeComponent.start).toEqual(true);
+      expect(fixture.debugElement.classes['position-start']).toEqual(true);
+    }
+  });
+
+  it(`should has 'end' class if position contains 'end'`, () => {
+    const endPositions: NbBadgePosition[] = [ 'top end', 'bottom end' ];
+
+    for (const position of endPositions) {
+      badgeComponent.position = position;
+      fixture.detectChanges();
+
+      expect(badgeComponent.end).toEqual(true);
+      expect(fixture.debugElement.classes['position-end']).toEqual(true);
+    }
+  });
+});